gongxiangp2/yedir/mindmap.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>思维导图 - 由壹点AIGC</title>
    <link rel="icon" href="mind-map-main/dist/logo.ico">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            overflow: hidden;
            background-color: #f9f9f9;
        }
        
        #app-container {
            position: fixed;
            top: 64px; /* 顶部导航栏的高度 */
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
        }
        
        #mindmap-container {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        #mindmap-container * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script>
        // 自定义静态资源的路径
        window.externalPublicPath = './mind-map-main/dist/'
        // 接管应用
        window.takeOverApp = false
    </script>
</head>
<body>
    <!-- 导入顶部导航栏 -->
    <div id="navbar-container"></div>
    
    <!-- 思维导图容器 -->
    <div id="app-container">
        <div id="mindmap-container"></div>
    </div>
    
    <!-- 加载导航栏 -->
    <script>
        fetch('public/navbar-fragment.html')
            .then(response => response.text())
            .then(html => {
                document.getElementById('navbar-container').innerHTML = html;
                
                // 高亮思维导图图标
                setTimeout(() => {
                    const mindMapBtn = document.querySelector('.nav-right .icon-btn[title="思维导图"]');
                    if (mindMapBtn) {
                        mindMapBtn.style.backgroundColor = '#5b00d7';
                        mindMapBtn.style.color = '#fff';
                    }
                }, 100);
            })
            .catch(error => {
                console.error('加载导航栏失败:', error);
            });
    </script>
    
    <!-- 思维导图初始化脚本 -->
    <script>
        const getDataFromBackend = () => {
            return new Promise((resolve, reject) => {
                // 尝试从本地存储获取数据
                const savedData = localStorage.getItem('mindMapData');
                if (savedData) {
                    try {
                        resolve(JSON.parse(savedData));
                        return;
                    } catch (e) {
                        console.error('解析存储的思维导图数据失败:', e);
                    }
                }
                
                // 默认数据
                setTimeout(() => {
                    resolve({
                        mindMapData: {
                            root: {
                                data: {
                                    text: '根节点'
                                },
                                children: []
                            },
                            theme: {
                                template: 'avocado',
                                config: {}
                            },
                            layout: 'logicalStructure',
                            config: {},
                            view: null
                        },
                        mindMapConfig: {},
                        lang: 'zh',
                        localConfig: null
                    });
                }, 200);
            });
        };
        
        const setTakeOverAppMethods = data => {
            window.takeOverAppMethods = {};
            // 获取思维导图数据的函数
            window.takeOverAppMethods.getMindMapData = () => {
                return data.mindMapData;
            };
            // 保存思维导图数据的函数
            window.takeOverAppMethods.saveMindMapData = data => {
                try {
                    localStorage.setItem('mindMapData', JSON.stringify({
                        mindMapData: data,
                        mindMapConfig: window.takeOverAppMethods.getMindMapConfig(),
                        lang: window.takeOverAppMethods.getLanguage(),
                        localConfig: window.takeOverAppMethods.getLocalConfig()
                    }));
                } catch (e) {
                    console.error('保存思维导图数据失败:', e);
                }
            };
            // 获取思维导图配置，也就是实例化时会传入的选项
            window.takeOverAppMethods.getMindMapConfig = () => {
                return data.mindMapConfig;
            };
            // 保存思维导图配置
            window.takeOverAppMethods.saveMindMapConfig = config => {
                data.mindMapConfig = config;
                try {
                    localStorage.setItem('mindMapData', JSON.stringify(data));
                } catch (e) {
                    console.error('保存思维导图配置失败:', e);
                }
            };
            // 获取语言的函数
            window.takeOverAppMethods.getLanguage = () => {
                return data.lang;
            };
            // 保存语言的函数
            window.takeOverAppMethods.saveLanguage = lang => {
                data.lang = lang;
                try {
                    localStorage.setItem('mindMapData', JSON.stringify(data));
                } catch (e) {
                    console.error('保存语言设置失败:', e);
                }
            };
            // 获取本地配置的函数
            window.takeOverAppMethods.getLocalConfig = () => {
                return data.localConfig;
            };
            // 保存本地配置的函数
            window.takeOverAppMethods.saveLocalConfig = config => {
                data.localConfig = config;
                try {
                    localStorage.setItem('mindMapData', JSON.stringify(data));
                } catch (e) {
                    console.error('保存本地配置失败:', e);
                }
            };
        };
        
        window.onload = async () => {
            window.takeOverApp = true;
            // 请求数据
            const data = await getDataFromBackend();
            // 设置全局的方法
            setTakeOverAppMethods(data);
            // 思维导图实例创建完成事件
            window.addEventListener('app_inited', mindMap => {
                console.log('思维导图实例已创建');
            });
            
            // 实例化页面
            if (window.initApp) {
                window.initApp();
            } else {
                console.error('找不到initApp方法，请确保已正确加载思维导图脚本');
            }
        };
    </script>
    
    <!-- 加载思维导图脚本和样式 -->
    <link href="mind-map-main/dist/css/chunk-vendors.css" rel="stylesheet">
    <link href="mind-map-main/dist/css/app.css" rel="stylesheet">
    <script src="mind-map-main/dist/js/chunk-vendors.js"></script>
    <script src="mind-map-main/dist/js/app.js"></script>
</body>
</html>