<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="{{SOFTWARE_NAME}} - Interactive Software Manual">
  <meta name="generator" content="software-manual-skill">
  <title>{{SOFTWARE_NAME}} v{{VERSION}} - User Manual</title>
  <style>
{{EMBEDDED_CSS}}
  </style>
</head>
<body class="docsify-container" data-theme="light">
  <!-- Sidebar Navigation -->
  <aside class="sidebar" id="sidebar">
    <!-- Logo and Title -->
    <div class="sidebar-header">
      <div class="logo">
        <span class="logo-icon">{{LOGO_ICON}}</span>
        <div class="logo-text">
          <h1>{{SOFTWARE_NAME}}</h1>
          <span class="version">v{{VERSION}}</span>
        </div>
      </div>
    </div>

    <!-- Search Box -->
    <div class="sidebar-search">
      <div class="search-box">
        <svg class="search-icon" viewBox="0 0 24 24" width="16" height="16">
          <circle cx="11" cy="11" r="8" fill="none" stroke="currentColor" stroke-width="2"/>
          <path d="M21 21l-4.35-4.35" fill="none" stroke="currentColor" stroke-width="2"/>
        </svg>
        <input type="text" id="searchInput" placeholder="搜索文档..." aria-label="Search">
      </div>
      <div id="searchResults" class="search-results"></div>
    </div>

    <!-- Hierarchical Navigation -->
    <nav class="sidebar-nav" id="sidebarNav">
{{SIDEBAR_NAV_HTML}}
    </nav>
  </aside>

  <!-- Main Content Area -->
  <main class="main-content" id="mainContent">
    <!-- Mobile Header -->
    <header class="mobile-header">
      <button class="sidebar-toggle" id="sidebarToggle" aria-label="Toggle sidebar">
        <svg viewBox="0 0 24 24" width="24" height="24">
          <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="currentColor"/>
        </svg>
      </button>
      <span class="current-section" id="currentSection">{{SOFTWARE_NAME}}</span>
      <button class="theme-toggle-mobile" id="themeToggleMobile" aria-label="Toggle theme">
        <span class="sun-icon">&#9728;</span>
        <span class="moon-icon">&#9790;</span>
      </button>
    </header>

    <!-- Content Sections (only one visible at a time) -->
    <div class="content-wrapper">
{{SECTIONS_HTML}}
    </div>

    <!-- Footer -->
    <footer class="main-footer">
      <p>Generated by <strong>software-manual-skill</strong> | Last updated: {{TIMESTAMP}}</p>
    </footer>
  </main>

  <!-- Theme Toggle (Desktop) -->
  <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
    <span class="sun-icon">&#9728;</span>
    <span class="moon-icon">&#9790;</span>
  </button>

  <!-- Back to Top -->
  <button class="back-to-top" id="backToTop" aria-label="Back to top">
    <svg viewBox="0 0 24 24" width="20" height="20">
      <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="currentColor"/>
    </svg>
  </button>

  <!-- Search Index Data -->
  <script id="search-index" type="application/json">
{{SEARCH_INDEX_JSON}}
  </script>

  <!-- Navigation Structure Data -->
  <script id="nav-structure" type="application/json">
{{NAV_STRUCTURE_JSON}}
  </script>

  <!-- Mermaid.js for diagram rendering -->
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
  <script>
    mermaid.initialize({
      startOnLoad: false,
      theme: document.body.dataset.theme === 'dark' ? 'dark' : 'default',
      securityLevel: 'loose'
    });
  </script>

  <!-- Embedded JavaScript -->
  <script>
