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 文档说明新功能

config/pageTheme.ts

@@ -0,0 +1,124 @@
+import type { Theme } from '@mui/material';
+import { alpha } from '@mui/material';
+
+export const DATE_FORMAT = 'YYYY/MM/DD HH:mm:ss';
+
+export const ZONES = ['Asia/Shanghai', 'America/New_York', 'Europe/London'] as const;
+
+export type UnitType = 'ms' | 's';
+export type ZoneType = (typeof ZONES)[number];
+
+export const THEME_COLORS = {
+  primary: '#2196f3',
+  success: '#4caf50',
+  warning: '#ff9800',
+  error: '#f44336',
+  purple: '#9c27b0',
+  white: '#FFFFFF',
+  black: '#000000',
+} as const;
+
+export const timestampPageStyles = {
+  primaryColor: THEME_COLORS.primary,
+  INPUT_STYLE: {
+    '& .MuiOutlinedInput-root': {
+      bgcolor: 'background.paper',
+      borderRadius: 3.5,
+      border: '1px solid',
+      borderColor: 'grey.100',
+      transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
+      '& fieldset': { border: 'none' },
+      '&:hover': { borderColor: 'grey.300', bgcolor: 'grey.50' },
+      '&.Mui-focused': {
+        bgcolor: '#fff',
+        borderColor: 'primary.main',
+        boxShadow: (theme: Theme) => `0 0 0 4px ${theme.palette.primary.main}1a`,
+      },
+      '&.Mui-error': {
+        borderColor: 'error.main',
+        boxShadow: (theme: Theme) => `0 0 0 4px ${theme.palette.error.main}1a`,
+      },
+    },
+    '& .MuiInputBase-input': {
+      py: 1.4,
+      px: 2,
+      fontSize: '0.9rem',
+      fontFamily: 'monospace',
+      fontWeight: 600,
+    },
+  },
+  cardBg: alpha(THEME_COLORS.primary, 0.04),
+  cardBorder: alpha(THEME_COLORS.primary, 0.1),
+  switcherBg: alpha(THEME_COLORS.primary, 0.08),
+  switcherBorder: alpha(THEME_COLORS.primary, 0.1),
+  mutedText: alpha(THEME_COLORS.primary, 0.4),
+  resultBg: alpha(THEME_COLORS.primary, 0.05),
+  buttonHover: `0 8px 24px ${alpha(THEME_COLORS.primary, 0.2)}`,
+} as const;
+
+export const openUrlPageStyles = {
+  INPUT_STYLE: {
+    '& .MuiOutlinedInput-root': {
+      bgcolor: 'background.paper',
+      borderRadius: 3.5,
+      transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
+      '& fieldset': {
+        border: '1px solid',
+        borderColor: 'grey.100',
+      },
+      '&:hover fieldset': {
+        borderColor: 'grey.300',
+      },
+      '&:hover': { bgcolor: 'grey.50' },
+      '&.Mui-focused fieldset': {
+        borderColor: THEME_COLORS.purple,
+      },
+      '&.Mui-focused': {
+        bgcolor: '#fff',
+        boxShadow: (_theme: Theme) => `0 0 0 4px ${alpha(THEME_COLORS.purple, 0.1)}`,
+      },
+    },
+    '& .MuiInputBase-input': {
+      py: 1.2,
+      px: 2,
+      fontSize: '0.85rem',
+      fontWeight: 600,
+    },
+    '& .MuiInputLabel-root': {
+      fontSize: '0.85rem',
+      fontWeight: 700,
+      color: 'text.secondary',
+      '&.Mui-focused': { color: THEME_COLORS.purple },
+    },
+  },
+  themeColor: THEME_COLORS.purple,
+  themeBg: alpha(THEME_COLORS.purple, 0.1),
+  buttonBg: alpha(THEME_COLORS.purple, 0.85),
+  buttonHover: `0 8px 24px ${alpha(THEME_COLORS.purple, 0.2)}`,
+  errorColor: THEME_COLORS.error,
+  errorBg: alpha(THEME_COLORS.error, 0.05),
+} as const;
+
+export const storageCleanerPageStyles = {
+  warningColor: THEME_COLORS.warning,
+  warningDark: '#f57c00',
+  warningBg: alpha(THEME_COLORS.warning, 0.05),
+  warningBorder: `1px solid ${alpha(THEME_COLORS.warning, 0.2)}`,
+  errorBorder: `1px solid ${alpha(THEME_COLORS.error, 0.2)}`,
+  errorBg: alpha(THEME_COLORS.error, 0.05),
+} as const;
+
+export const qrCodePageStyles = {
+  primaryColor: THEME_COLORS.success,
+  primaryDark: '#388e3c',
+  successColor: THEME_COLORS.success,
+  successDark: '#388e3c',
+  white: THEME_COLORS.white,
+  black: THEME_COLORS.black,
+} as const;
+
+export const dashboardPageStyles = {
+  primaryColor: THEME_COLORS.primary,
+  backgroundColor: '#f5f5f5',
+  cardBackgroundColor: '#ffffff',
+} as const;