Develop (#17)

✨新功能 (Features)
智能表单引擎: 新增智能表单填充功能，内置模糊匹配引擎、Mock数据生成器与视觉反馈渲染器。

表单映射与导出: 实现表单映射页面（包含扫描器和高亮器），并支持将配置导出为 JSON 文件，附带 Snackbar 状态提示。

表单识别增强: 增加按域名保存字段类型偏好的功能；添加字段定位闪烁以辅助查找；优化填充逻辑（支持单字段覆盖默认模式）；重构 FieldList 组件以提升操作体验。

♻️ 代码重构 (Refactor)
通用组件提取: 提取并统一应用通用的 PageHeader 组件，移除独立的侧边栏页面及未使用的组件文件。

状态与逻辑优化: 改进 useStorageState 钩子（增加加载状态管理与防抖处理）；将二维码解析功能重构为独立模块。

类型与依赖简化: 统一使用 SnackbarOptions 类型；简化假数据生成器中 faker 的导入与使用逻辑。

💄 样式与界面 (Style)
UI 细节打磨: 统一各页面头部图标颜色，调整表单输入框与按钮交互样式；优化时间戳页面、结果视图布局（增加圆角、调整内边距/对齐方式）；重构存储选项网格及自动刷新开关样式。

代码格式: 优化项目中导入语句的顺序与格式。

👷 持续集成 (CI)
流程提效: 移除 Firefox 测试步骤以减少资源消耗；收紧工作流触发条件，移除 develop 及其变体分支，仅保留 main 分支触发。

📝 文档 (Docs)
代码维护: 补充组件的文档注释与类型导入。

config/__tests__/routes.test.ts

@@ -9,8 +9,8 @@ import {
 
 describe('routes', () => {
   describe('ROUTES', () => {
-    it('should have 7 routes defined', () => {
-      expect(ROUTES).toHaveLength(7);
+    it('should have 9 routes defined', () => {
+      expect(ROUTES).toHaveLength(9);
     });
 
     it('should have all required properties for each route', () => {
@@ -104,7 +104,7 @@ describe('routes', () => {
   describe('getAllRouteKeys', () => {
     it('should return all route keys', () => {
       const allKeys = getAllRouteKeys();
-      expect(allKeys).toHaveLength(7);
+      expect(allKeys).toHaveLength(9);
       expect(allKeys).toContain('dashboard');
       expect(allKeys).toContain('timestamp');
       expect(allKeys).toContain('storageCleaner');
@@ -135,9 +135,9 @@ describe('routes', () => {
       expect(pageOrder).toContain('formRecognizer');
     });
 
-    it('should have 5 items in page order', () => {
+    it('should have 7 items in page order', () => {
       const pageOrder = getDefaultPageOrder();
-      expect(pageOrder).toHaveLength(5);
+      expect(pageOrder).toHaveLength(7);
     });
   });
 });

config/pageTheme.ts

@@ -111,15 +111,13 @@ export const timestampPageStyles = {
  * 打开 URL 页面样式
  */
 export const openUrlPageStyles = {
+  primaryColor: THEME_COLORS.purple,
+  primaryDark: THEME_COLORS.purpleDark,
   INPUT_STYLE: {
     '& .MuiOutlinedInput-root': {
       bgcolor: 'background.paper',
-      borderRadius: 3,
+      borderRadius: 4,
       transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
-      '& fieldset': {
-        border: '1px solid',
-        borderColor: 'grey.100',
-      },
       '&:hover fieldset': {
         borderColor: 'grey.300',
       },
@@ -129,14 +127,14 @@ export const openUrlPageStyles = {
       },
       '&.Mui-focused': {
         bgcolor: '#fff',
-        boxShadow: (_theme: Theme) => `0 0 0 4px ${alpha(THEME_COLORS.purple, 0.1)}`,
       },
     },
     '& .MuiInputBase-input': {
-      py: 1.2,
+      py: '14px',
       px: 2,
       fontSize: '0.85rem',
       fontWeight: 600,
+      lineHeight: 1.4,
     },
     '& .MuiInputLabel-root': {
       fontSize: '0.85rem',
@@ -176,26 +174,7 @@ export const qrCodePageStyles = {
   successDark: THEME_COLORS.successDark,
   white: THEME_COLORS.white,
   black: THEME_COLORS.black,
-  INPUT_STYLE: {
-    '& .MuiOutlinedInput-root': {
-      borderRadius: 3,
-      '& fieldset': {
-        borderColor: THEME_COLORS.success,
-      },
-      '&:hover fieldset': {
-        borderColor: THEME_COLORS.success,
-      },
-      '&.Mui-focused fieldset': {
-        borderColor: THEME_COLORS.success,
-      },
-    },
-    '& .MuiInputLabel-root': {
-      fontSize: '0.85rem',
-      fontWeight: 700,
-      color: 'text.secondary',
-      '&.Mui-focused': { color: THEME_COLORS.success },
-    },
-  },
+  INPUT_STYLE: {},
 } as const;
 
 /**
@@ -212,6 +191,7 @@ export const dashboardPageStyles = {
  * 使用语义化的颜色命名：valid（有效）、invalid（无效）、clear（清除）
  */
 export const formRecognizerPageStyles = {
+  primaryColor: '#ff5722',
   validColor: THEME_COLORS.success,
   validDark: THEME_COLORS.successDark,
   invalidColor: THEME_COLORS.warning,
@@ -225,3 +205,10 @@ export const formRecognizerPageStyles = {
     fontWeight: 700,
   },
 } as const;
+
+/**
+ * 表单映射页面样式
+ */
+export const formMappingPageStyles = {
+  secondaryColor: THEME_COLORS.purple,
+} as const;

config/routes.ts

@@ -6,6 +6,8 @@ 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 FormMappingPage from '@/entrypoints/popup/pages/FormMappingPage';
+import FormFillPage from '@/entrypoints/popup/pages/FormFillPage';
 
 export interface RouteConfig {
   key: PageType;
@@ -69,6 +71,26 @@ export const ROUTES: RouteConfig[] = [
       detached: QrCodePage,
     },
   },
+  {
+    key: 'formMapping',
+    label: '表单映射',
+    defaultVisible: true,
+    components: {
+      popup: FormMappingPage,
+      sidepanel: FormMappingPage,
+      detached: FormMappingPage,
+    },
+  },
+  {
+    key: 'formFill',
+    label: '智能填充',
+    defaultVisible: true,
+    components: {
+      popup: FormFillPage,
+      sidepanel: FormFillPage,
+      detached: FormFillPage,
+    },
+  },
   {
     key: 'formRecognizer',
     label: '表单识别',