light-chaser-pro 1.0.0

package/light-chaser-app/src/designer/footer/cover/CoverConfig.tsx

@@ -0,0 +1,113 @@
+/*
+ * 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 './CoverConfig.less';
+import {useRef, useState} from "react";
+import {globalMessage} from "light-chaser-ui/lib/main";
+import {Button, Modal, Upload as AntdUpLoad, UploadFile} from "antd";
+import {RcFile} from "antd/es/upload";
+import {UploadLaptop} from "@icon-park/react";
+import baseApi from "../../../api/engineering/BaseApi.ts";
+
+export interface CoverConfigProps {
+    onClose: () => void;
+}
+
+export const CoverConfig = (prop: CoverConfigProps) => {
+    const {onClose} = prop;
+    const urlRef = useRef<string | null>(null);
+    const imageFileRef = useRef<File | null>(null);
+    const fileInfo = {
+        uid: '-1',
+        name: 'image.png',
+        status: 'done',
+    }
+    const [fileList, setFileList] = useState([]);
+
+    const doSave = () => {
+        if (!imageFileRef.current) {
+            globalMessage.messageApi?.warning('请先上传封面');
+            return;
+        }
+        baseApi.uploadCover(imageFileRef.current!).then((data) => {
+            if (data) {
+                globalMessage.messageApi?.info('封面生成成功！');
+                _onClose();
+            } else globalMessage.messageApi?.error('封面生成失败！');
+        });
+    }
+
+    const _onClose = () => {
+        if (urlRef.current) {
+            URL.revokeObjectURL(urlRef.current!);
+            imageFileRef.current = null;
+        }
+        onClose();
+    }
+
+    const beforeUpload = (file: RcFile) => {
+        imageFileRef.current = file;
+        const fileReader = new FileReader();
+        fileReader.onload = async (event: ProgressEvent<FileReader>) => {
+            const blob = new Blob([event.target!.result!], {type: file.type});
+            const url = URL.createObjectURL(blob);
+            urlRef.current = url;
+            setFileList([{...fileInfo, url}] as any);
+        };
+        //通过二进制流读取文件，读取完毕后会调用上方设置好的onload事件
+        fileReader.readAsArrayBuffer(file);
+        //阻止默认上传
+        return false;
+    }
+
+    return (
+        <Modal
+            title={'封面设置'}
+            className={'cover-config-modal'}
+            open={true}
+            width={520}
+            footer={null}
+            onCancel={_onClose}
+            styles={{
+                body: {borderRadius: '8px'},
+                header: {
+                    borderBottom: '1px solid #3A3A4E',
+                    borderRadius: '8px 8px 0 0',
+                    padding: '16px 24px',
+                    margin: 0
+                }
+            }}
+        >
+            <div className={'cover-config-content'}>
+                <div className={'cover-upload-section'}>
+                    <AntdUpLoad
+                        name={'file'}
+                        beforeUpload={beforeUpload}
+                        listType={'picture-card'}
+                        fileList={fileList as Array<UploadFile>}
+                        accept={'image/*'}
+                        onRemove={() => setFileList([])}
+                        onPreview={() => window.open((fileList[0] as any).url)}
+                        className="cover-upload"
+                    >
+                        {fileList.length > 0 ? null : <div className={'cover-upload-btn'}>
+                            <UploadLaptop size={24} strokeWidth={2} className="upload-icon"/>
+                            <div className="upload-text">{'选择文件上传'}</div>
+                        </div>}
+                    </AntdUpLoad>
+                </div>
+                <div className={'cover-action-section'}>
+                    <Button onClick={doSave} className="cover-save-btn">{'保存封面'}</Button>
+                </div>
+            </div>
+        </Modal>
+    );
+}

package/light-chaser-app/src/designer/footer/hotkey-des/HotKeyDes.less

@@ -0,0 +1,63 @@
+/*
+ * 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.
+ */
+
+.lc-hotkey-des {
+  padding: 24px;
+  background-color: #2c2c3e;
+  border-radius: 0 0 8px 8px;
+
+  .hotkey-des-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: 'Inter', 'Helvetica Neue', sans-serif;
+
+    .table-header {
+      background-color: #2C2C3E;
+      color: #FFFFFF;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 20px;
+      padding: 12px 16px;
+      text-align: center;
+      border-bottom: 1px solid #3A3A4E;
+
+      &:first-child {
+        border-radius: 4px 0 0 4px;
+      }
+
+      &:last-child {
+        border-radius: 0 4px 4px 0;
+      }
+    }
+
+    .table-row {
+      transition: background-color 0.2s;
+      border-bottom: 1px solid #3A3A4E;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      &:hover {
+        background-color: rgba(79, 184, 255, 0.08);
+      }
+    }
+
+    .table-cell {
+      color: #A0A0B2;
+      font-size: 14px;
+      line-height: 20px;
+      padding: 16px;
+      text-align: center;
+      border: none;
+    }
+  }
+}

