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,29 @@
+import { useState, useEffect } from 'react';
+import { getActiveTabDomain } from '@/utils/chromeTabs';
+
+/**
+ * 自动获取并维护当前活动标签页域名的 Hook
+ */
+export function useActiveTabDomain() {
+  const [domain, setDomain] = useState<string>('');
+
+  useEffect(() => {
+    getActiveTabDomain().then(setDomain);
+
+    // 如果需要实时同步（如切换标签页），可以监听 chrome.tabs.onActivated
+    const handleActivated = () => getActiveTabDomain().then(setDomain);
+    const handleUpdated = (_: number, changeInfo: { url?: string }) => {
+      if (changeInfo.url) getActiveTabDomain().then(setDomain);
+    };
+
+    chrome.tabs.onActivated.addListener(handleActivated);
+    chrome.tabs.onUpdated.addListener(handleUpdated);
+
+    return () => {
+      chrome.tabs.onActivated.removeListener(handleActivated);
+      chrome.tabs.onUpdated.removeListener(handleUpdated);
+    };
+  }, []);
+
+  return domain;
+}
@@ -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,
+  };
+}
@@ -0,0 +1,113 @@
+import { useState, useEffect, useCallback } from 'react';
+import dayjs from '@/utils/dayjs';
+import { DATE_FORMAT } from '@/config/pageTheme';
+import type { UnitType, ZoneType } from '@/config/pageTheme';
+
+export interface UseTimestampConverterReturn {
+  // State
+  mode: 'ts2dt' | 'dt2ts';
+  tsInput: string;
+  dtInput: string;
+  unit: UnitType;
+  zone: ZoneType;
+  result: string;
+  error: string;
+
+  // Actions
+  setMode: (mode: 'ts2dt' | 'dt2ts') => void;
+  setTsInput: (value: string) => void;
+  setDtInput: (value: string) => void;
+  setUnit: (unit: UnitType) => void;
+  setZone: (zone: ZoneType) => void;
+  handleUseNow: (now: number) => void;
+  convert: () => void;
+}
+
+export function useTimestampConverter(): UseTimestampConverterReturn {
+  const [mode, setMode] = useState<'ts2dt' | 'dt2ts'>('ts2dt');
+  const [tsInput, setTsInput] = useState(() => String(Date.now()));
+  const [dtInput, setDtInput] = useState(() => dayjs().format(DATE_FORMAT));
+  const [unit, setUnit] = useState<UnitType>('ms');
+  const [zone, setZone] = useState<ZoneType>('Asia/Shanghai');
+  const [result, setResult] = useState('');
+  const [error, setError] = useState('');
+
+  const convert = useCallback(() => {
+    if (mode === 'ts2dt') {
+      const rawInput = tsInput.trim();
+      if (!rawInput) return;
+      const num = Number(rawInput);
+      if (isNaN(num)) {
+        setError('无效数字');
+        return;
+      }
+      const d = unit === 'ms' ? dayjs(num) : dayjs.unix(num);
+      if (!d.isValid()) {
+        setError('无效时间戳');
+        return;
+      }
+      setError('');
+      setResult(d.tz(zone).format(DATE_FORMAT));
+    } else {
+      const rawInput = dtInput.trim();
+      if (!rawInput) return;
+      const d = dayjs.tz(rawInput, DATE_FORMAT, zone);
+      if (!d.isValid()) {
+        setError('格式错误');
+        return;
+      }
+      setError('');
+      const ms = d.valueOf();
+      setResult(unit === 'ms' ? String(ms) : String(Math.floor(ms / 1000)));
+    }
+  }, [mode, tsInput, dtInput, unit, zone]);
+
+  useEffect(() => {
+    const timer = setTimeout(convert, 400);
+    return () => clearTimeout(timer);
+  }, [convert]);
+
+  const handleUseNow = useCallback(
+    (now: number) => {
+      if (mode === 'ts2dt') {
+        setTsInput(String(unit === 'ms' ? now : Math.floor(now / 1000)));
+      } else {
+        setDtInput(dayjs(now).tz(zone).format(DATE_FORMAT));
+      }
+    },
+    [mode, unit, zone],
+  );
+
+  const handleSetMode = useCallback((newMode: 'ts2dt' | 'dt2ts') => {
+    setMode(newMode);
+    setError('');
+    setResult('');
+  }, []);
+
+  const handleSetTsInput = useCallback((value: string) => {
+    setTsInput(value);
+    setError('');
+  }, []);
+
+  const handleSetDtInput = useCallback((value: string) => {
+    setDtInput(value);
+    setError('');
+  }, []);
+
+  return {
+    mode,
+    tsInput,
+    dtInput,
+    unit,
+    zone,
+    result,
+    error,
+    setMode: handleSetMode,
+    setTsInput: handleSetTsInput,
+    setDtInput: handleSetDtInput,
+    setUnit,
+    setZone,
+    handleUseNow,
+    convert,
+  };
+}