<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>思维导图 - Markmap</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="icon" type="image/svg+xml" href="../../public/pure.svg">

  <!-- Markmap 依赖 -->
  <script src="https://gcore.jsdelivr.net/npm/d3@7"></script>
  <script src="https://gcore.jsdelivr.net/npm/markmap-lib"></script>
  <script src="https://gcore.jsdelivr.net/npm/markmap-view"></script>
  <!-- Monaco Editor CDN -->
  <script src="https://gcore.jsdelivr.net/npm/monaco-editor@0.44.0/min/vs/loader.js"></script>
  <!-- 导出PNG需要的库 -->
  <script src="https://registry.npmmirror.com/html2canvas/1.4.1/files/dist/html2canvas.min.js"></script>
  <style>
    /* 谷歌字体 Nunito */
    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap');

    body {
      margin:0;
      background: linear-gradient(135deg, #f3f6fa 0%, #e4edf9 100%);
      font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      overflow: hidden;
      user-select: none;
    }

    /* 顶部栏样式 */
    .topbar {
      position: fixed; top: 0; left: 0; width: 100vw; height: 54px;
      background: #fff; border-bottom: 1px solid #e2e8f0; z-index: 100; /* Increased z-index */
      display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
      box-sizing: border-box;
      box-shadow: 0 4px 24px 0 rgba(59,130,246,0.08), 0 1.5px 6px 0 rgba(59,130,246,0.04);
      border-radius: 0 0 18px 18px;
    }
    .topbar-title {
      display: flex;
      align-items: center;
      font-weight: 600;
      font-size: 1.1em;
      color: #2563eb;
    }
    .topbar-title svg {
      width: 24px;
      height: 24px;
      margin-right: 8px;
      fill: #2563eb;
    }

    /* 主容器与面板样式 */
    .container {
      position: fixed;
      top: 54px;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      transition: all 0.3s ease;
      border-radius: 18px;
      box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.10), 0 1.5px 6px 0 rgba(59,130,246,0.06);
      background: #f8fafc;
    }

    .editor-container {
      width: 25%; /* 默认左:右 = 1:3，编辑器占 25% */
      min-width: 200px; /* 最小宽度 */
      height: 100%;
      background: #fff;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-right: 1px solid #e0e7ef;
      box-shadow: 1px 0 5px rgba(0,0,0,0.03);
      border-radius: 18px;
      box-shadow: 0 2px 8px 0 rgba(59,130,246,0.06);
      margin: 12px;
      background: linear-gradient(135deg, #fff 60%, #f3f6fa 100%);
    }

    .editor-header {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f9fafb; /* Slightly lighter header */
      padding: 0 16px;
      font-size: 0.9em;
      font-weight: 600;
      color: #334155;
      border-bottom: 1px dashed #e2e8f0; /* 虚线边框 */
      flex-shrink: 0;
      border-radius: 18px 18px 0 0;
      background: linear-gradient(90deg, #f9fafb 80%, #e0e7ef 100%);
      box-shadow: 0 2px 8px 0 rgba(59,130,246,0.04);
    }

    #monaco-container {
      flex: 1;
      overflow: hidden;
    }

    .splitter {
      width: 6px;
      background: repeating-linear-gradient(90deg, #e0e7ef, #e0e7ef 4px, #f3f6fa 4px, #f3f6fa 8px);
      cursor: ew-resize;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 50; /* Ensure splitter is above editor/map content during drag */
      border-radius: 8px;
    }
    .splitter:hover {
      background: #cbd5e1;
    }
    .splitter::before { /* 更改为竖向虚线 */
      content: "";
      height: 20px;
      border-left: 2px dashed #b0bfd0;
    }

    .markmap-container {
      flex: 1;
      min-width: 200px; /* 最小宽度 */
      position: relative;
      overflow: hidden;
      background: #fdfdff; /* Slightly different background for contrast */
      border-radius: 18px;
      box-shadow: 0 2px 8px 0 rgba(59,130,246,0.06);
      margin: 12px;
      background: linear-gradient(135deg, #fff 60%, #f3f6fa 100%);
      border: 1.5px dashed #e0e7ef;
    }

    .markmap-header {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: flex-end; /* 将按钮放在右侧 */
      background: #f9fafb;
      padding: 0 16px;
      border-bottom: 1px dashed #e2e8f0; /* 虚线边框 */
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      border-radius: 18px 18px 0 0;
      background: linear-gradient(90deg, #f9fafb 80%, #e0e7ef 100%);
      box-shadow: 0 2px 8px 0 rgba(59,130,246,0.04);
    }

    #markmap {
      width: 100%;
      height: 100%;
    }

    /* 按钮通用样式 */
    .button {
      background: linear-gradient(90deg, #3b82f6 60%, #60a5fa 100%);
      color: #fff;
      border: none;
      padding: 6px 12px;
      border-radius: 8px; /* 更大的圆角 */
      font-size: 13px;
      cursor: pointer;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 8px 0 rgba(59,130,246,0.08);
    }
    .button svg {
      width: 14px; height: 14px;
    }

    .button:hover {
      background: linear-gradient(90deg, #2563eb 60%, #3b82f6 100%);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 3px 8px rgba(37,99,235,0.2);
    }

    .button.outline {
      background: #f8fafc;
      color: #2563eb;
      border: 1.5px dashed #2563eb; /* 虚线边框 */
    }

    .button.outline:hover {
      background: #e0e7ef;
      color: #1d4ed8;
      border-color: #1d4ed8;
    }

    .button.small {
      padding: 4px 8px;
      font-size: 12px;
    }

    .button.icon-only {
      padding: 6px;
    }

    .action-buttons {
      display: flex;
      gap: 8px;
    }

    /* 面板控制按钮样式 */
    .panel-control {
      background: transparent;
      color: #64748b;
      border: 1.5px dashed #cbd5e1;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      border-radius: 10px !important;
      font-weight: 600;
      letter-spacing: 0.02em;
      box-shadow: 0 2px 8px 0 rgba(59,130,246,0.08);
      border-width: 1.5px;
    }

    .panel-control:hover {
      color: #3b82f6;
      border-color: #3b82f6;
      background: rgba(59, 130, 246, 0.05);
    }

    .panel-control svg {
      width: 14px;
      height: 14px;
      margin-right: 4px;
    }

    /* 布局控制（隐藏面板） */
    .hide-editor .editor-container, .hide-editor .splitter {
      width: 0 !important; /* Important to override inline style from resize */
      min-width: 0 !important;
      overflow: hidden;
      border-right: none;
    }
     .hide-editor .splitter { display: none; }


    /* 隐藏思维导图时，彻底收起右侧区域并让编辑器占满 */
    .hide-mindmap .markmap-container {
      display: none !important;
      width: 0 !important;
      min-width: 0 !important;
      flex: 0 0 0 !important; /* 彻底不占据弹性空间 */
      overflow: hidden !important;
    }
    .hide-mindmap .splitter { display: none !important; }
    .hide-mindmap .editor-container {
      width: 100% !important;
      flex: 1 1 auto !important;
    }


    /* 响应式布局 */
    @media (max-width: 768px) {
      .container {
        flex-direction: column;
      }
      .editor-container, .markmap-container {
        width: 100% !important; /* Override inline style from resize */
        height: 50%;
      }
      .splitter {
        width: 100%;
        height: 6px;
        cursor: ns-resize;
      }
      .splitter::before {
        height: auto;
        width: 20px;
        border-left: none;
        border-top: 2px dashed #b0bfd0;
      }

      .hide-editor .editor-container, .hide-mindmap .markmap-container {
        height: 0 !important; /* Important to override inline style from resize */
      }
      .hide-editor .splitter, .hide-mindmap .splitter { display: none !important; }
      .topbar { padding: 0 10px; }
      .topbar-title span { display: none; } /* Hide text on small screens */
      .container, .editor-container, .markmap-container {
        border-radius: 0;
        margin: 0;
        box-shadow: none;
      }
      .topbar {
        border-radius: 0;
      }
    }

    /* 打印样式 */
    @media print {
      body { overflow: visible !important; }
      .topbar, .editor-container, .splitter, .action-buttons, .editor-header, .markmap-header {
        display: none !important;
      }
      .container {
        position: static !important;
        top: 0;
        display: block !important;
      }
      .markmap-container {
        width: 100% !important;
        height: auto !important;
        flex: none !important;
        overflow: visible !important;
        border: none !important;
        padding-top: 0 !important; /* 防止顶部空白 */
      }
      #markmap {
        width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
      }
       svg { /* Ensure SVG scales well for printing */
        max-width: 100%;
        height: auto;
      }
    }
  </style>
</head>
<body>
  <div class="topbar">
    <div class="topbar-title" style="gap:12px;">
      <!-- Font Awesome diagram-project 现成思维导图风格 logo -->
      <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="3" y="3" width="6" height="6" rx="1"/>
        <rect x="15" y="3" width="6" height="6" rx="1"/>
        <rect x="9" y="15" width="6" height="6" rx="1"/>
        <path d="M6 9v2a2 2 0 0 0 2 2h2m4 0h2a2 2 0 0 0 2-2V9"/>
        <path d="M12 15V13"/>
      </svg>
      <span style="font-size:1.2em;font-weight:700;letter-spacing:0.02em;">思维导图</span>
      <button id="auto-save-btn" class="button small outline" style="margin-left:16px;min-width:90px;">自动保存: 开</button>
      <button id="toggle-layout-btn" class="button small outline" style="margin-left:8px;" title="切换编辑器左右布局">⇄ 切换布局</button>
    </div>
    <div class="action-buttons">
      <button id="export-svg-btn" class="button outline" title="导出为 SVG">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 8L21 12L17 16"/><line x1="3" y1="12" x2="21" y2="12"/><path d="M12 19v-4M12 9V5"/><path d="M5 19v-4M5 9V5"/></svg>
        SVG
      </button>
      <button id="export-png-btn" class="button outline" title="导出为 PNG">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
        PNG
      </button>
      <button id="save-btn" class="button" title="保存到本地存储">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
        保存
      </button>
    </div>
  </div>

  <div class="container" id="main-container">
    <div class="editor-container" id="editor-area">
      <div class="editor-header">
        <div class="flex items-center"><!-- 左侧保留占位，避免布局抖动 --></div>
        <span>Markdown</span>
        <div class="flex items-center">
          <small id="save-status" style="color:#64748b; margin-right: 10px;">未修改</small>
          <button id="toggle-editor-btn" class="panel-control" title="隐藏编辑器">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"></path></svg>
            隐藏
          </button>
        </div>
      </div>
      <div id="monaco-container"></div>
    </div>

    <div class="splitter" id="splitter"></div>

    <div class="markmap-container" id="markmap-area">
      <div class="markmap-header">
        <button id="toggle-mindmap-btn" class="panel-control" title="隐藏思维导图">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"></path></svg>
          隐藏
        </button>
      </div>
      <svg id="markmap"></svg>
    </div>
  </div>

  <script>
    // 获取 Markdown 数据（兼容原有 docId 方案）
    function getQueryParam(name) {
      const url = window.location.search;
      const params = new URLSearchParams(url);
      return params.get(name);
    }

    const docId = getQueryParam('docId');
    let md = '';
    if (docId) {
      md = window.localStorage.getItem('mindmapData_' + docId) || '';
    }
    if (!md) {
      md = '# 思维导图示例\n\n## 分支 1\n- 条目 1.1\n- 条目 1.2\n\n## 分支 2\n- 条目 2.1\n  - 子条目 2.1.1\n- 条目 2.2';
    }

    // 全局变量
    let editor;
    let markmapInstance;
    let autoSaveEnabled = true; // 默认开启自动保存
    let autoSaveInterval;
    let isDirty = false;
    let renderTimeout;

    // 渲染 Markmap
    function renderMarkmap(mdContent) {
      if (markmapInstance) {
        markmapInstance.setData(transformer.transform(mdContent).root);
        markmapInstance.fit(); // Ensure it fits after update
      } else {
        document.getElementById('markmap').innerHTML = ''; // Clear previous before new instance
        const { root, features } = transformer.transform(mdContent);
        const assets = transformer.getUsedAssets(features);
        if (assets.styles) loadCSS(assets.styles);
        if (assets.scripts) loadJS(assets.scripts, { getMarkmap: () => window.markmap });
        markmapInstance = Markmap.create('#markmap', { autoFit: true }, root);
      }
    }

    // 保存数据到 localStorage
    function saveToLocalStorage() {
      if (!editor) return;
      const content = editor.getValue();
      if (docId) {
        window.localStorage.setItem('mindmapData_' + docId, content);
        showSaveStatus('已保存');
        isDirty = false;
      } else {
        showSaveStatus('无法保存 (无 docId)', true);
      }
    }

    // 显示保存状态
    function showSaveStatus(message, isError = false) {
      const saveStatus = document.getElementById('save-status');
      if (saveStatus) {
        saveStatus.textContent = message;
        saveStatus.style.color = isError ? '#ef4444' : '#64748b';
        setTimeout(() => {
          saveStatus.textContent = isDirty ? '未保存' : '已保存';
          saveStatus.style.color = isDirty ? '#ef4444' : '#64748b';
        }, 2500);
      }
    }

    // 设置自动保存
    function toggleAutoSave() {
      autoSaveEnabled = !autoSaveEnabled;
      const autoSaveBtn = document.getElementById('auto-save-btn');
      if (autoSaveEnabled) {
        autoSaveBtn.textContent = '自动保存: 开';
        autoSaveBtn.classList.remove('outline');
        saveToLocalStorage(); // Save once when turning on
        autoSaveInterval = setInterval(saveToLocalStorage, 10000); // 10秒自动保存
      } else {
        autoSaveBtn.textContent = '自动保存: 关';
        autoSaveBtn.classList.add('outline');
        if (autoSaveInterval) clearInterval(autoSaveInterval);
      }
    }

    // 导出SVG
    function exportSvg() {
      let svgEl = document.querySelector('#markmap svg');
      if (!svgEl) {
        const markmapNode = document.getElementById('markmap');
        if (markmapNode && markmapNode.tagName.toLowerCase() === 'svg') {
          svgEl = markmapNode;
        }
      }
      if (!svgEl) {
        showSaveStatus('未找到SVG元素', true);
        return;
      }

      // 确保有xmlns属性
      if (!svgEl.getAttribute('xmlns')) {
        svgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
      }
      let serializer = new XMLSerializer();
      let svgData = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(svgEl);

      let blob = new Blob([svgData], {type: 'image/svg+xml;charset=utf-8'});
      let url = URL.createObjectURL(blob);
      let link = document.createElement('a');
      link.setAttribute('href', url);
      link.setAttribute('download', (docId || 'markmap') + '.svg');
      link.click();
      URL.revokeObjectURL(url);
      showSaveStatus('SVG已导出');
    }

    // 导出PNG
    function exportPng() {
      let svgEl = document.querySelector('#markmap svg');
      if (!svgEl) {
        const markmapNode = document.getElementById('markmap');
        if (markmapNode && markmapNode.tagName.toLowerCase() === 'svg') {
          svgEl = markmapNode;
        }
      }
      if (!svgEl) {
        showSaveStatus('未找到SVG元素', true);
        return;
      }

      // 获取内容实际边界
      let bbox = svgEl.getBBox();
      let width = bbox.width;
      let height = bbox.height;
      let x = bbox.x;
      let y = bbox.y;

      // 4倍高清
      let scale = 4;
      let canvas = document.createElement('canvas');
      canvas.width = width * scale;
      canvas.height = height * scale;
      let context = canvas.getContext('2d');
      context.fillStyle = '#fff';
      context.fillRect(0, 0, canvas.width, canvas.height);

      // 复制SVG并设置viewBox和宽高
      let serializer = new XMLSerializer();
      let clonedSvg = svgEl.cloneNode(true);
      clonedSvg.setAttribute('viewBox', `${x} ${y} ${width} ${height}`);
      clonedSvg.setAttribute('width', width);
      clonedSvg.setAttribute('height', height);
      if (!clonedSvg.getAttribute('xmlns')) {
        clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
      }
      let source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(clonedSvg);

      let image = new Image();
      image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source);

      image.onload = function () {
        // 居中绘制
        context.setTransform(scale, 0, 0, scale, 0, 0);
        context.drawImage(image, 0, 0, width, height, 0, 0, width, height);
        let a = document.createElement('a');
        a.download = (docId || 'markmap') + '.png';
        a.href = canvas.toDataURL('image/png');
        a.click();
        showSaveStatus('PNG已导出');
      };
      image.onerror = function () {
        showSaveStatus('导出PNG失败: 无法加载SVG图像', true);
      };
    }

    // 初始化 Monaco Editor
    let transformer, loadCSS, loadJS, Markmap;

    function initMonacoEditor() {
      ({ loadCSS, loadJS, Markmap } = window.markmap);
      transformer = new window.markmap.Transformer();

      require.config({ paths: { 'vs': 'https://gcore.jsdelivr.net/npm/monaco-editor@0.44.0/min/vs' } });
      require(['vs/editor/editor.main'], function() {
        editor = monaco.editor.create(document.getElementById('monaco-container'), {
          value: md,
          language: 'markdown',
          theme: 'vs', // 'vs-dark' for dark theme
          automaticLayout: true,
          wordWrap: 'on',
          lineNumbers: 'on',
          minimap: { enabled: false }, // Minimalist: disable minimap
          scrollBeyondLastLine: false,
          renderWhitespace: 'none', // Minimalist: hide whitespace chars
          fontFamily: 'Menlo, Monaco, Consolas, "Courier New", monospace', // Common monospaced fonts
          fontSize: 14,
          padding: { top: 10, bottom: 10 }
        });

        editor.onDidChangeModelContent(function() {
          const content = editor.getValue();
          isDirty = true;
          showSaveStatus('未保存', true);

          clearTimeout(renderTimeout);
          renderTimeout = setTimeout(() => {
            renderMarkmap(content);
          }, 1000); // 1秒后刷新
        });

        // 初始渲染
        renderMarkmap(md);
        showSaveStatus(isDirty ? '未保存' : '已同步', isDirty); // Initial status based on localStorage
      });
    }

    // 初始化界面交互和可调节面板
    function initUI() {

      document.getElementById('toggle-editor-btn').addEventListener('click', function() {
        const container = document.getElementById('main-container');
        const isHidden = container.classList.toggle('hide-editor');
        this.innerHTML = isHidden ?
          '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"></path></svg> 显示' :
          '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"></path></svg> 隐藏';
        if(editor) editor.layout(); // Monaco needs relayout
        if(markmapInstance) markmapInstance.fit();
      });

      // 修复思维导图隐藏逻辑
      document.getElementById('toggle-mindmap-btn').addEventListener('click', function() {
        const container = document.getElementById('main-container');
        const isHidden = container.classList.toggle('hide-mindmap');
        if (isHidden) {
          this.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"></path></svg> 显示';
        } else {
          this.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"></path></svg> 隐藏';
        }
        if(editor) editor.layout();
        if(markmapInstance) markmapInstance.fit();
      });

      // 自动保存按钮逻辑（放到logo区）
      const autoSaveBtn = document.getElementById('auto-save-btn');
      autoSaveBtn.onclick = function() {
        toggleAutoSave();
        autoSaveBtn.textContent = autoSaveEnabled ? '自动保存: 开' : '自动保存: 关';
      };
      autoSaveBtn.textContent = autoSaveEnabled ? '自动保存: 开' : '自动保存: 关';

      // 编辑器左右切换
      const toggleLayoutBtn = document.getElementById('toggle-layout-btn');
      toggleLayoutBtn.onclick = function() {
        const container = document.getElementById('main-container');
        if (container.style.flexDirection === 'row-reverse') {
          container.style.flexDirection = '';
        } else {
          container.style.flexDirection = 'row-reverse';
        }
        if(editor) editor.layout();
        if(markmapInstance) markmapInstance.fit();
      };

      document.getElementById('save-btn').addEventListener('click', saveToLocalStorage);

      // 导出功能
      document.getElementById('export-svg-btn').addEventListener('click', exportSvg);
      document.getElementById('export-png-btn').addEventListener('click', exportPng);

      // 面板拖拽调整逻辑
      const splitter = document.getElementById('splitter');
      const editorArea = document.getElementById('editor-area');
      const markmapArea = document.getElementById('markmap-area');
      const container = document.getElementById('main-container');

      let isDragging = false;
      let startX, startY, startEditorWidth, startMarkmapWidth, startEditorHeight, startMarkmapHeight;

      splitter.addEventListener('mousedown', function(e) {
        e.preventDefault(); // Prevent text selection
        isDragging = true;
        startX = e.clientX;
        startY = e.clientY;
        startEditorWidth = editorArea.offsetWidth;
        startMarkmapWidth = markmapArea.offsetWidth;
        startEditorHeight = editorArea.offsetHeight;
        startMarkmapHeight = markmapArea.offsetHeight;

        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
      });

      function onMouseMove(e) {
        if (!isDragging) return;

        // Horizontal drag for desktop
        if (window.innerWidth > 768) { // Check if not in mobile layout
            const dx = e.clientX - startX;
            let newEditorWidth = startEditorWidth + dx;
            let newMarkmapWidth = startMarkmapWidth - dx;

            // Enforce min width
            const minWidth = 100; // px
            if (newEditorWidth < minWidth) {
                newEditorWidth = minWidth;
                newMarkmapWidth = container.offsetWidth - minWidth - splitter.offsetWidth;
            }
            if (newMarkmapWidth < minWidth) {
                newMarkmapWidth = minWidth;
                newEditorWidth = container.offsetWidth - minWidth - splitter.offsetWidth;
            }

            editorArea.style.width = newEditorWidth + 'px';
            markmapArea.style.width = newMarkmapWidth + 'px';
        } else { // Vertical drag for mobile
            const dy = e.clientY - startY;
            let newEditorHeight = startEditorHeight + dy;
            let newMarkmapHeight = startMarkmapHeight - dy;

            const minHeight = 100; // px
             if (newEditorHeight < minHeight) {
                newEditorHeight = minHeight;
                newMarkmapHeight = container.offsetHeight - minHeight - splitter.offsetHeight;
            }
            if (newMarkmapHeight < minHeight) {
                newMarkmapHeight = minHeight;
                newEditorHeight = container.offsetHeight - minHeight - splitter.offsetHeight;
            }
            editorArea.style.height = newEditorHeight + 'px';
            markmapArea.style.height = newMarkmapHeight + 'px';
        }
        if (editor) editor.layout(); // Trigger Monaco relayout
        if (markmapInstance) markmapInstance.fit(); // Trigger Markmap refit
      }

      function onMouseUp() {
        if (!isDragging) return;
        isDragging = false;
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
        if (editor) editor.layout();
        if (markmapInstance) markmapInstance.fit();
      }

      // 悬浮显示按钮逻辑
      const showEditorBtn = document.getElementById('show-editor-btn');
      const showMindmapBtn = document.getElementById('show-mindmap-btn');
      function updateShowPanelButtons() {
        const container = document.getElementById('main-container');
        showEditorBtn.style.display = container.classList.contains('hide-editor') ? 'flex' : 'none';
        showMindmapBtn.style.display = container.classList.contains('hide-mindmap') ? 'flex' : 'none';
      }
      showEditorBtn.onclick = function() {
        document.getElementById('main-container').classList.remove('hide-editor');
        updateShowPanelButtons();
        if(editor) editor.layout();
        if(markmapInstance) markmapInstance.fit();
      };
      showMindmapBtn.onclick = function() {
        document.getElementById('main-container').classList.remove('hide-mindmap');
        updateShowPanelButtons();
        if(editor) editor.layout();
        if(markmapInstance) markmapInstance.fit();
      };
      // 在切换隐藏时也更新
      document.getElementById('toggle-editor-btn').addEventListener('click', updateShowPanelButtons);
      document.getElementById('toggle-mindmap-btn').addEventListener('click', updateShowPanelButtons);
      // 初始化时也调用
      updateShowPanelButtons();
    }

    // 页面加载后初始化
    window.addEventListener('DOMContentLoaded', function() {
      initMonacoEditor();
      initUI();

      // 默认开启自动保存
      if (autoSaveEnabled) {
        toggleAutoSave();
      }
    });
  </script>
  <!-- 悬浮显示按钮 -->
  <button id="show-editor-btn" style="display:none;position:fixed;left:12px;top:50%;transform:translateY(-50%);z-index:2000;box-shadow:0 2px 8px rgba(37,99,235,0.15);background:#fff;color:#2563eb;border:1.5px dashed #2563eb;border-radius:50%;width:48px;height:48px;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:background 0.2s;" title="显示编辑器">
    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
  </button>
  <button id="show-mindmap-btn" style="display:none;position:fixed;right:12px;top:50%;transform:translateY(-50%);z-index:2000;box-shadow:0 2px 8px rgba(37,99,235,0.15);background:#fff;color:#2563eb;border:1.5px dashed #2563eb;border-radius:50%;width:48px;height:48px;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:background 0.2s;" title="显示思维导图">
    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
  </button>
</body>
</html>
