Develop fill form (#10)

* feat(formRecognizer): 添加表单识别功能及相关组件

添加表单识别功能，包括以下内容：
1. 在路由配置中添加表单识别页面
2. 实现表单识别页面和侧边栏面板
3. 添加表单数据生成工具类
4. 实现与内容脚本的通信机制
5. 添加faker-js依赖用于生成测试数据
6. 支持不同入口点(popup/sidepanel)的组件渲染

* refactor(消息通信): 重构消息通信机制并集中管理消息协议

将分散的消息协议和通信逻辑集中到 utils/messages.ts 中
移除旧的 messages.tsx 文件并更新相关引用
添加消息动作枚举和类型定义，提高类型安全性
优化内容脚本注入失败时的处理逻辑

config/routes.ts

@@ -5,12 +5,18 @@ import StorageCleanerPage from '@/entrypoints/popup/pages/StorageCleanerPage';
 import OpenUrlPage from '@/entrypoints/popup/pages/OpenUrlPage';
 import OpenUrlViewerPage from '@/entrypoints/popup/pages/OpenUrlViewerPage';
 import QrCodePage from '@/entrypoints/popup/pages/QrCodePage';
+import FormRecognizerPage from '@/entrypoints/popup/pages/FormRecognizerPage';
+import FormFillSidePanel from '@/entrypoints/sidepanel/pages/FormFillSidePanel';
 
 export interface RouteConfig {
   key: PageType;
   label: string;
   defaultVisible: boolean;
-  component: React.ComponentType;
+  components: {
+    popup: React.ComponentType;
+    sidepanel: React.ComponentType;
+    detached: React.ComponentType;
+  };
 }
 
 export const ROUTES: RouteConfig[] = [
@@ -18,52 +24,99 @@ export const ROUTES: RouteConfig[] = [
     key: 'dashboard',
     label: 'Dashboard',
     defaultVisible: true,
-    component: DashboardPage,
+    components: {
+      popup: DashboardPage,
+      sidepanel: DashboardPage,
+      detached: DashboardPage,
+    },
   },
   {
     key: 'timestamp',
     label: '时间戳',
     defaultVisible: true,
-    component: TimestampPage,
+    components: {
+      popup: TimestampPage,
+      sidepanel: TimestampPage,
+      detached: TimestampPage,
+    },
   },
   {
     key: 'storageCleaner',
     label: '存储清理',
     defaultVisible: true,
-    component: StorageCleanerPage,
+    components: {
+      popup: StorageCleanerPage,
+      sidepanel: StorageCleanerPage,
+      detached: StorageCleanerPage,
+    },
   },
   {
     key: 'openUrl',
     label: 'Open Url',
     defaultVisible: true,
-    component: OpenUrlPage,
+    components: {
+      popup: OpenUrlPage,
+      sidepanel: OpenUrlPage,
+      detached: OpenUrlPage,
+    },
   },
   {
     key: 'qrCode',
     label: '二维码工具',
     defaultVisible: true,
-    component: QrCodePage,
+    components: {
+      popup: QrCodePage,
+      sidepanel: QrCodePage,
+      detached: QrCodePage,
+    },
+  },
+  {
+    key: 'formRecognizer',
+    label: '表单识别',
+    defaultVisible: true,
+    components: {
+      popup: FormRecognizerPage,
+      sidepanel: FormFillSidePanel,
+      detached: FormRecognizerPage,
+    },
   },
   {
     key: 'openUrlViewer',
     label: '查看',
     defaultVisible: false,
-    component: OpenUrlViewerPage,
+    components: {
+      popup: OpenUrlViewerPage,
+      sidepanel: OpenUrlViewerPage,
+      detached: OpenUrlViewerPage,
+    },
   },
 ];
 
 export function getRouteByKey(key: PageType): RouteConfig | undefined {
-  return ROUTES.find(route => route.key === key);
+  return ROUTES.find((route) => route.key === key);
 }
 
 export function getDefaultVisibleRoutes(): PageType[] {
-  return ROUTES.filter(route => route.defaultVisible).map(route => route.key);
+  return ROUTES.filter((route) => route.defaultVisible).map((route) => route.key);
 }
 
 export function getAllRouteKeys(): PageType[] {
-  return ROUTES.map(route => route.key);
+  return ROUTES.map((route) => route.key);
 }
 
 export function getDefaultPageOrder(): PageType[] {
-  return ROUTES.filter(route => route.key !== 'dashboard' && route.key !== 'openUrlViewer').map(route => route.key);
+  return ROUTES.filter((route) => route.key !== 'dashboard' && route.key !== 'openUrlViewer').map(
+    (route) => route.key,
+  );
+}
+
+export function getEntryPointType(): 'popup' | 'sidepanel' | 'detached' {
+  const pathname = window.location.pathname;
+  if (pathname.includes('sidepanel')) {
+    return 'sidepanel';
+  }
+  if (new URLSearchParams(window.location.search).get('mode') === 'detached') {
+    return 'detached';
+  }
+  return 'popup';
 }