diff --git a/build/cool/eps.d.ts b/build/cool/eps.d.ts
index 9d44b2e..e22935c 100644
--- a/build/cool/eps.d.ts
+++ b/build/cool/eps.d.ts
@@ -834,6 +834,162 @@ declare namespace Eps {
 		[key: string]: any;
 	}
 
+	interface FlowConfigEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+
+		/**
+		 * 名称
+		 */
+		name?: string;
+
+		/**
+		 * 描述
+		 */
+		description?: string;
+
+		/**
+		 * 类型
+		 */
+		type?: string;
+
+		/**
+		 * 节点
+		 */
+		node?: string;
+
+		/**
+		 * 配置
+		 */
+		options?: json;
+
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface FlowInfoEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+
+		/**
+		 * 名称
+		 */
+		name?: string;
+
+		/**
+		 * 标签（可以根据标签调用）
+		 */
+		label?: string;
+
+		/**
+		 * 描述
+		 */
+		description?: string;
+
+		/**
+		 * 状态 0-禁用 1-禁用
+		 */
+		status?: number;
+
+		/**
+		 * 版本
+		 */
+		version?: number;
+
+		/**
+		 * 草稿
+		 */
+		draft?: json;
+
+		/**
+		 * 数据
+		 */
+		data?: json;
+
+		/**
+		 * 发布时间
+		 */
+		releaseTime?: Date;
+
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface FlowLogEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+
+		/**
+		 * 流程ID
+		 */
+		flowId?: number;
+
+		/**
+		 * 类型 0-失败 1-成功 2-未知
+		 */
+		type?: number;
+
+		/**
+		 * 传入参数
+		 */
+		inputParams?: json;
+
+		/**
+		 * 结果
+		 */
+		result?: json;
+
+		/**
+		 * 节点运行信息
+		 */
+		nodeInfo?: json;
+
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
 	interface GoodsCommentEntity {
 		/**
 		 * ID
@@ -1136,6 +1292,182 @@ declare namespace Eps {
 		[key: string]: any;
 	}
 
+	interface KnowConfigEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+
+		/**
+		 * 名称
+		 */
+		name?: string;
+
+		/**
+		 * 描述
+		 */
+		description?: string;
+
+		/**
+		 * 类型
+		 */
+		type?: string;
+
+		/**
+		 * 功能
+		 */
+		func?: string;
+
+		/**
+		 * 配置
+		 */
+		options?: json;
+
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface KnowDataInfoEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+
+		/**
+		 * 类型ID
+		 */
+		typeId?: number;
+
+		/**
+		 * 标题
+		 */
+		title?: string;
+
+		/**
+		 * 内容
+		 */
+		content?: json;
+
+		/**
+		 * 来源 0-自定义 1-文件 2-链接
+		 */
+		from?: number;
+
+		/**
+		 * 元数据
+		 */
+		metadata?: json;
+
+		/**
+		 * 状态 0-准备中 1-已就绪
+		 */
+		status?: number;
+
+		/**
+		 * 启用 0-禁用 1-启用
+		 */
+		enable?: number;
+
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface KnowDataTypeEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+
+		/**
+		 * 名称
+		 */
+		name?: string;
+
+		/**
+		 * 图标
+		 */
+		icon?: string;
+
+		/**
+		 * 描述
+		 */
+		description?: string;
+
+		/**
+		 * embedding配置ID
+		 */
+		embedConfigId?: number;
+
+		/**
+		 * embedding配置
+		 */
+		embedOptions?: json;
+
+		/**
+		 * 是否开启rerank 0-否 1-是
+		 */
+		enableRerank?: number;
+
+		/**
+		 * rerank配置ID
+		 */
+		rerankConfigId?: number;
+
+		/**
+		 * rerank配置
+		 */
+		rerankOptions?: json;
+
+		/**
+		 * 链接更新频率(天)
+		 */
+		updateFrequency?: number;
+
+		/**
+		 * 状态 0-禁用 1-启用
+		 */
+		enable?: number;
+
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
 	interface MarketCouponInfoEntity {
 		/**
 		 * ID
@@ -1811,6 +2143,20 @@ declare namespace Eps {
 		[key: string]: any;
 	}
 
+	interface ChatMessageEntity {
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface ChatSessionEntity {
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
 	interface TestEntity {
 		/**
 		 * 任意键值
@@ -2812,6 +3158,296 @@ declare namespace Eps {
 		request: Service["request"];
 	}
 
+	interface FixturesMould {
+		/**
+		 * 保存配置
+		 */
+		getFixturesPreviewCode(data?: any): Promise<any>;
+
+		/**
+		 * 获取平台页面
+		 */
+		getPlatformPages(data?: any): Promise<any>;
+
+		/**
+		 * 删除
+		 */
+		delete(data?: any): Promise<any>;
+
+		/**
+		 * 修改
+		 */
+		update(data?: any): Promise<any>;
+
+		/**
+		 * 单个信息
+		 */
+		info(data?: any): Promise<FixturesMouldEntity>;
+
+		/**
+		 * 列表查询
+		 */
+		list(data?: any): Promise<FixturesMouldEntity[]>;
+
+		/**
+		 * 分页查询
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: FixturesMouldEntity[];
+			[key: string]: any;
+		}>;
+
+		/**
+		 * 新增
+		 */
+		add(data?: any): Promise<any>;
+
+		/**
+		 * 权限标识
+		 */
+		permission: {
+			getFixturesPreviewCode: string;
+			getPlatformPages: string;
+			delete: string;
+			update: string;
+			info: string;
+			list: string;
+			page: string;
+			add: string;
+		};
+
+		/**
+		 * 权限状态
+		 */
+		_permission: {
+			getFixturesPreviewCode: boolean;
+			getPlatformPages: boolean;
+			delete: boolean;
+			update: boolean;
+			info: boolean;
+			list: boolean;
+			page: boolean;
+			add: boolean;
+		};
+
+		request: Service["request"];
+	}
+
+	interface FlowConfig {
+		/**
+		 * 通过名称获取配置
+		 */
+		getByNode(data?: any): Promise<any>;
+
+		/**
+		 * 获取节点配置
+		 */
+		config(data?: any): Promise<any>;
+
+		/**
+		 * 删除
+		 */
+		delete(data?: any): Promise<any>;
+
+		/**
+		 * 修改
+		 */
+		update(data?: any): Promise<any>;
+
+		/**
+		 * 单个信息
+		 */
+		info(data?: any): Promise<FlowConfigEntity>;
+
+		/**
+		 * 列表查询
+		 */
+		list(data?: any): Promise<FlowConfigEntity[]>;
+
+		/**
+		 * 分页查询
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: FlowConfigEntity[];
+			[key: string]: any;
+		}>;
+
+		/**
+		 * 获取所有配置
+		 */
+		all(data?: any): Promise<any>;
+
+		/**
+		 * 新增
+		 */
+		add(data?: any): Promise<any>;
+
+		/**
+		 * 权限标识
+		 */
+		permission: {
+			getByNode: string;
+			config: string;
+			delete: string;
+			update: string;
+			info: string;
+			list: string;
+			page: string;
+			all: string;
+			add: string;
+		};
+
+		/**
+		 * 权限状态
+		 */
+		_permission: {
+			getByNode: boolean;
+			config: boolean;
+			delete: boolean;
+			update: boolean;
+			info: boolean;
+			list: boolean;
+			page: boolean;
+			all: boolean;
+			add: boolean;
+		};
+
+		request: Service["request"];
+	}
+
+	interface FlowInfo {
+		/**
+		 * 发布流程
+		 */
+		release(data?: any): Promise<any>;
+
+		/**
+		 * 删除
+		 */
+		delete(data?: any): Promise<any>;
+
+		/**
+		 * 修改
+		 */
+		update(data?: any): Promise<any>;
+
+		/**
+		 * 单个信息
+		 */
+		info(data?: any): Promise<FlowInfoEntity>;
+
+		/**
+		 * 列表查询
+		 */
+		list(data?: any): Promise<FlowInfoEntity[]>;
+
+		/**
+		 * 分页查询
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: FlowInfoEntity[];
+			[key: string]: any;
+		}>;
+
+		/**
+		 * 新增
+		 */
+		add(data?: any): Promise<any>;
+
+		/**
+		 * 权限标识
+		 */
+		permission: {
+			release: string;
+			delete: string;
+			update: string;
+			info: string;
+			list: string;
+			page: string;
+			add: string;
+		};
+
+		/**
+		 * 权限状态
+		 */
+		_permission: {
+			release: boolean;
+			delete: boolean;
+			update: boolean;
+			info: boolean;
+			list: boolean;
+			page: boolean;
+			add: boolean;
+		};
+
+		request: Service["request"];
+	}
+
+	interface FlowLog {
+		/**
+		 * 删除
+		 */
+		delete(data?: any): Promise<any>;
+
+		/**
+		 * 单个信息
+		 */
+		info(data?: any): Promise<FlowLogEntity>;
+
+		/**
+		 * 列表查询
+		 */
+		list(data?: any): Promise<FlowLogEntity[]>;
+
+		/**
+		 * 分页查询
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: FlowLogEntity[];
+			[key: string]: any;
+		}>;
+
+		/**
+		 * 权限标识
+		 */
+		permission: { delete: string; info: string; list: string; page: string };
+
+		/**
+		 * 权限状态
+		 */
+		_permission: { delete: boolean; info: boolean; list: boolean; page: boolean };
+
+		request: Service["request"];
+	}
+
+	interface FlowRun {
+		/**
+		 * 调用流程
+		 */
+		invoke(data?: any): Promise<any>;
+
+		/**
+		 * 调试
+		 */
+		debug(data?: any): Promise<any>;
+
+		/**
+		 * 权限标识
+		 */
+		permission: { invoke: string; debug: string };
+
+		/**
+		 * 权限状态
+		 */
+		_permission: { invoke: boolean; debug: boolean };
+
+		request: Service["request"];
+	}
+
 	interface GoodsComment {
 		/**
 		 * 分页查询
@@ -3145,6 +3781,263 @@ declare namespace Eps {
 		request: Service["request"];
 	}
 
+	interface KnowConfig {
+		/**
+		 * 通过功能获取配置
+		 */
+		getByFunc(data?: any): Promise<any>;
+
+		/**
+		 * 获取配置
+		 */
+		config(data?: any): Promise<any>;
+
+		/**
+		 * 删除
+		 */
+		delete(data?: any): Promise<any>;
+
+		/**
+		 * 修改
+		 */
+		update(data?: any): Promise<any>;
+
+		/**
+		 * 单个信息
+		 */
+		info(data?: any): Promise<KnowConfigEntity>;
+
+		/**
+		 * 列表查询
+		 */
+		list(data?: any): Promise<KnowConfigEntity[]>;
+
+		/**
+		 * 分页查询
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: KnowConfigEntity[];
+			[key: string]: any;
+		}>;
+
+		/**
+		 * 获取所有配置
+		 */
+		all(data?: any): Promise<any>;
+
+		/**
+		 * 新增
+		 */
+		add(data?: any): Promise<any>;
+
+		/**
+		 * 权限标识
+		 */
+		permission: {
+			getByFunc: string;
+			config: string;
+			delete: string;
+			update: string;
+			info: string;
+			list: string;
+			page: string;
+			all: string;
+			add: string;
+		};
+
+		/**
+		 * 权限状态
+		 */
+		_permission: {
+			getByFunc: boolean;
+			config: boolean;
+			delete: boolean;
+			update: boolean;
+			info: boolean;
+			list: boolean;
+			page: boolean;
+			all: boolean;
+			add: boolean;
+		};
+
+		request: Service["request"];
+	}
+
+	interface KnowDataInfo {
+		/**
+		 * 删除
+		 */
+		delete(data?: any): Promise<any>;
+
+		/**
+		 * 修改
+		 */
+		update(data?: any): Promise<any>;
+
+		/**
+		 * 单个信息
+		 */
+		info(data?: any): Promise<KnowDataInfoEntity>;
+
+		/**
+		 * 列表查询
+		 */
+		list(data?: any): Promise<KnowDataInfoEntity[]>;
+
+		/**
+		 * 分页查询
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: KnowDataInfoEntity[];
+			[key: string]: any;
+		}>;
+
+		/**
+		 * 新增
+		 */
+		add(data?: any): Promise<any>;
+
+		/**
+		 * 权限标识
+		 */
+		permission: {
+			delete: string;
+			update: string;
+			info: string;
+			list: string;
+			page: string;
+			add: string;
+		};
+
+		/**
+		 * 权限状态
+		 */
+		_permission: {
+			delete: boolean;
+			update: boolean;
+			info: boolean;
+			list: boolean;
+			page: boolean;
+			add: boolean;
+		};
+
+		request: Service["request"];
+	}
+
+	interface KnowDataType {
+		/**
+		 * 重建
+		 */
+		rebuild(data?: any): Promise<any>;
+
+		/**
+		 * 删除
+		 */
+		delete(data?: any): Promise<any>;
+
+		/**
+		 * 修改
+		 */
+		update(data?: any): Promise<any>;
+
+		/**
+		 * 单个信息
+		 */
+		info(data?: any): Promise<KnowDataTypeEntity>;
+
+		/**
+		 * 列表查询
+		 */
+		list(data?: any): Promise<KnowDataTypeEntity[]>;
+
+		/**
+		 * 分页查询
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: KnowDataTypeEntity[];
+			[key: string]: any;
+		}>;
+
+		/**
+		 * 新增
+		 */
+		add(data?: any): Promise<any>;
+
+		/**
+		 * 权限标识
+		 */
+		permission: {
+			rebuild: string;
+			delete: string;
+			update: string;
+			info: string;
+			list: string;
+			page: string;
+			add: string;
+		};
+
+		/**
+		 * 权限状态
+		 */
+		_permission: {
+			rebuild: boolean;
+			delete: boolean;
+			update: boolean;
+			info: boolean;
+			list: boolean;
+			page: boolean;
+			add: boolean;
+		};
+
+		request: Service["request"];
+	}
+
+	interface KnowLoader {
+		/**
+		 * 加载文件，支持多个文件
+		 */
+		file(data?: any): Promise<any>;
+
+		/**
+		 * 加载链接
+		 */
+		link(data?: any): Promise<any>;
+
+		/**
+		 * 权限标识
+		 */
+		permission: { file: string; link: string };
+
+		/**
+		 * 权限状态
+		 */
+		_permission: { file: boolean; link: boolean };
+
+		request: Service["request"];
+	}
+
+	interface KnowRetriever {
+		/**
+		 * 调用
+		 */
+		invoke(data?: any): Promise<any>;
+
+		/**
+		 * 权限标识
+		 */
+		permission: { invoke: string };
+
+		/**
+		 * 权限状态
+		 */
+		_permission: { invoke: boolean };
+
+		request: Service["request"];
+	}
+
 	interface MarketCouponInfo {
 		/**
 		 * 删除
@@ -3778,6 +4671,130 @@ declare namespace Eps {
 		request: Service["request"];
 	}
 
+	interface ChatMessage {
+		/**
+		 * page
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: ChatMessageEntity[];
+			[key: string]: any;
+		}>;
+
+		/**
+		 * list
+		 */
+		list(data?: any): Promise<ChatMessageEntity[]>;
+
+		/**
+		 * info
+		 */
+		info(data?: any): Promise<ChatMessageEntity>;
+
+		/**
+		 * delete
+		 */
+		delete(data?: any): Promise<any>;
+
+		/**
+		 * update
+		 */
+		update(data?: any): Promise<any>;
+
+		/**
+		 * add
+		 */
+		add(data?: any): Promise<any>;
+
+		/**
+		 * 权限标识
+		 */
+		permission: {
+			page: string;
+			list: string;
+			info: string;
+			delete: string;
+			update: string;
+			add: string;
+		};
+
+		/**
+		 * 权限状态
+		 */
+		_permission: {
+			page: boolean;
+			list: boolean;
+			info: boolean;
+			delete: boolean;
+			update: boolean;
+			add: boolean;
+		};
+
+		request: Service["request"];
+	}
+
+	interface ChatSession {
+		/**
+		 * page
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: ChatSessionEntity[];
+			[key: string]: any;
+		}>;
+
+		/**
+		 * list
+		 */
+		list(data?: any): Promise<ChatSessionEntity[]>;
+
+		/**
+		 * info
+		 */
+		info(data?: any): Promise<ChatSessionEntity>;
+
+		/**
+		 * delete
+		 */
+		delete(data?: any): Promise<any>;
+
+		/**
+		 * update
+		 */
+		update(data?: any): Promise<any>;
+
+		/**
+		 * add
+		 */
+		add(data?: any): Promise<any>;
+
+		/**
+		 * 权限标识
+		 */
+		permission: {
+			page: string;
+			list: string;
+			info: string;
+			delete: string;
+			update: string;
+			add: string;
+		};
+
+		/**
+		 * 权限状态
+		 */
+		_permission: {
+			page: boolean;
+			list: boolean;
+			info: boolean;
+			delete: boolean;
+			update: boolean;
+			add: boolean;
+		};
+
+		request: Service["request"];
+	}
+
 	interface Test {
 		/**
 		 * page
@@ -3985,82 +5002,6 @@ declare namespace Eps {
 		request: Service["request"];
 	}
 
-	interface FixturesMould {
-		/**
-		 * 保存配置
-		 */
-		getFixturesPreviewCode(data?: any): Promise<any>;
-
-		/**
-		 * 获取平台页面
-		 */
-		getPlatformPages(data?: any): Promise<any>;
-
-		/**
-		 * 删除
-		 */
-		delete(data?: any): Promise<any>;
-
-		/**
-		 * 修改
-		 */
-		update(data?: any): Promise<any>;
-
-		/**
-		 * 单个信息
-		 */
-		info(data?: any): Promise<FixturesMouldEntity>;
-
-		/**
-		 * 列表查询
-		 */
-		list(data?: any): Promise<FixturesMouldEntity[]>;
-
-		/**
-		 * 分页查询
-		 */
-		page(data?: any): Promise<{
-			pagination: { size: number; page: number; total: number; [key: string]: any };
-			list: FixturesMouldEntity[];
-			[key: string]: any;
-		}>;
-
-		/**
-		 * 新增
-		 */
-		add(data?: any): Promise<any>;
-
-		/**
-		 * 权限标识
-		 */
-		permission: {
-			getFixturesPreviewCode: string;
-			getPlatformPages: string;
-			delete: string;
-			update: string;
-			info: string;
-			list: string;
-			page: string;
-			add: string;
-		};
-
-		/**
-		 * 权限状态
-		 */
-		_permission: {
-			getFixturesPreviewCode: boolean;
-			getPlatformPages: boolean;
-			delete: boolean;
-			update: boolean;
-			info: boolean;
-			list: boolean;
-			page: boolean;
-			add: boolean;
-		};
-
-		request: Service["request"];
-	}
-
 	type Service = {
 		/**
 		 * 基础请求
@@ -4095,6 +5036,8 @@ declare namespace Eps {
 		count: { home: CountHome };
 		cs: { msg: CsMsg; session: CsSession };
 		dict: { info: DictInfo; type: DictType };
+		fixtures: { mould: FixturesMould };
+		flow: { config: FlowConfig; info: FlowInfo; log: FlowLog; run: FlowRun };
 		goods: {
 			comment: GoodsComment;
 			info: GoodsInfo;
@@ -4103,6 +5046,12 @@ declare namespace Eps {
 			type: GoodsType;
 		};
 		info: { banner: InfoBanner };
+		know: {
+			config: KnowConfig;
+			data: { info: KnowDataInfo; type: KnowDataType };
+			loader: KnowLoader;
+			retriever: KnowRetriever;
+		};
 		market: { coupon: { info: MarketCouponInfo; user: MarketCouponUser } };
 		order: { info: OrderInfo };
 		plugin: { info: PluginInfo };
@@ -4110,8 +5059,8 @@ declare namespace Eps {
 		space: { info: SpaceInfo; type: SpaceType };
 		task: { info: TaskInfo };
 		user: { address: UserAddress; info: UserInfo };
+		chat: { message: ChatMessage; session: ChatSession };
 		test: Test;
 		demo: { user: { follow: DemoUserFollow; info: DemoUserInfo } };
-		fixtures: { mould: FixturesMould };
 	};
 }
diff --git a/build/cool/eps.json b/build/cool/eps.json
index 9b9691f..0f5df37 100644
--- a/build/cool/eps.json
+++ b/build/cool/eps.json
@@ -1 +1 @@
-[{"prefix":"/admin/app/complain","name":"AppComplainEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/app/feedback","name":"AppFeedbackEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/app/goods","name":"AppGoodsEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/app/version","name":"AppVersionEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/base/comm","name":"","api":[{"method":"post","path":"/personUpdate"},{"method":"get","path":"/uploadMode"},{"method":"get","path":"/permmenu"},{"method":"get","path":"/person"},{"method":"post","path":"/upload"},{"method":"post","path":"/logout"}]},{"prefix":"/admin/base/open","name":"","api":[{"method":"get","path":"/refreshToken"},{"method":"get","path":"/captcha"},{"method":"post","path":"/login"},{"method":"get","path":"/html"},{"method":"get","path":"/eps"}]},{"prefix":"/admin/base/sys/department","name":"BaseSysDepartmentEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"post","path":"/order"},{"method":"post","path":"/list"},{"method":"post","path":"/add"}]},{"prefix":"/admin/base/sys/log","name":"BaseSysLogEntity","api":[{"method":"post","path":"/setKeep"},{"method":"get","path":"/getKeep"},{"method":"post","path":"/clear"},{"method":"post","path":"/page"}]},{"prefix":"/admin/base/sys/menu","name":"BaseSysMenuEntity","api":[{"method":"post","path":"/create"},{"method":"post","path":"/export"},{"method":"post","path":"/import"},{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"post","path":"/parse"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/base/sys/param","name":"BaseSysParamEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/html"},{"method":"get","path":"/info"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/base/sys/role","name":"BaseSysRoleEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/base/sys/user","name":"BaseSysUserEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"post","path":"/move"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/count/home","name":"","api":[{"method":"post","path":"/goodsCategory"},{"method":"post","path":"/orderSummary"},{"method":"post","path":"/userSummary"},{"method":"post","path":"/orderChart"},{"method":"post","path":"/userChart"},{"method":"post","path":"/goodsRank"}]},{"prefix":"/admin/cs/msg","name":"CsMsgEntity","api":[{"method":"get","path":"/unreadCount"},{"method":"post","path":"/read"},{"method":"post","path":"/page"}]},{"prefix":"/admin/cs/session","name":"CsSessionEntity","api":[{"method":"get","path":"/detail"},{"method":"post","path":"/create"},{"method":"post","path":"/page"}]},{"prefix":"/admin/cs/session","name":"","api":[{"method":"get","path":"/detail"},{"method":"post","path":"/create"},{"method":"post","path":"/page"}]},{"prefix":"/admin/dict/info","name":"DictInfoEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"post","path":"/data"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/dict/type","name":"DictTypeEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/fixtures/mould","name":"FixturesMouldEntity","api":[{"method":"post","path":"/getFixturesPreviewCode"},{"method":"get","path":"/getPlatformPages"},{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/goods/comment","name":"GoodsCommentEntity","api":[{"method":"post","path":"/page"}]},{"prefix":"/admin/goods/info","name":"GoodsInfoEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/goods/searchKeyword","name":"GoodsSearchKeywordEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/goods/spec","name":"GoodsSpecEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/goods/type","name":"GoodsTypeEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/info/banner","name":"InfoBannerEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/market/coupon/info","name":"MarketCouponInfoEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/market/coupon/user","name":"MarketCouponUserEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/order/info","name":"OrderInfoEntity","api":[{"method":"post","path":"/refundHandle"},{"method":"get","path":"/logistics"},{"method":"post","path":"/deliver"},{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"}]},{"prefix":"/admin/plugin/info","name":"PluginInfoEntity","api":[{"method":"post","path":"/install"},{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/recycle/data","name":"RecycleDataEntity","api":[{"method":"post","path":"/restore"},{"method":"get","path":"/info"},{"method":"post","path":"/page"}]},{"prefix":"/admin/space/info","name":"SpaceInfoEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/space/type","name":"SpaceTypeEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/task/info","name":"TaskInfoEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"post","path":"/start"},{"method":"post","path":"/once"},{"method":"post","path":"/stop"},{"method":"get","path":"/info"},{"method":"post","path":"/page"},{"method":"get","path":"/log"},{"method":"post","path":"/add"}]},{"prefix":"/admin/user/address","name":"UserAddressEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/user/info","name":"UserInfoEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/test","name":"TestEntity","api":[{"path":"/page"},{"path":"/update"},{"path":"/add"},{"path":"/info"},{"path":"/delete"},{"path":"/list"}]},{"prefix":"/admin/demo/user/follow","name":"DemoUserFollowEntity","api":[{"path":"/page"},{"path":"/list"},{"path":"/info"},{"path":"/delete"},{"path":"/update"},{"path":"/add"}]},{"prefix":"/admin/demo/user/info","name":"DemoUserInfoEntity","api":[{"path":"/t1"},{"path":"/t2"},{"path":"/t3"},{"path":"/page"},{"path":"/list"},{"path":"/info"},{"path":"/delete"},{"path":"/update"},{"path":"/add"}]}]
\ No newline at end of file
+[{"prefix":"/admin/app/complain","name":"AppComplainEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/app/feedback","name":"AppFeedbackEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/app/goods","name":"AppGoodsEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/app/version","name":"AppVersionEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/base/comm","name":"","api":[{"method":"post","path":"/personUpdate"},{"method":"get","path":"/uploadMode"},{"method":"get","path":"/permmenu"},{"method":"get","path":"/person"},{"method":"post","path":"/upload"},{"method":"post","path":"/logout"}]},{"prefix":"/admin/base/open","name":"","api":[{"method":"get","path":"/refreshToken"},{"method":"get","path":"/captcha"},{"method":"post","path":"/login"},{"method":"get","path":"/html"},{"method":"get","path":"/eps"}]},{"prefix":"/admin/base/sys/department","name":"BaseSysDepartmentEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"post","path":"/order"},{"method":"post","path":"/list"},{"method":"post","path":"/add"}]},{"prefix":"/admin/base/sys/log","name":"BaseSysLogEntity","api":[{"method":"post","path":"/setKeep"},{"method":"get","path":"/getKeep"},{"method":"post","path":"/clear"},{"method":"post","path":"/page"}]},{"prefix":"/admin/base/sys/menu","name":"BaseSysMenuEntity","api":[{"method":"post","path":"/create"},{"method":"post","path":"/export"},{"method":"post","path":"/import"},{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"post","path":"/parse"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/base/sys/param","name":"BaseSysParamEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/html"},{"method":"get","path":"/info"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/base/sys/role","name":"BaseSysRoleEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/base/sys/user","name":"BaseSysUserEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"post","path":"/move"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/count/home","name":"","api":[{"method":"post","path":"/goodsCategory"},{"method":"post","path":"/orderSummary"},{"method":"post","path":"/userSummary"},{"method":"post","path":"/orderChart"},{"method":"post","path":"/userChart"},{"method":"post","path":"/goodsRank"}]},{"prefix":"/admin/cs/msg","name":"CsMsgEntity","api":[{"method":"get","path":"/unreadCount"},{"method":"post","path":"/read"},{"method":"post","path":"/page"}]},{"prefix":"/admin/cs/session","name":"CsSessionEntity","api":[{"method":"get","path":"/detail"},{"method":"post","path":"/create"},{"method":"post","path":"/page"}]},{"prefix":"/admin/cs/session","name":"","api":[{"method":"get","path":"/detail"},{"method":"post","path":"/create"},{"method":"post","path":"/page"}]},{"prefix":"/admin/dict/info","name":"DictInfoEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"post","path":"/data"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/dict/type","name":"DictTypeEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/fixtures/mould","name":"FixturesMouldEntity","api":[{"method":"post","path":"/getFixturesPreviewCode"},{"method":"get","path":"/getPlatformPages"},{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/flow/config","name":"FlowConfigEntity","api":[{"method":"get","path":"/getByNode"},{"method":"post","path":"/config"},{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"get","path":"/all"},{"method":"post","path":"/add"}]},{"prefix":"/admin/flow/info","name":"FlowInfoEntity","api":[{"method":"post","path":"/release"},{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/flow/log","name":"FlowLogEntity","api":[{"method":"post","path":"/delete"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"}]},{"prefix":"/admin/flow/run","name":"","api":[{"method":"post","path":"/invoke"},{"method":"post","path":"/debug"}]},{"prefix":"/admin/goods/comment","name":"GoodsCommentEntity","api":[{"method":"post","path":"/page"}]},{"prefix":"/admin/goods/info","name":"GoodsInfoEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/goods/searchKeyword","name":"GoodsSearchKeywordEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/goods/spec","name":"GoodsSpecEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/goods/type","name":"GoodsTypeEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/info/banner","name":"InfoBannerEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/know/config","name":"KnowConfigEntity","api":[{"method":"get","path":"/getByFunc"},{"method":"post","path":"/config"},{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"get","path":"/all"},{"method":"post","path":"/add"}]},{"prefix":"/admin/know/data/info","name":"KnowDataInfoEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/know/data/type","name":"KnowDataTypeEntity","api":[{"method":"post","path":"/rebuild"},{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/know/loader","name":"","api":[{"method":"post","path":"/file"},{"method":"post","path":"/link"}]},{"prefix":"/admin/know/retriever","name":"","api":[{"method":"post","path":"/invoke"}]},{"prefix":"/admin/market/coupon/info","name":"MarketCouponInfoEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/market/coupon/user","name":"MarketCouponUserEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/order/info","name":"OrderInfoEntity","api":[{"method":"post","path":"/refundHandle"},{"method":"get","path":"/logistics"},{"method":"post","path":"/deliver"},{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"}]},{"prefix":"/admin/plugin/info","name":"PluginInfoEntity","api":[{"method":"post","path":"/install"},{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/recycle/data","name":"RecycleDataEntity","api":[{"method":"post","path":"/restore"},{"method":"get","path":"/info"},{"method":"post","path":"/page"}]},{"prefix":"/admin/space/info","name":"SpaceInfoEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/space/type","name":"SpaceTypeEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/task/info","name":"TaskInfoEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"post","path":"/start"},{"method":"post","path":"/once"},{"method":"post","path":"/stop"},{"method":"get","path":"/info"},{"method":"post","path":"/page"},{"method":"get","path":"/log"},{"method":"post","path":"/add"}]},{"prefix":"/admin/user/address","name":"UserAddressEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/user/info","name":"UserInfoEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/admin/chat/message","name":"ChatMessageEntity","api":[{"path":"/page"},{"path":"/list"},{"path":"/info"},{"path":"/delete"},{"path":"/update"},{"path":"/add"}]},{"prefix":"/admin/chat/session","name":"ChatSessionEntity","api":[{"path":"/page"},{"path":"/list"},{"path":"/info"},{"path":"/delete"},{"path":"/update"},{"path":"/add"}]},{"prefix":"/admin/test","name":"TestEntity","api":[{"path":"/page"},{"path":"/update"},{"path":"/add"},{"path":"/info"},{"path":"/delete"},{"path":"/list"}]},{"prefix":"/admin/demo/user/follow","name":"DemoUserFollowEntity","api":[{"path":"/page"},{"path":"/list"},{"path":"/info"},{"path":"/delete"},{"path":"/update"},{"path":"/add"}]},{"prefix":"/admin/demo/user/info","name":"DemoUserInfoEntity","api":[{"path":"/t1"},{"path":"/t2"},{"path":"/t3"},{"path":"/page"},{"path":"/list"},{"path":"/info"},{"path":"/delete"},{"path":"/update"},{"path":"/add"}]}]
\ No newline at end of file
diff --git a/package.json b/package.json
index 7dab5be..86d6bfb 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,11 @@
 		"@vueuse/core": "^10.4.0",
 		"@wangeditor/editor": "^5.1.23",
 		"@wangeditor/editor-for-vue": "^5.1.12",
+		"@vue-flow/background": "^1.3.0",
+		"@vue-flow/controls": "^1.1.2",
+		"@vue-flow/core": "^1.36.0",
+		"@vue-flow/minimap": "^1.5.0",
+		"@vue-flow/node-resizer": "^1.3.6",
 		"axios": "^1.7.2",
 		"chardet": "^2.0.0",
 		"core-js": "^3.32.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 98a12c3..10e22b1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,21 @@ importers:
       '@element-plus/icons-vue':
         specifier: ^2.3.1
         version: 2.3.1(vue@3.5.13(typescript@5.7.3))
+      '@vue-flow/background':
+        specifier: ^1.3.0
+        version: 1.3.2(@vue-flow/core@1.41.7(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
+      '@vue-flow/controls':
+        specifier: ^1.1.2
+        version: 1.1.2(@vue-flow/core@1.41.7(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
+      '@vue-flow/core':
+        specifier: ^1.36.0
+        version: 1.41.7(vue@3.5.13(typescript@5.7.3))
+      '@vue-flow/minimap':
+        specifier: ^1.5.0
+        version: 1.5.0(@vue-flow/core@1.41.7(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
+      '@vue-flow/node-resizer':
+        specifier: ^1.3.6
+        version: 1.4.0(@vue-flow/core@1.41.7(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
       '@vueuse/core':
         specifier: ^10.4.0
         version: 10.11.1(vue@3.5.13(typescript@5.7.3))
@@ -897,6 +912,35 @@ packages:
       vite: ^5.0.0 || ^6.0.0
       vue: ^3.2.25
 
+  '@vue-flow/background@1.3.2':
+    resolution: {integrity: sha512-eJPhDcLj1wEo45bBoqTXw1uhl0yK2RaQGnEINqvvBsAFKh/camHJd5NPmOdS1w+M9lggc9igUewxaEd3iCQX2w==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+
+  '@vue-flow/controls@1.1.2':
+    resolution: {integrity: sha512-6dtl/JnwDBNau5h3pDBdOCK6tdxiVAOL3cyruRL61gItwq5E97Hmjmj2BIIqX2p7gU1ENg3z80Z4zlu58fGlsg==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+
+  '@vue-flow/core@1.41.7':
+    resolution: {integrity: sha512-YAavc1wD8nll5IECnUyqzzNX+Y5WEGm7drmVOdkRPU8z9VkxlbgtokK+sTjz3N232Dm9pHuXRHD+u0HHRk0kdQ==}
+    peerDependencies:
+      vue: ^3.3.0
+
+  '@vue-flow/minimap@1.5.0':
+    resolution: {integrity: sha512-JhxXDF+8uTc7sgkZHDIvFpHqSl4wsK9xp8Kz5OHwNcXlgGcwqj4yad6jcc1B6bGxm+huESpNmoPotQbpMn6rVw==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+
+  '@vue-flow/node-resizer@1.4.0':
+    resolution: {integrity: sha512-S52MRcSpd6asza8Cl0bKM2sHGrbq7vBydKHDuPdoTD+cvjNX6XF4LSiPZOuzExePI6b+O6dg2EZ1378oOLGFpA==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+
   '@vue/babel-helper-vue-transform-on@1.2.5':
     resolution: {integrity: sha512-lOz4t39ZdmU4DJAa2hwPYmKc8EsuGa2U0L9KaZaOJUt0UwQNjNA3AZTq6uEivhOKhhG1Wvy96SvYBoFmCg3uuw==}
 
@@ -1290,6 +1334,44 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  d3-transition@3.0.1:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+
   d@1.0.2:
     resolution: {integrity: sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==}
     engines: {node: '>=0.12'}
@@ -3533,6 +3615,40 @@ snapshots:
       vite: 5.4.11(@types/node@20.17.12)(sass@1.83.1)(terser@5.37.0)
       vue: 3.5.13(typescript@5.7.3)
 
+  '@vue-flow/background@1.3.2(@vue-flow/core@1.41.7(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@vue-flow/core': 1.41.7(vue@3.5.13(typescript@5.7.3))
+      vue: 3.5.13(typescript@5.7.3)
+
+  '@vue-flow/controls@1.1.2(@vue-flow/core@1.41.7(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@vue-flow/core': 1.41.7(vue@3.5.13(typescript@5.7.3))
+      vue: 3.5.13(typescript@5.7.3)
+
+  '@vue-flow/core@1.41.7(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@vueuse/core': 10.11.1(vue@3.5.13(typescript@5.7.3))
+      d3-drag: 3.0.0
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+      vue: 3.5.13(typescript@5.7.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
+  '@vue-flow/minimap@1.5.0(@vue-flow/core@1.41.7(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@vue-flow/core': 1.41.7(vue@3.5.13(typescript@5.7.3))
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+      vue: 3.5.13(typescript@5.7.3)
+
+  '@vue-flow/node-resizer@1.4.0(@vue-flow/core@1.41.7(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@vue-flow/core': 1.41.7(vue@3.5.13(typescript@5.7.3))
+      d3-drag: 3.0.0
+      d3-selection: 3.0.0
+      vue: 3.5.13(typescript@5.7.3)
+
   '@vue/babel-helper-vue-transform-on@1.2.5': {}
 
   '@vue/babel-plugin-jsx@1.2.5(@babel/core@7.26.0)':
@@ -4020,6 +4136,42 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  d3-color@3.1.0: {}
+
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  d3-ease@3.0.1: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-selection@3.0.0: {}
+
+  d3-timer@3.0.1: {}
+
+  d3-transition@3.0.1(d3-selection@3.0.0):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  d3-zoom@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
   d@1.0.2:
     dependencies:
       es5-ext: 0.10.64
diff --git a/src/modules/chat/components/index.vue b/src/modules/chat/components/index.vue
new file mode 100644
index 0000000..c928906
--- /dev/null
+++ b/src/modules/chat/components/index.vue
@@ -0,0 +1,259 @@
+<template>
+	<div class="cl-chat__wrap">
+		<el-badge :value="unCount" :hidden="!unCount">
+			<div class="cl-chat__icon" @click="open">
+				<cl-svg name="icon-notice" :size="16" />
+			</div>
+		</el-badge>
+
+		<!-- 弹框 -->
+		<cl-dialog
+			v-model="visible"
+			title="聊天窗口"
+			height="70vh"
+			width="1200px"
+			padding="0"
+			keep-alive
+			:scrollbar="false"
+			:close-on-click-modal="false"
+			close-on-press-escape
+			:controls="['slot-expand', 'cl-flex1', 'fullscreen', 'close']"
+		>
+			<div
+				class="cl-chat"
+				:class="{
+					'is-mini': browser.isMini,
+					'is-expand': isExpand
+				}"
+			>
+				<div class="cl-chat__session">
+					<chat-session />
+				</div>
+
+				<div class="cl-chat__right">
+					<chat-message />
+				</div>
+			</div>
+
+			<!-- 展开按钮 -->
+			<template #slot-expand>
+				<button class="cl-dialog__controls-icon">
+					<el-icon @click="isExpand = true" v-if="!isExpand">
+						<notebook />
+					</el-icon>
+					<el-icon @click="isExpand = false" v-else>
+						<arrow-left />
+					</el-icon>
+				</button>
+			</template>
+		</cl-dialog>
+	</div>
+</template>
+
+<script lang="ts" name="cl-chat" setup>
+import { nextTick, provide, ref } from "vue";
+import dayjs from "dayjs";
+import { useCool, config, module, useBrowser } from "/@/cool";
+import { useBase } from "/$/base";
+import { Notebook, ArrowLeft } from "@element-plus/icons-vue";
+import { debounce } from "lodash-es";
+// import io from "socket.io-client";
+import { Socket } from "socket.io-client";
+import ChatMessage from "./message.vue";
+import ChatSession from "./session.vue";
+import { Chat } from "../types";
+import { useStore } from "../store";
+
+// const { mitt } = useCool();
+const { browser, onScreenChange } = useBrowser();
+
+// 缓存
+const { session, message } = useStore();
+
+// 缓存
+const { user } = useBase();
+
+// 模块配置
+// const { options } = module.get("chat");
+
+// 是否可见
+const visible = ref(false);
+
+// 是否展开
+const isExpand = ref(true);
+
+// 未读消息
+const unCount = ref(parseInt(String(Math.random() * 100)));
+
+// Socket
+let socket: Socket;
+
+// 连接
+function connect() {
+	refresh();
+
+	// if (!socket) {
+	// 	socket = io(config.host + options.path, {
+	// 		auth: {
+	// 			token: user.token
+	// 		}
+	// 	});
+
+	// 	socket.on("connect", () => {
+	// 		console.log(`connect ${user.info?.nickName}`);
+
+	// 		// 监听消息
+	// 		socket.on("message", (msg) => {
+	// 			console.log(msg);
+	// 			mitt("chat-message", msg);
+	// 		});
+
+	// 		refresh();
+	// 	});
+
+	// 	socket.on("disconnect", (err) => {
+	// 		console.error(err);
+	// 	});
+	// }
+}
+
+// 打开
+function open() {
+	visible.value = true;
+	connect();
+}
+
+// 关闭
+function close() {
+	visible.value = false;
+}
+
+// 收起、展开
+function expand(value?: boolean) {
+	isExpand.value = value === undefined ? !isExpand.value : value;
+}
+
+// 发送消息
+function send(data: Chat.Message, isAppend?: boolean) {
+	// socket.emit("message", {});
+
+	if (isAppend) {
+		append(data);
+	}
+}
+
+// 追加消息
+function append(data: Chat.Message) {
+	message.list.push({
+		fromId: user.info?.id,
+		toId: session.value?.userId,
+		avatar: user.info?.headImg,
+		nickName: user.info?.nickName,
+		createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+		...data
+	});
+
+	scrollToBottom();
+}
+
+// 滚动到底部
+const scrollToBottom = debounce(() => {
+	nextTick(() => {
+		const box = document.querySelector(".cl-chat .chat-message .list");
+		box?.scroll({
+			top: 100000 + Math.random(),
+			behavior: "smooth"
+		});
+	});
+}, 300);
+
+// 刷新
+async function refresh() {
+	await session.get();
+	await message.get();
+	scrollToBottom();
+}
+
+provide("chat", {
+	get socket() {
+		return socket;
+	},
+	send,
+	append,
+	expand,
+	scrollToBottom
+});
+
+// 监听屏幕变化
+onScreenChange(() => {
+	isExpand.value = browser.isMini ? false : true;
+});
+
+defineExpose({
+	open,
+	close
+});
+</script>
+
+<style lang="scss">
+.cl-chat {
+	display: flex;
+	justify-content: flex-end;
+	background-color: #eee;
+	padding: 5px;
+	box-sizing: border-box;
+	position: relative;
+	color: #000;
+	height: 100%;
+
+	&__icon {
+		padding: 0 5px;
+		text-align: center;
+
+		&:hover {
+			color: var(--color-primary);
+		}
+	}
+
+	&__footer {
+		padding: 9px 0;
+	}
+
+	&__session {
+		height: calc(100% - 10px);
+		width: 345px;
+		position: absolute;
+		left: 5px;
+		top: 5px;
+	}
+
+	&__right {
+		position: relative;
+		z-index: 99;
+		transition: width 0.3s;
+		width: 100%;
+	}
+
+	&.is-mini {
+		&.is-expand {
+			.cl-chat__session {
+				z-index: 100;
+			}
+		}
+
+		.cl-chat__session {
+			width: calc(100% - 10px);
+		}
+
+		.cl-chat__right {
+			width: 100% !important;
+		}
+	}
+
+	&.is-expand {
+		.cl-chat__right {
+			width: calc(100% - 350px);
+		}
+	}
+}
+</style>
diff --git a/src/modules/chat/components/message.vue b/src/modules/chat/components/message.vue
new file mode 100644
index 0000000..25dfb4a
--- /dev/null
+++ b/src/modules/chat/components/message.vue
@@ -0,0 +1,354 @@
+<template>
+	<div class="chat-message" v-loading="message?.loading" element-loading-text="消息列表加载中">
+		<!-- 头部 -->
+		<div class="head">
+			<template v-if="session?.value">
+				<div class="avatar">
+					<cl-avatar :size="30" shape="square" :src="session?.value.avatar" />
+				</div>
+				<span class="name">与“{{ session?.value.nickName }}”聊天中</span>
+			</template>
+		</div>
+
+		<!-- 消息列表 -->
+		<el-scrollbar class="list">
+			<ul>
+				<li v-for="(item, index) in list" :key="index">
+					<div
+						class="item"
+						:class="{
+							'is-right': item.isMy
+						}"
+					>
+						<div class="avatar">
+							<cl-avatar :size="36" shape="square" :src="item.avatar" />
+						</div>
+
+						<div
+							class="det"
+							@contextmenu="
+								(e) => {
+									onContextMenu(e, item);
+								}
+							"
+						>
+							<div class="h">
+								<span class="name">{{ item.nickName }}</span>
+							</div>
+							<div class="content">
+								<!-- 文本 -->
+								<div class="is-text" v-if="item.contentType == 0">
+									<span>{{ item.content.text }}</span>
+								</div>
+
+								<!-- 图片 -->
+								<div class="is-image" v-else-if="item.contentType == 1">
+									<el-image
+										:src="item.content.imageUrl"
+										:preview-src-list="previewUrls"
+										:initial-index="item._index"
+										scroll-container=".chat-message .list"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+				</li>
+			</ul>
+		</el-scrollbar>
+
+		<!-- 底部 -->
+		<div class="footer">
+			<div class="tools">
+				<ul>
+					<cl-upload @success="onImageSend" :show-file-list="false">
+						<li>
+							<el-icon><picture-filled /></el-icon>
+						</li>
+					</cl-upload>
+
+					<li>
+						<el-icon><video-camera /></el-icon>
+					</li>
+
+					<li>
+						<el-icon><microphone /></el-icon>
+					</li>
+
+					<li>
+						<el-icon><location /></el-icon>
+					</li>
+				</ul>
+			</div>
+
+			<div class="input">
+				<el-input
+					v-model="value"
+					type="textarea"
+					:rows="4"
+					resize="none"
+					:autosize="{
+						minRows: 4,
+						maxRows: 10
+					}"
+					placeholder="输入内容"
+				></el-input>
+				<el-button type="success" @click="onTextSend" :disabled="!value">发送</el-button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { useChat } from "../hooks";
+import { useStore } from "../store";
+import { PictureFilled, VideoCamera, Microphone, Location } from "@element-plus/icons-vue";
+import { useBase } from "/$/base";
+import { ContextMenu } from "@cool-vue/crud";
+import { useClipboard } from "@vueuse/core";
+import { Chat } from "../types";
+import { ElMessage } from "element-plus";
+
+const { user } = useBase();
+const { chat } = useChat();
+const { message, session } = useStore();
+const { copy } = useClipboard();
+
+const value = ref("");
+
+// 过滤列表
+const list = computed(() => {
+	let n = 0;
+
+	return message.list.map((e) => {
+		if (e.contentType == 1) {
+			e._index = n++;
+		}
+
+		// 是否自己发的消息
+		e.isMy = e.fromId == user.info?.id;
+
+		return e;
+	});
+});
+
+// 预览图片地址
+const previewUrls = computed(() =>
+	message.list
+		.filter((e) => e.contentType == 1)
+		.map((e) => e.content?.imageUrl)
+		.filter(Boolean)
+);
+
+// 文本消息
+function onTextSend() {
+	chat.send(
+		{
+			contentType: 0,
+			content: {
+				text: value.value
+			}
+		},
+		true
+	);
+	value.value = "";
+}
+
+// 图片消息
+function onImageSend(res: any) {
+	chat.send(
+		{
+			contentType: 1,
+			content: {
+				imageUrl: res.url
+			}
+		},
+		true
+	);
+	value.value = "";
+}
+
+// 右键菜单
+function onContextMenu(e: Event, item: Chat.Message) {
+	ContextMenu.open(e, {
+		hover: {
+			target: "content"
+		},
+		list: [
+			{
+				label: "复制",
+				callback(done) {
+					copy(item.content.text || "");
+					ElMessage.success("复制成功");
+					done();
+				}
+			},
+			{
+				label: "转发"
+			},
+			{
+				label: "删除"
+			}
+		]
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.chat-message {
+	display: flex;
+	flex-direction: column;
+	background-color: #fff;
+	border-radius: 6px;
+	height: 100%;
+	box-sizing: border-box;
+
+	.head {
+		display: flex;
+		align-items: center;
+		height: 50px;
+		padding: 0 10px;
+
+		.name {
+			margin-left: 10px;
+			font-size: 14px;
+		}
+
+		ul {
+			li {
+				list-style: none;
+			}
+		}
+	}
+
+	.list {
+		flex: 1;
+		background-color: #f7f7f7;
+
+		ul {
+			& > li {
+				list-style: none;
+
+				.date {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					height: 40px;
+					font-size: 12px;
+				}
+
+				.item {
+					display: flex;
+					padding: 10px;
+
+					.avatar {
+						margin-right: 10px;
+					}
+
+					.det {
+						.h {
+							display: flex;
+							align-items: center;
+							.name {
+								font-size: 12px;
+								color: #666;
+							}
+						}
+
+						.content {
+							display: flex;
+							flex-direction: column;
+							margin-top: 5px;
+
+							.is-text {
+								background-color: #fff;
+								padding: 8px;
+								border-radius: 0 6px 6px 6px;
+								max-width: 400px;
+								font-size: 14px;
+							}
+
+							.is-image {
+								background-color: #fff;
+
+								.el-image {
+									display: block;
+									min-height: 100px;
+									max-width: 200px;
+									border-radius: 4px;
+								}
+							}
+						}
+					}
+
+					&.is-right {
+						flex-direction: row-reverse;
+
+						.avatar {
+							margin-left: 10px;
+							margin-right: 0;
+						}
+
+						.det {
+							.h {
+								justify-content: flex-end;
+							}
+
+							.content {
+								.is-text {
+									border-radius: 6px 0 6px 6px;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.footer {
+		padding: 10px;
+
+		.tools {
+			display: flex;
+			margin-bottom: 10px;
+
+			ul {
+				display: flex;
+				align-items: center;
+				flex: 1;
+
+				li {
+					height: 26px;
+					width: 26px;
+					border-radius: 4px;
+					margin-right: 10px;
+					list-style: none;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					cursor: pointer;
+					font-size: 18px;
+
+					&:hover {
+						background-color: #f7f7f7;
+					}
+				}
+			}
+		}
+
+		.input {
+			display: flex;
+			position: relative;
+
+			.el-button {
+				margin-left: 10px;
+				position: absolute;
+				right: 10px;
+				bottom: 10px;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/modules/chat/components/session.vue b/src/modules/chat/components/session.vue
new file mode 100644
index 0000000..dd18150
--- /dev/null
+++ b/src/modules/chat/components/session.vue
@@ -0,0 +1,209 @@
+<template>
+	<div class="chat-session">
+		<div class="head">
+			<el-input v-model="keyWord" placeholder="关键字搜索" clearable></el-input>
+
+			<ul class="tools">
+				<li>
+					<el-icon><plus /></el-icon>
+				</li>
+
+				<li @click="session.get()">
+					<el-icon><refresh /></el-icon>
+				</li>
+			</ul>
+		</div>
+
+		<div class="list" v-loading="session?.loading">
+			<el-scrollbar class="scroller" :ref="setRefs('scroller')">
+				<div
+					class="item"
+					v-for="(item, index) in list"
+					:key="index"
+					:class="{
+						'is-active': item.id == session?.value?.id
+					}"
+					@click="toDetail(item)"
+				>
+					<div class="avatar">
+						<el-badge :value="item.num" :hidden="item.num == 0">
+							<cl-avatar shape="square" :src="item.avatar" />
+						</el-badge>
+					</div>
+
+					<div class="det">
+						<p class="name">{{ item.nickName }}</p>
+						<p class="message">
+							{{ item.text }}
+						</p>
+					</div>
+
+					<div class="status">
+						<p class="date">{{ item.createTime }}</p>
+					</div>
+				</div>
+
+				<el-empty
+					v-if="list.length == 0"
+					:image-size="100"
+					description="暂无会话"
+				></el-empty>
+			</el-scrollbar>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, ref } from "vue";
+import { useChat } from "../hooks";
+import { useStore } from "../store";
+import { Refresh, Plus } from "@element-plus/icons-vue";
+import { Chat } from "../types";
+import { useBrowser, useCool } from "/@/cool";
+import { useDialog } from "@cool-vue/crud";
+
+const { browser } = useBrowser();
+const { chat } = useChat();
+const { session, message } = useStore();
+const { refs, setRefs } = useCool();
+
+useDialog({
+	onFullscreen() {
+		nextTick(() => {
+			refs.scroller?.update();
+		});
+	}
+});
+
+// 关键字
+const keyWord = ref("");
+
+// 过滤列表
+const list = computed(() => session?.list.filter((e) => e.nickName?.includes(keyWord.value)) || []);
+
+// 会话详情
+async function toDetail(item: Chat.Session) {
+	if (browser.isMini) {
+		chat.expand(false);
+	}
+	session.set(item);
+	await message.get({ page: 1 });
+	chat.scrollToBottom();
+}
+</script>
+
+<style lang="scss" scoped>
+.chat-session {
+	height: 100%;
+	width: 100%;
+	background-color: #fff;
+	border-radius: 6px;
+
+	.head {
+		display: flex;
+		border-bottom: 1px solid #f7f7f7;
+		padding: 10px;
+
+		:deep(.el-input) {
+			height: 30px;
+
+			.el-input__wrapper {
+				background-color: #eee;
+				box-shadow: none;
+			}
+		}
+
+		.tools {
+			display: inline-flex;
+			align-items: center;
+
+			li {
+				height: 30px;
+				width: 30px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				cursor: pointer;
+				margin-left: 10px;
+				border-radius: 4px;
+				background-color: #eee;
+				color: #666;
+
+				.el-icon {
+					font-size: 16px;
+				}
+
+				&:hover {
+					background-color: #ddd;
+				}
+			}
+		}
+	}
+
+	.list {
+		height: calc(100% - 51px);
+		overflow: hidden;
+
+		.scroller {
+			height: 100%;
+		}
+
+		.item {
+			display: flex;
+			padding: 15px 10px;
+			cursor: pointer;
+
+			.avatar {
+				margin-right: 10px;
+
+				:deep(.el-badge__content) {
+					transform: translateY(-50%) translateX(calc(100% - 5px)) scale(0.8) !important;
+				}
+			}
+
+			.det {
+				flex: 1;
+
+				.name,
+				.message {
+					overflow: hidden;
+					text-overflow: ellipsis;
+					display: -webkit-box;
+					-webkit-box-orient: vertical;
+					-webkit-line-clamp: 1;
+				}
+
+				.name {
+					font-size: 14px;
+					margin-bottom: 4px;
+				}
+
+				.message {
+					font-size: 12px;
+					color: #666;
+				}
+			}
+
+			.status {
+				display: flex;
+				flex-direction: column;
+				align-items: flex-end;
+				font-size: 12px;
+
+				.date {
+					margin-bottom: 5px;
+					color: #999;
+				}
+			}
+
+			&.is-active {
+				background-color: #eee;
+			}
+
+			&:not(.is-active):hover {
+				background-color: #f7f7f7;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/modules/chat/config.ts b/src/modules/chat/config.ts
new file mode 100644
index 0000000..c9a8899
--- /dev/null
+++ b/src/modules/chat/config.ts
@@ -0,0 +1,15 @@
+import type { ModuleConfig } from "/@/cool";
+
+export default (): ModuleConfig => {
+	return {
+		// toolbar: {
+		// 	order: 2,
+		// 	h5: false,
+		// 	component: import("./components/index.vue")
+		// },
+		options: {
+			// socket.io 连接地址
+			path: "/chat"
+		}
+	};
+};
diff --git a/src/modules/chat/hooks/index.ts b/src/modules/chat/hooks/index.ts
new file mode 100644
index 0000000..ddd8fd9
--- /dev/null
+++ b/src/modules/chat/hooks/index.ts
@@ -0,0 +1,10 @@
+import { inject } from "vue";
+import { Chat } from "../types";
+
+export function useChat() {
+	const chat = inject("chat") as Chat.Provide;
+
+	return {
+		chat
+	};
+}
diff --git a/src/modules/chat/service/message.ts b/src/modules/chat/service/message.ts
new file mode 100644
index 0000000..142e04d
--- /dev/null
+++ b/src/modules/chat/service/message.ts
@@ -0,0 +1,56 @@
+import { Service } from "/@/cool";
+import Mock from "mockjs";
+
+@Service("chat/message")
+class ChatMessage {
+	async page() {
+		return new Promise((resolve) => {
+			const data = Mock.mock({
+				"list|20": [
+					{
+						id: "@id",
+						nickName: "@cname",
+						createTime: "@datetime(HH:mm:ss)",
+						text: "@cparagraph(5)",
+						"contentType|0-1": 0,
+						"userId|1-2": 1,
+						avatar() {
+							return Mock.Random.image(
+								"40x40",
+								Mock.Random.color(),
+								"#FFF",
+								"png",
+								this.nickName[0]
+							);
+						},
+						content() {
+							return JSON.stringify({
+								text: this.text,
+								imageUrl: Mock.Random.image(
+									"100x100",
+									Mock.Random.color(),
+									"#FFF",
+									"png",
+									this.nickName
+								)
+							});
+						}
+					}
+				]
+			});
+
+			setTimeout(() => {
+				resolve({
+					list: data.list,
+					pagination: {
+						total: 20,
+						page: 1,
+						size: 20
+					}
+				});
+			}, 1000);
+		});
+	}
+}
+
+export default ChatMessage;
diff --git a/src/modules/chat/service/session.ts b/src/modules/chat/service/session.ts
new file mode 100644
index 0000000..959f62b
--- /dev/null
+++ b/src/modules/chat/service/session.ts
@@ -0,0 +1,43 @@
+import { Service } from "/@/cool";
+import Mock from "mockjs";
+
+@Service("chat/session")
+class ChatSession {
+	async page() {
+		return new Promise((resolve) => {
+			const data = Mock.mock({
+				"list|20": [
+					{
+						id: "@id",
+						nickName: "@cname",
+						createTime: "@datetime(HH:mm:ss)",
+						text: "@cparagraph(5)",
+						"num|0-99": 0,
+						avatar() {
+							return Mock.Random.image(
+								"40x40",
+								Mock.Random.color(),
+								"#FFF",
+								"png",
+								this.nickName[0]
+							);
+						}
+					}
+				]
+			});
+
+			setTimeout(() => {
+				resolve({
+					list: data.list,
+					pagination: {
+						total: 20,
+						page: 1,
+						size: 20
+					}
+				});
+			}, 1000);
+		});
+	}
+}
+
+export default ChatSession;
diff --git a/src/modules/chat/store/index.ts b/src/modules/chat/store/index.ts
new file mode 100644
index 0000000..54f6d96
--- /dev/null
+++ b/src/modules/chat/store/index.ts
@@ -0,0 +1,12 @@
+import { useMessageStore } from "./message";
+import { useSessionStore } from "./session";
+
+export function useStore() {
+	const session = useSessionStore();
+	const message = useMessageStore();
+
+	return {
+		session,
+		message
+	};
+}
diff --git a/src/modules/chat/store/message.ts b/src/modules/chat/store/message.ts
new file mode 100644
index 0000000..e829928
--- /dev/null
+++ b/src/modules/chat/store/message.ts
@@ -0,0 +1,46 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { service } from "/@/cool";
+
+export const useMessageStore = defineStore("chat-message", () => {
+	// 加载状态
+	const loading = ref(false);
+
+	// 列表
+	const list = ref<any[]>([]);
+
+	// 分页
+	const pagination = ref({
+		page: 1,
+		total: 0,
+		size: 20
+	});
+
+	// 获取列表
+	async function get(params?: any) {
+		loading.value = true;
+
+		// 清空
+		if (params?.page == 1) {
+			list.value = [];
+		}
+
+		// 发送请求
+		await service.chat.message.page(params).then((res) => {
+			list.value = res.list.map((e) => {
+				e.content = JSON.parse(e.content);
+				return e;
+			});
+			pagination.value = res.pagination;
+		});
+
+		loading.value = false;
+	}
+
+	return {
+		loading,
+		list,
+		pagination,
+		get
+	};
+});
diff --git a/src/modules/chat/store/session.ts b/src/modules/chat/store/session.ts
new file mode 100644
index 0000000..a98ecb6
--- /dev/null
+++ b/src/modules/chat/store/session.ts
@@ -0,0 +1,46 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { service } from "/@/cool";
+
+export const useSessionStore = defineStore("chat-session", () => {
+	// 加载状态
+	const loading = ref(false);
+
+	// 列表
+	const list = ref<any[]>([]);
+
+	// 选中
+	const value = ref<any>();
+
+	// 获取列表
+	async function get(params?: any) {
+		loading.value = true;
+
+		// 发送请求
+		await service.chat.session.page(params).then((res) => {
+			// 默认加载第一个会话的消息
+			if (!value.value) {
+				set(res.list[0]);
+			}
+
+			// 设置列表
+			list.value = res.list;
+		});
+
+		loading.value = false;
+	}
+
+	// 设置值
+	function set(data: any) {
+		// 设置值
+		value.value = data;
+	}
+
+	return {
+		loading,
+		list,
+		value,
+		get,
+		set
+	};
+});
diff --git a/src/modules/chat/types/index.d.ts b/src/modules/chat/types/index.d.ts
new file mode 100644
index 0000000..7b7e0da
--- /dev/null
+++ b/src/modules/chat/types/index.d.ts
@@ -0,0 +1,36 @@
+import { Socket } from "socket.io-client";
+
+export namespace Chat {
+	enum ContentType {
+		"text" = 0,
+		"image" = 1,
+		"video" = 2
+	}
+
+	interface Message {
+		fromId?: string;
+		toId?: string;
+		content: {
+			text?: string;
+			imageUrl?: string;
+			[key: string]: any;
+		};
+		contentType: ContentType;
+		[key: string]: any;
+	}
+
+	interface Session {
+		id: string;
+		avatar: string;
+		nickName: string;
+		[key: string]: any;
+	}
+
+	interface Provide {
+		socket?: Socket;
+		send(message: Message, isAppend?: boolean): void;
+		append(message: Message): void;
+		expand(shouldExpand?: boolean): void;
+		scrollToBottom(): void;
+	}
+}
diff --git a/src/modules/flow/components/index.vue b/src/modules/flow/components/index.vue
new file mode 100644
index 0000000..3fdcd5d
--- /dev/null
+++ b/src/modules/flow/components/index.vue
@@ -0,0 +1,275 @@
+<template>
+	<div class="cl-flow" id="cl-flow">
+		<vue-flow
+			:default-viewport="{ zoom: 1.0 }"
+			:min-zoom="0.25"
+			:max-zoom="2"
+			@connect="onConnect"
+			@node-mouse-enter="onNodeMouseEnter"
+			@node-mouse-leave="onNodeMouseLeave"
+			@node-click="onNodeClick"
+			@node-drag-stop="onNodeDragStop"
+			@node-context-menu="refs.contextMenu?.onNode"
+			@edge-mouse-enter="onEdgeMouseEnter"
+			@edge-mouse-leave="onEdgeMouseLeave"
+			@pane-context-menu="refs.contextMenu?.onPane"
+			@pane-click="onPaneClick"
+			@pane-scroll="onPaneScroll"
+			@pane-ready="onPaneReady"
+		>
+			<!-- 自定义顶部栏 -->
+			<tools-head />
+
+			<!-- 自定义选择框 -->
+			<tools-selection />
+
+			<!-- 自定义面板 -->
+			<tools-panel />
+
+			<!-- 自定义节点添加面板 -->
+			<tools-node-add />
+
+			<!-- 自定义右键菜单 -->
+			<tools-context-menu :ref="setRefs('contextMenu')" />
+
+			<!-- 自定义控制器 -->
+			<tools-controls />
+
+			<!-- 自定义连接线按钮 -->
+			<template
+				#edge-button="{
+					id,
+					sourceX,
+					sourceY,
+					targetX,
+					targetY,
+					sourcePosition,
+					targetPosition,
+					markerEnd,
+					style,
+					data
+				}"
+			>
+				<tools-edge-button
+					:id="id"
+					:source-x="sourceX"
+					:source-y="sourceY"
+					:target-x="targetX"
+					:target-y="targetY"
+					:source-position="sourcePosition"
+					:target-position="targetPosition"
+					:marker-end="markerEnd"
+					:style="style"
+					:data="data"
+				/>
+			</template>
+
+			<!-- 自定义节点 -->
+			<template #[item.name!]="{ id }" v-for="item in flow.CustomNodes" :key="item.name">
+				<tools-card :node-id="id" />
+			</template>
+
+			<!-- 背景 -->
+			<background pattern-color="#aaa" :gap="16" />
+
+			<!-- 小图 -->
+			<mini-map position="bottom-right" :height="100" :width="150" />
+		</vue-flow>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	VueFlow,
+	Connection,
+	NodeDragEvent,
+	EdgeMouseEvent,
+	type NodeMouseEvent,
+	type VueFlowStore
+} from "@vue-flow/core";
+import { Background } from "@vue-flow/background";
+import { MiniMap } from "@vue-flow/minimap";
+import { useFlow } from "../hooks";
+import { useCool } from "/@/cool";
+import "@vue-flow/core/dist/style.css";
+import "@vue-flow/core/dist/theme-default.css";
+import "@vue-flow/controls/dist/style.css";
+import "@vue-flow/minimap/dist/style.css";
+import "@vue-flow/node-resizer/dist/style.css";
+import ToolsPanel from "./tools/panel/index.vue";
+import ToolsCard from "./tools/card.vue";
+import ToolsEdgeButton from "./tools/edge-button.vue";
+import ToolsControls from "./tools/controls.vue";
+import ToolsHead from "./tools/head.vue";
+import ToolsContextMenu from "./tools/context-menu.vue";
+import ToolsSelection from "./tools/selection.vue";
+import ToolsNodeAdd from "./tools/node-add.vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { onBeforeRouteLeave } from "vue-router";
+import { onMounted, onUnmounted } from "vue";
+import type { FlowNode } from "../types";
+import { nextTick } from "vue";
+
+const props = defineProps({
+	flowId: Number
+});
+
+const { mitt, refs, setRefs } = useCool();
+const flow = useFlow();
+
+// 加载完
+function onPaneReady(store: VueFlowStore) {
+	flow.init();
+	flow.get(props.flowId!);
+}
+
+// 滚轮滚动
+function onPaneScroll(e: WheelEvent | undefined) {
+	refs.contextMenu?.close();
+}
+
+// 线连接
+function onConnect(connection: Connection) {
+	flow.addEdge(connection);
+}
+
+// 节点点击
+async function onNodeClick(e: NodeMouseEvent) {
+	// 如果节点相同则不执行事件
+	if (flow.node?.id == e.node.id) return false;
+
+	const node = flow.findNode(e.node.id);
+
+	flow.setNode(node);
+
+	// 视图定位
+	// flow.setViewportByNode(flow.node!);
+
+	refs.contextMenu?.close();
+}
+
+// 节点鼠标移入
+function onNodeMouseEnter(e: NodeMouseEvent) {
+	flow.activeEdge(e.node.id, true);
+}
+
+// 节点鼠标移入
+function onNodeMouseLeave(e: NodeMouseEvent) {
+	flow.activeEdge(e.node.id, false);
+}
+
+// 节点拖拽结束
+function onNodeDragStop(e: NodeDragEvent) {
+	flow.updateNode(e.node.id, {
+		position: e.node.position
+	});
+}
+
+// 鼠标移入线
+function onEdgeMouseEnter(e: EdgeMouseEvent) {
+	e.edge.data.show = true;
+}
+
+// 鼠标移出线
+function onEdgeMouseLeave(e: EdgeMouseEvent) {
+	e.edge.data.show = false;
+}
+
+// 空白处点击
+function onPaneClick() {
+	refs.contextMenu?.close();
+	flow.enableDrag();
+	flow.clearNode();
+}
+
+// 打开表单
+function openForm(node: FlowNode) {
+	closeForm();
+
+	if (node) {
+		flow.updateChildrenPosition("open", node);
+
+		setTimeout(() => {
+			mitt.emit("flow.openForm", node);
+		}, 100);
+	}
+}
+
+// 关闭表单
+function closeForm() {
+	flow.updateChildrenPosition("close", flow.node!);
+	mitt.emit("flow.closeForm", flow.node);
+}
+
+// 保存
+async function save() {
+	await flow.save();
+	ElMessage.success("数据保存成功");
+}
+
+onMounted(() => {
+	mitt.on("flow.setNode", openForm);
+	mitt.on("flow.clearNode", closeForm);
+	window.addEventListener("beforeunload", save);
+});
+
+onUnmounted(() => {
+	mitt.off("flow.setNode", openForm);
+	mitt.off("flow.clearNode", closeForm);
+	window.removeEventListener("beforeunload", save);
+});
+
+let lock = false;
+
+onBeforeRouteLeave((to, from, next) => {
+	if (lock) {
+		return next();
+	}
+
+	lock = true;
+
+	ElMessageBox.confirm("退出前是否保存当前数据？", "提示", {
+		type: "warning",
+		confirmButtonText: "保存",
+		cancelButtonText: "不保存",
+		distinguishCancelAndClose: true,
+		beforeClose(action, instance, done) {
+			done();
+
+			if (action == "confirm") {
+				save();
+				next();
+			} else if (action == "cancel") {
+				next();
+			} else {
+				lock = false;
+				next(false);
+			}
+		}
+	}).catch(() => null);
+});
+</script>
+
+<style lang="scss">
+.cl-flow {
+	height: 100%;
+
+	.vue-flow {
+		height: 100%;
+	}
+
+	.vue-flow__minimap {
+		margin: 0;
+		bottom: 50px;
+		right: 10px;
+		height: 100px;
+		border-radius: 6px;
+		overflow: hidden;
+		box-shadow: 0px 0 6px 1px rgba(16, 24, 40, 0.08);
+	}
+
+	.vue-flow__node:has(.is-moving) {
+		transition: transform 0.1s;
+	}
+}
+</style>
diff --git a/src/modules/flow/components/log/detail.vue b/src/modules/flow/components/log/detail.vue
new file mode 100644
index 0000000..ee0bc1d
--- /dev/null
+++ b/src/modules/flow/components/log/detail.vue
@@ -0,0 +1,30 @@
+<template>
+	<cl-dialog v-model="visible" title="节点运行信息" width="70%">
+		<cl-editor-monaco v-model="nodeInfo" height="800px" />
+	</cl-dialog>
+</template>
+
+<script lang="ts" name="flow-tools-log-detail" setup>
+import { ref } from "vue";
+
+const nodeInfo = ref<any>(null);
+
+// 弹窗显隐
+const visible = ref<boolean>(false);
+
+// 打开
+function open(row) {
+	if (row.nodeInfo) {
+		nodeInfo.value = row.nodeInfo;
+	}
+
+	visible.value = true;
+}
+
+// 关闭
+function close() {
+	visible.value = false;
+}
+
+defineExpose({ open });
+</script>
diff --git a/src/modules/flow/components/log/index.vue b/src/modules/flow/components/log/index.vue
new file mode 100644
index 0000000..90e993b
--- /dev/null
+++ b/src/modules/flow/components/log/index.vue
@@ -0,0 +1,192 @@
+<template>
+	<cl-dialog v-model="visible" width="80%" title="调用日志">
+		<cl-crud ref="Crud">
+			<cl-row>
+				<!-- 刷新按钮 -->
+				<cl-refresh-btn />
+
+				<cl-flex1 />
+
+				<!-- 关键字搜索 -->
+				<cl-filter label="状态">
+					<cl-select
+						:width="160"
+						:options="options.type"
+						prop="type"
+						placeholder="请选择状态"
+					/>
+				</cl-filter>
+			</cl-row>
+
+			<cl-row>
+				<!-- 数据表格 -->
+				<cl-table ref="Table" :auto-height="false" />
+			</cl-row>
+
+			<cl-row>
+				<cl-flex1 />
+				<!-- 分页控件 -->
+				<cl-pagination />
+			</cl-row>
+		</cl-crud>
+	</cl-dialog>
+
+	<log-detail :ref="setRefs('logDetailRef')" />
+</template>
+
+<script lang="ts" name="flow-tools-log" setup>
+import LogDetail from "./detail.vue";
+
+import { ref, nextTick, reactive } from "vue";
+import { useCrud, useTable } from "@cool-vue/crud";
+import { useCool } from "/@/cool";
+import { isEmpty } from "lodash-es";
+
+const { service, refs, setRefs } = useCool();
+
+const options = reactive({
+	type: [
+		{
+			label: "失败",
+			type: "danger",
+			value: 0
+		},
+		{
+			label: "成功",
+			type: "success",
+			value: 1
+		},
+		{
+			label: "未知",
+			type: "info",
+			value: 2
+		}
+	]
+});
+
+// 弹窗显隐
+const visible = ref<boolean>(false);
+
+// 打开
+function open(row) {
+	visible.value = true;
+
+	nextTick(() => {
+		refresh({
+			flowId: row.id
+		});
+	});
+}
+
+// 关闭
+function close() {
+	visible.value = false;
+}
+
+// cl-table
+const Table = useTable({
+	columns: [
+		{
+			label: "流程名称",
+			prop: "flowName",
+			minWidth: 140
+		},
+		{
+			label: "流程label",
+			prop: "flowLabel",
+			minWidth: 120
+		},
+		{
+			label: "传入参数",
+			prop: "inputParams",
+			minWidth: 160,
+			showOverflowTooltip: true
+		},
+		{
+			label: "结果",
+			prop: "result",
+			width: 160,
+			showOverflowTooltip: true
+		},
+		{
+			label: "创建时间",
+			prop: "createTime",
+			width: 170,
+			sortable: "custom"
+		},
+		{
+			label: "执行状态",
+			prop: "type",
+			width: 140,
+			fixed: "right",
+			dict: options.type
+		},
+		{
+			type: "op",
+			width: 120,
+			buttons: [
+				{
+					label: "运行信息",
+					onClick: ({ scope }) => {
+						refs.logDetailRef.open(scope.row);
+					}
+				}
+			]
+		}
+	]
+});
+
+// cl-crud
+const Crud = useCrud(
+	{
+		service: service.flow.log,
+		async onRefresh(params, { render, next }) {
+			const res = await service.flow.log.page(params);
+
+			// 格式化数据
+			const list =
+				res.list?.map((e) => {
+					let { inputParams, result, ...arg } = e;
+
+					// 处理数据
+					inputParams = inputParams ? JSON.stringify(decodeUnicode(inputParams)) : "";
+					result = result ? JSON.stringify(decodeUnicode(result)) : "";
+
+					return {
+						...arg,
+						inputParams,
+						result
+					};
+				}) ?? [];
+
+			// 渲染数据
+			render(list, res.pagination);
+		}
+	}
+	// (app) => {
+	// 	app.refresh();
+	// }
+);
+
+// 刷新
+function refresh(params?: any) {
+	Crud.value?.refresh(params);
+}
+
+/**
+ * 处理Unicode 解码参数
+ * @param data
+ * @param key
+ */
+function decodeUnicode(data, key = "dynamic") {
+	if (data && !isEmpty(data[key])) {
+		data[key] = JSON.parse(data[key]);
+	}
+
+	return data;
+}
+
+defineExpose({
+	open
+});
+</script>
diff --git a/src/modules/flow/components/nodes/_base/form/input-number.vue b/src/modules/flow/components/nodes/_base/form/input-number.vue
new file mode 100644
index 0000000..99601d7
--- /dev/null
+++ b/src/modules/flow/components/nodes/_base/form/input-number.vue
@@ -0,0 +1,58 @@
+<template>
+	<div class="form-input-number">
+		<span class="label prefix" v-if="prefix">{{ prefix }}</span>
+		<div>
+			<el-input-number
+				v-model="value"
+				:min="min"
+				:max="max"
+				:precision="precision"
+			></el-input-number>
+		</div>
+		<span class="label suffix" v-if="suffix">{{ suffix }}</span>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { useModel } from "vue";
+
+const props = defineProps({
+	modelValue: null,
+	prefix: String,
+	suffix: String,
+	min: {
+		type: Number,
+		default: 0
+	},
+	max: {
+		type: Number,
+		default: 9999999999
+	},
+	precision: {
+		type: Number,
+		default: 0
+	}
+});
+
+const value = useModel(props, "modelValue");
+</script>
+
+<style lang="scss" scoped>
+.form-input-number {
+	display: flex;
+	align-items: center;
+
+	.label {
+		flex-shrink: 0;
+		font-size: var(--el-form-label-font-size);
+		// color: var(--el-text-color-regular);
+		color: var(--el-color-info);
+		&.prefix {
+			margin-right: 10px;
+		}
+		&.suffix {
+			margin-left: 10px;
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/nodes/_base/form/input-params.vue b/src/modules/flow/components/nodes/_base/form/input-params.vue
new file mode 100644
index 0000000..183eaf7
--- /dev/null
+++ b/src/modules/flow/components/nodes/_base/form/input-params.vue
@@ -0,0 +1,132 @@
+<template>
+	<div class="form-input-params">
+		<cl-svg name="add" class="btn-icon is-rt" @click="add()" v-if="!disabled" />
+
+		<div
+			class="item"
+			v-for="(item, index) in list"
+			:key="index"
+			:class="{
+				'is-error': errFields.includes(item.field)
+			}"
+		>
+			<div class="d">
+				<el-input
+					v-model="item.field"
+					placeholder="变量名"
+					class="name"
+					clearable
+					:disabled="!editField"
+				/>
+			</div>
+
+			<div class="d">
+				<tools-var
+					v-model="item.name"
+					v-model:node-id="item.nodeId"
+					v-model:type="item.type"
+					v-model:value="item.value"
+					:inputable="varInputable"
+				/>
+			</div>
+
+			<cl-svg name="delete" class="btn-icon" @click="remove(index)" v-if="!disabled" />
+		</div>
+
+		<el-text v-if="isEmpty(list) && placeholder" type="info" size="small">
+			<el-icon> <warning /> </el-icon>
+			{{ placeholder }}
+		</el-text>
+	</div>
+</template>
+
+<script setup lang="ts" name="node-base-form-input-params">
+import type { FlowField } from "/$/flow/types";
+import { useModel, type PropType, computed } from "vue";
+import ToolsVar from "/$/flow/components/tools/var.vue";
+import { isEmpty } from "lodash-es";
+import { Warning } from "@element-plus/icons-vue";
+
+const props = defineProps({
+	modelValue: {
+		type: Array as PropType<FlowField[]>,
+		default: () => []
+	},
+	field: {
+		type: String,
+		default: "arg"
+	},
+	// 允许编辑命名
+	editField: {
+		type: Boolean,
+		default: true
+	},
+	// 禁用
+	disabled: Boolean,
+	// 占位内容
+	placeholder: String,
+	// 自定义输入值
+	varInputable: Boolean
+});
+
+const list = useModel(props, "modelValue");
+
+// 是否有相同命名
+const errFields = computed(() => {
+	const arr: string[] = [];
+
+	list.value.forEach((a, i) => {
+		const n = list.value.findIndex((b) => b.field == a.field);
+
+		if (n >= 0 && i != n) {
+			arr.push(a.field);
+		}
+	});
+
+	return arr;
+});
+
+let id = 1;
+
+// 添加
+function add() {
+	list.value.push({
+		field: `${props.field}${++id}`
+	});
+}
+
+// 移除
+function remove(index: number) {
+	list.value.splice(index, 1);
+}
+</script>
+
+<style lang="scss" scoped>
+.form-input-params {
+	.item {
+		display: flex;
+		align-items: center;
+		margin-bottom: 5px;
+
+		.d {
+			margin-right: 5px;
+			flex: 1;
+			overflow: hidden;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		&.is-error {
+			.d {
+				&:first-child {
+					:deep(.el-input__wrapper) {
+						box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/nodes/_base/form/output-params.vue b/src/modules/flow/components/nodes/_base/form/output-params.vue
new file mode 100644
index 0000000..2a73a04
--- /dev/null
+++ b/src/modules/flow/components/nodes/_base/form/output-params.vue
@@ -0,0 +1,165 @@
+<template>
+	<div class="form-input-params">
+		<cl-svg name="add" class="btn-icon is-rt" @click="add()" v-if="op" />
+
+		<div class="item" v-for="(item, index) in list" :key="index">
+			<div class="d">
+				<el-input
+					v-model="item.field"
+					placeholder="变量名"
+					class="name"
+					:disabled="onDisabled(item, 'field')"
+				/>
+			</div>
+
+			<div class="d">
+				<template v-if="typeInput">
+					<el-input v-model="item.type" placeholder="请输入描述">
+						<template #suffix>
+							<cl-svg name="fullscreen" class="btn-icon" @click="input.open(item)" />
+						</template>
+					</el-input>
+				</template>
+
+				<el-select
+					v-model="item.type"
+					placeholder="类型"
+					:disabled="onDisabled(item, 'type')"
+					v-else
+				>
+					<el-option v-for="t in options.type" :key="t" :label="t" :value="t" />
+				</el-select>
+			</div>
+
+			<cl-svg name="delete" class="btn-icon" @click="remove(index)" v-if="op" />
+		</div>
+
+		<!-- 自定义输入 -->
+		<cl-dialog v-model="input.visible" title="自定义输入">
+			<el-input type="textarea" v-model="input.value" :rows="20" placeholder="请输入" />
+
+			<template #footer>
+				<el-button @click="input.close">取消</el-button>
+				<el-button type="success" @click="input.save">保存</el-button>
+			</template>
+		</cl-dialog>
+	</div>
+</template>
+
+<script setup lang="ts" name="node-base-form-output-params">
+import { ElMessage } from "element-plus";
+import type { FlowField } from "/$/flow/types";
+import { reactive, useModel, type PropType } from "vue";
+
+const props = defineProps({
+	modelValue: {
+		type: Array as PropType<FlowField[]>,
+		default: () => []
+	},
+
+	// 类型是否能输入
+	typeInput: Boolean,
+
+	// 哪些字段不能编辑
+	disabledFields: [Array],
+
+	// 允许编辑命名
+	editField: {
+		type: Boolean,
+		default: true
+	},
+
+	// 能否操作新增、删除
+	op: {
+		type: Boolean,
+		default: true
+	}
+});
+
+const list = useModel(props, "modelValue");
+
+// 选项
+const options = reactive({
+	type: ["string", "number", "array", "object", "boolean", "date"]
+});
+
+let id = 0;
+
+// 添加
+function add() {
+	if (!id) {
+		id = list.value.length;
+	}
+
+	list.value.push({
+		field: `res${++id}`,
+		type: props.typeInput ? "" : "string"
+	});
+}
+
+// 移除
+function remove(index: number) {
+	list.value.splice(index, 1);
+}
+
+// 禁用
+function onDisabled(item: FlowField, key: "field" | "type") {
+	let f = props.disabledFields?.includes(item.field);
+
+	if (!f) {
+		if (key == "field") {
+			f = !props.editField;
+		}
+	}
+
+	return f;
+}
+
+// 自定义值输入
+const input = reactive({
+	visible: false,
+	value: "",
+	data: null as FlowField | null,
+
+	open(item: FlowField) {
+		input.data = item!;
+		input.value = item.type!;
+		input.visible = true;
+	},
+
+	close() {
+		input.visible = false;
+	},
+
+	save() {
+		if (!input.value) {
+			return ElMessage.warning("请输入内容");
+		}
+
+		if (input.data) {
+			input.data.type = input.value;
+		}
+
+		input.close();
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.form-input-params {
+	.item {
+		display: flex;
+		align-items: center;
+		margin-bottom: 5px;
+
+		.d {
+			flex: 1;
+			margin-right: 5px;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/nodes/_base/form/text.vue b/src/modules/flow/components/nodes/_base/form/text.vue
new file mode 100644
index 0000000..c32cf41
--- /dev/null
+++ b/src/modules/flow/components/nodes/_base/form/text.vue
@@ -0,0 +1,37 @@
+<template>
+	<div class="form-text">
+		<el-text tag="p" size="small" type="info" v-for="(item, index) in list" :key="index">{{
+			item
+		}}</el-text>
+	</div>
+</template>
+
+<script setup lang="ts" name="node-base-form-text">
+import { computed } from "vue";
+import { isArray } from "lodash-es";
+
+const props = defineProps({
+	text: {
+		type: [String, Array],
+		default: ""
+	}
+});
+
+const list = computed(() => {
+	return isArray(props.text) ? props.text : [props.text];
+});
+</script>
+
+<style lang="scss" scoped>
+.form-text {
+	line-height: normal;
+
+	.el-text {
+		margin-bottom: 10px;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/nodes/baidu/index.ts b/src/modules/flow/components/nodes/baidu/index.ts
new file mode 100644
index 0000000..6e7fed6
--- /dev/null
+++ b/src/modules/flow/components/nodes/baidu/index.ts
@@ -0,0 +1,11 @@
+import type { FlowNode } from "/$/flow/types";
+import component from "./index.vue";
+
+export default (): FlowNode => {
+	return {
+		group: "信息",
+		label: "百度搜索",
+		description: "通过百度搜索引擎查找内容",
+		component
+	};
+};
diff --git a/src/modules/flow/components/nodes/baidu/index.vue b/src/modules/flow/components/nodes/baidu/index.vue
new file mode 100644
index 0000000..94ddd1c
--- /dev/null
+++ b/src/modules/flow/components/nodes/baidu/index.vue
@@ -0,0 +1,28 @@
+<template>
+	<div class="node-baidu"></div>
+</template>
+
+<script lang="ts" setup name="node-baidu">
+import { PropType } from "vue";
+import { useFlow } from "/$/flow";
+import type { FlowNode } from "/$/flow/types";
+
+const props = defineProps({
+	node: {
+		type: Object as PropType<FlowNode>,
+		default: () => ({})
+	},
+	// 节点是否聚焦
+	focus: {
+		type: Boolean,
+		default: false
+	}
+});
+
+const flow = useFlow();
+</script>
+
+<style lang="scss" scoped>
+.node-baidu {
+}
+</style>
diff --git a/src/modules/flow/components/nodes/classify/form/adv.vue b/src/modules/flow/components/nodes/classify/form/adv.vue
new file mode 100644
index 0000000..09589eb
--- /dev/null
+++ b/src/modules/flow/components/nodes/classify/form/adv.vue
@@ -0,0 +1,38 @@
+<template>
+	<div class="form-adv">
+		<div class="textarea-item">
+			<div class="head">
+				<span>指令</span>
+			</div>
+
+			<el-input
+				type="textarea"
+				v-model="data.cmd"
+				placeholder="输入你的指令"
+				:autosize="{
+					minRows: 4,
+					maxRows: 6
+				}"
+				resize="none"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="node-problem-form-adv">
+import { useModel } from "vue";
+
+const props = defineProps({
+	modelValue: {
+		type: Object,
+		default: () => ({})
+	}
+});
+
+const data = useModel(props, "modelValue");
+</script>
+
+<style lang="scss" scoped>
+.form-adv {
+}
+</style>
diff --git a/src/modules/flow/components/nodes/classify/form/classify.vue b/src/modules/flow/components/nodes/classify/form/classify.vue
new file mode 100644
index 0000000..b84590b
--- /dev/null
+++ b/src/modules/flow/components/nodes/classify/form/classify.vue
@@ -0,0 +1,93 @@
+<template>
+	<div class="form-classify">
+		<cl-svg name="add" class="btn-icon is-rt" @click="add()" />
+
+		<div class="list">
+			<div class="textarea-item" v-for="(item, index) in list" :key="index">
+				<cl-svg name="delete" class="btn-icon" @click="remove(index)"></cl-svg>
+
+				<el-input
+					type="textarea"
+					v-model="list[index]"
+					placeholder="输入你的主题内容"
+					:autosize="{
+						minRows: 2,
+						maxRows: 4
+					}"
+					resize="none"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="node-problem-form-classify">
+import { useModel, watch, type PropType, onMounted } from "vue";
+import { useFlow } from "/$/flow/hooks";
+
+const props = defineProps({
+	modelValue: {
+		type: Array as PropType<string[]>,
+		default: () => []
+	}
+});
+
+const flow = useFlow();
+const list = useModel(props, "modelValue");
+
+// 添加
+function add() {
+	list.value.push("");
+}
+
+// 删除
+function remove(index: number) {
+	list.value.splice(index, 1);
+
+	// handle删了，线同步删除
+	const edge = flow.edges.find(
+		(e) => e.source == flow.node?.id && e.sourceHandle == `source-${index}`
+	);
+	if (edge) {
+		flow.removeEdges(edge);
+	}
+}
+
+onMounted(() => {
+	watch(
+		list,
+		(arr) => {
+			if (flow.node) {
+				flow.node.handle!.next = arr.map((_, i) => {
+					return {
+						label: `分类 ${i + 1}`,
+						value: `source-${i}`
+					};
+				});
+			}
+		},
+		{
+			immediate: true,
+			deep: true
+		}
+	);
+});
+</script>
+
+<style lang="scss" scoped>
+.form-classify {
+	.list {
+		.textarea-item {
+			padding-top: 8px !important;
+
+			.btn-icon {
+				position: absolute;
+				right: 8px;
+				top: 8px;
+				z-index: 9;
+				background-color: var(--el-bg-color);
+			}
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/nodes/classify/index.ts b/src/modules/flow/components/nodes/classify/index.ts
new file mode 100644
index 0000000..8bcc361
--- /dev/null
+++ b/src/modules/flow/components/nodes/classify/index.ts
@@ -0,0 +1,119 @@
+import type { FlowNode } from "/$/flow/types";
+import component from "./index.vue";
+import FormModel from "../llm/form/model.vue";
+import FormClassify from "./form/classify.vue";
+import FormAdv from "./form/adv.vue";
+import FormInputParams from "../_base/form/input-params.vue";
+import FormText from "../_base/form/text.vue";
+
+export default (): FlowNode => {
+	return {
+		group: "AI",
+		label: "分类器",
+		description: "根据内容调用 LLM 进行智能分类",
+		color: "#409eff",
+		component,
+		form: {
+			items: [
+				{
+					label: "输入变量",
+					prop: "inputParams",
+					component: {
+						vm: FormInputParams,
+						props: {
+							editField: false,
+							disabled: true
+						}
+					}
+				},
+				{
+					label: "模型",
+					prop: "options.model",
+					component: {
+						vm: FormModel
+					}
+				},
+				{
+					label: "分类",
+					prop: "options.types",
+					component: {
+						vm: FormClassify
+					}
+				},
+				// {
+				// 	component: {
+				// 		name: "cl-form-card",
+				// 		props: {
+				// 			label: "高级设置",
+				// 			expand: false
+				// 		}
+				// 	},
+				// 	children: [
+				// 		{
+				// 			prop: "options.adv",
+				// 			component: {
+				// 				vm: FormAdv
+				// 			}
+				// 		}
+				// 	]
+				// },
+				{
+					label: "输出变量",
+					component: {
+						vm: FormText,
+						props: {
+							text: ["content<string> 内容", "index<number> 分类索引"]
+						}
+					}
+				}
+			]
+		},
+		data: {
+			inputParams: [
+				{
+					field: "content",
+					type: "string"
+				}
+			],
+			outputParams: [
+				{
+					field: "index",
+					type: "number"
+				}
+			],
+			options: {
+				model: {
+					options: [],
+					params: {
+						model: ""
+					}
+				},
+				types: [""]
+			}
+		},
+		handle: {
+			source: false,
+			next: []
+		},
+		validator(data) {
+			const { model, types } = data.options;
+
+			// 验证变量是否绑定值
+			const param = data.inputParams?.find((e) => !e.nodeId);
+			if (param) {
+				return `请绑定变量：${param.field}`;
+			}
+
+			// 验证分类内容是否填写
+			const type = types?.findIndex((e: string) => !e);
+			if (type >= 0) {
+				return `请填写分类${type + 1}的内容`;
+			}
+
+			// 验证模型是否选择
+			if (!model.params.model) {
+				return "请选择模型";
+			}
+		}
+	};
+};
diff --git a/src/modules/flow/components/nodes/classify/index.vue b/src/modules/flow/components/nodes/classify/index.vue
new file mode 100644
index 0000000..7ec39f1
--- /dev/null
+++ b/src/modules/flow/components/nodes/classify/index.vue
@@ -0,0 +1,89 @@
+<template>
+	<div class="node-classify">
+		<div class="model" v-if="!focus">
+			<model-text :data="node.data?.options?.model" />
+		</div>
+
+		<div class="item" v-for="(item, index) in list" :key="index">
+			<span class="content">{{ item.content || "未填写内容" }}</span>
+
+			<tools-handle
+				type="source"
+				:node-id="node.id"
+				:id="item.value"
+				:position="{
+					right: '-24px'
+				}"
+			/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup name="node-classify">
+import type { FlowNode } from "/$/flow/types";
+import { computed, type PropType } from "vue";
+import ToolsHandle from "/$/flow/components/tools/handle.vue";
+import ModelText from "../llm/form/model-text.vue";
+
+const props = defineProps({
+	node: {
+		type: Object as PropType<FlowNode>,
+		default: () => ({})
+	},
+	// 节点是否聚焦
+	focus: {
+		type: Boolean,
+		default: false
+	}
+});
+
+const list = computed(() => {
+	return ((props.node.data?.options?.types as any[]) || []).map((e, i) => {
+		return {
+			content: e,
+			value: `source-${i}`
+		};
+	});
+});
+</script>
+
+<style lang="scss" scoped>
+.node-classify {
+	padding-bottom: 15px;
+
+	.model,
+	.item {
+		display: flex;
+		align-items: center;
+		background-color: var(--el-fill-color-light);
+		padding: 0 10px;
+		border-radius: 6px;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.model {
+		height: 33px;
+		font-size: 14px;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		margin-bottom: 8px;
+	}
+
+	.item {
+		height: 30px;
+		margin-bottom: 4px;
+		font-size: 12px;
+		position: relative;
+
+		.content {
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/nodes/code/editor/declares/axios.ts b/src/modules/flow/components/nodes/code/editor/declares/axios.ts
new file mode 100644
index 0000000..d71a8b2
--- /dev/null
+++ b/src/modules/flow/components/nodes/code/editor/declares/axios.ts
@@ -0,0 +1,697 @@
+export const axios = `
+declare module "axios" {
+	// TypeScript Version: 4.7
+	export type AxiosHeaderValue = AxiosHeaders | string | string[] | number | boolean | null;
+
+	interface RawAxiosHeaders {
+		[key: string]: AxiosHeaderValue;
+	}
+
+	type MethodsHeaders = Partial<
+		{
+			[Key in Method as Lowercase<Key>]: AxiosHeaders;
+		} & { common: AxiosHeaders }
+	>;
+
+	type AxiosHeaderMatcher =
+		| string
+		| RegExp
+		| ((this: AxiosHeaders, value: string, name: string) => boolean);
+
+	type AxiosHeaderParser = (this: AxiosHeaders, value: AxiosHeaderValue, header: string) => any;
+
+	export class AxiosHeaders {
+		constructor(headers?: RawAxiosHeaders | AxiosHeaders | string);
+
+		[key: string]: any;
+
+		set(
+			headerName?: string,
+			value?: AxiosHeaderValue,
+			rewrite?: boolean | AxiosHeaderMatcher
+		): AxiosHeaders;
+		set(headers?: RawAxiosHeaders | AxiosHeaders | string, rewrite?: boolean): AxiosHeaders;
+
+		get(headerName: string, parser: RegExp): RegExpExecArray | null;
+		get(headerName: string, matcher?: true | AxiosHeaderParser): AxiosHeaderValue;
+
+		has(header: string, matcher?: AxiosHeaderMatcher): boolean;
+
+		delete(header: string | string[], matcher?: AxiosHeaderMatcher): boolean;
+
+		clear(matcher?: AxiosHeaderMatcher): boolean;
+
+		normalize(format: boolean): AxiosHeaders;
+
+		concat(
+			...targets: Array<AxiosHeaders | RawAxiosHeaders | string | undefined | null>
+		): AxiosHeaders;
+
+		toJSON(asStrings?: boolean): RawAxiosHeaders;
+
+		static from(thing?: AxiosHeaders | RawAxiosHeaders | string): AxiosHeaders;
+
+		static accessor(header: string | string[]): AxiosHeaders;
+
+		static concat(
+			...targets: Array<AxiosHeaders | RawAxiosHeaders | string | undefined | null>
+		): AxiosHeaders;
+
+		setContentType(value: ContentType, rewrite?: boolean | AxiosHeaderMatcher): AxiosHeaders;
+		getContentType(parser?: RegExp): RegExpExecArray | null;
+		getContentType(matcher?: AxiosHeaderMatcher): AxiosHeaderValue;
+		hasContentType(matcher?: AxiosHeaderMatcher): boolean;
+
+		setContentLength(
+			value: AxiosHeaderValue,
+			rewrite?: boolean | AxiosHeaderMatcher
+		): AxiosHeaders;
+		getContentLength(parser?: RegExp): RegExpExecArray | null;
+		getContentLength(matcher?: AxiosHeaderMatcher): AxiosHeaderValue;
+		hasContentLength(matcher?: AxiosHeaderMatcher): boolean;
+
+		setAccept(value: AxiosHeaderValue, rewrite?: boolean | AxiosHeaderMatcher): AxiosHeaders;
+		getAccept(parser?: RegExp): RegExpExecArray | null;
+		getAccept(matcher?: AxiosHeaderMatcher): AxiosHeaderValue;
+		hasAccept(matcher?: AxiosHeaderMatcher): boolean;
+
+		setUserAgent(value: AxiosHeaderValue, rewrite?: boolean | AxiosHeaderMatcher): AxiosHeaders;
+		getUserAgent(parser?: RegExp): RegExpExecArray | null;
+		getUserAgent(matcher?: AxiosHeaderMatcher): AxiosHeaderValue;
+		hasUserAgent(matcher?: AxiosHeaderMatcher): boolean;
+
+		setContentEncoding(
+			value: AxiosHeaderValue,
+			rewrite?: boolean | AxiosHeaderMatcher
+		): AxiosHeaders;
+		getContentEncoding(parser?: RegExp): RegExpExecArray | null;
+		getContentEncoding(matcher?: AxiosHeaderMatcher): AxiosHeaderValue;
+		hasContentEncoding(matcher?: AxiosHeaderMatcher): boolean;
+
+		setAuthorization(
+			value: AxiosHeaderValue,
+			rewrite?: boolean | AxiosHeaderMatcher
+		): AxiosHeaders;
+		getAuthorization(parser?: RegExp): RegExpExecArray | null;
+		getAuthorization(matcher?: AxiosHeaderMatcher): AxiosHeaderValue;
+		hasAuthorization(matcher?: AxiosHeaderMatcher): boolean;
+
+		[Symbol.iterator](): IterableIterator<[string, AxiosHeaderValue]>;
+	}
+
+	type CommonRequestHeadersList =
+		| "Accept"
+		| "Content-Length"
+		| "User-Agent"
+		| "Content-Encoding"
+		| "Authorization";
+
+	type ContentType =
+		| AxiosHeaderValue
+		| "text/html"
+		| "text/plain"
+		| "multipart/form-data"
+		| "application/json"
+		| "application/x-www-form-urlencoded"
+		| "application/octet-stream";
+
+	export type RawAxiosRequestHeaders = Partial<
+		RawAxiosHeaders & {
+			[Key in CommonRequestHeadersList]: AxiosHeaderValue;
+		} & {
+			"Content-Type": ContentType;
+		}
+	>;
+
+	export type AxiosRequestHeaders = RawAxiosRequestHeaders & AxiosHeaders;
+
+	type CommonResponseHeadersList =
+		| "Server"
+		| "Content-Type"
+		| "Content-Length"
+		| "Cache-Control"
+		| "Content-Encoding";
+
+	type RawCommonResponseHeaders = {
+		[Key in CommonResponseHeadersList]: AxiosHeaderValue;
+	} & {
+		"set-cookie": string[];
+	};
+
+	export type RawAxiosResponseHeaders = Partial<RawAxiosHeaders & RawCommonResponseHeaders>;
+
+	export type AxiosResponseHeaders = RawAxiosResponseHeaders & AxiosHeaders;
+
+	export interface AxiosRequestTransformer {
+		(this: InternalAxiosRequestConfig, data: any, headers: AxiosRequestHeaders): any;
+	}
+
+	export interface AxiosResponseTransformer {
+		(
+			this: InternalAxiosRequestConfig,
+			data: any,
+			headers: AxiosResponseHeaders,
+			status?: number
+		): any;
+	}
+
+	export interface AxiosAdapter {
+		(config: InternalAxiosRequestConfig): AxiosPromise;
+	}
+
+	export interface AxiosBasicCredentials {
+		username: string;
+		password: string;
+	}
+
+	export interface AxiosProxyConfig {
+		host: string;
+		port: number;
+		auth?: AxiosBasicCredentials;
+		protocol?: string;
+	}
+
+	export enum HttpStatusCode {
+		Continue = 100,
+		SwitchingProtocols = 101,
+		Processing = 102,
+		EarlyHints = 103,
+		Ok = 200,
+		Created = 201,
+		Accepted = 202,
+		NonAuthoritativeInformation = 203,
+		NoContent = 204,
+		ResetContent = 205,
+		PartialContent = 206,
+		MultiStatus = 207,
+		AlreadyReported = 208,
+		ImUsed = 226,
+		MultipleChoices = 300,
+		MovedPermanently = 301,
+		Found = 302,
+		SeeOther = 303,
+		NotModified = 304,
+		UseProxy = 305,
+		Unused = 306,
+		TemporaryRedirect = 307,
+		PermanentRedirect = 308,
+		BadRequest = 400,
+		Unauthorized = 401,
+		PaymentRequired = 402,
+		Forbidden = 403,
+		NotFound = 404,
+		MethodNotAllowed = 405,
+		NotAcceptable = 406,
+		ProxyAuthenticationRequired = 407,
+		RequestTimeout = 408,
+		Conflict = 409,
+		Gone = 410,
+		LengthRequired = 411,
+		PreconditionFailed = 412,
+		PayloadTooLarge = 413,
+		UriTooLong = 414,
+		UnsupportedMediaType = 415,
+		RangeNotSatisfiable = 416,
+		ExpectationFailed = 417,
+		ImATeapot = 418,
+		MisdirectedRequest = 421,
+		UnprocessableEntity = 422,
+		Locked = 423,
+		FailedDependency = 424,
+		TooEarly = 425,
+		UpgradeRequired = 426,
+		PreconditionRequired = 428,
+		TooManyRequests = 429,
+		RequestHeaderFieldsTooLarge = 431,
+		UnavailableForLegalReasons = 451,
+		InternalServerError = 500,
+		NotImplemented = 501,
+		BadGateway = 502,
+		ServiceUnavailable = 503,
+		GatewayTimeout = 504,
+		HttpVersionNotSupported = 505,
+		VariantAlsoNegotiates = 506,
+		InsufficientStorage = 507,
+		LoopDetected = 508,
+		NotExtended = 510,
+		NetworkAuthenticationRequired = 511
+	}
+
+	export type Method =
+		| "get"
+		| "GET"
+		| "delete"
+		| "DELETE"
+		| "head"
+		| "HEAD"
+		| "options"
+		| "OPTIONS"
+		| "post"
+		| "POST"
+		| "put"
+		| "PUT"
+		| "patch"
+		| "PATCH"
+		| "purge"
+		| "PURGE"
+		| "link"
+		| "LINK"
+		| "unlink"
+		| "UNLINK";
+
+	export type ResponseType =
+		| "arraybuffer"
+		| "blob"
+		| "document"
+		| "json"
+		| "text"
+		| "stream"
+		| "formdata";
+
+	export type responseEncoding =
+		| "ascii"
+		| "ASCII"
+		| "ansi"
+		| "ANSI"
+		| "binary"
+		| "BINARY"
+		| "base64"
+		| "BASE64"
+		| "base64url"
+		| "BASE64URL"
+		| "hex"
+		| "HEX"
+		| "latin1"
+		| "LATIN1"
+		| "ucs-2"
+		| "UCS-2"
+		| "ucs2"
+		| "UCS2"
+		| "utf-8"
+		| "UTF-8"
+		| "utf8"
+		| "UTF8"
+		| "utf16le"
+		| "UTF16LE";
+
+	export interface TransitionalOptions {
+		silentJSONParsing?: boolean;
+		forcedJSONParsing?: boolean;
+		clarifyTimeoutError?: boolean;
+	}
+
+	export interface GenericAbortSignal {
+		readonly aborted: boolean;
+		onabort?: ((...args: any) => any) | null;
+		addEventListener?: (...args: any) => any;
+		removeEventListener?: (...args: any) => any;
+	}
+
+	export interface FormDataVisitorHelpers {
+		defaultVisitor: SerializerVisitor;
+		convertValue: (value: any) => any;
+		isVisitable: (value: any) => boolean;
+	}
+
+	export interface SerializerVisitor {
+		(
+			this: GenericFormData,
+			value: any,
+			key: string | number,
+			path: null | Array<string | number>,
+			helpers: FormDataVisitorHelpers
+		): boolean;
+	}
+
+	export interface SerializerOptions {
+		visitor?: SerializerVisitor;
+		dots?: boolean;
+		metaTokens?: boolean;
+		indexes?: boolean | null;
+	}
+
+	// tslint:disable-next-line
+	export interface FormSerializerOptions extends SerializerOptions {}
+
+	export interface ParamEncoder {
+		(value: any, defaultEncoder: (value: any) => any): any;
+	}
+
+	export interface CustomParamsSerializer {
+		(params: Record<string, any>, options?: ParamsSerializerOptions): string;
+	}
+
+	export interface ParamsSerializerOptions extends SerializerOptions {
+		encode?: ParamEncoder;
+		serialize?: CustomParamsSerializer;
+	}
+
+	type MaxUploadRate = number;
+
+	type MaxDownloadRate = number;
+
+	type BrowserProgressEvent = any;
+
+	export interface AxiosProgressEvent {
+		loaded: number;
+		total?: number;
+		progress?: number;
+		bytes: number;
+		rate?: number;
+		estimated?: number;
+		upload?: boolean;
+		download?: boolean;
+		event?: BrowserProgressEvent;
+		lengthComputable: boolean;
+	}
+
+	type Milliseconds = number;
+
+	type AxiosAdapterName = "fetch" | "xhr" | "http" | string;
+
+	type AxiosAdapterConfig = AxiosAdapter | AxiosAdapterName;
+
+	export type AddressFamily = 4 | 6 | undefined;
+
+	export interface LookupAddressEntry {
+		address: string;
+		family?: AddressFamily;
+	}
+
+	export type LookupAddress = string | LookupAddressEntry;
+
+	export interface AxiosRequestConfig<D = any> {
+		url?: string;
+		method?: Method | string;
+		baseURL?: string;
+		transformRequest?: AxiosRequestTransformer | AxiosRequestTransformer[];
+		transformResponse?: AxiosResponseTransformer | AxiosResponseTransformer[];
+		headers?: (RawAxiosRequestHeaders & MethodsHeaders) | AxiosHeaders;
+		params?: any;
+		paramsSerializer?: ParamsSerializerOptions | CustomParamsSerializer;
+		data?: D;
+		timeout?: Milliseconds;
+		timeoutErrorMessage?: string;
+		withCredentials?: boolean;
+		adapter?: AxiosAdapterConfig | AxiosAdapterConfig[];
+		auth?: AxiosBasicCredentials;
+		responseType?: ResponseType;
+		responseEncoding?: responseEncoding | string;
+		xsrfCookieName?: string;
+		xsrfHeaderName?: string;
+		onUploadProgress?: (progressEvent: AxiosProgressEvent) => void;
+		onDownloadProgress?: (progressEvent: AxiosProgressEvent) => void;
+		maxContentLength?: number;
+		validateStatus?: ((status: number) => boolean) | null;
+		maxBodyLength?: number;
+		maxRedirects?: number;
+		maxRate?: number | [MaxUploadRate, MaxDownloadRate];
+		beforeRedirect?: (
+			options: Record<string, any>,
+			responseDetails: { headers: Record<string, string>; statusCode: HttpStatusCode }
+		) => void;
+		socketPath?: string | null;
+		transport?: any;
+		httpAgent?: any;
+		httpsAgent?: any;
+		proxy?: AxiosProxyConfig | false;
+		cancelToken?: CancelToken;
+		decompress?: boolean;
+		transitional?: TransitionalOptions;
+		signal?: GenericAbortSignal;
+		insecureHTTPParser?: boolean;
+		env?: {
+			FormData?: new (...args: any[]) => object;
+		};
+		formSerializer?: FormSerializerOptions;
+		family?: AddressFamily;
+		lookup?:
+			| ((
+					hostname: string,
+					options: object,
+					cb: (
+						err: Error | null,
+						address: LookupAddress | LookupAddress[],
+						family?: AddressFamily
+					) => void
+			  ) => void)
+			| ((
+					hostname: string,
+					options: object
+			  ) => Promise<
+					| [address: LookupAddressEntry | LookupAddressEntry[], family?: AddressFamily]
+					| LookupAddress
+			  >);
+		withXSRFToken?: boolean | ((config: InternalAxiosRequestConfig) => boolean | undefined);
+		fetchOptions?: Record<string, any>;
+	}
+
+	// Alias
+	export type RawAxiosRequestConfig<D = any> = AxiosRequestConfig<D>;
+
+	export interface InternalAxiosRequestConfig<D = any> extends AxiosRequestConfig<D> {
+		headers: AxiosRequestHeaders;
+	}
+
+	export interface HeadersDefaults {
+		common: RawAxiosRequestHeaders;
+		delete: RawAxiosRequestHeaders;
+		get: RawAxiosRequestHeaders;
+		head: RawAxiosRequestHeaders;
+		post: RawAxiosRequestHeaders;
+		put: RawAxiosRequestHeaders;
+		patch: RawAxiosRequestHeaders;
+		options?: RawAxiosRequestHeaders;
+		purge?: RawAxiosRequestHeaders;
+		link?: RawAxiosRequestHeaders;
+		unlink?: RawAxiosRequestHeaders;
+	}
+
+	export interface AxiosDefaults<D = any> extends Omit<AxiosRequestConfig<D>, "headers"> {
+		headers: HeadersDefaults;
+	}
+
+	export interface CreateAxiosDefaults<D = any> extends Omit<AxiosRequestConfig<D>, "headers"> {
+		headers?: RawAxiosRequestHeaders | AxiosHeaders | Partial<HeadersDefaults>;
+	}
+
+	export interface AxiosResponse<T = any, D = any> {
+		data: T;
+		status: number;
+		statusText: string;
+		headers: RawAxiosResponseHeaders | AxiosResponseHeaders;
+		config: InternalAxiosRequestConfig<D>;
+		request?: any;
+	}
+
+	export class AxiosError<T = unknown, D = any> extends Error {
+		constructor(
+			message?: string,
+			code?: string,
+			config?: InternalAxiosRequestConfig<D>,
+			request?: any,
+			response?: AxiosResponse<T, D>
+		);
+
+		config?: InternalAxiosRequestConfig<D>;
+		code?: string;
+		request?: any;
+		response?: AxiosResponse<T, D>;
+		isAxiosError: boolean;
+		status?: number;
+		toJSON: () => object;
+		cause?: Error;
+		static from<T = unknown, D = any>(
+			error: Error | unknown,
+			code?: string,
+			config?: InternalAxiosRequestConfig<D>,
+			request?: any,
+			response?: AxiosResponse<T, D>,
+			customProps?: object
+		): AxiosError<T, D>;
+		static readonly ERR_FR_TOO_MANY_REDIRECTS = "ERR_FR_TOO_MANY_REDIRECTS";
+		static readonly ERR_BAD_OPTION_VALUE = "ERR_BAD_OPTION_VALUE";
+		static readonly ERR_BAD_OPTION = "ERR_BAD_OPTION";
+		static readonly ERR_NETWORK = "ERR_NETWORK";
+		static readonly ERR_DEPRECATED = "ERR_DEPRECATED";
+		static readonly ERR_BAD_RESPONSE = "ERR_BAD_RESPONSE";
+		static readonly ERR_BAD_REQUEST = "ERR_BAD_REQUEST";
+		static readonly ERR_NOT_SUPPORT = "ERR_NOT_SUPPORT";
+		static readonly ERR_INVALID_URL = "ERR_INVALID_URL";
+		static readonly ERR_CANCELED = "ERR_CANCELED";
+		static readonly ECONNABORTED = "ECONNABORTED";
+		static readonly ETIMEDOUT = "ETIMEDOUT";
+	}
+
+	export class CanceledError<T> extends AxiosError<T> {}
+
+	export type AxiosPromise<T = any> = Promise<AxiosResponse<T>>;
+
+	export interface CancelStatic {
+		new (message?: string): Cancel;
+	}
+
+	export interface Cancel {
+		message: string | undefined;
+	}
+
+	export interface Canceler {
+		(message?: string, config?: AxiosRequestConfig, request?: any): void;
+	}
+
+	export interface CancelTokenStatic {
+		new (executor: (cancel: Canceler) => void): CancelToken;
+		source(): CancelTokenSource;
+	}
+
+	export interface CancelToken {
+		promise: Promise<Cancel>;
+		reason?: Cancel;
+		throwIfRequested(): void;
+	}
+
+	export interface CancelTokenSource {
+		token: CancelToken;
+		cancel: Canceler;
+	}
+
+	export interface AxiosInterceptorOptions {
+		synchronous?: boolean;
+		runWhen?: (config: InternalAxiosRequestConfig) => boolean;
+	}
+
+	export interface AxiosInterceptorManager<V> {
+		use(
+			onFulfilled?: ((value: V) => V | Promise<V>) | null,
+			onRejected?: ((error: any) => any) | null,
+			options?: AxiosInterceptorOptions
+		): number;
+		eject(id: number): void;
+		clear(): void;
+	}
+
+	export class Axios {
+		constructor(config?: AxiosRequestConfig);
+		defaults: AxiosDefaults;
+		interceptors: {
+			request: AxiosInterceptorManager<InternalAxiosRequestConfig>;
+			response: AxiosInterceptorManager<AxiosResponse>;
+		};
+		getUri(config?: AxiosRequestConfig): string;
+		request<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig<D>): Promise<R>;
+		get<T = any, R = AxiosResponse<T>, D = any>(
+			url: string,
+			config?: AxiosRequestConfig<D>
+		): Promise<R>;
+		delete<T = any, R = AxiosResponse<T>, D = any>(
+			url: string,
+			config?: AxiosRequestConfig<D>
+		): Promise<R>;
+		head<T = any, R = AxiosResponse<T>, D = any>(
+			url: string,
+			config?: AxiosRequestConfig<D>
+		): Promise<R>;
+		options<T = any, R = AxiosResponse<T>, D = any>(
+			url: string,
+			config?: AxiosRequestConfig<D>
+		): Promise<R>;
+		post<T = any, R = AxiosResponse<T>, D = any>(
+			url: string,
+			data?: D,
+			config?: AxiosRequestConfig<D>
+		): Promise<R>;
+		put<T = any, R = AxiosResponse<T>, D = any>(
+			url: string,
+			data?: D,
+			config?: AxiosRequestConfig<D>
+		): Promise<R>;
+		patch<T = any, R = AxiosResponse<T>, D = any>(
+			url: string,
+			data?: D,
+			config?: AxiosRequestConfig<D>
+		): Promise<R>;
+		postForm<T = any, R = AxiosResponse<T>, D = any>(
+			url: string,
+			data?: D,
+			config?: AxiosRequestConfig<D>
+		): Promise<R>;
+		putForm<T = any, R = AxiosResponse<T>, D = any>(
+			url: string,
+			data?: D,
+			config?: AxiosRequestConfig<D>
+		): Promise<R>;
+		patchForm<T = any, R = AxiosResponse<T>, D = any>(
+			url: string,
+			data?: D,
+			config?: AxiosRequestConfig<D>
+		): Promise<R>;
+	}
+
+	export interface AxiosInstance extends Axios {
+		<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig<D>): Promise<R>;
+		<T = any, R = AxiosResponse<T>, D = any>(
+			url: string,
+			config?: AxiosRequestConfig<D>
+		): Promise<R>;
+
+		defaults: Omit<AxiosDefaults, "headers"> & {
+			headers: HeadersDefaults & {
+				[key: string]: AxiosHeaderValue;
+			};
+		};
+	}
+
+	export interface GenericFormData {
+		append(name: string, value: any, options?: any): any;
+	}
+
+	export interface GenericHTMLFormElement {
+		name: string;
+		method: string;
+		submit(): void;
+	}
+
+	export function getAdapter(
+		adapters: AxiosAdapterConfig | AxiosAdapterConfig[] | undefined
+	): AxiosAdapter;
+
+	export function toFormData(
+		sourceObj: object,
+		targetFormData?: GenericFormData,
+		options?: FormSerializerOptions
+	): GenericFormData;
+
+	export function formToJSON(form: GenericFormData | GenericHTMLFormElement): object;
+
+	export function isAxiosError<T = any, D = any>(payload: any): payload is AxiosError<T, D>;
+
+	export function spread<T, R>(callback: (...args: T[]) => R): (array: T[]) => R;
+
+	export function isCancel(value: any): value is Cancel;
+
+	export function all<T>(values: Array<T | Promise<T>>): Promise<T[]>;
+
+	export interface AxiosStatic extends AxiosInstance {
+		create(config?: CreateAxiosDefaults): AxiosInstance;
+		Cancel: CancelStatic;
+		CancelToken: CancelTokenStatic;
+		Axios: typeof Axios;
+		AxiosError: typeof AxiosError;
+		HttpStatusCode: typeof HttpStatusCode;
+		readonly VERSION: string;
+		isCancel: typeof isCancel;
+		all: typeof all;
+		spread: typeof spread;
+		isAxiosError: typeof isAxiosError;
+		toFormData: typeof toFormData;
+		formToJSON: typeof formToJSON;
+		getAdapter: typeof getAdapter;
+		CanceledError: typeof CanceledError;
+		AxiosHeaders: typeof AxiosHeaders;
+	}
+
+	const axios: AxiosStatic;
+
+	export default axios;
+}
+`;
diff --git a/src/modules/flow/components/nodes/code/editor/declares/cool.ts b/src/modules/flow/components/nodes/code/editor/declares/cool.ts
new file mode 100644
index 0000000..9b987e8
--- /dev/null
+++ b/src/modules/flow/components/nodes/code/editor/declares/cool.ts
@@ -0,0 +1,639 @@
+export const cool = `
+/**
+ * Repository
+ */
+interface Repository {
+	/**
+	 * any target that is managed by this repository.
+	 * If this repository manages any from schema,
+	 * then it returns a name of that schema instead.
+	 */
+	readonly target: any;
+	/**
+	 * any Manager used by this repository.
+	 */
+	readonly manager: any;
+	/**
+	 * Query runner provider used for this repository.
+	 */
+	readonly queryRunner?: any;
+	/**
+	 * any metadata of the any current repository manages.
+	 */
+	get metadata(): any;
+	/**
+	 * Creates a new query builder that can be used to build a SQL query.
+	 */
+	createQueryBuilder(alias?: string, queryRunner?: any): any;
+	/**
+	 * Checks if any has an id.
+	 * If any composite compose ids, it will check them all.
+	 */
+	hasId(any: any): boolean;
+	/**
+	 * Gets any mixed id.
+	 */
+	getId(any: any): any;
+	/**
+	 * Creates a new any instance.
+	 */
+	create(): any;
+	/**
+	 * Creates new entities and copies all any properties from given objects into their new entities.
+	 * Note that it copies only properties that are present in any schema.
+	 */
+	create(anyLikeArray: any): any[];
+	/**
+	 * Creates a new any instance and copies all any properties from this object into a new any.
+	 * Note that it copies only properties that are present in any schema.
+	 */
+	create(anyLike: any): any;
+	/**
+	 * Merges multiple entities (or any-like objects) into a given any.
+	 */
+	merge(mergeIntoany: any, ...anyLikes: any): any;
+	/**
+	 * Creates a new any from the given plain javascript object. If any already exist in the database, then
+	 * it loads it (and everything related to it), replaces all values with the new ones from the given object
+	 * and returns this new any. This new any is actually a loaded from the db any with all properties
+	 * replaced from the new object.
+	 *
+	 * Note that given any-like object must have an any id / primary key to find any by.
+	 * Returns undefined if any with given id was not found.
+	 */
+	preload(anyLike: any): Promise<any | undefined>;
+	/**
+	 * Saves all given entities in the database.
+	 * If entities do not exist in the database then inserts, otherwise updates.
+	 */
+	save(
+		entities: any[],
+		options: any & {
+			reload: false;
+		}
+	): Promise<any[]>;
+	/**
+	 * Saves all given entities in the database.
+	 * If entities do not exist in the database then inserts, otherwise updates.
+	 */
+	save(entities: any[], options?: any): Promise<any[]>;
+	/**
+	 * Saves a given any in the database.
+	 * If any does not exist in the database then inserts, otherwise updates.
+	 */
+	save(
+		any: any,
+		options: any & {
+			reload: false;
+		}
+	): Promise<any>;
+	/**
+	 * Saves a given any in the database.
+	 * If any does not exist in the database then inserts, otherwise updates.
+	 */
+	save(any: any, options?: any): any;
+	/**
+	 * Removes a given entities from the database.
+	 */
+	remove(entities: any[], options?: any): Promise<any[]>;
+	/**
+	 * Removes a given any from the database.
+	 */
+	remove(any: any, options?: any): Promise<any>;
+	/**
+	 * Records the delete date of all given entities.
+	 */
+	softRemove(
+		entities: any[],
+		options: any & {
+			reload: false;
+		}
+	): Promise<any[]>;
+	/**
+	 * Records the delete date of all given entities.
+	 */
+	softRemove(entities: any[], options?: any): Promise<any[]>;
+	/**
+	 * Records the delete date of a given any.
+	 */
+	softRemove(
+		any: any,
+		options: any & {
+			reload: false;
+		}
+	): Promise<any>;
+	/**
+	 * Records the delete date of a given any.
+	 */
+	softRemove(any: any, options?: any): Promise<any>;
+	/**
+	 * Recovers all given entities in the database.
+	 */
+	recover(
+		entities: any[],
+		options: any & {
+			reload: false;
+		}
+	): Promise<any[]>;
+	/**
+	 * Recovers all given entities in the database.
+	 */
+	recover(entities: any[], options?: any): Promise<any[]>;
+	/**
+	 * Recovers a given any in the database.
+	 */
+	recover(
+		any: any,
+		options: any & {
+			reload: false;
+		}
+	): Promise<any>;
+	/**
+	 * Recovers a given any in the database.
+	 */
+	recover(any: any, options?: any): Promise<any>;
+	/**
+	 * Inserts a given any into the database.
+	 * Unlike save method executes a primitive operation without cascades, relations and other operations included.
+	 * Executes fast and efficient INSERT query.
+	 * Does not check if any exist in the database, so query will fail if duplicate any is being inserted.
+	 */
+	insert(any: any | any[]): Promise<any>;
+	/**
+	 * Updates any partially. any can be found by a given conditions.
+	 * Unlike save method executes a primitive operation without cascades, relations and other operations included.
+	 * Executes fast and efficient UPDATE query.
+	 * Does not check if any exist in the database.
+	 */
+	update(criteria: any, partialany: any): Promise<any>;
+	/**
+	 * Inserts a given any into the database, unless a unique constraint conflicts then updates the any
+	 * Unlike save method executes a primitive operation without cascades, relations and other operations included.
+	 * Executes fast and efficient INSERT ... ON CONFLICT DO UPDATE/ON DUPLICATE KEY UPDATE query.
+	 */
+	upsert(anyOrEntities: any | any[], conflictPathsOrOptions: string[] | any): Promise<any>;
+	/**
+	 * Deletes entities by a given criteria.
+	 * Unlike save method executes a primitive operation without cascades, relations and other operations included.
+	 * Executes fast and efficient DELETE query.
+	 * Does not check if any exist in the database.
+	 */
+	delete(criteria: any): Promise<any>;
+	/**
+	 * Records the delete date of entities by a given criteria.
+	 * Unlike save method executes a primitive operation without cascades, relations and other operations included.
+	 * Executes fast and efficient SOFT-DELETE query.
+	 * Does not check if any exist in the database.
+	 */
+	softDelete(criteria: any): Promise<any>;
+	/**
+	 * Restores entities by a given criteria.
+	 * Unlike save method executes a primitive operation without cascades, relations and other operations included.
+	 * Executes fast and efficient SOFT-DELETE query.
+	 * Does not check if any exist in the database.
+	 */
+	restore(criteria: any): Promise<any>;
+	/**
+	 * Checks whether any any exists that matches the given options.
+	 *
+	 * @deprecated use \`exists\` method instead, for example:
+	 *
+	 * .exists()
+	 */
+	exist(options?: any): Promise<boolean>;
+	/**
+	 * Checks whether any any exists that matches the given options.
+	 */
+	exists(options?: any): Promise<boolean>;
+	/**
+	 * Checks whether any any exists that matches the given conditions.
+	 */
+	existsBy(where: any | any[]): Promise<boolean>;
+	/**
+	 * Counts entities that match given options.
+	 * Useful for pagination.
+	 */
+	count(options?: any): Promise<number>;
+	/**
+	 * Counts entities that match given conditions.
+	 * Useful for pagination.
+	 */
+	countBy(where: any | any[]): Promise<number>;
+	/**
+	 * Return the SUM of a column
+	 */
+	sum(columnName: any, where?: any | any[]): Promise<number | null>;
+	/**
+	 * Return the AVG of a column
+	 */
+	average(columnName: any, where?: any | any[]): Promise<number | null>;
+	/**
+	 * Return the MIN of a column
+	 */
+	minimum(columnName: any, where?: any | any[]): Promise<number | null>;
+	/**
+	 * Return the MAX of a column
+	 */
+	maximum(columnName: any, where?: any | any[]): Promise<number | null>;
+	/**
+	 * Finds entities that match given find options.
+	 */
+	find(options?: any): Promise<any[]>;
+	/**
+	 * Finds entities that match given find options.
+	 */
+	findBy(where: any | any[]): Promise<any[]>;
+	/**
+	 * Finds entities that match given find options.
+	 * Also counts all entities that match given conditions,
+	 * but ignores pagination settings (from and take options).
+	 */
+	findAndCount(options?: any): Promise<[any[], number]>;
+	/**
+	 * Finds entities that match given WHERE conditions.
+	 * Also counts all entities that match given conditions,
+	 * but ignores pagination settings (from and take options).
+	 */
+	findAndCountBy(where: any | any[]): Promise<[any[], number]>;
+	/**
+	 * Finds entities with ids.
+	 * Optionally find options or conditions can be applied.
+	 *
+	 * @deprecated use \`findBy\` method instead in conjunction with \`In\` operator, for example:
+	 *
+	 * .findBy({
+	 *     id: In([1, 2, 3])
+	 * })
+	 */
+	findByIds(ids: any[]): Promise<any[]>;
+	/**
+	 * Finds first any by a given find options.
+	 * If any was not found in the database - returns null.
+	 */
+	findOne(options: any): Promise<any | null>;
+	/**
+	 * Finds first any that matches given where condition.
+	 * If any was not found in the database - returns null.
+	 */
+	findOneBy(where: any | any[]): Promise<any | null>;
+	/**
+	 * Finds first any that matches given id.
+	 * If any was not found in the database - returns null.
+	 *
+	 * @deprecated use \`findOneBy\` method instead in conjunction with \`In\` operator, for example:
+	 *
+	 * .findOneBy({
+	 *     id: 1 // where "id" is your primary column name
+	 * })
+	 */
+	findOneById(id: number | string | Date | any): Promise<any | null>;
+	/**
+	 * Finds first any by a given find options.
+	 * If any was not found in the database - rejects with error.
+	 */
+	findOneOrFail(options: any): Promise<any>;
+	/**
+	 * Finds first any that matches given where condition.
+	 * If any was not found in the database - rejects with error.
+	 */
+	findOneByOrFail(where: any | any[]): Promise<any>;
+	/**
+	 * Executes a raw SQL query and returns a raw database results.
+	 * Raw query execution is supported only by relational databases (MongoDB is not supported).
+	 */
+	query(query: string, parameters?: any[]): Promise<any>;
+	/**
+	 * Clears all the data from the given table/collection (truncates/drops it).
+	 *
+	 * Note: this method uses TRUNCATE and may not work as you expect in transactions on some platforms.
+	 * @see https://stackoverflow.com/a/5972738/925151
+	 */
+	clear(): Promise<void>;
+	/**
+	 * Increments some column by provided value of the entities matched given conditions.
+	 */
+	increment(conditions: any, propertyPath: string, value: number | string): Promise<any>;
+	/**
+	 * Decrements some column by provided value of the entities matched given conditions.
+	 */
+	decrement(conditions: any, propertyPath: string, value: number | string): Promise<any>;
+	/**
+	 * Extends repository with provided functions.
+	 */
+	extend<CustomRepository>(
+		customs: CustomRepository & ThisType<this & CustomRepository>
+	): this & CustomRepository;
+
+	[key: string]: any;
+}
+
+/**
+ * App
+ */
+interface App {
+	/**
+	 * 获得基础目录
+	 */
+	getBaseDir(): string;
+	/**
+	 * 获得应用目录
+	 */
+	getAppDir(): string;
+	/**
+	 * 获得环境
+	 */
+	getEnv(): string;
+	/**
+	 * 获得框架
+	 */
+	getFramework(): any;
+	/**
+	 * 获得当前进程类型
+	 */
+	getProcessType(): any;
+	/**
+	 * 获得全局容器
+	 */
+	getApplicationContext(): any;
+	/**
+	 * 获得配置
+	 * @param key 配置key
+	 */
+	getConfig(key?: string): any;
+	/**
+	 * 获得日志
+	 * @param name
+	 */
+	getLogger(name?: string): any;
+	/**
+	 * 获得核心日志
+	 */
+	getCoreLogger(): any;
+	/**
+	 * 创建日志
+	 * @param name
+	 * @param options
+	 */
+	createLogger(name: string, options: any): any;
+	/**
+	 * 获得当前应用名称
+	 */
+	getProjectName(): string;
+	/**
+	 * 创建一个带有RequestContainer的上下文
+	 * @param args 参数
+	 */
+	createAnonymousContext(...args: any[]): any;
+	/**
+	 * 创建一个带有RequestContainer的上下文
+	 * @param BaseContextLoggerClass 上下文日志类
+	 */
+	setContextLoggerClass(BaseContextLoggerClass: any): void;
+	/**
+	 * 新增配置
+	 * @param obj 配置对象
+	 */
+	addConfigObject(obj: any): any;
+	/**
+	 * 设置属性
+	 * @param key 属性名
+	 * @param value 属性值
+	 */
+	setAttr(key: string, value: any): any;
+	/**
+	 * 获得属性
+	 * @param key
+	 */
+	getAttr<T>(key: string): T;
+	/**
+	 * 使用中间件
+	 * @param Middleware
+	 */
+	useMiddleware<R, N>(Middleware): void;
+	/**
+	 * 获得中间件
+	 */
+	getMiddleware<R, N>(): any;
+	/**
+	 * 使用过滤器
+	 * @param Filter 过滤器
+	 */
+	useFilter<R, N>(Filter): void;
+	/**
+	 * 新增全局守卫
+	 * @param guard
+	 */
+	useGuard(guard): void;
+	/**
+	 * 获得命名空间
+	 */
+	getNamespace(): string;
+
+	[key: string]: any;
+}
+
+/**
+ * OrmManager
+ */
+interface OrmManager {
+	/**
+	 * 获得数据源
+	 * @param dataSourceName
+	 */
+	getDataSource(dataSourceName: string): any;
+	/**
+	 * 检查数据源是否存在
+	 * @param dataSourceName
+	 */
+	hasDataSource(dataSourceName: string): boolean;
+	/**
+	 * 获得所有数据源名称
+	 */
+	getDataSourceNames(): string[];
+	/**
+	 * 获得所有数据源
+	 */
+	getAllDataSources(): Map<string, any>;
+	/**
+	 * 检查数据源是否连接
+	 * @param dataSourceName
+	 */
+	isConnected(dataSourceName: string): Promise<boolean>;
+	/**
+	 * 创建数据源实例
+	 * @param config
+	 * @param clientName
+	 * @param options
+	 */
+	createInstance(
+		config: any,
+		clientName: any,
+		options?: {
+			validateConnection?: boolean;
+			cacheInstance?: boolean | undefined;
+		}
+	): Promise<any>;
+	/**
+	 * 获得model或者repository的数据源名称
+	 * @param modelOrRepository
+	 */
+	getDataSourceNameByModel(modelOrRepository: any): string | undefined;
+	/**
+	 * 获得名称
+	 */
+	getName(): string;
+	/**
+	 * 停止
+	 */
+	stop(): Promise<void>;
+	/**
+	 * 获得默认数据源名称
+	 */
+	getDefaultDataSourceName(): string;
+	/**
+	 * 获得数据源优先级
+	 * @param name
+	 */
+	getDataSourcePriority(name: string): string;
+	/**
+	 * 是否高优先级
+	 * @param name
+	 */
+	isHighPriority(name: string): boolean;
+	/**
+	 * 是否中等优先级
+	 * @param
+	 */
+	isMediumPriority(name: string): boolean;
+	/**
+	 * 是否低优先级
+	 * @param name
+	 */
+	isLowPriority(name: string): boolean;
+
+	[key: string]: any;
+}
+
+/**
+ * PluginService
+ */
+interface PluginService {
+	/**
+	 * 获得插件配置
+	 * @param key 插件key
+	 */
+	getConfig(key: string): Promise<any>;
+	/**
+	 * 调用插件
+	 * @param key 插件key
+	 * @param method 方法
+	 * @param params 参数
+	 * @returns
+	 */
+	invoke(key: string, method: string, ...params: any[]): Promise<any>;
+	/**
+	 * 获得插件实例
+	 * @param key 插件key
+	 * @returns
+	 */
+	getInstance(key: string): Promise<any>;
+
+	[key: string]: any;
+}
+
+/**
+ * MidwayCache
+ */
+interface MidwayCache {
+	/**
+	 * 设置缓存
+	 * @param key
+	 * @param value
+	 * @param ttl
+	 * @returns
+	 */
+	set: (key: string, value: unknown, ttl?: number) => Promise<void>;
+	/**
+	 * 获得缓存
+	 * @param key
+	 * @returns
+	 */
+	get: <T>(key: string) => Promise<T | undefined>;
+	/**
+	 * 删除缓存
+	 * @param key
+	 * @returns
+	 */
+	del: (key: string) => Promise<void>;
+	/**
+	 * 重置缓存
+	 * @returns
+	 */
+	reset: () => Promise<void>;
+
+	[key: string]: any;
+}
+
+/**
+ * 代码执行基类
+ */
+
+declare class Base {
+	/**
+	 * 数据源管理器
+	 */
+	typeORMDataSourceManager: OrmManager;
+
+	/**
+	 * 应用
+	 */
+	app: App;
+	/**
+	 * 插件服务
+	 */
+	pluginService: PluginService;
+
+	/**
+	 * 缓存
+	 */
+	cache: MidwayCache;
+
+	/**
+	 * 主函数
+	 */
+	main(params: any): Promise<any>;
+
+	/**
+	 * 执行sql
+	 * @param sql sql语句
+	 * @param params 参数
+	 * @param dataSource 数据源
+	 */
+	execSql(sql: string, params, dataSource): Promise<any>;
+
+	/**
+	 * 获得typeorm的Repository
+	 * @param anyName
+	 * @returns
+	 */
+	getRepository(anyName: string): Promise<Repository>;
+
+	/**
+	 * 调用service
+	 * @param service 服务
+	 * @param method 方法
+	 * @param args 参数
+	 * @returns
+	 */
+	invokeService(service: string, method: string, ...args): Promise<any>;
+
+	/**
+	 * 调用插件
+	 * @param key 插件的key
+	 * @param method 插件的方法
+	 * @param args 参数
+	 * @returns
+	 */
+	invokePlugin(key: string, method: string, ...args): Promise<any>;
+}
+`;
diff --git a/src/modules/flow/components/nodes/code/editor/declares/dayjs.ts b/src/modules/flow/components/nodes/code/editor/declares/dayjs.ts
new file mode 100644
index 0000000..a92a0be
--- /dev/null
+++ b/src/modules/flow/components/nodes/code/editor/declares/dayjs.ts
@@ -0,0 +1,464 @@
+export const dayjs = `
+declare module "dayjs" {
+	function dayjs(date?: dayjs.ConfigType): dayjs.Dayjs;
+
+	function dayjs(
+		date?: dayjs.ConfigType,
+		format?: dayjs.OptionType,
+		strict?: boolean
+	): dayjs.Dayjs;
+
+	function dayjs(
+		date?: dayjs.ConfigType,
+		format?: dayjs.OptionType,
+		locale?: string,
+		strict?: boolean
+	): dayjs.Dayjs;
+
+	namespace dayjs {
+		interface ConfigTypeMap {
+			default: string | number | Date | Dayjs | null | undefined;
+		}
+
+		export type ConfigType = ConfigTypeMap[keyof ConfigTypeMap];
+
+		export interface FormatObject {
+			locale?: string;
+			format?: string;
+			utc?: boolean;
+		}
+
+		export type OptionType = FormatObject | string | string[];
+
+		export type UnitTypeShort = "d" | "D" | "M" | "y" | "h" | "m" | "s" | "ms";
+
+		export type UnitTypeLong =
+			| "millisecond"
+			| "second"
+			| "minute"
+			| "hour"
+			| "day"
+			| "month"
+			| "year"
+			| "date";
+
+		export type UnitTypeLongPlural =
+			| "milliseconds"
+			| "seconds"
+			| "minutes"
+			| "hours"
+			| "days"
+			| "months"
+			| "years"
+			| "dates";
+
+		export type UnitType = UnitTypeLong | UnitTypeLongPlural | UnitTypeShort;
+
+		export type OpUnitType = UnitType | "week" | "weeks" | "w";
+		export type QUnitType = UnitType | "quarter" | "quarters" | "Q";
+		export type ManipulateType = Exclude<OpUnitType, "date" | "dates">;
+		class Dayjs {
+			constructor(config?: ConfigType);
+			/**
+			 * All Day.js objects are immutable. Still, \`dayjs#clone\` can create a clone of the current object if you need one.
+			 * \`\`\`
+			 * dayjs().clone()// => Dayjs
+			 * dayjs(dayjs('2019-01-25')) // passing a Dayjs object to a constructor will also clone it
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/parse/dayjs-clone
+			 */
+			clone(): Dayjs;
+			/**
+			 * This returns a \`boolean\` indicating whether the Day.js object contains a valid date or not.
+			 * \`\`\`
+			 * dayjs().isValid()// => boolean
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/parse/is-valid
+			 */
+			isValid(): boolean;
+			/**
+			 * Get the year.
+			 * \`\`\`
+			 * dayjs().year()// => 2020
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/get-set/year
+			 */
+			year(): number;
+			/**
+			 * Set the year.
+			 * \`\`\`
+			 * dayjs().year(2000)// => Dayjs
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/get-set/year
+			 */
+			year(value: number): Dayjs;
+			/**
+			 * Get the month.
+			 *
+			 * Months are zero indexed, so January is month 0.
+			 * \`\`\`
+			 * dayjs().month()// => 0-11
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/get-set/month
+			 */
+			month(): number;
+			/**
+			 * Set the month.
+			 *
+			 * Months are zero indexed, so January is month 0.
+			 *
+			 * Accepts numbers from 0 to 11. If the range is exceeded, it will bubble up to the next year.
+			 * \`\`\`
+			 * dayjs().month(0)// => Dayjs
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/get-set/month
+			 */
+			month(value: number): Dayjs;
+			/**
+			 * Get the date of the month.
+			 * \`\`\`
+			 * dayjs().date()// => 1-31
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/get-set/date
+			 */
+			date(): number;
+			/**
+			 * Set the date of the month.
+			 *
+			 * Accepts numbers from 1 to 31. If the range is exceeded, it will bubble up to the next months.
+			 * \`\`\`
+			 * dayjs().date(1)// => Dayjs
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/get-set/date
+			 */
+			date(value: number): Dayjs;
+			/**
+			 * Get the day of the week.
+			 *
+			 * Returns numbers from 0 (Sunday) to 6 (Saturday).
+			 * \`\`\`
+			 * dayjs().day()// 0-6
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/get-set/day
+			 */
+			day(): 0 | 1 | 2 | 3 | 4 | 5 | 6;
+			/**
+			 * Set the day of the week.
+			 *
+			 * Accepts numbers from 0 (Sunday) to 6 (Saturday). If the range is exceeded, it will bubble up to next weeks.
+			 * \`\`\`
+			 * dayjs().day(0)// => Dayjs
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/get-set/day
+			 */
+			day(value: number): Dayjs;
+			/**
+			 * Get the hour.
+			 * \`\`\`
+			 * dayjs().hour()// => 0-23
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/get-set/hour
+			 */
+			hour(): number;
+			/**
+			 * Set the hour.
+			 *
+			 * Accepts numbers from 0 to 23. If the range is exceeded, it will bubble up to the next day.
+			 * \`\`\`
+			 * dayjs().hour(12)// => Dayjs
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/get-set/hour
+			 */
+			hour(value: number): Dayjs;
+			/**
+			 * Get the minutes.
+			 * \`\`\`
+			 * dayjs().minute()// => 0-59
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/get-set/minute
+			 */
+			minute(): number;
+			/**
+			 * Set the minutes.
+			 *
+			 * Accepts numbers from 0 to 59. If the range is exceeded, it will bubble up to the next hour.
+			 * \`\`\`
+			 * dayjs().minute(59)// => Dayjs
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/get-set/minute
+			 */
+			minute(value: number): Dayjs;
+			/**
+			 * Get the seconds.
+			 * \`\`\`
+			 * dayjs().second()// => 0-59
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/get-set/second
+			 */
+			second(): number;
+			/**
+			 * Set the seconds.
+			 *
+			 * Accepts numbers from 0 to 59. If the range is exceeded, it will bubble up to the next minutes.
+			 * \`\`\`
+			 * dayjs().second(1)// Dayjs
+			 * \`\`\`
+			 */
+			second(value: number): Dayjs;
+			/**
+			 * Get the milliseconds.
+			 * \`\`\`
+			 * dayjs().millisecond()// => 0-999
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/get-set/millisecond
+			 */
+			millisecond(): number;
+			/**
+			 * Set the milliseconds.
+			 *
+			 * Accepts numbers from 0 to 999. If the range is exceeded, it will bubble up to the next seconds.
+			 * \`\`\`
+			 * dayjs().millisecond(1)// => Dayjs
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/get-set/millisecond
+			 */
+			millisecond(value: number): Dayjs;
+			/**
+			 * Generic setter, accepting unit as first argument, and value as second, returns a new instance with the applied changes.
+			 *
+			 * In general:
+			 * \`\`\`
+			 * dayjs().set(unit, value) === dayjs()[unit](value)
+			 * \`\`\`
+			 * Units are case insensitive, and support plural and short forms.
+			 * \`\`\`
+			 * dayjs().set('date', 1)
+			 * dayjs().set('month', 3) // April
+			 * dayjs().set('second', 30)
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/get-set/set
+			 */
+			set(unit: UnitType, value: number): Dayjs;
+			/**
+			 * String getter, returns the corresponding information getting from Day.js object.
+			 *
+			 * In general:
+			 * \`\`\`
+			 * dayjs().get(unit) === dayjs()[unit]()
+			 * \`\`\`
+			 * Units are case insensitive, and support plural and short forms.
+			 * \`\`\`
+			 * dayjs().get('year')
+			 * dayjs().get('month') // start 0
+			 * dayjs().get('date')
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/get-set/get
+			 */
+			get(unit: UnitType): number;
+			/**
+			 * Returns a cloned Day.js object with a specified amount of time added.
+			 * \`\`\`
+			 * dayjs().add(7, 'day')// => Dayjs
+			 * \`\`\`
+			 * Units are case insensitive, and support plural and short forms.
+			 *
+			 * Docs: https://day.js.org/docs/en/manipulate/add
+			 */
+			add(value: number, unit?: ManipulateType): Dayjs;
+			/**
+			 * Returns a cloned Day.js object with a specified amount of time subtracted.
+			 * \`\`\`
+			 * dayjs().subtract(7, 'year')// => Dayjs
+			 * \`\`\`
+			 * Units are case insensitive, and support plural and short forms.
+			 *
+			 * Docs: https://day.js.org/docs/en/manipulate/subtract
+			 */
+			subtract(value: number, unit?: ManipulateType): Dayjs;
+			/**
+			 * Returns a cloned Day.js object and set it to the start of a unit of time.
+			 * \`\`\`
+			 * dayjs().startOf('year')// => Dayjs
+			 * \`\`\`
+			 * Units are case insensitive, and support plural and short forms.
+			 *
+			 * Docs: https://day.js.org/docs/en/manipulate/start-of
+			 */
+			startOf(unit: OpUnitType): Dayjs;
+			/**
+			 * Returns a cloned Day.js object and set it to the end of a unit of time.
+			 * \`\`\`
+			 * dayjs().endOf('month')// => Dayjs
+			 * \`\`\`
+			 * Units are case insensitive, and support plural and short forms.
+			 *
+			 * Docs: https://day.js.org/docs/en/manipulate/end-of
+			 */
+			endOf(unit: OpUnitType): Dayjs;
+			/**
+			 * Get the formatted date according to the string of tokens passed in.
+			 *
+			 * To escape characters, wrap them in square brackets (e.g. [MM]).
+			 * \`\`\`
+			 * dayjs().format()// => current date in ISO8601, without fraction seconds e.g. '2020-04-02T08:02:17-05:00'
+			 * dayjs('2019-01-25').format('[YYYYescape] YYYY-MM-DDTHH:mm:ssZ[Z]')// 'YYYYescape 2019-01-25T00:00:00-02:00Z'
+			 * dayjs('2019-01-25').format('DD/MM/YYYY') // '25/01/2019'
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/display/format
+			 */
+			format(template?: string): string;
+			/**
+			 * This indicates the difference between two date-time in the specified unit.
+			 *
+			 * To get the difference in milliseconds, use \`dayjs#diff\`
+			 * \`\`\`
+			 * const date1 = dayjs('2019-01-25')
+			 * const date2 = dayjs('2018-06-05')
+			 * date1.diff(date2) // 20214000000 default milliseconds
+			 * date1.diff() // milliseconds to current time
+			 * \`\`\`
+			 *
+			 * To get the difference in another unit of measurement, pass that measurement as the second argument.
+			 * \`\`\`
+			 * const date1 = dayjs('2019-01-25')
+			 * date1.diff('2018-06-05', 'month') // 7
+			 * \`\`\`
+			 * Units are case insensitive, and support plural and short forms.
+			 *
+			 * Docs: https://day.js.org/docs/en/display/difference
+			 */
+			diff(date?: ConfigType, unit?: QUnitType | OpUnitType, float?: boolean): number;
+			/**
+			 * This returns the number of **milliseconds** since the Unix Epoch of the Day.js object.
+			 * \`\`\`
+			 * dayjs('2019-01-25').valueOf() // 1548381600000
+			 * +dayjs(1548381600000) // 1548381600000
+			 * \`\`\`
+			 * To get a Unix timestamp (the number of seconds since the epoch) from a Day.js object, you should use Unix Timestamp \`dayjs#unix()\`.
+			 *
+			 * Docs: https://day.js.org/docs/en/display/unix-timestamp-milliseconds
+			 */
+			valueOf(): number;
+			/**
+			 * This returns the Unix timestamp (the number of **seconds** since the Unix Epoch) of the Day.js object.
+			 * \`\`\`
+			 * dayjs('2019-01-25').unix() // 1548381600
+			 * \`\`\`
+			 * This value is floored to the nearest second, and does not include a milliseconds component.
+			 *
+			 * Docs: https://day.js.org/docs/en/display/unix-timestamp
+			 */
+			unix(): number;
+			/**
+			 * Get the number of days in the current month.
+			 * \`\`\`
+			 * dayjs('2019-01-25').daysInMonth() // 31
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/display/days-in-month
+			 */
+			daysInMonth(): number;
+			/**
+			 * To get a copy of the native \`Date\` object parsed from the Day.js object use \`dayjs#toDate\`.
+			 * \`\`\`
+			 * dayjs('2019-01-25').toDate()// => Date
+			 * \`\`\`
+			 */
+			toDate(): Date;
+			/**
+			 * To serialize as an ISO 8601 string.
+			 * \`\`\`
+			 * dayjs('2019-01-25').toJSON() // '2019-01-25T02:00:00.000Z'
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/display/as-json
+			 */
+			toJSON(): string;
+			/**
+			 * To format as an ISO 8601 string.
+			 * \`\`\`
+			 * dayjs('2019-01-25').toISOString() // '2019-01-25T02:00:00.000Z'
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/display/as-iso-string
+			 */
+			toISOString(): string;
+			/**
+			 * Returns a string representation of the date.
+			 * \`\`\`
+			 * dayjs('2019-01-25').toString() // 'Fri, 25 Jan 2019 02:00:00 GMT'
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/display/as-string
+			 */
+			toString(): string;
+			/**
+			 * Get the UTC offset in minutes.
+			 * \`\`\`
+			 * dayjs().utcOffset()
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/manipulate/utc-offset
+			 */
+			utcOffset(): number;
+			/**
+			 * This indicates whether the Day.js object is before the other supplied date-time.
+			 * \`\`\`
+			 * dayjs().isBefore(dayjs('2011-01-01')) // default milliseconds
+			 * \`\`\`
+			 * If you want to limit the granularity to a unit other than milliseconds, pass it as the second parameter.
+			 * \`\`\`
+			 * dayjs().isBefore('2011-01-01', 'year')// => boolean
+			 * \`\`\`
+			 * Units are case insensitive, and support plural and short forms.
+			 *
+			 * Docs: https://day.js.org/docs/en/query/is-before
+			 */
+			isBefore(date?: ConfigType, unit?: OpUnitType): boolean;
+			/**
+			 * This indicates whether the Day.js object is the same as the other supplied date-time.
+			 * \`\`\`
+			 * dayjs().isSame(dayjs('2011-01-01')) // default milliseconds
+			 * \`\`\`
+			 * If you want to limit the granularity to a unit other than milliseconds, pass it as the second parameter.
+			 * \`\`\`
+			 * dayjs().isSame('2011-01-01', 'year')// => boolean
+			 * \`\`\`
+			 * Docs: https://day.js.org/docs/en/query/is-same
+			 */
+			isSame(date?: ConfigType, unit?: OpUnitType): boolean;
+			/**
+			 * This indicates whether the Day.js object is after the other supplied date-time.
+			 * \`\`\`
+			 * dayjs().isAfter(dayjs('2011-01-01')) // default milliseconds
+			 * \`\`\`
+			 * If you want to limit the granularity to a unit other than milliseconds, pass it as the second parameter.
+			 * \`\`\`
+			 * dayjs().isAfter('2011-01-01', 'year')// => boolean
+			 * \`\`\`
+			 * Units are case insensitive, and support plural and short forms.
+			 *
+			 * Docs: https://day.js.org/docs/en/query/is-after
+			 */
+			isAfter(date?: ConfigType, unit?: OpUnitType): boolean;
+
+			locale(): string;
+
+			locale(preset: string | ILocale, object?: Partial<ILocale>): Dayjs;
+		}
+
+		export type PluginFunc<T = unknown> = (option: T, c: typeof Dayjs, d: typeof dayjs) => void;
+
+		export function extend<T = unknown>(plugin: PluginFunc<T>, option?: T): Dayjs;
+
+		export function locale(
+			preset?: string | ILocale,
+			object?: Partial<ILocale>,
+			isLocal?: boolean
+		): string;
+
+		export function isDayjs(d: any): d is Dayjs;
+
+		export function unix(t: number): Dayjs;
+
+		const Ls: { [key: string]: ILocale };
+	}
+
+	export default dayjs;
+}
+`;
diff --git a/src/modules/flow/components/nodes/code/editor/declares/index.ts b/src/modules/flow/components/nodes/code/editor/declares/index.ts
new file mode 100644
index 0000000..f6930c7
--- /dev/null
+++ b/src/modules/flow/components/nodes/code/editor/declares/index.ts
@@ -0,0 +1,13 @@
+import { axios } from "./axios";
+import { cool } from "./cool";
+import { dayjs } from "./dayjs";
+import { lodash } from "./lodash";
+import { moment } from "./moment";
+
+export const declares = {
+	axios,
+	cool,
+	dayjs,
+	lodash,
+	moment
+};
diff --git a/src/modules/flow/components/nodes/code/editor/declares/lodash.ts b/src/modules/flow/components/nodes/code/editor/declares/lodash.ts
new file mode 100644
index 0000000..7e23c67
--- /dev/null
+++ b/src/modules/flow/components/nodes/code/editor/declares/lodash.ts
@@ -0,0 +1,1263 @@
+export const lodash = `
+declare module "lodash" {
+	class lodash {
+		constructor(value: any);
+
+		add(...args: any[]): any;
+
+		after(...args: any[]): any;
+
+		ary(...args: any[]): any;
+
+		assign(...args: any[]): any;
+
+		assignIn(...args: any[]): any;
+
+		assignInWith(...args: any[]): any;
+
+		assignWith(...args: any[]): any;
+
+		at(...args: any[]): any;
+
+		attempt(...args: any[]): any;
+
+		before(...args: any[]): any;
+
+		bind(...args: any[]): any;
+
+		bindAll(...args: any[]): any;
+
+		bindKey(...args: any[]): any;
+
+		camelCase(...args: any[]): any;
+
+		capitalize(...args: any[]): any;
+
+		castArray(...args: any[]): any;
+
+		ceil(...args: any[]): any;
+
+		chain(): any;
+
+		chunk(...args: any[]): any;
+
+		clamp(...args: any[]): any;
+
+		clone(...args: any[]): any;
+
+		cloneDeep(...args: any[]): any;
+
+		cloneDeepWith(...args: any[]): any;
+
+		cloneWith(...args: any[]): any;
+
+		commit(): any;
+
+		compact(...args: any[]): any;
+
+		concat(...args: any[]): any;
+
+		cond(...args: any[]): any;
+
+		conforms(...args: any[]): any;
+
+		conformsTo(...args: any[]): any;
+
+		constant(...args: any[]): any;
+
+		countBy(...args: any[]): any;
+
+		create(...args: any[]): any;
+
+		curry(...args: any[]): any;
+
+		curryRight(...args: any[]): any;
+
+		debounce(...args: any[]): any;
+
+		deburr(...args: any[]): any;
+
+		defaultTo(...args: any[]): any;
+
+		defaults(...args: any[]): any;
+
+		defaultsDeep(...args: any[]): any;
+
+		defer(...args: any[]): any;
+
+		delay(...args: any[]): any;
+
+		difference(...args: any[]): any;
+
+		differenceBy(...args: any[]): any;
+
+		differenceWith(...args: any[]): any;
+
+		divide(...args: any[]): any;
+
+		drop(...args: any[]): any;
+
+		dropRight(...args: any[]): any;
+
+		dropRightWhile(...args: any[]): any;
+
+		dropWhile(...args: any[]): any;
+
+		each(...args: any[]): any;
+
+		eachRight(...args: any[]): any;
+
+		endsWith(...args: any[]): any;
+
+		entries(...args: any[]): any;
+
+		entriesIn(...args: any[]): any;
+
+		eq(...args: any[]): any;
+
+		escape(...args: any[]): any;
+
+		escapeRegExp(...args: any[]): any;
+
+		every(...args: any[]): any;
+
+		extend(...args: any[]): any;
+
+		extendWith(...args: any[]): any;
+
+		fill(...args: any[]): any;
+
+		filter(...args: any[]): any;
+
+		find(...args: any[]): any;
+
+		findIndex(...args: any[]): any;
+
+		findKey(...args: any[]): any;
+
+		findLast(...args: any[]): any;
+
+		findLastIndex(...args: any[]): any;
+
+		findLastKey(...args: any[]): any;
+
+		first(...args: any[]): any;
+
+		flatMap(...args: any[]): any;
+
+		flatMapDeep(...args: any[]): any;
+
+		flatMapDepth(...args: any[]): any;
+
+		flatten(...args: any[]): any;
+
+		flattenDeep(...args: any[]): any;
+
+		flattenDepth(...args: any[]): any;
+
+		flip(...args: any[]): any;
+
+		floor(...args: any[]): any;
+
+		flow(...args: any[]): any;
+
+		flowRight(...args: any[]): any;
+
+		forEach(...args: any[]): any;
+
+		forEachRight(...args: any[]): any;
+
+		forIn(...args: any[]): any;
+
+		forInRight(...args: any[]): any;
+
+		forOwn(...args: any[]): any;
+
+		forOwnRight(...args: any[]): any;
+
+		fromPairs(...args: any[]): any;
+
+		functions(...args: any[]): any;
+
+		functionsIn(...args: any[]): any;
+
+		get(...args: any[]): any;
+
+		groupBy(...args: any[]): any;
+
+		gt(...args: any[]): any;
+
+		gte(...args: any[]): any;
+
+		has(...args: any[]): any;
+
+		hasIn(...args: any[]): any;
+
+		head(...args: any[]): any;
+
+		identity(...args: any[]): any;
+
+		inRange(...args: any[]): any;
+
+		includes(...args: any[]): any;
+
+		indexOf(...args: any[]): any;
+
+		initial(...args: any[]): any;
+
+		intersection(...args: any[]): any;
+
+		intersectionBy(...args: any[]): any;
+
+		intersectionWith(...args: any[]): any;
+
+		invert(...args: any[]): any;
+
+		invertBy(...args: any[]): any;
+
+		invoke(...args: any[]): any;
+
+		invokeMap(...args: any[]): any;
+
+		isArguments(...args: any[]): any;
+
+		isArray(...args: any[]): any;
+
+		isArrayBuffer(...args: any[]): any;
+
+		isArrayLike(...args: any[]): any;
+
+		isArrayLikeObject(...args: any[]): any;
+
+		isBoolean(...args: any[]): any;
+
+		isBuffer(...args: any[]): any;
+
+		isDate(...args: any[]): any;
+
+		isElement(...args: any[]): any;
+
+		isEmpty(...args: any[]): any;
+
+		isEqual(...args: any[]): any;
+
+		isEqualWith(...args: any[]): any;
+
+		isError(...args: any[]): any;
+
+		isFinite(...args: any[]): any;
+
+		isFunction(...args: any[]): any;
+
+		isInteger(...args: any[]): any;
+
+		isLength(...args: any[]): any;
+
+		isMap(...args: any[]): any;
+
+		isMatch(...args: any[]): any;
+
+		isMatchWith(...args: any[]): any;
+
+		isNaN(...args: any[]): any;
+
+		isNative(...args: any[]): any;
+
+		isNil(...args: any[]): any;
+
+		isNull(...args: any[]): any;
+
+		isNumber(...args: any[]): any;
+
+		isObject(...args: any[]): any;
+
+		isObjectLike(...args: any[]): any;
+
+		isPlainObject(...args: any[]): any;
+
+		isRegExp(...args: any[]): any;
+
+		isSafeInteger(...args: any[]): any;
+
+		isSet(...args: any[]): any;
+
+		isString(...args: any[]): any;
+
+		isSymbol(...args: any[]): any;
+
+		isTypedArray(...args: any[]): any;
+
+		isUndefined(...args: any[]): any;
+
+		isWeakMap(...args: any[]): any;
+
+		isWeakSet(...args: any[]): any;
+
+		iteratee(...args: any[]): any;
+
+		join(...args: any[]): any;
+
+		kebabCase(...args: any[]): any;
+
+		keyBy(...args: any[]): any;
+
+		keys(...args: any[]): any;
+
+		keysIn(...args: any[]): any;
+
+		last(...args: any[]): any;
+
+		lastIndexOf(...args: any[]): any;
+
+		lowerCase(...args: any[]): any;
+
+		lowerFirst(...args: any[]): any;
+
+		lt(...args: any[]): any;
+
+		lte(...args: any[]): any;
+
+		map(...args: any[]): any;
+
+		mapKeys(...args: any[]): any;
+
+		mapValues(...args: any[]): any;
+
+		matches(...args: any[]): any;
+
+		matchesProperty(...args: any[]): any;
+
+		max(...args: any[]): any;
+
+		maxBy(...args: any[]): any;
+
+		mean(...args: any[]): any;
+
+		meanBy(...args: any[]): any;
+
+		memoize(...args: any[]): any;
+
+		merge(...args: any[]): any;
+
+		mergeWith(...args: any[]): any;
+
+		method(...args: any[]): any;
+
+		methodOf(...args: any[]): any;
+
+		min(...args: any[]): any;
+
+		minBy(...args: any[]): any;
+
+		mixin(...args: any[]): any;
+
+		multiply(...args: any[]): any;
+
+		negate(...args: any[]): any;
+
+		next(): any;
+
+		noConflict(...args: any[]): any;
+
+		noop(...args: any[]): any;
+
+		now(...args: any[]): any;
+
+		nth(...args: any[]): any;
+
+		nthArg(...args: any[]): any;
+
+		omit(...args: any[]): any;
+
+		omitBy(...args: any[]): any;
+
+		once(...args: any[]): any;
+
+		orderBy(...args: any[]): any;
+
+		over(...args: any[]): any;
+
+		overArgs(...args: any[]): any;
+
+		overEvery(...args: any[]): any;
+
+		overSome(...args: any[]): any;
+
+		pad(...args: any[]): any;
+
+		padEnd(...args: any[]): any;
+
+		padStart(...args: any[]): any;
+
+		parseInt(...args: any[]): any;
+
+		partial(...args: any[]): any;
+
+		partialRight(...args: any[]): any;
+
+		partition(...args: any[]): any;
+
+		pick(...args: any[]): any;
+
+		pickBy(...args: any[]): any;
+
+		plant(value: any): any;
+
+		pop(...args: any[]): any;
+
+		property(...args: any[]): any;
+
+		propertyOf(...args: any[]): any;
+
+		pull(...args: any[]): any;
+
+		pullAll(...args: any[]): any;
+
+		pullAllBy(...args: any[]): any;
+
+		pullAllWith(...args: any[]): any;
+
+		pullAt(...args: any[]): any;
+
+		push(...args: any[]): any;
+
+		random(...args: any[]): any;
+
+		range(...args: any[]): any;
+
+		rangeRight(...args: any[]): any;
+
+		rearg(...args: any[]): any;
+
+		reduce(...args: any[]): any;
+
+		reduceRight(...args: any[]): any;
+
+		reject(...args: any[]): any;
+
+		remove(...args: any[]): any;
+
+		repeat(...args: any[]): any;
+
+		replace(...args: any[]): any;
+
+		rest(...args: any[]): any;
+
+		result(...args: any[]): any;
+
+		reverse(): any;
+
+		round(...args: any[]): any;
+
+		runInContext(...args: any[]): any;
+
+		sample(...args: any[]): any;
+
+		sampleSize(...args: any[]): any;
+
+		set(...args: any[]): any;
+
+		setWith(...args: any[]): any;
+
+		shift(...args: any[]): any;
+
+		shuffle(...args: any[]): any;
+
+		size(...args: any[]): any;
+
+		slice(...args: any[]): any;
+
+		snakeCase(...args: any[]): any;
+
+		some(...args: any[]): any;
+
+		sort(...args: any[]): any;
+
+		sortBy(...args: any[]): any;
+
+		sortedIndex(...args: any[]): any;
+
+		sortedIndexBy(...args: any[]): any;
+
+		sortedIndexOf(...args: any[]): any;
+
+		sortedLastIndex(...args: any[]): any;
+
+		sortedLastIndexBy(...args: any[]): any;
+
+		sortedLastIndexOf(...args: any[]): any;
+
+		sortedUniq(...args: any[]): any;
+
+		sortedUniqBy(...args: any[]): any;
+
+		splice(...args: any[]): any;
+
+		split(...args: any[]): any;
+
+		spread(...args: any[]): any;
+
+		startCase(...args: any[]): any;
+
+		startsWith(...args: any[]): any;
+
+		stubArray(...args: any[]): any;
+
+		stubFalse(...args: any[]): any;
+
+		stubObject(...args: any[]): any;
+
+		stubString(...args: any[]): any;
+
+		stubTrue(...args: any[]): any;
+
+		subtract(...args: any[]): any;
+
+		sum(...args: any[]): any;
+
+		sumBy(...args: any[]): any;
+
+		tail(...args: any[]): any;
+
+		take(...args: any[]): any;
+
+		takeRight(...args: any[]): any;
+
+		takeRightWhile(...args: any[]): any;
+
+		takeWhile(...args: any[]): any;
+
+		tap(...args: any[]): any;
+
+		template(...args: any[]): any;
+
+		throttle(...args: any[]): any;
+
+		thru(...args: any[]): any;
+
+		times(...args: any[]): any;
+
+		toArray(...args: any[]): any;
+
+		toFinite(...args: any[]): any;
+
+		toInteger(...args: any[]): any;
+
+		toJSON(): any;
+
+		toLength(...args: any[]): any;
+
+		toLower(...args: any[]): any;
+
+		toNumber(...args: any[]): any;
+
+		toPairs(...args: any[]): any;
+
+		toPairsIn(...args: any[]): any;
+
+		toPath(...args: any[]): any;
+
+		toPlainObject(...args: any[]): any;
+
+		toSafeInteger(...args: any[]): any;
+
+		toString(...args: any[]): any;
+
+		toUpper(...args: any[]): any;
+
+		transform(...args: any[]): any;
+
+		trim(...args: any[]): any;
+
+		trimEnd(...args: any[]): any;
+
+		trimStart(...args: any[]): any;
+
+		truncate(...args: any[]): any;
+
+		unary(...args: any[]): any;
+
+		unescape(...args: any[]): any;
+
+		union(...args: any[]): any;
+
+		unionBy(...args: any[]): any;
+
+		unionWith(...args: any[]): any;
+
+		uniq(...args: any[]): any;
+
+		uniqBy(...args: any[]): any;
+
+		uniqWith(...args: any[]): any;
+
+		uniqueId(...args: any[]): any;
+
+		unset(...args: any[]): any;
+
+		unshift(...args: any[]): any;
+
+		unzip(...args: any[]): any;
+
+		unzipWith(...args: any[]): any;
+
+		update(...args: any[]): any;
+
+		updateWith(...args: any[]): any;
+
+		upperCase(...args: any[]): any;
+
+		upperFirst(...args: any[]): any;
+
+		value(): any;
+
+		valueOf(): any;
+
+		values(...args: any[]): any;
+
+		valuesIn(...args: any[]): any;
+
+		without(...args: any[]): any;
+
+		words(...args: any[]): any;
+
+		wrap(...args: any[]): any;
+
+		xor(...args: any[]): any;
+
+		xorBy(...args: any[]): any;
+
+		xorWith(...args: any[]): any;
+
+		zip(...args: any[]): any;
+
+		zipObject(...args: any[]): any;
+
+		zipObjectDeep(...args: any[]): any;
+
+		zipWith(...args: any[]): any;
+
+		static VERSION: string;
+
+		static add(value: any, other: any): any;
+
+		static after(n: any, func: any, ...args: any[]): any;
+
+		static ary(func: any, n: any, guard: any): any;
+
+		static assign(...args: any[]): any;
+
+		static assignIn(...args: any[]): any;
+
+		static assignInWith(...args: any[]): any;
+
+		static assignWith(...args: any[]): any;
+
+		static at(...args: any[]): any;
+
+		static attempt(...args: any[]): any;
+
+		static before(n: any, func: any, ...args: any[]): any;
+
+		static bind(...args: any[]): any;
+
+		static bindAll(...args: any[]): any;
+
+		static bindKey(...args: any[]): any;
+
+		static camelCase(string: any): any;
+
+		static capitalize(string: any): any;
+
+		static castArray(...args: any[]): any;
+
+		static ceil(number: any, precision: any): any;
+
+		static chain(value: any): any;
+
+		static chunk(array: any, size: any, guard: any): any;
+
+		static clamp(number: any, lower: any, upper: any): any;
+
+		static clone(value: any): any;
+
+		static cloneDeep(value: any): any;
+
+		static cloneDeepWith(value: any, customizer: any): any;
+
+		static cloneWith(value: any, customizer: any): any;
+
+		static compact(array: any): any;
+
+		static concat(...args: any[]): any;
+
+		static cond(pairs: any): any;
+
+		static conforms(source: any): any;
+
+		static conformsTo(object: any, source: any): any;
+
+		static constant(value: any): any;
+
+		static countBy(collection: any, iteratee: any): any;
+
+		static create(prototype: any, properties: any): any;
+
+		static curry(func: any, arity: any, guard: any): any;
+
+		static curryRight(func: any, arity: any, guard: any): any;
+
+		static debounce(func: any, wait: any, options: any, ...args: any[]): any;
+
+		static deburr(string: any): any;
+
+		static defaultTo(value: any, defaultValue: any): any;
+
+		static defaults(...args: any[]): any;
+
+		static defaultsDeep(...args: any[]): any;
+
+		static defer(...args: any[]): any;
+
+		static delay(...args: any[]): any;
+
+		static difference(...args: any[]): any;
+
+		static differenceBy(...args: any[]): any;
+
+		static differenceWith(...args: any[]): any;
+
+		static divide(value: any, other: any): any;
+
+		static drop(array: any, n: any, guard: any): any;
+
+		static dropRight(array: any, n: any, guard: any): any;
+
+		static dropRightWhile(array: any, predicate: any): any;
+
+		static dropWhile(array: any, predicate: any): any;
+
+		static each(collection: any, iteratee: any): any;
+
+		static eachRight(collection: any, iteratee: any): any;
+
+		static endsWith(string: any, target: any, position: any): any;
+
+		static entries(object: any): any;
+
+		static entriesIn(object: any): any;
+
+		static eq(value: any, other: any): any;
+
+		static escape(string: any): any;
+
+		static escapeRegExp(string: any): any;
+
+		static every(collection: any, predicate: any, guard: any): any;
+
+		static extend(...args: any[]): any;
+
+		static extendWith(...args: any[]): any;
+
+		static fill(array: any, value: any, start: any, end: any): any;
+
+		static filter(collection: any, predicate: any): any;
+
+		static find(collection: any, predicate: any, fromIndex: any): any;
+
+		static findIndex(array: any, predicate: any, fromIndex: any): any;
+
+		static findKey(object: any, predicate: any): any;
+
+		static findLast(collection: any, predicate: any, fromIndex: any): any;
+
+		static findLastIndex(array: any, predicate: any, fromIndex: any): any;
+
+		static findLastKey(object: any, predicate: any): any;
+
+		static first(array: any): any;
+
+		static flatMap(collection: any, iteratee: any): any;
+
+		static flatMapDeep(collection: any, iteratee: any): any;
+
+		static flatMapDepth(collection: any, iteratee: any, depth: any): any;
+
+		static flatten(array: any): any;
+
+		static flattenDeep(array: any): any;
+
+		static flattenDepth(array: any, depth: any): any;
+
+		static flip(func: any): any;
+
+		static floor(number: any, precision: any): any;
+
+		static flow(...args: any[]): any;
+
+		static flowRight(...args: any[]): any;
+
+		static forEach(collection: any, iteratee: any): any;
+
+		static forEachRight(collection: any, iteratee: any): any;
+
+		static forIn(object: any, iteratee: any): any;
+
+		static forInRight(object: any, iteratee: any): any;
+
+		static forOwn(object: any, iteratee: any): any;
+
+		static forOwnRight(object: any, iteratee: any): any;
+
+		static fromPairs(pairs: any): any;
+
+		static functions(object: any): any;
+
+		static functionsIn(object: any): any;
+
+		static get(object: any, path: any, defaultValue: any): any;
+
+		static groupBy(collection: any, iteratee: any): any;
+
+		static gt(value: any, other: any): any;
+
+		static gte(value: any, other: any): any;
+
+		static has(object: any, path: any): any;
+
+		static hasIn(object: any, path: any): any;
+
+		static head(array: any): any;
+
+		static identity(value: any): any;
+
+		static inRange(number: any, start: any, end: any): any;
+
+		static includes(collection: any, value: any, fromIndex: any, guard: any): any;
+
+		static indexOf(array: any, value: any, fromIndex: any): any;
+
+		static initial(array: any): any;
+
+		static intersection(...args: any[]): any;
+
+		static intersectionBy(...args: any[]): any;
+
+		static intersectionWith(...args: any[]): any;
+
+		static invert(object: any, iteratee: any): any;
+
+		static invertBy(object: any, iteratee: any): any;
+
+		static invoke(...args: any[]): any;
+
+		static invokeMap(...args: any[]): any;
+
+		static isArguments(value: any): any;
+
+		static isArray(p0: any): any;
+
+		static isArrayBuffer(value: any): any;
+
+		static isArrayLike(value: any): any;
+
+		static isArrayLikeObject(value: any): any;
+
+		static isBoolean(value: any): any;
+
+		static isBuffer(b: any): any;
+
+		static isDate(value: any): any;
+
+		static isElement(value: any): any;
+
+		static isEmpty(value: any): any;
+
+		static isEqual(value: any, other: any): any;
+
+		static isEqualWith(value: any, other: any, customizer: any): any;
+
+		static isError(value: any): any;
+
+		static isFinite(value: any): any;
+
+		static isFunction(value: any): any;
+
+		static isInteger(value: any): any;
+
+		static isLength(value: any): any;
+
+		static isMap(value: any): any;
+
+		static isMatch(object: any, source: any): any;
+
+		static isMatchWith(object: any, source: any, customizer: any): any;
+
+		static isNaN(value: any): any;
+
+		static isNative(value: any): any;
+
+		static isNil(value: any): any;
+
+		static isNull(value: any): any;
+
+		static isNumber(value: any): any;
+
+		static isObject(value: any): any;
+
+		static isObjectLike(value: any): any;
+
+		static isPlainObject(value: any): any;
+
+		static isRegExp(value: any): any;
+
+		static isSafeInteger(value: any): any;
+
+		static isSet(value: any): any;
+
+		static isString(value: any): any;
+
+		static isSymbol(value: any): any;
+
+		static isTypedArray(value: any): any;
+
+		static isUndefined(value: any): any;
+
+		static isWeakMap(value: any): any;
+
+		static isWeakSet(value: any): any;
+
+		static iteratee(func: any): any;
+
+		static join(array: any, separator: any): any;
+
+		static kebabCase(string: any): any;
+
+		static keyBy(collection: any, iteratee: any): any;
+
+		static keys(object: any): any;
+
+		static keysIn(object: any): any;
+
+		static last(array: any): any;
+
+		static lastIndexOf(array: any, value: any, fromIndex: any): any;
+
+		static lowerCase(string: any): any;
+
+		static lowerFirst(string: any): any;
+
+		static lt(value: any, other: any): any;
+
+		static lte(value: any, other: any): any;
+
+		static map(collection: any, iteratee: any): any;
+
+		static mapKeys(object: any, iteratee: any): any;
+
+		static mapValues(object: any, iteratee: any): any;
+
+		static matches(source: any): any;
+
+		static matchesProperty(path: any, srcValue: any): any;
+
+		static max(array: any): any;
+
+		static maxBy(array: any, iteratee: any): any;
+
+		static mean(array: any): any;
+
+		static meanBy(array: any, iteratee: any): any;
+
+		static memoize(func: any, resolver: any, ...args: any[]): any;
+
+		static merge(...args: any[]): any;
+
+		static mergeWith(...args: any[]): any;
+
+		static method(...args: any[]): any;
+
+		static methodOf(...args: any[]): any;
+
+		static min(array: any): any;
+
+		static minBy(array: any, iteratee: any): any;
+
+		static mixin(object: any, source: any, options: any, ...args: any[]): any;
+
+		static multiply(value: any, other: any): any;
+
+		static negate(predicate: any, ...args: any[]): any;
+
+		static noConflict(): any;
+
+		static noop(): void;
+
+		static now(): any;
+
+		static nth(array: any, n: any): any;
+
+		static nthArg(n: any): any;
+
+		static omit(...args: any[]): any;
+
+		static omitBy(object: any, predicate: any): any;
+
+		static once(func: any): any;
+
+		static orderBy(collection: any, iteratees: any, orders: any, guard: any): any;
+
+		static over(...args: any[]): any;
+
+		static overArgs(...args: any[]): any;
+
+		static overEvery(...args: any[]): any;
+
+		static overSome(...args: any[]): any;
+
+		static pad(string: any, length: any, chars: any): any;
+
+		static padEnd(string: any, length: any, chars: any): any;
+
+		static padStart(string: any, length: any, chars: any): any;
+
+		static parseInt(string: any, radix: any, guard: any): any;
+
+		static partial(...args: any[]): any;
+
+		static partialRight(...args: any[]): any;
+
+		static partition(collection: any, iteratee: any): any;
+
+		static pick(...args: any[]): any;
+
+		static pickBy(object: any, predicate: any): any;
+
+		static property(path: any): any;
+
+		static propertyOf(object: any): any;
+
+		static pull(...args: any[]): any;
+
+		static pullAll(array: any, values: any): any;
+
+		static pullAllBy(array: any, values: any, iteratee: any): any;
+
+		static pullAllWith(array: any, values: any, comparator: any): any;
+
+		static pullAt(...args: any[]): any;
+
+		static random(lower: any, upper: any, floating: any): any;
+
+		static range(start: any, end: any, step: any): any;
+
+		static rangeRight(start: any, end: any, step: any): any;
+
+		static rearg(...args: any[]): any;
+
+		static reduce(collection: any, iteratee: any, accumulator: any, ...args: any[]): any;
+
+		static reduceRight(collection: any, iteratee: any, accumulator: any, ...args: any[]): any;
+
+		static reject(collection: any, predicate: any): any;
+
+		static remove(array: any, predicate: any): any;
+
+		static repeat(string: any, n: any, guard: any): any;
+
+		static replace(...args: any[]): any;
+
+		static rest(func: any, start: any): any;
+
+		static result(object: any, path: any, defaultValue: any): any;
+
+		static reverse(array: any): any;
+
+		static round(number: any, precision: any): any;
+
+		static runInContext(context: any, ...args: any[]): any;
+
+		static sample(collection: any): any;
+
+		static sampleSize(collection: any, n: any, guard: any): any;
+
+		static set(object: any, path: any, value: any): any;
+
+		static setWith(object: any, path: any, value: any, customizer: any): any;
+
+		static shuffle(collection: any): any;
+
+		static size(collection: any): any;
+
+		static slice(array: any, start: any, end: any): any;
+
+		static snakeCase(string: any): any;
+
+		static some(collection: any, predicate: any, guard: any): any;
+
+		static sortBy(...args: any[]): any;
+
+		static sortedIndex(array: any, value: any): any;
+
+		static sortedIndexBy(array: any, value: any, iteratee: any): any;
+
+		static sortedIndexOf(array: any, value: any): any;
+
+		static sortedLastIndex(array: any, value: any): any;
+
+		static sortedLastIndexBy(array: any, value: any, iteratee: any): any;
+
+		static sortedLastIndexOf(array: any, value: any): any;
+
+		static sortedUniq(array: any): any;
+
+		static sortedUniqBy(array: any, iteratee: any): any;
+
+		static split(string: any, separator: any, limit: any): any;
+
+		static spread(func: any, start: any): any;
+
+		static startCase(string: any): any;
+
+		static startsWith(string: any, target: any, position: any): any;
+
+		static stubArray(): any;
+
+		static stubFalse(): any;
+
+		static stubObject(): any;
+
+		static stubString(): any;
+
+		static stubTrue(): any;
+
+		static subtract(value: any, other: any): any;
+
+		static sum(array: any): any;
+
+		static sumBy(array: any, iteratee: any): any;
+
+		static tail(array: any): any;
+
+		static take(array: any, n: any, guard: any): any;
+
+		static takeRight(array: any, n: any, guard: any): any;
+
+		static takeRightWhile(array: any, predicate: any): any;
+
+		static takeWhile(array: any, predicate: any): any;
+
+		static tap(value: any, interceptor: any): any;
+
+		static template(string: any, options: any, guard: any): any;
+
+		static templateSettings: {
+			escape: RegExp;
+			evaluate: RegExp;
+			imports: {};
+			interpolate: RegExp;
+			variable: string;
+		};
+
+		static throttle(func: any, wait: any, options: any): any;
+
+		static thru(value: any, interceptor: any): any;
+
+		static times(n: any, iteratee: any): any;
+
+		static toArray(value: any): any;
+
+		static toFinite(value: any): any;
+
+		static toInteger(value: any): any;
+
+		static toLength(value: any): any;
+
+		static toLower(value: any): any;
+
+		static toNumber(value: any): any;
+
+		static toPairs(object: any): any;
+
+		static toPairsIn(object: any): any;
+
+		static toPath(value: any): any;
+
+		static toPlainObject(value: any): any;
+
+		static toSafeInteger(value: any): any;
+
+		static toString(value: any): any;
+
+		static toUpper(value: any): any;
+
+		static transform(object: any, iteratee: any, accumulator: any): any;
+
+		static trim(string: any, chars: any, guard: any): any;
+
+		static trimEnd(string: any, chars: any, guard: any): any;
+
+		static trimStart(string: any, chars: any, guard: any): any;
+
+		static truncate(string: any, options: any): any;
+
+		static unary(func: any): any;
+
+		static unescape(string: any): any;
+
+		static union(...args: any[]): any;
+
+		static unionBy(...args: any[]): any;
+
+		static unionWith(...args: any[]): any;
+
+		static uniq(array: any): any;
+
+		static uniqBy(array: any, iteratee: any): any;
+
+		static uniqWith(array: any, comparator: any): any;
+
+		static uniqueId(prefix: any): any;
+
+		static unset(object: any, path: any): any;
+
+		static unzip(array: any): any;
+
+		static unzipWith(array: any, iteratee: any): any;
+
+		static update(object: any, path: any, updater: any): any;
+
+		static updateWith(object: any, path: any, updater: any, customizer: any): any;
+
+		static upperCase(string: any): any;
+
+		static upperFirst(string: any): any;
+
+		static values(object: any): any;
+
+		static valuesIn(object: any): any;
+
+		static without(...args: any[]): any;
+
+		static words(string: any, pattern: any, guard: any): any;
+
+		static wrap(value: any, wrapper: any): any;
+
+		static xor(...args: any[]): any;
+
+		static xorBy(...args: any[]): any;
+
+		static xorWith(...args: any[]): any;
+
+		static zip(...args: any[]): any;
+
+		static zipObject(props: any, values: any): any;
+
+		static zipObjectDeep(props: any, values: any): any;
+
+		static zipWith(...args: any[]): any;
+	}
+
+	export = lodash;
+}
+`;
diff --git a/src/modules/flow/components/nodes/code/editor/declares/moment.ts b/src/modules/flow/components/nodes/code/editor/declares/moment.ts
new file mode 100644
index 0000000..a936751
--- /dev/null
+++ b/src/modules/flow/components/nodes/code/editor/declares/moment.ts
@@ -0,0 +1,927 @@
+export const moment = `
+declare module "moment" {
+	/**
+	 * @param strict Strict parsing disables the deprecated fallback to the native Date constructor when
+	 * parsing a string.
+	 */
+	function moment(inp?: Moment.MomentInput, strict?: boolean): Moment.Moment;
+	/**
+	 * @param strict Strict parsing requires that the format and input match exactly, including delimiters.
+	 * Strict parsing is frequently the best parsing option. For more information about choosing strict vs
+	 * forgiving parsing, see the [parsing guide](https://momentjs.com/guides/#/parsing/).
+	 */
+	function moment(
+		inp?: Moment.MomentInput,
+		format?: Moment.MomentFormatSpecification,
+		strict?: boolean
+	): Moment.Moment;
+	/**
+	 * @param strict Strict parsing requires that the format and input match exactly, including delimiters.
+	 * Strict parsing is frequently the best parsing option. For more information about choosing strict vs
+	 * forgiving parsing, see the [parsing guide](https://momentjs.com/guides/#/parsing/).
+	 */
+	function moment(
+		inp?: Moment.MomentInput,
+		format?: Moment.MomentFormatSpecification,
+		language?: string,
+		strict?: boolean
+	): Moment.Moment;
+
+	namespace Moment {
+		type RelativeTimeKey =
+			| "s"
+			| "ss"
+			| "m"
+			| "mm"
+			| "h"
+			| "hh"
+			| "d"
+			| "dd"
+			| "w"
+			| "ww"
+			| "M"
+			| "MM"
+			| "y"
+			| "yy";
+		type CalendarKey =
+			| "sameDay"
+			| "nextDay"
+			| "lastDay"
+			| "nextWeek"
+			| "lastWeek"
+			| "sameElse"
+			| string;
+		type LongDateFormatKey =
+			| "LTS"
+			| "LT"
+			| "L"
+			| "LL"
+			| "LLL"
+			| "LLLL"
+			| "lts"
+			| "lt"
+			| "l"
+			| "ll"
+			| "lll"
+			| "llll";
+
+		interface Locale {
+			calendar(key?: CalendarKey, m?: Moment, now?: Moment): string;
+
+			longDateFormat(key: LongDateFormatKey): string;
+			invalidDate(): string;
+			ordinal(n: number): string;
+
+			preparse(inp: string): string;
+			postformat(inp: string): string;
+			relativeTime(
+				n: number,
+				withoutSuffix: boolean,
+				key: RelativeTimeKey,
+				isFuture: boolean
+			): string;
+			pastFuture(diff: number, absRelTime: string): string;
+			set(config: Object): void;
+
+			months(): string[];
+			months(m: Moment, format?: string): string;
+			monthsShort(): string[];
+			monthsShort(m: Moment, format?: string): string;
+			monthsParse(monthName: string, format: string, strict: boolean): number;
+			monthsRegex(strict: boolean): RegExp;
+			monthsShortRegex(strict: boolean): RegExp;
+
+			week(m: Moment): number;
+			firstDayOfYear(): number;
+			firstDayOfWeek(): number;
+
+			weekdays(): string[];
+			weekdays(m: Moment, format?: string): string;
+			weekdaysMin(): string[];
+			weekdaysMin(m: Moment): string;
+			weekdaysShort(): string[];
+			weekdaysShort(m: Moment): string;
+			weekdaysParse(weekdayName: string, format: string, strict: boolean): number;
+			weekdaysRegex(strict: boolean): RegExp;
+			weekdaysShortRegex(strict: boolean): RegExp;
+			weekdaysMinRegex(strict: boolean): RegExp;
+
+			isPM(input: string): boolean;
+			meridiem(hour: number, minute: number, isLower: boolean): string;
+		}
+
+		interface StandaloneFormatSpec {
+			format: string[];
+			standalone: string[];
+			isFormat?: RegExp;
+		}
+
+		interface WeekSpec {
+			dow: number;
+			doy?: number;
+		}
+
+		type CalendarSpecVal = string | ((m?: MomentInput, now?: Moment) => string);
+		interface CalendarSpec {
+			sameDay?: CalendarSpecVal;
+			nextDay?: CalendarSpecVal;
+			lastDay?: CalendarSpecVal;
+			nextWeek?: CalendarSpecVal;
+			lastWeek?: CalendarSpecVal;
+			sameElse?: CalendarSpecVal;
+
+			// any additional properties might be used with moment.calendarFormat
+			[x: string]: CalendarSpecVal | void; // undefined
+		}
+
+		type RelativeTimeSpecVal =
+			| string
+			| ((
+					n: number,
+					withoutSuffix: boolean,
+					key: RelativeTimeKey,
+					isFuture: boolean
+			  ) => string);
+		type RelativeTimeFuturePastVal = string | ((relTime: string) => string);
+
+		interface RelativeTimeSpec {
+			future?: RelativeTimeFuturePastVal;
+			past?: RelativeTimeFuturePastVal;
+			s?: RelativeTimeSpecVal;
+			ss?: RelativeTimeSpecVal;
+			m?: RelativeTimeSpecVal;
+			mm?: RelativeTimeSpecVal;
+			h?: RelativeTimeSpecVal;
+			hh?: RelativeTimeSpecVal;
+			d?: RelativeTimeSpecVal;
+			dd?: RelativeTimeSpecVal;
+			w?: RelativeTimeSpecVal;
+			ww?: RelativeTimeSpecVal;
+			M?: RelativeTimeSpecVal;
+			MM?: RelativeTimeSpecVal;
+			y?: RelativeTimeSpecVal;
+			yy?: RelativeTimeSpecVal;
+		}
+
+		interface LongDateFormatSpec {
+			LTS: string;
+			LT: string;
+			L: string;
+			LL: string;
+			LLL: string;
+			LLLL: string;
+
+			// lets forget for a sec that any upper/lower permutation will also work
+			lts?: string;
+			lt?: string;
+			l?: string;
+			ll?: string;
+			lll?: string;
+			llll?: string;
+		}
+
+		type MonthWeekdayFn = (momentToFormat: Moment, format?: string) => string;
+		type WeekdaySimpleFn = (momentToFormat: Moment) => string;
+		interface EraSpec {
+			since: string | number;
+			until: string | number;
+			offset: number;
+			name: string;
+			narrow: string;
+			abbr: string;
+		}
+
+		interface LocaleSpecification {
+			months?: string[] | StandaloneFormatSpec | MonthWeekdayFn;
+			monthsShort?: string[] | StandaloneFormatSpec | MonthWeekdayFn;
+
+			weekdays?: string[] | StandaloneFormatSpec | MonthWeekdayFn;
+			weekdaysShort?: string[] | StandaloneFormatSpec | WeekdaySimpleFn;
+			weekdaysMin?: string[] | StandaloneFormatSpec | WeekdaySimpleFn;
+
+			meridiemParse?: RegExp;
+			meridiem?: (hour: number, minute: number, isLower: boolean) => string;
+
+			isPM?: (input: string) => boolean;
+
+			longDateFormat?: LongDateFormatSpec;
+			calendar?: CalendarSpec;
+			relativeTime?: RelativeTimeSpec;
+			invalidDate?: string;
+			ordinal?: (n: number) => string;
+			ordinalParse?: RegExp;
+
+			week?: WeekSpec;
+			eras?: EraSpec[];
+
+			// Allow anything: in general any property that is passed as locale spec is
+			// put in the locale object so it can be used by locale functions
+			[x: string]: any;
+		}
+
+		interface MomentObjectOutput {
+			years: number;
+			/* One digit */
+			months: number;
+			/* Day of the month */
+			date: number;
+			hours: number;
+			minutes: number;
+			seconds: number;
+			milliseconds: number;
+		}
+
+		interface argThresholdOpts {
+			ss?: number;
+			s?: number;
+			m?: number;
+			h?: number;
+			d?: number;
+			w?: number | void;
+			M?: number;
+		}
+
+		interface Duration {
+			clone(): Duration;
+
+			humanize(argWithSuffix?: boolean, argThresholds?: argThresholdOpts): string;
+
+			humanize(argThresholds?: argThresholdOpts): string;
+
+			abs(): Duration;
+
+			as(units: unitOfTime.Base): number;
+			get(units: unitOfTime.Base): number;
+
+			milliseconds(): number;
+			asMilliseconds(): number;
+
+			seconds(): number;
+			asSeconds(): number;
+
+			minutes(): number;
+			asMinutes(): number;
+
+			hours(): number;
+			asHours(): number;
+
+			days(): number;
+			asDays(): number;
+
+			weeks(): number;
+			asWeeks(): number;
+
+			months(): number;
+			asMonths(): number;
+
+			years(): number;
+			asYears(): number;
+
+			add(inp?: DurationInputArg1, unit?: DurationInputArg2): Duration;
+			subtract(inp?: DurationInputArg1, unit?: DurationInputArg2): Duration;
+
+			locale(): string;
+			locale(locale: LocaleSpecifier): Duration;
+			localeData(): Locale;
+
+			toISOString(): string;
+			toJSON(): string;
+
+			isValid(): boolean;
+
+			/**
+			 * @deprecated since version 2.8.0
+			 */
+			lang(locale: LocaleSpecifier): Moment;
+			/**
+			 * @deprecated since version 2.8.0
+			 */
+			lang(): Locale;
+			/**
+			 * @deprecated
+			 */
+			toIsoString(): string;
+		}
+
+		interface MomentRelativeTime {
+			future: any;
+			past: any;
+			s: any;
+			ss: any;
+			m: any;
+			mm: any;
+			h: any;
+			hh: any;
+			d: any;
+			dd: any;
+			M: any;
+			MM: any;
+			y: any;
+			yy: any;
+		}
+
+		interface MomentLongDateFormat {
+			L: string;
+			LL: string;
+			LLL: string;
+			LLLL: string;
+			LT: string;
+			LTS: string;
+
+			l?: string;
+			ll?: string;
+			lll?: string;
+			llll?: string;
+			lt?: string;
+			lts?: string;
+		}
+
+		interface MomentParsingFlags {
+			empty: boolean;
+			unusedTokens: string[];
+			unusedInput: string[];
+			overflow: number;
+			charsLeftOver: number;
+			nullInput: boolean;
+			invalidMonth: string | void; // null
+			invalidFormat: boolean;
+			userInvalidated: boolean;
+			iso: boolean;
+			parsedDateParts: any[];
+			meridiem: string | void; // null
+		}
+
+		interface MomentParsingFlagsOpt {
+			empty?: boolean;
+			unusedTokens?: string[];
+			unusedInput?: string[];
+			overflow?: number;
+			charsLeftOver?: number;
+			nullInput?: boolean;
+			invalidMonth?: string;
+			invalidFormat?: boolean;
+			userInvalidated?: boolean;
+			iso?: boolean;
+			parsedDateParts?: any[];
+			meridiem?: string;
+		}
+
+		interface MomentBuiltinFormat {
+			__momentBuiltinFormatBrand: any;
+		}
+
+		type MomentFormatSpecification =
+			| string
+			| MomentBuiltinFormat
+			| (string | MomentBuiltinFormat)[];
+
+		export namespace unitOfTime {
+			type Base =
+				| "year"
+				| "years"
+				| "y"
+				| "month"
+				| "months"
+				| "M"
+				| "week"
+				| "weeks"
+				| "w"
+				| "day"
+				| "days"
+				| "d"
+				| "hour"
+				| "hours"
+				| "h"
+				| "minute"
+				| "minutes"
+				| "m"
+				| "second"
+				| "seconds"
+				| "s"
+				| "millisecond"
+				| "milliseconds"
+				| "ms";
+
+			type _quarter = "quarter" | "quarters" | "Q";
+			type _isoWeek = "isoWeek" | "isoWeeks" | "W";
+			type _date = "date" | "dates" | "D";
+			type DurationConstructor = Base | _quarter | _isoWeek;
+
+			export type DurationAs = Base;
+
+			export type StartOf = Base | _quarter | _isoWeek | _date | void; // null
+
+			export type Diff = Base | _quarter;
+
+			export type MomentConstructor = Base | _date;
+
+			export type All =
+				| Base
+				| _quarter
+				| _isoWeek
+				| _date
+				| "weekYear"
+				| "weekYears"
+				| "gg"
+				| "isoWeekYear"
+				| "isoWeekYears"
+				| "GG"
+				| "dayOfYear"
+				| "dayOfYears"
+				| "DDD"
+				| "weekday"
+				| "weekdays"
+				| "e"
+				| "isoWeekday"
+				| "isoWeekdays"
+				| "E";
+		}
+
+		type numberlike = number | string;
+		interface MomentInputObject {
+			years?: numberlike;
+			year?: numberlike;
+			y?: numberlike;
+
+			months?: numberlike;
+			month?: numberlike;
+			M?: numberlike;
+
+			days?: numberlike;
+			day?: numberlike;
+			d?: numberlike;
+
+			dates?: numberlike;
+			date?: numberlike;
+			D?: numberlike;
+
+			hours?: numberlike;
+			hour?: numberlike;
+			h?: numberlike;
+
+			minutes?: numberlike;
+			minute?: numberlike;
+			m?: numberlike;
+
+			seconds?: numberlike;
+			second?: numberlike;
+			s?: numberlike;
+
+			milliseconds?: numberlike;
+			millisecond?: numberlike;
+			ms?: numberlike;
+		}
+
+		interface DurationInputObject extends MomentInputObject {
+			quarters?: numberlike;
+			quarter?: numberlike;
+			Q?: numberlike;
+
+			weeks?: numberlike;
+			week?: numberlike;
+			w?: numberlike;
+		}
+
+		interface MomentSetObject extends MomentInputObject {
+			weekYears?: numberlike;
+			weekYear?: numberlike;
+			gg?: numberlike;
+
+			isoWeekYears?: numberlike;
+			isoWeekYear?: numberlike;
+			GG?: numberlike;
+
+			quarters?: numberlike;
+			quarter?: numberlike;
+			Q?: numberlike;
+
+			weeks?: numberlike;
+			week?: numberlike;
+			w?: numberlike;
+
+			isoWeeks?: numberlike;
+			isoWeek?: numberlike;
+			W?: numberlike;
+
+			dayOfYears?: numberlike;
+			dayOfYear?: numberlike;
+			DDD?: numberlike;
+
+			weekdays?: numberlike;
+			weekday?: numberlike;
+			e?: numberlike;
+
+			isoWeekdays?: numberlike;
+			isoWeekday?: numberlike;
+			E?: numberlike;
+		}
+
+		interface FromTo {
+			from: MomentInput;
+			to: MomentInput;
+		}
+
+		type MomentInput =
+			| Moment
+			| Date
+			| string
+			| number
+			| (number | string)[]
+			| MomentInputObject
+			| void; // null | undefined
+		type DurationInputArg1 = Duration | number | string | FromTo | DurationInputObject | void; // null | undefined
+		type DurationInputArg2 = unitOfTime.DurationConstructor;
+		type LocaleSpecifier = string | Moment | Duration | string[] | boolean;
+
+		interface MomentCreationData {
+			input: MomentInput;
+			format?: MomentFormatSpecification;
+			locale: Locale;
+			isUTC: boolean;
+			strict?: boolean;
+		}
+
+		interface Moment extends Object {
+			format(format?: string): string;
+
+			startOf(unitOfTime: unitOfTime.StartOf): Moment;
+			endOf(unitOfTime: unitOfTime.StartOf): Moment;
+
+			add(amount?: DurationInputArg1, unit?: DurationInputArg2): Moment;
+			/**
+			 * @deprecated reverse syntax
+			 */
+			add(unit: unitOfTime.DurationConstructor, amount: number | string): Moment;
+
+			subtract(amount?: DurationInputArg1, unit?: DurationInputArg2): Moment;
+			/**
+			 * @deprecated reverse syntax
+			 */
+			subtract(unit: unitOfTime.DurationConstructor, amount: number | string): Moment;
+
+			calendar(): string;
+			calendar(formats: CalendarSpec): string;
+			calendar(time: MomentInput, formats?: CalendarSpec): string;
+
+			clone(): Moment;
+
+			/**
+			 * @return Unix timestamp in milliseconds
+			 */
+			valueOf(): number;
+
+			// current date/time in local mode
+			local(keepLocalTime?: boolean): Moment;
+			isLocal(): boolean;
+
+			// current date/time in UTC mode
+			utc(keepLocalTime?: boolean): Moment;
+			isUTC(): boolean;
+			/**
+			 * @deprecated use isUTC
+			 */
+			isUtc(): boolean;
+
+			parseZone(): Moment;
+			isValid(): boolean;
+			invalidAt(): number;
+
+			hasAlignedHourOffset(other?: MomentInput): boolean;
+
+			creationData(): MomentCreationData;
+			parsingFlags(): MomentParsingFlags;
+
+			year(y: number): Moment;
+			year(): number;
+			/**
+			 * @deprecated use year(y)
+			 */
+			years(y: number): Moment;
+			/**
+			 * @deprecated use year()
+			 */
+			years(): number;
+			quarter(): number;
+			quarter(q: number): Moment;
+			quarters(): number;
+			quarters(q: number): Moment;
+			month(M: number | string): Moment;
+			month(): number;
+			/**
+			 * @deprecated use month(M)
+			 */
+			months(M: number | string): Moment;
+			/**
+			 * @deprecated use month()
+			 */
+			months(): number;
+			day(d: number | string): Moment;
+			day(): number;
+			days(d: number | string): Moment;
+			days(): number;
+			date(d: number): Moment;
+			date(): number;
+			/**
+			 * @deprecated use date(d)
+			 */
+			dates(d: number): Moment;
+			/**
+			 * @deprecated use date()
+			 */
+			dates(): number;
+			hour(h: number): Moment;
+			hour(): number;
+			hours(h: number): Moment;
+			hours(): number;
+			minute(m: number): Moment;
+			minute(): number;
+			minutes(m: number): Moment;
+			minutes(): number;
+			second(s: number): Moment;
+			second(): number;
+			seconds(s: number): Moment;
+			seconds(): number;
+			millisecond(ms: number): Moment;
+			millisecond(): number;
+			milliseconds(ms: number): Moment;
+			milliseconds(): number;
+			weekday(): number;
+			weekday(d: number): Moment;
+			isoWeekday(): number;
+			isoWeekday(d: number | string): Moment;
+			weekYear(): number;
+			weekYear(d: number): Moment;
+			isoWeekYear(): number;
+			isoWeekYear(d: number): Moment;
+			week(): number;
+			week(d: number): Moment;
+			weeks(): number;
+			weeks(d: number): Moment;
+			isoWeek(): number;
+			isoWeek(d: number): Moment;
+			isoWeeks(): number;
+			isoWeeks(d: number): Moment;
+			weeksInYear(): number;
+			weeksInWeekYear(): number;
+			isoWeeksInYear(): number;
+			isoWeeksInISOWeekYear(): number;
+			dayOfYear(): number;
+			dayOfYear(d: number): Moment;
+
+			from(inp: MomentInput, suffix?: boolean): string;
+			to(inp: MomentInput, suffix?: boolean): string;
+			fromNow(withoutSuffix?: boolean): string;
+			toNow(withoutPrefix?: boolean): string;
+
+			diff(b: MomentInput, unitOfTime?: unitOfTime.Diff, precise?: boolean): number;
+
+			toArray(): number[];
+			toDate(): Date;
+			toISOString(keepOffset?: boolean): string;
+			inspect(): string;
+			toJSON(): string;
+			unix(): number;
+
+			isLeapYear(): boolean;
+			/**
+			 * @deprecated in favor of utcOffset
+			 */
+			zone(): number;
+			zone(b: number | string): Moment;
+			utcOffset(): number;
+			utcOffset(b: number | string, keepLocalTime?: boolean): Moment;
+			isUtcOffset(): boolean;
+			daysInMonth(): number;
+			isDST(): boolean;
+
+			zoneAbbr(): string;
+			zoneName(): string;
+
+			isBefore(inp?: MomentInput, granularity?: unitOfTime.StartOf): boolean;
+			isAfter(inp?: MomentInput, granularity?: unitOfTime.StartOf): boolean;
+			isSame(inp?: MomentInput, granularity?: unitOfTime.StartOf): boolean;
+			isSameOrAfter(inp?: MomentInput, granularity?: unitOfTime.StartOf): boolean;
+			isSameOrBefore(inp?: MomentInput, granularity?: unitOfTime.StartOf): boolean;
+			isBetween(
+				a: MomentInput,
+				b: MomentInput,
+				granularity?: unitOfTime.StartOf,
+				inclusivity?: "()" | "[)" | "(]" | "[]"
+			): boolean;
+
+			/**
+			 * @deprecated as of 2.8.0, use locale
+			 */
+			lang(language: LocaleSpecifier): Moment;
+			/**
+			 * @deprecated as of 2.8.0, use locale
+			 */
+			lang(): Locale;
+
+			locale(): string;
+			locale(locale: LocaleSpecifier): Moment;
+
+			localeData(): Locale;
+
+			/**
+			 * @deprecated no reliable implementation
+			 */
+			isDSTShifted(): boolean;
+
+			// NOTE(constructor): Same as moment constructor
+			/**
+			 * @deprecated as of 2.7.0, use moment.min/max
+			 */
+			max(inp?: MomentInput, format?: MomentFormatSpecification, strict?: boolean): Moment;
+			/**
+			 * @deprecated as of 2.7.0, use moment.min/max
+			 */
+			max(
+				inp?: MomentInput,
+				format?: MomentFormatSpecification,
+				language?: string,
+				strict?: boolean
+			): Moment;
+
+			// NOTE(constructor): Same as moment constructor
+			/**
+			 * @deprecated as of 2.7.0, use moment.min/max
+			 */
+			min(inp?: MomentInput, format?: MomentFormatSpecification, strict?: boolean): Moment;
+			/**
+			 * @deprecated as of 2.7.0, use moment.min/max
+			 */
+			min(
+				inp?: MomentInput,
+				format?: MomentFormatSpecification,
+				language?: string,
+				strict?: boolean
+			): Moment;
+
+			get(unit: unitOfTime.All): number;
+			set(unit: unitOfTime.All, value: number): Moment;
+			set(objectLiteral: MomentSetObject): Moment;
+
+			toObject(): MomentObjectOutput;
+		}
+
+		export let version: string;
+		export let fn: Moment;
+
+		// NOTE(constructor): Same as moment constructor
+		/**
+		 * @param strict Strict parsing disables the deprecated fallback to the native Date constructor when
+		 * parsing a string.
+		 */
+		export function utc(inp?: MomentInput, strict?: boolean): Moment;
+		/**
+		 * @param strict Strict parsing requires that the format and input match exactly, including delimiters.
+		 * Strict parsing is frequently the best parsing option. For more information about choosing strict vs
+		 * forgiving parsing, see the [parsing guide](https://momentjs.com/guides/#/parsing/).
+		 */
+		export function utc(
+			inp?: MomentInput,
+			format?: MomentFormatSpecification,
+			strict?: boolean
+		): Moment;
+		/**
+		 * @param strict Strict parsing requires that the format and input match exactly, including delimiters.
+		 * Strict parsing is frequently the best parsing option. For more information about choosing strict vs
+		 * forgiving parsing, see the [parsing guide](https://momentjs.com/guides/#/parsing/).
+		 */
+		export function utc(
+			inp?: MomentInput,
+			format?: MomentFormatSpecification,
+			language?: string,
+			strict?: boolean
+		): Moment;
+
+		export function unix(timestamp: number): Moment;
+
+		export function invalid(flags?: MomentParsingFlagsOpt): Moment;
+		export function isMoment(m: any): m is Moment;
+		export function isDate(m: any): m is Date;
+		export function isDuration(d: any): d is Duration;
+
+		/**
+		 * @deprecated in 2.8.0
+		 */
+		export function lang(language?: string): string;
+		/**
+		 * @deprecated in 2.8.0
+		 */
+		export function lang(language?: string, definition?: Locale): string;
+
+		export function locale(language?: string): string;
+		export function locale(language?: string[]): string;
+		export function locale(language?: string, definition?: LocaleSpecification | void): string; // null | undefined
+
+		export function localeData(key?: string | string[]): Locale;
+
+		export function duration(inp?: DurationInputArg1, unit?: DurationInputArg2): Duration;
+
+		// NOTE(constructor): Same as moment constructor
+		export function parseZone(
+			inp?: MomentInput,
+			format?: MomentFormatSpecification,
+			strict?: boolean
+		): Moment;
+		export function parseZone(
+			inp?: MomentInput,
+			format?: MomentFormatSpecification,
+			language?: string,
+			strict?: boolean
+		): Moment;
+
+		export function months(): string[];
+		export function months(index: number): string;
+		export function months(format: string): string[];
+		export function months(format: string, index: number): string;
+		export function monthsShort(): string[];
+		export function monthsShort(index: number): string;
+		export function monthsShort(format: string): string[];
+		export function monthsShort(format: string, index: number): string;
+
+		export function weekdays(): string[];
+		export function weekdays(index: number): string;
+		export function weekdays(format: string): string[];
+		export function weekdays(format: string, index: number): string;
+		export function weekdays(localeSorted: boolean): string[];
+		export function weekdays(localeSorted: boolean, index: number): string;
+		export function weekdays(localeSorted: boolean, format: string): string[];
+		export function weekdays(localeSorted: boolean, format: string, index: number): string;
+		export function weekdaysShort(): string[];
+		export function weekdaysShort(index: number): string;
+		export function weekdaysShort(format: string): string[];
+		export function weekdaysShort(format: string, index: number): string;
+		export function weekdaysShort(localeSorted: boolean): string[];
+		export function weekdaysShort(localeSorted: boolean, index: number): string;
+		export function weekdaysShort(localeSorted: boolean, format: string): string[];
+		export function weekdaysShort(localeSorted: boolean, format: string, index: number): string;
+		export function weekdaysMin(): string[];
+		export function weekdaysMin(index: number): string;
+		export function weekdaysMin(format: string): string[];
+		export function weekdaysMin(format: string, index: number): string;
+		export function weekdaysMin(localeSorted: boolean): string[];
+		export function weekdaysMin(localeSorted: boolean, index: number): string;
+		export function weekdaysMin(localeSorted: boolean, format: string): string[];
+		export function weekdaysMin(localeSorted: boolean, format: string, index: number): string;
+
+		export function min(moments: Moment[]): Moment;
+		export function min(...moments: Moment[]): Moment;
+		export function max(moments: Moment[]): Moment;
+		export function max(...moments: Moment[]): Moment;
+
+		/**
+		 * Returns unix time in milliseconds. Overwrite for profit.
+		 */
+		export function now(): number;
+
+		export function defineLocale(
+			language: string,
+			localeSpec: LocaleSpecification | void
+		): Locale; // null
+		export function updateLocale(
+			language: string,
+			localeSpec: LocaleSpecification | void
+		): Locale; // null
+
+		export function locales(): string[];
+
+		export function normalizeUnits(unit: unitOfTime.All): string;
+		export function relativeTimeThreshold(threshold: string): number | boolean;
+		export function relativeTimeThreshold(threshold: string, limit: number): boolean;
+		export function relativeTimeRounding(fn: (num: number) => number): boolean;
+		export function relativeTimeRounding(): (num: number) => number;
+		export function calendarFormat(m: Moment, now: Moment): string;
+
+		export function parseTwoDigitYear(input: string): number;
+
+		/**
+		 * Constant used to enable explicit ISO_8601 format parsing.
+		 */
+		export let ISO_8601: MomentBuiltinFormat;
+		export let RFC_2822: MomentBuiltinFormat;
+
+		export let defaultFormat: string;
+		export let defaultFormatUtc: string;
+		export let suppressDeprecationWarnings: boolean;
+		export let deprecationHandler: ((name: string | void, msg: string) => void) | void;
+
+		export let HTML5_FMT: {
+			DATETIME_LOCAL: string;
+			DATETIME_LOCAL_SECONDS: string;
+			DATETIME_LOCAL_MS: string;
+			DATE: string;
+			TIME: string;
+			TIME_SECONDS: string;
+			TIME_MS: string;
+			WEEK: string;
+			MONTH: string;
+		};
+	}
+
+	export = moment;
+}
+
+`;
diff --git a/src/modules/flow/components/nodes/code/editor/index.vue b/src/modules/flow/components/nodes/code/editor/index.vue
new file mode 100644
index 0000000..e1bc086
--- /dev/null
+++ b/src/modules/flow/components/nodes/code/editor/index.vue
@@ -0,0 +1,138 @@
+<template>
+	<div class="editor">
+		<div class="opbar">
+			<el-tooltip content="全屏">
+				<cl-svg name="fullscreen" class="btn-icon" @click="fullscreen.open" />
+			</el-tooltip>
+
+			<el-tooltip content="调试">
+				<cl-svg name="debug" class="btn-icon" @click="toDebug" />
+			</el-tooltip>
+		</div>
+
+		<cl-editor-monaco
+			:ref="setRefs('monaco')"
+			v-model="value"
+			:height="300"
+			:language="language"
+		/>
+
+		<cl-dialog
+			v-model="fullscreen.visible"
+			title="代码编辑"
+			keep-alive
+			fullscreen
+			:scrollbar="false"
+			height="500px"
+			padding="5px"
+		>
+			<cl-editor-monaco
+				:ref="setRefs('monaco')"
+				v-model="value"
+				height="100%"
+				:language="language"
+			/>
+		</cl-dialog>
+	</div>
+</template>
+
+<script setup lang="ts" name="node-code-editor">
+import { onMounted, reactive, useModel, watch, computed } from "vue";
+import { useFlow } from "/$/flow/hooks";
+import { addDeclare } from "/@/plugins/editor-monaco";
+import { useCool } from "/@/cool";
+import { declares } from "./declares";
+import { ctx } from "virtual:ctx";
+
+const props = defineProps({
+	modelValue: String
+});
+
+const { refs, setRefs, mitt } = useCool();
+const flow = useFlow();
+
+// 编辑器语言
+const language = computed(() => {
+	switch (ctx.serviceLang) {
+		case "Java":
+			return "java";
+		case "Python":
+			return "python";
+		default:
+			return "typescript";
+	}
+});
+
+// 绑定值
+const value = useModel(props, "modelValue");
+
+// 插入代码
+function insertCode(code: string) {
+	refs.monaco.appendContent(code);
+	refs.popover?.hide();
+}
+
+// 调试
+function toDebug() {
+	mitt.emit("flow.runOpen", flow.node);
+}
+
+// 更新代码描述
+function updateDeclare() {
+	watch(
+		() => flow.node?.data,
+		(data) => {
+			const params = data?.inputParams
+				?.map((e) => `${e.field}: ${e.type || "string"};`)
+				.join("");
+
+			const result = data?.outputParams
+				?.map((e) => `${e.field}: ${e.type || "string"};`)
+				.join("");
+
+			addDeclare({
+				path: "flow.d.ts",
+				content: `
+			declare interface Params { ${params} }
+			declare interface Result { ${result} }`
+			});
+		},
+		{
+			immediate: true,
+			deep: true
+		}
+	);
+}
+
+// 初始化
+function init() {
+	if (ctx.serviceLang == "Node") {
+		["axios", "dayjs", "lodash", "moment", "cool"].forEach((k) => {
+			addDeclare({ path: `${k}.d.ts`, content: declares[k] });
+		});
+
+		updateDeclare();
+	}
+}
+
+// 全屏
+const fullscreen = reactive({
+	visible: false,
+
+	open() {
+		fullscreen.visible = true;
+	}
+});
+
+onMounted(() => {
+	init();
+});
+</script>
+
+<style lang="scss" scoped>
+.opbar {
+	position: absolute;
+	right: 0;
+	top: -30px;
+}
+</style>
diff --git a/src/modules/flow/components/nodes/code/index.ts b/src/modules/flow/components/nodes/code/index.ts
new file mode 100644
index 0000000..9a08d41
--- /dev/null
+++ b/src/modules/flow/components/nodes/code/index.ts
@@ -0,0 +1,65 @@
+import type { FlowNode } from "/$/flow/types";
+import component from "./index.vue";
+import FormInputParams from "../_base/form/input-params.vue";
+import FormOutputParams from "../_base/form/output-params.vue";
+import Editor from "./editor/index.vue";
+import { Snippet } from "./shippets";
+
+export default (): FlowNode => {
+	return {
+		group: "行为",
+		label: "执行代码",
+		description: "执行一段自定义代码，可以调用框架的插件、数据库、service等",
+		color: "#67c23a",
+		component,
+		form: {
+			width: "500px",
+			items: [
+				{
+					label: "输入变量",
+					prop: "inputParams",
+					component: {
+						vm: FormInputParams
+					}
+				},
+				{
+					label: "代码编辑",
+					prop: "options.code",
+					component: {
+						vm: Editor
+					}
+				},
+				{
+					label: "输出变量",
+					prop: "outputParams",
+					component: {
+						vm: FormOutputParams
+					}
+				}
+			]
+		},
+		data: {
+			inputParams: [
+				{
+					field: "arg1"
+				}
+			],
+			outputParams: [
+				{
+					field: "result",
+					type: "string"
+				}
+			],
+			options: {
+				code: Snippet.base
+			}
+		},
+		validator(data) {
+			// 验证变量是否绑定值
+			const param = data.inputParams?.find((e) => !e.nodeId);
+			if (param) {
+				return `请绑定变量：${param.field}`;
+			}
+		}
+	};
+};
diff --git a/src/modules/flow/components/nodes/code/index.vue b/src/modules/flow/components/nodes/code/index.vue
new file mode 100644
index 0000000..9b20e02
--- /dev/null
+++ b/src/modules/flow/components/nodes/code/index.vue
@@ -0,0 +1,20 @@
+<template>
+	<div class="node-code"></div>
+</template>
+
+<script lang="ts" setup name="node-code">
+import type { FlowNode } from "/$/flow/types";
+import type { PropType } from "vue";
+
+const props = defineProps({
+	node: {
+		type: Object as PropType<FlowNode>,
+		default: () => ({})
+	},
+	// 节点是否聚焦
+	focus: {
+		type: Boolean,
+		default: false
+	}
+});
+</script>
diff --git a/src/modules/flow/components/nodes/code/shippets/index.ts b/src/modules/flow/components/nodes/code/shippets/index.ts
new file mode 100644
index 0000000..9014707
--- /dev/null
+++ b/src/modules/flow/components/nodes/code/shippets/index.ts
@@ -0,0 +1,48 @@
+import { ctx } from "virtual:ctx";
+
+const Java = {
+	base: `import java.util.Map;
+/**
+ * 代码执行
+ */
+public class DynamicClass {
+    /**
+     * 主函数
+     */
+    public Map<String, Object> main(Map<String, Object> params) {
+        System.out.println("Cool main " + params);
+        return params;
+    }
+}`
+};
+
+const Node = {
+	base: `import axios from 'axios';
+import * as _ from 'lodash';
+import * as moment from 'moment';
+
+/**
+ * 代码执行
+ */
+export class Cool extends Base {
+	/**
+	 * 主函数
+	 */
+	async main(params: Params): Promise<Result> {
+		console.log('Cool main', params);
+		return {
+			result: ""
+		};
+	}
+}`,
+	simple: `async function main(params: Params): Promise<Params> {
+	return params;
+}`
+};
+
+export const Snippets = {
+	Java,
+	Node
+};
+
+export const Snippet = Snippets[ctx.serviceLang];
diff --git a/src/modules/flow/components/nodes/end/index.ts b/src/modules/flow/components/nodes/end/index.ts
new file mode 100644
index 0000000..41655be
--- /dev/null
+++ b/src/modules/flow/components/nodes/end/index.ts
@@ -0,0 +1,44 @@
+import type { FlowNode } from "/$/flow/types";
+import component from "./index.vue";
+import FormInputParams from "../_base/form/input-params.vue";
+
+export default (): FlowNode => {
+	return {
+		group: "逻辑",
+		label: "结束",
+		description: "结束节点",
+		color: "#f56c6c",
+		component,
+		form: {
+			items: [
+				{
+					label: "输出变量",
+					prop: "outputParams",
+					component: {
+						vm: FormInputParams,
+						props: {
+							field: "res"
+						}
+					}
+				}
+			]
+		},
+		data: {
+			outputParams: [
+				{
+					field: "res"
+				}
+			]
+		},
+		handle: {
+			source: false
+		},
+		validator(data) {
+			// 验证变量是否绑定值
+			const param = data.outputParams?.find((e) => !e.nodeId);
+			if (param) {
+				return `请绑定变量到${param.field}`;
+			}
+		}
+	};
+};
diff --git a/src/modules/flow/components/nodes/end/index.vue b/src/modules/flow/components/nodes/end/index.vue
new file mode 100644
index 0000000..fddc9b6
--- /dev/null
+++ b/src/modules/flow/components/nodes/end/index.vue
@@ -0,0 +1,3 @@
+<template>
+	<div class="node-end"></div>
+</template>
diff --git a/src/modules/flow/components/nodes/flow/form/info.vue b/src/modules/flow/components/nodes/flow/form/info.vue
new file mode 100644
index 0000000..4be08ac
--- /dev/null
+++ b/src/modules/flow/components/nodes/flow/form/info.vue
@@ -0,0 +1,68 @@
+<template>
+	<div class="form-info" v-if="info">
+		<el-tag disable-transitions type="success" effect="dark" size="small">
+			v{{ info?.version }}
+		</el-tag>
+
+		<el-text :truncated="true" size="small">
+			{{ info?.name }}
+		</el-text>
+	</div>
+</template>
+
+<script setup lang="ts" name="node-flow-form-info">
+import { useCool } from "/@/cool";
+import { ref, watch, onMounted } from "vue";
+
+const props = defineProps({
+	flowId: Number
+});
+
+const { service } = useCool();
+
+const info = ref<Eps.FlowInfoEntity>();
+
+async function refresh() {
+	info.value = await service.flow.info.info({
+		id: props.flowId
+	});
+}
+
+onMounted(() => {
+	watch(
+		() => props.flowId,
+		(val) => {
+			if (val) {
+				refresh();
+			}
+		},
+		{
+			immediate: true
+		}
+	);
+});
+</script>
+
+<style lang="scss" scoped>
+.form-info {
+	display: flex;
+	align-items: center;
+	border: 1px solid var(--el-border-color);
+	border-radius: var(--el-border-radius-base);
+	padding: 0 10px;
+	cursor: pointer;
+	height: 32px;
+	width: 100%;
+	position: relative;
+	transition: all 0.2s;
+	box-sizing: border-box;
+
+	.el-tag {
+		margin-right: 5px;
+	}
+
+	&:hover {
+		border-color: var(--el-border-color-hover);
+	}
+}
+</style>
diff --git a/src/modules/flow/components/nodes/flow/form/select.vue b/src/modules/flow/components/nodes/flow/form/select.vue
new file mode 100644
index 0000000..f853f1b
--- /dev/null
+++ b/src/modules/flow/components/nodes/flow/form/select.vue
@@ -0,0 +1,234 @@
+<template>
+	<div class="form-select">
+		<div class="empty" v-if="!modelValue">
+			<span>未选择流程，</span>
+			<span @click="open()">点击选择</span>
+		</div>
+
+		<info :flow-id="modelValue" @click="open()" v-else />
+
+		<cl-dialog v-model="visible" title="选择流程" width="1000px" :controls="['close']">
+			<cl-crud ref="Crud" padding="0">
+				<cl-row>
+					<cl-table
+						ref="Table"
+						:auto-height="false"
+						@row-dblclick="select"
+						@row-click="onRowClick"
+					>
+						<template #column-op="{ scope }">
+							<el-button
+								size="small"
+								type="success"
+								round
+								bg
+								@click="select(scope.row)"
+							>
+								选择
+							</el-button>
+						</template>
+					</cl-table>
+				</cl-row>
+
+				<cl-row>
+					<cl-flex1 />
+					<cl-pagination />
+				</cl-row>
+			</cl-crud>
+		</cl-dialog>
+	</div>
+</template>
+
+<script setup lang="ts" name="node-flow-form-select">
+import { ref, nextTick } from "vue";
+import { useCool } from "/@/cool";
+import { useCrud, useTable } from "@cool-vue/crud";
+import Info from "./info.vue";
+import { useFlow } from "/$/flow/hooks";
+import type { FlowNode } from "/$/flow/types";
+
+const props = defineProps({
+	modelValue: Number
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const { service, route, mitt } = useCool();
+const flow = useFlow();
+
+// 流程ID
+const flowId = ref();
+
+// 是否可见
+const visible = ref(false);
+
+// cl-crud
+const Crud = useCrud({
+	service: service.flow.info
+});
+
+// cl-table
+const Table = useTable({
+	columns: [
+		{
+			label: "操作",
+			prop: "op"
+		},
+		{ label: "名称", prop: "name", minWidth: 140 },
+		{
+			label: "标签",
+			prop: "label",
+			minWidth: 140
+		},
+		{ label: "版本", prop: "version", minWidth: 100 },
+		{ label: "描述", prop: "description", showOverflowTooltip: true, minWidth: 200 },
+		{
+			label: "发布时间",
+			prop: "releaseTime",
+			minWidth: 170,
+			sortable: "desc",
+			formatter(row) {
+				return row.releaseTime || "未发布";
+			}
+		}
+	]
+});
+
+// 刷新
+async function refresh(params?: any) {
+	return Crud.value?.refresh(params);
+}
+
+// 单击选择
+function onRowClick(row: Eps.FlowInfoEntity) {
+	flowId.value = row.id;
+}
+
+// 选择
+function select(row: Eps.FlowInfoEntity) {
+	const { nodes } = row.data || row.draft;
+
+	// 开始节点
+	const start = (nodes as FlowNode[]).find((e) => e.type == "start");
+
+	// 替换参数
+	if (flow.node?.data && start) {
+		const params = start.data?.inputParams?.map((e) => {
+			return {
+				field: e.field,
+				label: e.label,
+				name: e.name,
+				required: e.required,
+				type: e.type
+			};
+		});
+
+		mitt.emit("flow.updateForm", {
+			inputParams: params
+		});
+	}
+
+	flowId.value = row.id;
+	emit("update:modelValue", flowId.value);
+
+	close();
+}
+
+// 打开
+function open() {
+	visible.value = true;
+
+	nextTick(async () => {
+		await refresh({
+			status: 1,
+			isRelease: true,
+			flowId: route.query.id
+		});
+
+		// 选中
+		flowId.value = props.modelValue;
+
+		if (flowId.value) {
+			Table.value?.setCurrentRow(Table.value.data.find((e) => e.id == flowId.value));
+		}
+	});
+}
+
+// 关闭
+function close() {
+	visible.value = false;
+}
+</script>
+
+<style lang="scss" scoped>
+.op {
+	display: flex;
+	justify-content: flex-end;
+	margin-top: 20px;
+}
+
+.list {
+	.item {
+		display: flex;
+		align-items: center;
+		border-radius: 6px;
+		font-size: 12px;
+		cursor: pointer;
+		height: 35px;
+		line-height: normal;
+		padding: 0 5px;
+		margin-bottom: 5px;
+		border: 1px solid var(--el-border-color);
+		box-sizing: border-box;
+
+		.icon {
+			margin: 0 5px;
+			font-size: 16px;
+		}
+
+		.name,
+		.desc {
+			font-size: 12px;
+		}
+
+		.desc {
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+
+		&:hover {
+			background-color: var(--el-fill-color-lighter);
+		}
+
+		&.active {
+			border-color: var(--el-color-primary);
+			color: var(--el-color-primary);
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+}
+
+.empty {
+	text-align: center;
+	line-height: normal;
+	padding: 15px 0;
+	border-radius: 4px;
+	font-size: 12px;
+	border: 1px solid var(--el-border-color);
+
+	span {
+		&:first-child {
+			color: var(--el-text-color-placeholder);
+		}
+
+		&:last-child {
+			color: var(--el-color-success);
+			cursor: pointer;
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/nodes/flow/index.ts b/src/modules/flow/components/nodes/flow/index.ts
new file mode 100644
index 0000000..04df526
--- /dev/null
+++ b/src/modules/flow/components/nodes/flow/index.ts
@@ -0,0 +1,64 @@
+import type { FlowNode } from "/$/flow/types";
+import component from "./index.vue";
+import FormInputParams from "../_base/form/input-params.vue";
+import FormOutputParams from "../_base/form/output-params.vue";
+import FormSelect from "./form/select.vue";
+
+export default (): FlowNode => {
+	return {
+		group: "扩展",
+		label: "流程",
+		description: "执行其他流程",
+		color: "#fd9d2f",
+		component,
+		form: {
+			items: [
+				{
+					label: "输入变量",
+					prop: "inputParams",
+					component: {
+						vm: FormInputParams,
+						props: {
+							disabled: true,
+							editField: false,
+							placeholder: "请先选择流程"
+						}
+					}
+				},
+				{
+					label: "选择流程",
+					prop: "options.flowId",
+					component: {
+						vm: FormSelect
+					}
+				},
+				{
+					label: "输出变量",
+					prop: "outputParams",
+					component: {
+						vm: FormOutputParams
+					}
+				}
+			]
+		},
+		data: {
+			options: {},
+			inputParams: [],
+			outputParams: [
+				{
+					field: "res1",
+					type: "string"
+				}
+			]
+		},
+		validator(data) {
+			// 验证if条件是否设置
+			const param = data.options.IF?.find(
+				(e: JudgeItem) => !e.nodeId || !e.condition || !e.value
+			);
+			if (param) {
+				return "条件判断格式异常";
+			}
+		}
+	};
+};
diff --git a/src/modules/flow/components/nodes/flow/index.vue b/src/modules/flow/components/nodes/flow/index.vue
new file mode 100644
index 0000000..098d851
--- /dev/null
+++ b/src/modules/flow/components/nodes/flow/index.vue
@@ -0,0 +1,29 @@
+<template>
+	<div class="node-flow" v-if="node.data?.options.flowId && !focus">
+		<info :flow-id="node.data?.options.flowId" />
+	</div>
+</template>
+
+<script lang="ts" setup name="node-flow">
+import type { FlowNode } from "/$/flow/types";
+import type { PropType } from "vue";
+import Info from "./form/info.vue";
+
+const props = defineProps({
+	node: {
+		type: Object as PropType<FlowNode>,
+		default: () => ({})
+	},
+	// 节点是否聚焦
+	focus: {
+		type: Boolean,
+		default: false
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.node-flow {
+	padding-bottom: 15px;
+}
+</style>
diff --git a/src/modules/flow/components/nodes/index.ts b/src/modules/flow/components/nodes/index.ts
new file mode 100644
index 0000000..30feac6
--- /dev/null
+++ b/src/modules/flow/components/nodes/index.ts
@@ -0,0 +1,32 @@
+import type { FlowNode } from "../../types";
+import { shallowRef } from "vue";
+
+const files: { [key: string]: { default: () => FlowNode } } = import.meta.glob(
+	"./*/index.{ts,tsx}",
+	{
+		eager: true
+	}
+);
+
+const CustomNodes = shallowRef<FlowNode[]>([]);
+
+for (const i in files) {
+	const [, type] = i.split("/");
+
+	const d = files[i].default();
+
+	if (d.enable !== false) {
+		const configWidth = d.form?.width || '400px';
+		const width = `${parseFloat(configWidth) + 30}px`
+
+		CustomNodes.value.push({
+			...d,
+			type,
+			name: `node-${type}`,
+			icon: type,
+			cardWidth: width
+		});
+	}
+}
+
+export { CustomNodes };
diff --git a/src/modules/flow/components/nodes/judge/form/if.vue b/src/modules/flow/components/nodes/judge/form/if.vue
new file mode 100644
index 0000000..87a6885
--- /dev/null
+++ b/src/modules/flow/components/nodes/judge/form/if.vue
@@ -0,0 +1,188 @@
+<template>
+	<div class="form-if">
+		<cl-svg name="add" class="btn-icon is-rt" @click="add()" />
+
+		<div class="item" v-for="(item, index) in list" :key="index">
+			<tools-var
+				v-model="item.field"
+				v-model:nodeId="item.nodeId"
+				v-model:nodeType="item.nodeType"
+			/>
+
+			<el-select
+				v-model="item.condition"
+				placeholder="操作符"
+				:style="{
+					width: '100px'
+				}"
+				popper-class="cl-flow__popper"
+			>
+				<el-option
+					v-for="c in condition"
+					:key="c.value"
+					:label="c.label"
+					:value="c.value"
+				/>
+			</el-select>
+
+			<el-input
+				v-model="item.value"
+				placeholder="输入值"
+				:style="{
+					width: '80px'
+				}"
+			/>
+
+			<cl-svg class="btn-icon" name="delete" @click="del(index)" />
+
+			<div class="operator">
+				<el-button-group size="small">
+					<el-button
+						v-for="o in operator"
+						:key="o.value"
+						:type="item.operator == o.value ? 'primary' : ''"
+						@click="item.operator = o.value"
+					>
+						{{ o.label }}
+					</el-button>
+				</el-button-group>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="node-judge-form-if">
+import { type PropType, onMounted, useModel } from "vue";
+import ToolsVar from "/$/flow/components/tools/var.vue";
+
+const props = defineProps({
+	modelValue: {
+		type: Object as PropType<JudgeItem[]>,
+		default: () => ({})
+	}
+});
+
+const list = useModel(props, "modelValue");
+
+const condition = [
+	{
+		label: "包含",
+		value: "include"
+	},
+	{
+		label: "不包含",
+		value: "exclude"
+	},
+	{
+		label: "开始是",
+		value: "startWith"
+	},
+	{
+		label: "结束是",
+		value: "endWith"
+	},
+	{
+		label: "等于",
+		value: "equal"
+	},
+	{
+		label: "不等于",
+		value: "notEqual"
+	},
+	{
+		label: "大于",
+		value: "greaterThan"
+	},
+	{
+		label: "大于等于",
+		value: "greaterThanOrEqual"
+	},
+	{
+		label: "小于",
+		value: "lessThan"
+	},
+	{
+		label: "小于等于",
+		value: "lessThanOrEqual"
+	},
+	{
+		label: "为空",
+		value: "isNull"
+	},
+	{
+		label: "不为空",
+		value: "isNotNull"
+	}
+];
+
+const operator = [
+	{
+		label: "OR",
+		value: "OR"
+	},
+	{
+		label: "AND",
+		value: "AND"
+	}
+];
+
+function del(index: number) {
+	list.value.splice(index, 1);
+}
+
+function add() {
+	list.value.push({
+		field: "",
+		condition: "",
+		value: "",
+		operator: "OR"
+	});
+}
+
+onMounted(() => {
+	list.value.forEach((e) => {
+		if (!e.operator) {
+			e.operator = "OR";
+		}
+	});
+});
+</script>
+
+<style lang="scss" scoped>
+.form-if {
+	.item {
+		display: flex;
+		align-items: center;
+		margin-bottom: 10px;
+		padding-bottom: 35px;
+		position: relative;
+
+		.el-select {
+			margin: 0 5px;
+		}
+
+		.el-select,
+		.el-input {
+			flex-shrink: 0;
+		}
+
+		.btn-icon {
+			margin-left: 5px;
+		}
+
+		.operator {
+			position: absolute;
+			bottom: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+			padding-bottom: 0;
+
+			.operator {
+				display: none;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/nodes/judge/index.ts b/src/modules/flow/components/nodes/judge/index.ts
new file mode 100644
index 0000000..509a253
--- /dev/null
+++ b/src/modules/flow/components/nodes/judge/index.ts
@@ -0,0 +1,74 @@
+import type { FlowNode } from "/$/flow/types";
+import component from "./index.vue";
+import FormIf from "./form/if.vue";
+import { h, resolveComponent, toRaw } from "vue";
+
+export default (): FlowNode => {
+	return {
+		group: "逻辑",
+		label: "条件判断",
+		description: "条件判断节点",
+		color: "#f56c6c",
+		component,
+		form: {
+			items: [
+				{
+					label: "满足",
+					prop: "options.IF",
+					component: {
+						vm: FormIf
+					}
+				},
+				{
+					label: "不满足",
+					component: () => {
+						return h(
+							toRaw(resolveComponent("el-text")),
+							{
+								type: "info",
+								size: "small"
+							},
+							() => {
+								return "用于定义当条件不满足时应执行的逻辑。";
+							}
+						);
+					}
+				}
+			]
+		},
+		data: {
+			options: {
+				IF: [{}] as JudgeItem[],
+				ELSE: [] as JudgeItem[]
+			},
+			outputParams: [
+				{
+					type: "boolean",
+					field: "result"
+				}
+			]
+		},
+		handle: {
+			source: false,
+			next: [
+				{
+					label: "满足",
+					value: "source-if"
+				},
+				{
+					label: "不满足",
+					value: "source-else"
+				}
+			]
+		},
+		validator(data) {
+			// 验证if条件是否设置
+			const param = data.options.IF?.find(
+				(e: JudgeItem) => !e.nodeId || !e.condition || !e.value
+			);
+			if (param) {
+				return "条件判断格式异常";
+			}
+		}
+	};
+};
diff --git a/src/modules/flow/components/nodes/judge/index.vue b/src/modules/flow/components/nodes/judge/index.vue
new file mode 100644
index 0000000..3f1f258
--- /dev/null
+++ b/src/modules/flow/components/nodes/judge/index.vue
@@ -0,0 +1,61 @@
+<template>
+	<div class="node-judge">
+		<div class="item">
+			<span> 满足 </span>
+			<tools-handle
+				type="source"
+				:node-id="node.id"
+				id="source-if"
+				:position="{
+					right: '-24px'
+				}"
+			/>
+		</div>
+		<div class="item">
+			<span> 不满足 </span>
+			<tools-handle
+				type="source"
+				:node-id="node.id"
+				id="source-else"
+				:position="{
+					right: '-24px'
+				}"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="node-judge">
+import type { FlowNode } from "/$/flow/types";
+import { type PropType } from "vue";
+import { useFlow } from "/$/flow/hooks";
+import ToolsHandle from "/$/flow/components/tools/handle.vue";
+
+const props = defineProps({
+	node: {
+		type: Object as PropType<FlowNode>,
+		default: () => ({})
+	}
+});
+
+const flow = useFlow();
+</script>
+
+<style lang="scss" scoped>
+.node-judge {
+	padding-bottom: 15px;
+
+	.item {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		margin-bottom: 5px;
+		font-size: 12px;
+		position: relative;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/nodes/judge/types.d.ts b/src/modules/flow/components/nodes/judge/types.d.ts
new file mode 100644
index 0000000..3f506b3
--- /dev/null
+++ b/src/modules/flow/components/nodes/judge/types.d.ts
@@ -0,0 +1,8 @@
+declare interface JudgeItem {
+	nodeType?: string;
+	nodeId?: string;
+	field: string;
+	condition: string;
+	value?: string;
+	operator: string;
+}
diff --git a/src/modules/flow/components/nodes/know/form/list.vue b/src/modules/flow/components/nodes/know/form/list.vue
new file mode 100644
index 0000000..a5544cc
--- /dev/null
+++ b/src/modules/flow/components/nodes/know/form/list.vue
@@ -0,0 +1,112 @@
+<template>
+	<div class="list">
+		<div class="item" v-for="(item, index) in list" :key="index">
+			<cl-svg name="know" class="icon" />
+			<span class="name">{{ item.name }}</span>
+
+			<cl-svg
+				class="btn-icon del"
+				name="delete"
+				@click="
+					() => {
+						ids.splice(index, 1);
+					}
+				"
+				v-if="deletable"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="node-know-form-list">
+import { PropType, ref, onMounted, computed, useModel } from "vue";
+import { useCool } from "/@/cool";
+
+const props = defineProps({
+	modelValue: {
+		type: Array as PropType<number[]>,
+		default: () => []
+	},
+	deletable: Boolean
+});
+
+const { service } = useCool();
+
+// 绑定值
+const ids = useModel(props, "modelValue");
+
+// 知识库列表
+const knows = ref<{ id: number; name: string; description: string }[]>([]);
+
+// 列表
+const list = computed(() => {
+	return ids.value
+		.map((id) => {
+			return knows.value.find((e) => e.id === id)!;
+		})
+		.filter(Boolean);
+});
+
+// 刷新
+function refresh() {
+	service.flow.config
+		.config({
+			node: "know"
+		})
+		.then((res) => {
+			knows.value = res.knows || [];
+		});
+}
+
+onMounted(() => {
+	refresh();
+});
+</script>
+
+<style lang="scss" scoped>
+.list {
+	.item {
+		display: flex;
+		align-items: center;
+		border-radius: var(--el-border-radius-base);
+		cursor: pointer;
+		height: 32px;
+		line-height: normal;
+		padding: 0 5px;
+		margin-bottom: 5px;
+		border: 1px solid var(--el-border-color);
+		box-sizing: border-box;
+
+		.icon {
+			margin: 0 5px;
+			font-size: 16px;
+			color: var(--el-text-color-regular);
+		}
+
+		.name {
+			font-size: 12px;
+		}
+
+		.del {
+			font-size: 14px;
+			margin-left: auto;
+			padding: 4px;
+			outline: none;
+			border-radius: 6px;
+
+			&:hover {
+				background-color: var(--el-fill-color-light);
+				color: var(--el-text-color-primary);
+			}
+		}
+
+		&:hover {
+			border-color: var(--el-border-color-hover);
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/nodes/know/form/select.vue b/src/modules/flow/components/nodes/know/form/select.vue
new file mode 100644
index 0000000..e4b0936
--- /dev/null
+++ b/src/modules/flow/components/nodes/know/form/select.vue
@@ -0,0 +1,183 @@
+<template>
+	<div class="form-select">
+		<cl-svg name="add" class="btn-icon is-rt" @click="open()" />
+
+		<list v-model="ids" deletable />
+
+		<div class="empty border" v-if="isEmpty(ids)">
+			<span>未选择知识库，</span>
+			<span @click="open()">点击选择</span>
+		</div>
+
+		<cl-dialog v-model="visible" title="选择知识库" width="400px" :controls="['close']">
+			<div class="list">
+				<div
+					class="item"
+					v-for="(item, index) in knows"
+					:key="index"
+					:class="{
+						active: selected.includes(item.id)
+					}"
+					@click="select(item.id)"
+				>
+					<p class="name">{{ item.name }}</p>
+					<p class="desc" v-if="item.description">{{ item.description }}</p>
+				</div>
+			</div>
+
+			<div class="empty" v-if="isEmpty(knows)">
+				<span>暂无知识库，</span>
+				<span @click="router.push('/know/data/type')">点击添加</span>
+			</div>
+
+			<div class="op">
+				<el-button @click="close">取消</el-button>
+				<el-button type="primary" @click="save">确定</el-button>
+			</div>
+		</cl-dialog>
+	</div>
+</template>
+
+<script setup lang="ts" name="node-know-form-select">
+import { ref, useModel, type PropType } from "vue";
+import { useCool } from "/@/cool";
+import { isEmpty } from "lodash-es";
+import List from "./list.vue";
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+	modelValue: {
+		type: Array as PropType<number[]>,
+		default: () => []
+	}
+});
+
+const { service, router } = useCool();
+
+const visible = ref(false);
+
+// 绑定值
+const ids = useModel(props, "modelValue");
+
+// 知识库列表
+const knows = ref<{ id: number; name: string; description: string }[]>([]);
+
+// 刷新
+function refresh() {
+	service.flow.config
+		.config({
+			node: "know"
+		})
+		.then((res) => {
+			knows.value = res.knows || [];
+		});
+}
+
+// 已选
+const selected = ref<number[]>([]);
+
+// 选择
+function select(id: number) {
+	const index = selected.value.findIndex((e) => e == id);
+
+	if (index >= 0) {
+		selected.value.splice(index, 1);
+	} else {
+		selected.value.push(id);
+	}
+}
+
+// 打开
+function open() {
+	visible.value = true;
+	selected.value = [...ids.value];
+	refresh();
+}
+
+// 关闭
+function close() {
+	visible.value = false;
+}
+
+// 保存
+function save() {
+	if (isEmpty(selected.value)) {
+		return ElMessage.warning("至少选择一个知识库");
+	}
+
+	ids.value = [...selected.value];
+	close();
+}
+</script>
+
+<style lang="scss" scoped>
+.op {
+	display: flex;
+	justify-content: flex-end;
+	margin-top: 20px;
+}
+
+.list {
+	.item {
+		border-radius: 6px;
+		cursor: pointer;
+		line-height: normal;
+		padding: 10px;
+		margin-bottom: 10px;
+		border: 1px solid var(--el-border-color);
+		box-sizing: border-box;
+		user-select: none;
+
+		.icon {
+			margin: 0 5px;
+			font-size: 16px;
+		}
+
+		.name {
+			font-size: 14px;
+		}
+
+		.desc {
+			margin-top: 2px;
+			font-size: 12px;
+			color: var(--el-color-info);
+		}
+
+		&.active {
+			border-color: var(--el-color-primary);
+			color: var(--el-color-primary);
+		}
+
+		&:not(.active):hover {
+			background-color: var(--el-fill-color-lighter);
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+}
+
+.empty {
+	text-align: center;
+	line-height: normal;
+	padding: 15px 0;
+	border-radius: 4px;
+	font-size: 12px;
+
+	span {
+		&:first-child {
+			color: var(--el-text-color-placeholder);
+		}
+
+		&:last-child {
+			color: var(--el-color-success);
+			cursor: pointer;
+		}
+	}
+
+	&.border {
+		border: 1px solid var(--el-border-color);
+	}
+}
+</style>
diff --git a/src/modules/flow/components/nodes/know/index.ts b/src/modules/flow/components/nodes/know/index.ts
new file mode 100644
index 0000000..4759dc5
--- /dev/null
+++ b/src/modules/flow/components/nodes/know/index.ts
@@ -0,0 +1,92 @@
+import type { FlowNode } from "/$/flow/types";
+import component from "./index.vue";
+import FormInputParams from "../_base/form/input-params.vue";
+import FormSelect from "./form/select.vue";
+import FormText from "../_base/form/text.vue";
+import { isEmpty } from "lodash-es";
+
+export default (): FlowNode => {
+	return {
+		group: "信息",
+		label: "知识库",
+		description: "从知识库中检索出相关的内容",
+		component,
+		form: {
+			items: [
+				{
+					label: "输入变量",
+					prop: "inputParams",
+					component: {
+						vm: FormInputParams,
+						props: {
+							editField: false,
+							disabled: true
+						}
+					}
+				},
+				{
+					label: "选择知识库",
+					prop: "options.knowIds",
+					component: {
+						vm: FormSelect
+					}
+				},
+				{
+					label: "结果条数",
+					prop: "options.size",
+					component: {
+						name: "el-input-number",
+						props: {
+							min: 1,
+							max: 100
+						}
+					}
+				},
+				{
+					label: "输出变量",
+					component: {
+						vm: FormText,
+						props: {
+							text: ["documents<object[]> 文档列表", "text<string> 文档内容"]
+						}
+					}
+				}
+			]
+		},
+		data: {
+			inputParams: [
+				{
+					field: "text"
+				}
+			],
+			outputParams: [
+				{
+					field: "documents",
+					type: "object[]"
+				},
+				{
+					field: "text",
+					type: "string"
+				}
+			],
+			options: {
+				knowIds: [],
+				size: 3
+			}
+		},
+		validator(data) {
+			const { knowIds } = data.options;
+
+			// 验证变量是否绑定值
+			const param = data.inputParams?.find((e) => !e.nodeId);
+			if (param) {
+				return `请绑定变量：${param.field}`;
+			}
+
+			// 验证知识库是否选择
+			if (isEmpty(knowIds)) {
+				return "请选择知识库";
+			}
+		}
+	};
+};
diff --git a/src/modules/flow/components/nodes/know/index.vue b/src/modules/flow/components/nodes/know/index.vue
new file mode 100644
index 0000000..54b34b2
--- /dev/null
+++ b/src/modules/flow/components/nodes/know/index.vue
@@ -0,0 +1,30 @@
+<template>
+	<div class="node-know" v-if="node?.data && !isEmpty(node.data.options.knowIds) && !focus">
+		<list v-model="node.data.options.knowIds" />
+	</div>
+</template>
+
+<script lang="ts" setup name="node-know">
+import type { FlowNode } from "/$/flow/types";
+import { type PropType } from "vue";
+import { isEmpty } from "lodash-es";
+import List from "./form/list.vue";
+
+const props = defineProps({
+	node: {
+		type: Object as PropType<FlowNode>,
+		default: () => ({})
+	},
+	// 节点是否聚焦
+	focus: {
+		type: Boolean,
+		default: false
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.node-know {
+	padding-bottom: 15px;
+}
+</style>
diff --git a/src/modules/flow/components/nodes/llm/form/message.vue b/src/modules/flow/components/nodes/llm/form/message.vue
new file mode 100644
index 0000000..8166b68
--- /dev/null
+++ b/src/modules/flow/components/nodes/llm/form/message.vue
@@ -0,0 +1,376 @@
+<template>
+	<div class="form-content">
+		<cl-svg name="add" class="btn-icon is-rt" @click="add()" />
+
+		<draggable class="list" tag="div" v-model="list" :animation="300" item-key="id">
+			<template #item="{ element: item, index }">
+				<div
+					class="item textarea-item"
+					:class="{
+						error: !item.content
+					}"
+				>
+					<div class="head">
+						<el-select
+							class="role"
+							v-model="item.role"
+							size="small"
+							popper-class="cl-flow__popper"
+							:disabled="item.role == 'system'"
+						>
+							<el-option
+								v-for="t in getRoles(item)"
+								:label="t.label"
+								:value="t.value"
+								:key="t.value"
+							/>
+						</el-select>
+
+						<div class="op">
+							<cl-svg
+								name="delete"
+								class="btn-icon"
+								@click="remove(index)"
+								v-if="item.role != 'system'"
+							/>
+						</div>
+					</div>
+
+					<div
+						:ref="setRefs(`input-${index}`)"
+						class="content"
+						:class="{
+							'is-empty': !item.content
+						}"
+						contenteditable="true"
+						@input="(e) => onContentInput(e, item)"
+						@focus="(e) => onContentInput(e, item)"
+						@keydown="(e) => onContentKeydown(e)"
+						v-html="item.text"
+					></div>
+				</div>
+			</template>
+		</draggable>
+
+		<!-- 选择变量 -->
+		<tools-var
+			:ref="setRefs('toolsVar')"
+			only-select
+			position="absolute"
+			:show-picker="false"
+			:autofocus="false"
+			use-input-params
+		/>
+	</div>
+</template>
+
+<script setup lang="ts" name="node-llm-form-content">
+import { type PropType, onMounted, onUnmounted, useModel } from "vue";
+import { useCool } from "/@/cool";
+import { last } from "lodash-es";
+import { sleep } from "/@/cool/utils";
+import { useFlow } from "/$/flow/hooks";
+import ToolsVar from "/$/flow/components/tools/var.vue";
+import Draggable from "vuedraggable";
+
+const props = defineProps({
+	modelValue: {
+		type: Array as PropType<LLMMessage[]>,
+		default: () => []
+	}
+});
+
+const { refs, setRefs } = useCool();
+const flow = useFlow();
+
+// 绑定值
+const list = useModel(props, "modelValue");
+
+// 获取类型
+function getRoles(item: LLMMessage) {
+	return [
+		{
+			label: "SYSTEM",
+			value: "system"
+		},
+		{
+			label: "USER",
+			value: "user"
+		},
+		{
+			label: "ASSISTANT",
+			value: "assistant"
+		}
+	].filter((e) => {
+		return item.role == "system" ? true : e.value != "system";
+	});
+}
+
+// 添加
+function add() {
+	const item = last(list.value);
+
+	list.value.push({
+		role: item?.role == "user" ? "assistant" : "user",
+		content: ""
+	});
+}
+
+// 删除
+function remove(index: number) {
+	list.value.splice(index, 1);
+}
+
+// 设置内容
+function setContent(el: HTMLElement, item: LLMMessage) {
+	let val = "";
+
+	function deep(e: Node) {
+		if (e.nodeType == 1) {
+			const node = e as HTMLElement;
+			const field = node.getAttribute("data-field");
+
+			if (field) {
+				val += `{${field}}`;
+			} else {
+				if (val) {
+					val += "\n";
+				}
+
+				if (e.textContent) {
+					e.childNodes.forEach(deep);
+				}
+			}
+		} else {
+			val += e.textContent;
+		}
+	}
+
+	deep(el);
+
+	item.content = val;
+}
+
+// 监听内容输入
+async function onContentInput(e: any, item: LLMMessage) {
+	setContent(e.target, item);
+
+	const sel = window.getSelection();
+
+	if (!sel || sel.rangeCount == 0) {
+		return;
+	}
+
+	await sleep(10);
+
+	const range = sel.getRangeAt(0);
+
+	// 获取光标位置
+	const startContainer: any = range.startContainer;
+	const startOffset = range.startOffset;
+
+	// 如果光标在文本节点中，检查前一个字符
+	if (startOffset > 0 && startContainer.textContent?.[startOffset - 1] === "/") {
+		range.setStart(sel.anchorNode!, sel.anchorOffset);
+		range.collapse(true);
+
+		// 获取选中的位置
+		const rect = range.getBoundingClientRect();
+
+		// 获取选中父级的位置
+		const container = startContainer.parentElement.closest(".form-content");
+		const containerRect = container.getBoundingClientRect();
+
+		// 计算相对位置
+		const relativeReact = {
+			top: rect.top - containerRect.top + 8,
+			left: rect.left - containerRect.left,
+			width: rect.width,
+			height: rect.height
+		};
+
+		// 自定义变量节点
+		refs.toolsVar.open({
+			rect: relativeReact,
+			onSelect(item: any) {
+				const pos = range.startOffset;
+
+				if (pos > 0) {
+					// 删除 / 符号
+					range.setStart(range.startContainer, pos - 1);
+					range.deleteContents();
+
+					// 创建自定义元素
+					const node = document.createElement("div");
+					node.setAttribute("contenteditable", "false");
+					node.setAttribute("data-field", item.field);
+					node.className = "field";
+					node.innerText = item.field;
+
+					// 选中当前元素
+					node.addEventListener("click", () => {
+						const sel = window.getSelection();
+						sel?.removeAllRanges();
+						sel?.addRange(range);
+					});
+
+					// 插入元素
+					range.insertNode(node);
+
+					// 设置光标
+					range.setStartAfter(node);
+					range.setEndAfter(node);
+
+					// 让新的range生效
+					const sel2 = window.getSelection();
+					sel2?.removeAllRanges();
+					sel2?.addRange(range);
+				}
+			}
+		});
+	} else {
+		refs.toolsVar.close();
+	}
+}
+
+// 方向键控制
+function onContentKeydown(e: KeyboardEvent) {
+	if (e.key == "ArrowUp" || e.key == "ArrowDown") {
+		refs.toolsVar.focus(e);
+	}
+}
+
+// 监听选择
+function onSelectionChange() {
+	function isRangeInsideElement(range: Range, element: Element) {
+		const elementRange = document.createRange();
+		elementRange.selectNodeContents(element);
+		return range.intersectsNode(element);
+	}
+
+	const selection = document.getSelection();
+
+	if (selection && selection.rangeCount != 0) {
+		const selectedRange = selection.getRangeAt(0);
+
+		for (let i in refs) {
+			// 所有输入框
+			if (i.includes("input-")) {
+				if (refs[i]?.contains(selectedRange.commonAncestorContainer)) {
+					const list = refs[i].querySelectorAll(".field") as HTMLElement[];
+
+					// 判断是选中
+					list.forEach((e) => {
+						if (isRangeInsideElement(selectedRange, e)) {
+							e.className = "field active";
+						} else {
+							e.className = "field";
+						}
+					});
+
+					return;
+				}
+			}
+		}
+	}
+}
+
+onMounted(() => {
+	list.value.forEach((e) => {
+		let start = -1;
+		let arr: any[] = [];
+
+		for (let i = 0; i < e.content.length; i++) {
+			let v = e.content[i];
+
+			if (v == "{") {
+				start = i;
+			} else if (v == "}") {
+				const field = e.content.substring(start + 1, i);
+				const param = flow.node?.data?.inputParams?.find((e) => e.field == field);
+
+				if (param) {
+					arr.push(
+						`<div class="field" contenteditable="false" data-field="${field}">${field}</div>`
+					);
+				}
+
+				start = -1;
+			} else {
+				if (start == -1) {
+					arr.push(v);
+				}
+			}
+		}
+
+		e.text = arr.join("");
+	});
+
+	document.addEventListener("selectionchange", onSelectionChange);
+});
+
+onUnmounted(() => {
+	document.removeEventListener("selectionchange", onSelectionChange);
+});
+</script>
+
+<style lang="scss" scoped>
+.form-content {
+	// pointer-events: all;
+	position: relative;
+
+	.list {
+		.item {
+			.head {
+				padding: 5px 10px !important;
+
+				.role {
+					width: 100px;
+				}
+			}
+
+			.content {
+				outline: none;
+				line-height: 1.5;
+				padding: 0 10px;
+				min-height: 50px;
+				user-select: text;
+				white-space: pre-wrap;
+				word-break: break-word;
+				cursor: text;
+
+				:deep(.field) {
+					display: inline-block;
+					border-radius: 4px;
+					padding: 0 4px;
+					margin: 0 2px;
+					font-size: 12px;
+					cursor: pointer;
+					border: 1px solid var(--el-border-color);
+					box-sizing: border-box;
+					user-select: none;
+					color: var(--el-color-primary);
+
+					&:hover,
+					&.active {
+						border-color: var(--el-color-primary);
+					}
+				}
+
+				&.is-empty {
+					color: var(--el-text-color-placeholder);
+					cursor: text;
+
+					&::before {
+						content: "在这里写你的提示词，输入 “/” 插入变量";
+					}
+				}
+			}
+
+			&.error {
+				border-color: var(--el-color-danger) !important;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/nodes/llm/form/model-text.vue b/src/modules/flow/components/nodes/llm/form/model-text.vue
new file mode 100644
index 0000000..7544c5c
--- /dev/null
+++ b/src/modules/flow/components/nodes/llm/form/model-text.vue
@@ -0,0 +1,33 @@
+<template>
+	<div class="form-model-text">
+		<template v-if="data?.params?.model">
+			<span class="supplier">{{ data.supplier }}</span>
+			<el-text>{{ data.params.model }}</el-text>
+		</template>
+
+		<el-text color="info" size="small" v-else>未选择模型</el-text>
+	</div>
+</template>
+
+<script setup lang="ts" name="node-llm-form-model-text">
+import { type PropType } from "vue";
+
+const props = defineProps({
+	data: {
+		type: Object as PropType<LLMData>,
+		default: () => ({})
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.form-model-text {
+	display: flex;
+
+	.supplier {
+		border-right: 1px solid var(--el-border-color);
+		padding-right: 10px;
+		margin-right: 10px;
+	}
+}
+</style>
diff --git a/src/modules/flow/components/nodes/llm/form/model.vue b/src/modules/flow/components/nodes/llm/form/model.vue
new file mode 100644
index 0000000..f9af9e8
--- /dev/null
+++ b/src/modules/flow/components/nodes/llm/form/model.vue
@@ -0,0 +1,382 @@
+<template>
+	<el-popover
+		trigger="click"
+		:teleported="false"
+		:offset="5"
+		popper-class="cl-flow__popper"
+		width="100%"
+		@show="onShow"
+	>
+		<template #reference>
+			<div class="inner-item">
+				<model-text :data="value" />
+			</div>
+		</template>
+
+		<div class="form-model">
+			<div class="model">
+				<p class="title">模型</p>
+
+				<el-popover
+					:ref="setRefs('modelPopover')"
+					trigger="click"
+					:teleported="false"
+					:offset="5"
+					popper-class="cl-flow__popper"
+					:popper-style="{
+						padding: 0
+					}"
+					placement="bottom-end"
+					width="300px"
+				>
+					<template #reference>
+						<div class="inner">
+							<span v-if="value?.params.model">{{ value.params.model }}</span>
+							<span class="placeholder" v-else>选择模型</span>
+
+							<el-icon class="arrow">
+								<arrow-down />
+							</el-icon>
+						</div>
+					</template>
+
+					<div class="search">
+						<el-input
+							placeholder="搜索模型"
+							:prefix-icon="Search"
+							v-model="keyWord"
+							clearable
+						/>
+					</div>
+
+					<el-scrollbar max-height="400px">
+						<div class="list" v-for="(item, index) in list" :key="index">
+							<p class="label">{{ item.title }}</p>
+
+							<div
+								class="item"
+								v-for="m in item.select"
+								:key="m"
+								:class="{
+									'is-check': value.params?.model == m
+								}"
+								@click="model.select(m, item)"
+							>
+								<span>{{ m }}</span>
+
+								<el-icon class="check">
+									<check />
+								</el-icon>
+							</div>
+						</div>
+					</el-scrollbar>
+
+					<div class="empty" v-if="isEmpty(list)">未找到匹配项</div>
+				</el-popover>
+			</div>
+
+			<div class="params" v-if="!isEmpty(value.options)">
+				<p class="title">参数</p>
+
+				<view class="row" v-for="(item, index) in value.options" :key="index">
+					<span class="label">{{ item.title }}</span>
+
+					<el-switch size="small" v-model="item.enable" />
+
+					<el-slider
+						class="slider"
+						v-model="item.value"
+						show-input
+						size="small"
+						:max="item.max || 1"
+						:min="item.min || 0"
+						:step="(item.max || 1) / 10"
+						:show-input-controls="false"
+						v-if="item.type == 'number'"
+					/>
+
+					<el-input
+						class="string"
+						v-model="item.value"
+						clearable
+						size="small"
+						placeholder="请输入"
+						v-else-if="item.type == 'string'"
+					/>
+
+					<el-switch class="boolean" v-model="item.value" v-if="item.type == 'boolean'" />
+				</view>
+			</div>
+		</div>
+	</el-popover>
+</template>
+
+<script setup lang="ts" name="node-llm-form-model">
+import { computed, onMounted, type PropType, reactive, ref, useModel, watch } from "vue";
+import { Search, Check, ArrowDown } from "@element-plus/icons-vue";
+import { useCool } from "/@/cool";
+import { isEmpty } from "lodash-es";
+import ModelText from "./model-text.vue";
+
+const props = defineProps({
+	modelValue: {
+		type: Object as PropType<LLMData>,
+		default: () => ({})
+	}
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const { refs, setRefs, service } = useCool();
+
+// 绑定值
+const value = useModel(props, "modelValue");
+
+// 关键字
+const keyWord = ref("");
+
+// 模型
+const model = reactive({
+	list: [] as LLMItem[],
+
+	get() {
+		service.flow.config.getByNode({ node: "llm" }).then((res) => {
+			model.list = (res as Eps.FlowConfigEntity[]).map((e) => {
+				const d: LLMItem = {
+					options: [],
+					title: e.name!,
+					type: e.type!,
+					id: e.id!,
+					select: []
+				};
+
+				(e.options?.options || []).forEach((e: LLMOption) => {
+					if (e.field == "model") {
+						d.select = e.select!;
+					} else {
+						d.options.push(e);
+					}
+				});
+
+				return d;
+			});
+
+			// 模型名称
+			let name = value.value?.params?.model;
+
+			// 已选中的
+			let item = model.list.find((e) => e.select.includes(name));
+
+			if (item) {
+				item.options.forEach((a) => {
+					const d = value.value.options.find((b) => a.field == b.field);
+
+					if (d) {
+						// 保留之前编辑的数据，其他配置重新加载
+						a.value = d.value;
+						a.enable = d.enable;
+					}
+				});
+			} else {
+				// 未选中，默认第一个
+				item = model.list[0];
+
+				if (item) {
+					name = item.select[0];
+				}
+			}
+
+			if (item) {
+				model.select(name, item);
+			}
+		});
+	},
+
+	select(name: string, item: LLMItem) {
+		if (!name) {
+			return false;
+		}
+
+		// 模型名称
+		value.value.params.model = name;
+
+		// 模型供应商
+		value.value.supplier = item.type;
+
+		// 配置ID
+		value.value.configId = item.id;
+
+		// 设置参数列表
+		value.value.options = item.options.map((e) => {
+			if (e.value === undefined) {
+				if (e.default !== undefined) {
+					e.value = e.default;
+				}
+			}
+
+			return e;
+		});
+
+		// 隐藏弹窗
+		refs.modelPopover?.hide();
+	}
+});
+
+// 模型列表
+const list = computed(() => {
+	return model.list.filter((item) => item.title.includes(keyWord.value));
+});
+
+// 显示后
+function onShow() {
+	model.get();
+}
+
+onMounted(() => {
+	model.get();
+
+	watch(
+		() => value.value.options,
+		(arr) => {
+			arr.forEach((e) => {
+				if (e.enable) {
+					value.value.params[e.field] = e.value;
+				} else {
+					delete value.value.params[e.field];
+				}
+			});
+		},
+		{
+			deep: true
+		}
+	);
+});
+</script>
+
+<style lang="scss" scoped>
+.form-model {
+	padding: 0 5px;
+
+	.title {
+		font-size: 14px;
+		font-weight: bold;
+	}
+
+	.model {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 40px;
+
+		.selector {
+			width: 120px;
+		}
+
+		.inner {
+			display: flex;
+			align-items: center;
+			height: 30px;
+			min-width: 100px;
+			border-radius: 6px;
+			background-color: var(--el-fill-color-light);
+			cursor: pointer;
+			padding: 0 30px 0 10px;
+			font-size: 12px;
+			position: relative;
+
+			.arrow {
+				position: absolute;
+				right: 8px;
+			}
+
+			&:hover {
+				background-color: var(--el-fill-color-lighter);
+			}
+		}
+
+		.search {
+			padding: 5px;
+
+			:deep(.el-input__wrapper) {
+				box-shadow: none;
+				background-color: var(--el-fill-color-light);
+				border-radius: 6px;
+			}
+		}
+
+		.empty {
+			padding: 10px 5px 15px 5px;
+			line-height: 1;
+			font-size: 12px;
+			color: var(--el-text-color-secondary);
+			text-align: center;
+		}
+
+		.list {
+			padding: 0 5px 5px 5px;
+
+			.label {
+				padding: 5px;
+				font-size: 12px;
+				color: var(--el-color-info);
+			}
+
+			.item {
+				display: flex;
+				align-items: center;
+				height: 30px;
+				padding: 0 5px;
+				border-radius: 6px;
+				cursor: pointer;
+				font-size: 13px;
+
+				.check {
+					display: none;
+					margin-left: auto;
+				}
+
+				&.is-check {
+					color: var(--el-color-primary);
+
+					.check {
+						display: inline-block;
+					}
+				}
+
+				&:hover {
+					background-color: var(--el-fill-color-lighter);
+				}
+			}
+		}
+	}
+
+	.params {
+		padding-top: 10px;
+		border-top: 1px solid var(--el-fill-color-light);
+
+		.row {
+			display: flex;
+			align-items: center;
+			padding: 5px 0;
+
+			.label {
+				margin-right: 5px;
+			}
+
+			.slider {
+				margin-left: auto;
+				width: 200px;
+
+				:deep(.el-input-number) {
+					width: 60px;
+				}
+			}
+
+			.string {
+				width: 200px;
+				margin-left: auto;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/nodes/llm/index.ts b/src/modules/flow/components/nodes/llm/index.ts
new file mode 100644
index 0000000..c7b9465
--- /dev/null
+++ b/src/modules/flow/components/nodes/llm/index.ts
@@ -0,0 +1,122 @@
+import type { FlowNode } from "/$/flow/types";
+import component from "./index.vue";
+import FormMessage from "./form/message.vue";
+import FormModel from "./form/model.vue";
+import FormInputParams from "../_base/form/input-params.vue";
+import FormInputNumber from "../_base/form/input-number.vue";
+import FormText from "../_base/form/text.vue";
+
+export default (): FlowNode => {
+	return {
+		group: "AI",
+		label: "LLM",
+		description: "调用大语言模型回答问题",
+		color: "#409eff",
+		component,
+		isDisableDrag: true, // 是否允许拖拽（部分组件跟拖拽事件冲突，需禁用。例：伪富文本dom）
+		form: {
+			items: [
+				{
+					label: "输入变量",
+					prop: "inputParams",
+					component: {
+						vm: FormInputParams,
+						props: {
+							field: "input"
+						}
+					}
+				},
+				{
+					label: "模型",
+					prop: "options.model",
+					component: {
+						vm: FormModel
+					}
+				},
+				{
+					label: "消息",
+					prop: "options.messages",
+					component: {
+						vm: FormMessage
+					}
+				},
+				{
+					prop: "options.history",
+					span: 12,
+					component: {
+						vm: FormInputNumber,
+						props: {
+							prefix: "保存",
+							suffix: "条历史数据"
+						}
+					}
+				},
+				{
+					label: "输出变量",
+					component: {
+						vm: FormText,
+						props: {
+							text: ["text<string> 回复内容"]
+						}
+					}
+				}
+			]
+		},
+		data: {
+			inputParams: [
+				{
+					field: "input"
+				}
+			],
+			outputParams: [
+				{
+					type: "string",
+					field: "text"
+				},
+				{
+					type: "stream",
+					field: "stream"
+				}
+			],
+			options: {
+				model: {
+					options: [],
+					params: {
+						model: ""
+					}
+				},
+				messages: [
+					{
+						role: "system",
+						content: ""
+					},
+					{
+						role: "user",
+						content: ""
+					},
+				] as LLMMessage[],
+				history: 0
+			}
+		},
+		validator(data) {
+			const { model, messages } = data.options;
+
+			// 验证变量是否绑定值
+			const param = data.inputParams?.find((e) => !e.nodeId);
+			if (param) {
+				return `请绑定变量：${param.field}`;
+			}
+
+			// 验证模型是否选择
+			if (!model.params.model) {
+				return "请选择模型";
+			}
+
+			// 验证消息是否填写
+			const msg = messages.find((e: LLMMessage) => !e.content);
+			if (msg) {
+				return `请填写${msg.role}消息`;
+			}
+		}
+	};
+};
diff --git a/src/modules/flow/components/nodes/llm/index.vue b/src/modules/flow/components/nodes/llm/index.vue
new file mode 100644
index 0000000..e63488d
--- /dev/null
+++ b/src/modules/flow/components/nodes/llm/index.vue
@@ -0,0 +1,45 @@
+<template>
+	<div class="node-llm" v-if="!focus">
+		<div class="model">
+			<model-text :data="node.data?.options?.model" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup name="node-llm">
+import type { FlowNode } from "/$/flow/types";
+import { type PropType } from "vue";
+import ModelText from "./form/model-text.vue";
+
+const props = defineProps({
+	node: {
+		type: Object as PropType<FlowNode>,
+		default: () => ({})
+	},
+	// 节点是否聚焦
+	focus: {
+		type: Boolean,
+		default: false
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.node-llm {
+	padding-bottom: 7px;
+
+	.model {
+		display: flex;
+		align-items: center;
+		background-color: var(--el-fill-color-light);
+		padding: 0 10px;
+		border-radius: 6px;
+		height: 33px;
+		font-size: 14px;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		margin-bottom: 8px;
+	}
+}
+</style>
diff --git a/src/modules/flow/components/nodes/llm/types.d.ts b/src/modules/flow/components/nodes/llm/types.d.ts
new file mode 100644
index 0000000..403ab9d
--- /dev/null
+++ b/src/modules/flow/components/nodes/llm/types.d.ts
@@ -0,0 +1,38 @@
+declare interface LLMMessage {
+	role: string;
+	content: string;
+	text?: string;
+	[key: string]: any;
+}
+
+declare interface LLMData {
+	supplier: string;
+	options: LLMOption[];
+	params: {
+		model: string;
+		[key: string]: any;
+	};
+	configId: number;
+}
+
+declare interface LLMItem {
+	id: number;
+	options: LLMOption[];
+	title: string;
+	type: string;
+	select: string[];
+}
+
+declare interface LLMOption {
+	field: string;
+	value?: any;
+	type: "number" | "string" | "boolean";
+	title: string;
+	default?: any;
+	max?: number;
+	min?: number;
+	supports?: string[];
+	select?: string[];
+	status?: boolean;
+	[key: string]: any;
+}
diff --git a/src/modules/flow/components/nodes/parse/index.ts b/src/modules/flow/components/nodes/parse/index.ts
new file mode 100644
index 0000000..0727512
--- /dev/null
+++ b/src/modules/flow/components/nodes/parse/index.ts
@@ -0,0 +1,83 @@
+import type { FlowNode } from "/$/flow/types";
+import component from "./index.vue";
+import FormModel from "../llm/form/model.vue";
+import FormInputParams from "../_base/form/input-params.vue";
+import FormOutputParams from "../_base/form/output-params.vue";
+
+export default (): FlowNode => {
+	return {
+		group: "扩展",
+		label: "智能解析",
+		description: "智能提取内容的关键信息",
+		color: "#fd9d2f",
+		component,
+		form: {
+			items: [
+				{
+					label: "输入变量",
+					prop: "inputParams",
+					component: {
+						vm: FormInputParams,
+						props: {
+							editField: false,
+							disabled: true
+						}
+					}
+				},
+				{
+					label: "模型",
+					prop: "options.model",
+					component: {
+						vm: FormModel
+					}
+				},
+				{
+					label: "输出变量",
+					prop: "outputParams",
+					component: {
+						vm: FormOutputParams,
+						props: {
+							typeInput: true,
+							disabledFields: ["result"]
+						}
+					}
+				}
+			]
+		},
+		data: {
+			options: {
+				model: {
+					options: [],
+					params: {
+						model: ""
+					}
+				}
+			},
+			inputParams: [
+				{
+					field: "text"
+				}
+			],
+			outputParams: [
+				{
+					field: "result",
+					type: "输入结果"
+				}
+			]
+		},
+		validator(data) {
+			const { model } = data.options;
+
+			// 验证变量是否绑定值
+			const param = data.inputParams?.find((e) => !e.nodeId);
+			if (param) {
+				return `请绑定变量：${param.field}`;
+			}
+
+			// 验证模型是否选择
+			if (!model.params.model) {
+				return "请选择模型";
+			}
+		}
+	};
+};
diff --git a/src/modules/flow/components/nodes/parse/index.vue b/src/modules/flow/components/nodes/parse/index.vue
new file mode 100644
index 0000000..cf7dc46
--- /dev/null
+++ b/src/modules/flow/components/nodes/parse/index.vue
@@ -0,0 +1,20 @@
+<template>
+	<div class="node-parse"></div>
+</template>
+
+<script lang="ts" setup name="node-parse">
+import type { FlowNode } from "/$/flow/types";
+import type { PropType } from "vue";
+
+const props = defineProps({
+	node: {
+		type: Object as PropType<FlowNode>,
+		default: () => ({})
+	},
+	// 节点是否聚焦
+	focus: {
+		type: Boolean,
+		default: false
+	}
+});
+</script>
diff --git a/src/modules/flow/components/nodes/start/form/fields.vue b/src/modules/flow/components/nodes/start/form/fields.vue
new file mode 100644
index 0000000..08e4bc2
--- /dev/null
+++ b/src/modules/flow/components/nodes/start/form/fields.vue
@@ -0,0 +1,164 @@
+<template>
+	<div class="form-fields">
+		<cl-svg name="add" class="btn-icon is-rt" @click="open()" />
+
+		<div class="empty" v-if="isEmpty(list)">
+			<el-text size="small">设置的输入可在工作流程中使用，</el-text>
+			<el-text size="small" type="primary" @click="open()">立即添加</el-text>
+		</div>
+
+		<tools-fields v-model="list" @edit="open" />
+	</div>
+
+	<cl-form ref="Form" />
+</template>
+
+<script setup lang="ts" name="node-start-form-fields">
+import type { FlowField } from "/$/flow/types";
+import { setFocus, useForm } from "@cool-vue/crud";
+import { assign, isEmpty } from "lodash-es";
+import { PropType, useModel } from "vue";
+import ToolsFields from "/$/flow/components/tools/fields.vue";
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+	modelValue: Array as PropType<FlowField[]>,
+	scope: null,
+	disabled: Boolean,
+	prop: String,
+	isDisabled: Boolean
+});
+
+const Form = useForm();
+
+const list = useModel(props, "modelValue");
+
+function open(item?: FlowField) {
+	Form.value?.open(
+		{
+			title: "添加变量",
+			width: "500px",
+			dialog: {
+				controls: ["close"]
+			},
+			props: {
+				labelPosition: "top"
+			},
+			form: {
+				...item
+			},
+			items: [
+				{
+					label: "字段类型",
+					prop: "type",
+					value: "text",
+					component: {
+						name: "el-radio-group",
+						options: [
+							{
+								label: "文本",
+								value: "text"
+							},
+							{
+								label: "数字",
+								value: "number"
+							},
+							{
+								label: "图片",
+								value: "image"
+							}
+						]
+					},
+					required: true
+				},
+				{
+					label: "变量名称",
+					prop: "field",
+					component: {
+						name: "el-input",
+						props: {
+							clearable: true,
+							maxlength: 20
+						}
+					},
+					rules: [
+						{
+							required: true,
+							validator(rule, value, callback) {
+								if (isEmpty(value)) {
+									callback(new Error("请输入变量名称"));
+								} else if (!/^[a-zA-Z][a-zA-Z0-9_]*$/.test(value)) {
+									callback(
+										new Error("只能由字母、数字、下划线组成，且以字母开头")
+									);
+								} else {
+									callback();
+								}
+							}
+						}
+					]
+				},
+				{
+					label: "显示名称",
+					prop: "label",
+					component: {
+						name: "el-input",
+						props: {
+							clearable: true,
+							maxlength: 20
+						}
+					},
+					required: true
+				},
+				{
+					label: "必填",
+					prop: "required",
+					value: 1,
+					component: {
+						name: "cl-switch"
+					},
+					required: true
+				}
+			],
+			on: {
+				submit(data, { close, done }) {
+					if (list.value?.find((e) => e.field == data.field)) {
+						if (item?.field != data.field) {
+							done();
+							return ElMessage.warning("变量名称已存在");
+						}
+					}
+
+					if (item) {
+						assign(item, data);
+					} else {
+						list.value?.push(data);
+					}
+
+					close();
+				}
+			}
+		},
+		[setFocus("value")]
+	);
+}
+</script>
+
+<style lang="scss" scoped>
+.form-fields {
+	position: relative;
+
+	.empty {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 50px;
+		background-color: var(--el-fill-color-lighter);
+		border-radius: 6px;
+
+		.el-text:last-child {
+			cursor: pointer;
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/nodes/start/index.ts b/src/modules/flow/components/nodes/start/index.ts
new file mode 100644
index 0000000..cad2abd
--- /dev/null
+++ b/src/modules/flow/components/nodes/start/index.ts
@@ -0,0 +1,42 @@
+import type { FlowNode } from "/$/flow/types";
+import component from "./index.vue";
+import FormFields from "./form/fields.vue";
+import { isEmpty } from "lodash-es";
+
+export default (): FlowNode => {
+	return {
+		label: "开始",
+		description: "开始节点",
+		color: "#409eff",
+		form: {
+			items: [
+				{
+					label: "输入字段",
+					prop: "inputParams",
+					component: {
+						vm: FormFields
+					}
+				}
+			]
+		},
+		data: {
+			inputParams: [
+				{
+					label: "内容",
+					field: "content",
+					type: "text",
+					required: true
+				}
+			]
+		},
+		handle: {
+			target: false
+		},
+		component,
+		validator(data) {
+			if (isEmpty(data.inputParams)) {
+				return "至少要输入一个字段";
+			}
+		}
+	};
+};
diff --git a/src/modules/flow/components/nodes/start/index.vue b/src/modules/flow/components/nodes/start/index.vue
new file mode 100644
index 0000000..5bc8eae
--- /dev/null
+++ b/src/modules/flow/components/nodes/start/index.vue
@@ -0,0 +1,30 @@
+<template>
+	<div class="node-start" v-if="!isEmpty(node?.data?.inputParams) && !focus">
+		<tools-fields v-model="node.data!.inputParams" disabled />
+	</div>
+</template>
+
+<script setup lang="ts" name="node-start">
+import type { FlowNode } from "/$/flow/types";
+import { type PropType } from "vue";
+import ToolsFields from "/$/flow/components/tools/fields.vue";
+import { isEmpty } from "lodash-es";
+
+defineProps({
+	node: {
+		type: Object as PropType<FlowNode>,
+		default: () => ({})
+	},
+	// 节点是否聚焦
+	focus: {
+		type: Boolean,
+		default: false
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.node-start {
+	padding-bottom: 15px;
+}
+</style>
diff --git a/src/modules/flow/components/nodes/variable/index.ts b/src/modules/flow/components/nodes/variable/index.ts
new file mode 100644
index 0000000..0611c6e
--- /dev/null
+++ b/src/modules/flow/components/nodes/variable/index.ts
@@ -0,0 +1,71 @@
+import type { FlowNode } from "/$/flow/types";
+import component from "./index.vue";
+import { isEmpty } from "lodash-es";
+import FormInputParams from "../_base/form/input-params.vue";
+import FormOutputParams from "../_base/form/output-params.vue";
+import CodeEditor from "../code/editor/index.vue";
+import { Snippet } from "../code/shippets";
+
+export default (): FlowNode => {
+	return {
+		group: "行为",
+		label: "变量",
+		description: "变量转换或赋值",
+		color: "#67c23a",
+		form: {
+			width: "500px",
+			items: [
+				{
+					label: "输入变量",
+					prop: "inputParams",
+					component: {
+						vm: FormInputParams,
+						props: {
+							varInputable: true
+						}
+					}
+				},
+				{
+					label: "代码编辑",
+					prop: "options.code",
+					component: {
+						vm: CodeEditor
+					}
+				},
+				{
+					label: "输出变量",
+					prop: "outputParams",
+					component: {
+						vm: FormOutputParams
+					}
+				}
+			]
+		},
+		data: {
+			options: {
+				code: Snippet.simple || Snippet.base
+			},
+			inputParams: [
+				{
+					field: "arg1"
+				}
+			],
+			outputParams: [
+				{
+					field: "string"
+				}
+			]
+		},
+		component,
+		validator(data) {
+			if (isEmpty(data.inputParams)) {
+				return "至少要输入一个字段";
+			}
+
+			const param = data.inputParams?.find((e) => !e.value && !e.nodeId);
+			if (param) {
+				return `请绑定变量或填写内容：${param.field}`;
+			}
+		}
+	};
+};
diff --git a/src/modules/flow/components/nodes/variable/index.vue b/src/modules/flow/components/nodes/variable/index.vue
new file mode 100644
index 0000000..fb2db7e
--- /dev/null
+++ b/src/modules/flow/components/nodes/variable/index.vue
@@ -0,0 +1,15 @@
+<template>
+	<div class="node-variable"></div>
+</template>
+
+<script setup lang="ts" name="node-variable">
+import type { FlowNode } from "/$/flow/types";
+import { type PropType } from "vue";
+
+defineProps({
+	node: {
+		type: Object as PropType<FlowNode>,
+		default: () => ({})
+	}
+});
+</script>
diff --git a/src/modules/flow/components/tools/card.vue b/src/modules/flow/components/tools/card.vue
new file mode 100644
index 0000000..44d583c
--- /dev/null
+++ b/src/modules/flow/components/tools/card.vue
@@ -0,0 +1,509 @@
+<template>
+	<div
+		class="tools-card"
+		:class="[
+			`is-${result.status}`,
+			{
+				'is-active': isActive,
+				'is-moving': node.isMoving
+			}
+		]"
+	>
+		<!-- 源选择点 -->
+		<tools-handle
+			type="source"
+			id="source"
+			:node-id="nodeId"
+			:position="{
+				right: '-9px',
+				top: '14px'
+			}"
+			v-if="node?.handle?.source ?? true"
+		/>
+
+		<!-- 目标选择点 -->
+		<tools-handle
+			type="target"
+			id="target"
+			:node-id="nodeId"
+			:position="{
+				left: '-9px',
+				top: '14px'
+			}"
+			v-if="node?.handle?.target ?? true"
+		/>
+
+		<div class="head">
+			<tools-icon :name="node?.icon" :color="node?.color" />
+
+			<el-input
+				v-if="isActive"
+				class="label"
+				v-model="flow.node!.label"
+				placeholder="标题"
+			/>
+			<span v-else>{{ node?.label }}</span>
+
+			<div class="btns" @click.stop>
+				<template v-if="!isStart">
+					<!-- <tools-nodes :node="node" is-change>
+						<cl-svg name="change" />
+					</tools-nodes> -->
+
+					<el-tooltip content="调试" placement="top" v-if="isRun && isActive">
+						<cl-svg class="btn-icon is-bg" name="run" @click="run" />
+					</el-tooltip>
+
+					<el-tooltip content="删除" placement="top">
+						<cl-svg
+							name="delete"
+							:style="{
+								marginLeft: 'auto'
+							}"
+							@click="remove"
+						/>
+					</el-tooltip>
+
+					<!-- <el-tooltip content="关闭" placement="top">
+						<cl-svg
+							v-if="isActive"
+							class="btn-icon is-bg"
+							name="close"
+							@click.stop="close"
+						/>
+					</el-tooltip> -->
+				</template>
+
+				<!-- <el-tooltip :content="node?.description" placement="top">
+					<cl-svg name="info" />
+				</el-tooltip> -->
+
+				<tools-more :node="node">
+					<cl-svg name="more" />
+				</tools-more>
+			</div>
+		</div>
+
+		<div class="desc">
+			<el-input
+				v-if="isActive"
+				v-model="flow.node!.desc"
+				:placeholder="node?.description"
+				clearable
+			/>
+			<span class="text" v-else>{{ node?.desc || node?.description }}</span>
+		</div>
+
+		<div class="container">
+			<component :is="component()" :node="node" :focus="isActive" />
+			<card-form :ref="setRefs('form')" v-if="isActive" />
+		</div>
+
+		<div class="tips" v-if="result.status !== 'none'">
+			<el-icon class="is-loading" v-if="result.status == 'running'">
+				<loading />
+			</el-icon>
+			<span>{{ result.message }}</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="tools-card">
+import CardForm from "./card/form.vue";
+import { useFlow } from "/$/flow/hooks";
+import { computed, onMounted, onUnmounted, reactive, watch } from "vue";
+import ToolsIcon from "./icon.vue";
+import ToolsHandle from "./handle.vue";
+import ToolsMore from "./more.vue";
+import { useCool } from "/@/cool";
+import { Loading } from "@element-plus/icons-vue";
+import type { FlowNode, FlowNodeResult } from "/$/flow/types";
+import { nextTick } from "vue";
+
+const props = defineProps({
+	nodeId: String
+});
+
+const { mitt, refs, setRefs } = useCool();
+const flow = useFlow();
+
+// 是否可调试
+const isRun = computed(() => {
+	return flow.node ? !["start", "end"].includes(flow.node.type!) : false;
+});
+
+// 最小宽
+const width = computed(() => {
+	return flow.node?.form?.width || "400px";
+});
+
+// 节点数据
+const node = computed(() => {
+	return flow.findNode(props.nodeId!);
+});
+
+// 是否开始节点
+const isStart = computed(() => {
+	return node.value?.type == "start";
+});
+
+// 是否激活
+const isActive = computed(() => {
+	return node.value?.id == flow.node?.id;
+});
+
+// 节点组件
+function component() {
+	return flow.CustomNodes.find((e) => e.type == node.value?.type)?.component;
+}
+
+// 调试
+function run() {
+	mitt.emit("flow.runOpen", flow.node);
+}
+
+// 移除节点
+function remove() {
+	flow.removeNodes(node.value);
+}
+
+// 关闭表单
+function close() {
+	flow.enableDrag();
+	flow.clearNode();
+}
+
+// 获取颜色值
+function getColor(color: string) {
+	return getComputedStyle(document.documentElement).getPropertyValue(`--el-color-${color}`);
+}
+
+// 节点运行结果
+const result = reactive({
+	status: "none" as "none" | "running" | "waiting" | "success" | "fail",
+	message: "",
+	clear() {
+		result.status = "none";
+		result.message = "";
+		result.updateEdge({ animated: false, style: {} });
+	},
+	check() {
+		result.clear();
+	},
+	ready(_, node?: FlowNode) {
+		function done() {
+			result.status = "waiting";
+			result.message = "等待中...";
+		}
+
+		if (node) {
+			if (props.nodeId == node.id) {
+				done();
+			}
+		} else {
+			const startNode = flow.findNodeByType("start");
+
+			if (startNode) {
+				const childrens = flow.childrenAllNodes(startNode.id!);
+
+				if (childrens.find((e) => e.id == props.nodeId) || startNode.id == props.nodeId) {
+					done();
+
+					result.updateEdge({
+						animated: true,
+						style: {
+							stroke: getColor("info")
+						}
+					});
+				}
+			}
+		}
+	},
+	start(nodeId: string) {
+		if (nodeId == props.nodeId) {
+			flow.setViewportByNode(flow.findNode(nodeId));
+
+			result.status = "running";
+			result.message = "运行中...";
+
+			result.updateEdge({
+				style: {
+					stroke: getColor("primary")
+				}
+			});
+		}
+	},
+	result(res: FlowNodeResult, node?: FlowNode) {
+		const nodeId = node?.id || res.nodeId;
+
+		if (nodeId == props.nodeId) {
+			// 设置节点状态
+			if (res.result.success) {
+				const duration = parseFloat(((res.duration || 1) / 1000).toFixed(3));
+
+				result.status = "success";
+				result.message = `执行成功，耗时：${duration}s`;
+
+				// 下一个准备
+				if (!node) {
+					if (res.nextNodeId != nodeId) {
+						mitt.emit("flow.run", { action: "start", data: res.nextNodeId });
+					}
+				}
+			} else {
+				result.status = "fail";
+				result.message = res.result.error.message;
+
+				// 设置视角
+				flow.setViewportByNode(flow.findNode(res.nodeId!));
+			}
+
+			// 非单节点需要控制线的样式
+			if (!node) {
+				// 更新线颜色、动画
+				result.updateEdge({
+					animated: true,
+					style: {
+						stroke: res.result.success ? getColor("success") : getColor("danger")
+					}
+				});
+			}
+		}
+	},
+	fail({ nodeId, message }: { nodeId: string; message: string }) {
+		if (props.nodeId == nodeId) {
+			result.status = "fail";
+			result.message = message;
+			flow.setViewportByNode(flow.findNode(nodeId));
+		}
+	},
+	end() {
+		if (["waiting", "running"].includes(result.status)) {
+			result.close();
+		}
+	},
+	close() {
+		result.clear();
+	},
+	updateEdge(data: any) {
+		const edge = flow.edges.find((e) => e.target == props.nodeId);
+
+		if (edge) {
+			flow.updateEdge(edge.id, data);
+		}
+	},
+	onRun({ action, data, node }: { action: string; data: any; node?: FlowNode }) {
+		result[action](data, node);
+	}
+});
+
+// 打开表单
+async function openForm(data: FlowNode) {
+	nextTick(() => {
+		if (data) {
+			if (data.id == props.nodeId) {
+				refs.form?.open();
+			}
+		}
+	});
+}
+
+// 关闭表单
+function closeForm(data: FlowNode) {
+	nextTick(() => {
+		if (data?.id == props.nodeId) {
+			refs.form?.close();
+		}
+	});
+}
+
+onMounted(() => {
+	mitt.on("flow.openForm", openForm);
+	mitt.on("flow.closeForm", closeForm);
+	mitt.on("flow.run", result.onRun);
+	mitt.on("flow.runClose", result.close);
+});
+
+onUnmounted(() => {
+	mitt.off("flow.openForm", openForm);
+	mitt.off("flow.closeForm", closeForm);
+	mitt.off("flow.run", result.onRun);
+	mitt.off("flow.runClose", result.close);
+});
+</script>
+
+<style lang="scss" scoped>
+.tools-card {
+	border-radius: 12px;
+	background-color: var(--el-bg-color);
+	width: 300px;
+	position: relative;
+	border: 2px solid var(--el-fill-color-light);
+	box-sizing: border-box;
+	transition: all 0.2s;
+
+	.btns {
+		display: none;
+		align-items: center;
+		justify-content: space-between;
+		position: absolute;
+		top: 8px;
+		right: 10px;
+		box-sizing: border-box;
+		// border: 1px solid var(--el-fill-color-light);
+		background-color: var(--el-bg-color);
+		border-radius: 6px;
+		font-size: 12px;
+		padding: 3px;
+		box-sizing: border-box;
+
+		.cl-svg {
+			color: var(--el-text-color-regular);
+			cursor: pointer;
+			border-radius: 4px;
+			height: 15px;
+			width: 15px;
+			padding: 4px;
+
+			&:hover,
+			&:focus {
+				background-color: var(--el-fill-color-light);
+			}
+
+			&:focus {
+				outline: none;
+			}
+		}
+
+		&:has(.cl-svg:focus) {
+			display: flex;
+		}
+	}
+
+	.head {
+		display: flex;
+		align-items: center;
+		padding: 0 15px;
+		height: 44px;
+
+		.icon {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 20px;
+			width: 20px;
+			border-radius: 4px;
+			background-color: var(--el-color-primary);
+			color: #fff;
+		}
+
+		span {
+			font-size: 14px;
+			font-weight: bold;
+			margin-left: 10px;
+			line-height: 1;
+		}
+
+		:deep(.el-input__wrapper) {
+			box-shadow: none;
+			padding: 0 5px;
+
+			.el-input__inner {
+				font-weight: bold;
+				padding: 0 5px;
+				border-radius: 4px;
+
+				&:hover {
+					background-color: var(--el-fill-color-lighter);
+				}
+			}
+		}
+	}
+
+	.container {
+		padding: 0 15px;
+	}
+
+	.desc {
+		padding: 0 15px 15px 15px;
+		font-size: 12px;
+		color: var(--el-color-info);
+		word-break: break-all;
+
+		:deep(.el-input__wrapper) {
+			box-shadow: none;
+			font-size: 12px;
+			background-color: var(--el-fill-color-lighter);
+			border-radius: var(--el-border-radius-base);
+		}
+	}
+
+	.tips {
+		padding: 0 15px 15px 15px;
+		font-size: 12px;
+
+		.is-loading {
+			font-size: 14px;
+			position: relative;
+			top: 2px;
+			margin-right: 3px;
+		}
+	}
+
+	&:hover {
+		box-shadow:
+			0px 4px 6px -2px rgba(16, 24, 40, 0.03),
+			0px 12px 16px -4px rgba(16, 24, 40, 0.08);
+
+		.btns {
+			display: flex;
+		}
+	}
+
+	&.is-active {
+		width: calc(v-bind("width") + 30px);
+		border-color: var(--el-color-primary);
+	}
+
+	&.is-waiting,
+	&.is-running {
+		border-color: var(--el-color-info);
+
+		.tips {
+			color: var(--el-color-info);
+		}
+	}
+
+	&.is-running {
+		border-color: var(--el-color-primary);
+
+		.tips {
+			color: var(--el-color-primary);
+		}
+	}
+
+	&.is-fail {
+		border-color: var(--el-color-danger);
+
+		.tips {
+			color: var(--el-color-danger);
+		}
+
+		:deep(.rod) {
+			color: var(--el-color-danger);
+		}
+	}
+
+	&.is-success {
+		border-color: var(--el-color-success);
+
+		.tips {
+			color: var(--el-color-success);
+		}
+
+		:deep(.rod) {
+			color: var(--el-color-success);
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/tools/card/form.vue b/src/modules/flow/components/tools/card/form.vue
new file mode 100644
index 0000000..e97fb21
--- /dev/null
+++ b/src/modules/flow/components/tools/card/form.vue
@@ -0,0 +1,458 @@
+<template>
+	<div class="tools-card-form nodrag" v-if="visible && flow.node">
+		<div class="form">
+			<cl-form inner ref="Form">
+				<template #slot-next>
+					<div class="next-step">
+						<el-text size="small" type="info"> 添加此工作流程中的下一个节点 </el-text>
+
+						<div class="link">
+							<div
+								class="item"
+								:class="{
+									active: !!item.node
+								}"
+								v-for="(item, index) in nextNodes"
+								:key="index"
+							>
+								<div class="a" v-if="index == 0">
+									<tools-icon :name="flow.node?.icon" :color="flow.node?.color" />
+								</div>
+
+								<div class="b" @click="next(item.node)" v-if="item.node">
+									<tools-icon :name="item.node?.icon" :color="item.node?.color" />
+									<el-text size="small">{{ item.node?.label }}</el-text>
+								</div>
+
+								<tools-nodes :node="flow.node" :handle="item.value" v-else>
+									<div class="b">
+										<tools-icon name="add" />
+										<el-text size="small">选择下一个节点</el-text>
+									</div>
+								</tools-nodes>
+
+								<span class="name" v-if="item.label">{{ item.label }}</span>
+							</div>
+						</div>
+					</div>
+				</template>
+			</cl-form>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="tools-card-form">
+import { useForm } from "@cool-vue/crud";
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { useCool } from "/@/cool";
+import { useFlow } from "/$/flow/hooks";
+import type { FlowNode } from "/$/flow/types";
+import { setFocus } from "@cool-vue/crud";
+import { cloneDeep, assign } from "lodash-es";
+import ToolsIcon from "./../icon.vue";
+import ToolsNodes from "./../nodes.vue";
+
+const { mitt } = useCool();
+const Form = useForm();
+const flow = useFlow();
+
+// 是否可见
+const visible = ref(false);
+
+// 最小宽
+const minWidth = computed(() => {
+	return flow.node?.form?.width || "400px";
+});
+
+// 下一个节点
+const nextNodes = computed(() => {
+	const list = flow.node?.handle?.next || [{ label: "", value: "" }];
+
+	return list.map((h) => {
+		const edge = flow.edges.find(
+			(e) => e.source == flow.node?.id && (h.value ? e.sourceHandle == h.value : true)
+		);
+
+		return {
+			...h,
+			node: edge ? flow.findNode(edge.target!) : null
+		};
+	});
+});
+
+// 打开表单
+function open() {
+	visible.value = true;
+
+	// 禁用拖拽
+	// if (flow.node?.isDisableDrag === true) {
+	// 	flow.disabledDrag();
+	// }
+
+	nextTick(() => {
+		const { focus, items } = flow.node?.form || {};
+
+		Form.value?.open(
+			{
+				props: {
+					labelPosition: "top"
+				},
+				form: flow.node?.data || {},
+				items: [...(items || [])],
+				op: {
+					hidden: true
+				}
+			},
+			[setFocus(focus || items?.[0]?.prop)]
+		);
+	});
+}
+
+// 关闭表单
+function close() {
+	visible.value = false;
+	flow.enableDrag();
+}
+
+// 下一步
+function next(node: FlowNode) {
+	flow.setNode(node);
+	open();
+}
+
+// 更新表单值
+function update(data: any) {
+	assign(Form.value?.form, data);
+}
+
+onMounted(() => {
+	// 弥补没有node删除事件，监听长度判断
+	watch(
+		() => flow.nodes.length,
+		() => {
+			if (flow.node) {
+				if (!flow.findNode(flow.node.id!)) {
+					close();
+				}
+			}
+		}
+	);
+
+	// 监听表单值改变
+	watch(
+		() => Form.value?.form,
+		(val) => {
+			const d = cloneDeep(val);
+			Form.value?.invokeData(d);
+			assign(flow.node?.data, d);
+		},
+		{
+			deep: true
+		}
+	);
+
+	mitt.on("flow.updateForm", update);
+	mitt.on("flow.run", close);
+});
+
+onUnmounted(() => {
+	mitt.off("flow.updateForm", update);
+	mitt.off("flow.run", close);
+});
+
+defineExpose({
+	open,
+	close
+});
+</script>
+
+<style lang="scss" scoped>
+.tools-card-form {
+	width: v-bind(minWidth);
+	max-width: 800px;
+	border-radius: 12px;
+
+	.head {
+		display: flex;
+		align-items: center;
+		padding: 10px 15px;
+
+		.label {
+			flex: 1;
+
+			:deep(.el-input__wrapper) {
+				box-shadow: none;
+				padding: 0 5px;
+
+				.el-input__inner {
+					font-weight: bold;
+					padding: 0 5px;
+					border-radius: 4px;
+
+					&:hover {
+						background-color: var(--el-fill-color-lighter);
+					}
+				}
+			}
+		}
+
+		.btns {
+			display: flex;
+			align-items: center;
+
+			.btn-icon {
+				margin-left: 6px;
+			}
+		}
+	}
+
+	.desc {
+		border-bottom: 1px solid var(--el-border-color-lighter);
+		padding: 0 5px 7px 5px;
+
+		:deep(.el-input__wrapper) {
+			box-shadow: none;
+			font-size: 12px;
+		}
+	}
+
+	.form {
+		height: calc(100% - 88px);
+
+		.cl-form {
+			:deep(.cl-form-card) {
+				.cl-form-card__header {
+					background-color: transparent;
+					padding: 0;
+					font-weight: normal;
+					color: var(--el-text-color-primary);
+				}
+			}
+		}
+
+		.next-step {
+			line-height: normal;
+
+			.link {
+				margin-top: 10px;
+
+				.item {
+					display: flex;
+					align-items: center;
+					position: relative;
+					margin-bottom: 10px;
+
+					.a,
+					.b {
+						height: 35px;
+						width: 35px;
+						border: 1px solid var(--el-border-color);
+						border-radius: 6px;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						cursor: pointer;
+						background-color: var(--el-bg-color);
+						box-sizing: border-box;
+					}
+
+					.a {
+						position: absolute;
+						left: 0;
+						top: 0;
+						z-index: 9;
+						border-color: var(--el-color-primary);
+					}
+
+					.b {
+						flex: 1;
+						justify-content: flex-start;
+						margin-left: 62px;
+						padding-left: 10px;
+
+						.el-text {
+							margin-left: 10px;
+						}
+					}
+
+					.name {
+						display: flex;
+						align-items: center;
+						position: absolute;
+						right: 0;
+						top: 0;
+						height: 35px;
+						font-size: 12px;
+						padding: 0 10px;
+						box-sizing: border-box;
+						border-left: 1px solid var(--el-border-color);
+						color: var(--el-text-color-regular);
+					}
+
+					&:last-child {
+						margin-bottom: 0;
+					}
+
+					&::after {
+						content: "";
+						display: block;
+						height: 44px;
+						width: 44px;
+						position: absolute;
+						left: 18px;
+						bottom: 18px;
+						border: 1px solid var(--el-border-color);
+						border-top: 0;
+						border-right: 0;
+					}
+
+					&:first-child::after {
+						border-left: 0;
+					}
+
+					&:last-child::after {
+						border-radius: 0 0 0 6px;
+					}
+
+					&.active {
+						.name {
+							color: var(--el-color-primary);
+						}
+
+						.name,
+						&::after {
+							border-color: var(--el-color-primary);
+						}
+
+						.b {
+							border-color: var(--el-color-primary);
+
+							.el-text {
+								color: var(--el-color-primary);
+							}
+						}
+					}
+
+					&:not(.active) .b:hover {
+						background-color: var(--el-fill-color-lighter);
+					}
+				}
+			}
+		}
+	}
+
+	// 新增样式
+	// & > div[class^="tools-card"] {
+	// 	position: relative;
+	// 	background-color: var(--el-bg-color);
+	// 	height: 100%;
+	// 	border-radius: 10px;
+	// 	box-sizing: border-box;
+	// 	box-shadow: 0px 0 10px 1px rgba(16, 24, 40, 0.05);
+	// 	margin-left: 10px;
+
+	:deep(.inner-item) {
+		display: flex;
+		align-items: center;
+		border: 1px solid var(--el-border-color);
+		border-radius: var(--el-border-radius-base);
+		padding: 0 10px;
+		cursor: pointer;
+		height: 32px;
+		width: 100%;
+		position: relative;
+		transition: all 0.2s;
+		box-sizing: border-box;
+
+		.text {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			padding-right: 20px;
+		}
+
+		.placeholder {
+			color: var(--el-text-color-placeholder);
+			font-size: 14px;
+		}
+
+		.close {
+			position: absolute;
+			right: 6px;
+			display: none;
+			font-size: 12px !important;
+			color: var(--el-color-info);
+		}
+
+		&:hover {
+			border-color: var(--el-border-color-hover);
+
+			.close {
+				display: block;
+			}
+		}
+	}
+
+	:deep(.textarea-item) {
+		border: 1px solid var(--el-border-color);
+		padding: 0 0 8px 0;
+		border-radius: 8px;
+		margin-bottom: 10px;
+
+		.el-textarea__inner {
+			background-color: transparent;
+			box-shadow: none;
+			padding: 0 10px;
+		}
+
+		.head {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 10px;
+			height: 30px;
+			line-height: normal;
+
+			span {
+				font-size: 12px;
+				color: var(--el-color-info);
+			}
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	:deep(.btn-icon) {
+		color: var(--el-text-color-regular);
+		cursor: pointer;
+		border-radius: 6px;
+		font-size: 14px;
+		padding: 4px;
+		flex-shrink: 0;
+		outline: none;
+
+		&:focus,
+		&:hover {
+			background-color: var(--el-fill-color-light);
+			color: var(--el-text-color-primary);
+		}
+
+		&.is-rt {
+			position: absolute;
+			top: -30px;
+			right: 0;
+		}
+
+		&.is-bg {
+			background-color: var(--el-fill-color-lighter);
+
+			&:hover {
+				color: var(--el-color-primary) !important;
+			}
+		}
+	}
+	// }
+}
+</style>
diff --git a/src/modules/flow/components/tools/connection-line.vue b/src/modules/flow/components/tools/connection-line.vue
new file mode 100644
index 0000000..e5c01a3
--- /dev/null
+++ b/src/modules/flow/components/tools/connection-line.vue
@@ -0,0 +1,41 @@
+<template>
+	<g>
+		<path
+			class="vue-flow__connection animated"
+			fill="none"
+			stroke="#6F3381"
+			:stroke-width="1.5"
+			:d="`M${sourceX},${sourceY} C ${sourceX} ${targetY} ${sourceX} ${targetY} ${targetX},${targetY}`"
+		/>
+
+		<circle
+			:cx="targetX"
+			:cy="targetY"
+			fill="#fff"
+			:r="4"
+			stroke="#6F3381"
+			:stroke-width="1.5"
+		/>
+	</g>
+</template>
+
+<script setup lang="ts" name="tools-connection-line">
+defineProps({
+	sourceX: {
+		type: Number,
+		required: true
+	},
+	sourceY: {
+		type: Number,
+		required: true
+	},
+	targetX: {
+		type: Number,
+		required: true
+	},
+	targetY: {
+		type: Number,
+		required: true
+	}
+});
+</script>
diff --git a/src/modules/flow/components/tools/context-menu.vue b/src/modules/flow/components/tools/context-menu.vue
new file mode 100644
index 0000000..7b23e4e
--- /dev/null
+++ b/src/modules/flow/components/tools/context-menu.vue
@@ -0,0 +1,190 @@
+<template>
+	<cl-context-menu ref="PaneContextMenu" />
+</template>
+
+<script setup lang="tsx" name="tools-context-menu">
+import { defineComponent, ref } from "vue";
+import {
+	CopyDocument,
+	Grid,
+	Delete,
+	DocumentCopy,
+	Plus,
+	CaretRight
+} from "@element-plus/icons-vue";
+import { useFlow } from "../../hooks";
+import { NodeMouseEvent } from "@vue-flow/core";
+import { ElMessageBox } from "element-plus";
+import { ContextMenu } from "@cool-vue/crud";
+import ToolsNodes from "./nodes.vue";
+import { useCool } from "/@/cool";
+
+const { mitt } = useCool();
+const flow = useFlow();
+
+// 右键菜单
+const PaneContextMenu = ref<ClContextMenu.Ref>();
+
+// 节点添加图标
+const PlusIcon = defineComponent({
+	components: {
+		Plus,
+		ToolsNodes
+	},
+
+	setup() {
+		return () => {
+			return (
+				<div>
+					<plus />
+
+					<tools-nodes is-auto-insert onHide={close}>
+						<span class="cl-flow__context-menu-btn"></span>
+					</tools-nodes>
+				</div>
+			);
+		};
+	}
+});
+
+// 关闭右键菜单
+let closeContextMenu: () => void;
+
+function close() {
+	PaneContextMenu.value?.close();
+	closeContextMenu?.();
+}
+
+// 右键菜单
+function onPane(e: MouseEvent) {
+	PaneContextMenu.value?.open(e, {
+		class: "cl-flow__context-menu",
+		list: [
+			{
+				label: "粘贴到这里",
+				suffixIcon: CopyDocument,
+				hidden: !flow.copyData,
+				callback(done) {
+					if (flow.copyData) {
+						const { zoom, x, y } = flow.viewport;
+
+						const node = flow.addNode(flow.copyData.type!, {
+							...flow.copyData,
+							position: {
+								x: (e.layerX - x) / zoom,
+								y: (e.layerY - y) / zoom
+							}
+						});
+
+						flow.setCopyNode(null);
+						flow.setNode(node);
+						flow.setViewportByNode(node);
+					}
+
+					done();
+				}
+			},
+			{
+				label: "运行",
+				suffixIcon: CaretRight,
+				callback(done) {
+					mitt.emit("flow.runOpen");
+					done();
+				}
+			},
+			{
+				label: "添加节点",
+				suffixIcon: PlusIcon,
+				callback() {
+					// @ts-ignore
+					document.querySelector(".cl-flow__context-menu-btn")?.click();
+				}
+			},
+			{
+				label: "整理节点",
+				suffixIcon: Grid,
+				callback(done) {
+					flow.arrange();
+					done();
+				}
+			},
+			{
+				label: "清空节点",
+				suffixIcon: Delete,
+				callback(done) {
+					ElMessageBox.confirm("请确认是否清空所有节点？", "提示", {
+						type: "warning"
+					})
+						.then(() => {
+							flow.clear();
+						})
+						.catch(() => null);
+
+					done();
+				}
+			}
+		]
+	});
+
+	e.stopPropagation();
+	e.preventDefault();
+}
+
+// 节点右键菜单
+function onNode({ event, node }: NodeMouseEvent) {
+	const e = event as MouseEvent;
+
+	const { close } = ContextMenu.open(e, {
+		class: "cl-flow__context-menu",
+		list: [
+			{
+				label: "复制",
+				suffixIcon: DocumentCopy,
+				hidden: node.type == "start",
+				callback(done) {
+					flow.setCopyNode(node);
+					done();
+				}
+			},
+			{
+				label: "删除",
+				suffixIcon: Delete,
+				hidden: node.type == "start",
+				callback(done) {
+					flow.removeNodes(node);
+					done();
+				}
+			}
+		]
+	});
+
+	closeContextMenu = close;
+
+	e.stopPropagation();
+	e.preventDefault();
+}
+
+defineExpose({
+	onPane,
+	onNode,
+	close
+});
+</script>
+
+<style lang="scss">
+.cl-flow__context-menu {
+	border-radius: 8px;
+	padding: 0 5px;
+
+	& > div {
+		border-radius: 6px;
+		height: 30px;
+		font-size: 12px;
+		padding: 0 10px;
+
+		&:hover {
+			background-color: var(--el-fill-color-light);
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/tools/controls.vue b/src/modules/flow/components/tools/controls.vue
new file mode 100644
index 0000000..0e19fda
--- /dev/null
+++ b/src/modules/flow/components/tools/controls.vue
@@ -0,0 +1,224 @@
+<template>
+	<div class="tools-controls">
+		<el-popover
+			trigger="click"
+			width="100px"
+			placement="top-start"
+			popper-class="cl-flow__popper"
+			:popper-style="{
+				minWidth: '100px'
+			}"
+			:offset="5"
+			:teleported="false"
+		>
+			<template #reference>
+				<div class="zoom-op">
+					<cl-svg name="reduce-btn-fill" @click.stop="vueFlow.zoomOut()" />
+
+					<span class="val">{{ zoom }}%</span>
+
+					<cl-svg name="add-btn-fill" @click.stop="vueFlow.zoomIn()" />
+				</div>
+			</template>
+
+			<div class="list">
+				<div
+					class="item"
+					v-for="item in ratio"
+					:key="item.value"
+					@click="vueFlow.zoomTo(item.value)"
+				>
+					{{ item.label }}
+				</div>
+				<div class="item" @click="zoomFit">自适应</div>
+			</div>
+		</el-popover>
+
+		<div class="hr"></div>
+
+		<div class="btn-op">
+			<el-tooltip content="指针模式">
+				<cl-svg
+					name="pointer"
+					:class="{
+						active: flow.controlMode == 'pointer'
+					}"
+					@click="toPointer"
+				/>
+			</el-tooltip>
+
+			<el-tooltip content="手模式">
+				<cl-svg
+					name="hand"
+					:class="{
+						active: flow.controlMode == 'hand'
+					}"
+					@click="toHand"
+				/>
+			</el-tooltip>
+
+			<el-tooltip content="整理节点">
+				<cl-svg name="arrange" @click="toArrange" />
+			</el-tooltip>
+
+			<el-tooltip content="节点定位">
+				<cl-svg name="center" @click="toCenter" />
+			</el-tooltip>
+		</div>
+
+		<div class="hr"></div>
+
+		<tools-history />
+	</div>
+</template>
+
+<script setup lang="ts" name="tools-controls">
+import { useVueFlow } from "@vue-flow/core";
+import { computed } from "vue";
+import { useCool } from "/@/cool";
+import { useFlow } from "../../hooks";
+import ToolsHistory from "./history.vue";
+
+const vueFlow = useVueFlow();
+const flow = useFlow();
+const { mitt } = useCool();
+
+const zoom = computed(() => {
+	return Math.ceil(flow.viewport.zoom * 100 || 100);
+});
+
+// 缩放比例列表
+const ratio = [
+	{
+		label: "200%",
+		value: 2
+	},
+	{
+		label: "150%",
+		value: 1.5
+	},
+	{
+		label: "100%",
+		value: 1
+	},
+	{
+		label: "75%",
+		value: 0.75
+	},
+	{
+		label: "50%",
+		value: 0.5
+	},
+	{
+		label: "25%",
+		value: 0.25
+	}
+];
+
+// 指针模式
+function toPointer() {
+	flow.setControlMode("pointer");
+}
+
+// 拖拽模式
+function toHand() {
+	flow.setControlMode("hand");
+}
+
+// 自适应
+function zoomFit() {
+	vueFlow.fitView();
+}
+
+// 对齐
+function toArrange() {
+	flow.arrange();
+
+	// 关闭展开的弹窗
+	mitt.emit("flow.closeForm");
+}
+
+// 定位
+function toCenter() {
+	flow.setViewportByNode(flow.node!);
+}
+</script>
+
+<style lang="scss" scoped>
+.tools-controls {
+	display: flex;
+	align-items: center;
+	position: absolute;
+	bottom: 10px;
+	right: 10px;
+	z-index: 9;
+	border-radius: 6px;
+	background-color: var(--el-bg-color);
+	box-shadow: 0px 0 6px 1px rgba(16, 24, 40, 0.08);
+	padding: 0 3px;
+
+	.hr {
+		height: 10px;
+		width: 1px;
+		background-color: var(--el-border-color-light);
+		margin: 0 5px;
+	}
+
+	:deep(.cl-svg) {
+		border-radius: 6px;
+		height: 16px;
+		width: 16px;
+		padding: 4px;
+		color: var(--el-color-info-dark-2);
+
+		&:focus,
+		&:hover {
+			color: var(--el-color-primary);
+			background-color: var(--el-fill-color);
+		}
+
+		&:focus {
+			outline: none;
+		}
+
+		&.active {
+			color: var(--el-color-primary);
+		}
+	}
+
+	.zoom-op {
+		width: 100px;
+
+		.val {
+			flex: 1;
+			text-align: center;
+			user-select: none;
+			font-size: 12px;
+		}
+	}
+
+	.zoom-op,
+	.btn-op {
+		display: flex;
+		align-items: center;
+		height: 30px;
+		box-sizing: border-box;
+		cursor: pointer;
+	}
+
+	.list {
+		.item {
+			cursor: pointer;
+			font-size: 12px;
+			padding: 5px 10px;
+			border-radius: 4px;
+			text-align: center;
+			user-select: none;
+
+			&:hover {
+				background-color: var(--el-fill-color-lighter);
+			}
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/tools/edge-button.vue b/src/modules/flow/components/tools/edge-button.vue
new file mode 100644
index 0000000..f3ba839
--- /dev/null
+++ b/src/modules/flow/components/tools/edge-button.vue
@@ -0,0 +1,136 @@
+<template>
+	<base-edge :id="id" :style="style" :path="path[0]" :marker-end="markerEnd" />
+
+	<edge-label-renderer>
+		<div
+			:style="{
+				height: '16px',
+				width: '16px',
+				pointerEvents: 'all',
+				position: 'absolute',
+				transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`
+			}"
+			class="nodrag nopan"
+		>
+			<!-- <tools-nodes
+				:ref="setRefs('toolsNodes')"
+				:node="node"
+				:edge-id="id"
+				:handle="edge?.sourceHandle!"
+				is-insert
+			>
+				<el-icon
+					class="icon"
+					:class="{
+						active: refs.toolsNodes?.visible,
+						show: data?.show
+					}"
+				>
+					<circle-plus-filled />
+				</el-icon>
+			</tools-nodes> -->
+
+			<el-icon
+				class="icon"
+				:class="{
+					show: data?.show
+				}"
+				@click="del"
+			>
+				<circle-close-filled />
+			</el-icon>
+		</div>
+	</edge-label-renderer>
+</template>
+
+<script setup lang="ts" name="tools-edge-button">
+import { BaseEdge, EdgeLabelRenderer, getBezierPath } from "@vue-flow/core";
+import { computed } from "vue";
+import ToolsNodes from "./nodes.vue";
+import { CirclePlusFilled, CircleCloseFilled } from "@element-plus/icons-vue";
+import { useCool } from "/@/cool";
+import { useFlow } from "../../hooks";
+
+const props = defineProps({
+	id: {
+		type: String,
+		required: true
+	},
+	sourceX: {
+		type: Number,
+		required: true
+	},
+	sourceY: {
+		type: Number,
+		required: true
+	},
+	targetX: {
+		type: Number,
+		required: true
+	},
+	targetY: {
+		type: Number,
+		required: true
+	},
+	sourcePosition: {
+		type: String,
+		required: true
+	},
+	targetPosition: {
+		type: String,
+		required: true
+	},
+	markerEnd: {
+		type: String,
+		required: false
+	},
+	style: {
+		type: Object,
+		required: false
+	},
+	data: Object
+});
+
+const { refs, setRefs } = useCool();
+const flow = useFlow();
+
+const path = computed(() => getBezierPath(props as any));
+
+const edge = computed(() => {
+	return flow.findEdge(props.id);
+});
+
+const node = computed(() => {
+	return flow.nodes.find((e) => e.id == edge.value?.source);
+});
+
+function del() {
+	const edge = flow.findEdge(props.id);
+
+	if (edge) {
+		flow.removeEdges(edge);
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.icon {
+	display: none;
+	color: var(--el-color-danger);
+	font-size: 16px;
+	cursor: pointer;
+	background-color: var(--el-bg-color);
+	border-radius: 100%;
+	transition: transform 0.15s;
+
+	&.show {
+		display: inline-block;
+	}
+
+	&.active,
+	&:hover {
+		transform: scale(1.3);
+		display: inline-block;
+	}
+}
+</style>
diff --git a/src/modules/flow/components/tools/fields.vue b/src/modules/flow/components/tools/fields.vue
new file mode 100644
index 0000000..a5f9c05
--- /dev/null
+++ b/src/modules/flow/components/tools/fields.vue
@@ -0,0 +1,124 @@
+<template>
+	<div class="tools-fields">
+		<div
+			class="item"
+			:class="{
+				disabled
+			}"
+			v-for="(item, index) in list"
+			:key="index"
+			@click="edit(item)"
+		>
+			<cl-svg :name="item.type" class="type" />
+
+			<div class="name">
+				{{ item.field }}
+				<span v-if="!disabled"> · {{ item.label }}</span>
+			</div>
+
+			<span class="required" v-if="item.required">必填</span>
+
+			<div class="op">
+				<cl-svg name="delete" @click.stop="remove(index)" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="tools-field">
+import { PropType, useModel } from "vue";
+import type { FlowField } from "/$/flow/types";
+
+const props = defineProps({
+	modelValue: {
+		type: Array as PropType<FlowField[]>,
+		default: () => []
+	},
+	disabled: Boolean
+});
+
+const emit = defineEmits(["update:modelValue", "edit"]);
+
+// 列表
+const list = useModel(props, "modelValue");
+
+// 编辑
+function edit(item: FlowField) {
+	emit("edit", item);
+}
+
+// 移除
+function remove(index: number) {
+	list.value.splice(index, 1);
+}
+</script>
+
+<style lang="scss" scoped>
+.tools-fields {
+	.item {
+		display: flex;
+		align-items: center;
+		margin-bottom: 5px;
+		background-color: var(--el-fill-color-lighter);
+		border-radius: 6px;
+		padding: 0 5px;
+		height: 30px;
+		cursor: pointer;
+		position: relative;
+		overflow: hidden;
+
+		.type {
+			height: 15px;
+			width: 15px;
+			margin-right: 5px;
+			padding: 3px;
+		}
+
+		.name {
+			font-size: 12px;
+			flex: 1;
+		}
+
+		.required {
+			font-size: 12px;
+			margin-right: 5px;
+		}
+
+		.op {
+			display: none;
+			align-items: center;
+			justify-content: flex-end;
+			height: 100%;
+			position: absolute;
+			right: 0;
+			top: 0;
+			width: 80px;
+			padding: 0 5px;
+			background-color: var(--el-fill-color-light);
+
+			.cl-svg {
+				height: 15px;
+				width: 15px;
+				padding: 3px;
+				border-radius: 4px;
+
+				&:hover {
+					background-color: var(--el-fill-color-darker);
+				}
+			}
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		&:not(.disabled):hover {
+			background-color: var(--el-fill-color-light);
+
+			.op {
+				display: flex;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/tools/handle.vue b/src/modules/flow/components/tools/handle.vue
new file mode 100644
index 0000000..ae17951
--- /dev/null
+++ b/src/modules/flow/components/tools/handle.vue
@@ -0,0 +1,151 @@
+<template>
+	<tools-nodes :node="node" :handle="id" :disabled="true || isLink">
+		<el-icon
+			class="tools-handle"
+			:class="[
+				`is-${type}`,
+				{
+					'is-link': isLink
+				}
+			]"
+			:style="[position]"
+			@click.stop
+		>
+			<span class="rod"></span>
+
+			<!-- <circle-plus-filled class="icon" /> -->
+			<cl-svg name="arrow-right" class="icon" />
+
+			<handle
+				:id="id"
+				:type="type"
+				:position="align"
+				:is-valid-connection="onValidConnection"
+			/>
+		</el-icon>
+	</tools-nodes>
+</template>
+
+<script setup lang="ts" name="tools-handle">
+import { computed, PropType, StyleValue } from "vue";
+import { CirclePlusFilled } from "@element-plus/icons-vue";
+import { Handle, Position, Connection } from "@vue-flow/core";
+import { useFlow } from "../../hooks";
+import ToolsNodes from "./nodes.vue";
+
+const props = defineProps({
+	nodeId: String,
+	id: String,
+	position: Object as PropType<StyleValue>,
+	type: {
+		type: String as PropType<"target" | "source">,
+		default: "source"
+	}
+});
+
+const flow = useFlow();
+
+// 节点数据
+const node = computed(() => {
+	return flow.findNode(props.nodeId!);
+});
+
+// 节点位置
+const align = computed(() => {
+	return props.type == "target" ? Position.Left : Position.Right;
+});
+
+// 是否连接
+const isLink = computed(() => {
+	return !!flow.edges.find((e) => {
+		if (e[props.type] == props.nodeId) {
+			return e[`${props.type}Handle`] == props.id;
+		}
+
+		return false;
+	});
+});
+
+// 连接校验
+function onValidConnection({ targetHandle, sourceHandle, source, target }: Connection) {
+	// 不能连父节点
+	const pNodes = flow.parentAllNodes(source);
+	if (pNodes.find((e) => e.id == target)) {
+		return false;
+	}
+
+	// 不能连自己
+	if (target == source) {
+		return false;
+	}
+
+	// 只能目标节点去连
+	if (targetHandle == "target" && sourceHandle != "target") {
+		return true;
+	}
+
+	return false;
+}
+</script>
+
+<style lang="scss" scoped>
+.tools-handle {
+	position: absolute;
+	color: var(--el-color-primary);
+	font-size: 16px;
+	transition: transform 0.2s;
+	background-color: var(--el-bg-color);
+	border-radius: 100%;
+
+	&:hover {
+		transform: scale(1.2);
+	}
+
+	.vue-flow__handle {
+		position: absolute;
+		left: -8px;
+		top: 8px;
+		height: 14px;
+		width: 14px;
+		opacity: 0;
+
+		&-left {
+			left: auto;
+			right: -8px;
+		}
+	}
+
+	&.is-link {
+		display: flex;
+		align-items: center;
+		background-color: transparent;
+
+		.icon {
+			display: none;
+		}
+
+		.rod {
+			width: 0;
+			height: 0;
+			border-radius: 1px;
+			position: absolute;
+			border: 5px solid transparent;
+			color: var(--el-color-primary);
+		}
+	}
+
+	&.is-source {
+		.rod {
+			right: -5px;
+			border-left-color: currentColor;
+		}
+	}
+
+	&.is-target {
+		.rod {
+			left: -5px;
+			border-right-color: currentColor;
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/tools/head.vue b/src/modules/flow/components/tools/head.vue
new file mode 100644
index 0000000..b54581c
--- /dev/null
+++ b/src/modules/flow/components/tools/head.vue
@@ -0,0 +1,218 @@
+<template>
+	<div class="tools-head">
+		<div class="info">
+			<p class="title">{{ flow.info?.name }}</p>
+			<p class="desc">保存于 {{ dayjs(flow.info?.updateTime).format("MM-DD HH:mm:ss") }}</p>
+		</div>
+
+		<div class="op">
+			<div class="item" @click="save()">
+				<el-tooltip content="保存" placement="top">
+					<cl-svg name="save2" />
+				</el-tooltip>
+			</div>
+
+			<div class="item" @click="run()">
+				<el-tooltip content="运行" placement="top">
+					<cl-svg name="run2" />
+				</el-tooltip>
+			</div>
+
+			<el-popover
+				:ref="setRefs('publishPopover')"
+				trigger="click"
+				:teleported="false"
+				:offset="5"
+				width="240px"
+				popper-class="cl-flow__popper"
+				placement="bottom"
+				@show="publish.onShow"
+			>
+				<template #reference>
+					<div class="item">
+						<el-tooltip content="发布" placement="top">
+							<cl-svg name="publish" />
+						</el-tooltip>
+					</div>
+				</template>
+
+				<div class="publish">
+					<el-text size="small" tag="p">{{ publish.tips }}</el-text>
+
+					<div class="btn">
+						<el-button class="a" type="primary" @click="publish.next">发布</el-button>
+					</div>
+				</div>
+			</el-popover>
+
+			<div class="item" @click="refs.nodeConfig?.open()">
+				<el-tooltip content="配置" placement="top">
+					<cl-svg name="set" />
+				</el-tooltip>
+			</div>
+
+			<div class="item" @click="exportFlow()">
+				<el-tooltip content="导出" placement="top">
+					<cl-svg name="export" />
+				</el-tooltip>
+			</div>
+		</div>
+
+		<node-config :ref="setRefs('nodeConfig')" />
+	</div>
+</template>
+
+<script setup lang="ts" name="tools-head">
+import dayjs from "dayjs";
+import { useFlow } from "/$/flow/hooks";
+import { useCool } from "/@/cool";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { reactive } from "vue";
+import { formatTime } from "/$/flow/utils";
+import NodeConfig from "./node-config.vue";
+
+const { mitt, refs, setRefs, service } = useCool();
+const flow = useFlow();
+
+function run() {
+	mitt.emit("flow.runOpen");
+	mitt.emit("flow.closeForm");
+}
+
+async function save() {
+	mitt.emit("flow.closeForm");
+	await flow.save();
+	ElMessage.success("数据保存成功");
+}
+
+const publish = reactive({
+	loading: false,
+	tips: "-",
+
+	onShow() {
+		const { releaseTime } = flow?.info || {};
+
+		if (releaseTime) {
+			publish.tips = `上次发布于${formatTime(releaseTime)}`;
+		} else {
+			publish.tips = "当前未发布";
+		}
+	},
+
+	next() {
+		refs.publishPopover?.hide();
+
+		mitt.emit("flow.runCheck", async (status: boolean) => {
+			if (status) {
+				ElMessage.success("检测通过，发布中");
+
+				publish.loading = true;
+
+				// 保存草稿
+				await flow.save();
+
+				// 发布
+				await service.flow.info
+					.release({
+						flowId: flow.info?.id
+					})
+					.then(() => {
+						ElMessage.success("发布成功");
+						flow.get();
+					})
+					.catch((err) => {
+						ElMessage.error(err.message);
+					});
+
+				publish.loading = false;
+			}
+		});
+	}
+});
+
+// 导出
+function exportFlow() {
+	ElMessageBox.confirm("是否要导出当前流程？", "提示", {
+		type: "success",
+		confirmButtonText: "确认",
+		cancelButtonText: "取消"
+	}).then(() => {
+		flow.exportFlow();
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.tools-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	position: absolute;
+	left: 0;
+	top: 0;
+	height: 50px;
+	width: 100%;
+	padding: 0 10px;
+	z-index: 10;
+	user-select: none;
+	box-sizing: border-box;
+	pointer-events: none;
+
+	.info {
+		pointer-events: all;
+
+		.title {
+			font-size: 14px;
+		}
+
+		.desc {
+			color: var(--el-text-color-regular);
+			font-size: 10px;
+		}
+	}
+
+	.op {
+		display: flex;
+		pointer-events: all;
+
+		.item {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 36px;
+			width: 36px;
+			border-radius: 8px;
+			background-color: var(--el-bg-color);
+			margin-left: 10px;
+			cursor: pointer;
+
+			.cl-svg {
+				font-size: 22px;
+				color: var(--el-color-info);
+				outline: none;
+			}
+
+			&:hover {
+				background-color: var(--el-fill-color-lighter);
+
+				.cl-svg {
+					color: var(--el-text-color-primary);
+				}
+			}
+		}
+	}
+
+	.publish {
+		padding: 5px;
+
+		.btn {
+			display: flex;
+			margin-top: 10px;
+
+			.a {
+				flex: 1;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/tools/history.vue b/src/modules/flow/components/tools/history.vue
new file mode 100644
index 0000000..78da54d
--- /dev/null
+++ b/src/modules/flow/components/tools/history.vue
@@ -0,0 +1,132 @@
+<template>
+	<div class="tools-history">
+		<el-tooltip content="上一步">
+			<cl-svg
+				name="prev"
+				:class="{
+					disabled: !isPrev
+				}"
+				@click="prev"
+			/>
+		</el-tooltip>
+
+		<el-tooltip content="下一步">
+			<cl-svg
+				name="next"
+				:class="{
+					disabled: !isNext
+				}"
+				@click="next"
+			/>
+		</el-tooltip>
+	</div>
+</template>
+
+<script setup lang="ts" name="tools-history ">
+import { ref, onMounted, watch } from "vue";
+import { useFlow } from "/$/flow/hooks";
+import { debounce, cloneDeep } from "lodash-es";
+import { computed } from "vue";
+import { sleep } from "/@/cool/utils";
+import { useCool } from "/@/cool";
+import { onUnmounted } from "vue";
+
+const { mitt } = useCool();
+const flow = useFlow();
+
+const list = ref<any[]>([]);
+const active = ref(0);
+
+// 能否上一个
+const isPrev = computed(() => active.value > 0);
+
+// 能否下一个
+const isNext = computed(() => active.value < list.value.length - 1);
+
+// 上一个
+function prev() {
+	if (isPrev.value) {
+		active.value -= 1;
+		update();
+	}
+}
+
+// 下一个
+function next() {
+	if (isNext.value) {
+		active.value += 1;
+		update();
+	}
+}
+
+let lock = false;
+
+// 更新数据
+async function update() {
+	if (lock) {
+		return false;
+	}
+
+	const d = list.value[active.value];
+
+	if (d) {
+		lock = true;
+
+		await flow.restore(d);
+		await sleep(300);
+
+		lock = false;
+	}
+}
+
+// 添加记录
+const append = debounce(() => {
+	if (lock) {
+		return false;
+	}
+
+	list.value.splice(
+		active.value + 1,
+		list.value.length,
+		cloneDeep({
+			nodes: flow.nodes,
+			edges: flow.edges,
+			viewport: flow.viewport
+		})
+	);
+
+	active.value = list.value.length - 1;
+}, 300);
+
+// flow触发的方法
+const fns = ["addNodes", "updateNode", "removeNodes", "addEdge", "removeEdges", "clear", "arrange"];
+
+onMounted(() => {
+	append();
+
+	fns.forEach((k) => {
+		mitt.on(`flow.${k}`, append);
+	});
+});
+
+onUnmounted(() => {
+	fns.forEach((k) => {
+		mitt.off(`flow.${k}`, append);
+	});
+});
+</script>
+
+<style lang="scss" scoped>
+.tools-history {
+	display: flex;
+	cursor: pointer;
+
+	.disabled {
+		color: var(--el-text-color-disabled) !important;
+
+		&:focus {
+			color: var(--el-text-color-disabled) !important;
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/tools/icon.vue b/src/modules/flow/components/tools/icon.vue
new file mode 100644
index 0000000..b3cc76e
--- /dev/null
+++ b/src/modules/flow/components/tools/icon.vue
@@ -0,0 +1,41 @@
+<template>
+	<div
+		class="tools-icon"
+		:class="[`is-${name}`]"
+		:style="{
+			height: size + 'px',
+			width: size + 'px',
+			backgroundColor: color
+		}"
+	>
+		<cl-svg :name="name" />
+	</div>
+</template>
+
+<script lang="ts" setup name="tools-icon">
+const props = defineProps({
+	name: String,
+	size: {
+		type: Number,
+		default: 20
+	},
+	color: String
+});
+</script>
+
+<style lang="scss" scoped>
+.tools-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 100%;
+	background-color: var(--el-color-primary);
+	color: #fff;
+	font-size: 14px;
+	flex-shrink: 0;
+
+	&.is-add {
+		background-color: var(--el-color-info-light-5);
+	}
+}
+</style>
diff --git a/src/modules/flow/components/tools/import.vue b/src/modules/flow/components/tools/import.vue
new file mode 100644
index 0000000..9454851
--- /dev/null
+++ b/src/modules/flow/components/tools/import.vue
@@ -0,0 +1,134 @@
+<template>
+	<cl-upload
+		type="file"
+		multiple
+		:limit-size="limitSize"
+		:limit="limit"
+		:accept="accept"
+		:disabled="saving || disabled"
+		:auto-upload="false"
+		:before-upload="onUpload"
+		:size="[220, '100%']"
+		:showFileList="false"
+	>
+		<el-button type="success">
+			<cl-svg name="import" />
+			<span class="text">导入</span>
+		</el-button>
+	</cl-upload>
+</template>
+
+<script lang="ts" name="flow-tools-import" setup>
+import { useCool } from "/@/cool";
+import { ElMessage } from "element-plus";
+import { reactive, type PropType, computed, ref } from "vue";
+import { debounce } from "lodash-es";
+
+const { service } = useCool();
+
+const props = defineProps({
+	limit: {
+		type: Number,
+		default: 2
+	},
+	limitSize: {
+		type: Number,
+		default: 10
+	},
+	type: {
+		type: String as PropType<
+			"default" | "success" | "warning" | "info" | "text" | "primary" | "danger"
+		>,
+		default: "success"
+	},
+	icon: String,
+	disabled: Boolean,
+	accept: {
+		type: String,
+		default: ".json"
+	}
+});
+
+const emits = defineEmits(["change", "success"]);
+
+// 上传信息
+const upload = reactive({
+	filename: "",
+	file: null as File | null,
+	list: [] as any[],
+	reset: () => {
+		upload.filename = "";
+		upload.file = null;
+		upload.list = [];
+	}
+});
+
+// 保存中
+const saving = ref<boolean>(false);
+
+// 上传
+function onUpload(raw: File, _: any, { next }: any) {
+	const reader = new FileReader();
+
+	reader.onload = (event: any) => {
+		let data = event.target.result;
+
+		try {
+			const result = JSON.parse(data);
+
+			upload.list.push(result);
+			upload.filename = raw.name;
+			upload.file = raw;
+
+			emits("change", result);
+		} catch (error) {
+			ElMessage.error("导入失败，请检查文件后重新上传");
+		}
+	};
+
+	reader.readAsText(raw, "UTF-8");
+	// reader.readAsBinaryString(raw);
+
+	next();
+
+	// 调用防抖提交
+	debouncedOnSubmit();
+
+	return false;
+}
+
+// 防抖处理 onSubmit 函数
+const debouncedOnSubmit = debounce(onSubmit, 500); // 1000 毫秒防抖延迟
+
+// 提交导入
+function onSubmit() {
+	if (saving.value) return false;
+
+	if (upload.list.length > props.limit) {
+		// ElMessage.warning(`最多只能上传${props.limit}个文件`);
+		return false;
+	}
+
+	saving.value = true;
+
+	service.flow.info
+		.add(upload.list)
+		.finally(() => {
+			saving.value = false;
+			upload.reset();
+		})
+		.then(() => {
+			ElMessage.success("导入成功");
+			emits("success");
+		})
+		.catch((err) => {
+			ElMessage.error(`导入失败：${err.message}`);
+		});
+}
+</script>
+
+<style lang="scss" scoped>
+.text {
+	margin-left: 6px;
+}
+</style>
diff --git a/src/modules/flow/components/tools/more.vue b/src/modules/flow/components/tools/more.vue
new file mode 100644
index 0000000..d1da247
--- /dev/null
+++ b/src/modules/flow/components/tools/more.vue
@@ -0,0 +1,121 @@
+<template>
+	<el-popover
+		:ref="setRefs('popover')"
+		trigger="click"
+		width="200px"
+		placement="bottom-start"
+		popper-class="cl-flow__popper"
+		:offset="5"
+	>
+		<template #reference>
+			<slot></slot>
+		</template>
+
+		<div class="tools-more">
+			<div class="list">
+				<template v-for="(item, index) in list" :key="index">
+					<div class="item" @click="toCommand(item.value)" v-if="!item.hidden">
+						<span class="label">{{ item.label }}</span>
+						<span class="desc" v-if="item.desc">{{ item.desc }}</span>
+					</div>
+				</template>
+			</div>
+		</div>
+	</el-popover>
+</template>
+
+<script setup lang="ts" name="tools-more">
+import { type PropType } from "vue";
+import { useFlow } from "../../hooks";
+import type { FlowNode } from "../../types";
+import { useCool } from "/@/cool";
+import { cloneDeep } from "lodash-es";
+
+const props = defineProps({
+	node: {
+		type: Object as PropType<FlowNode>,
+		default: () => ({})
+	}
+});
+
+const { refs, setRefs } = useCool();
+const flow = useFlow();
+
+const list = [
+	{
+		label: "克隆",
+		value: "clone"
+	},
+	{
+		label: "复制",
+		value: "copy"
+	},
+	{
+		label: "删除",
+		value: "remove",
+		desc: "Del",
+		hidden: ["start", "end"].includes(props.node.type!)
+	}
+];
+
+function toCommand(value: string) {
+	const node = cloneDeep(props.node);
+
+	switch (value) {
+		case "clone":
+			const { x = 0, y = 0 } = node.position || {};
+
+			flow.addNode(node.type!, {
+				...node,
+				position: {
+					x: x + 340,
+					y
+				}
+			});
+			break;
+
+		case "copy":
+			flow.setCopyNode(node);
+			break;
+
+		case "remove":
+			flow.removeNodes(node);
+			break;
+	}
+
+	refs.popover.hide();
+}
+</script>
+
+<style lang="scss" scoped>
+.tools-more {
+	.list {
+		.item {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			height: 30px;
+			cursor: pointer;
+			border-radius: 6px;
+			padding: 0 10px;
+
+			.label {
+				font-size: 12px;
+			}
+
+			.desc {
+				color: var(--el-color-info);
+				font-size: 10px;
+			}
+
+			&.active {
+				color: var(--el-color-primary);
+			}
+
+			&:hover {
+				background-color: var(--el-fill-color-light);
+			}
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/tools/node-add.vue b/src/modules/flow/components/tools/node-add.vue
new file mode 100644
index 0000000..9c09006
--- /dev/null
+++ b/src/modules/flow/components/tools/node-add.vue
@@ -0,0 +1,282 @@
+<template>
+	<div
+		class="tools-node-add__btn"
+		:class="{
+			expand: visible
+		}"
+		@click="visible = !visible"
+	>
+		<cl-svg name="add2"></cl-svg>
+	</div>
+
+	<div
+		class="tools-node-add"
+		:class="{
+			show: visible
+		}"
+	>
+		<el-scrollbar height="100%">
+			<div class="wrap">
+				<div class="group" v-for="a in list" :key="a.label">
+					<p class="label" v-if="a.label">{{ a.label }}</p>
+
+					<div class="list">
+						<div
+							class="cl-flow__tools-node-add-item item"
+							:id="`cl-flow__tools-node-add--${b.type}`"
+							v-for="b in a.children"
+							:key="b.label"
+							:data-type="b.type"
+							@mousedown="(e) => mousedown(e, b)"
+						>
+							<tools-icon :name="b.icon" :color="b.color" :size="30" />
+
+							<div class="det">
+								<p>{{ b.label }}</p>
+								<p>{{ b.description }}</p>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="empty" v-if="isEmpty(list)">未找到匹配项</div>
+			</div>
+		</el-scrollbar>
+	</div>
+</template>
+
+<script setup lang="ts" name="tools-node-add">
+import { PropType, computed, reactive, ref } from "vue";
+import { useFlow } from "../../hooks";
+import { isEmpty } from "lodash-es";
+import { useCool } from "/@/cool";
+import { sleep } from "/@/cool/utils";
+import type { FlowNode } from "../../types";
+import ToolsIcon from "./icon.vue";
+
+const props = defineProps({
+	node: {
+		type: Object as PropType<FlowNode>,
+		default: () => ({})
+	}
+});
+
+const emit = defineEmits(["select", "hide"]);
+
+const { mitt } = useCool();
+const flow = useFlow();
+
+// 关键字
+const keyWord = ref("");
+
+// 是否可见
+const visible = ref(false);
+
+// 列表
+const list = computed(() => flow.getGroup(keyWord.value));
+
+// 节点选择
+async function select(node: FlowNode) {
+	// 源
+	const source = props.node;
+
+	// 目标
+	let target: FlowNode | undefined;
+
+	// 空白处插入
+	const arr = flow.nodes.map((e) => {
+		return (
+			(e.position?.y || 0) +
+			(document.querySelector(`div[data-id="${e.id}"]`)?.clientHeight || 0)
+		);
+	});
+
+	const y = Math.max(...arr.concat(0)) + flow.offset.g;
+
+	target = flow.addNode(node.type!, {
+		position: {
+			x: 100,
+			y
+		}
+	});
+
+	// 设置选中
+	flow.setNode(target);
+
+	// 视图定位
+	flow.setViewportByNode(target!);
+
+	// 打开表单
+	// await sleep(100);
+	// mitt.emit("flow.openForm", target);
+
+	emit("select", { source, target });
+}
+
+// 拖放
+const drag = reactive({
+	startX: 0,
+	startY: 0,
+	el: null as HTMLElement | null
+});
+
+function mousedown(e: MouseEvent, node: FlowNode) {
+	const el = document.getElementById(`cl-flow__tools-node-add--${node.type}`);
+
+	if (el) {
+		const elRect = el.getBoundingClientRect();
+		const wRect = document.querySelector(".cl-flow .tools-node-add")?.getBoundingClientRect();
+
+		if (wRect && elRect) {
+			drag.startX = e.pageX - elRect.left + wRect.left - 10;
+			drag.startY = e.pageY - elRect.top + wRect.top - 55;
+		}
+
+		drag.el = el.cloneNode(true) as HTMLElement;
+	}
+
+	document.addEventListener("mousemove", mousemove);
+	document.addEventListener("mouseup", mouseup);
+}
+
+function mousemove(e: MouseEvent) {
+	if (drag.el) {
+		if (!drag.el.className.includes("is-drag")) {
+			drag.el.className += " is-drag";
+			document.querySelector(".cl-flow .vue-flow")?.appendChild(drag.el);
+		}
+
+		drag.el.style.left = `${e.pageX - drag.startX}px`;
+		drag.el.style.top = `${e.pageY - drag.startY}px`;
+	}
+}
+
+function mouseup(e: MouseEvent) {
+	if (drag.el) {
+		if (drag.el.className.includes("is-drag")) {
+			const [x, y] = flow.viewPx(e.pageX - drag.startX, e.pageY - drag.startY);
+
+			flow.addNode(drag.el.dataset.type!, {
+				position: {
+					x,
+					y
+				}
+			});
+
+			drag.el.remove();
+		}
+	}
+
+	document.removeEventListener("mousemove", mousemove);
+	document.removeEventListener("mouseup", mouseup);
+}
+</script>
+
+<style lang="scss">
+.cl-flow__tools-node-add-item {
+	user-select: none;
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	padding: 10px;
+	border-radius: 6px;
+	width: 250px;
+	box-sizing: border-box;
+
+	.tools-icon {
+		font-size: 18px;
+	}
+
+	.det {
+		margin-left: 10px;
+
+		p {
+			font-size: 13px;
+			color: var(--el-text-color-regular);
+			line-height: 1.5;
+
+			&:last-child {
+				font-size: 10px;
+				color: var(--el-color-info);
+			}
+		}
+	}
+
+	&.is-drag {
+		position: absolute;
+		background-color: var(--el-bg-color);
+		z-index: 99;
+		box-shadow: 0px 0 10px 1px rgba(16, 24, 40, 0.05);
+	}
+
+	&:not(.is-drag):hover {
+		background-color: var(--el-fill-color-light);
+	}
+}
+</style>
+
+<style lang="scss" scoped>
+.tools-node-add {
+	position: absolute;
+	left: 10px;
+	top: 50px;
+	z-index: 10;
+	background-color: var(--el-bg-color);
+	border-radius: 6px;
+	height: calc(100% - 50px);
+	width: 260px;
+	transform: translateX(-400px);
+	transition: all 0.3s;
+	box-shadow: 0px 0 10px 1px rgba(16, 24, 40, 0.05);
+
+	.wrap {
+		padding: 5px 0;
+
+		.group {
+			line-height: 1;
+			padding: 0 5px;
+
+			.label {
+				color: var(--el-text-color-secondary);
+				font-size: 12px;
+				padding: 10px;
+			}
+		}
+
+		.empty {
+			padding: 10px 15px;
+			line-height: 1;
+			font-size: 12px;
+			color: var(--el-text-color-secondary);
+			text-align: center;
+		}
+	}
+
+	&.show {
+		transform: translateX(0);
+	}
+
+	&__btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		left: 10px;
+		top: 55px;
+		font-size: 30px;
+		color: var(--el-color-primary);
+		border-radius: 100%;
+		z-index: 11;
+		cursor: pointer;
+		transition: transform 0.3s;
+
+		&:hover {
+			color: var(--el-color-primary-light-1);
+		}
+
+		&.expand {
+			transform: translate(225px, 0) rotate(225deg);
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/tools/node-config.vue b/src/modules/flow/components/tools/node-config.vue
new file mode 100644
index 0000000..750eb96
--- /dev/null
+++ b/src/modules/flow/components/tools/node-config.vue
@@ -0,0 +1,358 @@
+<template>
+	<cl-dialog
+		v-model="visible"
+		title="配置"
+		height="700px"
+		width="1200px"
+		padding="0"
+		:scrollbar="false"
+	>
+		<cl-view-group ref="ViewGroup">
+			<template #item="{ item, selected }">
+				<div
+					class="node-item"
+					:class="{
+						'is-active': selected?.type == item.type
+					}"
+				>
+					<span>{{ item.title }}</span>
+					<cl-svg :name="item.type" />
+				</div>
+			</template>
+
+			<template #right>
+				<div class="opbar">
+					<el-button type="success" size="small" @click="Crud?.rowAdd()">添加</el-button>
+				</div>
+
+				<cl-crud ref="Crud" padding="0 10px">
+					<el-row :gutter="10">
+						<el-col :span="8" :xs="24" v-for="(item, index) in list" :key="index">
+							<div class="data-item">
+								<div class="head">
+									<span class="name">{{ item.name }}</span>
+
+									<cl-svg name="delete" @click="Crud?.rowDelete(item)" />
+									<cl-svg name="set" @click="Crud?.rowEdit(item)" />
+								</div>
+
+								<div class="content">
+									<el-text size="small" type="info" :line-clamp="4">
+										{{ item.description || "暂无描述" }}
+									</el-text>
+								</div>
+							</div>
+						</el-col>
+					</el-row>
+
+					<cl-upsert ref="Upsert">
+						<template #slot-options="{ scope }">
+							<cl-editor-monaco v-model="scope.options" />
+
+							<el-tooltip content="重置">
+								<cl-svg name="change" class="options-btn" @click="reset" />
+							</el-tooltip>
+						</template>
+					</cl-upsert>
+
+					<div class="empty" v-if="isEmpty(list)">
+						<el-empty :image-size="100" />
+					</div>
+				</cl-crud>
+			</template>
+		</cl-view-group>
+	</cl-dialog>
+</template>
+
+<script setup lang="ts" name="tools-set-node-config">
+import { ref } from "vue";
+import { useCool } from "/@/cool";
+import { useViewGroup } from "/@/plugins/view";
+import { useCrud, useUpsert } from "@cool-vue/crud";
+import { isEmpty, keys } from "lodash-es";
+
+const { service } = useCool();
+
+// 列表数据
+const list = ref<Eps.FlowConfigEntity>([]);
+
+// 配置
+const config = ref({});
+
+// 分组
+const { ViewGroup } = useViewGroup({
+	enableAdd: false,
+	enableContextMenu: false,
+	enableKeySearch: false,
+	label: "节点",
+	title: "配置",
+	service: {
+		async page(params) {
+			return service.flow.config.all(params).then((res) => {
+				return {
+					list: res.map((e) => {
+						return {
+							...e,
+							name: e.title
+						};
+					}),
+					pagination: {
+						total: res.length,
+						page: 1,
+						size: 100
+					}
+				};
+			});
+		}
+	},
+	onSelect(item) {
+		refresh({
+			node: item.type
+		});
+	}
+});
+
+// Crud
+const Crud = useCrud({
+	service: service.flow.config,
+	async onRefresh(params, { next }) {
+		const res = await next({
+			...params,
+			size: 1000
+		});
+
+		list.value = res.list;
+	}
+});
+
+// Upsert
+const Upsert = useUpsert({
+	dialog: {
+		width: "800px"
+	},
+	props: {
+		labelPosition: "top"
+	},
+	items: [
+		{
+			label: "类型",
+			prop: "type",
+			component: {
+				name: "el-select",
+				options: [],
+				props: {
+					onChange(val: string) {
+						Upsert.value?.setForm(
+							"options",
+							JSON.stringify(config.value[val], null, 4)
+						);
+					}
+				}
+			},
+			span: 8,
+			required: true
+		},
+		{
+			label: "名称",
+			prop: "name",
+			component: {
+				name: "el-input"
+			},
+			span: 16,
+			required: true
+		},
+		{
+			label: "描述",
+			prop: "description",
+			component: {
+				name: "el-input",
+				props: {
+					type: "textarea",
+					rows: 3
+				}
+			}
+		},
+		{
+			label: "配置",
+			prop: "options",
+			component: {
+				name: "slot-options"
+			}
+		}
+	],
+
+	onOpen() {
+		service.flow.config
+			.config({
+				node: ViewGroup.value?.selected?.type
+			})
+			.then((res) => {
+				config.value = res;
+
+				// 类型
+				const types = keys(res).map((e) => {
+					return {
+						label: e,
+						value: e
+					};
+				});
+
+				// 设置类型
+				Upsert.value?.setOptions("type", types);
+
+				// 默认值
+				if (Upsert.value?.mode == "add") {
+					const type = types[0]?.value;
+
+					if (type) {
+						Upsert.value?.setForm("type", type);
+						Upsert.value?.setForm("options", config.value[type]);
+					}
+				}
+			});
+	},
+
+	onSubmit(data, { next }) {
+		next({
+			...data,
+			node: ViewGroup.value?.selected?.type
+		});
+	}
+});
+
+// 刷新列表
+function refresh(params?: any) {
+	Crud.value?.refresh(params);
+}
+
+// 重置
+function reset() {
+	const type = Upsert.value?.getForm("type");
+	Upsert.value?.setForm("options", JSON.stringify(config.value[type], null, 4));
+}
+
+// 是否可见
+const visible = ref(false);
+
+// 打开
+function open() {
+	visible.value = true;
+}
+
+// 关闭
+function close() {
+	visible.value = false;
+}
+
+defineExpose({
+	open,
+	close
+});
+</script>
+
+<style lang="scss" scoped>
+.node-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 40px;
+	padding: 0 10px;
+	margin: 0 10px;
+	border-radius: 6px;
+	margin-bottom: 10px;
+	cursor: pointer;
+
+	.cl-svg {
+		font-size: 20px;
+		color: var(--el-color-info);
+	}
+
+	&.is-active,
+	&:hover {
+		background-color: var(--el-bg-color-page);
+	}
+}
+
+.data-item {
+	display: flex;
+	flex-direction: column;
+	height: 120px;
+	width: 100%;
+	border-radius: 10px;
+	box-sizing: border-box;
+	margin-bottom: 10px;
+	cursor: pointer;
+	transition: all 0.3s;
+	position: relative;
+	padding: 10px;
+	border: 1px solid var(--el-bg-color-page);
+
+	.head {
+		display: flex;
+		align-items: center;
+		margin-bottom: 5px;
+
+		.name {
+			font-size: 14px;
+			font-weight: bold;
+			margin-right: auto;
+		}
+
+		.cl-svg {
+			padding: 3px;
+			border-radius: 6px;
+			font-size: 16px;
+			color: var(--el-text-color-regular);
+			margin-left: 5px;
+
+			&:hover {
+				background-color: var(--el-fill-color-light);
+				color: var(--el-text-color-primary);
+			}
+		}
+	}
+
+	.content {
+		flex: 1;
+	}
+
+	&:hover {
+		box-shadow: 0 25px 40px -25px var(--el-bg-color-page);
+	}
+}
+
+.opbar {
+	position: absolute;
+	right: 12px;
+	top: 8px;
+
+	.el-button {
+		border-radius: 4px;
+	}
+}
+
+.empty {
+	margin-top: 100px;
+}
+
+.options-btn {
+	position: absolute;
+	right: 0;
+	top: -26px;
+	color: var(--el-text-color-regular);
+	cursor: pointer;
+	border-radius: 6px;
+	font-size: 14px;
+	padding: 4px;
+	flex-shrink: 0;
+	position: absolute;
+	top: -30px;
+	right: 0;
+	outline: none;
+
+	&:hover {
+		background-color: var(--el-fill-color-light);
+		color: var(--el-text-color-primary);
+	}
+}
+</style>
diff --git a/src/modules/flow/components/tools/nodes.vue b/src/modules/flow/components/tools/nodes.vue
new file mode 100644
index 0000000..e2d0b08
--- /dev/null
+++ b/src/modules/flow/components/tools/nodes.vue
@@ -0,0 +1,357 @@
+<template>
+	<el-popover
+		:ref="setRefs('popover')"
+		:disabled="disabled"
+		trigger="click"
+		:persistent="false"
+		placement="right-start"
+		width="280px"
+		popper-class="cl-flow__popper not-padding"
+		:offset="5"
+		@show="onShow"
+		@hide="onHide"
+	>
+		<template #reference>
+			<slot></slot>
+		</template>
+
+		<div class="tools-nodes">
+			<div class="search">
+				<el-input
+					v-model="keyWord"
+					:prefix-icon="Search"
+					placeholder="搜索节点"
+					clearable
+				/>
+			</div>
+
+			<el-scrollbar :max-height="400">
+				<div class="wrap">
+					<div class="group" v-for="a in list" :key="a.label">
+						<p class="label" v-if="a.label">{{ a.label }}</p>
+
+						<div class="list">
+							<el-popover
+								placement="right"
+								width="200px"
+								:hide-after="0"
+								:popper-style="{
+									padding: '0px'
+								}"
+								:persistent="false"
+								:offset="10"
+								popper-class="cl-flow__popper"
+								v-for="b in a.children"
+								:key="b.label"
+							>
+								<template #reference>
+									<div class="item" @click="select(b)">
+										<tools-icon :name="b.icon" :color="b.color" :size="22" />
+										<span>{{ b.label }}</span>
+									</div>
+								</template>
+
+								<div class="tools-nodes__description">
+									<div class="inner">
+										<tools-icon :name="b.icon" :color="b.color" :size="22" />
+										<span>{{ b.label }}</span>
+									</div>
+
+									<p class="desc">{{ b.description || "暂无描述" }}</p>
+								</div>
+							</el-popover>
+						</div>
+					</div>
+
+					<div class="empty" v-if="isEmpty(list)">未找到匹配项</div>
+				</div>
+			</el-scrollbar>
+		</div>
+	</el-popover>
+</template>
+
+<script setup lang="ts" name="tools-nodes">
+import { Search } from "@element-plus/icons-vue";
+import { PropType, computed, ref } from "vue";
+import { useFlow } from "../../hooks";
+import { isEmpty } from "lodash-es";
+import { useCool } from "/@/cool";
+import { sleep } from "/@/cool/utils";
+import type { FlowNode } from "../../types";
+import ToolsIcon from "./icon.vue";
+
+const props = defineProps({
+	node: {
+		type: Object as PropType<FlowNode>,
+		default: () => ({})
+	},
+	handle: String,
+	edgeId: String,
+	isChange: Boolean,
+	isInsert: Boolean,
+	isAutoInsert: Boolean,
+	disabled: Boolean
+});
+
+const emit = defineEmits(["select", "hide"]);
+
+const { refs, setRefs, mitt } = useCool();
+const flow = useFlow();
+
+// 是否可见
+const visible = ref(false);
+
+// 关键字
+const keyWord = ref("");
+
+// 列表
+const list = computed(() => flow.getGroup(keyWord.value));
+
+// 节点选择
+async function select(node: FlowNode) {
+	// 源
+	const source = props.node;
+
+	// 目标
+	let target: FlowNode | undefined;
+
+	// 更新节点
+	if (props.isChange) {
+		if (node) {
+			flow.updateNode(source.id!, {
+				...node,
+				position: source.position
+			});
+		}
+
+		target = flow.findNode(source.id!);
+	}
+	// 空白处插入
+	else if (props.isAutoInsert) {
+		const arr = flow.nodes.map((e) => {
+			return (
+				(e.position?.y || 0) +
+				(document.querySelector(`div[data-id="${e.id}"]`)?.clientHeight || 0)
+			);
+		});
+
+		const y = Math.max(...arr.concat(0)) + flow.offset.g;
+
+		target = flow.addNode(node.type!, {
+			position: {
+				x: 100,
+				y
+			}
+		});
+	}
+	// 中间插入节点
+	else if (props.isInsert) {
+		// 原来的子节点
+		const children = flow.childrenNodes(source.id!);
+
+		// 原来的子所有节点
+		const allChildren = flow.childrenAllNodes(source.id!, props.handle);
+
+		// 原连接线
+		const edge = flow.findEdge(props.edgeId!);
+
+		// 先删除
+		if (edge) {
+			flow.removeEdges(edge);
+		}
+
+		// 插入的节点
+		target = flow.insertNode(node.type!, source, {});
+
+		if (target) {
+			const h = target.handle || {};
+
+			// 为空，或者只有一个输出点
+			if (!h.next || h.next?.length == 1) {
+				// 原来的与插入的连接
+				flow.addEdge({
+					source: source!.id!,
+					target: target.id!,
+					sourceHandle: edge?.sourceHandle || "source",
+					targetHandle: "target"
+				});
+
+				if (h.source !== false) {
+					// 插入的与原来的子节点连接
+					children.forEach((e) => {
+						if (edge?.target == e.id) {
+							flow.addEdge({
+								source: target!.id!,
+								target: e!.id!,
+								sourceHandle: h.next?.[0]?.value || "source",
+								targetHandle: "target"
+							});
+						}
+					});
+				}
+			}
+		}
+
+		// 原所有子节点位置后移
+		allChildren.forEach((e) => {
+			flow.updateNode(e!.id!, {
+				position: {
+					x: (e?.position?.x || 0) + flow.offset.x,
+					y: e?.position?.y
+				}
+			});
+		});
+	} else {
+		// 头部添加
+		if (props.handle == "target") {
+			target = flow.addNode(node.type!, {
+				position: source.position
+			});
+
+			// 所有子节点，包含当前
+			const allChildren = [source, ...flow.childrenAllNodes(source.id!)];
+
+			// 为空，或者只有一个输出点
+			if (!target?.handle?.next || target?.handle?.next?.length == 1) {
+				// 输出点
+				const sourceHandle = target?.handle?.next?.[0]?.value || "source";
+
+				// 插入的与原来的连接
+				flow.addEdge({
+					source: target!.id!,
+					target: source!.id!,
+					sourceHandle,
+					targetHandle: "target"
+				});
+			}
+
+			// 子节点后移
+			allChildren.forEach((e) => {
+				flow.updateNode(e!.id!, {
+					position: {
+						x: (e?.position?.x || 0) + flow.offset.x,
+						y: e?.position?.y
+					}
+				});
+			});
+		}
+
+		// 尾部添加
+		else {
+			target = flow.insertNode(node.type!, source);
+
+			flow.addEdge({
+				source: source!.id!,
+				target: target!.id!,
+				sourceHandle: props.handle || "source",
+				targetHandle: "target"
+			});
+		}
+	}
+
+	// 设置选中
+	flow.setNode(target);
+
+	// 视图定位
+	flow.setViewportByNode(target!);
+
+	// 关闭弹窗
+	refs.popover.hide();
+
+	// 打开表单
+	// await sleep(100);
+	// mitt.emit("flow.openForm", target);
+
+	emit("select", { source, target });
+}
+
+function onShow() {
+	visible.value = true;
+}
+
+function onHide() {
+	visible.value = false;
+	emit("hide");
+}
+
+defineExpose({
+	visible
+});
+</script>
+
+<style lang="scss" scoped>
+.tools-nodes {
+	.search {
+		padding: 5px;
+
+		:deep(.el-input__wrapper) {
+			box-shadow: none;
+			background-color: var(--el-fill-color-light);
+		}
+	}
+
+	.wrap {
+		padding: 5px 0;
+
+		.group {
+			line-height: 1;
+			padding: 0 5px;
+
+			.label {
+				color: var(--el-text-color-secondary);
+				font-size: 12px;
+				padding: 10px;
+			}
+
+			.list {
+				.item {
+					display: flex;
+					align-items: center;
+					cursor: pointer;
+					padding: 10px;
+					border-radius: 6px;
+
+					span {
+						font-size: 13px;
+						margin-left: 8px;
+						color: var(--el-text-color-regular);
+					}
+
+					&:hover {
+						background-color: var(--el-fill-color-light);
+					}
+				}
+			}
+		}
+
+		.empty {
+			padding: 10px 15px;
+			line-height: 1;
+			font-size: 12px;
+			color: var(--el-text-color-secondary);
+			text-align: center;
+		}
+	}
+}
+
+.tools-nodes__description {
+	.inner {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		padding: 10px;
+		border-radius: 6px;
+
+		span {
+			font-size: 13px;
+			margin-left: 8px;
+			color: var(--el-text-color-regular);
+		}
+	}
+
+	.desc {
+		font-size: 12px;
+		padding: 0 10px 10px 10px;
+	}
+}
+</style>
diff --git a/src/modules/flow/components/tools/panel/index.vue b/src/modules/flow/components/tools/panel/index.vue
new file mode 100644
index 0000000..e589410
--- /dev/null
+++ b/src/modules/flow/components/tools/panel/index.vue
@@ -0,0 +1,136 @@
+<template>
+	<panel position="top-right" class="tools-panel-right">
+		<panel-run />
+	</panel>
+</template>
+
+<script setup lang="ts" name="tools-panel">
+import { Panel } from "@vue-flow/core";
+import PanelRun from "./run.vue";
+</script>
+
+<style lang="scss" scoped>
+.vue-flow__panel {
+	display: flex;
+
+	&.right {
+		height: calc(100% - 50px);
+		z-index: 10;
+		margin: 0 10px 0 0;
+		margin-top: 50px;
+
+		& > div[class^="tools-panel"] {
+			position: relative;
+			background-color: var(--el-bg-color);
+			height: 100%;
+			border-radius: 10px;
+			box-sizing: border-box;
+			box-shadow: 0px 0 10px 1px rgba(16, 24, 40, 0.05);
+			margin-left: 10px;
+
+			:deep(.inner-item) {
+				display: flex;
+				align-items: center;
+				border: 1px solid var(--el-border-color);
+				border-radius: var(--el-border-radius-base);
+				padding: 0 10px;
+				cursor: pointer;
+				height: 32px;
+				width: 100%;
+				position: relative;
+				transition: all 0.2s;
+				box-sizing: border-box;
+
+				.text {
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					padding-right: 20px;
+				}
+
+				.placeholder {
+					color: var(--el-text-color-placeholder);
+					font-size: 14px;
+				}
+
+				.close {
+					position: absolute;
+					right: 6px;
+					display: none;
+					font-size: 12px !important;
+					color: var(--el-color-info);
+				}
+
+				&:hover {
+					border-color: var(--el-border-color-hover);
+
+					.close {
+						display: block;
+					}
+				}
+			}
+
+			:deep(.textarea-item) {
+				border: 1px solid var(--el-border-color);
+				padding: 0 0 8px 0;
+				border-radius: 8px;
+				margin-bottom: 10px;
+
+				.el-textarea__inner {
+					background-color: transparent;
+					box-shadow: none;
+					padding: 0 10px;
+				}
+
+				.head {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					padding: 0 10px;
+					height: 30px;
+					line-height: normal;
+
+					span {
+						font-size: 12px;
+						color: var(--el-color-info);
+					}
+				}
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+			}
+
+			:deep(.btn-icon) {
+				color: var(--el-text-color-regular);
+				cursor: pointer;
+				border-radius: 6px;
+				font-size: 14px;
+				padding: 4px;
+				flex-shrink: 0;
+				outline: none;
+
+				&:focus,
+				&:hover {
+					background-color: var(--el-fill-color-light);
+					color: var(--el-text-color-primary);
+				}
+
+				&.is-rt {
+					position: absolute;
+					top: -30px;
+					right: 0;
+				}
+
+				&.is-bg {
+					background-color: var(--el-fill-color-lighter);
+
+					&:hover {
+						color: var(--el-color-primary) !important;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/tools/panel/run.vue b/src/modules/flow/components/tools/panel/run.vue
new file mode 100644
index 0000000..c4048ef
--- /dev/null
+++ b/src/modules/flow/components/tools/panel/run.vue
@@ -0,0 +1,1055 @@
+<template>
+	<div class="tools-panel-run" v-if="visible">
+		<!-- 标题 -->
+		<div class="head">
+			<span class="label">
+				流程运行
+				<span v-if="test.node">（{{ test.node?.label }}）</span>
+			</span>
+
+			<div class="btns">
+				<cl-svg class="btn-icon is-bg" name="close" @click="close" />
+			</div>
+		</div>
+
+		<!-- 内容 -->
+		<div class="content">
+			<el-tabs v-model="test.tab">
+				<el-tab-pane label="输入" name="input" :disabled="test.running">
+					<el-scrollbar>
+						<div class="content-item is-input">
+							<div class="row" v-for="(item, index) in inputParams" :key="index">
+								<el-radio
+									class="chat-id"
+									size="small"
+									v-model="chat.contentId"
+									:label="item.field"
+								>
+									对话
+								</el-radio>
+
+								<el-text
+									tag="p"
+									:style="{
+										marginBottom: '10px'
+									}"
+								>
+									{{ item.label }}
+									<span class="required" v-if="item.required">*</span>
+								</el-text>
+
+								<el-input
+									v-model="form[item.field]"
+									clearable
+									placeholder="请输入"
+									v-if="item.type == 'text' || item.type == 'string'"
+								/>
+
+								<el-input-number
+									v-model="form[item.field]"
+									placeholder="请输入"
+									v-else-if="item.type == 'number'"
+								/>
+
+								<cl-upload
+									v-model="form[item.field]"
+									clearable
+									v-else-if="item.type == 'image'"
+								/>
+							</div>
+
+							<div class="run">
+								<el-button type="primary" :loading="test.running" @click="test.run">
+									开始运行
+								</el-button>
+
+								<el-button type="success" @click="chat.open">
+									对话框运行
+								</el-button>
+							</div>
+						</div>
+					</el-scrollbar>
+				</el-tab-pane>
+
+				<el-tab-pane label="对话" name="chat">
+					<div class="content-item is-chat">
+						<div class="container">
+							<el-scrollbar :ref="setRefs('chat.scrollbar')">
+								<div class="list">
+									<div
+										class="item"
+										v-for="(item, index) in chat.list"
+										:key="index"
+										:class="[item.isMy ? 'is-right' : 'is-left']"
+									>
+										<div class="inner">
+											<span v-if="item.content">
+												{{ item.content }}
+											</span>
+
+											<el-icon class="is-loading" v-else>
+												<loading />
+											</el-icon>
+										</div>
+									</div>
+								</div>
+							</el-scrollbar>
+						</div>
+
+						<div class="footer">
+							<el-input
+								:ref="setRefs('chat.input')"
+								v-model="chat.content"
+								placeholder="请输入要咨询的内容"
+								@keydown.enter="chat.toSend()"
+							>
+								<template #suffix>
+									<el-button
+										type="success"
+										:loading="chat.loading"
+										@click="chat.toSend()"
+									>
+										发送
+									</el-button>
+								</template>
+							</el-input>
+						</div>
+					</div>
+				</el-tab-pane>
+
+				<el-tab-pane label="日志" name="detail">
+					<el-scrollbar>
+						<div class="content-item is-detail">
+							<div class="info" :class="[`is-${test.info.status}`]">
+								<div class="top">
+									<div class="item">
+										<p>状态</p>
+										<p class="status">
+											{{ test.info.status }}
+										</p>
+									</div>
+
+									<div class="item">
+										<p>运行时间</p>
+										<p>{{ test.info.duration }}s</p>
+									</div>
+
+									<div class="item">
+										<p>消耗 token 数</p>
+										<p>{{ test.info.tokenUsage || 0 }} Tokens</p>
+									</div>
+								</div>
+							</div>
+
+							<el-text
+								tag="p"
+								:style="{
+									margin: '10px 0'
+								}"
+							>
+								参数
+							</el-text>
+
+							<div class="code">
+								<p>输入</p>
+								<p>{{ test.info.input || "-" }}</p>
+							</div>
+
+							<div class="code">
+								<p>输出</p>
+								<p>{{ test.info.output || "-" }}</p>
+							</div>
+
+							<div class="list" v-if="!isEmpty(trace.list)">
+								<el-text
+									tag="p"
+									:style="{
+										margin: '10px 0'
+									}"
+								>
+									节点
+								</el-text>
+
+								<div
+									class="item"
+									v-for="(item, index) in trace.list"
+									:key="index"
+									:class="[item.result.success ? 'is-success' : 'is-fail']"
+								>
+									<div class="inner" @click="trace.expand(item)">
+										<tools-icon
+											:name="item.node?.type"
+											:color="item.node?.color"
+										/>
+
+										<span class="label">{{ item.node?.label }}</span>
+
+										<span class="duration">耗时：{{ item.duration }}s</span>
+									</div>
+
+									<p class="error" v-if="!item.result.success">
+										{{ item.result.error.message }}
+									</p>
+
+									<div class="desc" v-show="item._expand">
+										<div class="code">
+											<p>输入</p>
+											<p>{{ item.input || "-" }}</p>
+										</div>
+
+										<div class="code">
+											<p>输出</p>
+											<p>{{ item.output || "-" }}</p>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</el-scrollbar>
+				</el-tab-pane>
+			</el-tabs>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="tools-panel-run">
+import { computed, onMounted, onUnmounted, reactive, ref } from "vue";
+import { useCool } from "/@/cool";
+import { useFlow } from "/$/flow/hooks";
+import { config } from "/@/config";
+import { useBase } from "/$/base";
+import { ElMessage } from "element-plus";
+import type { FlowNodeResult, FlowNode } from "/$/flow/types";
+import { last, isString, isEmpty } from "lodash-es";
+import ToolsIcon from "../icon.vue";
+import { nextTick } from "vue";
+import { Loading } from "@element-plus/icons-vue";
+
+const { mitt, refs, setRefs } = useCool();
+const flow = useFlow();
+const { user } = useBase();
+
+// 是否可见
+const visible = ref(false);
+
+// 打开
+function open(node?: FlowNode) {
+	visible.value = true;
+	test.tab = "input";
+	test.node = node || null;
+}
+
+// 关闭
+function close() {
+	visible.value = false;
+	test.clear();
+	trace.clear();
+	mitt.emit("flow.runClose");
+}
+
+// 表单
+const form = reactive({});
+
+// 入参
+const inputParams = computed(() => {
+	const node = test.node || flow.findNodeByType("start");
+
+	return (node?.data?.inputParams || []).map((e) => {
+		return {
+			...e,
+			label: e.label || e.field,
+			type: e.type || "text"
+		};
+	});
+});
+
+// 调试
+const test = reactive({
+	tab: "input",
+	node: null as FlowNode | null, // 单个节点调试
+	running: false,
+	res: [] as FlowNodeResult[],
+	info: {
+		status: "none" as "none" | "success" | "fail" | "running",
+		input: "",
+		output: "",
+		duration: 0,
+		tokenUsage: 0
+	},
+	cacheText: "",
+
+	emit(action: string, data?: any) {
+		mitt.emit("flow.run", { action, data, node: test.node });
+	},
+
+	streamReader: null as ReadableStreamDefaultReader | null,
+
+	// 清空
+	clear() {
+		test.running = false;
+
+		// 清空记录
+		test.res = [];
+
+		// 清空多余的输入值
+		for (let i in form) {
+			const d = inputParams.value.find((e) => e.field == i);
+
+			if (!d) {
+				delete form[i];
+			}
+		}
+
+		// 执行状态
+		test.info.status = "running";
+
+		// 输入值
+		test.info.input = JSON.stringify(form, null, 4);
+
+		// 消耗数
+		test.info.tokenUsage = 0;
+
+		// 输出值
+		test.info.output = "";
+
+		// 时长
+		test.info.duration = 0;
+
+		// 清空过程的数据
+		trace.clear();
+
+		// 关闭流
+		if (test.streamReader) {
+			test.streamReader.cancel();
+		}
+
+		// 清空选中节点
+		flow.clearNode();
+	},
+
+	// 检测节点是否配置正确
+	checkNode(cb?: (status: boolean) => void) {
+		// 开始检测
+		test.emit("check");
+
+		if (test.node) {
+			return true;
+		}
+
+		let status = true;
+
+		// 开始节点
+		const start = flow.findNodeByType("start");
+
+		// 当前运行的所有节点
+		const nodes = [start, ...flow.childrenAllNodes(start.id!)];
+
+		// 检测节点，如果叶子节点不是结束，则整条线报错
+		nodes.find((node) => {
+			if (node.handle?.source === false && !node.handle?.next) {
+				return false;
+			}
+
+			const next = node.handle?.next || [{ label: node.label, value: "source" }];
+
+			next.find((e) => {
+				const d = flow.edges.find(
+					(edge) => edge.source == node.id && edge.sourceHandle == e.value
+				);
+
+				if (!d) {
+					status = false;
+
+					test.emit("fail", {
+						nodeId: node.id,
+						message: `检测失败：“${e.label}”需要添加一个结束节点`
+					});
+
+					return true;
+				}
+			});
+		});
+
+		// 检查每个节点的自定义验证
+		if (status) {
+			status = !nodes.find((e) => {
+				if (e.validator) {
+					const msg = e.validator(e.data!);
+
+					if (isString(msg)) {
+						test.emit("fail", {
+							nodeId: e.id,
+							message: `检测异常：${msg}`
+						});
+
+						flow.setNode(e);
+
+						// 打开节点表单
+						// setTimeout(() => {
+						// 	mitt.emit("flow.openForm");
+						// }, 100);
+
+						return true;
+					}
+				}
+			});
+		}
+
+		// 回调
+		if (cb) {
+			cb(status);
+		}
+
+		return status;
+	},
+
+	// 检测输入参数是否未填写
+	checkInput(action?: string) {
+		// 对话框可以不检查内容参数
+		const isChat = action == "chat" || test.tab == "chat";
+
+		const param = inputParams.value.find((e) => {
+			if (e.required) {
+				if (isChat && chat.contentId == e.field) {
+					return false;
+				}
+
+				let val = form[e.field];
+
+				if (e.type == "text") {
+					if (!val) {
+						return true;
+					}
+				}
+
+				if (e.type == "number") {
+					val = Number(val);
+
+					if (isNaN(val)) {
+						return true;
+					}
+				}
+			}
+		});
+
+		if (param) {
+			ElMessage.error(`请填写${param.label}`);
+			return false;
+		}
+
+		return true;
+	},
+
+	// 运行
+	async run() {
+		if (!test.checkInput()) {
+			return false;
+		}
+
+		if (!test.checkNode()) {
+			return false;
+		}
+
+		// 准备事件
+		test.emit("ready");
+
+		// 清空
+		test.clear();
+
+		// 关闭节点聚焦
+		mitt.emit("flow.closeForm");
+
+		// 运行中
+		test.running = true;
+
+		// 详情面板
+		if (test.tab == "input") {
+			test.tab = "detail";
+		}
+
+		// 保存草稿
+		await flow.save();
+
+		// 调试运行
+		fetch(config.baseUrl + "/admin/flow/run/debug", {
+			method: "POST",
+			headers: {
+				Authorization: user.token,
+				"Content-Type": "application/json"
+			},
+			body: JSON.stringify({
+				label: flow.info?.label,
+				params: form,
+				nodeId: test.node?.id,
+				stream: test.tab == "chat"
+			})
+		})
+			.then((res) => {
+				if (res.body) {
+					test.streamReader = res.body.getReader();
+					const decoder = new TextDecoder("utf-8");
+					const stream = new ReadableStream({
+						start(controller) {
+							function push() {
+								test.streamReader?.read().then(({ done, value }) => {
+									if (done) {
+										test.done();
+										controller.close();
+										return;
+									}
+									const text = decoder.decode(value, { stream: true });
+
+									test.handleResult(text);
+									controller.enqueue(text);
+									push();
+								});
+							}
+							push();
+						}
+					});
+
+					return new Response(stream);
+				}
+			})
+			.catch((err) => {
+				test.done();
+				console.error(err);
+			});
+
+		// 节点开始运行
+		if (test.node) {
+			test.emit("start", test.node.id);
+		} else {
+			test.emit("start", flow.findNodeByType("start").id);
+		}
+	},
+
+	// 运行完成
+	done() {
+		const end = last(test.res);
+
+		if (end) {
+			// 执行状态
+			test.info.status = end.isEnd ? "success" : "fail";
+
+			// 输出值
+			test.info.output = JSON.stringify(end.result.result, null, 4);
+
+			// 消费
+			test.info.tokenUsage = end.count?.tokenUsage || 0;
+
+			// 总时长
+			test.info.duration = parseFloat(
+				((test.res.reduce((a, b) => a + (b.duration || 0), 0) || 1) / 1000).toFixed(3)
+			);
+		}
+
+		// 运行完成
+		test.running = false;
+
+		// 更新过程
+		trace.update();
+
+		// 结束事件
+		test.emit("end");
+	},
+
+	// 处理结果
+	handleResult(text: string) {
+		// 解决输出字符过长问题
+		if (test.cacheText) {
+			text = test.cacheText + text;
+		}
+
+		// 对齐格式
+		if (text.indexOf("data:") == 0) {
+			text = "\n\n" + text;
+		}
+
+		try {
+			// 解析内容
+			const res: FlowNodeResult[] = text
+				.split(/\n\ndata:/g)
+				.filter(Boolean)
+				.map((e) => JSON.parse(e));
+
+			// 是否异常
+			const err = res.find((e) => !e.nodeId && !e.node && !e.llmStream);
+
+			if (err) {
+				ElMessage.error(err.result.error.message);
+			} else {
+				// 分发事件
+				res.forEach((e) => {
+					test.emit("result", e);
+
+					if (e.llmStream) {
+						// 对话框输出
+						chat.onData(e);
+					} else {
+						// 保存结果
+						test.res.push(e);
+					}
+				});
+			}
+
+			test.cacheText = "";
+		} catch (err) {
+			test.cacheText = text;
+		}
+	}
+});
+
+// 对话
+const chat = reactive({
+	contentId: "0",
+	content: "",
+	loading: false,
+
+	list: [] as {
+		content: string;
+		isMy: boolean;
+	}[],
+
+	check() {
+		if (chat.contentId == "0") {
+			ElMessage.warning("请先设置对话内容标识，再运行");
+			return false;
+		}
+
+		if (!test.checkInput("chat")) {
+			return false;
+		}
+
+		return true;
+	},
+
+	open() {
+		if (!chat.check()) {
+			return false;
+		}
+
+		test.tab = "chat";
+
+		setTimeout(() => {
+			refs["chat.input"].focus();
+		}, 300);
+	},
+
+	send() {
+		const item = reactive({
+			content: "",
+			isMy: false
+		});
+
+		chat.list.push(item);
+
+		test.run();
+	},
+
+	toSend() {
+		if (!chat.check()) {
+			test.tab = "input";
+			return false;
+		}
+
+		const val = chat.content;
+
+		if (chat.content) {
+			chat.content = "";
+		} else {
+			return false;
+		}
+
+		chat.list.push({
+			content: val,
+			isMy: true
+		});
+
+		// 加载中
+		chat.loading = true;
+
+		// 设置内容参数
+		form[chat.contentId] = val;
+
+		chat.send();
+		chat.scrollToBottom();
+	},
+
+	onData(data: FlowNodeResult) {
+		const item = last(chat.list);
+
+		if (data.llmStream) {
+			chat.loading = false;
+		}
+
+		if (item) {
+			if (data.content !== undefined) {
+				item.content += data.content;
+			}
+		}
+
+		chat.scrollToBottom(false);
+	},
+
+	scrollToBottom(smooth = true) {
+		nextTick(() => {
+			refs["chat.scrollbar"].scrollTo({
+				top: 99999,
+				behavior: smooth ? "smooth" : "auto"
+			});
+		});
+	}
+});
+
+// 过程
+const trace = reactive({
+	list: [] as FlowNodeResult[],
+
+	clear() {
+		trace.list = [];
+	},
+
+	update() {
+		trace.list = test.res.map((e) => {
+			return {
+				...e,
+				duration: parseFloat(((e.duration || 1) / 1000).toFixed(3)),
+				node: flow.findNode(e.nodeId!),
+				input: JSON.stringify(e.inputParams, null, 4),
+				output: JSON.stringify(e.result.result, null, 4)
+			};
+		});
+	},
+
+	expand(item: any) {
+		item._expand = !item._expand;
+		flow.setViewportByNode(item.node);
+	}
+});
+
+onMounted(() => {
+	mitt.on("flow.runOpen", open);
+	mitt.on("flow.runCheck", test.checkNode);
+});
+
+onUnmounted(() => {
+	mitt.off("flow.runOpen", open);
+	mitt.off("flow.runCheck", test.checkNode);
+});
+
+defineExpose({
+	open,
+	close
+});
+</script>
+
+<style lang="scss" scoped>
+.tools-panel-run {
+	width: 400px;
+
+	.head {
+		display: flex;
+		align-items: center;
+		padding: 0 15px;
+		height: 50px;
+
+		.label {
+			flex: 1;
+			font-size: 14px;
+			font-weight: bold;
+			color: var(--el-text-color-regular);
+		}
+
+		.btns {
+			display: flex;
+			align-items: center;
+
+			.btn-icon {
+				margin-left: 6px;
+			}
+		}
+	}
+
+	.content {
+		height: calc(100% - 50px);
+
+		:deep(.el-tabs) {
+			height: 100%;
+
+			.el-tabs__header {
+				margin-bottom: 0;
+			}
+
+			.el-tabs__content {
+				height: calc(100% - 40px);
+			}
+
+			.el-tab-pane {
+				height: 100%;
+			}
+
+			.el-tabs__item {
+				padding: 0 15px;
+			}
+
+			.el-tabs__nav-wrap:after,
+			.el-tabs__active-bar {
+				height: 1px;
+			}
+		}
+
+		&-item {
+			padding: 15px;
+			box-sizing: border-box;
+
+			&.is-input {
+				.run {
+					display: flex;
+
+					.el-button {
+						flex: 1;
+						height: 36px;
+						border-radius: 6px;
+					}
+				}
+
+				.row {
+					margin-bottom: 15px;
+					position: relative;
+
+					.el-input-number {
+						width: 100%;
+					}
+
+					.required {
+						color: red;
+					}
+
+					.chat-id {
+						display: flex;
+						align-items: center;
+						position: absolute;
+						right: 0px;
+						margin-right: 0;
+
+						:deep(.el-radio__label) {
+							position: relative;
+							top: -1px;
+						}
+					}
+				}
+			}
+
+			&.is-chat {
+				height: 100%;
+				padding: 0;
+
+				.container {
+					height: calc(100% - 70px);
+
+					.list {
+						padding: 20px;
+
+						.item {
+							display: flex;
+
+							.inner {
+								background-color: #f4f4f4;
+								border-radius: 12px;
+								padding: 15px;
+								margin-bottom: 10px;
+								font-size: 14px;
+							}
+
+							.t1 {
+								margin: 0 0 10px 0;
+							}
+
+							&.is-left {
+								.inner {
+									border-bottom-left-radius: 0;
+								}
+							}
+
+							&.is-right {
+								flex-direction: row-reverse;
+
+								.inner {
+									border-bottom-right-radius: 0;
+									background-color: var(--el-color-primary);
+									color: #fff;
+								}
+							}
+						}
+					}
+				}
+
+				.footer {
+					display: flex;
+					align-items: center;
+					height: 70px;
+					padding: 0 20px;
+
+					:deep(.el-input) {
+						.el-input__wrapper {
+							border-radius: 8px;
+							height: 40px;
+							padding: 0 6px 0 15px;
+						}
+					}
+
+					:deep(.el-button) {
+						border-radius: 6px;
+					}
+				}
+			}
+
+			&.is-detail {
+				.info {
+					border-radius: 10px;
+
+					.top {
+						display: flex;
+						padding: 15px;
+
+						.item {
+							flex: 1;
+
+							.status {
+								text-transform: uppercase;
+
+								&::before {
+									content: "";
+									display: inline-block;
+									height: 10px;
+									width: 10px;
+									border-radius: 10px;
+									margin-right: 5px;
+									background-color: currentColor;
+								}
+							}
+
+							p {
+								font-size: 12px;
+
+								&:first-child {
+									color: var(--el-color-info);
+								}
+
+								&:last-child {
+									font-weight: bold;
+									margin-top: 8px;
+								}
+							}
+						}
+					}
+
+					&.is-success {
+						background-color: var(--el-color-success-light-9);
+
+						.status {
+							color: var(--el-color-success);
+						}
+					}
+
+					&.is-fail {
+						background-color: var(--el-color-danger-light-9);
+
+						.status {
+							color: var(--el-color-danger);
+						}
+					}
+
+					&.is-running {
+						background-color: var(--el-color-primary-light-9);
+
+						.status {
+							color: var(--el-color-primary);
+						}
+					}
+
+					&.is-none {
+						background-color: var(--el-color-info-light-9);
+
+						.status {
+							color: var(--el-color-info);
+						}
+					}
+				}
+
+				.list {
+					.title {
+						margin: 10px 0 10px 0;
+						font-size: 14px;
+					}
+
+					.item {
+						margin-bottom: 10px;
+						border: 1px solid var(--el-border-color-lighter);
+						border-radius: 10px;
+						cursor: pointer;
+
+						.inner {
+							display: flex;
+							align-items: center;
+							line-height: 1;
+							padding: 10px;
+
+							.label {
+								margin-left: 10px;
+								flex: 1;
+								font-size: 14px;
+							}
+
+							.duration {
+								font-size: 12px;
+								color: var(--el-color-info);
+							}
+						}
+
+						.error {
+							font-size: 12px;
+							color: var(--el-color-danger);
+							padding: 5px 10px 10px 10px;
+						}
+
+						.code {
+							margin: 0 10px 10px 10px;
+						}
+
+						&.is-success {
+							border-color: var(--el-color-success);
+						}
+
+						&.is-fail {
+							border-color: var(--el-color-danger);
+						}
+					}
+				}
+			}
+
+			.code {
+				background-color: var(--el-fill-color-lighter);
+				margin-top: 10px;
+				border-radius: 10px;
+				padding: 15px;
+				font-size: 12px;
+
+				p {
+					&:first-child {
+						margin-bottom: 10px;
+						color: var(--el-color-info);
+						line-height: 1;
+					}
+
+					&:nth-child(2) {
+						white-space: pre-wrap;
+						word-break: break-all;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/modules/flow/components/tools/selection.vue b/src/modules/flow/components/tools/selection.vue
new file mode 100644
index 0000000..48b006a
--- /dev/null
+++ b/src/modules/flow/components/tools/selection.vue
@@ -0,0 +1,289 @@
+<template>
+	<div
+		class="mouse-selection"
+		:style="{
+			height: mouse.height + 'px',
+			width: mouse.width + 'px',
+			left: mouse.left + 'px',
+			top: mouse.top + 'px'
+		}"
+		v-show="mouse.show"
+	></div>
+	<div
+		class="node-selection"
+		:style="[boxStyle]"
+		@mousedown="selection.onmousedown"
+		v-show="box.show"
+	></div>
+</template>
+
+<script setup lang="ts" name="node-selection">
+import { computed, onMounted, onUnmounted, reactive } from "vue";
+import { useFlow } from "../../hooks";
+import { FlowNode } from "../../types";
+import { isEmpty } from "lodash-es";
+
+const flow = useFlow();
+
+const mouse = reactive({
+	show: false,
+	startX: 0,
+	startY: 0,
+	endX: 0,
+	endY: 0,
+	x: 0,
+	y: 0,
+	left: 0,
+	top: 0,
+	width: 0,
+	height: 0
+});
+
+const box = reactive({
+	show: false,
+	left: 0,
+	top: 0,
+	width: 0,
+	height: 0
+});
+
+const boxStyle = computed(() => {
+	const { x, y } = flow.viewport;
+
+	return {
+		height: scale(box.height) + "px",
+		width: scale(box.width) + "px",
+		left: scale(box.left) + x + "px",
+		top: scale(box.top) + y + "px"
+	};
+});
+
+function scale(v: number) {
+	const { zoom } = flow.viewport;
+	return v * zoom;
+}
+
+function clear() {
+	mouse.show = false;
+	mouse.height = 0;
+	mouse.width = 0;
+	mouse.endX = 0;
+	mouse.endY = 0;
+
+	box.show = false;
+	box.height = 0;
+	box.width = 0;
+
+	selection.clear();
+}
+
+function onmousedown(e: MouseEvent) {
+	clear();
+
+	const el = e.target as HTMLElement;
+
+	if (el.nodeName != "DIV") {
+		return false;
+	}
+
+	if (!el.className?.includes("vue-flow__container")) {
+		return false;
+	}
+
+	if (flow.controlMode == "pointer") {
+		mouse.show = true;
+		mouse.x = e.offsetX;
+		mouse.y = e.offsetY;
+		mouse.left = mouse.x;
+		mouse.top = mouse.y;
+		mouse.startX = e.pageX;
+		mouse.startY = e.pageY;
+
+		document.addEventListener("mousemove", mousemove);
+		document.addEventListener("mouseup", onmouseup);
+	}
+}
+
+function mousemove(e: MouseEvent) {
+	if (mouse.show) {
+		mouse.width = Math.abs(e.pageX - mouse.startX);
+		mouse.height = Math.abs(e.pageY - mouse.startY);
+
+		if (e.pageY < mouse.startY) {
+			mouse.top = mouse.y - mouse.height;
+		} else {
+			mouse.top = mouse.y;
+		}
+
+		if (e.pageX < mouse.startX) {
+			mouse.left = mouse.x - mouse.width;
+		} else {
+			mouse.left = mouse.x;
+		}
+
+		mouse.endY = mouse.top;
+		mouse.endX = mouse.left;
+	}
+}
+
+function onmouseup() {
+	const { x: vx, y: vy } = flow.viewport;
+
+	let x1 = 0;
+	let x2 = 0;
+	let y1 = 0;
+	let y2 = 0;
+
+	let isSelected = false;
+
+	flow.nodes.forEach((e) => {
+		const { x = 0, y = 0 } = e.position || {};
+
+		// 节点大小
+		const nodeEl = document.querySelector(`div[data-id="${e.id}"]`);
+		const h = nodeEl?.clientHeight || 0;
+		const w = nodeEl?.clientWidth || 0;
+
+		// 检验是否包含
+		if (
+			nodeEl &&
+			mouse.endX < scale(x + w) + vx &&
+			mouse.endX + mouse.width > scale(x) + vx &&
+			mouse.endY < scale(y + h) + vy &&
+			mouse.endY + mouse.height > scale(y) + vy
+		) {
+			isSelected = true;
+
+			// 选中
+			selection.list.push(e);
+
+			if (!x1 || x1 > x) {
+				x1 = x;
+			}
+
+			if (!y1 || y1 > y) {
+				y1 = y;
+			}
+
+			if (!x2 || x2 < x + w) {
+				x2 = x + w;
+			}
+
+			if (!y2 || y2 < y + h) {
+				y2 = y + h;
+			}
+		}
+	});
+
+	// y1 -= 36;
+
+	// 有选中
+	if (isSelected) {
+		box.show = true;
+
+		box.left = x1;
+		box.top = y1;
+		box.width = x2 - x1;
+		box.height = y2 - y1;
+	}
+
+	mouse.show = false;
+
+	document.removeEventListener("mousemove", mousemove);
+	document.removeEventListener("mouseup", onmouseup);
+}
+
+const selection = reactive({
+	list: [] as FlowNode[],
+	startX: 0,
+	startY: 0,
+	x: 0,
+	y: 0,
+	lock: false,
+
+	clear() {
+		selection.list = [];
+	},
+
+	onmousedown(e: MouseEvent) {
+		e.stopPropagation();
+
+		selection.lock = true;
+		selection.startX = e.pageX;
+		selection.startY = e.pageY;
+
+		document.addEventListener("mouseup", selection.onmouseup);
+		document.addEventListener("mousemove", selection.onmousemove);
+	},
+
+	onmousemove(e: MouseEvent) {
+		if (selection.lock) {
+			const { zoom } = flow.viewport;
+
+			const x = (e.pageX - selection.startX) / zoom;
+			const y = (e.pageY - selection.startY) / zoom;
+
+			box.left += x;
+			box.top += y;
+
+			selection.list.forEach((e) => {
+				flow.updateNode(e.id!, {
+					position: {
+						x: (e.position?.x || 0) + x,
+						y: (e.position?.y || 0) + y
+					}
+				});
+			});
+
+			selection.startX = e.pageX;
+			selection.startY = e.pageY;
+		}
+	},
+
+	onmouseup() {
+		selection.lock = false;
+
+		document.removeEventListener("mouseup", selection.onmouseup);
+		document.removeEventListener("mousemove", selection.onmousemove);
+	},
+
+	onkeydown(e: KeyboardEvent) {
+		if (e.key == "Delete") {
+			if (!isEmpty(selection.list)) {
+				flow.removeNodes(selection.list);
+			} else {
+				if (flow.node) {
+					flow.removeNodes(flow.node);
+				}
+			}
+
+			clear();
+		}
+	}
+});
+
+onMounted(() => {
+	document.getElementById("cl-flow")?.addEventListener("mousedown", onmousedown);
+	document.addEventListener("keydown", selection.onkeydown);
+});
+
+onUnmounted(() => {
+	document.getElementById("cl-flow")?.removeEventListener("mousedown", onmousedown);
+	document.removeEventListener("keydown", selection.onkeydown);
+});
+</script>
+
+<style lang="scss" scoped>
+.mouse-selection,
+.node-selection {
+	position: absolute;
+	border: 1px solid var(--el-color-primary);
+	background-color: rgba(var(--el-color-primary-rgb), 0.05);
+	z-index: 9;
+	box-sizing: border-box;
+}
+
+.node-selection {
+	cursor: move;
+}
+</style>
diff --git a/src/modules/flow/components/tools/var.vue b/src/modules/flow/components/tools/var.vue
new file mode 100644
index 0000000..a0b6b41
--- /dev/null
+++ b/src/modules/flow/components/tools/var.vue
@@ -0,0 +1,466 @@
+<template>
+	<el-popover
+		:ref="setRefs('popover')"
+		trigger="click"
+		width="220px"
+		placement="bottom-start"
+		popper-class="cl-flow__popper"
+		:popper-style="{
+			padding: '0'
+		}"
+		:offset="5"
+		@show="onShow"
+		@hide="onHide"
+	>
+		<template #reference>
+			<div class="inner-item" v-if="showPicker">
+				<el-tooltip content="自定义输入" v-if="inputable">
+					<cl-svg
+						name="t"
+						class="btn-icon is-bg"
+						:style="{ margin: '0 5px 0 -5px' }"
+						@click.stop="input.open"
+					/>
+				</el-tooltip>
+
+				<span class="text" v-if="text">{{ text }}</span>
+				<span class="placeholder" v-else>{{ value ? "输入值" : "选择变量" }}</span>
+
+				<cl-svg name="close" class="btn-icon close" @click.stop="clear" v-if="text" />
+			</div>
+
+			<div class="tools-var__btn" :ref="setRefs('btn')" :style="{ position }" v-else></div>
+		</template>
+
+		<div class="tools-var">
+			<div class="search">
+				<el-input v-model="keyWord" placeholder="搜索变量" :prefix-icon="Search" />
+			</div>
+
+			<el-scrollbar max-height="500px">
+				<div
+					class="list"
+					:ref="setRefs('list')"
+					:tabindex="0"
+					@keydown.stop.prevent="onKeyDown"
+				>
+					<div class="group" v-for="(item, index) in list" :key="index">
+						<p class="label">{{ item.label }}</p>
+
+						<div
+							class="item"
+							v-for="param in item.params"
+							:key="param.field"
+							:class="{
+								active: `${item.id}_${param.field}` == `${nodeId}_${field}`,
+								focus: focusKey == `${item.id}_${param.field}`
+							}"
+							@click="select(param, item)"
+						>
+							<cl-svg class="icon" name="var" />
+							<span class="value">{{ param.field }}</span>
+							<span class="type">{{ param.type }}</span>
+						</div>
+					</div>
+				</div>
+
+				<div class="empty" v-if="isEmpty(list)">未找到匹配项</div>
+			</el-scrollbar>
+		</div>
+
+		<!-- 自定义输入 -->
+		<cl-dialog v-model="input.visible" title="自定义输入">
+			<el-input
+				type="textarea"
+				v-model="input.value"
+				:rows="20"
+				placeholder="请输入"
+				@change="input.onChange"
+			/>
+
+			<template #footer>
+				<el-button @click="input.close">取消</el-button>
+				<el-button type="success" @click="input.save">保存</el-button>
+			</template>
+		</cl-dialog>
+	</el-popover>
+</template>
+
+<script setup lang="ts" name="tools-var">
+import { computed, ref, useModel, reactive, PropType } from "vue";
+import { useFlow } from "../../hooks";
+import { isEmpty } from "lodash-es";
+import { Search } from "@element-plus/icons-vue";
+import type { FlowField } from "../../types";
+import { useCool } from "/@/cool";
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+	modelValue: {
+		type: String,
+		default: ""
+	},
+	nodeId: {
+		type: String,
+		default: ""
+	},
+	// 自定输入值
+	value: {
+		type: String,
+		default: ""
+	},
+	// 只选择模式，不双向绑定
+	onlySelect: Boolean,
+	// 只能选择当前节点的入参
+	useInputParams: Boolean,
+	// 是否能手动输入
+	inputable: Boolean,
+	// 显示选择器
+	showPicker: {
+		type: Boolean,
+		default: true
+	},
+	// 显示搜索
+	showSearch: {
+		type: Boolean,
+		default: true
+	},
+	// 是否自动获取焦点
+	autofocus: {
+		type: Boolean,
+		default: true
+	},
+	// 定位方式
+	position: {
+		type: String as PropType<"fixed" | "relative" | "absolute">,
+		default: "fixed"
+	}
+});
+
+const emit = defineEmits([
+	"update:modelValue",
+	"update:nodeId",
+	"update:nodeType",
+	"update:value",
+	"update:type",
+	"select"
+]);
+
+const { refs, setRefs } = useCool();
+const flow = useFlow();
+
+// 绑定值
+const field = useModel(props, "modelValue");
+
+// 绑定节点
+const nodeId = useModel(props, "nodeId");
+
+// 绑定自定义输入值
+const value = useModel(props, "value");
+
+// 关键字
+const keyWord = ref("");
+
+// 是否可见
+const visible = ref(false);
+
+// 事件
+const es = {
+	onSelect: (() => {}) as (item: FlowField) => void
+};
+
+// 列表
+const list = computed(() => {
+	const arr = flow.parentAllNodes(flow.node!.id!).map((e) => {
+		let params: FlowField[] = [];
+
+		if (e.type == "start") {
+			params = e.data?.inputParams || [];
+		} else {
+			params = e.data?.outputParams || [];
+		}
+
+		return {
+			id: e.id,
+			type: e.type,
+			label: e.label,
+			params
+		};
+	});
+
+	if (props.useInputParams) {
+		if (flow.node) {
+			const { id, type, label, data } = flow.node;
+
+			arr.splice(0, arr.length, {
+				id,
+				type,
+				label,
+				params: (data?.inputParams || []).filter((e) => e.nodeId)
+			});
+		}
+	}
+
+	return arr.filter((e) => {
+		return !isEmpty(e.params) && (keyWord.value ? e.label?.includes(keyWord.value) : true);
+	});
+});
+
+// 显示文案
+const text = computed(() => {
+	const node = list.value.find(
+		(e) => e.id == props.nodeId && e.params.find((p) => p.field == field.value)
+	);
+	return value.value || (node ? `${node?.label} / ${field.value}` : "");
+});
+
+// 选择
+function select(param: FlowField, node: any) {
+	close();
+
+	const d = {
+		...param,
+		nodeType: node.type,
+		nodeId: node.id,
+		nodeLabel: node.label,
+		value: ""
+	};
+
+	if (props.onlySelect) {
+		es.onSelect(d);
+	} else {
+		field.value = d.field;
+		emit("update:nodeType", d.nodeType);
+		emit("update:nodeId", d.nodeId);
+		emit("update:type", d.type);
+		emit("update:value", d.value);
+	}
+
+	emit("select", d);
+}
+
+// 清空
+function clear() {
+	field.value = "";
+	value.value = "";
+	emit("update:nodeType", "");
+	emit("update:nodeId", "");
+	emit("update:type", "");
+	emit("update:value", "");
+}
+
+// 打开
+function open(options: { rect?: { top: number; left: number }; onSelect?: () => void } = {}) {
+	if (options.rect) {
+		const { top, left } = options.rect || {};
+
+		refs.btn.style.top = `${top}px`;
+		refs.btn.style.left = `${left}px`;
+	}
+
+	if (options.onSelect) {
+		es.onSelect = options.onSelect;
+	}
+
+	if (!visible.value) {
+		refs.btn.click();
+	}
+}
+
+// 关闭
+function close() {
+	refs.popover.hide();
+}
+
+// 聚焦
+const focusKey = ref("");
+
+function focus(e?: KeyboardEvent) {
+	refs.list.focus();
+
+	if (e) {
+		onKeyDown(e);
+	}
+}
+
+// 自定义值输入
+const input = reactive({
+	visible: false,
+	value: "",
+
+	open() {
+		input.value = value.value;
+		input.visible = true;
+	},
+
+	close() {
+		input.visible = false;
+	},
+
+	save() {
+		if (!input.value) {
+			return ElMessage.warning("请输入内容");
+		}
+
+		value.value = input.value;
+		input.close();
+	},
+
+	onChange() {
+		field.value = "";
+		emit("update:nodeType", "");
+		emit("update:nodeId", "");
+		emit("update:type", "");
+	}
+});
+
+// 方向键控制
+function onKeyDown(e: KeyboardEvent) {
+	const arr = list.value
+		.map((e) => {
+			return e.params.map((p) => {
+				return {
+					...p,
+					node: e
+				};
+			});
+		})
+		.flat();
+
+	let index = 0;
+
+	const current = arr.findIndex((e) => focusKey.value == `${e.node.id}_${e.field}`);
+
+	switch (e.key) {
+		case "ArrowUp":
+			index = current - 1;
+			break;
+		case "ArrowDown":
+			index = current + 1;
+			break;
+		case "Enter":
+			select(arr[current], arr[current].node);
+			break;
+	}
+
+	const d = arr[index];
+
+	if (d) {
+		focusKey.value = `${d.node.id}_${d.field}`;
+	}
+}
+
+// 显示后
+function onShow() {
+	if (props.autofocus) {
+		focus();
+	}
+
+	visible.value = true;
+}
+
+// 隐藏后
+function onHide() {
+	visible.value = false;
+	focusKey.value = "";
+}
+
+defineExpose({
+	open,
+	close,
+	focus
+});
+</script>
+
+<style lang="scss" scoped>
+.tools-var {
+	padding-bottom: 5px;
+
+	.list {
+		outline: none;
+
+		.group {
+			padding: 0 5px;
+
+			.label {
+				display: flex;
+				align-items: center;
+				color: var(--el-text-color-secondary);
+				font-size: 12px;
+				height: 30px;
+				padding: 0 10px;
+			}
+
+			.item {
+				display: flex;
+				align-items: center;
+				height: 30px;
+				padding: 0 10px;
+				cursor: pointer;
+				border-radius: 6px;
+				font-size: 12px;
+
+				.icon {
+					height: 18px;
+					width: 18px;
+					flex-shrink: 0;
+				}
+
+				.value {
+					flex: 1;
+					margin: 0 5px;
+				}
+
+				.type {
+					color: var(--el-color-info);
+					max-width: 80px;
+				}
+
+				.value,
+				.type {
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+				}
+
+				&.active {
+					color: var(--el-color-primary);
+				}
+
+				&:hover,
+				&.focus {
+					background-color: var(--el-fill-color-lighter);
+				}
+			}
+		}
+	}
+
+	.empty {
+		padding: 10px 0 5px 0;
+		color: var(--el-text-color-placeholder);
+		font-size: 12px;
+		text-align: center;
+	}
+
+	.search {
+		border-bottom: 1px solid var(--el-fill-color-light);
+		padding: 5px;
+
+		:deep(.el-input__wrapper) {
+			box-shadow: none;
+			background-color: var(--el-fill-color-light);
+		}
+
+		&:last-child {
+			border-bottom: 0;
+			margin-bottom: -5px;
+		}
+	}
+
+	&__btn {
+		height: 16px;
+		width: 4px;
+		// position: fixed;
+	}
+}
+</style>
diff --git a/src/modules/flow/config.ts b/src/modules/flow/config.ts
new file mode 100644
index 0000000..2144c4d
--- /dev/null
+++ b/src/modules/flow/config.ts
@@ -0,0 +1,6 @@
+import { ModuleConfig } from "/@/cool";
+import "./static/index.scss";
+
+export default (): ModuleConfig => {
+	return {};
+};
diff --git a/src/modules/flow/hooks/flow.ts b/src/modules/flow/hooks/flow.ts
new file mode 100644
index 0000000..7022059
--- /dev/null
+++ b/src/modules/flow/hooks/flow.ts
@@ -0,0 +1,917 @@
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+import { sleep } from "/@/cool/utils";
+import { Connection, useVueFlow } from "@vue-flow/core";
+import { CustomNodes } from "../components/nodes";
+import {
+	assign,
+	cloneDeep,
+	debounce,
+	groupBy,
+	isArray,
+	isEmpty,
+	keys,
+	last,
+	orderBy
+} from "lodash-es";
+import type { FlowEdge, FlowField, FlowNode } from "../types";
+import { router, service, useCool } from "/@/cool";
+import { ElMessage, ElMessageBox } from "element-plus";
+
+const offset = {
+	x: 400,
+	y_t: -10,
+	y_b: 50,
+	g: 150
+};
+
+let id = 1;
+let req: Promise<any>;
+
+export const useFlow = () => {
+	const vueFlow = useVueFlow();
+	const { mitt } = useCool();
+
+	const store = defineStore(`flow-${vueFlow.id}`, () => {
+		// 所有节点
+		const nodes = computed(() => vueFlow.nodes.value as FlowNode[]);
+
+		// 所有线
+		const edges = computed(() => vueFlow.edges.value as FlowEdge[]);
+
+		// 当前选中的节点
+		const node = ref<FlowNode>();
+
+		// 选中节点
+		function setNode(data: any) {
+			node.value = data;
+			mitt.emit("flow.setNode", node.value);
+		}
+
+		// 清空节点
+		function clearNode() {
+			mitt.emit("flow.clearNode");
+
+			setTimeout(() => {
+				node.value = undefined;
+			}, 0);
+		}
+
+		// 添加节点
+		function addNode(type: string, options?: FlowNode) {
+			const item = CustomNodes.value.find((e) => e.type == type);
+
+			const data = {
+				type,
+				data: {
+					inputParams: [],
+					outputParams: [],
+					options: {}
+				},
+				position: {
+					x: 0,
+					y: 0
+				},
+				...item,
+				...options,
+				id: String(id++)
+			};
+
+			vueFlow.addNodes(cloneDeep(data));
+
+			return findNode(data.id);
+		}
+
+		// 插入节点，自动计算位置
+		function insertNode(type: string, source: FlowNode, options?: FlowNode) {
+			if (source) {
+				return addNode(type, {
+					position: calcPosition(source, undefined),
+					...options
+				});
+			} else {
+				return;
+			}
+		}
+
+		// 更新节点
+		function updateNode(id: string, data: any) {
+			const node = findNode(id);
+
+			if (node) {
+				// 不同类型，清空相关连线
+				if (data.name && data.name != node.name) {
+					removeEdgeByNodeId(id);
+
+					["handle", "data", "form"].forEach((k) => {
+						if (!data[k]) {
+							data[k] = {};
+						}
+					});
+				}
+
+				assign(node, data);
+				vueFlow.updateNode(id, data);
+			}
+		}
+
+		// 移除节点
+		function removeNodes(nodes: any[] | any, force?: boolean) {
+			// start 节点不能删除，除非 force 强制删除
+			const vals = (isArray(nodes) ? nodes : [nodes]).filter((e) =>
+				force ? true : e.type != "start"
+			);
+
+			// 移除节点
+			vueFlow.removeNodes(vals);
+
+			// 移除连线
+			vals.forEach((e) => {
+				removeEdgeByNodeId(e.id);
+
+				// 如果是当前选中节点，则清空
+				if (e.id == node.value?.id) {
+					clearNode();
+				}
+			});
+		}
+
+		// 搜索节点
+		function findNode(id: string) {
+			return nodes.value.find((n) => n.id === id) as FlowNode;
+		}
+
+		// 搜索节点
+		function findNodeByType(type: string) {
+			return nodes.value.find((n) => n.type === type) as FlowNode;
+		}
+
+		// 叶子节点
+		function leafNodes(id: string) {
+			return childrenAllNodes(id).filter((e) => isEmpty(childrenNodes(e.id!)));
+		}
+
+		// 兄弟节点
+		function slibingNodes(id: string, hasOwn: boolean = true) {
+			// 找上级节点
+			const pNode = parentNode(id);
+
+			// 找同级
+			return edges.value
+				.filter((e) => e.source == pNode?.id)
+				.map((e) => findNode(e.target))
+				.filter((e) => (hasOwn ? true : e.id != id));
+		}
+
+		// 父节点
+		function parentNode(id: string) {
+			const edge = edges.value.find((e) => e.target == id);
+			return edge ? findNode(edge.source!) : null;
+		}
+
+		// 所有父节点
+		function parentAllNodes(id: string) {
+			const nodes: FlowNode[] = [];
+
+			function next(id: string) {
+				const pNode = parentNode(id);
+
+				if (pNode) {
+					nodes.push(pNode);
+					next(pNode.id!);
+				}
+			}
+
+			next(id);
+
+			return nodes;
+		}
+
+		// 子节点
+		function childrenNodes(id: string, handle?: string): FlowNode[] {
+			const node = findNode(id);
+
+			// 下级连接线
+			const childrenEdges = edges.value.filter((e) => e.source == id);
+
+			// 下级连接点
+			const handles = node?.handle?.next || [{ value: "source" }];
+
+			// 根据连接点顺序返回
+			return handles
+				.filter((e) => {
+					return handle ? e.value == handle : true;
+				})
+				.map((a: { value: string }) => {
+					const edge = childrenEdges.find((e) => e.sourceHandle == a.value);
+					return (edge ? findNode(edge.target!) : null)!;
+				})
+				.filter((e) => !!e);
+		}
+
+		// 子所有节点
+		function childrenAllNodes(id: string, handle?: string) {
+			const nodes: FlowNode[] = [];
+
+			function next(id: string, i = 0) {
+				const children = childrenNodes(id, i == 0 ? handle : undefined);
+
+				children.forEach((e) => {
+					nodes.push(e);
+					next(e.id!, i + 1);
+				});
+			}
+
+			next(id, 0);
+
+			return nodes;
+		}
+
+		// 获取与节点所有连接的其他节点
+		function getConnectedNodes(nodeId: string) {
+			const pNodes = parentAllNodes(nodeId);
+			const cNodes = childrenAllNodes(nodeId);
+
+			return [...pNodes, findNode(nodeId), ...cNodes].filter((e) => !!e);
+		}
+
+		// 是否存在线
+		function hasEdge(connection: Connection) {
+			return edges.value.filter((e) => {
+				if (e.source == connection.source) {
+					if (connection.sourceHandle == e.sourceHandle) {
+						return true;
+					}
+				}
+
+				if (e.target == connection.target) {
+					if (connection.targetHandle == e.targetHandle) {
+						return true;
+					}
+				}
+
+				return false;
+			});
+		}
+
+		// 添加边线
+		function addEdge(connection: Connection) {
+			const list = hasEdge(connection);
+
+			if (!isEmpty(list)) {
+				removeEdges(list);
+			}
+
+			vueFlow.addEdges({
+				...connection,
+				animated: false,
+				updatable: true,
+				// markerEnd: MarkerType.ArrowClosed,
+				style: {
+					strokeWidth: 1.5
+				},
+				type: "button"
+			});
+		}
+
+		// 查找边线
+		function findEdge(id: string) {
+			return vueFlow.findEdge(id);
+		}
+
+		// 更新边线
+		function updateEdge(id: string, data: any) {
+			const edge = findEdge(id);
+
+			if (edge) {
+				vueFlow.updateEdge(edge, assign(edge, data), false);
+			}
+		}
+
+		// 移除线
+		function removeEdges(edge: any | any[]) {
+			vueFlow.removeEdges(edge);
+		}
+
+		// 根据节点移除线
+		function removeEdgeByNodeId(nodeId: string, type?: "source" | "target") {
+			const list = edges.value.filter((e) => {
+				if (type) {
+					return e[type] == nodeId;
+				}
+
+				return e.source == nodeId || e.target == nodeId;
+			});
+
+			removeEdges(list);
+
+			return list;
+		}
+
+		// 突出已连接的线
+		function activeEdge(nodeId: string, isShow: boolean) {
+			const primaryColor = getComputedStyle(document.documentElement).getPropertyValue(
+				`--el-color-primary`
+			);
+
+			edges.value
+				.filter((e) => e.target == nodeId || e.source == nodeId)
+				.forEach((e) => {
+					const stroke = isShow ? primaryColor : e._stroke || "";
+
+					// 记录之前的颜色
+					e._stroke = e.style?.stroke;
+
+					updateEdge(e.id, {
+						style: {
+							stroke
+						}
+					});
+				});
+		}
+
+		// 默认
+		function def() {
+			if (isEmpty(nodes.value)) {
+				const node = addNode("start", {
+					position: {
+						x: 100,
+						y: 100
+					}
+				});
+
+				setNode(node);
+			}
+		}
+
+		// 清空画布
+		function clear() {
+			// 清空线
+			removeEdges(edges.value);
+			// 清空节点
+			removeNodes(nodes.value, true);
+
+			// 默认
+			def();
+
+			// 设置视图
+			setViewport({ x: 0, y: 0 });
+		}
+
+		// 复制节点
+		const copyData = ref<FlowNode>();
+		function setCopyNode(node: any) {
+			copyData.value = cloneDeep(node);
+		}
+
+		// 缩放
+		const zoom = ref(100);
+		function setZoom(val: number) {
+			zoom.value = val;
+		}
+
+		// 控制模式
+		const controlMode = ref("hand");
+		function setControlMode(val: "pointer" | "hand") {
+			controlMode.value = val;
+			vueFlow.panOnDrag.value = val == "hand";
+		}
+
+		// 滚动距离 、缩放大小
+		const viewport = computed(() => {
+			return vueFlow.viewport.value || { zoom: 1.0 };
+		});
+
+		function setViewport(
+			{ x, y, zoom }: { x: number; y: number; zoom?: number },
+			duration = 300
+		) {
+			vueFlow.setViewport({ x, y, zoom: zoom || viewport.value.zoom }, { duration });
+		}
+
+		// 设置节点中心位置
+		async function setViewportByNode(node: FlowNode) {
+			if (!node) {
+				return false;
+			}
+
+			await sleep(10);
+
+			const { zoom } = viewport.value;
+
+			if (node) {
+				const flowEl = document.querySelector(".cl-flow");
+				const panelEl = document.querySelector(".cl-flow .tools-panel-right");
+				const nodeEl = document.querySelector(`div[data-id="${node.id}"]`);
+
+				const { x = 0, y = 0 } = node.position || {};
+
+				const top =
+					((flowEl?.clientHeight || 0) - (nodeEl?.clientHeight || 0) * zoom) / 2 -
+					y * zoom;
+				const left =
+					((flowEl?.clientWidth || 0) -
+						((panelEl?.clientWidth || 0) + 10) -
+						(nodeEl?.clientWidth || 0) * zoom) /
+						2 -
+					x * zoom;
+
+				setViewport({ x: left, y: top });
+			} else {
+				setViewport({ x: 0, y: 0 });
+			}
+		}
+
+		// 计算位置信息
+		function calcPosition(source: FlowNode, target?: FlowNode) {
+			const { x = 0, y = 0 } = source.position || {};
+
+			const position = {
+				x: x + offset.x,
+				y: 0
+			};
+
+			// 子节点
+			const nodes = childrenNodes(source.id!);
+
+			// 第一个子节点
+			const fNode = nodes[0];
+
+			// 【是否有相邻节点】有目标节点则判断是否与第一个相同，否则判断节点长度
+			if (target ? fNode?.id != target.id : !isEmpty(nodes)) {
+				// 计算到第几个子节点
+				const end = target ? nodes.findIndex((e) => e.id == target?.id) : nodes.length;
+
+				// 前几个节点高度之和，从第一个节点的 y 开始算
+				const height = nodes
+					.filter((_, i) => i < end)
+					.reduce(
+						(a, b) => {
+							return (
+								a +
+								(document.querySelector(`div[data-id="${b.id}"]`)?.clientHeight ||
+									0) +
+								offset.y_b
+							);
+						},
+						fNode?.position?.y || 0
+					);
+
+				position.y = height;
+			} else {
+				position.y = y - offset.y_t;
+			}
+
+			return position;
+		}
+
+		// 整理
+		async function arrange() {
+			if (node.value) {
+				clearNode();
+				await sleep(200);
+			}
+
+			const list = nodes.value as FlowNode[];
+
+			// 是否已连接
+			const conntected: string[] = [];
+
+			// 多个连接线
+			const group: FlowNode[][] = [];
+
+			list.forEach((e) => {
+				if (!conntected.includes(e.id!)) {
+					const nodes = [e, ...childrenAllNodes(e.id!)];
+
+					nodes.forEach((e) => {
+						conntected.push(e.id!);
+					});
+
+					// 判断最后一个是否相同
+					const sn = group.findIndex((e) => last(e)?.id == last(nodes)?.id);
+
+					if (sn >= 0) {
+						// 长的覆盖短的
+						if (nodes.length > group[sn].length) {
+							group[sn] = nodes;
+						}
+					} else {
+						group.push(nodes);
+					}
+				}
+			});
+
+			// 遍历组，计算每个节点
+			group.forEach((row, i) => {
+				// 起始
+				const x = 100;
+				let y = 100;
+
+				// 根据上一组的 y 值来计算当前
+				const prev = group[i - 1];
+
+				if (prev) {
+					const arr = prev.map((e) => {
+						return (
+							(e.position?.y || 0) +
+							(document.querySelector(`div[data-id="${e.id}"]`)?.clientHeight || 0)
+						);
+					});
+
+					y = Math.max(...arr.concat(0)) + offset.g;
+				}
+
+				const node = row[0];
+
+				if (node) {
+					// 更新首节点
+					updateNode(node.id!, {
+						position: {
+							x,
+							y
+						}
+					});
+
+					// 依次遍历子节点
+					function next(item: FlowNode) {
+						const children = childrenNodes(item.id!);
+
+						children.forEach((e) => {
+							updateNode(e.id!, {
+								position: calcPosition(item, e)
+							});
+
+							next(e);
+						});
+					}
+
+					next(node);
+				}
+			});
+
+			// 回到初始位置
+			setViewport({ x: 0, y: 0, zoom: 1 });
+		}
+
+		// 初始化
+		function init() {
+			// 设置删除键
+			vueFlow.deleteKeyCode.value = "none";
+
+			// 禁用点击连接
+			vueFlow.connectOnClick.value = false;
+		}
+
+		// 基本信息
+		const info = ref<Eps.FlowInfoEntity>();
+
+		// 获取
+		async function get(flowId?: number) {
+			await req;
+
+			return service.flow.info
+				.info({
+					id: flowId || info.value?.id
+				})
+				.then((res) => {
+					if (res) {
+						info.value = res;
+
+						// 还原节点
+						restore(res.draft);
+
+						// 开始节点
+						if (isEmpty(nodes.value)) {
+							def();
+						}
+					} else {
+						ElMessageBox.alert("流程不存在或异常，请重新选择。", "提示", {
+							callback() {
+								router.back();
+							}
+						});
+					}
+
+					return res;
+				});
+		}
+
+		/**
+		 * 提取传给后端的数据
+		 * @param nodes
+		 * @param edges
+		 * @returns
+		 */
+		function extractData(nodes, edges) {
+			const nodesResult = (nodes as FlowNode[]).map((e, i) => {
+				// 开始节点
+				if (e.type == "start") {
+					e.data?.inputParams?.forEach((p) => {
+						p.name = p.field;
+						p.nodeId = e.id;
+						p.nodeType = "start";
+					});
+				}
+
+				// 其他节点
+				else {
+					["inputParams", "outputParams"].forEach((k) => {
+						if (e.data?.[k]) {
+							e.data?.[k].forEach((e: FlowField) => {
+								const d = findNode(e.nodeId!);
+
+								if (d) {
+									e.nodeType = d.type;
+								}
+							});
+						}
+					});
+				}
+
+				return {
+					...e,
+					component: undefined,
+					form: undefined
+				};
+			});
+
+			const edgesResult = edges.map((e) => {
+				return {
+					...e,
+					animated: false,
+					style: {}
+				};
+			});
+
+			return {
+				nodes: nodesResult,
+				edges: edgesResult
+			};
+		}
+
+		// 保存
+		async function save() {
+			if (!info.value?.id) {
+				return false;
+			}
+
+			const { nodes, edges, viewport } = vueFlow.toObject();
+
+			// 提取有用数据
+			const { nodes: nodesResult, edges: edgesResult } = extractData(nodes, edges);
+
+			req = service.flow.info.update({
+				id: info.value?.id,
+				draft: {
+					nodes: nodesResult,
+					edges: edgesResult,
+					viewport
+				}
+			});
+
+			await req;
+		}
+
+		// 还原
+		async function restore(data: any) {
+			if (data) {
+				await vueFlow.fromObject(data);
+
+				// 还原缩放比例
+				zoom.value = viewport.value.zoom * 100;
+
+				// 替换为本地的配置
+				if (!isEmpty(nodes.value)) {
+					id = Math.max(...nodes.value.map((e) => Number(e.id))) + 1;
+
+					nodes.value.forEach((e) => {
+						const cn = CustomNodes.value.find((a) => a.type == e.type);
+
+						if (cn) {
+							// 处理卡片宽度
+							const configWidth = cn.form?.width || "400px";
+							const width = `${parseFloat(configWidth) + 30}px`;
+
+							e.component = cn.component;
+							e.form = cn.form;
+							e.color = cn.color;
+							e.group = cn.group;
+							e.validator = cn.validator;
+							e.cardWidth = width;
+						}
+					});
+				}
+			}
+		}
+
+		// 分组显示
+		function getGroup(keyWord: string) {
+			const d = groupBy(
+				CustomNodes.value.filter((e) => e.type != "start"),
+				"group"
+			);
+
+			let list = keys(d)
+				.map((k) => {
+					return {
+						label: k,
+						children: d[k].filter((e) => {
+							return keyWord ? e.label?.includes(keyWord) : true;
+						})
+					};
+				})
+				.filter((e) => {
+					return !isEmpty(e.children);
+				});
+
+			list = orderBy(list, "label", "asc");
+
+			return list;
+		}
+
+		// 视图x,y偏移
+		function viewPx(x: number, y: number) {
+			return [
+				(x - viewport.value.x) / viewport.value.zoom,
+				(y - viewport.value.y) / viewport.value.zoom
+			];
+		}
+
+		// 禁用拖拽
+		function disabledDrag() {
+			vueFlow.nodesDraggable.value = false;
+			vueFlow.panOnDrag.value = false;
+		}
+
+		// 启用拖拽
+		function enableDrag() {
+			vueFlow.nodesDraggable.value = true;
+			vueFlow.panOnDrag.value = true;
+		}
+
+		/**
+		 * 节点聚焦或失焦时调整子节点的位置
+		 * @param type open|close
+		 * @param node
+		 * @param id
+		 * @returns
+		 */
+		async function updateChildrenPosition(type: "open" | "close", node: FlowNode) {
+			if (node) {
+				let list = [] as FlowNode[];
+
+				if (type == "open") {
+					list = childrenAllNodes(node.id!);
+				} else {
+					list = nodes.value;
+				}
+
+				list.forEach((e) => {
+					e.isMoving = true;
+
+					if (type == "open") {
+						e._offset = {
+							x: parseInt(node.form?.width || "400px") - 300 + 30,
+							y: 0
+						};
+						e.position!.x += e._offset.x;
+					} else {
+						if (e._offset) {
+							e.position!.x -= e._offset.x;
+							delete e._offset;
+						}
+					}
+
+					updateNode(e.id!, e);
+
+					setTimeout(() => {
+						e.isMoving = false;
+					}, 200);
+				});
+			}
+		}
+
+		/**
+		 * 导出流程
+		 */
+		async function exportFlow() {
+			if (!info.value?.id) {
+				return false;
+			}
+
+			const { nodes, edges, viewport } = vueFlow.toObject();
+
+			// 提取有用数据
+			const { nodes: nodesResult, edges: edgesResult } = extractData(nodes, edges);
+
+			const flowInfo = cloneDeep(info.value);
+
+			// 处理无用数据
+			delete flowInfo.id;
+			delete flowInfo.createTime;
+			delete flowInfo.updateTime;
+			delete flowInfo.releaseTime;
+			delete flowInfo.draft;
+
+			// 导出的数据
+			const result = {
+				...flowInfo,
+				draft: {
+					nodes: nodesResult,
+					edges: edgesResult,
+					viewport
+				}
+			};
+
+			const dataStr = JSON.stringify(result, null, 2);
+			const dataBlob = new Blob([dataStr], { type: "application/json" });
+			const url = URL.createObjectURL(dataBlob);
+
+			const link = document.createElement("a");
+			link.setAttribute("href", url);
+			link.setAttribute("download", `${info.value?.name || "flow"}.json`);
+			link.click();
+
+			URL.revokeObjectURL(url);
+
+			ElMessage.success("导出成功");
+		}
+
+		const expose = {
+			CustomNodes,
+			nodes,
+			node,
+			addNode,
+			removeNodes,
+			setCopyNode,
+			insertNode,
+			setNode,
+			findNode,
+			findNodeByType,
+			slibingNodes,
+			parentNode,
+			parentAllNodes,
+			childrenNodes,
+			childrenAllNodes,
+			leafNodes,
+			getConnectedNodes,
+			clearNode,
+			updateNode,
+			edges,
+			addEdge,
+			findEdge,
+			updateEdge,
+			activeEdge,
+			removeEdges,
+			removeEdgeByNodeId,
+			copyData,
+			clear,
+			zoom,
+			setZoom,
+			controlMode,
+			setControlMode,
+			viewport,
+			setViewport,
+			setViewportByNode,
+			arrange,
+			init,
+			info,
+			get,
+			save,
+			restore,
+			getGroup,
+			viewPx,
+			offset,
+			disabledDrag,
+			enableDrag,
+			updateChildrenPosition,
+			exportFlow
+		};
+
+		// 事件传递
+		[
+			"addNodes",
+			"updateNode",
+			"removeNodes",
+			"addEdge",
+			"updateEdge",
+			"removeEdges",
+			"clear",
+			"arrange"
+		].forEach((k) => {
+			const fn = expose[k];
+
+			expose[k] = (...args: any[]) => {
+				const d = fn(...args);
+				mitt.emit(`flow.${k}`, d);
+
+				return d;
+			};
+		});
+
+		return expose;
+	});
+
+	return store();
+};
diff --git a/src/modules/flow/hooks/index.ts b/src/modules/flow/hooks/index.ts
new file mode 100644
index 0000000..975e964
--- /dev/null
+++ b/src/modules/flow/hooks/index.ts
@@ -0,0 +1 @@
+export * from "./flow";
diff --git a/src/modules/flow/index.ts b/src/modules/flow/index.ts
new file mode 100644
index 0000000..007f69d
--- /dev/null
+++ b/src/modules/flow/index.ts
@@ -0,0 +1 @@
+export * from "./hooks";
diff --git a/src/modules/flow/static/index.scss b/src/modules/flow/static/index.scss
new file mode 100644
index 0000000..a782a27
--- /dev/null
+++ b/src/modules/flow/static/index.scss
@@ -0,0 +1,36 @@
+.el-popper {
+	&.cl-flow__popper {
+		border-radius: 8px;
+
+		.el-popper__arrow {
+			display: none;
+		}
+
+		.el-scrollbar__view {
+			padding: 0;
+		}
+
+		.el-select-dropdown__item {
+			border-radius: 6px;
+			height: 30px;
+			font-size: 12px;
+			line-height: 30px;
+		}
+
+		&.el-select__popper {
+			margin: -7px 0;
+
+			.el-select-dropdown__wrap {
+				padding: 5px;
+			}
+		}
+
+		&:not(.el-select__popper) {
+			padding: 5px;
+		}
+
+		&.not-padding {
+			padding: 0;
+		}
+	}
+}
diff --git a/src/modules/flow/static/svg/add-btn-fill.svg b/src/modules/flow/static/svg/add-btn-fill.svg
new file mode 100644
index 0000000..e48c6bb
--- /dev/null
+++ b/src/modules/flow/static/svg/add-btn-fill.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="1718440749256" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2677" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m36.571429 195.047619h-73.142858v182.832761L292.571429 475.428571v73.142858l182.857142-0.024381V731.428571h73.142858v-182.857142H731.428571v-73.142858h-182.857142V292.571429z" p-id="2678"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/add-btn.svg b/src/modules/flow/static/svg/add-btn.svg
new file mode 100644
index 0000000..643bc23
--- /dev/null
+++ b/src/modules/flow/static/svg/add-btn.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="1718421202036" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2220" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m0 73.142857C323.486476 170.666667 170.666667 323.486476 170.666667 512s152.81981 341.333333 341.333333 341.333333 341.333333-152.81981 341.333333-341.333333S700.513524 170.666667 512 170.666667z m36.571429 121.904762v182.857142H731.428571v73.142858h-182.857142V731.428571h-73.142858v-182.881523L292.571429 548.571429v-73.142858l182.857142-0.024381V292.571429h73.142858z" p-id="2221"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/add.svg b/src/modules/flow/static/svg/add.svg
new file mode 100644
index 0000000..c5af320
--- /dev/null
+++ b/src/modules/flow/static/svg/add.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="1716370927117" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1680" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M548.571429 170.666667v304.761904H853.333333v73.142858H548.547048L548.571429 853.333333h-73.142858l-0.024381-304.761904H170.666667v-73.142858h304.761904V170.666667h73.142858z" p-id="1681"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/add2.svg b/src/modules/flow/static/svg/add2.svg
new file mode 100644
index 0000000..4a6f3c7
--- /dev/null
+++ b/src/modules/flow/static/svg/add2.svg
@@ -0,0 +1,17 @@
+<?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="1718345666348"
+	class="icon"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="2211"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="128"
+	height="128"
+>
+	<path
+		d="M3.43139366 512c0 280.86857143 227.70003492 508.56860634 508.56860634 508.56860634s508.56860634-227.70003492 508.56860634-508.56860634S792.86857143 3.43139366 512 3.43139366 3.43139366 231.13142857 3.43139366 512z m508.56860634-231.16754814a46.23351006 46.23351006 0 0 1 46.23351006 46.23350898v138.7005291h138.7005291a46.23351006 46.23351006 0 1 1 0 92.46702012h-138.7005291v138.7005291a46.23351006 46.23351006 0 1 1-92.46702012 0v-138.7005291H327.06596084a46.23351006 46.23351006 0 1 1 0-92.46702012h138.7005291V327.06596084a46.23351006 46.23351006 0 0 1 46.23351006-46.23350898z"
+		p-id="2212"
+	></path>
+</svg>
diff --git a/src/modules/flow/static/svg/arrange.svg b/src/modules/flow/static/svg/arrange.svg
new file mode 100644
index 0000000..6d1d1db
--- /dev/null
+++ b/src/modules/flow/static/svg/arrange.svg
@@ -0,0 +1,17 @@
+<?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="1716793445789"
+	class="icon"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="1488"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="128"
+	height="128"
+>
+	<path
+		d="M226.909091 186.181818c22.481455 0 40.727273 18.245818 40.727273 40.727273v570.181818a40.727273 40.727273 0 1 1-81.454546 0V226.909091C186.181818 204.427636 204.427636 186.181818 226.909091 186.181818zM791.272727 552.727273a46.545455 46.545455 0 0 1 46.545455 46.545454v69.818182a46.545455 46.545455 0 0 1-46.545455 46.545455H395.636364a46.545455 46.545455 0 0 1-46.545455-46.545455v-69.818182a46.545455 46.545455 0 0 1 46.545455-46.545454H791.272727z m-122.181818-244.363637a46.545455 46.545455 0 0 1 46.545455 46.545455v69.818182a46.545455 46.545455 0 0 1-46.545455 46.545454H395.636364a46.545455 46.545455 0 0 1-46.545455-46.545454v-69.818182a46.545455 46.545455 0 0 1 46.545455-46.545455h273.454545z"
+		p-id="1489"
+	></path>
+</svg>
diff --git a/src/modules/flow/static/svg/arrow-right.svg b/src/modules/flow/static/svg/arrow-right.svg
new file mode 100644
index 0000000..08ce56d
--- /dev/null
+++ b/src/modules/flow/static/svg/arrow-right.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="1718461931984" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2465" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 962.56C263.168 962.56 61.44 760.832 61.44 512S263.168 61.44 512 61.44s450.56 201.728 450.56 450.56-201.728 450.56-450.56 450.56z m180.85888-397.312c31.92832-29.61408 31.92832-76.88192 0-106.496L477.5936 259.13344a47.0016 47.0016 0 0 0-1.00352-0.90112c-19.456-17.01888-50.44224-16.52736-69.2224 1.10592-20.52096 19.29216-23.81824 48.82432-7.96672 71.4752l105.49248 150.58944c13.1072 18.67776 13.1072 42.55744 0 61.2352L398.9504 693.8624c-15.5648 22.26176-12.34944 51.3024 7.84384 70.26688l0.57344 0.55296 1.024 0.90112c19.31264 17.14176 50.29888 16.83456 69.2224-0.69632l215.26528-199.65952z" p-id="2466"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/back.svg b/src/modules/flow/static/svg/back.svg
new file mode 100644
index 0000000..ff46274
--- /dev/null
+++ b/src/modules/flow/static/svg/back.svg
@@ -0,0 +1,17 @@
+<?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="1717073489022"
+	class="icon"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="1759"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="128"
+	height="128"
+>
+	<path
+		d="M597.17744141 310.61005859H245.90849609l105.47666016-105.54257812a33.28154297 33.28154297 0 0 0 8.60625-32.15039063 33.28681641 33.28681641 0 0 0-23.54238281-23.52304687 33.27802734 33.27802734 0 0 0-32.13984375 8.62207031L162.66904297 299.62636719c-12.38730469 12.35039062-19.24541016 28.96523437-19.31132813 46.61455078a65.57255859 65.57255859 0 0 0 19.31132813 47.11201172l141.64013672 141.67529297c6.22880859 6.26484375 14.70322266 9.79101563 23.53886718 9.79101562s17.30830078-3.52617188 23.53710938-9.79101562a33.24638672 33.24638672 0 0 0 9.76464844-23.54238282 33.24814453 33.24814453 0 0 0-9.76464844-23.53886718L240.31425781 377.140625h356.8631836c119.53476562 0 216.75585938 97.08837891 216.75585937 216.42099609s-97.22109375 216.421875-216.75585937 216.421875H364.77265625c-18.38671875 0-33.29736328 14.91064453-33.29736328 33.29736329s14.91064453 33.29824219 33.29736328 33.29824218h232.40566406c156.22646484 0 283.34707031-126.95888672 283.34707031-283.01748047s-127.11972656-283.01660156-283.34707031-283.01660156"
+		p-id="1760"
+	></path>
+</svg>
diff --git a/src/modules/flow/static/svg/baidu.svg b/src/modules/flow/static/svg/baidu.svg
new file mode 100644
index 0000000..db32184
--- /dev/null
+++ b/src/modules/flow/static/svg/baidu.svg
@@ -0,0 +1,21 @@
+<?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="1718439017245"
+	class="icon"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="2457"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="128"
+	height="128"
+>
+	<path
+		d="M415.33999999 352.33999999c48.96 0 88.2-56.16 88.20000002-125.63999998 0-69.48-39.42000001-125.64-88.2-125.64s-88.38000001 56.16-88.38000001 125.64c0 69.48 39.6 125.64 88.38000001 125.64zM625.58000001 360.61999999c65.34000001 8.46000001 107.28-61.2 115.55999998-113.93999999 8.46000001-52.74000001-33.48-113.94000001-79.92-124.38000001-46.26000001-10.62000001-104.04 63.54000001-109.25999999 111.78000001-6.30000001 59.04 8.46000001 118.08 73.61999999 126.54000001zM251.17999999 529.45999999c88.38000001-19.08 76.32-124.56 73.62000001-147.77999999-4.32-35.64-46.08-97.74000001-102.96-92.88-71.46000001 6.30000001-81.90000001 109.8-81.90000001 109.8-9.72 47.70000001 23.04 149.94000001 111.24000002 130.86000001zM785.42000001 348.01999999c-77.94000001 0-88.38000001 71.64-88.38000001 122.40000002 0 48.42000001 4.14000001 116.10000001 100.98000001 113.93999999 96.84-2.16 86.22000001-109.62000001 86.21999999-135 0-25.38000001-20.88-101.34000001-98.82000001-101.33999999zM345.13999999 713.24c-2.52 7.38000001-8.28 26.46000001-3.41999999 43.02000001 9.90000001 37.08 42.12 38.70000001 42.12 38.69999999h46.26000001v-113.22000001H380.6c-22.32 6.66000001-33.12 24.12-35.46000001 31.50000001z"
+		p-id="2458"
+	></path>
+	<path
+		d="M785.42000001 670.94000001s-100.98000001-78.12-159.84000002-162.54000001c-79.92-124.38000001-193.50000001-73.8-231.29999999-10.62000001-37.8 63.36-96.66000001 103.32-105.12 114.12000002-8.46000001 10.44-121.86000001 71.64-96.66000001 183.59999998 25.2 111.78000001 113.58000001 109.62000001 113.58000001 109.62000001s65.16 6.48 140.94000001-10.44c75.6-16.74000001 140.76 4.14000001 140.75999998 4.14000001s176.76 59.22000001 225.18000001-54.90000001c48.24-113.94000001-27.54000001-172.98000001-27.54000001-172.98000001z m-302.40000002 169.55999998h-114.83999998c-49.68-9.90000001-69.48-43.74000001-71.82000001-49.49999999-2.52-5.76-16.56-33.12-9.17999999-79.38000001 21.42000001-69.48 82.62000001-74.34000001 82.61999999-74.33999999h61.2v-75.24l52.02000001 0.90000001v277.55999998z m214.02000001-0.89999999h-132.30000001c-51.30000001-13.14000001-53.64-49.50000001-53.63999998-49.49999999v-146.34000001l53.64-0.90000001v131.40000002c3.24 14.04 20.70000001 16.56 20.69999999 16.56h54.54000001v-147.06000001h57.05999999V839.6z"
+		p-id="2459"
+	></path>
+</svg>
diff --git a/src/modules/flow/static/svg/buckle.svg b/src/modules/flow/static/svg/buckle.svg
new file mode 100644
index 0000000..4b6d787
--- /dev/null
+++ b/src/modules/flow/static/svg/buckle.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="1720424518483" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1014" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M512 140m-138 0a138 138 0 1 0 276 0 138 138 0 1 0-276 0Z" fill="#A8B7BD" p-id="1015"></path><path d="M596.5 223.1c-59.6 47.5-146.4 37.7-193.9-21.8-15.6-19.6-25.1-42.2-28.6-65.3-0.9 31.5 8.9 63.5 30 90 47.5 59.6 134.3 69.3 193.9 21.8 40-31.9 57.5-81.4 50.4-128.6-1 39.2-18.7 77.6-51.8 103.9z" opacity=".52" p-id="1016"></path><path d="M512 886m-138 0a138 138 0 1 0 276 0 138 138 0 1 0-276 0Z" fill="#A8B7BD" p-id="1017"></path><path d="M427.5 802.9c59.6-47.5 146.4-37.7 193.9 21.8 15.6 19.6 25.1 42.2 28.6 65.3 0.9-31.5-8.9-63.5-30-90-47.5-59.6-134.3-69.3-193.9-21.8-40 31.9-57.5 81.4-50.4 128.6 1-39.2 18.7-77.6 51.8-103.9z" opacity=".52" p-id="1018"></path><path d="M512 767.3c72.7 0 132.1 56.3 137.4 127.6 0.3-3.4 0.5-6.9 0.5-10.4 0-76.2-61.8-138-138-138s-138 61.8-138 138c0 3.5 0.3 6.9 0.5 10.4 5.5-71.3 64.9-127.6 137.6-127.6z" fill="#63777C" opacity=".59" p-id="1019"></path><path d="M512 258.7c-72.7 0-132.1-56.3-137.4-127.6-0.3 3.4-0.5 6.9-0.5 10.4 0 76.2 61.8 138 138 138s138-61.8 138-138c0-3.5-0.3-6.9-0.5-10.4-5.5 71.3-64.9 127.6-137.6 127.6z" fill="#63777C" opacity=".59" p-id="1020"></path><path d="M512 929c-40.2 0-73.1-32.9-73.1-73.1v-689c0-40.2 32.9-73.1 73.1-73.1 40.2 0 73.1 32.9 73.1 73.1v689c0 40.2-32.9 73.1-73.1 73.1z" fill="#D3DCE0" p-id="1021"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/center.svg b/src/modules/flow/static/svg/center.svg
new file mode 100644
index 0000000..d1ee24e
--- /dev/null
+++ b/src/modules/flow/static/svg/center.svg
@@ -0,0 +1,17 @@
+<?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="1719286347764"
+	class="icon"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="2634"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="128"
+	height="128"
+>
+	<path
+		d="M512 669.95593262a157.95593262 157.95593262 0 1 1 0-315.91186524 157.95593262 157.95593262 0 0 1 0 315.91186524M512 141.21142578C307.25054932 141.21142578 141.21142578 307.25054932 141.21142578 512c0 204.82360841 166.03912354 370.78857422 370.78857422 370.78857422 204.78652954 0 370.78857422-166.03912354 370.78857422-370.78857422 0-204.82360841-166.00204468-370.78857422-370.78857422-370.78857422"
+		p-id="2635"
+	></path>
+</svg>
diff --git a/src/modules/flow/static/svg/change.svg b/src/modules/flow/static/svg/change.svg
new file mode 100644
index 0000000..49ea2ff
--- /dev/null
+++ b/src/modules/flow/static/svg/change.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="1716880046346" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1518" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M874.88 466.28571406c1.87428563 14.97142875 2.83428563 30.24 2.83428563 45.71428594 0 201.98857125-163.72571437 365.71428563-365.71428563 365.71428563-97.37142844 0-185.87428594-38.05714313-251.42857125-100.11428532V877.71428563H192.00000031l0.02285719-160.00000032L192.00000031 649.14285687h228.57142781v68.57142844h-122.97142781c54.07999969 56.36571469 130.14857156 91.42857188 214.39999969 91.42857188 164.11428563 0 297.14285719-133.02857156 297.14285719-297.14285719a299.42857125 299.42857125 0 0 0-3.49714313-45.71428594h69.25714313zM831.99999969 146.28571437l-0.02285719 160.00000032L831.99999969 374.85714313H603.42857188v-68.57142844h122.99428501A296.27428594 296.27428594 0 0 0 512 214.85714281C347.88571437 214.85714281 214.85714281 347.88571437 214.85714281 512c0 15.5428575 1.18857188 30.83428594 3.49714313 45.71428594h-69.25714313A369.32571469 369.32571469 0 0 1 146.28571437 512c0-201.98857125 163.72571437-365.71428563 365.71428563-365.71428563 97.37142844 0 185.89714313 38.08000031 251.42857125 100.1371425V146.28571437h68.57142844z" p-id="1519"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/classify.svg b/src/modules/flow/static/svg/classify.svg
new file mode 100644
index 0000000..7b41f2c
--- /dev/null
+++ b/src/modules/flow/static/svg/classify.svg
@@ -0,0 +1,17 @@
+<?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="1718694214022"
+	class="icon"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="2572"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="128"
+	height="128"
+>
+	<path
+		d="M375.25554688 490.60460937H242.23203125c-61.39546875 0-111.628125-50.23265625-111.628125-111.628125V245.95296875c0-61.39546875 50.23265625-111.628125 111.628125-111.628125h133.02351562c61.39546875 0 111.628125 50.23265625 111.628125 111.628125v133.02351562c0 61.39546875-49.30242188 111.628125-111.628125 111.628125zM242.23203125 208.74359375c-20.46515625 0-37.209375 16.74421875-37.209375 37.209375v133.02351562c0 20.46515625 16.74421875 37.209375 37.209375 37.209375h133.02351562c20.46515625 0 37.209375-16.74421875 37.209375-37.209375V245.95296875c0-20.46515625-16.74421875-37.209375-37.209375-37.209375H242.23203125zM781.76796875 490.60460937H648.74445312c-61.39546875 0-111.628125-50.23265625-111.628125-111.628125V245.95296875c0-61.39546875 50.23265625-111.628125 111.628125-111.628125H781.76796875c61.39546875 0 111.628125 50.23265625 111.628125 111.628125v133.02351562c0 61.39546875-50.23265625 111.628125-111.628125 111.628125zM648.74445312 208.74359375c-20.46515625 0-37.209375 16.74421875-37.209375 37.209375v133.02351562c0 20.46515625 16.74421875 37.209375 37.209375 37.209375H781.76796875c20.46515625 0 37.209375-16.74421875 37.209375-37.209375V245.95296875c0-20.46515625-16.74421875-37.209375-37.209375-37.209375H648.74445312zM781.76796875 889.67515625H648.74445312c-61.39546875 0-111.628125-50.23265625-111.628125-111.628125V645.02351562c0-61.39546875 50.23265625-111.628125 111.628125-111.628125H781.76796875c61.39546875 0 111.628125 50.23265625 111.628125 111.628125v133.02351563c0 61.39546875-50.23265625 111.628125-111.628125 111.628125zM648.74445312 607.81414062c-20.46515625 0-37.209375 16.74421875-37.209375 37.209375v133.02351563c0 20.46515625 16.74421875 37.209375 37.209375 37.209375H781.76796875c20.46515625 0 37.209375-16.74421875 37.209375-37.209375V645.02351562c0-20.46515625-16.74421875-37.209375-37.209375-37.209375H648.74445312zM375.25554688 889.67515625H242.23203125c-61.39546875 0-111.628125-50.23265625-111.628125-111.628125V645.02351562c0-61.39546875 50.23265625-111.628125 111.628125-111.628125h133.02351562c61.39546875 0 111.628125 50.23265625 111.628125 111.628125v133.02351563c0 61.39546875-49.30242188 111.628125-111.628125 111.628125zM242.23203125 607.81414062c-20.46515625 0-37.209375 16.74421875-37.209375 37.209375v133.02351563c0 20.46515625 16.74421875 37.209375 37.209375 37.209375h133.02351562c20.46515625 0 37.209375-16.74421875 37.209375-37.209375V645.02351562c0-20.46515625-16.74421875-37.209375-37.209375-37.209375H242.23203125z"
+		p-id="2573"
+	></path>
+</svg>
diff --git a/src/modules/flow/static/svg/close.svg b/src/modules/flow/static/svg/close.svg
new file mode 100644
index 0000000..2dba6d6
--- /dev/null
+++ b/src/modules/flow/static/svg/close.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="1716390632351" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1469" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M801.645714 170.666667l51.833905 51.590095L565.150476 511.951238l288.353524 289.670095-51.833905 51.614477-288.109714-289.450667L225.426286 853.23581 173.592381 801.621333l288.329143-289.670095L173.592381 222.256762 225.426286 170.666667l288.109714 289.426285L801.645714 170.666667z" p-id="1470"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/code.svg b/src/modules/flow/static/svg/code.svg
new file mode 100644
index 0000000..55a2238
--- /dev/null
+++ b/src/modules/flow/static/svg/code.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="1718694260110" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2572" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M164.43733366 506.89219034l200.387047-197.241905L313.52685666 257.52380934 59.42857166 507.62361934l254.439619 243.614476 50.590476-52.833524-200.021333-191.512381zM668.95238066 309.65028534L720.24990466 257.52380934l254.098286 250.09981L719.90857166 751.23809534l-50.590476-52.833524 200.021333-191.512381L668.95238066 309.65028534z m-112.981333-86.186666L404.66285666 774.88761934l70.534096 19.358476 151.30819-551.399619-70.534095-19.358476z" p-id="2573"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/config.svg b/src/modules/flow/static/svg/config.svg
new file mode 100644
index 0000000..3cad6ca
--- /dev/null
+++ b/src/modules/flow/static/svg/config.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="1716884725295" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3486" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M820.35714307 488.49285693l45.21428525 45.51428585-323.12142861 320.72142831-14.72142833-14.78571416 14.78571417 14.91428584H497.42857109v-45.49285722L820.35714307 488.49285693zM736.01428555 169.14285722a64.15714249 64.15714249 0 0 1 64.17857198 64.13571387l-0.02142862 192.45000059-64.15714336 64.13571387V233.27857109h-352.92857168v555.92142891h53.48571504l-64.15714336 64.13571387H265.46428583A64.15714249 64.15714249 0 0 1 201.28571386 789.22142862V233.27857109A64.15714249 64.15714249 0 0 1 265.46428583 169.14285722h470.57142832zM318.92857138 233.27857109H265.46428583v555.92142891h53.44285695V233.27857109z m288.77142833 192.42857198v64.15714248H436.57142891v-64.13571387h171.10714218z m64.17857197-128.27142862v64.13571387H436.57142891v-64.13571387h235.28571416z" p-id="3487"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/debug.svg b/src/modules/flow/static/svg/debug.svg
new file mode 100644
index 0000000..348f926
--- /dev/null
+++ b/src/modules/flow/static/svg/debug.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="1717657989150" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3270" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M491.98730469 133.74511719A140.625 140.625 0 0 0 371.375 272.9375v18.75585938h281.25V272.9375A140.625 140.625 0 0 0 491.98730469 133.74511719z m337.2890625 126.24609375a28.12851562 28.12851562 0 0 0-27.33398438 6.64453125L721.72460938 343.25H302.27539062l-80.24414062-76.58789063a28.1109375 28.1109375 0 1 0-38.8125 40.67578126l75.65625 72.24609374v155.87402344H146.375a28.125 28.125 0 0 0 0 56.25h112.5V624.5c0 46.546875 12.57011719 90.17226563 34.47949219 127.63476563L183.21875 857.28710938a28.12939453 28.12939453 0 1 0 38.83886719 40.70214843L327.27148437 797.55664063a252.3375 252.3375 0 0 0 156.62988282 78.52148437V540.125a28.125 28.125 0 0 1 56.25 0v335.953125a252.61875 252.61875 0 0 0 156.62988281-78.52148438l105.21386719 100.43261719a28.153125 28.153125 0 0 0 38.83886718-40.70214843L730.671875 752.13476563A252.28125 252.28125 0 0 0 765.125 624.5v-32.81835938h112.5a28.125 28.125 0 0 0 0-56.25H765.125V379.55761719l75.65625-72.21972657a28.12851562 28.12851562 0 0 0-11.50488281-47.34667968z" p-id="3271"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/delete.svg b/src/modules/flow/static/svg/delete.svg
new file mode 100644
index 0000000..24e3a17
--- /dev/null
+++ b/src/modules/flow/static/svg/delete.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="1717143871565" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1790" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M341.60141151 376.70903818l29.49947618 418.1851193h288.91800592l29.47680168-418.18511929h68.13676107L727.86088702 799.6784692a68.02338854 68.02338854 0 0 1-67.84199341 63.23907683H371.10088769a68.02338854 68.02338854 0 0 1-67.84199341-63.26175134L273.44197593 376.70903818h68.15943558z m148.06424263 21.06457624v317.44248017h-68.02338854v-317.44248017h68.02338854z m124.36942913 0v317.44248017h-68.02338853v-317.44248017h68.02338853zM171.88305637 263.33672365h680.23388727v68.02338853H171.88305637v-68.02338854z m481.99105789-113.37231456v68.02338854h-272.09355508v-68.02338855h272.09355508z" p-id="1791"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/edit.svg b/src/modules/flow/static/svg/edit.svg
new file mode 100644
index 0000000..5c370d6
--- /dev/null
+++ b/src/modules/flow/static/svg/edit.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="1717229832692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3195" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M652.625 315.125c0-15.46875001-12.65625001-28.125-28.12500001-28.125H315.125c-15.46875001 0-28.125 12.65625001-28.125 28.125s12.65625001 28.125 28.125 28.125h309.37499999c15.46875001 0 28.125-12.65625001 28.12500001-28.125zM624.50000001 455.75H315.125c-15.46875001 0-28.125 12.65625001-28.125 28.125s12.65625001 28.125 28.125 28.125h309.37499999c15.46875001 0 28.125-12.65625001 28.12500001-28.125s-12.65625001-28.125-28.12499999-28.125zM861.16660156 624.48330079l-39.77490234-39.77490235c-21.87597655-21.87597655-57.67382813-21.87597655-79.54980469 0L585.48359375 741.94560547l-39.77490234 119.32470703s-10.98369141 28.79121094 0 39.77490234 39.77490234 0 39.77490234 0l119.32382813-39.77490234L861.16660156 704.03222657c21.87597655-21.87597655 21.87597655-57.67294922 0-79.54892578z" p-id="3196"></path><path d="M202.625 765.125V230.75c0-30.9375 25.3125-56.25 56.25-56.25000001h421.875c30.9375 0 56.25 25.3125 56.25 56.25000001v281.25h56.25V230.75c0-61.875-50.625-112.50000001-112.5-112.5H258.875c-61.875 0-112.50000001 50.625-112.5 112.5v534.375c0 61.875 50.625 112.50000001 112.5 112.5h225v-56.25H258.875c-30.9375 0-56.25-25.3125-56.25-56.25z" p-id="3197"></path><path d="M455.75 624.50000001H315.125c-15.46875001 0-28.125 12.65625001-28.125 28.12499999s12.65625001 28.125 28.125 28.125h140.625c15.46875001 0 28.125-12.65625001 28.125-28.125s-12.65625001-28.125-28.125-28.12500001z" p-id="3198"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/end.svg b/src/modules/flow/static/svg/end.svg
new file mode 100644
index 0000000..850fd22
--- /dev/null
+++ b/src/modules/flow/static/svg/end.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="1716990147588" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1852" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M674.94419766 837.88839531H349.05580234a162.94419766 162.94419766 0 0 1-162.94419765-162.94419765V349.05580234a162.94419766 162.94419766 0 0 1 162.94419765-162.94419765h325.88839532a162.94419766 162.94419766 0 0 1 162.94419765 162.94419765v325.88839532a162.94419766 162.94419766 0 0 1-162.94419765 162.94419765z" p-id="1853"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/export.svg b/src/modules/flow/static/svg/export.svg
new file mode 100644
index 0000000..aef6328
--- /dev/null
+++ b/src/modules/flow/static/svg/export.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="1717229829126" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2873" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M877.625 343.20957031V343.25c0 15.53291018-12.59208983 28.125-28.12500001 28.125l-0.02636718-0.00087891c-0.24345703 0.00175781-0.48691406-0.0140625-0.73037109-0.01845703a28.84042969 28.84042969 0 0 1-1.23837891-0.05888672c-6.64013673-0.42011719-13.16074219-3.13769531-18.23554687-8.2125l-64.29902344-64.29902343-233.07978516 233.09824218c-10.98193359 10.9828125-28.78681641 10.9828125-39.76875 0-10.98193359-10.9828125-10.98193359-28.78945312 0-39.77226562L725.19980469 259.015625l-64.28496094-64.28496094c-5.07392578-5.07392578-7.79150391-11.59453125-8.21162109-18.23378906-0.02900391-0.41220703-0.04833984-0.82617188-0.05976563-1.24277344-0.00439453-0.24257812-0.02021484-0.48427734-0.01845703-0.72773437l-0.0008789-0.0272461c0-15.53291018 12.59208983-28.125 28.12499999-28.125H849.50000001c15.53291018 0 28.125 12.59208983 28.12499999 28.125v168.71044922zM202.625 237.78124999v548.4375c0 19.41591797 15.74033203 35.15625001 35.15625001 35.15625001h548.4375c19.41591797 0 35.15625001-15.74033203 35.15624999-35.15625001V568.25h56.25v217.96875001c0 50.48261719-40.92363281 91.40625001-91.40624999 91.40624999H237.78124999c-50.48261719 0-91.40625001-40.92451172-91.40624999-91.40625001V237.78124999c0-50.48261719 40.92363281-91.40625001 91.40625001-91.40624999h217.96874999v56.25H237.78124999c-19.41591797 0-35.15625001 15.74033203-35.15624999 35.15625001z" p-id="2874"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/flow.svg b/src/modules/flow/static/svg/flow.svg
new file mode 100644
index 0000000..366e568
--- /dev/null
+++ b/src/modules/flow/static/svg/flow.svg
@@ -0,0 +1,17 @@
+<?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="1718694051417"
+	class="icon"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="2572"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="128"
+	height="128"
+>
+	<path
+		d="M422 146c-30 48-12 114 42 144 48 30 114 12 144-36s12-114-36-144c-24-12-54-18-78-12-36 6-60 24-72 48z m480 510c-36-36-84-42-126-18-42 24-60 72-48 114 6 24 24 48 48 66 48 30 114 12 144-36 24-36 18-90-18-126z m-114-102c24-6 54-6 78 0V332l-180-84c-6 24-24 48-42 66l144 60v180zM98 758c6 24 24 48 48 66 24 12 54 18 78 12 24-6 48-24 66-48 18-30 18-72 0-102s-54-54-90-54-72 18-90 54c-18 18-24 42-12 72z m138-204V380l138-60c-18-18-30-42-42-66L152 338v222c36-12 60-12 84-6zM512 842l-138-60c-6 12-12 30-18 42-6 12-12 18-18 30l180 78 180-78c-18-18-30-42-42-66l-144 54z"
+		p-id="2573"
+	></path>
+</svg>
diff --git a/src/modules/flow/static/svg/fullscreen.svg b/src/modules/flow/static/svg/fullscreen.svg
new file mode 100644
index 0000000..a93b570
--- /dev/null
+++ b/src/modules/flow/static/svg/fullscreen.svg
@@ -0,0 +1,17 @@
+<?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="1718288474612"
+	class="icon"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="2040"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="200"
+	height="200"
+>
+	<path
+		d="M358.058667 128H156.970667A28.970667 28.970667 0 0 0 128 157.013333v202.837334c0 7.978667 6.528 14.506667 14.506667 14.506666h43.434666a14.506667 14.506667 0 0 0 14.506667-14.506666V200.448h157.610667a14.506667 14.506667 0 0 0 14.506666-14.506667V142.506667a14.506667 14.506667 0 0 0-14.506666-14.506667zM881.493333 649.642667h-43.434666a14.506667 14.506667 0 0 0-14.506667 14.506666v159.402667h-157.610667a14.506667 14.506667 0 0 0-14.506666 14.506667v43.434666c0 7.978667 6.570667 14.506667 14.506666 14.506667h201.088c16 0 28.970667-12.928 28.970667-29.013333v-202.837334a14.506667 14.506667 0 0 0-14.506667-14.506666zM358.058667 823.552H200.448v-159.402667a14.506667 14.506667 0 0 0-14.506667-14.506666H142.506667a14.506667 14.506667 0 0 0-14.506667 14.506666v202.88c0 16 12.970667 28.970667 29.013333 28.970667h201.045334a14.506667 14.506667 0 0 0 14.506666-14.506667v-43.434666a14.506667 14.506667 0 0 0-14.506666-14.506667zM866.986667 128h-201.088a14.506667 14.506667 0 0 0-14.506667 14.506667v43.434666c0 7.978667 6.570667 14.506667 14.506667 14.506667h157.610666v159.402667c0 7.978667 6.528 14.506667 14.506667 14.506666h43.434667a14.506667 14.506667 0 0 0 14.506666-14.506666V156.970667A28.928 28.928 0 0 0 866.986667 128z"
+		p-id="2041"
+	></path>
+</svg>
diff --git a/src/modules/flow/static/svg/hand.svg b/src/modules/flow/static/svg/hand.svg
new file mode 100644
index 0000000..1b3ef43
--- /dev/null
+++ b/src/modules/flow/static/svg/hand.svg
@@ -0,0 +1,17 @@
+<?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="1716884731537"
+	class="icon"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="3969"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="128"
+	height="128"
+>
+	<path
+		d="M498.86914062 148.1328125c-29.06191406 0-52.87148438 23.76210938-53.78906249 53.6625l-7.54628907 249.04335938-39.06035156-192.628125c-5.93261719-29.26757813-33.38085938-48.41015625-61.99980469-43.22109375l-3.25898437 0.58535156c-28.603125 5.20488281-48.04628906 32.84296875-43.90136719 62.45859375l33.06445313 235.81757812-51.11542969-129.94804687c-10.86855469-27.63808594-41.03789063-41.44921875-68.26464844-31.2609375l-3.63867188 1.36054687c-27.17929688 10.18828125-41.67070312 40.67402344-32.81132812 69.02402344l100.19003906 320.45625c15.26660156 37.88964844 21.95859375 65.44863281 77.61445313 103.67050781 55.65585937 38.221875 220.21875 45.92636719 297.32695312-24.75878906 28.08105469-25.75546875 68.10644531-74.24472656 89.65371094-106.83457031l117.38671875-161.88925781c18.06679687-24.88535156 14.12753906-59.97480469-8.9859375-79.95585938a55.14960938 55.14960938 0 0 0-77.63027344 5.17324219l-93.15 104.2875 42.74648438-305.1421875c4.14492187-29.615625-15.28242187-57.26953125-43.90136719-62.45859375l-3.25898438-0.58535157c-28.61894531-5.20488281-56.0671875 13.93769531-61.99980468 43.22109375l-39.02871094 192.628125-7.57792969-249.04335937C555.03125 171.89492188 531.22167969 148.1328125 502.15976563 148.1328125h-3.30644532z"
+		p-id="3970"
+	></path>
+</svg>
diff --git a/src/modules/flow/static/svg/history.svg b/src/modules/flow/static/svg/history.svg
new file mode 100644
index 0000000..afb6c6f
--- /dev/null
+++ b/src/modules/flow/static/svg/history.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="1717171718535" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1768" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M873.58203125 360.125c-19.86328125-46.84570313-48.1640625-88.9453125-84.375-125.06835938-36.12304688-36.12304688-78.22265625-64.51171875-125.06835938-84.37499999-48.515625-20.56640625-100.01953125-30.9375-153.19335937-30.9375s-104.67773438 10.37109375-153.19335938 30.9375c-46.84570313 19.86328125-88.9453125 48.1640625-125.06835937 84.375-36.12304688 36.12304688-64.51171875 78.22265625-84.375 125.06835937C127.7421875 408.640625 117.37109375 460.23242187 117.37109375 513.31835938s10.37109375 104.67773438 30.9375 153.19335937c19.86328125 46.84570313 48.1640625 88.9453125 84.375 125.06835938 36.12304688 36.12304688 78.22265625 64.51171875 125.06835938 84.37499999 48.515625 20.56640625 100.10742188 30.9375 153.19335937 30.9375 53.0859375 0 104.67773438-10.37109375 153.19335938-30.9375 46.84570313-19.86328125 88.9453125-48.1640625 125.06835937-84.375 36.12304688-36.12304688 64.51171875-78.22265625 84.375-125.06835937 20.56640625-48.515625 30.9375-100.10742188 30.9375-153.19335938 0-53.0859375-10.37109375-104.67773438-30.9375-153.19335937zM510.9453125 835.7890625c-177.80273438 0-322.47070313-144.66796875-322.47070313-322.47070313s144.66796875-322.47070313 322.47070313-322.47070312 322.47070313 144.66796875 322.47070313 322.47070313-144.58007813 322.47070313-322.47070313 322.47070312z" p-id="1769"></path><path d="M675.03710938 475.34960937H549.265625V293.328125c0-20.7421875-16.96289063-37.70507813-37.70507813-37.70507813-20.7421875 0-37.70507813 16.96289063-37.70507812 37.70507813v219.7265625c0 20.7421875 16.96289063 37.70507813 37.70507813 37.70507813h163.47656249c20.7421875 0 37.70507813-16.96289063 37.70507813-37.70507813-0.08789063-20.7421875-17.05078125-37.70507813-37.70507812-37.70507813z" p-id="1770"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/image.svg b/src/modules/flow/static/svg/image.svg
new file mode 100644
index 0000000..da20d3d
--- /dev/null
+++ b/src/modules/flow/static/svg/image.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="1716367071086" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1503" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M853.333333 170.666667a73.142857 73.142857 0 0 1 73.142857 73.142857v536.380952a73.142857 73.142857 0 0 1-73.142857 73.142857H170.666667a73.142857 73.142857 0 0 1-73.142857-73.142857V243.809524a73.142857 73.142857 0 0 1 73.142857-73.142857h682.666666z m0 73.142857H170.666667v536.380952h682.666666V243.809524z m-375.856762 168.057905l120.685715 120.685714 51.687619-51.712 172.422095 172.373333-51.712 51.736381-120.685714-120.685714-51.736381 51.736381-120.685715-120.685714-224.109714 224.109714-51.712-51.687619 275.846095-275.870476zM731.428571 292.571429a48.761905 48.761905 0 1 1 0 97.523809 48.761905 48.761905 0 0 1 0-97.523809z" p-id="1504"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/import.svg b/src/modules/flow/static/svg/import.svg
new file mode 100644
index 0000000..c606f25
--- /dev/null
+++ b/src/modules/flow/static/svg/import.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="1717229831019" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3034" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M786.21875001 877.625H237.78124999c-50.48261719 0-91.40625001-40.92451172-91.40624999-91.40625001V237.78124999c0-50.48261719 40.92363281-91.40625001 91.40625001-91.40624999h217.96874999v56.25H237.78124999c-19.41591797 0-35.15625001 15.74033203-35.15624999 35.15625001v548.4375c0 19.41591797 15.74033203 35.15625001 35.15625001 35.15624999h548.4375c19.41591797 0 35.15625001-15.74033203 35.15624999-35.15624999V568.25h56.25v217.96875001c0 50.48261719-40.92363281 91.40625001-91.40624999 91.40624999zM636.29931641 427.484375l64.28496093 64.28496094c5.07392578 5.07392578 7.79150391 11.59453125 8.2116211 18.23378906 0.02900391 0.41220703 0.04833984 0.82617188 0.05976562 1.24277344 0.00439453 0.24257812 0.02021484 0.48427734 0.01845703 0.72773437l0.00087891 0.0272461c0 15.53291018-12.59208983 28.125-28.125 28.125H512c-15.53291018 0-28.125-12.59208983-28.125-28.125V343.60595702a18.87890625 18.87890625 0 0 1 0-0.31552733V343.25c0-15.53291018 12.59208983-28.125 28.125-28.125l0.02636719 0.00087891c0.24345703-0.00175781 0.48691406 0.0140625 0.73037109 0.01845703 0.41484375 0.01142578 0.8279297 0.02988281 1.23837891 0.05888672 6.64013673 0.42011719 13.16074219 3.13769531 18.23554687 8.2125l64.29902344 64.29902343 233.07978516-233.09736328c10.98193359-10.9828125 28.78681641-10.9828125 39.76875 0 10.98193359 10.9828125 10.98193359 28.78945312 0 39.77226563L636.29931641 427.484375z" p-id="3035"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/info.svg b/src/modules/flow/static/svg/info.svg
new file mode 100644
index 0000000..906e10e
--- /dev/null
+++ b/src/modules/flow/static/svg/info.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="1718339726381" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7536" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m0 73.142857C323.486476 170.666667 170.666667 323.486476 170.666667 512s152.81981 341.333333 341.333333 341.333333 341.333333-152.81981 341.333333-341.333333S700.513524 170.666667 512 170.666667z m36.571429 268.190476v292.571428h-73.142858V438.857143h73.142858z m0-121.904762v73.142857h-73.142858v-73.142857h73.142858z" p-id="7537"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/judge.svg b/src/modules/flow/static/svg/judge.svg
new file mode 100644
index 0000000..267fe82
--- /dev/null
+++ b/src/modules/flow/static/svg/judge.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="1718694273693" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2572" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M894.76367188 725.3984375l-123.92578126-124.01367188c-12.12890625-12.74414063-32.25585938-13.18359375-45-0.96679687-6.41601563 6.15234375-9.93164063 14.67773438-9.75585937 23.5546875V712.390625H619.9296875c-22.23632813 0-43.2421875-8.70117188-58.97460938-24.43359375L424.4609375 551.375c-13.7109375-13.7109375-35.94726563-13.7109375-49.74609375 0-13.7109375 13.7109375-13.7109375 35.94726563 0 49.74609375l136.58203125 136.58203125c29.00390625 29.00390625 67.58789063 45 108.72070313 45h96.06445312v89.82421875c0.26367188 17.84179688 14.85351563 32.08007813 32.6953125 31.81640625 8.26171875-0.08789063 16.171875-3.42773438 22.06054688-9.22851563l124.01367187-124.01367187c12.48046875-12.65625 12.48046875-33.046875-0.08789063-45.703125zM493.98242187 425.42773437l101.16210938-105.29296874c6.328125-6.59179688 15.20507813-10.37109375 24.34570313-10.37109375H716.08203125v90c0.26367188 17.84179688 14.85351563 32.08007813 32.6953125 31.81640625 8.26171875-0.08789063 16.171875-3.42773438 22.06054688-9.22851563l124.01367187-124.01367187c12.56835938-12.56835938 12.56835938-33.046875 0-45.61523438L770.83789063 128.70898437c-12.12890625-12.74414063-32.25585938-13.18359375-45.00000001-0.96679687-6.41601563 6.15234375-9.93164063 14.67773438-9.75585937 23.5546875V239.5390625h-96.6796875c-28.21289063 0-55.546875 11.68945313-75.05859375 31.9921875l-101.07421875 105.20507813c-18.28125 19.07226563-44.03320313 29.97070313-70.40039063 29.97070312H156.13085937c-19.42382813 0-35.15625 15.73242188-35.15624999 35.15625s15.73242188 35.15625 35.15625 35.15625h216.65039062c45.52734375 0 89.6484375-18.80859375 121.20117188-51.59179688z" p-id="2573"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/know.svg b/src/modules/flow/static/svg/know.svg
new file mode 100644
index 0000000..cc879ea
--- /dev/null
+++ b/src/modules/flow/static/svg/know.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="1718503003523" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2495" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M744.55859375 124.40234344H279.44140625a116.27929688 116.27929688 0 0 0-116.27929688 116.27929688v542.63671936a116.27929688 116.27929688 0 0 0 116.27929688 116.27929688h465.1171875a116.27929688 116.27929688 0 0 0 116.27929688-116.27929688V240.68164032a116.27929688 116.27929688 0 0 0-116.27929688-116.27929688z m38.75976593 658.91601624a38.75976593 38.75976593 0 0 1-38.75976593 38.75976501H279.44140625a38.75976593 38.75976593 0 0 1-38.75976593-38.75976501v-38.75976593h542.63671936z m-542.63671936-116.27929687V240.68164032a38.75976593 38.75976593 0 0 1 38.75976593-38.75976501h465.1171875a38.75976593 38.75976593 0 0 1 38.75976593 38.75976501v426.35742249z" p-id="2496"></path><path d="M667.03906281 279.44140625H356.96093719a38.75976593 38.75976593 0 0 0 0 77.51953094h310.07812562a38.75976593 38.75976593 0 0 0 0-77.51953094zM512 434.48046906h-155.03906281a38.75976593 38.75976593 0 0 0 0 77.51953094h155.03906281a38.75976593 38.75976593 0 0 0 0-77.51953094z" p-id="2497"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/llm.svg b/src/modules/flow/static/svg/llm.svg
new file mode 100644
index 0000000..cd9bb83
--- /dev/null
+++ b/src/modules/flow/static/svg/llm.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="1718694227920" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3202" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M883.24999999 314.49999972c-3.75000029-11.25000001-11.25000001-18.74999973-22.49999999-22.50000001l-322.4999997-172.49999941c-15.00000031-7.49999971-33.75-7.49999971-48.75000029 0L163.25 291.99999972C148.24999971 299.5000003 136.99999972 318.24999999 136.99999972 336.99999972v337.49999999c0 18.74999973 11.25000001 37.50000029 26.25000028 45l322.4999997 172.50000032c11.25000001 3.75000029 22.50000001 7.49999971 33.75000001 3.75000029 3.75000029 0 11.25000001-3.75000029 15.00000028-3.75000029l322.49999973-172.50000032c18.74999973-7.49999971 29.9999997-26.2500003 30.0000006-45V336.99999972c0-7.49999971-3.75000029-15.00000031-3.75000031-22.50000001z m-363.75000028 191.25V824.50000002l-7.49999971 7.4999997-307.50000029-164.99999972V344.50000029L512 179.49999971l307.50000029 165.00000058-300.00000058 161.24999943z" p-id="3203"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/more.svg b/src/modules/flow/static/svg/more.svg
new file mode 100644
index 0000000..8be06a5
--- /dev/null
+++ b/src/modules/flow/static/svg/more.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="1716390629159" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1308" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M234.666667 566.857143a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m277.455238 0a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m277.455238 0a64 64 0 1 0 0-128 64 64 0 0 0 0 128z" p-id="1309"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/next.svg b/src/modules/flow/static/svg/next.svg
new file mode 100644
index 0000000..e3eeeda
--- /dev/null
+++ b/src/modules/flow/static/svg/next.svg
@@ -0,0 +1,17 @@
+<?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="1719286275476"
+	class="icon"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="2795"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="128"
+	height="128"
+>
+	<path
+		d="M155.1424819 832.99696547s7.25686178 18.75130759 16.95033534 1e-8c0 0 108.16432388-326.39988511 371.84797005-244.19076071v101.33122056s4.23758401 59.59102065 56.20095357 20.76416015l259.12824349-223.79738986s54.98264878-29.87496482-3.28412727-70.87358756L593.9442749 191.10897359s-39.40952867-28.07399184-48.9440918 18.00973118l-0.31781867 109.27668959c0.1059398 0.1059398-491.34783073 23.67749886-389.53988253 514.65454101z"
+		p-id="2796"
+	></path>
+</svg>
diff --git a/src/modules/flow/static/svg/number.svg b/src/modules/flow/static/svg/number.svg
new file mode 100644
index 0000000..6532556
--- /dev/null
+++ b/src/modules/flow/static/svg/number.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="1717407489204" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1950" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M866.375 395.828a7.875 7.875 0 0 0 7.875-7.875v-59.031a7.875 7.875 0 0 0-7.875-7.875h-161.469V157.625a7.875 7.875 0 0 0-7.812-7.875h-63a7.875 7.875 0 0 0-7.938 7.875v163.422H401.75V157.625a7.875 7.875 0 0 0-7.875-7.875h-63A7.875 7.875 0 0 0 323 157.625v163.422H157.625a7.875 7.875 0 0 0-7.875 7.875v59.031c0 4.347 3.528 7.875 7.875 7.875H323v232.344H157.625a7.875 7.875 0 0 0-7.875 7.875v59.031c0 4.347 3.528 7.875 7.875 7.875H323v163.422c0 4.347 3.528 7.875 7.875 7.875h63a7.875 7.875 0 0 0 7.875-7.875v-163.422h224.469v163.422c0 4.347 3.528 7.875 7.812 7.875h63a7.875 7.875 0 0 0 7.938-7.875v-163.422h161.406a7.875 7.875 0 0 0 7.875-7.875V636.11a7.875 7.875 0 0 0-7.875-7.875h-161.469V395.828h161.469zM626.156 628.172H401.75V395.828h224.469v232.344z" fill="#2D3040" p-id="1951"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/parse.svg b/src/modules/flow/static/svg/parse.svg
new file mode 100644
index 0000000..bb7b65a
--- /dev/null
+++ b/src/modules/flow/static/svg/parse.svg
@@ -0,0 +1,25 @@
+<?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="1718696975936"
+	class="icon"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="3263"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="128"
+	height="128"
+>
+	<path
+		d="M580.778667 896H213.333333a85.418667 85.418667 0 0 1-85.333333-85.333333V213.333333c0.042667-47.104 38.229333-85.290667 85.333333-85.333333h597.333334a85.418667 85.418667 0 0 1 85.333333 85.333333v368.725334a28.458667 28.458667 0 1 1-56.917333 0V213.333333c0-15.616-12.8-28.416-28.373334-28.416H213.333333A28.586667 28.586667 0 0 0 184.874667 213.333333v597.333334c0 15.658667 12.8 28.458667 28.416 28.458666h367.445333a28.416 28.416 0 1 1 0 56.874667z"
+		p-id="3264"
+	></path>
+	<path
+		d="M676.821333 354.858667H284.16A28.117333 28.117333 0 1 1 284.16 298.666667h392.704a28.117333 28.117333 0 1 1 0 56.192h-0.042667zM409.642667 537.6H284.16a28.16 28.16 0 1 1 0-56.234667H409.6a28.16 28.16 0 1 1 0 56.234667z m0 182.570667H284.16a28.16 28.16 0 1 1 0-56.234667H409.6a28.16 28.16 0 1 1 0.085333 56.234667H409.6zM616.789333 768a151.381333 151.381333 0 0 1-151.253333-151.168 151.381333 151.381333 0 0 1 151.253333-151.04A151.381333 151.381333 0 0 1 768 616.874667 151.338667 151.338667 0 0 1 616.746667 768z m0-246.016a94.976 94.976 0 0 0 0 189.781333 94.976 94.976 0 0 0 0-189.781333z"
+		p-id="3265"
+	></path>
+	<path
+		d="M800.341333 845.226667l-109.226666-109.269334a31.744 31.744 0 0 1 44.8-44.885333l109.226666 109.226667a31.744 31.744 0 0 1-44.8 44.885333z"
+		p-id="3266"
+	></path>
+</svg>
diff --git a/src/modules/flow/static/svg/pointer.svg b/src/modules/flow/static/svg/pointer.svg
new file mode 100644
index 0000000..02ffc9c
--- /dev/null
+++ b/src/modules/flow/static/svg/pointer.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="1716884851877" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1608" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M170.54138136 170.54138136l233.48093033 682.91723728 134.62811709-314.80818986 314.80818986-134.6281171z" p-id="1609"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/prev.svg b/src/modules/flow/static/svg/prev.svg
new file mode 100644
index 0000000..a0fa68e
--- /dev/null
+++ b/src/modules/flow/static/svg/prev.svg
@@ -0,0 +1,17 @@
+<?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="1719286278422"
+	class="icon"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="2956"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="128"
+	height="128"
+>
+	<path
+		d="M868.91048727 832.99696547s-7.30983169 18.75130759-16.95033461 1e-8c0 0-108.21729378-326.39988511-371.90093995-244.19076071v101.33122056s-4.23758401 59.59102065-56.20095357 20.76416015L164.73001565 487.10419563s-54.98264878-29.87496482 3.28412727-70.87358757L430.0557251 191.10897359s39.40952867-28.07399184 48.9440918 18.00973118l0.31781867 109.27668959c-0.1059398 0.1059398 491.34783073 23.67749886 389.5928517 514.65454101z"
+		p-id="2957"
+	></path>
+</svg>
diff --git a/src/modules/flow/static/svg/publish.svg b/src/modules/flow/static/svg/publish.svg
new file mode 100644
index 0000000..f1a0e57
--- /dev/null
+++ b/src/modules/flow/static/svg/publish.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="1718340748016" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2151" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M735.33007813 836.22851563L536.16992188 738.58203125c-14.85351563-7.29492188-21.09375001-25.22460938-13.79882813-40.16601563 3.515625-7.11914063 9.66796875-12.56835938 17.13867188-15.20507812 7.55859375-2.54882813 15.73242188-2.109375 22.93945312 1.40625l163.30078125 80.15625 70.48828125-482.60742188-317.4609375 380.91796876v177.01171875c0 16.5234375-13.44726563 29.97070313-29.97070313 29.97070312S418.8359375 856.61914063 418.8359375 840.09570313V653.24023438c0-1.58203125 0.08789063-3.07617188 0.3515625-4.65820313 0.703125-5.80078125 3.07617188-11.33789063 6.76757813-15.8203125L725.046875 273.81640625 245.515625 522.63476563l113.02734375 58.62304687c14.85351563 7.82226563 20.7421875 25.92773438 13.44726563 40.95703125-3.33984375 6.94335938-9.40429689 12.21679689-16.69921876 14.765625-7.29492188 2.54882813-15.29296875 2.02148438-22.23632812-1.31835938l-163.4765625-85.078125c-6.24023438-3.25195313-11.16210938-8.52539063-13.97460938-14.94140625-3.69140625-6.94335938-4.48242188-15.1171875-2.19726563-22.58789062 2.28515625-7.55859375 7.47070313-13.88671875 14.50195314-17.578125l658.828125-341.80664063c4.39453125-2.28515625 9.31640625-3.42773438 14.23828125-3.42773437 14.67773438-0.26367188 27.33398438 10.10742188 29.97070312 24.52148438 0.96679687 4.83398438 0.79101563 9.75585938-0.52734375 14.50195312L779.27539063 813.37695313c-1.93359375 13.53515625-12.56835938 23.5546875-25.40039063 25.48828124-6.328125 1.14257813-12.83203125 0.26367188-18.54492188-2.63671875z m-1e-8-1e-8" p-id="2152"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/reduce-btn-fill.svg b/src/modules/flow/static/svg/reduce-btn-fill.svg
new file mode 100644
index 0000000..a202d37
--- /dev/null
+++ b/src/modules/flow/static/svg/reduce-btn-fill.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="1718440747078" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2516" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m-219.428571 377.904761v73.142858h438.857142v-73.142858H292.571429z" p-id="2517"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/reduce-btn.svg b/src/modules/flow/static/svg/reduce-btn.svg
new file mode 100644
index 0000000..7663f42
--- /dev/null
+++ b/src/modules/flow/static/svg/reduce-btn.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="1718421204832" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2366" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m0 73.142857C323.486476 170.666667 170.666667 323.486476 170.666667 512s152.81981 341.333333 341.333333 341.333333 341.333333-152.81981 341.333333-341.333333S700.513524 170.666667 512 170.666667z m-219.428571 304.761904h438.857142v73.142858H292.571429v-73.142858z" p-id="2367"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/restore.svg b/src/modules/flow/static/svg/restore.svg
new file mode 100644
index 0000000..b545b36
--- /dev/null
+++ b/src/modules/flow/static/svg/restore.svg
@@ -0,0 +1,17 @@
+<?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="1718288476855"
+	class="icon"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="2186"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="200"
+	height="200"
+>
+	<path
+		d="M399.786667 260.565333a7.424 7.424 0 0 0-12.629334-4.352l-40.533333 40.533334L222.634667 172.8a7.424 7.424 0 0 0-10.496 0l-39.296 39.210667a7.424 7.424 0 0 0 0 10.496l123.989333 123.989333-40.704 40.704a7.424 7.424 0 0 0 4.352 12.629333l148.565333 17.493334c4.736 0.597333 8.832-3.413333 8.277334-8.234667L399.786667 260.565333z m9.386666 346.112l-148.693333 17.536a7.424 7.424 0 0 0-4.352 12.629334l40.704 40.704-123.989333 123.818666a7.466667 7.466667 0 0 0 0 10.496l39.296 39.253334a7.424 7.424 0 0 0 10.496 0l123.989333-123.946667 40.533333 40.533333a7.424 7.424 0 0 0 12.629334-4.352l17.493333-148.48a7.338667 7.338667 0 0 0-8.106667-8.192z m205.653334-189.354666l148.693333-17.536a7.424 7.424 0 0 0 4.352-12.629334l-40.704-40.618666 124.032-123.904a7.466667 7.466667 0 0 0 0-10.496l-39.338667-39.253334a7.466667 7.466667 0 0 0-10.496 0l-123.989333 123.861334-40.533333-40.533334a7.424 7.424 0 0 0-12.629334 4.352l-17.493333 148.48a7.381333 7.381333 0 0 0 8.106667 8.277334z m112.341333 260.138666l40.704-40.704a7.424 7.424 0 0 0-4.352-12.629333l-148.565333-17.493333a7.424 7.424 0 0 0-8.277334 8.234666l17.536 148.565334a7.424 7.424 0 0 0 12.629334 4.352l40.533333-40.533334 123.989333 123.904a7.466667 7.466667 0 0 0 10.496 0l39.338667-39.210666a7.466667 7.466667 0 0 0 0-10.496l-124.032-123.989334z"
+		p-id="2187"
+	></path>
+</svg>
diff --git a/src/modules/flow/static/svg/run.svg b/src/modules/flow/static/svg/run.svg
new file mode 100644
index 0000000..4c48c9f
--- /dev/null
+++ b/src/modules/flow/static/svg/run.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="1716881317058" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1732" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M277.03564011 200.70238183c-32.57058291 1.67513253-42.53205491 30.408704-43.7424482 58.18949531l-1.16508443 0.94501294s2.83762789 529.30692489 4.44026626 533.53100325c13.25218829 35.6075697 52.06503475 35.6140424 79.80828444 20.10417936l0.72494144 0.28479842s446.74256845-258.20860365 450.38281008-261.12131476c23.66545413-19.4426703 45.4305261-47.84354544 11.13302913-78.28072929 0 0-481.68733456-271.90222949-486.20268406-272.62976-5.61570702-0.94630747-10.72654412-1.26217482-15.37911466-1.02268523z" p-id="1733"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/run2.svg b/src/modules/flow/static/svg/run2.svg
new file mode 100644
index 0000000..9c49d5e
--- /dev/null
+++ b/src/modules/flow/static/svg/run2.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="1718340979343" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2151" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M738.18103028 397.05554199L397.05554199 174.58239746C352.56091308 144.91931152 311.77416992 141.21142578 278.40319824 159.75085449 241.32434082 178.2902832 222.78491211 215.36914062 222.78491211 267.27954102v489.44091796c0 51.91040039 18.53942872 88.98925781 51.91040039 107.52868653 11.12365723 7.41577148 25.9552002 11.12365723 40.78674317 11.12365722 25.9552002 0 51.91040039-11.12365723 77.86560058-25.9552002l344.83337403-233.59680175c40.78674317-29.66308594 63.03405762-66.74194336 63.03405761-111.23657226s-22.24731445-81.57348633-63.03405762-107.52868653z m-33.37097169 163.14697266l-344.83337402 233.59680176c-22.24731445 14.83154297-40.78674317 18.53942872-55.61828613 14.83154297-11.12365723-7.41577148-18.53942872-25.9552002-18.53942871-51.9104004V267.27954102c0-25.9552002 7.41577148-48.20251465 18.53942871-51.9104004 3.70788575-3.70788575 7.41577148-3.70788575 14.83154297-3.70788574 11.12365723 0 25.9552002 3.70788575 44.4946289 14.83154298l341.12548828 222.47314452c22.24731445 14.83154297 37.07885742 37.07885742 37.07885743 55.61828614s-14.83154297 40.78674317-37.07885743 55.61828613z" p-id="2152"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/save.svg b/src/modules/flow/static/svg/save.svg
new file mode 100644
index 0000000..a6f8f41
--- /dev/null
+++ b/src/modules/flow/static/svg/save.svg
@@ -0,0 +1,17 @@
+<?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="1719893344665"
+	class="icon"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="2698"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="128"
+	height="128"
+>
+	<path
+		d="M512 876.99500275C310.40869754 876.99500275 147.00499725 713.59130246 147.00499725 512S310.40869754 147.00499725 512 147.00499725s364.99500275 163.40370029 364.99500275 364.99500275-163.40370029 364.99500275-364.99500275 364.99500275z m0-68.43656302c163.79150748 0 296.55843973-132.76693225 296.55843973-296.55843973S675.79150748 215.44156027 512 215.44156027 215.44156027 348.20849252 215.44156027 512s132.76693225 296.55843973 296.55843973 296.55843973z m-32.53017962-225.90909451l179.50910479-196.77793085a32.46174306 32.46174306 0 0 1 48.36183786 0.15968532c13.34512979 14.462927 13.27669321 37.86823154-0.13687313 52.23990975l-203.59877497 222.66976387a32.46174306 32.46174306 0 0 1-48.24777691 0L339.60829776 550.09635342a39.05446529 39.05446529 0 0 1-0.15968531-52.23990977 32.46174306 32.46174306 0 0 1 48.38465006-0.15968532l91.63655787 84.95258689z"
+		p-id="2699"
+	></path>
+</svg>
diff --git a/src/modules/flow/static/svg/save2.svg b/src/modules/flow/static/svg/save2.svg
new file mode 100644
index 0000000..c2559d4
--- /dev/null
+++ b/src/modules/flow/static/svg/save2.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="1720423510907" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="978" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M750.90765392 699.12612387v155.34459258h103.56306253V352.18986667L683.59166461 181.31081482H181.31081482v673.15990163h103.56306132v-207.12612386h51.78153128v207.12612386h362.47071645v-155.34459258H336.65540742v-51.78153128h414.2522465v51.78153128z m-46.60337778-569.59684032L906.25224651 331.47725392V906.25224651H129.52928355V129.52928355h574.77499259zM284.87387614 284.87387614h51.78153128v258.90765513H284.87387614V284.87387614z" p-id="979"></path></svg>
diff --git a/src/modules/flow/static/svg/set.svg b/src/modules/flow/static/svg/set.svg
new file mode 100644
index 0000000..c0508a1
--- /dev/null
+++ b/src/modules/flow/static/svg/set.svg
@@ -0,0 +1,17 @@
+<?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="1717143922004"
+	class="icon"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="1790"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="128"
+	height="128"
+>
+	<path
+		d="M461.05859402 163.50817898a103.82080079 103.82080079 0 0 1 101.88281196 0l230.48217774 129.77600097a103.82080079 103.82080079 0 0 1 52.8793948 90.46252389v256.50659232a103.82080079 103.82080079 0 0 1-52.8793948 90.46252389l-230.48217774 129.77600097a103.82080079 103.82080079 0 0 1-101.88281196 0l-230.48217774-129.77600097a103.82080079 103.82080079 0 0 1-52.8793948-90.46252389V383.74670384A103.82080079 103.82080079 0 0 1 230.57641628 293.28417995z m67.93341012 60.35449165a34.60693386 34.60693386 0 0 0-33.98400826 0L264.56042454 353.60406521a34.60693386 34.60693386 0 0 0-17.64953613 30.14263863v256.50659232a34.60693386 34.60693386 0 0 0 17.64953613 30.14263863l230.48217773 129.77600098a34.60693386 34.60693386 0 0 0 33.98400906 0l230.48217773-129.77600098a34.60693386 34.60693386 0 0 0 17.64953614-30.14263863V383.74670384a34.60693386 34.60693386 0 0 0-17.64953614-30.14263863zM512 373.57226536a138.42773464 138.42773464 0 1 1 0 276.85546928 138.42773464 138.42773464 0 0 1 0-276.85546928z m0 69.21386772a69.21386692 69.21386692 0 1 0 0 138.42773384 69.21386692 69.21386692 0 0 0 0-138.42773384z"
+		p-id="1791"
+	></path>
+</svg>
diff --git a/src/modules/flow/static/svg/start.svg b/src/modules/flow/static/svg/start.svg
new file mode 100644
index 0000000..d3593f8
--- /dev/null
+++ b/src/modules/flow/static/svg/start.svg
@@ -0,0 +1,17 @@
+<?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="1718694291456"
+	class="icon"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="2726"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="128"
+	height="128"
+>
+	<path
+		d="M547.26857187 156.70857125l299.70285657 190.88000063A66.4228575 66.4228575 0 0 1 877.71428563 403.58857156v407.70285656A66.46857188 66.46857188 0 0 1 811.20000031 877.71428563h-265.1428575l0.02285719-204.48h-67.33714313v204.45714281L212.79999969 877.71428563A66.46857188 66.46857188 0 0 1 146.28571437 811.29142812V397.85142875c0-22.99428562 11.88571406-44.3428575 31.45142813-56.45714344l298.7428575-185.14285687a66.5371425 66.5371425 0 0 1 70.78857188 0.45714281zM809.14285719 809.14285719V404.38857125L511.52 214.85714281 214.85714281 398.67428562V809.14285719h198.10285688v-203.01714281h198.92571469v202.99428562L809.14285719 809.14285719z"
+		p-id="2727"
+	></path>
+</svg>
diff --git a/src/modules/flow/static/svg/switch.svg b/src/modules/flow/static/svg/switch.svg
new file mode 100644
index 0000000..8688c77
--- /dev/null
+++ b/src/modules/flow/static/svg/switch.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="1718875621508" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2700" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M297.30133333 487.76533333a34.13333333 34.13333333 0 0 1-48.46933333 48.46933334l-136.53333333-136.53333334a34.13333333 34.13333333 0 0 1 0-48.46933333l136.53333333-136.53333333a34.13333333 34.13333333 0 1 1 48.46933333 48.46933333L184.66133333 375.46666667z" p-id="2701"></path><path d="M136.53333333 409.6a34.13333333 34.13333333 0 0 1 0-68.26666667h409.6a34.13333333 34.13333333 0 0 1 0 68.26666667z m590.16533334 126.63466667a34.13333333 34.13333333 0 0 1 48.46933333-48.46933334l136.53333333 136.53333334a34.13333333 34.13333333 0 0 1 0 48.46933333l-136.53333333 136.53333333a34.13333333 34.13333333 0 0 1-48.46933333-48.46933333L839.33866667 648.53333333z" p-id="2702"></path><path d="M887.46666667 614.4a34.13333333 34.13333333 0 0 1 0 68.26666667H477.86666667a34.13333333 34.13333333 0 0 1 0-68.26666667z" p-id="2703"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/t.svg b/src/modules/flow/static/svg/t.svg
new file mode 100644
index 0000000..63021a8
--- /dev/null
+++ b/src/modules/flow/static/svg/t.svg
@@ -0,0 +1,17 @@
+<?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="1718878928754"
+	class="icon"
+	viewBox="0 0 1024 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="2574"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="128"
+	height="128"
+>
+	<path
+		d="M853.333333 144.00000034H170.666667a42.666667 42.666667 0 0 0-42.666667 42.666666v128a42.666667 42.666667 0 0 0 85.333333 0V229.33333334h256v554.666667H384a42.666667 42.666667 0 0 0 0 85.333333h256a42.666667 42.666667 0 0 0 0-85.333333h-85.333333V229.33333334h256v85.333333a42.666667 42.666667 0 0 0 85.333333 0V186.66666634a42.666667 42.666667 0 0 0-42.666667-42.666666z"
+		p-id="2575"
+	></path>
+</svg>
diff --git a/src/modules/flow/static/svg/template-transform.svg b/src/modules/flow/static/svg/template-transform.svg
new file mode 100644
index 0000000..0c098f3
--- /dev/null
+++ b/src/modules/flow/static/svg/template-transform.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="1716397164067" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1740" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M780.190476 97.52381a73.142857 73.142857 0 0 1 73.142857 73.142857v755.809523l-341.333333-152.380952L170.666667 926.47619V170.666667a73.142857 73.142857 0 0 1 73.142857-73.142857h536.380952z m0 73.142857H243.809524v643.047619l268.190476-119.710476 268.190476 119.710476V170.666667z m-121.904762 292.571428v73.142857H365.714286v-73.142857h292.571428z m0-170.666666v73.142857H365.714286v-73.142857h292.571428z" p-id="1741"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/text.svg b/src/modules/flow/static/svg/text.svg
new file mode 100644
index 0000000..9c65bf4
--- /dev/null
+++ b/src/modules/flow/static/svg/text.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="1716365761402" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1319" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M755.809524 182.857143V316.952381h-73.142857v-60.952381h-207.238096V804.571429H560.761905v73.142857H316.952381v-73.142857h85.333333V256h-219.428571V316.952381h-73.142857V182.857143H755.809524zM902.095238 804.571429v73.142857H609.52381v-73.142857h292.571428z m0-146.285715v73.142857H609.52381v-73.142857h292.571428z m0-146.285714v73.142857H609.52381v-73.142857h292.571428z" p-id="1320"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/var.svg b/src/modules/flow/static/svg/var.svg
new file mode 100644
index 0000000..1f5813c
--- /dev/null
+++ b/src/modules/flow/static/svg/var.svg
@@ -0,0 +1,17 @@
+<?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="1716305996632"
+	class="icon"
+	viewBox="0 0 1058 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="1038"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="66.125"
+	height="64"
+>
+	<path
+		d="M318.22521799 162.47466667v77.67229667h-35.92343666a38.83614777 38.83614777 0 0 0-38.60313088 34.29231844L243.46563357 278.98311111v155.34459222c0 29.86499755-11.26248334 57.08913778-29.70965334 77.67229667 17.08790557 19.02971221 27.96202667 43.69066667 29.51547222 70.83713422l0.19418112 6.83516245v155.34459222a38.83614777 38.83614777 0 0 0 34.29231843 38.56429511l4.54382933 0.27185266h35.92343666v77.67229667h-35.92343666a116.50844445 116.50844445 0 0 1-116.31426332-109.67328199L165.79333689 745.01688889v-155.34459222a38.83614777 38.83614777 0 0 0-34.33115534-38.5642951L126.95718912 550.83614777H85.16949333v-77.67229554h41.74885888a38.83614777 38.83614777 0 0 0 38.56429512-34.29231957L165.79333689 434.32770333V278.98311111a116.50844445 116.50844445 0 0 1 109.63444622-116.31426332L282.30178133 162.47466667h35.92343666z m663.12723001 310.68918556v77.67229554H939.56475221a38.83614777 38.83614777 0 0 0-38.56429511 34.29231957l-0.27185265 4.54382933v155.34459222a116.50844445 116.50844445 0 0 1-109.63444623 116.31426332L784.22016 861.52533333h-35.92343666v-77.67229667h35.92343666a38.83614777 38.83614777 0 0 0 38.60313088-34.29231844L823.05630777 745.01688889v-155.34459222c0-29.82616178 11.26248334-57.08913778 29.67081756-77.67229667a116.04241067 116.04241067 0 0 1-29.43780067-70.83713422L823.05630777 434.32770333V278.98311111a38.83614777 38.83614777 0 0 0-34.29231844-38.56429511L784.25899577 240.14696334h-35.92343666V162.47466667h35.92343666a116.50844445 116.50844445 0 0 1 116.31426446 109.67328199l0.19417998 6.83516245v155.34459222a38.83614777 38.83614777 0 0 0 34.33115534 38.5642951l4.50499357 0.2718538h41.74885888z m-557.99777621-107.88681956l111.26556444 111.26556445 108.58587022-108.50819869 54.95314888 54.91431424-108.58587023 108.54703332 108.35285333 108.35285334-54.87547733 54.95315-108.35285333-108.35285333-111.18789177 111.11022023-54.9143131-54.91431424 111.11021909-111.149056-111.26556444-111.30440021 54.91431424-54.91431311z"
+		p-id="1039"
+	></path>
+</svg>
diff --git a/src/modules/flow/static/svg/variable.svg b/src/modules/flow/static/svg/variable.svg
new file mode 100644
index 0000000..1f5813c
--- /dev/null
+++ b/src/modules/flow/static/svg/variable.svg
@@ -0,0 +1,17 @@
+<?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="1716305996632"
+	class="icon"
+	viewBox="0 0 1058 1024"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	p-id="1038"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	width="66.125"
+	height="64"
+>
+	<path
+		d="M318.22521799 162.47466667v77.67229667h-35.92343666a38.83614777 38.83614777 0 0 0-38.60313088 34.29231844L243.46563357 278.98311111v155.34459222c0 29.86499755-11.26248334 57.08913778-29.70965334 77.67229667 17.08790557 19.02971221 27.96202667 43.69066667 29.51547222 70.83713422l0.19418112 6.83516245v155.34459222a38.83614777 38.83614777 0 0 0 34.29231843 38.56429511l4.54382933 0.27185266h35.92343666v77.67229667h-35.92343666a116.50844445 116.50844445 0 0 1-116.31426332-109.67328199L165.79333689 745.01688889v-155.34459222a38.83614777 38.83614777 0 0 0-34.33115534-38.5642951L126.95718912 550.83614777H85.16949333v-77.67229554h41.74885888a38.83614777 38.83614777 0 0 0 38.56429512-34.29231957L165.79333689 434.32770333V278.98311111a116.50844445 116.50844445 0 0 1 109.63444622-116.31426332L282.30178133 162.47466667h35.92343666z m663.12723001 310.68918556v77.67229554H939.56475221a38.83614777 38.83614777 0 0 0-38.56429511 34.29231957l-0.27185265 4.54382933v155.34459222a116.50844445 116.50844445 0 0 1-109.63444623 116.31426332L784.22016 861.52533333h-35.92343666v-77.67229667h35.92343666a38.83614777 38.83614777 0 0 0 38.60313088-34.29231844L823.05630777 745.01688889v-155.34459222c0-29.82616178 11.26248334-57.08913778 29.67081756-77.67229667a116.04241067 116.04241067 0 0 1-29.43780067-70.83713422L823.05630777 434.32770333V278.98311111a38.83614777 38.83614777 0 0 0-34.29231844-38.56429511L784.25899577 240.14696334h-35.92343666V162.47466667h35.92343666a116.50844445 116.50844445 0 0 1 116.31426446 109.67328199l0.19417998 6.83516245v155.34459222a38.83614777 38.83614777 0 0 0 34.33115534 38.5642951l4.50499357 0.2718538h41.74885888z m-557.99777621-107.88681956l111.26556444 111.26556445 108.58587022-108.50819869 54.95314888 54.91431424-108.58587023 108.54703332 108.35285333 108.35285334-54.87547733 54.95315-108.35285333-108.35285333-111.18789177 111.11022023-54.9143131-54.91431424 111.11021909-111.149056-111.26556444-111.30440021 54.91431424-54.91431311z"
+		p-id="1039"
+	></path>
+</svg>
diff --git a/src/modules/flow/static/svg/zoom-in.svg b/src/modules/flow/static/svg/zoom-in.svg
new file mode 100644
index 0000000..ce25455
--- /dev/null
+++ b/src/modules/flow/static/svg/zoom-in.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="1716884746158" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1608" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M662.4644825 754.87166656C534.77019312 839.6754425 360.87694719 825.79709 248.30380906 713.23661187 119.89873062 584.84597281 119.89873062 376.68361813 248.30380906 248.29297906 376.7088875 119.90234 584.89465344 119.90234 713.29973188 248.29297906 825.8711675 360.85175281 839.7523625 534.72188281 754.9433225 662.40127813 756.76493656 663.88258063 758.53160937 665.47467688 760.23497375 667.17785L852.3628625 759.29537469C878.284475 785.21408 878.6585675 826.8625475 852.7985075 852.719705 827.117495 878.39783 785.683175 878.600645 759.36367437 852.2840975L667.23578937 760.16657656C665.53535188 758.46632938 663.94485125 756.69839375 662.4644825 754.87166656L662.4644825 754.87166656ZM666.80013969 666.74224906C769.52420187 564.02973781 769.52420187 397.49985313 666.80013969 294.78734188 564.07607656 192.07483063 397.52746437 192.07483063 294.80340125 294.78734188 192.07933812 397.49985313 192.07933812 564.02973781 294.80340125 666.74224906 397.52746437 769.45475937 564.07607656 769.45475937 666.80013969 666.74224906ZM452 452L332 452 332 512 452 512 452 632 512 632 512 512 632 512 632 452 512 452 512 332 452 332 452 452Z" fill="#666666" p-id="1609"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/static/svg/zoom-out.svg b/src/modules/flow/static/svg/zoom-out.svg
new file mode 100644
index 0000000..c8418dd
--- /dev/null
+++ b/src/modules/flow/static/svg/zoom-out.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="1716884748523" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1769" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M662.4644825 754.87166656C534.77019312 839.6754425 360.87694719 825.79709 248.30380906 713.23661187 119.89873062 584.84597281 119.89873062 376.68361813 248.30380906 248.29297906 376.7088875 119.90234 584.89465344 119.90234 713.29973188 248.29297906 825.8711675 360.85175281 839.7523625 534.72188281 754.9433225 662.40127813 756.76493656 663.88258063 758.53160937 665.47467688 760.23497375 667.17785L852.3628625 759.29537469C878.284475 785.21408 878.6585675 826.8625475 852.7985075 852.719705 827.117495 878.39783 785.683175 878.600645 759.36367437 852.2840975L667.23578937 760.16657656C665.53535188 758.46632938 663.94485125 756.69839375 662.4644825 754.87166656L662.4644825 754.87166656ZM666.80013969 666.74224906C769.52420187 564.02973781 769.52420187 397.49985313 666.80013969 294.78734188 564.07607656 192.07483063 397.52746437 192.07483063 294.80340125 294.78734188 192.07933812 397.49985313 192.07933812 564.02973781 294.80340125 666.74224906 397.52746437 769.45475937 564.07607656 769.45475937 666.80013969 666.74224906ZM332 452L332 512 632 512 632 452 332 452Z" fill="#666666" p-id="1770"></path></svg>
\ No newline at end of file
diff --git a/src/modules/flow/types/index.d.ts b/src/modules/flow/types/index.d.ts
new file mode 100644
index 0000000..ec30ec5
--- /dev/null
+++ b/src/modules/flow/types/index.d.ts
@@ -0,0 +1,83 @@
+import { CSSProperties } from "vue";
+
+declare type FlowField = {
+	field: string; // 自定义命名
+	type?: string; // 字段类型 string number ...
+	value?: string; // 自定义值
+	name?: string; // 选择的变量名
+	nodeId?: string; // 选择的节点ID
+	nodeType?: string; // 选择的节点类型 start end ...
+	label?: string; // 显示名称
+	required?: boolean; // 是否必填
+	[key: string]: any;
+};
+
+declare interface FlowData {
+	inputParams?: FlowField[];
+	outputParams?: FlowField[];
+	options?: any;
+}
+
+declare interface FlowNode {
+	enable?: boolean;
+	id?: string;
+	label?: string;
+	description?: string;
+	type?: string;
+	icon?: string;
+	name?: `node-${string}`;
+	position?: {
+		x: number;
+		y: number;
+	};
+	form?: {
+		width?: string;
+		focus?: string;
+		items: ClForm.Item[];
+	};
+	handle?: {
+		target?: boolean;
+		source?: boolean;
+		next?: { label: string; value: string; [key: string]: any }[];
+	};
+	data?: FlowData;
+	validator?(data: FlowData): void | string;
+	isDisableDrag?: boolean; // 是否禁用拖拽（部分组件跟拖拽事件冲突，需禁用。例：伪富文本dom）
+	[key: string]: any;
+}
+
+declare interface FlowEdge {
+	id: string;
+	type?: string;
+	target: string;
+	source: string;
+	targetHandle?: string | null;
+	sourceHandle?: string | null;
+	animated?: boolean;
+	style?: CSSProperties;
+	[key: string]: any;
+}
+
+declare interface FlowNodeResult {
+	duration: number;
+	isEnd: boolean;
+	nodeId?: string;
+	node?: FlowNode;
+	nextNodeId?: string;
+	inputParams?: any;
+	outputParams?: any;
+	llmStream?: boolean;
+	count?: {
+		tokenUsage: number;
+	};
+	result: {
+		success: boolean;
+		result: {
+			[key: string]: any;
+		};
+		error: {
+			message: string;
+		};
+	};
+	[key: string]: any;
+}
diff --git a/src/modules/flow/utils/index.ts b/src/modules/flow/utils/index.ts
new file mode 100644
index 0000000..7f1319a
--- /dev/null
+++ b/src/modules/flow/utils/index.ts
@@ -0,0 +1,37 @@
+import dayjs from "dayjs";
+
+export function formatTime(dateString?: Date): string {
+	if (!dateString) {
+		return "";
+	}
+
+	const now = dayjs();
+	const date = dayjs(dateString);
+
+	let secondsDiff = now.diff(date, "second");
+
+	if (secondsDiff < 60) {
+		if (secondsDiff < 0) {
+			secondsDiff = 0;
+		}
+
+		return `${secondsDiff || 1}秒前`;
+	}
+
+	const minutesDiff = now.diff(date, "minute");
+	if (minutesDiff < 60) {
+		return `${minutesDiff}分钟前`;
+	}
+
+	const hoursDiff = now.diff(date, "hour");
+	if (hoursDiff < 24) {
+		return `${hoursDiff}小时前`;
+	}
+
+	const isYesterday = now.isSame(date, "day");
+	if (isYesterday) {
+		return `昨天 ${date.format("HH:mm")}`;
+	}
+
+	return date.format("YYYY-MM-DD HH:mm");
+}
diff --git a/src/modules/flow/views/info.vue b/src/modules/flow/views/info.vue
new file mode 100644
index 0000000..8bb5727
--- /dev/null
+++ b/src/modules/flow/views/info.vue
@@ -0,0 +1,12 @@
+<template>
+	<cl-flow :flow-id="flowId" />
+</template>
+
+<script setup lang="ts" name="flow-info">
+import { useCool } from "/@/cool";
+import ClFlow from "/$/flow/components/index.vue";
+
+const { route } = useCool();
+
+const flowId = Number(route.query.id || "0");
+</script>
diff --git a/src/modules/flow/views/list.vue b/src/modules/flow/views/list.vue
new file mode 100644
index 0000000..f69d497
--- /dev/null
+++ b/src/modules/flow/views/list.vue
@@ -0,0 +1,169 @@
+<template>
+	<cl-crud ref="Crud">
+		<cl-row>
+			<!-- 刷新按钮 -->
+			<cl-refresh-btn />
+			<!-- 新增按钮 -->
+			<cl-add-btn />
+			<!-- 删除按钮 -->
+			<cl-multi-delete-btn />
+
+			<el-button @click="refs.nodeConfig?.open">配置</el-button>
+
+			<!-- 导入 -->
+			<import-btn @success="refresh" />
+
+			<cl-flex1 />
+			<!-- 关键字搜索 -->
+			<cl-search-key placeholder="搜索名称、标签" />
+		</cl-row>
+
+		<cl-row>
+			<!-- 数据表格 -->
+			<cl-table ref="Table" />
+		</cl-row>
+
+		<cl-row>
+			<cl-flex1 />
+			<!-- 分页控件 -->
+			<cl-pagination />
+		</cl-row>
+
+		<!-- 新增、编辑 -->
+		<cl-upsert ref="Upsert" />
+
+		<!-- 配置 -->
+		<node-config :ref="setRefs('nodeConfig')" />
+
+		<!-- 日志 -->
+		<module-log :ref="setRefs('logRef')" />
+	</cl-crud>
+</template>
+
+<script lang="ts" name="flow-list" setup>
+import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
+import { useCool } from "/@/cool";
+import NodeConfig from "../components/tools/node-config.vue";
+import ImportBtn from "../components/tools/import.vue";
+import ModuleLog from "/$/flow/components/log/index.vue";
+
+const { service, router, refs, setRefs } = useCool();
+
+// cl-upsert
+const Upsert = useUpsert({
+	props: {
+		labelWidth: "60px"
+	},
+	items: [
+		{
+			label: "名称",
+			prop: "name",
+			component: { name: "el-input", props: { clearable: true } },
+			required: true,
+			span: 12
+		},
+		{
+			label: "标签",
+			prop: "label",
+			component: {
+				name: "el-input",
+				props: { clearable: true, placeholder: "调用流程的标识" }
+			},
+			required: true,
+			span: 12
+		},
+		{
+			label: "状态",
+			prop: "status",
+			flex: false,
+			value: 1,
+			component: { name: "cl-switch" }
+		},
+		{
+			label: "描述",
+			prop: "description",
+			component: { name: "el-input", props: { type: "textarea", rows: 4 } }
+		}
+	]
+});
+
+// cl-table
+const Table = useTable({
+	columns: [
+		{ type: "selection" },
+		{ label: "名称", prop: "name", minWidth: 140 },
+		{
+			label: "标签",
+			prop: "label",
+			minWidth: 140
+		},
+		{ label: "状态", prop: "status", minWidth: 100, component: { name: "cl-switch" } },
+		{ label: "版本", prop: "version", minWidth: 100 },
+		{ label: "描述", prop: "description", showOverflowTooltip: true, minWidth: 200 },
+		{
+			label: "发布时间",
+			prop: "releaseTime",
+			minWidth: 170,
+			sortable: "desc",
+			formatter(row) {
+				return row.releaseTime || "未发布";
+			}
+		},
+		{
+			label: "创建时间",
+			prop: "createTime",
+			minWidth: 170,
+			sortable: "custom"
+		},
+		{
+			label: "更新时间",
+			prop: "updateTime",
+			minWidth: 170,
+			sortable: "custom"
+		},
+		{
+			type: "op",
+			buttons: [
+				"edit",
+				"delete",
+				{
+					label: "编排",
+					hidden: !service.flow.info._permission.update,
+					onClick({ scope }) {
+						router.push({
+							path: "/flow/info",
+							query: {
+								id: scope.row.id
+							}
+						});
+					}
+				},
+				{
+					label: "日志",
+					type: "warning",
+					hidden: !service.flow.info._permission.update,
+					onClick({ scope }) {
+						refs.logRef?.open(scope.row);
+					}
+				}
+			],
+			width: 300
+		}
+	]
+});
+
+// cl-crud
+const Crud = useCrud(
+	{
+		service: service.flow.info
+	},
+	(app) => {
+		app.refresh();
+	}
+);
+
+// 刷新
+function refresh() {
+	Crud.value?.refresh();
+}
+</script>
diff --git a/src/modules/know/components/config.vue b/src/modules/know/components/config.vue
new file mode 100644
index 0000000..6847c6a
--- /dev/null
+++ b/src/modules/know/components/config.vue
@@ -0,0 +1,366 @@
+<template>
+	<el-button @click="open">配置</el-button>
+
+	<cl-dialog
+		v-model="visible"
+		title="功能配置"
+		height="700px"
+		width="1200px"
+		padding="0"
+		:scrollbar="false"
+		@close="onClose"
+	>
+		<cl-view-group ref="ViewGroup">
+			<template #item="{ item, selected }">
+				<div
+					class="node-item"
+					:class="{
+						'is-active': selected?.type == item.type
+					}"
+				>
+					<span>{{ item.title }}</span>
+				</div>
+			</template>
+
+			<template #right>
+				<div class="opbar">
+					<el-button type="success" size="small" @click="Crud?.rowAdd()">添加</el-button>
+				</div>
+
+				<cl-crud ref="Crud" padding="0 10px">
+					<el-row :gutter="10">
+						<el-col :span="8" :xs="24" v-for="(item, index) in list" :key="index">
+							<div class="data-item">
+								<div class="head">
+									<span class="name">{{ item.name }}</span>
+
+									<cl-svg name="delete" @click="Crud?.rowDelete(item)" />
+									<cl-svg name="set" @click="Crud?.rowEdit(item)" />
+								</div>
+
+								<div class="content">
+									<el-text size="small" type="info" :line-clamp="4">
+										{{ item.description || "暂无描述" }}
+									</el-text>
+								</div>
+							</div>
+						</el-col>
+					</el-row>
+
+					<cl-upsert ref="Upsert">
+						<template #slot-options="{ scope }">
+							<cl-editor-monaco v-model="scope.options" />
+
+							<el-tooltip content="重置">
+								<cl-svg name="change" class="options-btn" @click="reset" />
+							</el-tooltip>
+						</template>
+					</cl-upsert>
+
+					<div class="empty" v-if="isEmpty(list)">
+						<el-empty :image-size="100" />
+					</div>
+				</cl-crud>
+			</template>
+		</cl-view-group>
+	</cl-dialog>
+</template>
+
+<script setup lang="ts" name="know-config">
+import { ref } from "vue";
+import { useCool } from "/@/cool";
+import { useViewGroup } from "/@/plugins/view";
+import { useCrud, useUpsert } from "@cool-vue/crud";
+import { isEmpty, keys } from "lodash-es";
+
+const emit = defineEmits(["close"]);
+
+const { service } = useCool();
+
+// 列表数据
+const list = ref<Eps.FlowConfigEntity>([]);
+
+// 配置
+const config = ref({});
+
+// 分组
+const { ViewGroup } = useViewGroup({
+	enableAdd: false,
+	enableContextMenu: false,
+	enableKeySearch: false,
+	label: "功能",
+	title: "配置",
+	service: {
+		async page(params) {
+			return service.know.config.all(params).then((res) => {
+				return {
+					list: res.map((e) => {
+						return {
+							...e,
+							name: e.title
+						};
+					}),
+					pagination: {
+						total: res.length,
+						page: 1,
+						size: 100
+					}
+				};
+			});
+		}
+	},
+	onSelect(item) {
+		refresh({
+			func: item.type
+		});
+	}
+});
+
+// Crud
+const Crud = useCrud({
+	service: service.know.config,
+	async onRefresh(params, { next }) {
+		const res = await next({
+			...params,
+			size: 1000
+		});
+
+		list.value = res.list;
+	}
+});
+
+// Upsert
+const Upsert = useUpsert({
+	dialog: {
+		width: "800px"
+	},
+	props: {
+		labelPosition: "top"
+	},
+	items: [
+		{
+			label: "类型",
+			prop: "type",
+			component: {
+				name: "el-select",
+				options: [],
+				props: {
+					onChange(val: string) {
+						Upsert.value?.setForm(
+							"options",
+							JSON.stringify(config.value[val], null, 4)
+						);
+					}
+				}
+			},
+			span: 8,
+			required: true
+		},
+		{
+			label: "名称",
+			prop: "name",
+			component: {
+				name: "el-input"
+			},
+			span: 16,
+			required: true
+		},
+		{
+			label: "描述",
+			prop: "description",
+			component: {
+				name: "el-input",
+				props: {
+					type: "textarea",
+					rows: 3
+				}
+			}
+		},
+		{
+			label: "配置",
+			prop: "options",
+			component: {
+				name: "slot-options"
+			}
+		}
+	],
+
+	onOpen() {
+		service.know.config
+			.config({
+				func: ViewGroup.value?.selected?.type
+			})
+			.then((res) => {
+				config.value = res;
+
+				// 类型
+				const types = keys(res).map((e) => {
+					return {
+						label: e,
+						value: e
+					};
+				});
+
+				// 设置类型
+				Upsert.value?.setOptions("type", types);
+
+				// 默认值
+				if (Upsert.value?.mode == "add") {
+					const type = types[0]?.value;
+
+					if (type) {
+						Upsert.value?.setForm("type", type);
+						Upsert.value?.setForm("options", config.value[type]);
+					}
+				}
+			});
+	},
+
+	onSubmit(data, { next }) {
+		next({
+			...data,
+			func: ViewGroup.value?.selected?.type
+		});
+	}
+});
+
+// 刷新列表
+function refresh(params?: any) {
+	Crud.value?.refresh(params);
+}
+
+// 重置
+function reset() {
+	const type = Upsert.value?.getForm("type");
+	Upsert.value?.setForm("options", JSON.stringify(config.value[type], null, 4));
+}
+
+// 是否可见
+const visible = ref(false);
+
+// 打开
+function open() {
+	visible.value = true;
+}
+
+// 关闭
+function close() {
+	visible.value = false;
+}
+
+function onClose() {
+	emit("close");
+}
+
+defineExpose({
+	open,
+	close
+});
+</script>
+
+<style lang="scss" scoped>
+.node-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 40px;
+	padding: 0 10px;
+	margin: 0 10px;
+	border-radius: 6px;
+	margin-bottom: 10px;
+	cursor: pointer;
+
+	.cl-svg {
+		font-size: 20px;
+		color: var(--el-color-info);
+	}
+
+	&.is-active,
+	&:hover {
+		background-color: var(--el-bg-color-page);
+	}
+}
+
+.data-item {
+	display: flex;
+	flex-direction: column;
+	height: 120px;
+	width: 100%;
+	border-radius: 10px;
+	box-sizing: border-box;
+	margin-bottom: 10px;
+	cursor: pointer;
+	transition: all 0.3s;
+	position: relative;
+	padding: 10px;
+	border: 1px solid var(--el-bg-color-page);
+
+	.head {
+		display: flex;
+		align-items: center;
+		margin-bottom: 5px;
+
+		.name {
+			font-size: 14px;
+			font-weight: bold;
+			margin-right: auto;
+		}
+
+		.cl-svg {
+			padding: 3px;
+			border-radius: 6px;
+			font-size: 16px;
+			color: var(--el-text-color-regular);
+			margin-left: 5px;
+
+			&:hover {
+				background-color: var(--el-fill-color-light);
+				color: var(--el-text-color-primary);
+			}
+		}
+	}
+
+	.content {
+		flex: 1;
+	}
+
+	&:hover {
+		box-shadow: 0 25px 40px -25px var(--el-bg-color-page);
+	}
+}
+
+.opbar {
+	position: absolute;
+	right: 12px;
+	top: 8px;
+
+	.el-button {
+		border-radius: 4px;
+	}
+}
+
+.empty {
+	margin-top: 100px;
+}
+
+.options-btn {
+	position: absolute;
+	right: 0;
+	top: -26px;
+	color: var(--el-text-color-regular);
+	cursor: pointer;
+	border-radius: 6px;
+	font-size: 14px;
+	padding: 4px;
+	flex-shrink: 0;
+	position: absolute;
+	top: -30px;
+	right: 0;
+	outline: none;
+
+	&:hover {
+		background-color: var(--el-fill-color-light);
+		color: var(--el-text-color-primary);
+	}
+}
+</style>
diff --git a/src/modules/know/components/search-data.vue b/src/modules/know/components/search-data.vue
new file mode 100644
index 0000000..eaf785a
--- /dev/null
+++ b/src/modules/know/components/search-data.vue
@@ -0,0 +1,153 @@
+<template>
+	<div class="search-data">
+		<div class="op">
+			<el-button type="success" :loading="loading" @click="check()"> 检索 </el-button>
+			<el-button @click="clear()"> 清空 </el-button>
+		</div>
+
+		<div class="list">
+			<div class="item" v-for="(item, index) in list" :key="index">
+				<template v-if="scope.from == 1">
+					<el-input v-model="list[index]" clearable />
+
+					<el-icon
+						@click="
+							() => {
+								list.splice(index, 1);
+							}
+						"
+					>
+						<delete />
+					</el-icon>
+				</template>
+
+				<el-input v-model="list[index]" clearable type="textarea" :rows="10" v-else />
+			</div>
+		</div>
+
+		<div class="empty" v-if="isEmpty(list)">暂无数据</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="search-data">
+import { PropType, ref, useModel } from "vue";
+import { useCool } from "/@/cool";
+import { isEmpty } from "lodash-es";
+import { ElMessage } from "element-plus";
+import { Delete } from "@element-plus/icons-vue";
+
+const props = defineProps({
+	modelValue: {
+		type: Array as PropType<string[]>,
+		default: () => []
+	},
+	scope: {
+		type: Object,
+		default: () => ({})
+	}
+});
+
+const { service } = useCool();
+
+const list = useModel(props, "modelValue");
+
+// 检索中
+const loading = ref(false);
+
+// 检索
+async function check() {
+	const fd = new FormData();
+
+	const { _files, _url, from } = props.scope;
+
+	if (from == 1) {
+		if (isEmpty(_files)) {
+			return ElMessage.error("请先上传文件");
+		}
+
+		(_files as File[]).forEach((e, i) => {
+			fd.append(`files${i}`, e);
+		});
+
+		loading.value = true;
+
+		await service.know.loader
+			.request({
+				url: "/file",
+				data: fd,
+				method: "POST",
+				headers: {
+					"Content-Type": "multipart/form-data"
+				}
+			})
+			.then((res: any[][]) => {
+				list.value = res
+					.map((e) => {
+						return e.map((e) => e.pageContent);
+					})
+					.flat();
+			});
+	}
+
+	if (from == 2) {
+		if (!_url) {
+			return ElMessage.error("请先输入链接");
+		}
+
+		loading.value = true;
+
+		await service.know.loader
+			.link({
+				link: _url
+			})
+			.then((res: any[]) => {
+				list.value = res.map((e) => e.pageContent);
+			});
+	}
+
+	loading.value = false;
+}
+
+// 清空
+function clear() {
+	list.value = [];
+}
+
+defineExpose({
+	check
+});
+</script>
+
+<style lang="scss" scoped>
+.search-data {
+	.op {
+		margin-bottom: 10px;
+	}
+
+	.list {
+		.item {
+			display: flex;
+			align-items: center;
+			line-height: normal;
+			margin-top: 5px;
+
+			.el-icon {
+				margin-left: 10px;
+				cursor: pointer;
+
+				&:hover {
+					color: red;
+				}
+			}
+		}
+	}
+
+	.empty {
+		padding: 20px;
+		text-align: center;
+		color: var(--el-color-info);
+		border: 1px solid var(--el-border-color);
+		border-radius: 4px;
+	}
+}
+</style>
diff --git a/src/modules/know/components/search-test.vue b/src/modules/know/components/search-test.vue
new file mode 100644
index 0000000..963f3b3
--- /dev/null
+++ b/src/modules/know/components/search-test.vue
@@ -0,0 +1,360 @@
+<template>
+	<el-button type="warning" @click="open">搜索测试</el-button>
+
+	<cl-dialog
+		v-model="visible"
+		title="搜索测试"
+		width="1200px"
+		height="70vh"
+		padding="0"
+		:scrollbar="false"
+	>
+		<div class="test-panel">
+			<cl-view-group ref="ViewGroup">
+				<template #left>
+					<div class="left">
+						<div class="content">
+							<el-input
+								type="textarea"
+								v-model="content"
+								:rows="8"
+								placeholder="输入需要测试的文本"
+							/>
+							<el-button type="primary" :loading="loading" @click="toTest"
+								>测试</el-button
+							>
+						</div>
+
+						<div class="history">
+							<p class="title">
+								<el-icon>
+									<clock />
+								</el-icon>
+								<span>测试历史</span>
+							</p>
+
+							<div class="list">
+								<el-scrollbar>
+									<div
+										class="item"
+										v-for="item in history.list"
+										:key="item"
+										@click="history.check(item.content)"
+									>
+										<span>{{ item.content }}</span>
+										<span>{{ formatTime(item.date) }}</span>
+									</div>
+
+									<el-empty v-if="history.list.length == 0" :image-size="80" />
+								</el-scrollbar>
+							</div>
+						</div>
+					</div>
+				</template>
+
+				<template #title>
+					<div class="title">
+						<span>测试结果</span>
+
+						<el-tooltip>
+							<el-icon>
+								<question-filled />
+							</el-icon>
+
+							<template #content>
+								<div :style="{ width: '250px' }">
+									根据知识库内容与测试文本的相似度进行排序，你可以根据测试结果调整对应的文本注意:测试记录中的数据可能已经被修改过，点击某条测试数据后将展示最新的数据。
+								</div>
+							</template>
+						</el-tooltip>
+					</div>
+				</template>
+
+				<template #right>
+					<el-scrollbar>
+						<div class="right">
+							<div class="card" v-for="(item, index) in list" :key="index">
+								<div class="head">
+									<el-tag disable-transitions>
+										<span>#{{ index + 1 }} | </span>
+										<span>语义检索 </span>
+										<span> | {{ item.score || 0 }}</span>
+									</el-tag>
+
+									<span>{{ item?.title }}</span>
+								</div>
+
+								<div class="content" v-html="item.content! || '-'"></div>
+
+								<el-icon class="edit" @click="toEdit(item)">
+									<edit />
+								</el-icon>
+
+								<div class="bottom">
+									<div class="len">
+										<el-icon>
+											<chat-line-square />
+										</el-icon>
+
+										<span>{{ item.content?.length }}</span>
+									</div>
+								</div>
+							</div>
+
+							<el-empty v-if="list.length == 0" :image-size="80" />
+						</div>
+					</el-scrollbar>
+				</template>
+			</cl-view-group>
+		</div>
+	</cl-dialog>
+</template>
+
+<script setup lang="ts" name="search-test">
+import { reactive, ref } from "vue";
+import { useViewGroup } from "/@/plugins/view";
+import { Clock, Edit, QuestionFilled, ChatLineSquare } from "@element-plus/icons-vue";
+import dayjs from "dayjs";
+import { useCool, storage } from "/@/cool";
+import { formatTime } from "/$/know/utils";
+import { ElMessage } from "element-plus";
+
+const emit = defineEmits(["edit"]);
+
+const { service, route } = useCool();
+const { ViewGroup } = useViewGroup({
+	leftWidth: "400px",
+	custom: true
+});
+
+const visible = ref(false);
+const loading = ref(false);
+
+// 检索后的数据
+const list = ref<{ title: string; content: string }[]>([]);
+
+// 测试文本
+const content = ref("");
+
+// 打开
+function open() {
+	visible.value = true;
+	list.value = [];
+}
+
+// 关闭
+function close() {
+	visible.value = false;
+}
+
+// 编辑
+function toEdit(item: Eps.AiDataInfoEntity) {
+	emit("edit", item.data);
+}
+
+// 测试
+async function toTest() {
+	if (!content.value) {
+		return ElMessage.info("请输入需要测试的文本");
+	}
+
+	loading.value = true;
+
+	await service.know.retriever
+		.invoke({
+			knowId: route.query.id,
+			text: content.value,
+			options: {
+				size: 10
+			}
+		})
+		.then((res) => {
+			history.add();
+			content.value = "";
+
+			list.value = res.map((e) => {
+				const { metadata, pageContent } = e[0];
+
+				return {
+					title: metadata.title,
+					content: pageContent,
+					data: metadata,
+					score: e[1].toFixed(6)
+				};
+			});
+		})
+		.catch((err) => {
+			ElMessage.error(err.message);
+		});
+
+	loading.value = false;
+}
+
+// 历史记录
+const history = reactive({
+	list: storage.get("know.searchTestHistory" + route.query.id) || [],
+
+	limit: 20,
+
+	add() {
+		history.list.unshift({
+			content: content.value,
+			date: dayjs().format("YYYY-MM-DD HH:mm:ss")
+		});
+		if (history.list.length > this.limit) {
+			history.list.pop();
+		}
+		history.update();
+	},
+
+	remove(index: number) {
+		history.list.splice(index, 1);
+		history.update();
+	},
+
+	update() {
+		storage.set("know.searchTestHistory" + route.query.id, history.list);
+	},
+
+	check(val: string) {
+		content.value = val;
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.test-panel {
+	display: flex;
+	height: 100%;
+
+	.title {
+		display: flex;
+		align-items: center;
+		height: 40px;
+		font-size: 14px;
+
+		span {
+			line-height: 1;
+			margin: 0 5px;
+		}
+	}
+
+	.left {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		padding: 10px;
+		box-sizing: border-box;
+
+		.content {
+			position: relative;
+
+			.el-button {
+				position: absolute;
+				right: 10px;
+				bottom: 10px;
+			}
+		}
+
+		.history {
+			flex: 1;
+			overflow: hidden;
+
+			.list {
+				height: calc(100% - 40px);
+				.item {
+					display: flex;
+					align-items: center;
+					background-color: var(--el-fill-color-lighter);
+					height: 40px;
+					padding: 0 10px;
+					border-radius: 4px;
+					margin-bottom: 10px;
+					cursor: pointer;
+
+					span {
+						font-size: 12px;
+
+						&:first-child {
+							margin-right: 10px;
+							flex: 1;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+						}
+					}
+
+					&:hover {
+						background-color: var(--el-fill-color-light);
+					}
+				}
+			}
+		}
+	}
+
+	.right {
+		flex: 1;
+		padding: 0 15px;
+
+		.card {
+			background-color: var(--el-fill-color-lighter);
+			padding: 10px;
+			border-radius: 8px;
+			margin-bottom: 10px;
+			font-size: 12px;
+			cursor: pointer;
+			position: relative;
+
+			&:hover {
+				background-color: var(--el-fill-color-light);
+			}
+
+			.head {
+				display: flex;
+				align-items: center;
+
+				.el-tag {
+					margin-right: 10px;
+				}
+			}
+
+			.content {
+				padding: 10px 0;
+				font-size: 14px;
+				background-color: var(--el-bg-color);
+				padding: 10px;
+				margin: 10px 0;
+				border-radius: 6px;
+			}
+
+			.edit {
+				position: absolute;
+				right: 10px;
+				top: 10px;
+				font-size: 14px;
+
+				&:hover {
+					color: var(--el-color-primary);
+				}
+			}
+
+			.bottom {
+				display: flex;
+				justify-content: space-between;
+				font-size: 12px;
+				padding: 0 5px;
+
+				.len {
+					display: flex;
+					align-items: center;
+
+					.el-icon {
+						margin-right: 5px;
+						font-size: 14px;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/modules/know/components/select-model.vue b/src/modules/know/components/select-model.vue
new file mode 100644
index 0000000..f8bbf39
--- /dev/null
+++ b/src/modules/know/components/select-model.vue
@@ -0,0 +1,220 @@
+<template>
+	<div class="select-model">
+		<el-select
+			:disabled="disabled"
+			:model-value="value"
+			clearable
+			placeholder="选择模型"
+			@change="onChange"
+		>
+			<template #label>
+				<div class="select-model__inner" v-if="supplierName">
+					<span class="supplier">{{ supplierName }}</span>
+					<span v-if="scope[optionsKey]?.model">{{ scope[optionsKey]?.model }}</span>
+				</div>
+			</template>
+
+			<template #header>
+				<div class="select-model__search">
+					<el-input
+						placeholder="搜索模型"
+						:prefix-icon="Search"
+						v-model="keyWord"
+						clearable
+					/>
+				</div>
+			</template>
+
+			<div class="select-model__list">
+				<div class="row" v-for="(row, rowIndex) in list" :key="rowIndex">
+					<p class="label">{{ row.title }}</p>
+
+					<el-option
+						class="item"
+						v-for="item in row.list"
+						:key="item"
+						:label="item"
+						:value="`${item}==${row.id}`"
+					/>
+				</div>
+			</div>
+		</el-select>
+	</div>
+</template>
+
+<script lang="ts" setup name="select-model">
+import { Search } from "@element-plus/icons-vue";
+import { computed, onMounted, PropType, ref } from "vue";
+import { isEmpty } from "lodash-es";
+import { useCool } from "/@/cool";
+
+interface Row {
+	id: number;
+	title: string;
+	list: string[];
+}
+
+const props = defineProps({
+	scope: {
+		type: Object as PropType<KnowType>,
+		default: () => ({})
+	},
+	field: String,
+	disabled: Boolean
+});
+
+const { service } = useCool();
+
+// 关键字
+const keyWord = ref();
+
+// 字典
+const idKey = computed(() => `${props.field}ConfigId`);
+const optionsKey = computed(() => `${props.field}Options`);
+
+// 绑定值
+const value = computed(() => {
+	return props.scope[idKey.value]
+		? `${props.scope[optionsKey.value]?.model}==${props.scope[idKey.value]}`
+		: "";
+});
+
+// 供应商名称
+const supplierName = computed(() => {
+	return data.value.find((e) => e.id == props.scope[idKey.value])?.title;
+});
+
+// 模型数据
+const data = ref<Row[]>([]);
+
+// 渲染列表
+const list = computed(() => {
+	return data.value.filter((e) =>
+		e.list.some((a) => (keyWord.value ? a.includes(keyWord.value) : true))
+	);
+});
+
+// 加载数据
+function refresh() {
+	service.know.config
+		.getByFunc({
+			func: props.field
+		})
+		.then((res: KnowConfig[]) => {
+			let rows: Row[] = [];
+
+			res.forEach((e) => {
+				if (!isEmpty(e.options?.options)) {
+					const d = e.options?.options?.find((e) => e.field == "model");
+
+					if (d && !isEmpty(d?.select)) {
+						rows.push({
+							id: e.id,
+							title: e.name,
+							list: d.select || []
+						});
+					}
+				}
+			});
+
+			data.value = rows;
+		});
+}
+
+// 监听选择
+function onChange(val: string) {
+	const [model, id] = (val || "").split("==");
+
+	props.scope[idKey.value] = id;
+	props.scope[optionsKey.value].model = model;
+}
+
+onMounted(() => {
+	refresh();
+});
+</script>
+
+<style lang="scss" scoped>
+.select-model {
+	&__inner {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		height: 30px;
+		width: 100%;
+		position: relative;
+		transition: all 0.2s;
+
+		.supplier {
+			border-right: 1px solid var(--el-border-color);
+			padding-right: 10px;
+			margin-right: 10px;
+		}
+
+		.placeholder {
+			color: var(--el-text-color-placeholder);
+			font-size: 14px;
+		}
+
+		.arrow,
+		.close {
+			position: absolute;
+			right: 6px;
+			font-size: 12px !important;
+			color: var(--el-color-info);
+		}
+
+		.close {
+			display: none;
+		}
+
+		&:hover {
+			border-color: var(--el-border-color-hover);
+
+			.close {
+				display: block;
+			}
+		}
+	}
+
+	&__search {
+		:deep(.el-input__wrapper) {
+			box-shadow: none;
+			background-color: var(--el-fill-color-light);
+			border-radius: 6px;
+		}
+	}
+
+	&__list {
+		padding: 0 10px 5px 10px;
+
+		.label {
+			color: var(--el-color-info);
+			margin: 5px;
+			font-size: 12px;
+		}
+
+		.item {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			height: 32px;
+			cursor: pointer;
+			padding: 0 15px;
+			border-radius: 6px;
+
+			&:hover {
+				background-color: var(--el-fill-color-light);
+			}
+		}
+	}
+
+	&__empty {
+		padding: 15px 5px 5px 5px;
+		line-height: 1;
+		font-size: 12px;
+		color: var(--el-text-color-secondary);
+		text-align: center;
+	}
+}
+</style>
diff --git a/src/modules/know/hooks/icon.ts b/src/modules/know/hooks/icon.ts
new file mode 100644
index 0000000..de8f3f2
--- /dev/null
+++ b/src/modules/know/hooks/icon.ts
@@ -0,0 +1,37 @@
+import IconData from "../static/icon/data.png";
+import IconDepot from "../static/icon/depot.png";
+import IconGoods from "../static/icon/goods.png";
+import IconInfo from "../static/icon/info.png";
+import IconResource from "../static/icon/resource.png";
+
+import { filename } from "/@/cool/utils";
+
+export function useIcon() {
+	const list = [IconData, IconDepot, IconGoods, IconInfo, IconResource].map((e) => {
+		return {
+			path: e,
+			name: filename(e)
+		};
+	});
+
+	function get(val?: string) {
+		if (!val) {
+			return IconData;
+		}
+
+		if (val.includes("http")) {
+			return val;
+		}
+
+		const icon = val.includes("/")
+			? list.find((e) => e.path == val)?.name
+			: list.find((e) => e.name == val)?.path;
+
+		return icon || IconData;
+	}
+
+	return {
+		list,
+		get
+	};
+}
diff --git a/src/modules/know/hooks/index.ts b/src/modules/know/hooks/index.ts
new file mode 100644
index 0000000..b975409
--- /dev/null
+++ b/src/modules/know/hooks/index.ts
@@ -0,0 +1 @@
+export * from "./icon";
diff --git a/src/modules/know/static/icon/data.png b/src/modules/know/static/icon/data.png
new file mode 100644
index 0000000..0eae234
Binary files /dev/null and b/src/modules/know/static/icon/data.png differ
diff --git a/src/modules/know/static/icon/depot.png b/src/modules/know/static/icon/depot.png
new file mode 100644
index 0000000..4fb0e1e
Binary files /dev/null and b/src/modules/know/static/icon/depot.png differ
diff --git a/src/modules/know/static/icon/goods.png b/src/modules/know/static/icon/goods.png
new file mode 100644
index 0000000..53da0eb
Binary files /dev/null and b/src/modules/know/static/icon/goods.png differ
diff --git a/src/modules/know/static/icon/info.png b/src/modules/know/static/icon/info.png
new file mode 100644
index 0000000..f495cbc
Binary files /dev/null and b/src/modules/know/static/icon/info.png differ
diff --git a/src/modules/know/static/icon/resource.png b/src/modules/know/static/icon/resource.png
new file mode 100644
index 0000000..41e2f3b
Binary files /dev/null and b/src/modules/know/static/icon/resource.png differ
diff --git a/src/modules/know/static/svg/folder.svg b/src/modules/know/static/svg/folder.svg
new file mode 100644
index 0000000..f81d8d5
--- /dev/null
+++ b/src/modules/know/static/svg/folder.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="1718256181032" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2192" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M453.315048 146.285714a73.142857 73.142857 0 0 1 71.411809 57.295238l3.535238 15.847619H828.952381a73.142857 73.142857 0 0 1 73.142857 73.142858v512a73.142857 73.142857 0 0 1-73.142857 73.142857H195.047619a73.142857 73.142857 0 0 1-73.142857-73.142857V219.428571a73.142857 73.142857 0 0 1 73.142857-73.142857h258.267429z m0 73.142857H195.047619v585.142858h633.904762V414.47619H496.688762l-43.373714-195.047619zM780.190476 658.285714v73.142857H243.809524v-73.142857h536.380952z m48.761905-365.714285H544.49981l10.849523 48.761904H828.952381v-48.761904z" p-id="2193"></path></svg>
\ No newline at end of file
diff --git a/src/modules/know/static/svg/search.svg b/src/modules/know/static/svg/search.svg
new file mode 100644
index 0000000..ef421e1
--- /dev/null
+++ b/src/modules/know/static/svg/search.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="1718256178041" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2031" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M195.047619 609.52381v219.428571h219.428571v73.142857H195.047619a73.142857 73.142857 0 0 1-73.142857-73.142857v-219.428571h73.142857z m707.047619 0v219.428571a73.142857 73.142857 0 0 1-73.142857 73.142857h-219.428571v-73.142857h219.428571v-219.428571h73.142857zM499.809524 287.695238a195.047619 195.047619 0 0 1 145.310476 325.168762l73.508571 73.557333-51.712 51.687619-80.554666-80.530285A195.047619 195.047619 0 1 1 499.809524 287.695238z m0 73.142857a121.904762 121.904762 0 1 0 0 243.809524 121.904762 121.904762 0 0 0 0-243.809524zM828.952381 121.904762a73.142857 73.142857 0 0 1 73.142857 73.142857v219.428571h-73.142857V195.047619h-219.428571V121.904762h219.428571zM414.47619 121.904762v73.142857H195.047619v219.428571H121.904762V195.047619a73.142857 73.142857 0 0 1 73.142857-73.142857h219.428571z" p-id="2032"></path></svg>
\ No newline at end of file
diff --git a/src/modules/know/static/svg/text.svg b/src/modules/know/static/svg/text.svg
new file mode 100644
index 0000000..9c65bf4
--- /dev/null
+++ b/src/modules/know/static/svg/text.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="1716365761402" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1319" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M755.809524 182.857143V316.952381h-73.142857v-60.952381h-207.238096V804.571429H560.761905v73.142857H316.952381v-73.142857h85.333333V256h-219.428571V316.952381h-73.142857V182.857143H755.809524zM902.095238 804.571429v73.142857H609.52381v-73.142857h292.571428z m0-146.285715v73.142857H609.52381v-73.142857h292.571428z m0-146.285714v73.142857H609.52381v-73.142857h292.571428z" p-id="1320"></path></svg>
\ No newline at end of file
diff --git a/src/modules/know/types/index.d.ts b/src/modules/know/types/index.d.ts
new file mode 100644
index 0000000..93981f3
--- /dev/null
+++ b/src/modules/know/types/index.d.ts
@@ -0,0 +1,27 @@
+declare interface KnowType {
+	id: number;
+	name: string;
+	icon: string;
+	description: string;
+	embedConfigId: number;
+	embedOptions: any;
+	enableRerank?: boolean;
+	rerankConfigId?: number;
+	rerankOptions?: any;
+	updateFrequency: any;
+	enable: number;
+	[key: string]: any;
+}
+
+declare interface KnowConfig {
+	id: number;
+	func: string;
+	description: string;
+	type: string;
+	options: {
+		comm?: any;
+		options?: { field: string; select?: string[]; default: string; title: string }[];
+		[key: string]: any;
+	};
+	[key: string]: any;
+}
diff --git a/src/modules/know/utils/index.ts b/src/modules/know/utils/index.ts
new file mode 100644
index 0000000..7f1319a
--- /dev/null
+++ b/src/modules/know/utils/index.ts
@@ -0,0 +1,37 @@
+import dayjs from "dayjs";
+
+export function formatTime(dateString?: Date): string {
+	if (!dateString) {
+		return "";
+	}
+
+	const now = dayjs();
+	const date = dayjs(dateString);
+
+	let secondsDiff = now.diff(date, "second");
+
+	if (secondsDiff < 60) {
+		if (secondsDiff < 0) {
+			secondsDiff = 0;
+		}
+
+		return `${secondsDiff || 1}秒前`;
+	}
+
+	const minutesDiff = now.diff(date, "minute");
+	if (minutesDiff < 60) {
+		return `${minutesDiff}分钟前`;
+	}
+
+	const hoursDiff = now.diff(date, "hour");
+	if (hoursDiff < 24) {
+		return `${hoursDiff}小时前`;
+	}
+
+	const isYesterday = now.isSame(date, "day");
+	if (isYesterday) {
+		return `昨天 ${date.format("HH:mm")}`;
+	}
+
+	return date.format("YYYY-MM-DD HH:mm");
+}
diff --git a/src/modules/know/views/data/info.vue b/src/modules/know/views/data/info.vue
new file mode 100644
index 0000000..11157eb
--- /dev/null
+++ b/src/modules/know/views/data/info.vue
@@ -0,0 +1,521 @@
+<template>
+	<cl-crud ref="Crud">
+		<cl-view-head />
+
+		<cl-row>
+			<!-- 刷新按钮 -->
+			<cl-refresh-btn />
+			<!-- 新增按钮 -->
+			<el-button type="primary" @click="preAdd">添加</el-button>
+			<el-button type="success" @click="rebuild">重建</el-button>
+			<!-- 删除按钮 -->
+			<cl-multi-delete-btn />
+
+			<cl-filter label="来源">
+				<cl-select :options="options.from" prop="from" />
+			</cl-filter>
+
+			<cl-flex1 />
+
+			<!-- 搜索测试 -->
+			<search-test @edit="Crud?.rowEdit" />
+
+			<!-- 关键字搜索 -->
+			<cl-search-key placeholder="搜索标题、内容" />
+		</cl-row>
+
+		<cl-row>
+			<!-- 数据表格 -->
+			<cl-table ref="Table" />
+		</cl-row>
+
+		<cl-row>
+			<cl-flex1 />
+			<!-- 分页控件 -->
+			<cl-pagination />
+		</cl-row>
+
+		<!-- 选择类型 -->
+		<cl-form ref="AForm">
+			<template #slot-from="{ scope }">
+				<div class="slot-from">
+					<div
+						class="item"
+						v-for="item in options.from"
+						:key="item.value"
+						:class="{
+							active: scope.from == item.value
+						}"
+						@click="
+							() => {
+								scope.from = item.value;
+							}
+						"
+					>
+						<cl-svg class="icon" :name="item.icon" />
+
+						<p>{{ item.label }}</p>
+						<p>{{ item.desc }}</p>
+					</div>
+				</div>
+			</template>
+		</cl-form>
+
+		<!-- 设置数据 -->
+		<cl-form ref="BForm">
+			<template #slot-files="{ scope }">
+				<div class="files">
+					<div class="op">
+						<cl-upload
+							drag
+							:size="[150, 300]"
+							multiple
+							:auto-upload="false"
+							:beforeUpload="
+								(file: File) => {
+									scope._files.push(file);
+									return false;
+								}
+							"
+							accept=".txt, .eml, .msg, .xml, .html, .md, .rst, .json, .rtf, .jpeg, .png, .doc, .docx, .ppt, .pptx, .pdf, .odt, .epub, .csv, .tsv, .xlsx, .gz"
+						/>
+					</div>
+
+					<div class="list" v-if="!isEmpty(scope._files)">
+						<div class="item" v-for="(item, index) in scope._files" :key="index">
+							<el-text size="small" truncated>{{ item.name }}</el-text>
+
+							<el-icon
+								class="del"
+								@click="
+									() => {
+										scope._files.splice(index, 1);
+									}
+								"
+							>
+								<close-bold />
+							</el-icon>
+						</div>
+					</div>
+				</div>
+			</template>
+		</cl-form>
+
+		<!-- 编辑 -->
+		<cl-upsert ref="Upsert" />
+	</cl-crud>
+</template>
+
+<script lang="ts" name="know-data-info" setup>
+import { useCrud, useForm, useTable, useUpsert, setFocus } from "@cool-vue/crud";
+import { useCool } from "/@/cool";
+import { reactive } from "vue";
+import { isEmpty } from "lodash-es";
+import { CloseBold } from "@element-plus/icons-vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import SearchData from "../../components/search-data.vue";
+import SearchTest from "../../components/search-test.vue";
+
+const { service, route } = useCool();
+
+// 选项
+const options = reactive({
+	from: [
+		{
+			label: "自定义文本",
+			desc: "手动输入一段文本作为数据集",
+			value: 0,
+			type: "info",
+			icon: "text"
+		},
+		{
+			label: "本地文件",
+			desc: "上传 PDF、TXT、DOCX、MD 等格式的文件",
+			value: 1,
+			type: "success",
+			icon: "folder"
+		},
+		{ label: "网页链接", desc: "读取静态网页内容作为数据集", value: 2, icon: "search" }
+	],
+	status: [
+		{ label: "准备中", value: 0 },
+		{ label: "已就绪", value: 1, type: "success" }
+	]
+});
+
+// cl-table
+const Table = useTable({
+	columns: [
+		{ type: "selection" },
+		{ label: "标题", prop: "title", minWidth: 140 },
+		{
+			label: "内容",
+			prop: "content.data",
+			minWidth: 200,
+			showOverflowTooltip: true
+		},
+		{
+			label: "来源",
+			prop: "from",
+			dict: options.from,
+			minWidth: 120
+		},
+		{
+			label: "状态",
+			prop: "status",
+			dict: options.status,
+			minWidth: 120
+		},
+		{ label: "启用", prop: "enable", minWidth: 100, component: { name: "cl-switch" } },
+		{
+			label: "创建时间",
+			prop: "createTime",
+			minWidth: 170,
+			sortable: "desc",
+			component: { name: "cl-date-text" }
+		},
+		{
+			label: "更新时间",
+			prop: "updateTime",
+			minWidth: 170,
+			sortable: "custom",
+			component: { name: "cl-date-text" }
+		},
+		{ type: "op", buttons: ["edit", "delete"] }
+	]
+});
+
+// cl-upsert
+const Upsert = useUpsert({
+	items: [
+		{
+			prop: "title",
+			component: {
+				name: "el-input",
+				props: {
+					placeholder: "请输入标题"
+				}
+			},
+			rules: {
+				required: true,
+				message: "标题不能为空"
+			}
+		},
+		{
+			prop: "content.data",
+			component: {
+				name: "el-input",
+				props: {
+					type: "textarea",
+					rows: 10,
+					placeholder: "请输入内容"
+				}
+			},
+			rules: {
+				required: true,
+				message: "内容不能为空"
+			}
+		}
+	]
+});
+
+// cl-crud
+const Crud = useCrud(
+	{
+		service: service.know.data.info
+	},
+	(app) => {
+		app.refresh({
+			typeId: route.query.id
+		});
+	}
+);
+
+// 刷新
+function refresh(params?: any) {
+	Crud.value?.refresh(params);
+}
+
+// 重建
+function rebuild() {
+	ElMessageBox.confirm("确定要重建知识库吗？", "提示", {
+		type: "warning"
+	}).then(() => {
+		service.know.data.type
+			.rebuild({
+				typeId: route.query.id
+			})
+			.then(() => {
+				ElMessage.success("重建成功");
+			})
+			.catch((err) => {
+				ElMessage.error(err.message);
+			});
+	});
+}
+
+// 添加内容
+const AForm = useForm();
+const BForm = useForm();
+
+function preAdd() {
+	AForm.value?.open({
+		title: "添加内容",
+		width: "500px",
+		items: [
+			{
+				prop: "from",
+				component: {
+					name: "slot-from"
+				},
+				value: 0,
+				required: true
+			}
+		],
+		dialog: {
+			controls: ["close"]
+		},
+		op: {
+			saveButtonText: "下一步"
+		},
+		on: {
+			submit(data, e1) {
+				e1.done();
+
+				BForm.value?.open(
+					{
+						title: "添加内容",
+						props: {
+							labelWidth: "60px"
+						},
+						form: {
+							...data
+						},
+						on: {
+							submit(data, { done, close }) {
+								const fn = data.id ? "update" : "add";
+								const typeId = route.query.id;
+
+								let list: any[] = [];
+
+								switch (data.from) {
+									case 0:
+										list = [
+											{
+												...data,
+												typeId,
+												content: {
+													data: data.content
+												}
+											}
+										];
+										break;
+
+									case 1:
+									case 2:
+										list = data._content.map((e: string) => {
+											return {
+												...data,
+												metadata: {
+													url: data._url
+												},
+												typeId,
+												content: {
+													data: e
+												}
+											};
+										});
+										break;
+								}
+
+								if (isEmpty(list)) {
+									done();
+									return ElMessage.error("内容不能为空");
+								}
+
+								service.know.data.info[fn](list)
+									.then(() => {
+										ElMessage.success("添加成功");
+										refresh();
+										close();
+										e1.close();
+									})
+									.catch((err) => {
+										done();
+										ElMessage.error(err.message);
+									});
+							}
+						},
+						items: [
+							{
+								label: "启用",
+								prop: "enable",
+								flex: false,
+								component: { name: "cl-switch" },
+								required: true,
+								value: 1
+							},
+							{
+								label: "标题",
+								prop: "title",
+								component: {
+									name: "el-input",
+									props: { clearable: true, maxlength: 50 }
+								},
+								required: true
+							},
+							() => {
+								return data.from == 0
+									? {
+											label: "内容",
+											prop: "content",
+											component: {
+												name: "el-input",
+												props: {
+													type: "textarea",
+													rows: 6
+												}
+											},
+											required: true
+									  }
+									: null;
+							},
+							() => {
+								return data.from == 1
+									? {
+											label: "文件",
+											prop: "_files",
+											value: [],
+											component: {
+												name: "slot-files"
+											}
+									  }
+									: null;
+							},
+							() => {
+								return data.from == 2
+									? {
+											label: "链接",
+											prop: "_url",
+											component: { name: "el-input" },
+											rules: {
+												required: true,
+												validator(rule, value, callback) {
+													if (!value) {
+														return callback(new Error("请输入链接"));
+													}
+
+													if (!/^(http|https):\/\//.test(value)) {
+														return callback(
+															new Error("请输入正确的链接")
+														);
+													}
+
+													callback();
+												}
+											}
+									  }
+									: null;
+							},
+							{
+								label: "内容",
+								prop: "_content",
+								value: [],
+								component: {
+									vm: SearchData
+								},
+								hidden({ scope }) {
+									return scope.from == 0;
+								}
+							}
+						]
+					},
+					[setFocus("title")]
+				);
+			}
+		}
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.cl-crud {
+	:deep(.el-popper) {
+		max-width: 40%;
+	}
+}
+
+.files {
+	.op {
+		display: flex;
+	}
+
+	.list {
+		border: 1px solid var(--el-border-color);
+		margin-top: 10px;
+		padding: 10px;
+		line-height: normal;
+		border-radius: 5px;
+
+		.item {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			cursor: pointer;
+			margin-bottom: 10px;
+
+			.del {
+				margin-left: 10px;
+				color: var(--el-color-info);
+
+				&:hover {
+					color: red;
+				}
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+}
+
+.slot-from {
+	.item {
+		border: 1px solid var(--el-border-color);
+		margin-bottom: 10px;
+		padding: 10px;
+		line-height: normal;
+		border-radius: 6px;
+		cursor: pointer;
+		padding-left: 40px;
+		position: relative;
+
+		.icon {
+			position: absolute;
+			left: 10px;
+			font-size: 20px;
+		}
+
+		p {
+			&:nth-child(2) {
+				font-size: 14px;
+				margin-bottom: 5px;
+			}
+
+			&:last-child {
+				font-size: 12px;
+				color: var(--el-color-info);
+			}
+		}
+
+		&:hover {
+			background-color: var(--el-fill-color-light);
+		}
+
+		&.active {
+			border-color: var(--el-color-primary);
+		}
+	}
+}
+</style>
diff --git a/src/modules/know/views/data/type.vue b/src/modules/know/views/data/type.vue
new file mode 100644
index 0000000..c292acc
--- /dev/null
+++ b/src/modules/know/views/data/type.vue
@@ -0,0 +1,368 @@
+<template>
+	<cl-crud ref="Crud">
+		<cl-row>
+			<cl-add-btn>添加知识库</cl-add-btn>
+			<know-config @close="model.refresh()" />
+		</cl-row>
+
+		<el-row :gutter="10">
+			<el-col :lg="6" :md="12" :xs="24" v-for="(item, index) in list" :key="index">
+				<div class="data-item" @click="toDetail(item)">
+					<div class="head">
+						<img class="icon" :src="icon.get(item.icon)" />
+
+						<span class="name">{{ item.name }}</span>
+
+						<cl-svg name="delete" @click.stop="Crud?.rowDelete(item)" />
+						<cl-svg name="set" @click.stop="Crud?.rowEdit(item)" />
+					</div>
+
+					<div class="content">
+						<div class="desc">{{ item.description || "暂无描述" }}</div>
+					</div>
+
+					<div class="footer">
+						<el-tooltip :content="model.getTag(item)">
+							<div class="tag">{{ model.getTag(item) }}</div>
+						</el-tooltip>
+
+						<cl-switch
+							v-model="item.enable"
+							:column="{
+								property: 'enable'
+							}"
+							:scope="item"
+						/>
+					</div>
+				</div>
+			</el-col>
+		</el-row>
+
+		<cl-upsert ref="Upsert">
+			<template #slot-icon="{ scope }">
+				<div class="slot-icon">
+					<cl-upload :size="80" text="" v-model="scope.icon" :show-tag="false" />
+
+					<div class="icons">
+						<img
+							v-for="item in icon.list"
+							:key="item.name"
+							:src="item.path"
+							@click="scope.icon = item.path"
+						/>
+					</div>
+				</div>
+			</template>
+
+			<template #slot-rerank="{ scope }">
+				<cl-switch v-model="scope.enableRerank" :style="{ width: '60px' }"></cl-switch>
+				<select-model field="rerank" :scope="scope" :disabled="!scope.enableRerank" />
+			</template>
+		</cl-upsert>
+
+		<div class="empty" v-if="isEmpty(list)">
+			<el-empty :image-size="100" />
+		</div>
+	</cl-crud>
+</template>
+
+<script lang="tsx" name="know-data-type" setup>
+import { useCrud, useUpsert } from "@cool-vue/crud";
+import { useCool } from "/@/cool";
+import { isEmpty } from "lodash-es";
+import { ref, reactive, onActivated } from "vue";
+import KnowConfig from "../../components/config.vue";
+import { useIcon } from "../../hooks";
+import SelectModel from "../../components/select-model.vue";
+import { QuestionFilled } from "@element-plus/icons-vue";
+import { ctx } from "virtual:ctx";
+
+const { service, router } = useCool();
+const icon = useIcon();
+
+// 选项
+const options = reactive({
+	model: {},
+	embed: [] as any[]
+});
+
+// 列表
+const list = ref<KnowType[]>([]);
+
+// cl-upsert
+const Upsert = useUpsert<Eps.KnowDataTypeEntity>({
+	items: [
+		{
+			label: "图标",
+			prop: "icon",
+			component: {
+				name: "slot-icon"
+			},
+			required: true
+		},
+		{
+			label: "名称",
+			prop: "name",
+			component: { name: "el-input" },
+			required: true
+		},
+		{
+			label: "描述",
+			prop: "description",
+			component: { name: "el-input", props: { type: "textarea", rows: 4 } }
+		},
+		{
+			label: "索引模型",
+			renderLabel: () => {
+				return (
+					<el-text>
+						索引模型
+						<el-tooltip content="将数据向量化的模型">
+							<el-icon>
+								<QuestionFilled />
+							</el-icon>
+						</el-tooltip>
+					</el-text>
+				);
+			},
+			prop: "embedOptions",
+			component: {
+				vm: SelectModel,
+				props: {
+					field: "embed"
+				}
+			},
+			required: true,
+			value: {
+				model: ""
+			}
+		},
+		{
+			label: "重排模型",
+			renderLabel: () => {
+				return (
+					<el-text>
+						重排模型
+						<el-tooltip content="对结果进行智能排序，使其更符合文本内容">
+							<el-icon>
+								<QuestionFilled />
+							</el-icon>
+						</el-tooltip>
+					</el-text>
+				);
+			},
+			prop: "rerankOptions",
+			component: {
+				name: "slot-rerank"
+			},
+			value: {
+				model: ""
+			},
+			hidden: ctx.serviceLang != "Node"
+		},
+		{
+			label: "状态",
+			prop: "enable",
+			value: 1,
+			component: {
+				name: "el-radio-group",
+				options: [
+					{ label: "启用", value: 1 },
+					{ label: "禁用", value: 0 }
+				]
+			}
+		}
+	],
+
+	onOpened(data) {
+		if (Upsert.value?.mode == "update") {
+			data.icon = icon.get(data.icon);
+		}
+	},
+
+	onSubmit(data, { next }) {
+		next({
+			...data,
+			icon: icon.get(data.icon)
+		});
+	}
+});
+
+// cl-crud
+const Crud = useCrud(
+	{
+		service: service.know.data.type,
+		async onRefresh(params, { next }) {
+			const res = await next({
+				...params,
+				size: 1000
+			});
+
+			list.value = res.list;
+		}
+	},
+	(app) => {
+		app.refresh();
+	}
+);
+
+// 模型
+const model = reactive({
+	refresh() {
+		service.know.config.getByFunc({ func: "embed" }).then((res: any[]) => {
+			res.forEach((e) => {
+				if (e.options.options) {
+					options.model[e.id] =
+						(e.options.options as any[]).find((e) => e.field == "model")?.select || [];
+				}
+			});
+
+			// 模型供应商
+			options.embed = res.map((e) => {
+				return {
+					label: e.name,
+					value: e.id
+				};
+			});
+		});
+	},
+
+	getTag(item: KnowType) {
+		let v = options.embed.find((e) => e.value == item.embedConfigId)?.label;
+
+		if (item.embedOptions?.model) {
+			v += " / " + item.embedOptions?.model;
+		}
+
+		return v;
+	}
+});
+
+// 详情
+function toDetail(item: KnowType) {
+	router.push({
+		path: "/know/data/info",
+		query: {
+			id: item.id,
+			title: item.name
+		}
+	});
+}
+
+onActivated(() => {
+	model.refresh();
+});
+</script>
+
+<style lang="scss" scoped>
+.data-item {
+	display: flex;
+	flex-direction: column;
+	height: 140px;
+	width: 100%;
+	border-radius: 10px;
+	box-sizing: border-box;
+	margin-bottom: 10px;
+	cursor: pointer;
+	transition: all 0.3s;
+	position: relative;
+	padding: 10px;
+	border: 1px solid var(--el-bg-color-page);
+
+	.head {
+		display: flex;
+		align-items: center;
+		margin-bottom: 10px;
+
+		.icon {
+			height: 28px;
+			width: 28px;
+			margin-right: 10px;
+		}
+
+		.name {
+			font-size: 14px;
+			font-weight: bold;
+			margin-right: auto;
+		}
+
+		.cl-svg {
+			padding: 3px;
+			border-radius: 6px;
+			font-size: 16px;
+			color: var(--el-text-color-regular);
+			margin-left: 5px;
+
+			&:hover {
+				background-color: var(--el-fill-color-light);
+				color: var(--el-text-color-primary);
+			}
+		}
+	}
+
+	.content {
+		flex: 1;
+		margin-bottom: 10px;
+
+		.desc {
+			overflow: hidden;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			-webkit-line-clamp: 2;
+			word-break: break-all;
+			color: var(--el-color-info);
+			font-size: 12px;
+		}
+	}
+
+	.footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.tag {
+			border: 1px solid var(--el-bg-color-page);
+			color: var(--el-color-info);
+			border-radius: 4px;
+			padding: 4px 10px;
+			max-width: 200px;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			font-size: 12px;
+
+			&:hover {
+				background-color: var(--el-bg-color-page);
+			}
+		}
+	}
+
+	&:hover {
+		box-shadow: 0 25px 40px -25px var(--el-bg-color-page);
+		border-color: var(--el-color-primary);
+	}
+}
+
+.empty {
+	margin-top: 100px;
+}
+
+.slot-icon {
+	.icons {
+		display: flex;
+		flex-wrap: wrap;
+
+		img {
+			height: 26px;
+			width: 26px;
+			margin: 10px 10px 0 0;
+			padding: 2px;
+			cursor: pointer;
+
+			&:hover {
+				opacity: 0.8;
+			}
+		}
+	}
+}
+</style>