Enhance form recognition, optimize UI, and unify components (#19)

- **docs**: 完善组件注释、README 目录结构及 AGENTS.md 文档。 - **refactor**: - 提取通用 `PageHeader`、`Button`、`DashboardCard` 及 `ErrorBoundary` 组件。 - 重构消息通信机制，采用 `@webext-core/messaging` 实现类型安全。 - 将全局通知系统重构为 `SnackbarProvider` (后合并至 `GlobalSnackbar`)。 - 迁移样式系统至 MUI 主题，移除冗余 CSS。 - 优化路由配置，支持独立标签页模式及页面懒加载。 - 移除未使用文件、URL 工具及表单映射相关功能。 - **feat**: - 新增配置导出功能（JSON）及状态提示。 - 新增侧边栏状态变化通知机制。 - 新增文本统计及 JWT 解析工具。 - 优化二维码生成与解析逻辑，换用更轻量的 `qrious` 和 `qr-scanner`。 - 增强高亮器功能，支持闪烁效果及 Shadow DOM 穿透。 - **style**: 优化仪表盘响应式网格布局及 UI 细节。 - **fix**: 修复 `useStorageState` 依赖缺失及路由初始化性能问题。 - **test**: 更新单元测试以覆盖新增的工具函数及功能特性。
2026-05-03 17:06:32 +08:00
parent 8d36f21f1b
commit 57ea4d9858
80 changed files with 1909 additions and 15265 deletions
@@ -0,0 +1,60 @@
+import { useState, useEffect, useCallback } from 'react';
+import { MessageAction, onMessage } from '@/utils/messages';
+import { useSnackbar } from '@/components/GlobalSnackbar';
+
+/**
+ * 管理侧边栏状态检测与开启逻辑的 Hook
+ */
+export function useSidePanelState() {
+  const [sidePanelOpen, setSidePanelOpen] = useState(false);
+  const { showMessage } = useSnackbar();
+
+  const checkSidePanelState = useCallback(async () => {
+    try {
+      if (typeof chrome.runtime.getContexts === 'function') {
+        const contexts = await chrome.runtime.getContexts({
+          contextTypes: ['SIDE_PANEL'],
+        });
+        setSidePanelOpen(contexts.length > 0);
+      } else {
+        setSidePanelOpen(false);
+      }
+    } catch (error) {
+      console.error('检测侧边栏状态失败:', error);
+      setSidePanelOpen(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    // 使用 requestAnimationFrame 避免同步调用 setState
+    requestAnimationFrame(() => {
+      checkSidePanelState().catch(console.error);
+    });
+
+    // 监听侧边栏状态变化消息
+    const removeListener = onMessage(MessageAction.SIDE_PANEL_STATE_CHANGED, (message) => {
+      setSidePanelOpen(message.data.isOpen);
+    });
+
+    return () => {
+      removeListener();
+    };
+  }, [checkSidePanelState]);
+
+  const handleOpenSidePanel = useCallback(async () => {
+    try {
+      await chrome.sidePanel.open({ windowId: chrome.windows.WINDOW_ID_CURRENT });
+      setSidePanelOpen(true);
+      showMessage('侧边栏已打开', { severity: 'success' });
+    } catch (error) {
+      console.error('打开侧边栏失败:', error);
+      showMessage('打开侧边栏失败', { severity: 'error' });
+    }
+  }, [showMessage]);
+
+  return {
+    sidePanelOpen,
+    handleOpenSidePanel,
+    checkSidePanelState,
+  };
+}