light-chaser-pro 1.0.0

package/light-chaser-app/src/designer/footer/FooterStore.ts

@@ -0,0 +1,56 @@
+/*
+ * 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 FooterStore {
+
+    constructor() {
+        makeObservable(this, {
+            hotKeyVisible: observable,
+            snapShotVisible: observable,
+            configCodeVisible: observable,
+            saving: observable,
+            snapshotRecoveryVisible: observable,
+            setHotKeyVisible: action,
+            setSnapShotVisible: action,
+            setConfigCodeVisible: action,
+            setSaving: action,
+            setSnapshotRecoveryVisible: action,
+        })
+    }
+
+    snapshotRecoveryVisible: boolean = false;
+
+    hotKeyVisible: boolean = false;
+
+    snapShotVisible: boolean = false;
+
+    configCodeVisible: boolean = false;
+
+    saving: boolean = false;
+
+    latestSaveTime: string = '';
+
+    setSnapshotRecoveryVisible = (visible: boolean) => this.snapshotRecoveryVisible = visible;
+
+    setSaving = (saving: boolean) => this.saving = saving;
+
+    setHotKeyVisible = (visible: boolean) => this.hotKeyVisible = visible;
+
+    setSnapShotVisible = (visible: boolean) => this.snapShotVisible = visible;
+
+    setConfigCodeVisible = (visible: boolean) => this.configCodeVisible = visible;
+
+}
+
+const footerStore = new FooterStore();
+export default footerStore;

package/light-chaser-app/src/designer/footer/auto-save/AutoSaveManager.ts

@@ -0,0 +1,130 @@
+/*
+ * 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 localforage from 'localforage';
+import Base64Util from "light-chaser-util/lib/Base64Util.ts";
+
+let autoSaveTimer: number | null = null;
+
+// 初始配置
+localforage.config({
+    name: 'AutoSaveDB',
+    storeName: 'autosave_store'
+});
+
+// 保存结构类型
+export interface IAutoSaveData {
+    encoded: string;
+    meta: Record<string, any>;
+    saveTime: number;
+}
+
+const MAX_LIST_SIZE = 10;
+
+/**
+ * 获取当前 key 下的保存列表
+ */
+async function getSaveList(key: string): Promise<IAutoSaveData[]> {
+    const list = await localforage.getItem<IAutoSaveData[]>(key);
+    return Array.isArray(list) ? list : [];
+}
+
+/**
+ * 追加保存项（自动裁剪只保留最多 10 条）
+ */
+async function appendToSaveList(key: string, item: IAutoSaveData) {
+    const list = await getSaveList(key);
+    list.push(item);
+
+    // 超过最大长度，移除旧数据
+    while (list.length > MAX_LIST_SIZE) {
+        list.shift();
+    }
+
+    await localforage.setItem(key, list);
+}
+
+/**
+ * 开启自动保存（列表模式）
+ */
+export function startAutoSave(
+    key: string,
+    interval: number,
+    dataProvider: () => string,
+    metaProvider?: () => Record<string, any>
+) {
+    stopAutoSave();
+    autoSaveTimer = window.setInterval(async () => {
+        const raw = dataProvider();
+        const encoded = Base64Util.toBase64(raw);
+        const metadata = metaProvider ? metaProvider() : {};
+
+        const saveItem: IAutoSaveData = {
+            encoded,
+            meta: metadata,
+            saveTime: Date.now()
+        };
+
+        await appendToSaveList(key, saveItem);
+    }, interval);
+}
+
+/**
+ * 停止自动保存
+ */
+export function stopAutoSave() {
+    if (autoSaveTimer !== null) {
+        clearInterval(autoSaveTimer);
+        autoSaveTimer = null;
+    }
+}
+
+/**
+ * 恢复列表（返回全部历史记录）
+ */
+export async function restoreAutoSave(
+    key: string
+): Promise<Array<{
+    content: string;
+    meta: Record<string, any>;
+    saveTime: number;
+}>> {
+    const list = await getSaveList(key);
+    if (!list.length) {
+        return [];
+    }
+
+    return list.map(item => ({
+        content: Base64Util.fromBase64(item.encoded),
+        meta: item.meta,
+        saveTime: item.saveTime
+    }));
+}
+
+/**
+ * 单次保存（手动触发）
+ */
+export async function singleSave(
+    key: string,
+    dataProvider: () => string,
+    metaProvider?: () => Record<string, any>
+) {
+    const raw = dataProvider();
+    const encoded = Base64Util.toBase64(raw);
+    const metadata = metaProvider ? metaProvider() : {};
+
+    const saveItem: IAutoSaveData = {
+        encoded,
+        meta: metadata,
+        saveTime: Date.now()
+    };
+
+    await appendToSaveList(key, saveItem);
+}

