Develop fill form (#11)

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

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

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

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

* feat(QR码): 添加粘贴图片功能并优化上传组件

添加全局粘贴事件监听，支持从剪贴板直接粘贴二维码图片进行解析。重构上传组件为独立组件QrCodeUploader，包含拖拽上传、预览、进度显示和错误处理功能。优化页面样式和用户体验。

- 在QrCodePage添加粘贴事件监听
- 创建QrCodeUploader组件整合上传功能
- 更新测试用例格式
- 调整多个页面的背景色样式

* feat(表单识别): 新增表单识别页面功能与模板管理

- 添加表单识别页面样式配置
- 实现表单字段扫描与展示功能
- 新增数据模板管理工具类
- 添加数据验证工具类
- 扩展表单识别页面功能，包括操作历史记录
- 支持模板的导入导出功能
- 优化表单填充操作的用户体验

* feat(消息系统): 添加标签页刷新功能

在消息系统中新增 RELOAD_TAB 动作类型和 tabId 字段，用于处理标签页刷新请求
修改 StorageCleanerPage 使用后台脚本发送刷新请求，确保弹窗关闭后仍能执行
在 background.ts 中添加标签页刷新处理逻辑，包括错误处理和响应返回

* refactor(theme): 重构主题颜色和样式配置

- 更新主题颜色以满足 WCAG AA 可访问性标准
- 提取全局样式配置到统一变量
- 使用语义化颜色变量替换硬编码值
- 为输入框样式创建统一配置

* feat: add URL entry management components and QR code generation feature

- Introduced `UrlEntryItem` and `UrlEntryList` components for displaying and managing URL entries.
- Added `UrlToQrCodeSection` component for generating QR codes from URLs with download and copy functionality.
- Implemented `AutoRefreshToggle`, `CleaningResult`, `DomainHeader`, `ErrorDisplay`, `OptionItem`, and `StorageOptionsGrid` components for enhanced user interface in storage cleaning.
- Created custom hooks `useStorageCleaner` and `useStorageState` for managing storage-related states and preferences.
- Added utility hook `useUrlPreferences` for handling URL entry preferences.

* feat: 新增时间戳转换器和相关组件，优化时间戳页面功能

* Refactor message handling and storage cleaning logic

* feat: 添加 GitHub Actions CI/CD 工作流，支持自动化构建与发布

entrypoints/popup/pages/OpenUrlPage.tsx

@@ -1,101 +1,20 @@
-import { useState, useEffect, useCallback, Fragment } from 'react';
-import {
-  Box,
-  TextField,
-  Alert,
-  List,
-  ListItem,
-  IconButton,
-  Typography,
-  Divider,
-  Container,
-  Stack,
-  alpha,
-  Tooltip,
-} from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import AddIcon from '@mui/icons-material/Add';
+import { Box, Typography, Container, Stack, alpha } from '@mui/material';
 import LanguageIcon from '@mui/icons-material/Language';
-import LinkIcon from '@mui/icons-material/Link';
-import Button from '@/components/Button';
 import GlobalSnackbar, { useSnackbar } from '@/components/GlobalSnackbar';
-import { storageUtil } from '@/utils/chromeStorage';
-import type { OpenUrlPreferences, OpenUrlEntry } from '@/types/storage';
+import UrlEntryForm from '@/components/UrlEntryForm';
+import UrlEntryList from '@/components/UrlEntryList';
+import { useUrlPreferences } from '@/utils/useUrlPreferences';
+import type { OpenUrlEntry } from '@/types/storage';
 import { openUrlPageStyles, dashboardPageStyles } from '@/config/pageTheme';
 
 const THEME_COLOR = openUrlPageStyles.themeColor;
 
-const DEFAULT_PREFERENCES: OpenUrlPreferences = {
-  entries: [],
-};
-
 export default function OpenUrlPage() {
-  const [entries, setEntries] = useState<OpenUrlEntry[]>(DEFAULT_PREFERENCES.entries);
-  const [newName, setNewName] = useState<string>('');
-  const [newUrl, setNewUrl] = useState<string>('');
-  const [isLoaded, setIsLoaded] = useState(false);
+  const { entries, setEntries, isLoaded } = useUrlPreferences();
   const { snackbarProps, showMessage } = useSnackbar();
 
-  const showMixedContentWarning =
-    newUrl.startsWith('http://') && !newUrl.includes('localhost') && !newUrl.includes('127.0.0.1');
-
-  const isValidUrl = (url: string) => {
-    if (!url.trim()) return false;
-    try {
-      new URL(url);
-      return true;
-    } catch {
-      return false;
-    }
-  };
-
-  useEffect(() => {
-    const loadPreferences = async () => {
-      try {
-        const saved = await storageUtil.get('openUrl/preferences', DEFAULT_PREFERENCES);
-        if (saved && saved.entries) {
-          setEntries(saved.entries);
-        }
-      } catch (error) {
-        console.error('Failed to load Open Url preferences:', error);
-      } finally {
-        setIsLoaded(true);
-      }
-    };
-    loadPreferences();
-  }, []);
-
-  const savePreferences = useCallback(() => {
-    const preferences: OpenUrlPreferences = { entries };
-    storageUtil.set('openUrl/preferences', preferences).catch((error) => {
-      console.error('Failed to save Open Url preferences:', error);
-    });
-  }, [entries]);
-
-  useEffect(() => {
-    if (!isLoaded) return;
-    const timer = setTimeout(() => {
-      savePreferences();
-    }, 500);
-    return () => clearTimeout(timer);
-  }, [entries, isLoaded, savePreferences]);
-
-  const handleAddEntry = () => {
-    if (!newName.trim()) {
-      showMessage('请输入名称', { severity: 'error' });
-      return;
-    }
-    if (!isValidUrl(newUrl)) {
-      showMessage('请输入有效的 URL', { severity: 'error' });
-      return;
-    }
-
-    setEntries([...entries, { name: newName.trim(), url: newUrl.trim() }]);
-    setNewName('');
-    setNewUrl('');
-    showMessage('添加成功', { severity: 'success' });
+  const handleAddEntry = (entry: OpenUrlEntry) => {
+    setEntries([...entries, entry]);
   };
 
   const handleDeleteEntry = (index: number) => {
@@ -105,44 +24,15 @@ export default function OpenUrlPage() {
     showMessage('删除成功', { severity: 'success' });
   };
 
-  const handleOpenInSidebar = async (entry: OpenUrlEntry) => {
-    try {
-      // 存储目标 URL
-      await storageUtil.set('openUrl/currentUrl', entry.url);
-      // 直接设置侧边栏的路由，而不是通过 syncNavigation 影响弹窗路由
-      await storageUtil.set('app/sidepanelRoute', 'openUrlViewer');
-
-      const [currentTab] = await chrome.tabs.query({
-        active: true,
-        currentWindow: true,
-      });
-      const tabId = currentTab.id;
-      if (!tabId) {
-        showMessage('无法获取当前标签页', { severity: 'error' });
-        return;
-      }
-
-      await chrome.sidePanel.setOptions({
-        tabId,
-        path: 'sidepanel.html',
-        enabled: true,
-      });
-      await chrome.sidePanel.open({ windowId: currentTab.windowId });
-
-      // 仅当在 Popup 中时才关闭窗口，防止在侧边栏内点击预览时导致侧边栏关闭
-      if (window.location.pathname.includes('popup.html')) {
-        window.close();
-      }
-    } catch (error) {
-      console.error('Failed to open side panel:', error);
-      showMessage(`打开失败: ${(error as Error).message}`, { severity: 'error' });
-    }
-  };
-
-  const handleOpenInNewTab = (entry: OpenUrlEntry) => {
-    chrome.tabs.create({ url: entry.url });
-    window.close();
-  };
+  if (!isLoaded) {
+    return (
+      <Box sx={{ bgcolor: dashboardPageStyles.backgroundColor, minHeight: '100%', pb: 3 }}>
+        <Container sx={{ py: 2 }}>
+          <Typography>加载中...</Typography>
+        </Container>
+      </Box>
+    );
+  }
 
   return (
     <Box sx={{ bgcolor: dashboardPageStyles.backgroundColor, minHeight: '100%', pb: 3 }}>
@@ -175,81 +65,7 @@ export default function OpenUrlPage() {
         </Stack>
 
         {/* Form Section */}
-        <Box
-          sx={{
-            bgcolor: 'background.paper',
-            p: 2,
-            borderRadius: 4,
-            border: '1px solid',
-            borderColor: 'grey.100',
-            mb: 3,
-            boxShadow: '0 4px 12px rgba(0,0,0,0.02)',
-          }}
-        >
-          <Stack spacing={2}>
-            <TextField
-              label="环境名称"
-              placeholder="例如: 本地文档"
-              value={newName}
-              onChange={(e) => setNewName(e.target.value)}
-              fullWidth
-              variant="outlined"
-              sx={openUrlPageStyles.INPUT_STYLE}
-              slotProps={{
-                inputLabel: {
-                  shrink: true,
-                },
-              }}
-            />
-            <TextField
-              label="目标 URL"
-              placeholder="例如: http://localhost:8000/docs"
-              value={newUrl}
-              onChange={(e) => setNewUrl(e.target.value)}
-              fullWidth
-              variant="outlined"
-              sx={openUrlPageStyles.INPUT_STYLE}
-              slotProps={{
-                inputLabel: {
-                  shrink: true,
-                },
-              }}
-            />
-
-            {showMixedContentWarning && (
-              <Alert
-                severity="warning"
-                sx={{
-                  borderRadius: 3,
-                  '& .MuiAlert-message': { fontSize: '0.7rem', fontWeight: 600, lineHeight: 1.4 },
-                }}
-              >
-                混合内容警告：当前 HTTPS 页面无法加载 HTTP 资源。
-              </Alert>
-            )}
-
-            <Button
-              variant="contained"
-              onClick={handleAddEntry}
-              disabled={!newName.trim() || !isValidUrl(newUrl)}
-              fullWidth
-              startIcon={<AddIcon />}
-              sx={{
-                py: 1.2,
-                borderRadius: 4,
-                bgcolor: THEME_COLOR,
-                fontWeight: 800,
-                boxShadow: 'none',
-                '&:hover': {
-                  bgcolor: alpha(THEME_COLOR, 0.85),
-                  boxShadow: `0 8px 24px ${alpha(THEME_COLOR, 0.2)}`,
-                },
-              }}
-            >
-              添加快捷方式
-            </Button>
-          </Stack>
-        </Box>
+        <UrlEntryForm onAddEntry={handleAddEntry} showMessage={showMessage} />
 
         {/* List Section */}
         <Box>
@@ -260,119 +76,11 @@ export default function OpenUrlPage() {
             已保存的快捷方式 ({entries.length})
           </Typography>
 
-          {entries.length === 0 ? (
-            <Box
-              sx={{
-                textAlign: 'center',
-                py: 4,
-                bgcolor: 'grey.50',
-                borderRadius: 4,
-                border: '1px dashed',
-                borderColor: 'grey.200',
-              }}
-            >
-              <LinkIcon sx={{ color: 'grey.300', fontSize: 40, mb: 1 }} />
-              <Typography
-                variant="caption"
-                color="text.disabled"
-                sx={{ display: 'block', fontWeight: 600 }}
-              >
-                暂无快捷方式，请在上方添加
-              </Typography>
-            </Box>
-          ) : (
-            <List
-              disablePadding
-              sx={{
-                bgcolor: 'background.paper',
-                borderRadius: 4,
-                border: '1px solid',
-                borderColor: 'grey.100',
-                overflow: 'hidden',
-              }}
-            >
-              {entries.map((entry, index) => (
-                <Fragment key={index}>
-                  <ListItem
-                    sx={{
-                      px: 2,
-                      py: 1.5,
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: 2,
-                      transition: 'background-color 0.2s',
-                      '&:hover': { bgcolor: 'grey.50' },
-                    }}
-                  >
-                    <Box sx={{ flex: 1, minWidth: 0 }}>
-                      <Typography
-                        variant="body2"
-                        sx={{ fontWeight: 800, color: 'text.primary' }}
-                        noWrap
-                      >
-                        {entry.name}
-                      </Typography>
-                      <Typography
-                        variant="caption"
-                        color="text.secondary"
-                        noWrap
-                        sx={{
-                          fontSize: '0.65rem',
-                          fontWeight: 500,
-                          display: 'block',
-                          mt: 0.2,
-                          fontFamily: 'monospace',
-                        }}
-                      >
-                        {entry.url}
-                      </Typography>
-                    </Box>
-                    <Stack direction="row" spacing={0.5}>
-                      <Tooltip title="在侧边栏预览">
-                        <IconButton
-                          size="small"
-                          onClick={() => handleOpenInSidebar(entry)}
-                          sx={{
-                            color: THEME_COLOR,
-                            bgcolor: alpha(THEME_COLOR, 0.05),
-                            '&:hover': { bgcolor: THEME_COLOR, color: '#fff' },
-                          }}
-                        >
-                          <VisibilityIcon sx={{ fontSize: 16 }} />
-                        </IconButton>
-                      </Tooltip>
-                      <Tooltip title="新标签页打开">
-                        <IconButton
-                          size="small"
-                          onClick={() => handleOpenInNewTab(entry)}
-                          sx={{
-                            color: 'grey.500',
-                            bgcolor: 'grey.100',
-                            '&:hover': { bgcolor: 'grey.600', color: '#fff' },
-                          }}
-                        >
-                          <OpenInNewIcon sx={{ fontSize: 16 }} />
-                        </IconButton>
-                      </Tooltip>
-                      <Tooltip title="删除">
-                        <IconButton
-                          size="small"
-                          onClick={() => handleDeleteEntry(index)}
-                          sx={{
-                            color: 'error.main',
-                            '&:hover': { color: 'error.dark', bgcolor: alpha('#f44336', 0.05) },
-                          }}
-                        >
-                          <DeleteIcon sx={{ fontSize: 16 }} />
-                        </IconButton>
-                      </Tooltip>
-                    </Stack>
-                  </ListItem>
-                  {index < entries.length - 1 && <Divider sx={{ mx: 2, borderColor: 'grey.50' }} />}
-                </Fragment>
-              ))}
-            </List>
-          )}
+          <UrlEntryList
+            entries={entries}
+            onDeleteEntry={handleDeleteEntry}
+            showMessage={showMessage}
+          />
         </Box>
       </Container>
       <GlobalSnackbar {...snackbarProps} />