menav/src/runtime/app/ui.js

module.exports = function initUi(state, dom) {
  const {
    searchInput,
    searchBox,
    menuToggle,
    searchToggle,
    sidebar,
    searchContainer,
    overlay,
    sidebarToggle,
    content,
    themeToggle,
    themeIcon,
  } = dom;

  // 移除预加载类，允许 CSS 过渡效果
  document.documentElement.classList.remove('preload');

  // 应用从 localStorage 读取的主题设置（预加载阶段已写入 class）
  if (document.documentElement.classList.contains('theme-preload')) {
    document.documentElement.classList.remove('theme-preload');
    document.body.classList.add('light-theme');
    state.isLightTheme = true;
  }

  // 应用从 localStorage 读取的侧边栏状态（预加载阶段已写入 class）
  if (document.documentElement.classList.contains('sidebar-collapsed-preload')) {
    document.documentElement.classList.remove('sidebar-collapsed-preload');
    sidebar.classList.add('collapsed');
    content.classList.add('expanded');
    state.isSidebarCollapsed = true;
  }

  // 即时移除 loading 类，确保侧边栏可见
  document.body.classList.remove('loading');
  document.body.classList.add('loaded');

  function isMobile() {
    return window.innerWidth <= 768;
  }

  // 侧边栏折叠功能
  function toggleSidebarCollapse() {
    // 仅在交互时启用布局相关动画，避免首屏闪烁
    document.documentElement.classList.add('with-anim');

    state.isSidebarCollapsed = !state.isSidebarCollapsed;

    // 使用 requestAnimationFrame 确保平滑过渡
    requestAnimationFrame(() => {
      sidebar.classList.toggle('collapsed', state.isSidebarCollapsed);
      content.classList.toggle('expanded', state.isSidebarCollapsed);

      // 保存折叠状态到 localStorage
      localStorage.setItem('sidebarCollapsed', state.isSidebarCollapsed ? 'true' : 'false');
    });
  }

  // 初始化侧边栏折叠状态 - 已在页面加载前处理，此处仅完成图标状态初始化等次要任务
  function initSidebarState() {
    // 从 localStorage 获取侧边栏状态
    const savedState = localStorage.getItem('sidebarCollapsed');

    // 图标状态与折叠状态保持一致
    if (savedState === 'true' && !isMobile()) {
      state.isSidebarCollapsed = true;
    } else {
      state.isSidebarCollapsed = false;
    }
  }

  // 主题切换功能
  function toggleTheme() {
    state.isLightTheme = !state.isLightTheme;
    document.body.classList.toggle('light-theme', state.isLightTheme);

    // 更新图标
    if (state.isLightTheme) {
      themeIcon.classList.remove('fa-moon');
      themeIcon.classList.add('fa-sun');
    } else {
      themeIcon.classList.remove('fa-sun');
      themeIcon.classList.add('fa-moon');
    }

    // 保存主题偏好到 localStorage
    localStorage.setItem('theme', state.isLightTheme ? 'light' : 'dark');
  }

  // 初始化主题 - 已在页面加载前处理，此处仅完成图标状态初始化等次要任务
  function initTheme() {
    // 从 localStorage 获取主题偏好
    const savedTheme = localStorage.getItem('theme');

    // 更新图标状态以匹配当前主题
    if (savedTheme === 'light') {
      state.isLightTheme = true;
      themeIcon.classList.remove('fa-moon');
      themeIcon.classList.add('fa-sun');
    } else {
      state.isLightTheme = false;
      themeIcon.classList.remove('fa-sun');
      themeIcon.classList.add('fa-moon');
    }
  }

  // 移动端菜单切换
  function toggleSidebar() {
    state.isSidebarOpen = !state.isSidebarOpen;
    sidebar.classList.toggle('active', state.isSidebarOpen);
    overlay.classList.toggle('active', state.isSidebarOpen);
  }

  // 移动端：搜索框常驻显示（CSS 控制），无需“搜索面板”开关；点击仅聚焦输入框
  function toggleSearch() {
    searchInput && searchInput.focus();
  }

  // 关闭所有移动端面板
  function closeAllPanels() {
    if (state.isSidebarOpen) {
      toggleSidebar();
    }
  }

  // 侧边栏折叠按钮点击事件
  if (sidebarToggle) {
    sidebarToggle.addEventListener('click', toggleSidebarCollapse);
  }

  // 主题切换按钮点击事件
  themeToggle.addEventListener('click', toggleTheme);

  // 移动端事件监听
  menuToggle.addEventListener('click', toggleSidebar);
  searchToggle.addEventListener('click', toggleSearch);
  overlay.addEventListener('click', closeAllPanels);

  // 全局快捷键：Ctrl/Cmd + K 聚焦搜索
  document.addEventListener('keydown', (e) => {
    const key = (e.key || '').toLowerCase();
    if (key !== 'k') return;
    if ((!e.ctrlKey && !e.metaKey) || e.altKey) return;

    const target = e.target;
    const isTypingTarget =
      target &&
      (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable);

    if (isTypingTarget && target !== searchInput) return;

    e.preventDefault();

    searchInput && searchInput.focus();
  });

  // 窗口大小改变时处理
  window.addEventListener('resize', () => {
    if (!isMobile()) {
      sidebar.classList.remove('active');
      searchContainer.classList.remove('active');
      overlay.classList.remove('active');
      state.isSidebarOpen = false;
    } else {
      // 在移动设备下，重置侧边栏折叠状态
      sidebar.classList.remove('collapsed');
      content.classList.remove('expanded');
    }
  });

  // 仅用于静态检查：确保未用变量不被 lint 报错（未来可用于搜索 UI 状态）
  void searchBox;

  return {
    isMobile,
    closeAllPanels,
    initTheme,
    initSidebarState,
  };
};