package/light-chaser-app/src/designer/footer/auto-save/EnhanceFetch.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 {singleSave} from "./AutoSaveManager.ts";
+import {getSaveData} from "../../operate-provider/hot-key/HotKeyImpl.ts";
+
+export default function enhanceFetch() {
+    const originalFetch = window.fetch;
+    //只在编辑模式下增强
+    if (window.location.pathname === "/designer") {
+        /**
+         * 增强版 fetch：
+         * - 如果请求抛错（网络错误、断网、被阻止等），自动执行备份逻辑
+         */
+        window.fetch = async function enhancedFetch(input: RequestInfo | URL, init?: RequestInit) {
+            try {
+                return await originalFetch(input, init);
+            } catch (err) {
+                console.error("Fetch Error:", err);
+                singleSave(`LCP_${window.LC_ENV.projectId}`,
+                    () => JSON.stringify(getSaveData()),
+                    () => ({id: window.LC_ENV.projectId, name: '紧急错误备份'})).then(() => {
+                    //存储错误备份标识
+                    localStorage.setItem(`PROJECT_ERROR_${window.LC_ENV.projectId}`, "1");
+                })
+                // 再把错误继续抛出去
+                throw err;
+            }
+        };
+    }
+}
+
+

package/light-chaser-app/src/designer/footer/auto-save/RestoreLocalStorage.less

