light-chaser-pro 1.0.0

package/light-chaser-app/src/designer/operate-provider/hot-key/HotKeyImpl.ts

@@ -0,0 +1,871 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import eventOperateStore from "../EventOperateStore";
+import {cloneDeep, throttle} from "lodash";
+import {historyOperator} from "../undo-redo/HistoryOperator";
+import historyRecordOperateProxy from "../undo-redo/HistoryRecordOperateProxy";
+import undoRedoMap from "../undo-redo/core";
+import runtimeConfigStore from "../../store/RuntimeStore.ts";
+import footerStore from "../../footer/FooterStore";
+import bpLeftStore from "../../../designer/blueprint/left/BPLeftStore";
+import layerListStore from "../../left/layer-list/LayerListStore.ts";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+import baseApi from "../../../api/engineering/BaseApi.ts";
+import {ILayerItem} from "light-chaser-types/types/LayerTypes.ts";
+import {IProjectInfoManager} from "light-chaser-types/types/DesignerTypes.ts";
+import componentDataGvParser from "../../left/global-variable/parse/ComponentDataGvParser.ts";
+import BpCanvasUtil from "../../blueprint/util/BpCanvasUtil.ts";
+import AuthFetchUtil from "../../../util/AuthFetchUtil.ts";
+import CoordinateUtil from "../../../util/CoordinateUtil.ts";
+import {globalModal} from "light-chaser-ui/lib/message/GlobalModal.tsx";
+import {createElement} from "react";
+import {Button, Form, FormInstance, Input, Upload} from "antd";
+import TextUtil from "../../../util/TextUtil.ts";
+import managerStore from "../../manager/ManagerStore.ts";
+import designerHeaderStore from "../../header/DesignerHeaderStore.ts";
+import rightStore from "../../right/RightStore.ts";
+import ProjectUtil from "../../../util/ProjectUtil.ts";
+import NProgress from "nprogress";
+import LayerUtil from "../../left/layer-list/util/LayerUtil.ts";
+
+export const selectAll = () => {
+    const {layerConfigs} = window.LC_ENV.currentManager.layerManager;
+    const {setTargetIds, setGroupCoordinate} = eventOperateStore;
+    const selected = [];
+    for (const id in layerConfigs) {
+        const item = layerConfigs[id];
+        if (!item.hide)
+            selected.push(id);
+    }
+
+    if (selected.length > 0) {
+        setTargetIds(selected as string[]);
+        const coordinate = CoordinateUtil.calculateGroupRect(selected, layerConfigs);
+        setGroupCoordinate(coordinate);
+        const elems = selected.map(id => {
+            return document.getElementById(id)
+        }).filter(item => !!item);
+        eventOperateStore.selectorRef?.setSelectedTargets(elems);
+    }
+}
+
+/**
+ * 克隆组件
+ */
+export const doClone = () => {
+    const {targetIds, setTargetIds} = eventOperateStore;
+    if (!targetIds || targetIds.length === 0) return;
+
+    const newIds = historyRecordOperateProxy.doClone(targetIds);
+    //延迟10毫秒，等待dom元素渲染完毕后再获取。
+    const tempTimer = setTimeout(() => {
+        setTargetIds(newIds);
+        //复制成功后计算组件数据配置是否与全局变量绑定,此时复制的时候还没有完成controller的创建，因此将绑定操作延迟到后面的事件循环后再绑定
+        if (newIds.length > 0)
+            componentDataGvParser.bindConfigToGvById(newIds);
+        clearTimeout(tempTimer);
+    }, 10);
+}
+
+/**
+ * 粘贴
+ */
+export const doPaste = (data: string) => {
+    if (!data || !data.includes('LCP_COPY'))
+        return;
+    const template = JSON.parse(data);
+    if (template && template.flag === 'LCP_COPY' && template.layers) {
+        const {canvasManager} = window.LC_ENV.currentManager;
+        //恢复组件位置
+        Object.keys(template.layers).forEach(layerId => {
+            const layer = template.layers[layerId];
+            const {width = 0, height = 0} = canvasManager?.canvasConfig ?? {width: 0, height: 0};
+            if (layer && layer.type !== 'group') {
+                layer.x = Math.round((width / 2) + (layer?.x ?? 0));
+                layer.y = Math.round((height / 2) + (layer?.y ?? 0));
+            }
+        });
+        historyRecordOperateProxy.doUseTemplate(template);
+    }
+}
+
+/**
+ * 复制
+ */
+export const doCopy = () => {
+    const {targetIds} = eventOperateStore;
+    if (!targetIds || targetIds.length === 0)
+        return;
+    //筛选出图层和组件配置
+    const tempData: {
+        flag: string,
+        layers: { [key: string]: ILayerItem },
+        configs: { [key: string]: any }
+    } = {flag: 'LCP_COPY', layers: {}, configs: {}};
+    const {layerConfigs, controllers} = window.LC_ENV.currentManager.layerManager;
+    //计算基准坐标
+    const baseCoordinate = CoordinateUtil.calculateGroupRectLT(targetIds, layerConfigs);
+    targetIds.forEach(id => {
+        let layer = layerConfigs[id];
+        if (layer) {
+            layer = cloneDeep(layer);
+            if (layer.type !== 'group') {
+                //计算相对位置
+                const {minX, minY} = baseCoordinate;
+                layer.x = layer.x! - minX;
+                layer.y = layer.y! - minY;
+            }
+            layer.lock = false;
+            tempData['layers'][id] = layer;
+        }
+        const controller = controllers[id];
+        if (controller)
+            tempData['configs'][id] = controller.getConfig();
+    });
+    TextUtil.copyToClipboard(JSON.stringify(tempData)).then(() => globalMessage.messageApi?.success('组件已复制到剪贴板'));
+}
+
+export const doLock = () => {
+    const {targetIds, setTargetIds} = eventOperateStore;
+    if (!targetIds || targetIds.length === 0) return;
+    const {layerConfigs} = window.LC_ENV.currentManager.layerManager;
+    const toBeUpdate = [];
+    for (const targetId of targetIds) {
+        const item = layerConfigs[targetId];
+        toBeUpdate.push({...item, lock: true})
+    }
+    historyRecordOperateProxy.doLockUpd(toBeUpdate);
+    //操作完毕之后，清空已被选择的元素。
+    setTargetIds([]);
+}
+
+export const doUnLock = () => {
+    const {setTargetIds, targetIds} = eventOperateStore;
+    if (!targetIds || targetIds.length === 0) return;
+    const {layerConfigs} = window.LC_ENV.currentManager.layerManager;
+    const toUpdate: ILayerItem[] = [];
+    targetIds.filter(id => {
+        //过滤出被锁定的组件
+        return layerConfigs[id].lock;
+    }).forEach((id) => {
+        toUpdate.push({id, lock: false})
+    })
+    historyRecordOperateProxy.doLockUpd(toUpdate);
+    setTargetIds([]);
+}
+
+export const layerToTop = () => {
+    historyRecordOperateProxy.doLayerToTop();
+}
+
+export const layerToBottom = () => {
+    historyRecordOperateProxy.doLayerToBottom();
+}
+
+export const layerMoveUp = () => {
+    historyRecordOperateProxy.doLayerMoveUp();
+}
+
+export const layerMoveDown = () => {
+    historyRecordOperateProxy.doLayerMoveDown();
+}
+
+const deleteLayers = (targetIds: string[]) => {
+    if (targetIds && targetIds.length > 0) {
+        const {delNodeEveryPage, currentPageManager} = window.LC_ENV.currentManager.bluePrintManager!;
+        const {bpNodeLayoutMap} = currentPageManager!;
+        const preDelNodeIds: string[] = [];
+        targetIds.forEach((id: string) => {
+            if (bpNodeLayoutMap[id])
+                preDelNodeIds.push(id);
+        });
+        if (preDelNodeIds.length > 0)
+            delNodeEveryPage(preDelNodeIds);
+    }
+
+    //删除设计器中的组件，并记录到历史操作
+    historyRecordOperateProxy.doDelete(targetIds);
+    //被删除的组件要同时接触组件配置和全局变量的绑定关系
+    componentDataGvParser.unbindFromGv(targetIds);
+}
+
+export const doDelete = () => {
+    //如果蓝图中使用了当前要被删除的组件，则需要先删除蓝图中的组件和连线，且蓝图中的删除操作目前无法回退
+    const {targetIds} = eventOperateStore;
+    deleteLayers(targetIds);
+}
+
+//保存函数节流5s, 5s内不可重复保存
+export const throttleSave = throttle(async () => doSave(), 5000, {trailing: false});
+
+/**
+ * 获取保存数据
+ */
+export const getSaveData = (): IProjectInfoManager | null => {
+    const manager = managerStore.currentFinalManager;
+    const {id} = manager!;
+    const proData = manager?.getData();
+    if (!id || !proData)
+        return null;
+    return {
+        id: id!,
+        dataJson: ProjectUtil.serializeProjectData(proData),
+    }
+}
+
+export const doSave = async () => {
+    NProgress.configure({minimum: 0.5});
+    NProgress.start();
+    footerStore.setSaving(true)
+    const projectInfo = getSaveData();
+    if (!projectInfo) {
+        globalMessage.messageApi?.error('保存失败');
+        return;
+    }
+    const result = await baseApi.updateProject(projectInfo);
+    if (!result)
+        globalMessage.messageApi?.error('保存失败');
+    footerStore.latestSaveTime = new Date().toLocaleTimeString();
+    footerStore.setSaving(false)
+    NProgress.done()
+    return result;
+}
+
+export const doHide = () => {
+    const {targetIds, setTargetIds} = eventOperateStore;
+    if (!targetIds || targetIds.length === 0)
+        return;
+    historyRecordOperateProxy.doHideUpd(targetIds, true);
+    setTargetIds([]);
+}
+
+/**
+ * 图层编组,
+ * 编组时候，如果都是普通组件图层，则直接编组
+ * 如果包含了已经分组的图层，则将将已经编组的这个组作为基本图层和其他图层进行编组，
+ * 比如有A,B,C三个普通图层，则编组的时候可直接生成编组G
+ * 如果A,B已经编组为G1，此时再选中A,C或B,C，或者A,B,C，则编组的时候，G1作为基本图层，和C进行编组，生成G2
+ */
+export const doGrouping = () => {
+    historyRecordOperateProxy.doGrouping();
+}
+
+export const doUnGrouping = () => {
+    historyRecordOperateProxy.doUnGrouping();
+}
+
+
+export const removeFromGroup = () => {
+    historyRecordOperateProxy.doRemoveFromGroup();
+}
+
+export const cleanEmptyGroupings = () => {
+    const {layerConfigs} = window.LC_ENV.currentManager.layerManager;
+    const emptyGroupIdArr = LayerUtil.findEmptyGrouping(Object.values(layerConfigs));
+    deleteLayers(emptyGroupIdArr);
+}
+
+/*************************快捷键控制移动组件的位置*************************/
+
+export const doMoveUp = () => {
+    const {targetIds, movableRef, groupCoordinate} = eventOperateStore;
+    if (!targetIds || targetIds.length === 0) return;
+    const {layerManager, canvasManager} = window.LC_ENV.currentManager;
+    const {layerConfigs} = layerManager;
+    const {canvasConfig: {dragStep = 1}} = canvasManager!;
+    let yPos;
+    if (targetIds.length === 1) {
+        const id = targetIds[0];
+        yPos = (layerConfigs[id].y || 0) - dragStep;
+    } else {
+        yPos = (groupCoordinate?.minY || 0) - dragStep;
+    }
+    movableRef?.request("draggable", {y: yPos}, true);
+}
+
+export const doMoveDown = () => {
+    const {targetIds, movableRef, groupCoordinate} = eventOperateStore;
+    if (!targetIds || targetIds.length === 0) return;
+    const {layerManager, canvasManager} = window.LC_ENV.currentManager;
+    const {layerConfigs} = layerManager;
+    const {canvasConfig: {dragStep = 1}} = canvasManager!;
+    if (targetIds.length === 1) {
+        const id = targetIds[0];
+        const yPos = layerConfigs[id].y! + dragStep;
+        movableRef?.request("draggable", {y: yPos}, true);
+    } else {
+        const yPos = (groupCoordinate?.minY ?? Infinity) + dragStep;
+        movableRef?.request("draggable", {y: yPos}, true);
+    }
+}
+
+export const doMoveLeft = () => {
+    const {targetIds, movableRef, groupCoordinate} = eventOperateStore;
+    if (!targetIds || targetIds.length === 0) return;
+    const {layerManager, canvasManager} = window.LC_ENV.currentManager;
+    const {layerConfigs} = layerManager;
+    const {canvasConfig: {dragStep = 1}} = canvasManager!;
+    if (targetIds.length === 1) {
+        const id = targetIds[0];
+        const xPos = layerConfigs[id].x!;
+        movableRef?.request("draggable", {x: xPos - dragStep}, true);
+    } else {
+        const xPos = (groupCoordinate?.minX ?? Infinity) - dragStep;
+        movableRef?.request("draggable", {x: xPos}, true);
+    }
+}
+
+export const doMoveRight = () => {
+    const {targetIds, movableRef, groupCoordinate} = eventOperateStore;
+    if (!targetIds || targetIds.length === 0) return;
+    const {layerManager, canvasManager} = window.LC_ENV.currentManager;
+    const {layerConfigs} = layerManager;
+    const {canvasConfig: {dragStep = 1}} = canvasManager!;
+    if (targetIds.length === 1) {
+        const id = targetIds[0];
+        const xPos = layerConfigs[id].x!;
+        movableRef?.request("draggable", {x: xPos + dragStep}, true);
+    } else {
+        const xPos = (groupCoordinate?.minX ?? Infinity) + dragStep;
+        movableRef?.request("draggable", {x: xPos}, true);
+    }
+}
+
+/*************************快捷键控制缩放组件尺寸*************************/
+
+/**
+ * 以底部为基准向上扩大
+ */
+export const doBaseBottomEnlargeUp = () => {
+    const {targetIds, movableRef, groupCoordinate} = eventOperateStore;
+    if (!targetIds || targetIds.length === 0) return;
+    const {layerManager, canvasManager} = window.LC_ENV.currentManager;
+    const {layerConfigs} = layerManager;
+    const {canvasConfig: {resizeStep = 1}} = canvasManager!;
+    let height;
+    if (targetIds.length === 1) {
+        const id = targetIds[0];
+        height = layerConfigs[id].height! + resizeStep;
+    } else {
+        height = groupCoordinate.height! + resizeStep;
+    }
+    movableRef?.request("resizable", {offsetHeight: height, direction: [1, -1]}, true);
+}
+
+/**
+ * 以顶部为基准向下扩大
+ */
+export const doBaseUpEnlargeDown = () => {
+    const {targetIds, movableRef, groupCoordinate} = eventOperateStore;
+    if (!targetIds || targetIds.length === 0) return;
+    const {layerManager, canvasManager} = window.LC_ENV.currentManager;
+    const {layerConfigs} = layerManager;
+    const {canvasConfig: {resizeStep = 1}} = canvasManager!;
+    let height;
+    if (targetIds.length === 1) {
+        const id = targetIds[0];
+        height = layerConfigs[id].height! + resizeStep;
+    } else {
+        height = groupCoordinate.height! + resizeStep;
+    }
+    movableRef?.request("resizable", {offsetHeight: height, direction: [1, 1]}, true);
+}
+
+/**
+ * 以右边为基准向左扩大
+ */
+export const doBaseRightEnlargeLeft = () => {
+    const {targetIds, movableRef, groupCoordinate} = eventOperateStore;
+    if (!targetIds || targetIds.length === 0) return;
+    const {layerManager, canvasManager} = window.LC_ENV.currentManager;
+    const {layerConfigs} = layerManager;
+    const {canvasConfig: {resizeStep = 1}} = canvasManager!;
+    let width;
+    if (targetIds.length === 1) {
+        const id = targetIds[0];
+        width = layerConfigs[id].width! + resizeStep;
+    } else {
+        width = groupCoordinate.width! + resizeStep;
+    }
+    movableRef?.request("resizable", {offsetWidth: width, direction: [-1, 1]}, true);
+}
+
+/**
+ * 以左边为基准向右扩大
+ */
+export const doBaseLeftEnlargeRight = () => {
+    const {targetIds, movableRef, groupCoordinate} = eventOperateStore;
+    if (!targetIds || targetIds.length === 0) return;
+    const {layerManager, canvasManager} = window.LC_ENV.currentManager;
+    const {layerConfigs} = layerManager;
+    const {canvasConfig: {resizeStep = 1}} = canvasManager!;
+    let width;
+    if (targetIds.length === 1) {
+        const id = targetIds[0];
+        width = layerConfigs[id].width! + resizeStep;
+    } else {
+        width = groupCoordinate.width! + resizeStep;
+    }
+    movableRef?.request("resizable", {offsetWidth: width, direction: [1, 1]}, true);
+}
+
+
+/**
+ * 以底部为基准向上缩小
+ */
+export const doBaseBottomDecreaseUp = () => {
+    const {targetIds, movableRef, groupCoordinate} = eventOperateStore;
+    if (!targetIds || targetIds.length === 0) return;
+    const {layerManager, canvasManager} = window.LC_ENV.currentManager;
+    const {layerConfigs} = layerManager;
+    const {canvasConfig: {resizeStep = 1}} = canvasManager!;
+    let height;
+    if (targetIds.length === 1) {
+        height = layerConfigs[targetIds[0]].height! - resizeStep;
+    } else {
+        height = groupCoordinate.height! - resizeStep;
+    }
+    movableRef?.request("resizable", {offsetHeight: height, direction: [1, -1]}, true);
+}
+
+/**
+ * 以顶部为基准向下缩小
+ */
+export const doBaseUpDecreaseDown = () => {
+    const {targetIds, movableRef, groupCoordinate} = eventOperateStore;
+    if (!targetIds || targetIds.length === 0) return;
+    const {layerManager, canvasManager} = window.LC_ENV.currentManager;
+    const {layerConfigs} = layerManager;
+    const {canvasConfig: {resizeStep = 1}} = canvasManager!;
+    let height;
+    if (targetIds.length === 1) {
+        const id = targetIds[0];
+        height = layerConfigs[id].height! - resizeStep;
+    } else {
+        height = groupCoordinate.height! - resizeStep;
+    }
+    movableRef?.request("resizable", {offsetHeight: height, direction: [1, 1]}, true);
+}
+
+/**
+ * 以右边为基准向左缩小
+ */
+export const doBaseRightDecreaseLeft = () => {
+    const {targetIds, movableRef, groupCoordinate} = eventOperateStore;
+    if (!targetIds || targetIds.length === 0) return;
+    const {layerManager, canvasManager} = window.LC_ENV.currentManager;
+    const {layerConfigs} = layerManager;
+    const {canvasConfig: {resizeStep = 1}} = canvasManager!;
+    let width;
+    if (targetIds.length === 1) {
+        const id = targetIds[0];
+        width = layerConfigs[id].width! - resizeStep;
+    } else {
+        width = groupCoordinate.width! - resizeStep;
+    }
+    movableRef?.request("resizable", {offsetWidth: width, direction: [-1, 1]}, true);
+}
+
+/**
+ * 以左边为基准向右缩小
+ */
+export const doBaseLeftDecreaseRight = () => {
+    const {targetIds, movableRef, groupCoordinate} = eventOperateStore;
+    if (!targetIds || targetIds.length === 0) return;
+    const {layerManager, canvasManager} = window.LC_ENV.currentManager;
+    const {layerConfigs} = layerManager;
+    const {canvasConfig: {resizeStep = 1}} = canvasManager!;
+    let width;
+    if (targetIds.length === 1) {
+        const id = targetIds[0];
+        width = layerConfigs[id].width! - resizeStep;
+    } else {
+        width = groupCoordinate.width! - resizeStep;
+    }
+    movableRef?.request("resizable", {offsetWidth: width, direction: [1, 1]}, true);
+}
+
+/**
+ * 组内左对齐
+ */
+export const groupLeftAligned = () => {
+    historyRecordOperateProxy.groupLeftAligned();
+}
+
+/**
+ * 组内右对齐
+ */
+export const groupRightAligned = () => {
+    historyRecordOperateProxy.groupRightAligned();
+}
+
+/**
+ * 组内上对齐
+ */
+export const groupTopAligned = () => {
+    historyRecordOperateProxy.groupTopAligned();
+}
+
+/**
+ * 组内下对齐
+ */
+export const groupBottomAligned = () => {
+    historyRecordOperateProxy.groupBottomAligned();
+}
+
+/**
+ * 撤销
+ */
+export const undo = () => {
+    const history = historyOperator.backoff();
+    if (!history) return;
+    const {actions} = history!;
+    actions.forEach(action => {
+        const {type} = action!;
+        undoRedoMap.get(type)?.undo(action!);
+    })
+}
+
+/**
+ * 重做
+ */
+export const redo = () => {
+    const history = historyOperator.forward();
+    if (!history) return;
+    const {actions} = history!;
+    actions.forEach(action => {
+        const {type} = action!;
+        undoRedoMap.get(type)?.redo(action!);
+    });
+}
+
+
+/*************************运行时配置快捷键*************************/
+
+/**
+ * 切换辅助线展示
+ */
+export const toggleSecondaryBorder = () => {
+    const {auxiliaryBorder, setAuxiliaryBorder} = runtimeConfigStore;
+    const newValue = !auxiliaryBorder;
+    if (newValue) {
+        //展示辅助线
+        const compContainers = document.getElementsByClassName('lc-comp-item')
+        compContainers && Array.from(compContainers).forEach((compContainer: Element) => {
+            (compContainer as HTMLElement).style.border = '1px solid #65eafc';
+        });
+    } else {
+        //隐藏辅助线
+        const compContainers = document.getElementsByClassName('lc-comp-item')
+        compContainers && Array.from(compContainers).forEach((compContainer: Element) => {
+            (compContainer as HTMLElement).style.border = 'none';
+        });
+    }
+    setAuxiliaryBorder(!auxiliaryBorder);
+}
+
+/**
+ * 切换项目设置弹框
+ */
+export const toggleProjectConfig = () => {
+    const {currentKey, setCurrentKey} = designerHeaderStore;
+    if (currentKey === 'project')
+        setCurrentKey('')
+    else
+        setCurrentKey('project')
+}
+
+/**
+ * 切换画布设置弹框
+ */
+export const toggleCanvasConfig = () => {
+    const {currentKey, setCurrentKey} = designerHeaderStore;
+    if (currentKey === 'canvas')
+        setCurrentKey('')
+    else
+        setCurrentKey('canvas')
+}
+
+/**
+ * 切换全局主题设置弹框
+ */
+export const toggleGlobalThemeConfig = () => {
+    const {currentKey, setCurrentKey} = designerHeaderStore;
+    if (currentKey === 'theme')
+        setCurrentKey('')
+    else
+        setCurrentKey('theme')
+}
+
+/**
+ * 切换快捷键说明弹框
+ */
+export const toggleHotKeyDes = () => {
+    const {hotKeyVisible, setHotKeyVisible} = footerStore;
+    setHotKeyVisible(!hotKeyVisible)
+}
+
+export const exportProject = () => {
+    globalMessage.messageApi?.open({
+        key: 'exportProject',
+        type: 'loading',
+        content: '正在导出项目数据，需要一些时间，请耐心等候...',
+        duration: 0,
+    })
+    const timeout = setTimeout(() => {
+        //1. 计算当前项目所依赖的外部资源
+        const dependency = ProjectUtil.calculateProjectDependency(managerStore.currentFinalManager!.getData());
+        //2. 将项目数据及外部资源数据一起发送至后端并生成下载链接
+        AuthFetchUtil.post<Blob>('/api/export/exportProject', dependency).then((res) => {
+            if (res !== null) {
+                //3. 自动下载后端生成的压缩包
+                const url = URL.createObjectURL(res);
+                const a = document.createElement('a')
+                a.href = url;
+                a.download = `${document.title}.zip`;
+                a.click();
+                URL.revokeObjectURL(url);
+                globalMessage.messageApi?.success('项目数据导出成功');
+            }
+            globalMessage.messageApi?.destroy("exportProject");
+        });
+        clearTimeout(timeout);
+    }, 1000);
+}
+
+export const importProject = () => {
+    //打开文件选择框
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.zip';
+    input.onchange = (e: any) => {
+        globalMessage.messageApi?.open({
+            key: 'importProject',
+            type: 'loading',
+            content: '正在导入项目数据...'
+        })
+        const file = e.target.files[0] as File;
+        if (!file)
+            return;
+
+        const currFinalManager = managerStore.currentFinalManager;
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('projectId', currFinalManager?.id ?? '');
+        AuthFetchUtil.post<boolean>('/api/import/importProject', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((res) => {
+            const timer = setTimeout(() => {
+                clearTimeout(timer);
+                globalMessage.messageApi?.destroy("importProject");
+                if (res !== null) {
+                    globalMessage.messageApi?.success({content: '项目数据导入成功, 将重新加载页面！', duration: 1}).then(() => location.reload());
+                }
+            }, 1000)
+
+        })
+    }
+    input.click();
+}
+
+export const searchLayer = () => {
+    const {searchLayer, setSearchLayer} = layerListStore;
+    setSearchLayer(!searchLayer);
+}
+
+export const saveAsTemplate = () => {
+    const {targetIds} = eventOperateStore;
+    if (!targetIds || targetIds.length === 0)
+        return;
+    //筛选出图层和组件配置
+    const template: { layers: { [key: string]: ILayerItem }, configs: { [key: string]: any } } = {
+        layers: {},
+        configs: {}
+    };
+    const {layerConfigs, controllers} = window.LC_ENV.currentManager.layerManager;
+    //计算基准坐标
+    const baseCoordinate = CoordinateUtil.calculateGroupRectLT(targetIds, layerConfigs);
+    targetIds.forEach(id => {
+        let layer = layerConfigs[id];
+        if (layer) {
+            layer = cloneDeep(layer);
+            if (layer.type !== 'group') {
+                //计算相对位置
+                const {minX, minY} = baseCoordinate;
+                layer.x = layer.x! - minX;
+                layer.y = layer.y! - minY;
+            }
+            layer.lock = false;
+            template['layers'][id] = layer;
+        }
+        const controller = controllers[id];
+        if (controller)
+            template['configs'][id] = controller.getConfig();
+    });
+    let formInstance: FormInstance<{ name: string, description: string, coverFile: any }> | null = null;
+    globalModal.modalApi?.confirm({
+        title: '存为模板',
+        content: createElement(() => {
+            const [form] = Form.useForm();
+            formInstance = form;
+
+            return createElement(Form, {
+                form: form,
+                layout: 'vertical',
+                style: {marginTop: '16px'}
+            }, [
+                createElement(Form.Item, {
+                    key: 'name',
+                    label: '模板名称',
+                    name: 'name',
+                    rules: [{required: true, message: '请输入模板名称'}]
+                }, createElement(Input, {
+                    placeholder: '请输入模板名称'
+                })),
+
+                createElement(Form.Item, {
+                    key: 'description',
+                    label: '模板描述',
+                    name: 'description'
+                }, createElement(Input.TextArea, {
+                    placeholder: '请输入模板描述',
+                    rows: 3
+                })),
+
+                createElement(Form.Item, {
+                    key: 'coverFile',
+                    label: '封面图',
+                    name: 'coverFile',
+                    valuePropName: 'fileList',
+                    getValueFromEvent: (e) => {
+                        if (Array.isArray(e))
+                            return e;
+                        return e && e.fileList;
+                    }
+                }, createElement(Upload, {
+                    listType: 'picture',
+                    maxCount: 1,
+                    beforeUpload: () => false
+                }, createElement(Button, {
+                    icon: createElement('i', {className: 'anticon-upload'})
+                }, '上传模板封面图')))
+            ]);
+        }),
+        okText: '确定',
+        cancelText: '取消',
+        centered: true,
+        icon: null,
+        onOk: async () => {
+            if (!formInstance)
+                return false;
+            try {
+                const values = await formInstance.validateFields();
+                // 构建表单数据
+                const formData = new FormData();
+                formData.append('name', values.name);
+                formData.append('description', values.description || '');
+                if (values.coverFile && values.coverFile.length > 0)
+                    formData.append('coverFile', values.coverFile[0].originFileObj);
+                formData.append('templateJson', JSON.stringify(template));
+                await baseApi.createTemplate(formData);
+                globalMessage.messageApi?.success('操作成功');
+                return true;
+            } catch (error) {
+                console.log('表单验证失败:', error);
+                return false; // 返回false阻止关闭
+            }
+        }
+    });
+
+}
+
+export const createLoopContainer = () => {
+    historyRecordOperateProxy.createLoopContainer();
+}
+
+/**
+ * 编辑循环容器
+ * @param layerId
+ */
+export const editLoopContainer = (layerId: string) => {
+    if (!layerId)
+        return;
+    const {layerManager: {controllers}} = window.LC_ENV.currentManager;
+    const controller = controllers[layerId];
+    if (!controller)
+        return;
+    const {setTargetIds} = eventOperateStore;
+    setTargetIds([]);
+    const currentManager = (controller as any).manager;
+    managerStore.pushManager(currentManager)
+    window.LC_ENV.currentManager = currentManager;
+    managerStore.setCurrentManager(currentManager);
+    const timer = setTimeout(() => {
+        window.LC_ENV?.dragScaleProvider?.reset();
+        window.LC_ENV?.historyOperator?.reset();
+        rightStore.activeConfig(null, '');
+        clearTimeout(timer);
+    }, 10)
+}
+
+/**
+ * 返回主项目
+ */
+export const returnPrevProject = () => {
+    const {setTargetIds} = eventOperateStore;
+    setTargetIds([]);
+    let manager = managerStore.popManager();
+    if (!manager)
+        return;
+    if (manager === managerStore.currentManager)
+        manager = managerStore.popManager();
+    if (!manager)
+        return;
+    window.LC_ENV.currentManager = manager;
+    managerStore.setCurrentManager(manager);
+    const timer = setTimeout(() => {
+        window.LC_ENV?.dragScaleProvider?.reset();
+        window.LC_ENV?.historyOperator?.reset();
+        rightStore.activeConfig(null, '');
+        clearTimeout(timer);
+    }, 10)
+}
+
+/*************************蓝图快捷键实现*************************/
+
+/**
+ * 删除蓝图中选中的节点
+ */
+export const delBPNode = () => {
+    if (designerHeaderStore.currentKey !== 'blue-print') return;
+    const {selectedNodes, selectedNodeIds, delNode} = window.LC_ENV.currentManager.bluePrintManager!;
+    if (selectedNodes.length === 0)
+        return;
+    delNode(selectedNodeIds);
+    //如果删除的是图层节点，则恢复左侧图层节点的可拖拽性
+    const {setUsedNodes, usedNodes} = bpLeftStore;
+    selectedNodeIds.forEach(nodeId => {
+        if (nodeId in usedNodes)
+            setUsedNodes(nodeId, false);
+    })
+    BpCanvasUtil.reRenderAllLine();
+}
+
+/**
+ * 删除蓝图中选中的连线
+ */
+export const delBPLine = () => {
+    if (designerHeaderStore.currentKey !== 'blue-print') return;
+    const {selectedLines, delLine} = window.LC_ENV.currentManager.bluePrintManager!;
+    if (selectedLines.length === 0)
+        return;
+    delLine(selectedLines);
+    BpCanvasUtil.reRenderAllLine();
+}