package/light-chaser-app/src/designer/footer/hotkey-des/HotKeyDes.tsx

@@ -0,0 +1,111 @@
+/*
+ * 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 './HotKeyDes.less';
+import {Modal} from 'antd';
+
+export interface HotKeyDesProps {
+    onClose: () => void;
+}
+
+export const HotKeyDes = (prop: HotKeyDesProps) => {
+    const {onClose} = prop;
+
+    const hotkeys = [
+        {name: '保存项目', windows: 'ctrl + s', mac: 'ctrl + s'},
+        {name: '克隆组件', windows: 'ctrl + d', mac: 'ctrl + d'},
+        {name: '复制组件', windows: 'ctrl + c', mac: 'ctrl + c'},
+        {name: '粘贴组件', windows: 'ctrl + v', mac: 'ctrl + v'},
+        {name: '锁定组件', windows: 'ctrl + l', mac: 'ctrl + l'},
+        {name: '解锁组件', windows: 'ctrl + shift + l', mac: 'ctrl + shift + l'},
+        {name: '隐藏组件', windows: 'ctrl + h', mac: 'ctrl + h'},
+        {name: '开/关辅助边框', windows: 'ctrl + k', mac: 'ctrl + k'},
+        {name: '图层置顶', windows: 'ctrl + up-arrow(方向上键)', mac: 'ctrl + up-arrow(方向上键)'},
+        {name: '图层置底', windows: 'ctrl + down-arrow(方向下键)', mac: 'ctrl + down-arrow(方向下键)'},
+        {name: '图层上移', windows: 'alt + up-arrow(方向上键)', mac: 'options + up-arrow(方向上键)'},
+        {name: '图层下移', windows: 'alt + down-arrow(方向下键)', mac: 'options + down-arrow(方向下键)'},
+        {name: '删除组件', windows: 'delete', mac: 'command + backspace'},
+        {name: '缩放画布', windows: 'alt + wheel(鼠标滑轮)', mac: 'options + wheel(鼠标滑轮)'},
+        {name: '拖拽画布', windows: '长按鼠标右键', mac: '长按鼠标右键'},
+        {name: '组件上移', windows: '方向上键', mac: '方向上键'},
+        {name: '组件下移', windows: '方向下键', mac: '方向下键'},
+        {name: '组件左移', windows: '方向左键', mac: '方向左键'},
+        {name: '组件右移', windows: '方向右键', mac: '方向右键'},
+        {name: '组件上扩大', windows: 'ctrl + shift + 方向上键', mac: 'ctrl + shift + 方向上键'},
+        {name: '组件下扩大', windows: 'ctrl + shift + 方向下键', mac: 'ctrl + shift + 方向下键'},
+        {name: '组件左扩大', windows: 'ctrl + shift + 方向左键', mac: 'ctrl + shift + 方向左键'},
+        {name: '组件右扩大', windows: 'ctrl + shift + 方向右键', mac: 'ctrl + shift + 方向右键'},
+        {name: '组件上缩小', windows: 'ctrl + alt + 方向上键', mac: 'ctrl + options + 方向上键'},
+        {name: '组件下缩小', windows: 'ctrl + alt + 方向下键', mac: 'ctrl + options + 方向下键'},
+        {name: '组件左缩小', windows: 'ctrl + alt + 方向左键', mac: 'ctrl + options + 方向左键'},
+        {name: '组件右缩小', windows: 'ctrl + alt + 方向右键', mac: 'ctrl + options + 方向右键'},
+        {name: '撤销', windows: 'ctrl + z', mac: 'ctrl + z'},
+        {name: '重做', windows: 'ctrl + shift + z', mac: 'ctrl + shift + z'},
+        {name: '打开/关闭项目设置', windows: 'ctrl + 1', mac: 'ctrl + 1'},
+        {name: '打开/关闭画布设置', windows: 'ctrl + 2', mac: 'ctrl + 2'},
+        {name: '打开/关闭全局主题设置', windows: 'ctrl + 3', mac: 'ctrl + 3'},
+        {name: '打开/关闭快捷键说明', windows: 'ctrl + 4', mac: 'ctrl + 4'},
+        {name: '编组', windows: 'ctrl + g', mac: 'ctrl + g'},
+        {name: '解除编组', windows: 'ctrl + shift + g', mac: 'ctrl + shift + g'},
+        {name: '从分组中移除', windows: 'alt + shift + g', mac: 'options + shift + g'},
+        {name: '搜索图层', windows: 'ctrl + f', mac: 'ctrl + f'},
+        {name: '组内上对齐', windows: 'shift + 方向上键', mac: 'shift + 方向上键'},
+        {name: '组内下对齐', windows: 'shift + 方向下键', mac: 'shift + 方向下键'},
+        {name: '组内左对齐', windows: 'shift + 方向左键', mac: 'shift + 方向左键'},
+        {name: '组内右对齐', windows: 'shift + 方向右键', mac: 'shift + 方向右键'},
+    ]
+
+    return (
+        <Modal title={'快捷键说明'}
+               open={true}
+               width={800}
+               onCancel={onClose}
+               centered={true}
+               footer={null}
+               className="hotkey-modal"
+               styles={{
+                   body: {padding: 0, maxHeight: "calc(100vh - 200px)", overflowY: 'auto',},
+                   header: {
+                       backgroundColor: '#2C2C3E',
+                       borderBottom: '1px solid #3A3A4E',
+                       borderRadius: '8px 8px 0 0',
+                       padding: '16px 24px',
+                       margin: 0
+                   }
+               }}>
+            <div className={'lc-hotkey-des'}>
+                <table className={'hotkey-des-table'}>
+                    <thead style={{position: 'sticky', top: 0}}>
+                    <tr>
+                        <th className="table-header">{'编号'}</th>
+                        <th className="table-header" style={{textAlign: 'left'}}>{'功能'}</th>
+                        <th className="table-header" style={{textAlign: 'left'}}>Windows</th>
+                        <th className="table-header" style={{textAlign: 'left'}}>Mac</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+
+                    {hotkeys.map((item, index) => {
+                        return (
+                            <tr key={index} className="table-row">
+                                <td className="table-cell">{index + 1}</td>
+                                <td className="table-cell" style={{textAlign: 'left'}}>{item.name}</td>
+                                <td className="table-cell" style={{textAlign: 'left'}}>{item.windows}</td>
+                                <td className="table-cell" style={{textAlign: 'left'}}>{item.mac}</td>
+                            </tr>
+                        )
+                    })}
+                    </tbody>
+                </table>
+            </div>
+        </Modal>
+    );
+}

package/light-chaser-app/src/designer/header/DesignerHeader.less

@@ -0,0 +1,132 @@
+/*
+ * 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.
+ */
+
+.designer-header {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  background-color: #1E1E2F;
+  color: #FFFFFF;
+  font-family: 'Inter', 'Helvetica Neue', 'Roboto', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  border-bottom: 1px solid #2C2C3E;
+  padding: 0 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  position: relative;
+  z-index: 1;
+
+  .header-logo {
+    margin-right: 32px;
+    min-width: 100px;
+    max-width: 180px;
+    height: 32px;
+    flex-shrink: 0;
+
+    img {
+      height: 100%;
+      width: auto;
+      object-fit: contain;
+    }
+  }
+
+  .header-operate-menus {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .menu-left {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    flex-shrink: 0;
+  }
+
+  .menu-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    flex: 1;
+    margin: 0 24px;
+  }
+
+  .menu-right {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+    color: #A0A0B2;
+    height: 36px;
+    margin: 0 4px;
+    white-space: nowrap;
+
+    &:hover {
+      background-color: rgba(79, 184, 255, 0.1);
+      color: #4FB8FF;
+    }
+
+    &:active,
+    &.active {
+      background-color: rgba(79, 184, 255, 0.2);
+      color: #4FB8FF;
+      font-weight: 500;
+    }
+
+    &:focus-visible {
+      outline: 2px solid #4FB8FF;
+      outline-offset: 2px;
+    }
+
+    span {
+      padding: 0 4px;
+    }
+
+    .anticon {
+      font-size: 16px;
+      margin-right: 6px;
+    }
+  }
+
+  .menu-item-hide {
+    visibility: hidden;
+    pointer-events: none;
+  }
+}
+
+// 响应式适配
+@media (max-width: 1200px) {
+  .designer-header {
+    padding: 0 16px;
+
+    .header-logo {
+      margin-right: 16px;
+    }
+
+    .menu-center {
+      margin: 0 16px;
+    }
+  }
+}

