Develop (#9)

* feat: optimize popup standalone window layout and enhance storage cleaner synchronization

* docs: 更新README文档并删除过时文件

- 更新README文档，添加项目结构、功能特性和路由系统等详细信息
- 删除不再使用的文档文件，包括CLAUDE.md、GEMINI.md和多个设计规范文档
- 清理项目中的过时配置文件和计划文档

* feat: 添加 Vitest 测试框架和组件测试

- 添加 Vitest 配置 (vitest.config.ts, vitest.setup.ts)
- 创建组件测试: Button, ToolCard, GlobalSnackbar, TopBar, RouterContainer, StorageCleanerConfirm
- 创建工具测试: routes, storageCleaner
- 修复 background.ts 监听器参数问题
- 修复 options/App.tsx 硬编码默认值
- 更新 lint-staged.config.mjs (添加 .mjs 支持, 添加 --no-warn-ignored)
- 更新 tsconfig.json (添加测试类型支持, 移除测试文件排除)
- 更新 package.json (添加测试脚本和依赖)

* fix: 修复 StorageCleanerPage Chrome API 监听器内存泄漏

使用 useRef 模式存储 loadInfo 函数引用，避免依赖数组变化导致的监听器重复注册问题

* refactor(popup): 优化 OpenUrl 页面样式和导航逻辑

重构 OpenUrl 页面输入框样式，改进聚焦状态效果
移除 RouterProvider 依赖，直接通过存储设置侧边栏路由
在 OpenUrlViewer 页面添加加载状态指示器和错误处理
监听存储变化实现 URL 自动更新

* feat(ui): 优化存储清理页面UI和交互效果

重构存储清理页面组件，增强视觉层次和交互体验：
- 使用新的错误提示样式和布局
- 改进选项卡片样式，增加悬停动画和选中状态
- 调整整体间距和排版，提升视觉一致性
- 添加微交互效果如悬停缩放和阴影
- 优化颜色方案和过渡动画
- 统一组件尺寸和字体层级

* feat: 添加二维码工具页面，支持URL转二维码和二维码解析功能

* chore: update package-lock.json (npm audit fix)

* refactor(主题): 将页面样式抽离到统一配置文件

将各页面的颜色和样式配置抽离到config/pageTheme.ts中统一管理
优化测试用例中使用each替代forEach
更新路由测试以包含新的qrCode页面

* feat(二维码页面): 添加复制二维码功能并优化样式

添加复制二维码到剪贴板的功能，并调整按钮布局和样式。同时将 ContentCopyIcon 导入位置调整到其他图标导入之后，并修复缩进问题。在 tsconfig.json 中添加 vitest/globals 类型支持。

* feat(theme): 为所有页面添加统一的背景色和卡片背景色

为应用中的所有页面添加了统一的浅灰色背景(#f5f5f5)和白色卡片背景(#ffffff)，以保持视觉一致性。修改了ToolCard组件以支持自定义卡片背景色，并更新了所有相关页面使用新的主题配置。

* feat: 添加复制按钮组件并优化现有复制功能

refactor(utils): 创建剪贴板工具函数
feat(components): 新增可复用的CopyButton组件
refactor(pages): 在QrCodePage和TimestampPage中使用CopyButton
style: 格式化代码并调整部分样式

* refactor(存储): 统一qrCode相关存储键名

将'qrCode/expanded'重命名为'qrCode/qrExpanded'以保持命名一致性

* feat: 添加二维码工具功能并更新项目配置

- 新增二维码工具页面及相关组件和工具函数
- 添加 MIT 许可证文件
- 更新 package.json 配置为公开项目
- 更新 README 文档说明新功能

entrypoints/popup/pages/OpenUrlViewerPage.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, CircularProgress, Alert } from '@mui/material';
 import { storageUtil } from '@/utils/chromeStorage';
+import { dashboardPageStyles } from '@/config/pageTheme';
 
 // 只允许 HTTP/HTTPS 协议，阻止危险协议
 const ALLOWED_PROTOCOLS = ['http:', 'https:'];
@@ -8,6 +9,7 @@ const ALLOWED_PROTOCOLS = ['http:', 'https:'];
 export default function OpenUrlViewerPage() {
   const [currentUrl, setCurrentUrl] = useState<string>('');
   const [isLoaded, setIsLoaded] = useState(false);
+  const [iframeLoading, setIframeLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   // 验证 URL 是否安全
@@ -24,33 +26,59 @@ export default function OpenUrlViewerPage() {
   };
 
   // 从存储加载当前选中的 URL
-  useEffect(() => {
-    const loadCurrentUrl = async () => {
-      try {
-        const saved = await storageUtil.get('openUrl/currentUrl', '');
-        if (saved) {
-          const validationError = validateUrl(saved);
-          if (validationError) {
-            setError(validationError);
-          } else {
-            setCurrentUrl(saved);
-            setError(null);
-          }
+  const loadCurrentUrl = useCallback(async () => {
+    try {
+      const saved = await storageUtil.get('openUrl/currentUrl', '');
+      if (saved) {
+        const validationError = validateUrl(saved);
+        if (validationError) {
+          setError(validationError);
+        } else {
+          setCurrentUrl(saved);
+          setError(null);
+          setIframeLoading(true); // 重置 iframe 加载状态
         }
-      } catch (error) {
-        console.error('Failed to load current URL:', error);
-        setError('加载 URL 失败');
-      } finally {
-        setIsLoaded(true);
+      } else {
+        setError(null);
+        setCurrentUrl('');
+      }
+    } catch (error) {
+      console.error('Failed to load current URL:', error);
+      setError('加载 URL 失败');
+    } finally {
+      setIsLoaded(true);
+    }
+  }, []);
+
+  // 初始加载
+  useEffect(() => {
+    loadCurrentUrl();
+  }, [loadCurrentUrl]);
+
+  // 监听存储变化，确保 URL 变更时能及时更新
+  useEffect(() => {
+    const handleStorageChange = (changes: { [key: string]: chrome.storage.StorageChange }) => {
+      if (changes['openUrl/currentUrl']) {
+        loadCurrentUrl();
       }
     };
-    loadCurrentUrl();
-  }, []);
+
+    chrome.storage.onChanged.addListener(handleStorageChange);
+    return () => chrome.storage.onChanged.removeListener(handleStorageChange);
+  }, [loadCurrentUrl]);
 
   if (!isLoaded) {
     return (
-      <Box sx={{ p: 2, flex: 1 }}>
-        <Typography color="text.secondary">Loading...</Typography>
+      <Box
+        sx={{
+          p: 2,
+          flex: 1,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <CircularProgress size={40} />
       </Box>
     );
   }
@@ -58,7 +86,10 @@ export default function OpenUrlViewerPage() {
   if (error) {
     return (
       <Box sx={{ p: 2, flex: 1 }}>
-        <Typography color="error">{error}</Typography>
+        <Alert severity="error" sx={{ mb: 2 }}>
+          {error}
+        </Alert>
+        <Typography color="text.secondary">请返回 OpenUrl 页面选择有效的 URL。</Typography>
       </Box>
     );
   }
@@ -66,15 +97,46 @@ export default function OpenUrlViewerPage() {
   if (!currentUrl) {
     return (
       <Box sx={{ p: 2, flex: 1 }}>
-        <Typography color="text.secondary">
-          没有选中的 URL，请先在 OpenUrl 页面选择一个 URL 打开。
-        </Typography>
+        <Alert severity="info" sx={{ mb: 2 }}>
+          没有选中的 URL
+        </Alert>
+        <Typography color="text.secondary">请先在 OpenUrl 页面选择一个 URL 打开。</Typography>
       </Box>
     );
   }
 
   return (
-    <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+    <Box
+      sx={{
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        bgcolor: dashboardPageStyles.backgroundColor,
+      }}
+    >
+      {/* 加载状态指示器 */}
+      {iframeLoading && (
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            bgcolor: 'rgba(255, 255, 255, 0.8)',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 1000,
+          }}
+        >
+          <Box sx={{ textAlign: 'center' }}>
+            <CircularProgress size={60} />
+            <Typography sx={{ mt: 2 }}>加载中...</Typography>
+          </Box>
+        </Box>
+      )}
       <iframe
         src={currentUrl}
         title="OpenUrl Viewer"
@@ -85,6 +147,11 @@ export default function OpenUrlViewerPage() {
           border: 'none',
           display: 'block',
         }}
+        onLoad={() => setIframeLoading(false)}
+        onError={() => {
+          setIframeLoading(false);
+          setError('URL 加载失败，请检查网络连接或 URL 是否正确');
+        }}
       />
     </Box>
   );