light-chaser-pro 1.0.0

package/light-chaser-app/src/designer/left/source-list/image-source/ImageSource.tsx

@@ -0,0 +1,155 @@
+/*
+ * 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 {useEffect, useRef, useState} from "react";
+import {ILayerItem} from "light-chaser-types/types/LayerTypes.ts";
+import './ImageSource.less';
+import eventOperateStore from "../../../operate-provider/EventOperateStore";
+import IdGenerate from "../../../../../../light-chaser-util/lib/IdGenerate.ts";
+import {BaseImageComponentProps} from "../../../../comps/lc/base-image/BaseImageController";
+import {IImageData} from "../../../../comps/lc/base-image/BaseImageComponent";
+import DragAddProvider from "../../../../framework/drag-scale/DragAddProvider";
+import {Input, Popconfirm} from "antd";
+import historyRecordOperateProxy from "../../../operate-provider/undo-redo/HistoryRecordOperateProxy.ts";
+import {Close, Help} from "@icon-park/react";
+import baseApi from "../../../../api/engineering/BaseApi.ts";
+import ServerOperator from "../../../../api/engineering/BaseApi.ts";
+import DesignerLoader from "../../../loader/DesignerLoader.ts";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+
+
+export default function ImageSource() {
+
+    const [imageList, setImageList] = useState<IImageData[]>([]);
+    const dragAddProvider = useRef<DragAddProvider | null>(null);
+
+    //拖拽开始
+    const dragStart = (event: DragEvent) => {
+        // 设置拖拽数据
+        if ((event.target as HTMLElement).classList.contains('droppable-element')) {
+            const element = event.target as HTMLElement;
+            event.dataTransfer?.setData('imageUrl', element.getAttribute('data-url')!);
+            event.dataTransfer?.setData('imageHash', element.getAttribute('data-hash')!);
+        }
+    }
+
+    //拖拽覆盖
+    const dragover = (event: DragEvent) => {
+        event.preventDefault(); // 阻止默认行为以允许拖放
+    }
+    //释放拖拽元素
+    const drop = (event: DragEvent) => {
+        event.preventDefault();
+        const url = event.dataTransfer?.getData('imageUrl');
+        const hash = event.dataTransfer?.getData('imageHash');
+        if (!url) return;
+        //获取鼠标位置,添加元素
+        const {scale, dsContentRef} = eventOperateStore;
+        const contentPos = dsContentRef?.getBoundingClientRect();
+        const x = (event.clientX - (contentPos?.x || 0)) / scale;
+        const y = (event.clientY - (contentPos?.y || 0)) / scale;
+        addItem("BaseImage", [x, y], url, hash);
+    }
+
+    const addItem = (compKey: string, position = [0, 0], url: string, hash?: string) => {
+        const {elemConfigs} = window.LC_ENV.currentManager.layerManager;
+        const {setAddRecordCompId} = eventOperateStore;
+        const definition = DesignerLoader.definitionMap[compKey];
+        const {compName, width = 320, height = 200} = definition.getBaseInfo();
+        const id = IdGenerate.generateId();
+        const movableItem: ILayerItem = {
+            name: compName,
+            type: compKey,
+            x: Math.round(position![0]),
+            y: Math.round(position![1]),
+            id,
+            lock: false,
+            hide: false,
+            width,
+            height,
+        }
+        setAddRecordCompId(movableItem.id!)
+        historyRecordOperateProxy.doAdd(movableItem);
+
+        //图片资源拖拽要提前设置好图片地址
+        const initConfig: BaseImageComponentProps = definition.getInitConfig();
+        initConfig.style!.type = 'local';
+        initConfig.style!.localUrl = url;
+        initConfig.style!.hash = hash;
+        elemConfigs![id] = initConfig;
+    }
+
+    const getImageList = () => {
+        baseApi.getImageSourceList().then((data) => {
+            setImageList(data);
+        });
+    }
+
+    useEffect(() => {
+        getImageList();
+
+        //处理拖拽元素到画布中
+        dragAddProvider.current = new DragAddProvider(
+            document.getElementById("image-source-list")!,
+            document.getElementById("designer-ds-content")!,
+            dragStart,
+            dragover,
+            drop
+        );
+        return () => dragAddProvider.current?.destroy();
+    }, []);
+
+    const confirmDel = (imageId: string) => {
+        ServerOperator.delImageSource(imageId).then((data) => {
+            if (data) {
+                getImageList();
+                globalMessage.messageApi?.success("已删除")
+            }
+        });
+    }
+
+    return <div className={'image-source'}>
+        <div className={'image-source-search'}>
+            <Input placeholder="搜索图片"/>
+        </div>
+        <div className={'image-source-list'} id={'image-source-list'}>
+            {
+                imageList.map((item: IImageData, index: number) => {
+                    return <div className={'image-source-item droppable-element'} key={index}
+                                draggable={true} data-url={item.url}
+                                data-hash={item.hash}>
+                        <div className={'image-source-item-header'}>
+                            <div className={'isi-title'}>{item.name || '无名称信息'}</div>
+                            <div className={'isi-operate'}>
+                                <Popconfirm title="确认删除吗?"
+                                            icon={<Help style={{
+                                                color: 'red',
+                                                position: 'relative',
+                                                top: 3,
+                                                marginRight: 2
+                                            }}/>}
+                                            description="可能会导致已经使用的图片组件失效!"
+                                            onConfirm={() => confirmDel(item.id!)}
+                                            okText="是"
+                                            cancelText="否">
+                                    <Close/>
+                                </Popconfirm>
+                            </div>
+                        </div>
+                        <div className={'image-source-item-body'}>
+                            <div className={'item-bg-image'} style={{backgroundImage: `url(${item.url})`}}/>
+                        </div>
+                    </div>
+                })
+            }
+        </div>
+    </div>;
+}

package/light-chaser-app/src/designer/left/sub-project/SubProject.less

@@ -0,0 +1,200 @@
+/*
+ * 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.
+ */
+
+.sub-project {
+  width: 300px;
+  background-color: #1E1E2F;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  color: #FFFFFF;
+  font-family: Inter, Roboto, 'Helvetica Neue', sans-serif;
+
+  // 顶部操作区
+  &-header {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 24px;
+  }
+
+  // 搜索框样式
+  &-search {
+    flex: 1;
+    background-color: #2C2C3E;
+    border: 1px solid #3A3A4E;
+    border-radius: 4px;
+    height: 40px;
+
+    // 覆盖AntD默认样式
+    .ant-input {
+      background-color: transparent;
+      border: none;
+      color: #FFFFFF;
+
+      &::placeholder {
+        color: #A0A0B2;
+      }
+    }
+
+    .ant-input-prefix {
+      color: #A0A0B2;
+    }
+  }
+
+  // 添加按钮样式
+  &-add-btn {
+    background-color: #4FB8FF;
+    border: none;
+    border-radius: 4px;
+    color: #FFFFFF;
+    font-weight: 500;
+    padding: 0 24px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &:hover {
+      background-color: lighten(#4FB8FF, 10%);
+    }
+
+    &:active {
+      background-color: darken(#4FB8FF, 10%);
+    }
+  }
+
+  // 项目列表
+  &-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .main-project {
+      background: linear-gradient(135deg, #2A4B6A 0%, #1E3B53 100%);
+      border: 2px solid rgba(79, 184, 255, 0);
+      box-shadow: 0 4px 16px rgba(79, 184, 255, 0.2),
+      0 0 20px rgba(32, 80, 112, 0.3) inset;
+      position: relative;
+      overflow: hidden;
+      padding: 21px 20px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: -24%;
+        left: 2%;
+        width: 81%;
+        height: 190%;
+        background: linear-gradient(45deg, transparent 0%, rgba(79, 184, 255, 0.1) 50%, transparent 100%);
+        transform: rotate(45deg);
+      }
+
+      .sub-project-item-name {
+        color: #4FB8FF;
+        font-weight: 600;
+        font-size: 16px;
+        text-shadow: 0 0 8px rgba(79, 184, 255, 0.4);
+        position: relative;
+        z-index: 1;
+      }
+
+      &:hover {
+        background: linear-gradient(135deg, #31587A 0%, #224768 100%);
+        border-color: rgba(79, 184, 255, 0.8);
+        box-shadow: 0 6px 20px rgba(79, 184, 255, 0.3),
+        0 0 25px rgba(32, 80, 112, 0.4) inset;
+        transform: translateY(-1px);
+      }
+    }
+  }
+
+  // 项目卡片
+  &-item {
+    background-color: #2C2C3E;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    padding: 16px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: all 0.2s ease;
+    cursor: pointer;
+
+    &:hover {
+      background-color: lighten(#2C2C3E, 5%);
+      border-color: rgba(79, 184, 255, 0.5);
+      box-shadow: 0 0 0 2px rgba(79, 184, 255, 0.1);
+    }
+  }
+
+  // 激活状态的项目卡片
+  &-item-active {
+    background-color: lighten(#2C2C3E, 8%) !important;
+    border: 1px solid #4FB8FF !important;
+    box-shadow: 0 0 0 2px rgba(79, 184, 255, 0.2) !important;
+  }
+
+  // 项目名称
+  &-item-name {
+    font-size: 14px;
+    line-height: 20px;
+    color: #FFFFFF;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding-right: 8px;
+  }
+
+  // 编辑输入框
+  &-edit-input {
+    flex: 1;
+    background-color: #3A3A4E;
+    border: 1px solid #4FB8FF;
+    border-radius: 4px;
+    height: 32px;
+    margin-right: 8px;
+
+    .ant-input {
+      background-color: transparent;
+      border: none;
+      color: #FFFFFF;
+      font-size: 14px;
+      height: 30px;
+      padding: 0 8px;
+    }
+  }
+
+  // 删除按钮
+  &-item-delete {
+    color: #FF6E6E;
+    border: none;
+    background: transparent;
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+
+    &:hover {
+      background-color: rgba(255, 110, 110, 0.1);
+      color: lighten(#FF6E6E, 10%);
+    }
+
+    &:active {
+      background-color: rgba(255, 110, 110, 0.2);
+    }
+
+    // 覆盖AntD默认样式
+    .anticon {
+      font-size: 18px;
+    }
+  }
+}

package/light-chaser-app/src/designer/left/sub-project/SubProject.tsx

@@ -0,0 +1,231 @@
+/*
+ * 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 {observer} from "mobx-react";
+import {Button, Input} from 'antd';
+import {useEffect, useState} from 'react';
+import './SubProject.less';
+import {Delete, Search} from "@icon-park/react";
+import NewProjectDialog, {INewProjectInfo} from "../../../pages/home/project-list/NewProjectDialog.tsx";
+import baseApi from "../../../api/engineering/BaseApi.ts";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+import {globalModal} from "light-chaser-ui/lib/message/GlobalModal.tsx";
+import DesignerManager from "../../manager/DesignerManager.ts";
+import {DesignerMode, DesignerScene} from "light-chaser-types/types/DesignerTypes.ts";
+import managerStore from "../../manager/ManagerStore.ts";
+import eventOperateStore from "../../operate-provider/EventOperateStore.ts";
+import rightStore from "../../right/RightStore.ts";
+import {doSave} from "../../operate-provider/hot-key/HotKeyImpl.ts";
+
+interface Project {
+    id: string;
+    name: string;
+}
+
+const SubProject = observer(() => {
+    // 模拟项目数据
+    const [projects, setProjects] = useState<Project[]>([]);
+    const [selectedId, setSelectedId] = useState<string | null>(null);
+    const [editingId, setEditingId] = useState<string | null>(null);
+    const [editValue, setEditValue] = useState<string>('');
+    const [addVisible, setAddVisible] = useState(false);
+
+    // 处理项目选择
+    const handleSelect = (id: string) => {
+        const {currentManager} = managerStore;
+        if (currentManager?.id === id)
+            return;
+        setSelectedId(id);
+        globalMessage.messageApi?.open({
+            key: 'handleSelect',
+            type: 'loading',
+            content: '正在切换工作空间',
+            duration: 0,
+        })
+        doSave().then(() => {
+            globalMessage.messageApi?.destroy("handleSelect");
+            baseApi.getProjectData(id).then((subData) => {
+                if (subData?.data) {
+                    const {id, name} = subData;
+                    subData.data.id = id;
+                    subData.data.name = name;
+                    const designerManager = new DesignerManager(DesignerScene.SUB_PROJECT);
+                    const {setTargetIds} = eventOperateStore;
+                    setTargetIds([]);
+                    designerManager.init(subData?.data, DesignerMode.EDIT);
+                    window.LC_ENV.currentManager = designerManager;
+                    managerStore.setCurrentManager(designerManager, false, DesignerScene.SUB_PROJECT);
+                    const timer = setTimeout(() => {
+                        window.LC_ENV?.dragScaleProvider?.reset();
+                        window.LC_ENV?.historyOperator?.reset();
+                        rightStore.activeConfig(null, '');
+                        clearTimeout(timer);
+                        globalMessage.messageApi?.success('切换成功')
+                    }, 10)
+                }
+            })
+        })
+    };
+
+    const selectMainProject = () => {
+        globalMessage.messageApi?.open({
+            key: 'selectMainProject',
+            type: 'loading',
+            content: '正在切换工作空间',
+            duration: 0,
+        })
+        setSelectedId("MAIN");
+        doSave().then(() => {
+            globalMessage.messageApi?.destroy("selectMainProject");
+            const {isMainManager} = managerStore;
+            if (isMainManager)
+                return;
+            const {setTargetIds} = eventOperateStore;
+            setTargetIds([]);
+            window.LC_ENV.currentManager = window.LC_ENV.mainManger;
+            managerStore.setCurrentManager(window.LC_ENV.mainManger, true, DesignerScene.DEFAULT);
+            const timer = setTimeout(() => {
+                window.LC_ENV?.dragScaleProvider?.reset();
+                window.LC_ENV?.historyOperator?.reset();
+                rightStore.activeConfig(null, '');
+                globalMessage.messageApi?.success('切换成功')
+                clearTimeout(timer);
+            }, 10)
+        });
+    }
+
+    // 进入编辑模式
+    const handleEditStart = (id: string, name: string) => {
+        setEditingId(id);
+        setEditValue(name);
+    };
+
+    // 保存编辑
+    const handleEditSave = (id: string) => {
+        if (editValue.trim() === '') return;
+
+        setProjects(projects.map(project =>
+            project.id === id ? {...project, name: editValue} : project
+        ));
+        setEditingId(null);
+        setEditValue('');
+    };
+
+    // 取消编辑
+    const handleEditCancel = () => {
+        setEditingId(null);
+        setEditValue('');
+    };
+
+    // 处理键盘事件
+    const handleKeyPress = (e: React.KeyboardEvent, id: string) => {
+        if (e.key === 'Enter') {
+            handleEditSave(id);
+        } else if (e.key === 'Escape') {
+            handleEditCancel();
+        }
+    };
+
+    const handleCreate = (data: INewProjectInfo) => {
+        const {name, des, width, height} = data;
+        const dataJson = JSON.stringify({canvasManager: {width, height}});
+        const subData = {name, pid: window.LC_ENV.projectId, des, dataJson}
+        baseApi.createSubProject(subData).then((subId) => {
+            if (subId) {
+                setAddVisible(false)
+                loadSubProjectList();
+            }
+        })
+    }
+
+    const delSubProject = (subId: string) => {
+        globalModal?.modalApi?.confirm({
+            title: '删除子项目',
+            content: '删除后将无法恢复，确认删除吗？',
+            okText: '删除',
+            cancelText: '取消',
+            onOk: () => {
+                baseApi.deleteSubProject(window.LC_ENV.projectId, subId).then((res) => {
+                    if (res) {
+                        globalMessage?.messageApi?.success('删除成功')
+                        loadSubProjectList();
+                    }
+                })
+            },
+        })
+
+    }
+
+    const loadSubProjectList = () => {
+        baseApi.getSubProjectList(window.LC_ENV.projectId).then((subProjects) => {
+            setProjects(subProjects as Project[])
+        })
+    }
+
+    useEffect(() => {
+        loadSubProjectList();
+    }, [])
+
+    return (
+        <div className='sub-project'>
+            {/* 顶部操作区 */}
+            <div className="sub-project-header">
+                <Input placeholder="搜索项目"
+                       prefix={<Search/>}
+                       className="sub-project-search"/>
+                <Button type="primary"
+                        onClick={() => setAddVisible(true)}
+                        className="sub-project-add-btn">
+                    添加
+                </Button>
+            </div>
+
+            {/* 项目列表 */}
+            <div className="sub-project-list">
+                <div className={`sub-project-item main-project ${selectedId === "MAIN" ? "sub-project-item-active" : ""}`}
+                     onClick={selectMainProject}>
+                    <div className="sub-project-item-name">主项目</div>
+                </div>
+                {projects.map(project => (
+                    <div key={project.id}
+                         className={`sub-project-item ${selectedId === project.id ? 'sub-project-item-active' : ''}`}
+                         onClick={() => handleSelect(project.id)}>
+                        {editingId === project.id ? (
+                            <Input
+                                value={editValue}
+                                onChange={(e) => setEditValue(e.target.value)}
+                                onBlur={() => handleEditSave(project.id)}
+                                onKeyDown={(e) => handleKeyPress(e, project.id)}
+                                autoFocus
+                                className="sub-project-edit-input"
+                            />
+                        ) : (
+                            <div className="sub-project-item-name"
+                                 onDoubleClick={() => handleEditStart(project.id, project.name)}>
+                                {project.name}
+                            </div>
+                        )}
+                        <Button type="text"
+                                icon={<Delete/>}
+                                className="sub-project-item-delete"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    delSubProject(project.id)
+                                }}/>
+                    </div>
+                ))}
+            </div>
+            <NewProjectDialog visible={addVisible} onOk={handleCreate} onCancel={() => setAddVisible(false)}/>
+        </div>
+    )
+})
+
+export default SubProject;