(function() {
  'use strict';

  // ========== State Management ==========
  let currentSectionId = null;
  const sections = document.querySelectorAll('.content-section');
  const navItems = document.querySelectorAll('.nav-item');

  // ========== Section Navigation ==========
  function showSection(sectionId) {
    // Hide all sections
    sections.forEach(s => s.classList.remove('active'));

    // Show target section
    const target = document.getElementById('section-' + sectionId);
    if (target) {
      target.classList.add('active');
      currentSectionId = sectionId;

      // Update URL hash
      history.pushState(null, '', '#/' + sectionId);

      // Update nav active state
      navItems.forEach(item => {
        item.classList.remove('active');
        if (item.dataset.section === sectionId) {
          item.classList.add('active');
          // Expand parent groups
          expandParentGroups(item);
        }
      });

      // Update mobile header
      const currentSectionEl = document.getElementById('currentSection');
      if (currentSectionEl && target.dataset.title) {
        currentSectionEl.textContent = target.dataset.title;
      }

      // Scroll to top
      document.getElementById('mainContent').scrollTop = 0;
    }
  }

  function expandParentGroups(item) {
    let parent = item.parentElement;
    while (parent) {
      if (parent.classList.contains('nav-group')) {
        parent.classList.add('expanded');
        const toggle = parent.querySelector('.nav-group-toggle');
        if (toggle) toggle.setAttribute('aria-expanded', 'true');
      }
      parent = parent.parentElement;
    }
  }

  // ========== Navigation Click Handlers ==========
  navItems.forEach(item => {
    item.addEventListener('click', function(e) {
      e.preventDefault();
      const sectionId = this.dataset.section;
      if (sectionId) {
        showSection(sectionId);
        // Close sidebar on mobile
        document.getElementById('sidebar').classList.remove('open');
      }
    });
  });

  // ========== Navigation Group Toggle ==========
  document.querySelectorAll('.nav-group-toggle').forEach(toggle => {
    toggle.addEventListener('click', function(e) {
      e.stopPropagation();
      const group = this.closest('.nav-group');
      group.classList.toggle('expanded');
      this.setAttribute('aria-expanded', group.classList.contains('expanded'));
    });
  });

  // ========== Search Functionality ==========
  const indexData = JSON.parse(document.getElementById('search-index').textContent);
  const searchInput = document.getElementById('searchInput');
  const searchResults = document.getElementById('searchResults');

  function searchDocs(query) {
    if (!query || query.length < 2) return [];

    const results = [];
    const lowerQuery = query.toLowerCase();

    for (const [id, content] of Object.entries(indexData)) {
      let score = 0;
      const titleLower = content.title.toLowerCase();
      const bodyLower = content.body.toLowerCase();

      if (titleLower.includes(lowerQuery)) score += 10;
      if (bodyLower.includes(lowerQuery)) score += 5;

      if (score > 0) {
        results.push({
          id,
          title: content.title,
          excerpt: getExcerpt(content.body, query),
          score
        });
      }
    }

    return results.sort((a, b) => b.score - a.score).slice(0, 8);
  }

  function getExcerpt(text, query) {
    const maxLength = 120;
    const lowerText = text.toLowerCase();
    const lowerQuery = query.toLowerCase();
    const index = lowerText.indexOf(lowerQuery);

    if (index === -1) {
      return text.substring(0, maxLength) + (text.length > maxLength ? '...' : '');
    }

    const start = Math.max(0, index - 30);
    const end = Math.min(text.length, index + query.length + 60);
    let excerpt = text.substring(start, end);

    if (start > 0) excerpt = '...' + excerpt;
    if (end < text.length) excerpt += '...';

    const regex = new RegExp('(' + query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');
    return excerpt.replace(regex, '<mark>$1</mark>');
  }

  searchInput.addEventListener('input', function() {
    const query = this.value.trim();
    const results = searchDocs(query);

    if (results.length === 0) {
      searchResults.innerHTML = query.length >= 2
        ? '<div class="no-results">未找到结果</div>'
        : '';
      searchResults.classList.toggle('visible', query.length >= 2);
      return;
    }

    searchResults.innerHTML = results.map(r => `
      <a href="#/${r.id}" class="search-result-item" data-section="${r.id}">
        <div class="result-title">${r.title}</div>
        <div class="result-excerpt">${r.excerpt}</div>
      </a>
    `).join('');
    searchResults.classList.add('visible');
  });

  searchResults.addEventListener('click', function(e) {
    const item = e.target.closest('.search-result-item');
    if (item) {
      e.preventDefault();
      searchInput.value = '';
      searchResults.innerHTML = '';
      searchResults.classList.remove('visible');
      showSection(item.dataset.section);
    }
  });

  // Close search results when clicking outside
  document.addEventListener('click', function(e) {
    if (!e.target.closest('.sidebar-search')) {
      searchResults.classList.remove('visible');
    }
  });

  // ========== Theme Toggle ==========
  function setTheme(theme) {
    document.body.dataset.theme = theme;
    localStorage.setItem('docs-theme', theme);
  }

  const savedTheme = localStorage.getItem('docs-theme') || 'light';
  setTheme(savedTheme);

  document.getElementById('themeToggle').addEventListener('click', function() {
    setTheme(document.body.dataset.theme === 'dark' ? 'light' : 'dark');
  });

  document.getElementById('themeToggleMobile').addEventListener('click', function() {
    setTheme(document.body.dataset.theme === 'dark' ? 'light' : 'dark');
  });

  // ========== Sidebar Toggle (Mobile) ==========
  document.getElementById('sidebarToggle').addEventListener('click', function() {
    document.getElementById('sidebar').classList.toggle('open');
  });

  // Close sidebar when clicking outside on mobile
  document.addEventListener('click', function(e) {
    const sidebar = document.getElementById('sidebar');
    const toggle = document.getElementById('sidebarToggle');
    if (!sidebar.contains(e.target) && !toggle.contains(e.target)) {
      sidebar.classList.remove('open');
    }
  });

  // ========== Back to Top ==========
  const backToTop = document.getElementById('backToTop');
  const mainContent = document.getElementById('mainContent');

  mainContent.addEventListener('scroll', function() {
    backToTop.classList.toggle('visible', this.scrollTop > 300);
  });

  backToTop.addEventListener('click', function() {
    mainContent.scrollTo({ top: 0, behavior: 'smooth' });
  });

  // ========== Code Block Copy ==========
  document.querySelectorAll('pre').forEach(pre => {
    const wrapper = document.createElement('div');
    wrapper.className = 'code-block-wrapper';
    pre.parentNode.insertBefore(wrapper, pre);
    wrapper.appendChild(pre);

    const copyBtn = document.createElement('button');
    copyBtn.className = 'copy-code-btn';
    copyBtn.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" fill="currentColor"/></svg>';
    copyBtn.addEventListener('click', function() {
      const code = pre.querySelector('code') || pre;
      navigator.clipboard.writeText(code.textContent).then(() => {
        copyBtn.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/></svg>';
        setTimeout(() => {
          copyBtn.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" fill="currentColor"/></svg>';
        }, 2000);
      });
    });
    wrapper.appendChild(copyBtn);
  });

  // ========== Mermaid Diagram Rendering ==========
  function renderMermaidDiagrams() {
    // Find all mermaid code blocks and convert them to diagrams
    document.querySelectorAll('pre code.language-mermaid, pre code.highlight-mermaid').forEach((codeBlock, index) => {
      const pre = codeBlock.parentElement;
      const wrapper = pre.parentElement;
      const code = codeBlock.textContent;

      // Create mermaid container
      const mermaidDiv = document.createElement('div');
      mermaidDiv.className = 'mermaid';
      mermaidDiv.textContent = code;

      // Replace code block with mermaid div
      if (wrapper && wrapper.classList.contains('code-block-wrapper')) {
        wrapper.parentElement.replaceChild(mermaidDiv, wrapper);
      } else {
        pre.parentElement.replaceChild(mermaidDiv, pre);
      }
    });

    // Also handle codehilite blocks with mermaid
    document.querySelectorAll('.highlight').forEach((block) => {
      const code = block.querySelector('code, pre');
      if (code && code.textContent.trim().startsWith('graph ') ||
          code && code.textContent.trim().startsWith('sequenceDiagram') ||
          code && code.textContent.trim().startsWith('flowchart ') ||
          code && code.textContent.trim().startsWith('classDiagram') ||
          code && code.textContent.trim().startsWith('stateDiagram') ||
          code && code.textContent.trim().startsWith('erDiagram') ||
          code && code.textContent.trim().startsWith('gantt') ||
          code && code.textContent.trim().startsWith('pie') ||
          code && code.textContent.trim().startsWith('journey')) {
        const mermaidDiv = document.createElement('div');
        mermaidDiv.className = 'mermaid';
        mermaidDiv.textContent = code.textContent;
        block.parentElement.replaceChild(mermaidDiv, block);
      }
    });

    // Render all mermaid diagrams
    if (typeof mermaid !== 'undefined') {
      mermaid.run();
    }
  }

  // ========== Internal Anchor Links Handler ==========
  // Handle clicks on internal anchor links (TOC links like #材料管理api)
  document.addEventListener('click', function(e) {
    const link = e.target.closest('a[href^="#"]');
    if (!link) return;

    const href = link.getAttribute('href');
    // Skip section navigation links (handled by nav-item)
    if (link.classList.contains('nav-item')) return;
    // Skip search result links
    if (link.classList.contains('search-result-item')) return;

    // Check if it's an internal anchor (not a section link)
    if (href && href.startsWith('#') && !href.startsWith('#/')) {
      e.preventDefault();
      const anchorId = href.substring(1);
      const targetElement = document.getElementById(anchorId);

      if (targetElement) {
        // Scroll to the anchor within current section
        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
        // Update URL without triggering popstate
        history.pushState(null, '', '#/' + currentSectionId + '/' + anchorId);
      }
    }
  });

  // ========== Hash Parser ==========
  function parseHash(hash) {
    // Handle formats: #/sectionId, #/sectionId/anchorId, #anchorId
    if (!hash || hash === '#' || hash === '#/') return { section: null, anchor: null };

    if (hash.startsWith('#/')) {
      const parts = hash.substring(2).split('/');
      return { section: parts[0] || null, anchor: parts[1] || null };
    } else {
      // Plain anchor like #材料管理api - stay on current section
      return { section: null, anchor: hash.substring(1) };
    }
  }

  // ========== Initial Load ==========
  // Check URL hash or show first section
  const initialHash = parseHash(window.location.hash);
  if (initialHash.section && document.getElementById('section-' + initialHash.section)) {
    showSection(initialHash.section);
    // Scroll to anchor if present
    if (initialHash.anchor) {
      setTimeout(() => {
        const anchor = document.getElementById(initialHash.anchor);
        if (anchor) anchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 100);
    }
  } else if (sections.length > 0) {
    const firstSection = sections[0].id.replace('section-', '');
    showSection(firstSection);
  }

  // Render mermaid diagrams after initial load
  setTimeout(renderMermaidDiagrams, 100);

  // Handle browser back/forward
  window.addEventListener('popstate', function() {
    const parsed = parseHash(window.location.hash);
    if (parsed.section) {
      showSection(parsed.section);
      if (parsed.anchor) {
        setTimeout(() => {
          const anchor = document.getElementById(parsed.anchor);
          if (anchor) anchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }, 100);
      }
    }
  });

})();
  </script>
</body>
</html>