@@ -0,0 +1,80 @@
+/*
+ * 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.
+ */
+
+.restore-modal-content {
+  color: #FFFFFF;
+  font-family: 'Inter', 'Helvetica Neue', 'Roboto', sans-serif;
+}
+
+.restore-description {
+  font-size: 14px;
+  line-height: 20px;
+  color: #A0A0B2;
+  margin-bottom: 20px;
+}
+
+.restore-list-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+// 单条记录
+.restore-list-item {
+  background-color: #2C2C3E;
+  border: 1px solid #3A3A4E;
+  border-radius: 8px;
+  padding: 14px 18px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    border-color: #4FB8FF;
+    background-color: rgba(79, 184, 255, 0.08);
+  }
+}
+
+.restore-list-item-selected {
+  border-color: #4FB8FF;
+  background-color: rgba(79, 184, 255, 0.12);
+}
+
+// 信息行（项目名 + 时间）
+.restore-item-line {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.restore-item-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #FFFFFF;
+}
+
+.restore-item-time {
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.restore-item-time-normal {
+  color: #3CED92;
+}
+
+.restore-item-time-warning {
+  color: #FF6E6E;
+}
+
+// 底部按钮
+.restore-cancel-btn,
+.restore-confirm-btn {
+  transition: all 0.2s ease-in-out;
+}

package/light-chaser-app/src/designer/footer/auto-save/RestoreLocalStorage.tsx

@@ -0,0 +1,158 @@
+/*
+ * 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 {Button, Modal} from 'antd';
+import {useEffect, useState} from 'react';
+import './RestoreLocalStorage.less';
+import {restoreAutoSave} from "./AutoSaveManager.ts";
+import DesignerManager from '../../manager/DesignerManager.ts';
+import {DesignerMode, DesignerScene} from 'light-chaser-types/types/DesignerTypes.ts';
+import eventOperateStore from "../../operate-provider/EventOperateStore.ts";
+import managerStore from "../../manager/ManagerStore.ts";
+import rightStore from "../../right/RightStore.ts";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+import {observer} from "mobx-react";
+import footerStore from "../FooterStore.ts";
+
+
+interface ILocalStorageData {
+    content: string,
+    meta: Record<string, any>,
+    saveTime: number
+}
+
+const RestoreLocalStorage = observer(() => {
+    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+    const [data, setData] = useState<ILocalStorageData[]>([]);
+    const {snapshotRecoveryVisible, setSnapshotRecoveryVisible} = footerStore;
+    const hasErr = localStorage.getItem(`PROJECT_ERROR_${window.LC_ENV.projectId}`) === '1';
+
+    useEffect(() => {
+        setSelectedIndex(null);
+        if (snapshotRecoveryVisible) {
+            restoreAutoSave(`LCP_${window.LC_ENV.projectId}`).then((list: ILocalStorageData[]) => {
+                setData(list.sort((a, b) => b.saveTime - a.saveTime));
+            })
+        }
+    }, [snapshotRecoveryVisible]);
+
+    // 恢复选中的那条
+    const handleRestore = () => {
+        if (selectedIndex !== null) {
+            const datum = data[selectedIndex];
+            if (!datum)
+                return;
+            const {id, name} = datum.meta;
+            if (!datum?.content) {
+                globalMessage.messageApi?.error('备份数据错误，无法恢复')
+                return;
+            }
+            const contentObj = JSON.parse(datum.content);
+            if (!contentObj)
+                return;
+            globalMessage.messageApi?.info({
+                content: '正在恢复项目，请稍候...',
+                key: 'restoring',
+            })
+            window.LC_ENV.editorLoader.setLoaded(false)
+            const managerData = JSON.parse(contentObj.dataJson);
+            const designerManager = new DesignerManager(DesignerScene.DEFAULT);
+            const {setTargetIds} = eventOperateStore;
+            setTargetIds([]);
+
+            managerData.id = id;
+            managerData.name = name;
+            designerManager.init(managerData, DesignerMode.EDIT);
+            window.LC_ENV.currentManager = designerManager;
+            managerStore.setCurrentManager(designerManager, true, DesignerScene.DEFAULT);
+            const timer = setTimeout(() => {
+                window.LC_ENV?.dragScaleProvider?.reset();
+                window.LC_ENV?.historyOperator?.reset();
+                rightStore.activeConfig(null, '');
+                clearTimeout(timer);
+                globalMessage.messageApi?.destroy("restoring");
+                globalMessage.messageApi?.success('项目已恢复')
+                window.LC_ENV.editorLoader.setLoaded(true)
+            }, 1500)
+        }
+        localStorage.removeItem(`PROJECT_ERROR_${window.LC_ENV.projectId}`);
+        setSnapshotRecoveryVisible(false);
+    };
+
+    return (
+        <Modal title={hasErr ? '错误快照恢复' : "本地快照恢复"}
+               open={snapshotRecoveryVisible}
+               destroyOnHidden={true}
+               onCancel={() => {
+                   setSnapshotRecoveryVisible(false);
+                   localStorage.removeItem(`PROJECT_ERROR_${window.LC_ENV.projectId}`);
+               }}
+               styles={{
+                   body: {borderRadius: '8px', height: '500px', overflow: 'auto', paddingRight: '10px'},
+               }}
+               footer={[
+                   <Button key="cancel" onClick={() => {
+                       setSnapshotRecoveryVisible(false);
+                       localStorage.removeItem(`PROJECT_ERROR_${window.LC_ENV.projectId}`);
+                   }} className="restore-cancel-btn">
+                       取消
+                   </Button>,
+                   <Button key="restore"
+                           type="primary"
+                           className="restore-confirm-btn"
+                           disabled={selectedIndex === null}
+                           onClick={handleRestore}>
+                       恢复
+                   </Button>
+               ]}
+               centered
+               className="restore-local-storage-modal">
+            <div className="restore-modal-content">
+                <p className="restore-description">
+                    {hasErr ? '检测到您的项目可能出现错误，可选中指定错误快照备份，然后点击下方“恢复”按钮进行恢复。' : '请选择一个历史备份版本，然后点击下方“恢复”按钮。'}
+                </p>
+
+                <div className="restore-list-container">
+                    {data.map((item, index) => {
+                        const diffInMinutes = Math.floor((Date.now() - item.saveTime) / (1000 * 60));
+                        const isWarning = diffInMinutes > 60;
+                        const isSelected = selectedIndex === index;
+
+                        return (
+                            <div
+                                key={item.saveTime + '-' + index}
+                                className={
+                                    `restore-list-item ` + (isSelected ? 'restore-list-item-selected' : '')
+                                }
+                                onClick={() => setSelectedIndex(index)}
+                            >
+                                <div className="restore-item-line">
+                                    <span className="restore-item-name">{item.meta.name}</span>
+
+                                    <span
+                                        className={
+                                            `restore-item-time ` +
+                                            (isWarning ? 'restore-item-time-warning' : 'restore-item-time-normal')
+                                        }
+                                    >
+                                        {diffInMinutes} 分钟前
+                                    </span>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </Modal>
+    );
+})
+
+export default RestoreLocalStorage;

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

@@ -0,0 +1,131 @@
+/*
+ * 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.
+ */
+
+.cover-config-modal {
+  .ant-modal-content {
+    //background-color: #1E1E2F;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  }
+
+  .ant-modal-header {
+    border-bottom: 1px solid #3A3A4E;
+    border-radius: 8px 8px 0 0;
+    padding: 16px 24px;
+    margin: 0;
+
+    .ant-modal-title {
+      color: #FFFFFF;
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 28px;
+      font-family: 'Inter', 'Helvetica Neue', sans-serif;
+    }
+  }
+
+  .ant-modal-close {
+    color: #A0A0B2;
+    transition: color 0.2s;
+
+    &:hover {
+      color: #4FB8FF;
+    }
+  }
+}
+
+.cover-config-content {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  background-color: #1E1E2F;
+
+  .cover-upload-section {
+    .cover-upload {
+      .ant-upload-select {
+        width: 100% !important;
+        height: 200px !important;
+        background-color: #2C2C3E;
+        border: 1px dashed #3A3A4E;
+        border-radius: 8px;
+        margin: 0;
+
+        &:hover {
+          border-color: #4FB8FF;
+          background-color: rgba(79, 184, 255, 0.05);
+        }
+      }
+
+      .cover-upload-btn {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: #A0A0B2;
+        transition: color 0.2s;
+
+        .upload-icon {
+          margin-bottom: 12px;
+          color: #4FB8FF;
+        }
+
+        .upload-text {
+          font-size: 14px;
+          line-height: 20px;
+          font-family: 'Inter', 'Helvetica Neue', sans-serif;
+        }
+      }
+
+      .ant-upload-list-item-container {
+        width: 100% !important;
+        height: 200px !important;
+        border-radius: 8px;
+        overflow: hidden;
+
+        .ant-upload-list-item {
+          border-radius: 8px;
+          border: 1px solid #3A3A4E;
+        }
+      }
+    }
+  }
+
+  .cover-action-section {
+    display: flex;
+    justify-content: flex-end;
+
+    .cover-save-btn {
+      width: 100%;
+      background-color: #4FB8FF;
+      border-color: #4FB8FF;
+      color: #FFFFFF;
+      border-radius: 4px;
+      height: 36px;
+      padding: 0 24px;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: 'Inter', 'Helvetica Neue', sans-serif;
+      transition: all 0.2s;
+
+      &:hover {
+        background-color: #7ACFFF;
+        border-color: #7ACFFF;
+        transform: translateY(-1px);
+      }
+
+      &:active {
+        background-color: #3CA0E0;
+        border-color: #3CA0E0;
+      }
+    }
+  }
+}