Develop fastapi (#8)

* feat: add side panel with navigation and storage cleaner functionality

* feat: add OpenUrlPage and integrate into app navigation

* feat: 添加 GlobalSnackbar 组件并在多个页面中集成，替换原有 Snackbar 实现

* feat: fix OpenUrl sidebar issue with architecture refactor

- 修复原问题：不再直接替换侧边栏 URL，保持插件导航可见
- 采用配置页 + 查看页分离架构：OpenUrlPage (配置) + OpenUrlViewerPage (查看)
- 支持多个 URL 快捷方式管理（添加/删除）
- 每个 URL 提供两种打开方式：在侧边栏打开 / 在新标签页打开
- 侧边栏查看页使用 iframe 占满全部剩余空间
- 更新 TypeScript 类型定义
- 保留原有混合内容警告检查
- 数据持久化到 Chrome Storage

* refactor: centralized route management - consolidate routing config into single source

* feat: 更换logo

* refactor: code review fixes - security and race condition improvements

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Changes:

- wxt.config.ts: Remove unused `debugger` permission (no code uses it)
- OpenUrlPage.tsx: Fix unreachable showMessage after window.close()
- OpenUrlPage.tsx: Replace unnecessary div wrapper with Fragment to reduce DOM nesting
- OpenUrlViewerPage.tsx: Add URL validation to prevent XSS via javascript:/data: URLs
- OpenUrlViewerPage.tsx: Add sandbox attribute to iframe for security isolation
- OpenUrlViewerPage.tsx: Add error handling for invalid URLs
- StorageCleanerPage.tsx: Fix race condition in handleOptionChange preference saving
- StorageCleanerPage.tsx: Remove unnecessary storage reads when saving preferences (use state directly)
- StorageCleanerPage.tsx: Add timeout cleanup for setTimeout to follow React best practices

* feat: implement drill-down navigation with master-detail dashboard

* feat: enhance dashboard dynamism and refine options UI

* feat: overhaul storage cleaner UI with real-time size estimation and modern aesthetics

* feat: overhaul TimestampPage UI/UX and fix GlobalSnackbar positioning

* fix: decouple popup routing from storage sync and enhance OpenUrlPage UI

* fix: avoid closing sidepanel when opening URL preview from within sidepanel

* fix: enhance storage cleaner size detection and optimize UI layout

* feat: implement independent route persistence and fix standalone window tab identification

* feat(options): add card sorting functionality to dashboard tools

entrypoints/popup/pages/DashboardPage.tsx

@@ -9,7 +9,7 @@ import { useEffect, useState } from 'react';
 import dayjs from '@/utils/dayjs';
 
 export default function DashboardPage() {
-  const { navigateTo, visiblePages } = useRouter();
+  const { navigateTo, visiblePages, pageOrder } = useRouter();
   const [now, setNow] = useState(dayjs());
 
   useEffect(() => {
@@ -19,58 +19,68 @@ export default function DashboardPage() {
 
   const isVisible = (key: string) => visiblePages.includes(key as PageType);
 
+  const renderCard = (key: PageType) => {
+    switch (key) {
+      case 'timestamp':
+        return (
+          <ToolCard
+            key={key}
+            title="时间戳"
+            description="Unix 毫秒数转换与格式化"
+            colorCode="#2196f3"
+            icon={<AccessTimeIcon sx={{ fontSize: 20 }} />}
+            onClick={() => navigateTo('timestamp')}
+            snapshot={
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography
+                  sx={{
+                    fontFamily: 'monospace',
+                    fontWeight: 600,
+                    color: '#2196f3',
+                    fontSize: '0.85rem',
+                  }}
+                >
+                  {now.valueOf()}
+                </Typography>
+                <Typography sx={{ fontSize: '0.7rem', color: 'text.secondary' }}>
+                  {now.format('HH:mm:ss')}
+                </Typography>
+              </Box>
+            }
+          />
+        );
+      case 'storageCleaner':
+        return (
+          <ToolCard
+            key={key}
+            title="存储管理"
+            description="清理缓存、Cookies 及本地存储"
+            colorCode="#ff9800"
+            icon={<StorageIcon sx={{ fontSize: 20 }} />}
+            onClick={() => navigateTo('storageCleaner')}
+          />
+        );
+      case 'openUrl':
+        return (
+          <ToolCard
+            key={key}
+            title="URL 工具"
+            description="快速打开 URL 或复制链接"
+            colorCode="#9c27b0"
+            icon={<LanguageIcon sx={{ fontSize: 20 }} />}
+            onClick={() => navigateTo('openUrl')}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
   return (
     <Box sx={{ bgcolor: 'grey.50', minHeight: '100%', pb: 4 }}>
       <Container maxWidth="sm" sx={{ py: 3, px: 2 }}>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-          {isVisible('timestamp') && (
-            <ToolCard
-              title="时间戳"
-              description="Unix 毫秒数转换与格式化"
-              colorCode="#2196f3"
-              icon={<AccessTimeIcon sx={{ fontSize: 20 }} />}
-              onClick={() => navigateTo('timestamp')}
-              snapshot={
-                <Box
-                  sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
-                >
-                  <Typography
-                    sx={{
-                      fontFamily: 'monospace',
-                      fontWeight: 600,
-                      color: '#2196f3',
-                      fontSize: '0.85rem',
-                    }}
-                  >
-                    {now.valueOf()}
-                  </Typography>
-                  <Typography sx={{ fontSize: '0.7rem', color: 'text.secondary' }}>
-                    {now.format('HH:mm:ss')}
-                  </Typography>
-                </Box>
-              }
-            />
-          )}
-
-          {isVisible('storageCleaner') && (
-            <ToolCard
-              title="存储管理"
-              description="清理缓存、Cookies 及本地存储"
-              colorCode="#ff9800"
-              icon={<StorageIcon sx={{ fontSize: 20 }} />}
-              onClick={() => navigateTo('storageCleaner')}
-            />
-          )}
-
-          {isVisible('openUrl') && (
-            <ToolCard
-              title="URL 实验室"
-              description="多环境跳转与安全性预检"
-              colorCode="#9c27b0"
-              icon={<LanguageIcon sx={{ fontSize: 20 }} />}
-              onClick={() => navigateTo('openUrl')}
-            />
-          )}
+          {pageOrder.map((key) => (isVisible(key) ? renderCard(key) : null))}
         </Box>
       </Container>
     </Box>