package/light-chaser-app/src/designer/header/DesignerHeader.tsx

@@ -0,0 +1,172 @@
+/*
+ * 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 {ComponentType, ReactElement, ReactNode, useState} from 'react';
+import './DesignerHeader.less';
+import {observer} from "mobx-react";
+import eventOperateStore from "../operate-provider/EventOperateStore";
+import {createLoopContainer, exportProject, importProject, returnPrevProject, throttleSave} from "../operate-provider/hot-key/HotKeyImpl";
+import CanvasHdConfigImpl from "./items/canvas/CanvasHdConfigImpl.tsx";
+import ProjectHdItemImpl from "./items/project/ProjectHdItemImpl.tsx";
+import ThemeHdItemImpl from "./items/theme/ThemeHdItemImpl.tsx";
+import BluePrintHdImpl from "./items/blue-print/BluePrintHdImpl.tsx";
+import {AfferentFour, ConnectionPointTwo, Cycle, Effects, EfferentFour, Eyes, HardDiskOne, PageTemplate, Return, Send, Theme} from "@icon-park/react";
+import logo from "../../images/logo.png";
+import designerHeaderStore from "./DesignerHeaderStore.ts";
+import ReleaseHdConfigImpl from "./items/release/ReleaseHdConfigImpl.tsx";
+import managerStore from "../manager/ManagerStore.ts";
+import {DesignerScene} from "light-chaser-types/types/DesignerTypes.ts";
+import GlobalFilterConfigImpl from "./items/global-filter/GlobalFilterConfigImpl.tsx";
+
+
+export interface IHeaderItem {
+    icon: ReactNode;
+    name: string;
+    key: string;
+    onClick?: () => void;
+    component?: ComponentType;
+    hide?: boolean;
+}
+
+
+const Header = observer(() => {
+
+        const [logoSrc, setLogoSrc] = useState('/static/logo/main-logo.png');
+
+        const leftItems: Array<IHeaderItem> = [
+            {
+                icon: <Return theme="filled" style={{marginTop: 2}} strokeWidth={4} strokeLinecap="square"/>,
+                name: '返回',
+                key: 'return-main',
+                onClick: returnPrevProject,
+                component: ProjectHdItemImpl,
+                hide: managerStore.currentManager?.scene !== DesignerScene.LOOP_CONTAINER
+            }
+        ]
+
+        const centerItems: Array<IHeaderItem> = [
+            {
+                icon: <Cycle theme="filled" style={{marginTop: 2}} strokeWidth={4} strokeLinecap="square"/>,
+                name: '循环容器',
+                key: 'loop-container',
+                onClick: createLoopContainer
+            },
+            {
+                icon: <ConnectionPointTwo theme="filled" style={{marginTop: 2}} strokeWidth={4} strokeLinecap="square"/>,
+                name: '蓝图',
+                key: 'blue-print',
+                onClick: () => {
+                    //打开蓝图前清空画布中已经选中的组件,避免删除蓝图节点时，误删画布中的组件
+                    const {setTargetIds} = eventOperateStore;
+                    setTargetIds([]);
+                    designerHeaderStore.setCurrentKey('blue-print')
+                },
+                component: BluePrintHdImpl
+            },
+            {
+                icon: <PageTemplate theme="filled" style={{marginTop: 2}} strokeWidth={3} strokeLinecap="square"/>,
+                name: '画布',
+                key: 'canvas',
+                onClick: () => designerHeaderStore.setCurrentKey('canvas'),
+                component: CanvasHdConfigImpl
+            },
+            {
+                icon: <Effects theme="filled" style={{marginTop: 2}} strokeWidth={4} strokeLinecap="square"/>,
+                name: '滤镜',
+                key: 'global-filter',
+                onClick: () => designerHeaderStore.setCurrentKey('global-filter'),
+            },
+            {
+                icon: <Theme theme="filled" style={{marginTop: 2}} strokeWidth={4} strokeLinecap="square"/>,
+                name: '主题',
+                key: 'theme',
+                onClick: () => designerHeaderStore.setCurrentKey('theme'),
+                component: ThemeHdItemImpl
+            }
+        ];
+
+        const rightItems: Array<IHeaderItem> = [
+            {
+                icon: <AfferentFour theme="filled" style={{marginTop: 2}} strokeLinecap="square"/>,
+                name: '导入',
+                key: 'import',
+                onClick: () => importProject()
+            },
+            {
+                icon: <EfferentFour theme="filled" style={{marginTop: 2}} strokeLinecap="square"/>,
+                name: '导出',
+                key: 'export',
+                onClick: () => exportProject()
+            },
+            {
+                icon: <Send theme="filled" style={{marginTop: 2}} strokeLinecap="square"/>,
+                name: '发布',
+                key: 'release',
+                onClick: () => designerHeaderStore.setCurrentKey('release'),
+                component: ReleaseHdConfigImpl
+            },
+            {
+                icon: <HardDiskOne theme="filled" style={{marginTop: 2}} strokeLinecap="square"/>,
+                name: '保存',
+                key: 'save',
+                onClick: () => throttleSave()
+            },
+            {
+                icon: <Eyes theme="outline" style={{marginTop: 2}} strokeWidth={4} strokeLinecap="square"/>,
+                name: '预览',
+                key: 'preview',
+                onClick: () => window.open(`/preview?id=${managerStore.currentFinalManager?.id}`, '_blank')
+            }
+        ];
+
+        const buildHeaderItemUI = (items: Array<IHeaderItem>): Array<ReactElement> => {
+            const headerItems: Array<ReactElement> = [];
+            for (let i = 0; i < items.length; i++) {
+                const {icon: Icon, name, key, onClick, hide} = items[i];
+                headerItems.push(
+                    <div key={key} className={`menu-item ${hide ? 'menu-item-hide' : ''}`} onClick={onClick}>
+                        {Icon}
+                        <span className={'item-span'}>{name}</span>
+                    </div>
+                );
+            }
+            return headerItems;
+        }
+
+        return (
+            <div className={'designer-header'}>
+                <div className={'header-logo'}><img src={logoSrc} onError={() => setLogoSrc(logo)} alt={'logo'}/></div>
+                <div className="header-operate-menus">
+                    <div className={'menu-left'}>
+                        {buildHeaderItemUI(leftItems)}
+                    </div>
+                    <div className={'menu-center'}>
+                        {buildHeaderItemUI(centerItems)}
+                    </div>
+                    <div className={'menu-right'}>
+                        {buildHeaderItemUI(rightItems)}
+                    </div>
+                </div>
+                {
+                    [...rightItems, ...centerItems].map((item, index) => {
+                        const Component = item.component;
+                        if (Component && designerHeaderStore.currentKey === item.key) {
+                            return <Component key={index}/>;
+                        }
+                    })
+                }
+                <GlobalFilterConfigImpl/>
+            </div>
+        );
+    }
+);
+
+export default Header;

package/light-chaser-app/src/designer/header/DesignerHeaderStore.ts

@@ -0,0 +1,30 @@
+/*
+ * 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 {action, makeObservable, observable} from "mobx";
+
+class DesignerHeaderStore {
+
+    constructor() {
+        makeObservable(this, {
+            currentKey: observable,
+            setCurrentKey: action,
+        })
+    }
+
+
+    currentKey = '';
+
+    setCurrentKey = (key: string) => this.currentKey = key
+}
+
+const designerHeaderStore = new DesignerHeaderStore();
+export default designerHeaderStore;

package/light-chaser-app/src/designer/header/items/blue-print/BluePrintHdImpl.tsx

@@ -0,0 +1,32 @@
+/*
+ * 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 ReactDOM from "react-dom";
+import {lazy, ReactElement, Suspense} from "react";
+import Loading from "light-chaser-ui/lib/loading/Loading.tsx";
+
+const BluePrint = lazy(() => import("../../../blueprint/BluePrint.tsx"));
+
+export default function BluePrintHdImpl() {
+    return ReactDOM.createPortal(
+        <div style={{
+            position: 'relative',
+            top: -window.innerHeight,
+            zIndex: 2,
+            width: '100%',
+            height: '100%',
+            backgroundColor: '#151515'
+        }}>
+            <Suspense fallback={<Loading/>}>
+                <BluePrint/>
+            </Suspense>
+        </div>, document.body)! as ReactElement;
+}