refactor: 模块化重构 generator 和 runtime

src/runtime/app/ui.js

@@ -0,0 +1,181 @@
+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,
+  };
+};
+