Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Cursor Agent
|
b2db05a922 |
@@ -677,7 +677,7 @@ src/pages/StorageCleaner/useStorageCleaner.ts — 页面级 Hook
|
||||
label: '时间戳转换',
|
||||
description: '日期与时间戳互转',
|
||||
defaultVisible: true,
|
||||
component: TimestampPage,
|
||||
components: { popup: TimestampPage, sidepanel: TimestampPage, tab: TimestampPage },
|
||||
}
|
||||
```
|
||||
|
||||
@@ -763,11 +763,11 @@ const [themeMode, setThemeMode, isInitialized] = useStorageState(
|
||||
|
||||
Chrome Storage 读取是异步的。项目通过 `localStorage` 快照（键名 `snapshot/{storageKey}`）提供同步初始值，消除首屏闪烁。
|
||||
|
||||
| 模块 | 快照工具 | 防覆盖机制 |
|
||||
| ------------------- | ------------------ | ----------------------------------------------------------------------------------------- |
|
||||
| `RouterProvider` | `syncSnapshot.ts` | `canPersistRef`（加载成功后才写入）、`hasUserNavigatedRef`（用户导航后不被 storage 覆盖） |
|
||||
| `useStorageState` | `syncSnapshot.ts` | `loadSucceededRef` 或 `userModifiedRef` 为 true 时才写入 |
|
||||
| `ThemeModeProvider` | `themeSnapshot.ts` | `hasUserSetMode`（用户切换主题后不被 storage 覆盖） |
|
||||
| 模块 | 快照工具 | 防覆盖机制 |
|
||||
| ---- | -------- | ---------- |
|
||||
| `RouterProvider` | `syncSnapshot.ts` | `canPersistRef`（加载成功后才写入）、`hasUserNavigatedRef`（用户导航后不被 storage 覆盖） |
|
||||
| `useStorageState` | `syncSnapshot.ts` | `loadSucceededRef` 或 `userModifiedRef` 为 true 时才写入 |
|
||||
| `ThemeModeProvider` | `themeSnapshot.ts` | `hasUserSetMode`（用户切换主题后不被 storage 覆盖） |
|
||||
|
||||
新增持久化状态时，应遵循相同模式：同步快照作初始 state → 异步加载 storage → 加载成功或用户修改后才允许写入。
|
||||
|
||||
|
||||
+1
-1
@@ -5,7 +5,7 @@
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.js",
|
||||
"css": "src/styles/shell.css",
|
||||
"css": "src/index.css",
|
||||
"baseColor": "slate",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
|
||||
@@ -1,356 +0,0 @@
|
||||
# Popup 布局重构 — 功能导航与 Dashboard 移除
|
||||
|
||||
> 创建时间: 2026-07-05
|
||||
> 状态: 待实施
|
||||
> 关联模块: `src/entrypoints/popup/`、`src/layout/FeatureNav/`、`src/providers/RouterProvider.tsx`
|
||||
> 影响范围: 仅 popup 入口（tab / sidepanel 不在本次布局范围）
|
||||
|
||||
## 背景与目标
|
||||
|
||||
当前 popup 采用 **Dashboard 首页 + TopBar 搜索跳转** 模式：用户打开扩展后先看到仪表盘卡片网格，再点击进入具体工具。布局为固定 400×600（见 `src/entrypoints/popup/App.tsx` 与 `src/entrypoints/popup/index.html`），TopBar 在非 dashboard 页面显示「返回首页」按钮。
|
||||
|
||||
该模式增加了一步选工具操作。本次重构将 popup 改为 **工具直达 + 右侧常驻导航**，并移除 Dashboard 页面。
|
||||
|
||||
| 维度 | 现状 | 目标 |
|
||||
| ---------- | ----------------------------- | ----------------------------------------- |
|
||||
| 默认页 | `dashboard` | 新用户默认 `timestamp` |
|
||||
| 导航 | Dashboard 卡片网格 + 搜索跳转 | 右侧常驻纯图标导航栏 |
|
||||
| 首页 | Dashboard 独立页 | 移除 |
|
||||
| Popup 宽度 | 400px | 450px（内容区 ~402px + 导航栏 48px） |
|
||||
| 作用范围 | — | 仅 popup 改布局；tab / sidepanel 不加导航 |
|
||||
|
||||
---
|
||||
|
||||
## 布局设计
|
||||
|
||||
### 结构示意
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
subgraph popup ["Popup 450x600"]
|
||||
subgraph mainCol ["主列 flex-1"]
|
||||
TopBar["TopBar"]
|
||||
Content["RouterContainer"]
|
||||
TopBar --> Content
|
||||
end
|
||||
NavCol["FeatureNav 48px"]
|
||||
end
|
||||
mainCol --- NavCol
|
||||
```
|
||||
|
||||
### 尺寸约束
|
||||
|
||||
| 属性 | 值 | 说明 |
|
||||
| -------- | ------ | ---------------------------------------------- |
|
||||
| 总宽度 | 450px | `App.tsx` 容器 + `index.html` 内联样式同步修改 |
|
||||
| 总高度 | 600px | 不变 |
|
||||
| 主内容列 | flex-1 | 约 402px，需 `min-w-0` 防止 flex 子项溢出 |
|
||||
| 导航栏 | 48px | Tailwind `w-12`，固定宽度，不参与 flex 收缩 |
|
||||
|
||||
### 视觉规范
|
||||
|
||||
- 导航栏：左侧 `border-l border-border`，垂直排列图标按钮
|
||||
- 图标按钮：`h-9 w-9` 或 `h-10 w-10`，纯图标
|
||||
- Tooltip：使用原生 `title` 属性 + `aria-label={feature.label}`，不引入 Tooltip 组件
|
||||
- Active 态：背景 `bg-muted` + 左侧 `border-l-2 border-primary`
|
||||
- 导航列表超出高度时：`overflow-y-auto`（600px 高度下 9 个工具通常无需滚动）
|
||||
|
||||
---
|
||||
|
||||
## FeatureNav 组件规格
|
||||
|
||||
新建 `src/layout/FeatureNav/`，遵循 UI + Hook 分离模式（见 `.github/CODING_STANDARDS.md` §11）。
|
||||
|
||||
### 文件结构
|
||||
|
||||
```
|
||||
src/layout/FeatureNav/
|
||||
├── index.tsx # 垂直图标按钮列表、active 高亮、无障碍属性
|
||||
├── useFeatureNav.ts # 读路由状态，暴露 navItems / navigateTo / currentPage
|
||||
├── resolveNavFeatures.ts # 从 Dashboard 迁出的功能列表解析逻辑
|
||||
└── __tests__/
|
||||
├── index.test.tsx
|
||||
└── resolveNavFeatures.test.ts
|
||||
```
|
||||
|
||||
### resolveNavFeatures.ts
|
||||
|
||||
从 `src/pages/Dashboard/dashboardFeatures.ts` 迁出并重命名：
|
||||
|
||||
```typescript
|
||||
export interface NavFeatureItem {
|
||||
key: PageType;
|
||||
feature: FeatureConfig & { icon: NonNullable<FeatureConfig['icon']> };
|
||||
}
|
||||
|
||||
export function resolveNavFeatures(keys: PageType[], visiblePages: PageType[]): NavFeatureItem[];
|
||||
```
|
||||
|
||||
逻辑与旧 `resolveDashboardFeatures` 一致：
|
||||
|
||||
- 按 `keys`（即 `pageOrder`）顺序遍历
|
||||
- 跳过不在 `visiblePages` 中的项
|
||||
- 跳过无 `icon` 的 feature（dashboard 移除后不应出现）
|
||||
|
||||
### useFeatureNav.ts
|
||||
|
||||
```typescript
|
||||
export interface UseFeatureNavReturn {
|
||||
navItems: NavFeatureItem[];
|
||||
currentPage: PageType;
|
||||
navigateTo: (page: PageType) => void;
|
||||
}
|
||||
```
|
||||
|
||||
- 从 `useRouter()` 读取 `currentPage`、`pageOrder`、`visiblePages`、`navigateTo`
|
||||
- 用 `useMemo` 调用 `resolveNavFeatures(pageOrder, visiblePages)` 生成 `navItems`
|
||||
|
||||
### index.tsx
|
||||
|
||||
- 渲染 `<nav aria-label="功能导航">` 包裹垂直按钮列表
|
||||
- 每项为 `<button type="button">`，内含 Lucide 图标
|
||||
- 点击调用 `navigateTo(item.key)`
|
||||
- 当前项添加 active 样式与 `aria-current="page"`
|
||||
|
||||
### 引用范围
|
||||
|
||||
**仅** `src/entrypoints/popup/App.tsx` 引用 `FeatureNav`。sidepanel / tab 入口不引入该组件。
|
||||
|
||||
---
|
||||
|
||||
## popup/App.tsx 目标结构
|
||||
|
||||
```tsx
|
||||
import RouterProvider from '@/providers/RouterProvider';
|
||||
import TopBar from '@/layout/TopBar';
|
||||
import FeatureNav from '@/layout/FeatureNav';
|
||||
import RouterContainer from '@/components/RouterContainer';
|
||||
import ErrorBoundary from '@/components/ErrorBoundary';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<RouterProvider
|
||||
defaultRoute="timestamp"
|
||||
syncKey="app/popupRoute"
|
||||
visiblePagesKey="app/popupVisiblePages"
|
||||
pageOrderKey="app/popupPageOrder"
|
||||
>
|
||||
<div className="flex w-[450px] max-w-[450px] min-w-[450px] h-[600px] min-h-[600px] overflow-hidden bg-background">
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
<TopBar />
|
||||
<ErrorBoundary>
|
||||
<RouterContainer />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
<FeatureNav />
|
||||
</div>
|
||||
</RouterProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
`src/entrypoints/popup/index.html` 内联样式中 `width: 400px` 改为 `width: 450px`。
|
||||
|
||||
---
|
||||
|
||||
## 移除 Dashboard（全局类型变更）
|
||||
|
||||
布局仅改 popup，但 `dashboard` 从 `PageType` 移除会影响全项目类型与路由校验。
|
||||
|
||||
### 删除文件
|
||||
|
||||
| 路径 | 说明 |
|
||||
| ------------------------------------- | ---------------- |
|
||||
| `src/pages/Dashboard/` | 整目录（含测试） |
|
||||
| `src/config/pageLoaders/dashboard.ts` | Dashboard 懒加载 |
|
||||
|
||||
### 修改文件
|
||||
|
||||
| 文件 | 改动 |
|
||||
| ------------------------------------ | ----------------------------------------------------------- |
|
||||
| `src/types/storage.d.ts` | 从 `PageType` 联合类型删除 `'dashboard'` |
|
||||
| `src/config/featureMeta.ts` | 删除 dashboard 条目 |
|
||||
| `src/config/pageLoaders/index.ts` | 删除 `case 'dashboard'` |
|
||||
| `src/components/RouterContainer.tsx` | 去掉 dashboard 骨架屏分支；统一使用 `page-transition-enter` |
|
||||
| `src/components/PageSkeleton.tsx` | 删除 `variant: 'dashboard'` 及对应 UI |
|
||||
| `src/styles/shell.css` | 删除 `.page-transition-dashboard` |
|
||||
|
||||
### TopBar 精简
|
||||
|
||||
`src/layout/TopBar/index.tsx` 与 `useTopBar.ts`：
|
||||
|
||||
- 删除「返回首页」按钮（`ArrowLeft` + `goHome`）
|
||||
- 删除 `isDashboard` 状态及相关导出
|
||||
- 搜索过滤中 `f.key === 'dashboard'` 的特殊排除逻辑可删除
|
||||
|
||||
### RouterProvider 变更
|
||||
|
||||
`src/providers/RouterProvider.tsx`：
|
||||
|
||||
- 删除 `goHome()` 方法及 Context 中的 `goHome` 字段
|
||||
- 全局 `defaultRoute` 默认值由 `'dashboard'` 改为 `'timestamp'`
|
||||
- popup 显式传入 `defaultRoute="timestamp"`（与全局默认一致，便于阅读）
|
||||
|
||||
### Sidepanel 最小修复
|
||||
|
||||
`src/entrypoints/sidepanel/App.tsx` 若仍存在：
|
||||
|
||||
- `defaultRoute="dashboard"` 改为 `defaultRoute="timestamp"`
|
||||
- 不添加 FeatureNav 布局
|
||||
|
||||
---
|
||||
|
||||
## 默认路由策略（仅新用户）
|
||||
|
||||
利用现有 `RouterProvider` 机制，**无需额外迁移代码**。
|
||||
|
||||
```typescript
|
||||
// 首屏（localStorage 快照，消除闪烁）
|
||||
const [currentPage] = useState(() => getSyncSnapshot(syncKey, defaultRoute, isValidPage));
|
||||
|
||||
// 异步加载 chrome.storage
|
||||
const savedRoute = (stored[syncKey] ?? defaultRoute) as PageType;
|
||||
if (isValidPage(savedRoute) && syncRoute && !hasUserNavigatedRef.current) {
|
||||
setCurrentPage(savedRoute);
|
||||
}
|
||||
```
|
||||
|
||||
| 场景 | 行为 |
|
||||
| ------------------------------------------ | ---------------------------------------------------------------- |
|
||||
| 新用户（无 `app/popupRoute`） | 首屏 + 持久化均为 `timestamp` |
|
||||
| 老用户（如 `app/popupRoute: 'jsonTools'`） | 恢复上次路由 |
|
||||
| 老用户曾存 `dashboard` | `isValidPage('dashboard')` 为 false → 回退 `timestamp`（软迁移） |
|
||||
| 右键菜单 deep link | `?feature=&payload=` 优先级不变，高于默认路由 |
|
||||
| 用户主动切换 | `navigateTo` 后 `hasUserNavigatedRef` 阻止异步覆盖 |
|
||||
|
||||
`visiblePages` / `pageOrder` 中残留的 `dashboard` 由 `mergeWithDefaults` 自动滤除（不在新默认列表中）。
|
||||
|
||||
### 边界说明
|
||||
|
||||
`recentlyUsedTools` 若含已移除的 `dashboard` 等非法项，当前 `isValidPageList` 校验要求数组**全部**合法，失败时整表回退为 `[]`。影响：TopBar 搜索历史中的「最近使用」可能被清空。此为已知低影响边界；实现时可选优化为「过滤非法项保留合法项」，**非必须**。
|
||||
|
||||
---
|
||||
|
||||
## 实施顺序
|
||||
|
||||
```
|
||||
1. 迁出 resolveNavFeatures + 新建 FeatureNav 组件与测试
|
||||
2. 修改 popup/App.tsx 布局 + popup/index.html 宽度
|
||||
3. 全局移除 dashboard（PageType → FEATURES → pageLoader → 删页面目录）
|
||||
4. 精简 TopBar / RouterProvider / RouterContainer / PageSkeleton
|
||||
5. 批量更新测试 → npm run typecheck && npm run test && npm run lint
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 验收标准
|
||||
|
||||
### A. 布局与导航（手动）
|
||||
|
||||
| 编号 | 步骤 | 期望 |
|
||||
| ---- | ------------------------------------ | ---------------------------------------------- |
|
||||
| A-1 | 首次安装（或清空 storage）打开 popup | 默认显示时间戳页，右侧导航 timestamp 项高亮 |
|
||||
| A-2 | 依次点击各导航图标 | 切换到对应工具页，active 态跟随当前页 |
|
||||
| A-3 | hover 各导航图标 | 显示中文功能名 tooltip（`title` 属性） |
|
||||
| A-4 | 使用过某工具后关闭再打开 popup | 恢复上次路由（非 dashboard） |
|
||||
| A-5 | 检查 popup 尺寸 | 宽度 450px，高度 600px，内容区不被导航挤压溢出 |
|
||||
|
||||
### B. Dashboard 移除
|
||||
|
||||
| 编号 | 期望 |
|
||||
| ---- | -------------------------------------------------------------------- |
|
||||
| B-1 | TopBar 搜索下拉无 dashboard 项 |
|
||||
| B-2 | TopBar 无「返回首页」按钮 |
|
||||
| B-3 | `PageType`、`FEATURES`、`loadPage` 中无 dashboard |
|
||||
| B-4 | storage 中 `app/popupRoute: 'dashboard'` 时打开 popup 落到 timestamp |
|
||||
| B-5 | `visiblePages` 含 dashboard 时自动滤除，导航正常显示工具列表 |
|
||||
|
||||
### C. 单元测试
|
||||
|
||||
| 编号 | 覆盖 |
|
||||
| ---- | -------------------------------------------------------------------------- |
|
||||
| C-1 | `FeatureNav` 渲染全部可见工具图标 |
|
||||
| C-2 | `FeatureNav` 点击图标调用 `navigateTo` |
|
||||
| C-3 | `FeatureNav` 当前页对应项有 active 样式 / `aria-current` |
|
||||
| C-4 | `resolveNavFeatures` 按 pageOrder 排序、respect visiblePages |
|
||||
| C-5 | 更新 `RouterProvider` / `TopBar` / `RouterContainer` / `features` 相关测试 |
|
||||
| C-6 | 删除 `src/pages/Dashboard/__tests__/` 下全部测试 |
|
||||
|
||||
### D. CI
|
||||
|
||||
| 编号 | 标准 |
|
||||
| ---- | ------------------------ |
|
||||
| D-1 | `npm run typecheck` 通过 |
|
||||
| D-2 | `npm run test` 通过 |
|
||||
| D-3 | `npm run lint` 通过 |
|
||||
|
||||
---
|
||||
|
||||
## 不在范围
|
||||
|
||||
- tab / sidepanel 布局改造（不加 FeatureNav）
|
||||
- `visiblePages` / `pageOrder` 可视化配置 UI
|
||||
- Popup 高度变更（保持 600px）
|
||||
- 修改 `AGENTS.md` 中 spec 目录引用（实际 spec 位于 `docs/spec/`）
|
||||
|
||||
---
|
||||
|
||||
## PR 检查清单
|
||||
|
||||
```markdown
|
||||
## 功能
|
||||
|
||||
- [ ] 新建 FeatureNav 组件（index / useFeatureNav / resolveNavFeatures）
|
||||
- [ ] popup 布局改为双列（主内容 + 右侧导航）
|
||||
- [ ] popup 宽度 450px（App.tsx + index.html）
|
||||
- [ ] popup defaultRoute="timestamp"
|
||||
- [ ] 全局移除 dashboard（PageType、FEATURES、pageLoader、页面目录）
|
||||
- [ ] TopBar 移除返回按钮与 goHome 相关逻辑
|
||||
- [ ] RouterProvider 移除 goHome，defaultRoute 改为 timestamp
|
||||
- [ ] sidepanel defaultRoute 最小修复（若文件存在）
|
||||
|
||||
## 测试
|
||||
|
||||
- [ ] FeatureNav / resolveNavFeatures 单元测试
|
||||
- [ ] 更新 RouterProvider / TopBar / RouterContainer / features 测试
|
||||
- [ ] 删除 Dashboard 相关测试
|
||||
|
||||
## 验收
|
||||
|
||||
- [ ] npm run typecheck / test / lint 通过
|
||||
- [ ] 手动 A-1 ~ A-5、B-1 ~ B-4 通过
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 风险与边界说明
|
||||
|
||||
1. **Dashboard 移除为全局变更**：虽 FeatureNav 仅 popup 使用，但 `PageType` 删除 `dashboard` 会影响所有入口的类型校验与路由合法性。
|
||||
2. **老用户 dashboard 路由软迁移**：依赖 `isValidPage` 回退到 `defaultRoute`，不会 crash，但用户会察觉「首页消失、默认变为时间戳」——符合预期。
|
||||
3. **450px 宽度**：Chrome popup 允许扩展较默认更宽；若未来 Firefox 有差异需在 Firefox 构建中手动验证。
|
||||
4. **recentlyUsedTools 整表校验**：见「默认路由策略 → 边界说明」，可选后续优化。
|
||||
|
||||
---
|
||||
|
||||
## 相关文件索引
|
||||
|
||||
| 文件 | 说明 |
|
||||
| ------------------------------------- | ------------------------------- |
|
||||
| `src/entrypoints/popup/App.tsx` | popup 布局入口，引用 FeatureNav |
|
||||
| `src/entrypoints/popup/index.html` | popup 初始尺寸 450px |
|
||||
| `src/layout/FeatureNav/` | 新建：右侧图标导航 |
|
||||
| `src/layout/TopBar/` | 精简：移除返回按钮 |
|
||||
| `src/providers/RouterProvider.tsx` | 默认路由、移除 goHome |
|
||||
| `src/config/featureMeta.ts` | FEATURES 定义，删除 dashboard |
|
||||
| `src/types/storage.d.ts` | PageType 定义 |
|
||||
| `src/config/pageLoaders/index.ts` | 页面懒加载路由 |
|
||||
| `src/components/RouterContainer.tsx` | 页面渲染容器 |
|
||||
| `src/components/PageSkeleton.tsx` | 加载骨架屏 |
|
||||
| `src/styles/shell.css` | 页面过渡动画 |
|
||||
| `src/pages/Dashboard/` | **删除** |
|
||||
| `src/config/pageLoaders/dashboard.ts` | **删除** |
|
||||
| `src/entrypoints/sidepanel/App.tsx` | 最小修复 defaultRoute |
|
||||
|
||||
---
|
||||
|
||||
> **注**：项目 spec 文档实际目录为 `docs/spec/`。`AGENTS.md` 中引用的根目录 `spec/README.md` 尚未建立，以本目录 [`README.md`](../README.md) 为索引。
|
||||
@@ -5,4 +5,3 @@
|
||||
| 文档 | 状态 | 说明 |
|
||||
| -------------------------------------------------------------------------------- | ----------------- | ---------------------------------------------------- |
|
||||
| [storage-cleaner/indexeddb-fix-plan.md](./storage-cleaner/indexeddb-fix-plan.md) | ✅ Phase 3 已完成 | Storage Cleaner IndexedDB 清理逻辑修复方案与验收标准 |
|
||||
| [popup-layout/feature-nav-layout.md](./popup-layout/feature-nav-layout.md) | 待实施 | Popup 右侧图标导航、移除 Dashboard、默认 timestamp |
|
||||
@@ -57,7 +57,11 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
|
||||
className={cn(className, copied && 'text-emerald-500')}
|
||||
{...props}
|
||||
>
|
||||
{copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
|
||||
{copied ? (
|
||||
<Check className="h-[1.2em] w-[1.2em]" />
|
||||
) : (
|
||||
<Copy className="h-[1.2em] w-[1.2em]" />
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -30,7 +30,9 @@ export function ErrorFallback({
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col items-center justify-center',
|
||||
isApp ? 'mt-16 mx-auto max-w-md' : 'flex-1 p-6 min-h-[300px] fade-in-zoom-95',
|
||||
isApp
|
||||
? 'mt-16 mx-auto max-w-md'
|
||||
: 'flex-1 p-6 min-h-[300px] animate-in fade-in zoom-in-95 duration-200',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
@@ -55,11 +57,7 @@ export function ErrorFallback({
|
||||
<h3 className="text-base font-semibold text-foreground mb-1.5">{title}</h3>
|
||||
)}
|
||||
|
||||
<p
|
||||
className={
|
||||
isApp ? 'text-sm text-muted-foreground mb-6' : 'text-xs text-muted-foreground mb-5'
|
||||
}
|
||||
>
|
||||
<p className={cn('text-muted-foreground', isApp ? 'text-sm mb-6' : 'text-xs mb-5')}>
|
||||
{description}
|
||||
</p>
|
||||
|
||||
@@ -85,7 +83,7 @@ export function ErrorFallback({
|
||||
variant="destructive"
|
||||
size={isApp ? 'default' : 'sm'}
|
||||
onClick={onAction}
|
||||
className={isApp ? 'rounded-lg font-bold shadow-sm' : 'font-medium shadow-sm'}
|
||||
className={cn(isApp ? 'rounded-lg font-bold shadow-sm' : 'font-medium shadow-sm')}
|
||||
>
|
||||
<RefreshCw className={isApp ? 'mr-2 h-4 w-4' : 'mr-1.5 h-3.5 w-3.5'} />
|
||||
{actionLabel}
|
||||
|
||||
@@ -4,6 +4,30 @@
|
||||
* 用于 Suspense fallback 和初始加载状态，提供平滑的视觉过渡
|
||||
* 避免白屏闪烁，减少布局偏移
|
||||
*/
|
||||
interface PageSkeletonProps {
|
||||
/** 骨架屏类型 */
|
||||
variant?: 'dashboard' | 'tool';
|
||||
}
|
||||
|
||||
/**
|
||||
* 仪表盘卡片骨架屏
|
||||
*/
|
||||
function DashboardCardSkeleton() {
|
||||
return (
|
||||
<div className="rounded-xl border border-border p-5 h-[100px]">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex gap-3 items-center">
|
||||
<div className="w-10 h-10 rounded-lg bg-muted animate-pulse" />
|
||||
<div>
|
||||
<div className="w-24 h-5 bg-muted rounded animate-pulse" />
|
||||
<div className="w-32 h-3.5 bg-muted rounded animate-pulse mt-1.5" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-3 h-3 rounded-full bg-muted animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 工具页面骨架屏
|
||||
@@ -22,7 +46,7 @@ function ToolPageSkeleton() {
|
||||
<div className="w-24 h-9 bg-muted rounded-lg animate-pulse" />
|
||||
<div className="w-20 h-9 bg-muted rounded-lg animate-pulse" />
|
||||
<div className="flex-1" />
|
||||
<div className="w-24 h-9 bg-muted rounded-lg animate-pulse" />
|
||||
<div className="w-22 h-9 bg-muted rounded-lg animate-pulse" />
|
||||
</div>
|
||||
|
||||
{/* 结果区域 */}
|
||||
@@ -33,9 +57,22 @@ function ToolPageSkeleton() {
|
||||
|
||||
/**
|
||||
* 页面加载骨架屏
|
||||
*
|
||||
* @param props - PageSkeletonProps
|
||||
* @returns 骨架屏 JSX 元素
|
||||
*/
|
||||
export default function PageSkeleton() {
|
||||
return <ToolPageSkeleton />;
|
||||
export default function PageSkeleton({ variant = 'dashboard' }: PageSkeletonProps) {
|
||||
if (variant === 'tool') {
|
||||
return <ToolPageSkeleton />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(300px,1fr))] auto-rows-fr gap-4 p-4">
|
||||
{Array.from({ length: 6 }).map((_, index) => (
|
||||
<DashboardCardSkeleton key={index} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
PageSkeleton.displayName = 'PageSkeleton';
|
||||
|
||||
@@ -1,69 +1,54 @@
|
||||
import { getFeatureByKey } from '@/config/features';
|
||||
import { loadPage } from '@/config/pageLoaders/index';
|
||||
import { FEATURES, getEntryPointType } from '@/config/features';
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import type { PageType } from '@/types/storage';
|
||||
import { type ComponentType, useEffect, useState } from 'react';
|
||||
import { Suspense } from 'react';
|
||||
import PageErrorBoundary from '@/components/PageErrorBoundary';
|
||||
import PageSkeleton from '@/components/PageSkeleton';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { AlertTriangle } from 'lucide-react';
|
||||
|
||||
function LoadedPage({ pageKey }: { pageKey: PageType }) {
|
||||
const [Page, setPage] = useState<ComponentType | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
loadPage(pageKey)
|
||||
.then((mod) => {
|
||||
if (!cancelled) {
|
||||
setPage(() => mod.default);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('[Router Page Load Error]', err);
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [pageKey]);
|
||||
|
||||
if (!Page) {
|
||||
return <PageSkeleton />;
|
||||
}
|
||||
|
||||
return <Page />;
|
||||
}
|
||||
const entryPointType = getEntryPointType();
|
||||
|
||||
export default function RouterContainer() {
|
||||
const { currentPage } = useRouter();
|
||||
const { currentPage, isLoaded } = useRouter();
|
||||
|
||||
const currentFeature = getFeatureByKey(currentPage);
|
||||
const animationClass =
|
||||
currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
|
||||
|
||||
if (!isLoaded) {
|
||||
return <PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />;
|
||||
}
|
||||
|
||||
const currentFeature = FEATURES.find((f) => f.key === currentPage);
|
||||
const MatchedComponent = currentFeature?.components?.[entryPointType];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={currentPage}
|
||||
className={cn(
|
||||
'flex-1 flex flex-col overflow-x-hidden overflow-y-auto',
|
||||
'motion-reduce:transition-none page-transition-enter',
|
||||
'scrollbar-gutter-stable motion-reduce:transition-none',
|
||||
animationClass,
|
||||
)}
|
||||
>
|
||||
<PageErrorBoundary resetKey={currentPage}>
|
||||
{currentFeature ? (
|
||||
<LoadedPage key={currentPage} pageKey={currentPage} />
|
||||
) : (
|
||||
<div className="flex-1 flex flex-col items-center justify-center p-8 text-center fade-in-300">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-destructive/10 text-destructive mb-4">
|
||||
<AlertTriangle className="h-6 w-6" />
|
||||
<Suspense
|
||||
fallback={<PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />}
|
||||
>
|
||||
<PageErrorBoundary resetKey={currentPage}>
|
||||
{MatchedComponent ? (
|
||||
<MatchedComponent />
|
||||
) : (
|
||||
<div className="flex-1 flex flex-col items-center justify-center p-8 text-center animate-in fade-in duration-300">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-destructive/10 text-destructive mb-4">
|
||||
<AlertTriangle className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-sm font-semibold text-foreground">页面未找到</h3>
|
||||
<p className="text-xs text-muted-foreground mt-1 max-w-[240px]">
|
||||
{`该功能在当前运行环境（${entryPointType}）下不可用或已被移除。`}
|
||||
</p>
|
||||
</div>
|
||||
<h3 className="text-sm font-semibold text-foreground">页面未找到</h3>
|
||||
<p className="text-xs text-muted-foreground mt-1 max-w-[240px]">
|
||||
该功能不存在或已被移除。
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</PageErrorBoundary>
|
||||
)}
|
||||
</PageErrorBoundary>
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -24,7 +24,8 @@ const SIZE_CLASSES = {
|
||||
large: 'text-base h-11 px-4 py-2 rounded-lg',
|
||||
} as const;
|
||||
|
||||
const SELECTED_CLASSES = 'bg-background text-foreground shadow-sm font-semibold fade-in-zoom-95';
|
||||
const SELECTED_CLASSES =
|
||||
'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150';
|
||||
const UNSELECTED_CLASSES = 'hover:bg-background/50 hover:text-foreground/80';
|
||||
|
||||
export default function SwitchButtonGroup<T extends string | number = string>({
|
||||
|
||||
@@ -267,13 +267,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
||||
|
||||
<div className="flex items-center gap-1.5 ml-auto shrink-0">
|
||||
{allowCopy && value && (
|
||||
<CopyButton
|
||||
text={value}
|
||||
tooltip="复制内容"
|
||||
variant="ghost"
|
||||
size="iconSm"
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
/>
|
||||
<CopyButton text={value} tooltip="复制内容" size="sm" className="h-7 w-7 p-1" />
|
||||
)}
|
||||
{showClear && value && !disabled && !readOnly && (
|
||||
<Button
|
||||
@@ -281,8 +275,8 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
||||
onClick={handleClear}
|
||||
aria-label="清空"
|
||||
variant="ghost"
|
||||
size="iconSm"
|
||||
className="text-muted-foreground hover:text-destructive hover:bg-destructive/10"
|
||||
size="icon"
|
||||
className="h-7 w-7 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
@@ -293,7 +287,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
||||
</div>
|
||||
|
||||
{displayError && (
|
||||
<p className="text-xs font-medium text-destructive px-0.5 fade-in-slide-top-1">
|
||||
<p className="text-xs font-medium text-destructive px-0.5 animate-in fade-in slide-in-from-top-1 duration-150">
|
||||
{displayError}
|
||||
</p>
|
||||
)}
|
||||
|
||||
@@ -4,17 +4,41 @@ import PageSkeleton from '@/components/PageSkeleton';
|
||||
|
||||
describe('PageSkeleton 组件', () => {
|
||||
describe('渲染测试', () => {
|
||||
it('应渲染工具页面骨架', () => {
|
||||
it('默认应渲染 dashboard 骨架屏', () => {
|
||||
const { container } = render(<PageSkeleton />);
|
||||
|
||||
// dashboard 骨架屏包含 6 个卡片
|
||||
const cards = container.querySelectorAll('.rounded-xl');
|
||||
expect(cards.length).toBe(6);
|
||||
});
|
||||
|
||||
it('variant 为 dashboard 时应渲染仪表盘卡片骨架', () => {
|
||||
const { container } = render(<PageSkeleton variant="dashboard" />);
|
||||
|
||||
// 每个卡片有 2 个骨架元素（图标、文本），6 个卡片共 12 个
|
||||
const cards = container.querySelectorAll('.rounded-xl');
|
||||
expect(cards.length).toBe(6);
|
||||
});
|
||||
|
||||
it('variant 为 tool 时应渲染工具页面骨架', () => {
|
||||
const { container } = render(<PageSkeleton variant="tool" />);
|
||||
|
||||
// tool 骨架屏包含标题、输入区、控制栏 3 个按钮、结果区
|
||||
const skeletons = container.querySelectorAll('.animate-pulse');
|
||||
expect(skeletons.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('布局结构测试', () => {
|
||||
it('工具骨架屏应有内边距', () => {
|
||||
const { container } = render(<PageSkeleton />);
|
||||
it('dashboard 骨架屏应使用 grid 布局', () => {
|
||||
const { container } = render(<PageSkeleton variant="dashboard" />);
|
||||
const gridContainer = container.firstChild as HTMLElement;
|
||||
|
||||
expect(gridContainer).toHaveClass('grid');
|
||||
});
|
||||
|
||||
it('tool 骨架屏应有内边距', () => {
|
||||
const { container } = render(<PageSkeleton variant="tool" />);
|
||||
const toolContainer = container.firstChild as HTMLElement;
|
||||
|
||||
expect(toolContainer).toHaveClass('p-5');
|
||||
@@ -22,8 +46,16 @@ describe('PageSkeleton 组件', () => {
|
||||
});
|
||||
|
||||
describe('骨架屏元素测试', () => {
|
||||
it('工具骨架屏应包含动画脉冲效果', () => {
|
||||
const { container } = render(<PageSkeleton />);
|
||||
it('dashboard 骨架屏应包含圆角和边框样式', () => {
|
||||
const { container } = render(<PageSkeleton variant="dashboard" />);
|
||||
|
||||
// 获取第一个卡片容器
|
||||
const card = container.querySelector('.rounded-xl.border');
|
||||
expect(card).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('tool 骨架屏应包含动画脉冲效果', () => {
|
||||
const { container } = render(<PageSkeleton variant="tool" />);
|
||||
|
||||
const skeletons = container.querySelectorAll('.animate-pulse');
|
||||
expect(skeletons.length).toBeGreaterThan(0);
|
||||
|
||||
@@ -6,14 +6,15 @@ import type { PageType } from '@/types/storage';
|
||||
import React from 'react';
|
||||
|
||||
const mockRouterValue = {
|
||||
currentPage: 'timestamp' as PageType,
|
||||
visiblePages: ['timestamp', 'jwt'] as PageType[],
|
||||
currentPage: 'dashboard' as PageType,
|
||||
visiblePages: ['dashboard', 'timestamp'] as PageType[],
|
||||
pageOrder: ['timestamp'] as PageType[],
|
||||
isLoaded: true,
|
||||
navigateTo: vi.fn(),
|
||||
syncNavigation: vi.fn(),
|
||||
goHome: vi.fn(),
|
||||
setVisiblePages: vi.fn(),
|
||||
setPageOrder: vi.fn(),
|
||||
recentlyUsedTools: [] as PageType[],
|
||||
isLoaded: true,
|
||||
};
|
||||
|
||||
vi.mock('@/providers/RouterProvider', () => ({
|
||||
@@ -31,15 +32,31 @@ describe('RouterContainer 组件', () => {
|
||||
};
|
||||
|
||||
describe('渲染测试', () => {
|
||||
it('mount 后应直接渲染页面结构（不等待 storage 加载）', () => {
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
it('isLoaded 为 false 时应渲染骨架屏', () => {
|
||||
mockRouterValue.isLoaded = false;
|
||||
const { container } = renderWithProvider(<RouterContainer />);
|
||||
expect(container.querySelector('.page-transition-enter')).toBeInTheDocument();
|
||||
// 骨架屏使用 animate-pulse 类
|
||||
const skeletons = container.querySelectorAll('.animate-pulse');
|
||||
expect(skeletons.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('isLoaded 为 true 时应渲染页面内容', () => {
|
||||
mockRouterValue.isLoaded = true;
|
||||
mockRouterValue.currentPage = 'dashboard';
|
||||
const { container } = renderWithProvider(<RouterContainer />);
|
||||
expect(container.querySelector('.page-transition-dashboard')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('动画类测试', () => {
|
||||
it('应应用 enter 动画类', () => {
|
||||
it('在 dashboard 页面应应用 dashboard 动画类', () => {
|
||||
mockRouterValue.currentPage = 'dashboard';
|
||||
renderWithProvider(<RouterContainer />);
|
||||
const box = document.querySelector('.page-transition-dashboard');
|
||||
expect(box).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('在非 dashboard 页面应应用 enter 动画类', () => {
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
renderWithProvider(<RouterContainer />);
|
||||
const box = document.querySelector('.page-transition-enter');
|
||||
@@ -51,7 +68,7 @@ describe('RouterContainer 组件', () => {
|
||||
it('currentPage 变化时应更新', () => {
|
||||
const { rerender } = renderWithProvider(<RouterContainer />);
|
||||
|
||||
mockRouterValue.currentPage = 'jwt';
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
rerender(<RouterProvider>{<RouterContainer />}</RouterProvider>);
|
||||
|
||||
const box = document.querySelector('.page-transition-enter');
|
||||
@@ -60,11 +77,13 @@ describe('RouterContainer 组件', () => {
|
||||
});
|
||||
|
||||
describe('页面级错误隔离', () => {
|
||||
it('PageErrorBoundary 应包裹页面内容', () => {
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
it('PageErrorBoundary 应包裹在 Suspense 内层', () => {
|
||||
mockRouterValue.isLoaded = true;
|
||||
mockRouterValue.currentPage = 'dashboard';
|
||||
const { container } = renderWithProvider(<RouterContainer />);
|
||||
|
||||
const routerBox = container.querySelector('.page-transition-enter');
|
||||
// 验证 RouterContainer 的 Box 结构存在
|
||||
const routerBox = container.querySelector('.page-transition-dashboard');
|
||||
expect(routerBox).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -21,7 +21,6 @@ const buttonVariants = cva(
|
||||
sm: 'h-9 rounded-md px-3',
|
||||
lg: 'h-11 rounded-md px-8',
|
||||
icon: 'h-10 w-10',
|
||||
iconSm: 'h-7 w-7',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@@ -16,7 +16,7 @@ const Checkbox = React.forwardRef<
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator className="grid place-content-center text-current">
|
||||
<CheckboxPrimitive.Indicator className={cn('grid place-content-center text-current')}>
|
||||
<Check className="h-4 w-4" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
|
||||
@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'fixed inset-0 z-50 bg-black/80 dark:bg-black/60 transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100',
|
||||
'fixed inset-0 z-50 bg-black/80 dark:bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -41,7 +41,7 @@ const DialogContent = React.forwardRef<
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white dark:bg-gray-900 p-6 shadow-lg transition-all duration-200 data-[state=closed]:scale-95 data-[state=open]:scale-100 data-[state=closed]:opacity-0 data-[state=open]:opacity-100 sm:rounded-lg',
|
||||
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white dark:bg-gray-900 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -65,7 +65,7 @@ const SelectContent = React.forwardRef<
|
||||
<SelectPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md transition-all duration-200 data-[state=closed]:scale-95 data-[state=open]:scale-100 data-[state=closed]:opacity-0 data-[state=open]:opacity-100',
|
||||
'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||
position === 'popper' &&
|
||||
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
|
||||
className,
|
||||
|
||||
@@ -4,6 +4,10 @@ const pageLoadTracker = vi.hoisted(() => ({
|
||||
loaded: [] as string[],
|
||||
}));
|
||||
|
||||
vi.mock('@/pages/Dashboard', () => {
|
||||
pageLoadTracker.loaded.push('Dashboard');
|
||||
return { default: () => null };
|
||||
});
|
||||
vi.mock('@/pages/Timestamp', () => {
|
||||
pageLoadTracker.loaded.push('Timestamp');
|
||||
return { default: () => null };
|
||||
@@ -59,25 +63,23 @@ describe('features 懒加载', () => {
|
||||
it('访问 FEATURES 元数据时不应加载任何页面模块', async () => {
|
||||
const { FEATURES } = await import('@/config/features');
|
||||
|
||||
expect(FEATURES).toHaveLength(9);
|
||||
expect(FEATURES).toHaveLength(10);
|
||||
expect(pageLoadTracker.loaded).toEqual([]);
|
||||
});
|
||||
|
||||
it('loadPage 应仅加载对应页面模块', async () => {
|
||||
const { loadPage } = await import('@/config/pageLoaders/index');
|
||||
it('渲染 lazy 组件时才应加载对应页面模块', async () => {
|
||||
const React = await import('react');
|
||||
const { render, waitFor } = await import('@testing-library/react');
|
||||
const { FEATURES } = await import('@/config/features');
|
||||
|
||||
await loadPage('timestamp');
|
||||
const DashboardPage = FEATURES.find((f) => f.key === 'dashboard')!.components.popup;
|
||||
|
||||
expect(pageLoadTracker.loaded).toEqual(['Timestamp']);
|
||||
});
|
||||
render(
|
||||
React.createElement(React.Suspense, { fallback: null }, React.createElement(DashboardPage)),
|
||||
);
|
||||
|
||||
it('loadPage 切换页面时不应加载无关页面模块', async () => {
|
||||
const { loadPage } = await import('@/config/pageLoaders/index');
|
||||
|
||||
await loadPage('jwt');
|
||||
|
||||
expect(pageLoadTracker.loaded).toEqual(['Jwt']);
|
||||
expect(pageLoadTracker.loaded).not.toContain('QrCode');
|
||||
expect(pageLoadTracker.loaded).not.toContain('TestDataGenerator');
|
||||
await waitFor(() => {
|
||||
expect(pageLoadTracker.loaded).toEqual(['Dashboard']);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -9,8 +9,8 @@ import {
|
||||
|
||||
describe('features', () => {
|
||||
describe('FEATURES', () => {
|
||||
it('应该有9个功能定义', () => {
|
||||
expect(FEATURES).toHaveLength(9);
|
||||
it('应该有10个功能定义', () => {
|
||||
expect(FEATURES).toHaveLength(10);
|
||||
});
|
||||
|
||||
it('应该有每个功能的所有必需属性', () => {
|
||||
@@ -19,14 +19,21 @@ describe('features', () => {
|
||||
expect(feature).toHaveProperty('label');
|
||||
expect(feature).toHaveProperty('description');
|
||||
expect(feature).toHaveProperty('defaultVisible');
|
||||
expect(feature).not.toHaveProperty('component');
|
||||
expect(feature).toHaveProperty('components');
|
||||
expect(typeof feature.key).toBe('string');
|
||||
expect(typeof feature.label).toBe('string');
|
||||
expect(typeof feature.description).toBe('string');
|
||||
expect(typeof feature.defaultVisible).toBe('boolean');
|
||||
expect(feature).toHaveProperty('icon');
|
||||
expect(feature).toHaveProperty('themeColorKey');
|
||||
expect(typeof feature.themeColorKey).toBe('string');
|
||||
expect(typeof feature.components).toBe('object');
|
||||
expect(feature.components).toHaveProperty('popup');
|
||||
expect(feature.components).toHaveProperty('sidepanel');
|
||||
expect(feature.components).toHaveProperty('tab');
|
||||
|
||||
if (feature.key !== 'dashboard') {
|
||||
expect(feature).toHaveProperty('icon');
|
||||
expect(feature).toHaveProperty('themeColorKey');
|
||||
expect(typeof feature.themeColorKey).toBe('string');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -38,6 +45,13 @@ describe('features', () => {
|
||||
});
|
||||
|
||||
describe('getFeatureByKey', () => {
|
||||
it('应该返回dashboard功能', () => {
|
||||
const feature = getFeatureByKey('dashboard');
|
||||
expect(feature).toBeDefined();
|
||||
expect(feature?.key).toBe('dashboard');
|
||||
expect(feature?.label).toBe('仪表盘');
|
||||
});
|
||||
|
||||
it('应该返回时间戳功能', () => {
|
||||
const feature = getFeatureByKey('timestamp');
|
||||
expect(feature).toBeDefined();
|
||||
@@ -68,8 +82,9 @@ describe('features', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('应该包含时间戳、存储清理、二维码', () => {
|
||||
it('应该包含仪表盘、时间戳、存储清理、二维码', () => {
|
||||
const visibleKeys = getDefaultVisibleFeatureKeys();
|
||||
expect(visibleKeys).toContain('dashboard');
|
||||
expect(visibleKeys).toContain('timestamp');
|
||||
expect(visibleKeys).toContain('storageCleaner');
|
||||
expect(visibleKeys).toContain('qrCode');
|
||||
@@ -79,7 +94,8 @@ describe('features', () => {
|
||||
describe('getAllFeatureKeys', () => {
|
||||
it('应该返回所有功能key', () => {
|
||||
const allKeys = getAllFeatureKeys();
|
||||
expect(allKeys).toHaveLength(9);
|
||||
expect(allKeys).toHaveLength(10);
|
||||
expect(allKeys).toContain('dashboard');
|
||||
expect(allKeys).toContain('timestamp');
|
||||
expect(allKeys).toContain('storageCleaner');
|
||||
expect(allKeys).toContain('qrCode');
|
||||
@@ -93,9 +109,9 @@ describe('features', () => {
|
||||
});
|
||||
|
||||
describe('getDefaultPageOrder', () => {
|
||||
it('应该包含所有工具页面', () => {
|
||||
it('应该排除仪表盘从页面顺序', () => {
|
||||
const pageOrder = getDefaultPageOrder();
|
||||
expect(pageOrder).toHaveLength(9);
|
||||
expect(pageOrder).not.toContain('dashboard');
|
||||
});
|
||||
|
||||
it('应该包含时间戳、存储清理、二维码在页面顺序', () => {
|
||||
@@ -104,5 +120,10 @@ describe('features', () => {
|
||||
expect(pageOrder).toContain('storageCleaner');
|
||||
expect(pageOrder).toContain('qrCode');
|
||||
});
|
||||
|
||||
it('应该有9个项目在页面顺序', () => {
|
||||
const pageOrder = getDefaultPageOrder();
|
||||
expect(pageOrder).toHaveLength(9);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
export type { FeatureConfig, PaletteColorKey } from '@/config/featureMeta';
|
||||
export {
|
||||
FEATURES,
|
||||
getAllFeatureKeys,
|
||||
getDefaultPageOrder,
|
||||
getDefaultVisibleFeatureKeys,
|
||||
getFeatureByKey,
|
||||
} from '@/config/featureMeta';
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { ComponentType } from 'react';
|
||||
import { type ComponentType, lazy } from 'react';
|
||||
import type { LucideProps } from 'lucide-react';
|
||||
import type { PageType } from '@/types/storage';
|
||||
import {
|
||||
@@ -15,6 +15,18 @@ import {
|
||||
|
||||
export type PaletteColorKey = 'primary' | 'success' | 'warning' | 'error' | 'secondary' | 'info';
|
||||
|
||||
// 懒加载页面组件
|
||||
const DashboardPage = lazy(() => import('@/pages/Dashboard'));
|
||||
const TimestampPage = lazy(() => import('@/pages/Timestamp'));
|
||||
const StorageCleanerPage = lazy(() => import('@/pages/StorageCleaner'));
|
||||
const QrCodePage = lazy(() => import('@/pages/QrCode'));
|
||||
const TextStatisticsPage = lazy(() => import('@/pages/TextStatistics'));
|
||||
const JwtPage = lazy(() => import('@/pages/Jwt'));
|
||||
const JsonToolsPage = lazy(() => import('@/pages/JsonTools'));
|
||||
const Base64ConverterPage = lazy(() => import('@/pages/Base64Converter'));
|
||||
const RightClickRestorerPage = lazy(() => import('@/pages/RightClickRestorer'));
|
||||
const TestDataGeneratorPage = lazy(() => import('@/pages/TestDataGenerator'));
|
||||
|
||||
export interface FeatureConfig {
|
||||
key: PageType;
|
||||
label: string;
|
||||
@@ -22,9 +34,25 @@ export interface FeatureConfig {
|
||||
themeColorKey?: PaletteColorKey;
|
||||
icon?: ComponentType<LucideProps>;
|
||||
defaultVisible: boolean;
|
||||
components: {
|
||||
popup: ComponentType;
|
||||
sidepanel: ComponentType;
|
||||
tab: ComponentType;
|
||||
};
|
||||
}
|
||||
|
||||
export const FEATURES: FeatureConfig[] = [
|
||||
{
|
||||
key: 'dashboard',
|
||||
label: '仪表盘',
|
||||
description: '',
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: DashboardPage,
|
||||
sidepanel: DashboardPage,
|
||||
tab: DashboardPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'timestamp',
|
||||
label: '时间戳',
|
||||
@@ -32,6 +60,11 @@ export const FEATURES: FeatureConfig[] = [
|
||||
themeColorKey: 'primary',
|
||||
icon: Clock,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: TimestampPage,
|
||||
sidepanel: TimestampPage,
|
||||
tab: TimestampPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'storageCleaner',
|
||||
@@ -40,6 +73,11 @@ export const FEATURES: FeatureConfig[] = [
|
||||
themeColorKey: 'warning',
|
||||
icon: Database,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: StorageCleanerPage,
|
||||
sidepanel: StorageCleanerPage,
|
||||
tab: StorageCleanerPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'qrCode',
|
||||
@@ -48,6 +86,11 @@ export const FEATURES: FeatureConfig[] = [
|
||||
themeColorKey: 'success',
|
||||
icon: QrCode,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: QrCodePage,
|
||||
sidepanel: QrCodePage,
|
||||
tab: QrCodePage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'textStatistics',
|
||||
@@ -56,6 +99,11 @@ export const FEATURES: FeatureConfig[] = [
|
||||
themeColorKey: 'secondary',
|
||||
icon: FileText,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: TextStatisticsPage,
|
||||
sidepanel: TextStatisticsPage,
|
||||
tab: TextStatisticsPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'jwt',
|
||||
@@ -64,6 +112,11 @@ export const FEATURES: FeatureConfig[] = [
|
||||
themeColorKey: 'info',
|
||||
icon: Key,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: JwtPage,
|
||||
sidepanel: JwtPage,
|
||||
tab: JwtPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'jsonTools',
|
||||
@@ -72,6 +125,11 @@ export const FEATURES: FeatureConfig[] = [
|
||||
themeColorKey: 'primary',
|
||||
icon: GitCompareArrows,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: JsonToolsPage,
|
||||
sidepanel: JsonToolsPage,
|
||||
tab: JsonToolsPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'base64Converter',
|
||||
@@ -80,6 +138,11 @@ export const FEATURES: FeatureConfig[] = [
|
||||
themeColorKey: 'info',
|
||||
icon: ArrowLeftRight,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: Base64ConverterPage,
|
||||
sidepanel: Base64ConverterPage,
|
||||
tab: Base64ConverterPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'rightClickRestorer',
|
||||
@@ -88,6 +151,11 @@ export const FEATURES: FeatureConfig[] = [
|
||||
themeColorKey: 'success',
|
||||
icon: MousePointerClick,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: RightClickRestorerPage,
|
||||
sidepanel: RightClickRestorerPage,
|
||||
tab: RightClickRestorerPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'testDataGenerator',
|
||||
@@ -96,6 +164,11 @@ export const FEATURES: FeatureConfig[] = [
|
||||
themeColorKey: 'warning',
|
||||
icon: FileSpreadsheet,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: TestDataGeneratorPage,
|
||||
sidepanel: TestDataGeneratorPage,
|
||||
tab: TestDataGeneratorPage,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
@@ -112,5 +185,16 @@ export function getAllFeatureKeys(): PageType[] {
|
||||
}
|
||||
|
||||
export function getDefaultPageOrder(): PageType[] {
|
||||
return FEATURES.map((f) => f.key);
|
||||
return FEATURES.filter((f) => f.key !== 'dashboard').map((f) => f.key);
|
||||
}
|
||||
|
||||
export function getEntryPointType(): 'popup' | 'sidepanel' | 'tab' {
|
||||
const pathname = window.location.pathname;
|
||||
if (pathname.includes('sidepanel')) {
|
||||
return 'sidepanel';
|
||||
}
|
||||
if (new URLSearchParams(window.location.search).get('mode') === 'tab') {
|
||||
return 'tab';
|
||||
}
|
||||
return 'popup';
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import type { ComponentType } from 'react';
|
||||
|
||||
export default function loadBase64Converter(): Promise<{ default: ComponentType }> {
|
||||
return import('@/pages/Base64Converter');
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
import type { ComponentType } from 'react';
|
||||
import type { PageType } from '@/types/storage';
|
||||
|
||||
type PageModule = { default: ComponentType };
|
||||
|
||||
let pagesStylesLoaded = false;
|
||||
|
||||
function ensurePagesStyles(): Promise<unknown> {
|
||||
if (pagesStylesLoaded) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
pagesStylesLoaded = true;
|
||||
return import('@/styles/pages.css');
|
||||
}
|
||||
|
||||
export function loadPage(key: PageType): Promise<PageModule> {
|
||||
return ensurePagesStyles().then(() => {
|
||||
switch (key) {
|
||||
case 'timestamp':
|
||||
return import('@/config/pageLoaders/timestamp').then((m) => m.default());
|
||||
case 'storageCleaner':
|
||||
return import('@/config/pageLoaders/storageCleaner').then((m) => m.default());
|
||||
case 'qrCode':
|
||||
return import('@/config/pageLoaders/qrCode').then((m) => m.default());
|
||||
case 'textStatistics':
|
||||
return import('@/config/pageLoaders/textStatistics').then((m) => m.default());
|
||||
case 'jwt':
|
||||
return import('@/config/pageLoaders/jwt').then((m) => m.default());
|
||||
case 'jsonTools':
|
||||
return import('@/config/pageLoaders/jsonTools').then((m) => m.default());
|
||||
case 'base64Converter':
|
||||
return import('@/config/pageLoaders/base64Converter').then((m) => m.default());
|
||||
case 'rightClickRestorer':
|
||||
return import('@/config/pageLoaders/rightClickRestorer').then((m) => m.default());
|
||||
case 'testDataGenerator':
|
||||
return import('@/config/pageLoaders/testDataGenerator').then((m) => m.default());
|
||||
default: {
|
||||
const _exhaustive: never = key;
|
||||
return Promise.reject(new Error(`Unknown page: ${String(_exhaustive)}`));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import type { ComponentType } from 'react';
|
||||
|
||||
export default function loadJsonTools(): Promise<{ default: ComponentType }> {
|
||||
return import('@/pages/JsonTools');
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import type { ComponentType } from 'react';
|
||||
|
||||
export default function loadJwt(): Promise<{ default: ComponentType }> {
|
||||
return import('@/pages/Jwt');
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import type { ComponentType } from 'react';
|
||||
|
||||
export default function loadQrCode(): Promise<{ default: ComponentType }> {
|
||||
return import('@/pages/QrCode');
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import type { ComponentType } from 'react';
|
||||
|
||||
export default function loadRightClickRestorer(): Promise<{ default: ComponentType }> {
|
||||
return import('@/pages/RightClickRestorer');
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import type { ComponentType } from 'react';
|
||||
|
||||
export default function loadStorageCleaner(): Promise<{ default: ComponentType }> {
|
||||
return import('@/pages/StorageCleaner');
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import type { ComponentType } from 'react';
|
||||
|
||||
export default function loadTestDataGenerator(): Promise<{ default: ComponentType }> {
|
||||
return import('@/pages/TestDataGenerator');
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import type { ComponentType } from 'react';
|
||||
|
||||
export default function loadTextStatistics(): Promise<{ default: ComponentType }> {
|
||||
return import('@/pages/TextStatistics');
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import type { ComponentType } from 'react';
|
||||
|
||||
export default function loadTimestamp(): Promise<{ default: ComponentType }> {
|
||||
return import('@/pages/Timestamp');
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import '../../.wxt/types/imports.d.ts';
|
||||
import { browser } from 'wxt/browser';
|
||||
import { MessageAction, onMessage } from '@/utils/messages';
|
||||
import { MessageAction, onMessage, sendMessage } from '@/utils/messages';
|
||||
import { createAllContextMenus, parseContextMenuClick } from '@/utils/contextMenu';
|
||||
import { saveContextMenuData } from '@/utils/useContextMenuData';
|
||||
import { mainWorldInjectionScript } from '@/utils/rightClickInjection';
|
||||
@@ -24,6 +24,18 @@ export default defineBackground(() => {
|
||||
|
||||
const { featureKey, payload } = result.data;
|
||||
|
||||
try {
|
||||
const sidePanelState = await browser.storage.local.get('sidePanelOpen');
|
||||
const isSidePanelOpen = sidePanelState.sidePanelOpen === true;
|
||||
|
||||
if (isSidePanelOpen) {
|
||||
await sendMessage(MessageAction.CONTEXT_MENU_CLICKED, { featureKey, payload });
|
||||
return;
|
||||
}
|
||||
} catch (err) {
|
||||
console.debug('[Context Menu] Side panel pipeline is not available:', err);
|
||||
}
|
||||
|
||||
await saveContextMenuData({ featureKey, payload });
|
||||
|
||||
try {
|
||||
@@ -33,6 +45,17 @@ export default defineBackground(() => {
|
||||
}
|
||||
});
|
||||
|
||||
// 扩展图标点击时打开侧边栏
|
||||
browser.action.onClicked.addListener(async (tab) => {
|
||||
if (tab.id) {
|
||||
try {
|
||||
await browser.sidePanel.open({ tabId: tab.id });
|
||||
} catch (err) {
|
||||
console.error('Failed to open side panel via extension action clicked:', err);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 3. 注入主环境脚本（content script 无权访问 chrome.tabs/scripting，委托 background 执行）
|
||||
onMessage(MessageAction.INJECT_MAIN_WORLD_SCRIPT, async (message) => {
|
||||
const sender = message.sender as chrome.runtime.MessageSender | undefined;
|
||||
|
||||
@@ -1,25 +1,35 @@
|
||||
import RouterProvider from '@/providers/RouterProvider';
|
||||
import TopBar from '@/layout/TopBar';
|
||||
import FeatureNav from '@/layout/FeatureNav';
|
||||
import RouterContainer from '@/components/RouterContainer';
|
||||
import ErrorBoundary from '@/components/ErrorBoundary';
|
||||
|
||||
import { getEntryPointType } from '@/config/features';
|
||||
export default function App() {
|
||||
const entryType = getEntryPointType();
|
||||
|
||||
const routerConfig =
|
||||
entryType === 'tab'
|
||||
? {
|
||||
syncKey: 'app/tabRoute' as const,
|
||||
visiblePagesKey: 'app/tabVisiblePages' as const,
|
||||
pageOrderKey: 'app/tabPageOrder' as const,
|
||||
}
|
||||
: {
|
||||
syncKey: 'app/popupRoute' as const,
|
||||
visiblePagesKey: 'app/popupVisiblePages' as const,
|
||||
pageOrderKey: 'app/popupPageOrder' as const,
|
||||
};
|
||||
|
||||
return (
|
||||
<RouterProvider
|
||||
defaultRoute="timestamp"
|
||||
syncKey="app/popupRoute"
|
||||
visiblePagesKey="app/popupVisiblePages"
|
||||
pageOrderKey="app/popupPageOrder"
|
||||
syncKey={routerConfig.syncKey}
|
||||
visiblePagesKey={routerConfig.visiblePagesKey}
|
||||
pageOrderKey={routerConfig.pageOrderKey}
|
||||
>
|
||||
<div className="flex w-[450px] max-w-[450px] min-w-[450px] h-[600px] min-h-[600px] overflow-hidden bg-background">
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
<TopBar />
|
||||
<ErrorBoundary>
|
||||
<RouterContainer />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
<FeatureNav />
|
||||
<div className="app flex flex-col w-[400px] max-w-[400px] min-w-[400px] h-[600px] min-h-[600px] overflow-hidden bg-background sm:w-screen sm:max-w-none sm:min-w-0 sm:h-screen sm:min-h-0">
|
||||
<TopBar />
|
||||
<ErrorBoundary>
|
||||
<RouterContainer />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
</RouterProvider>
|
||||
);
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Testing Tools</title>
|
||||
<title>Testing Tools - 标签页</title>
|
||||
<meta name="manifest.type" content="browser_action" />
|
||||
<script>
|
||||
(function () {
|
||||
@@ -21,7 +21,7 @@
|
||||
<style>
|
||||
/* Force initial popup size before React hydration */
|
||||
html, body {
|
||||
width: 450px;
|
||||
width: 400px;
|
||||
height: 600px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -33,6 +33,13 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* If opened in a tab (mode=tab), reset the fixed size */
|
||||
@media screen and (min-width: 600px) {
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import AppRoot from '@/providers/AppRoot';
|
||||
import '@/styles/shell.css';
|
||||
import '@/index.css';
|
||||
import App from './App.tsx';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import { useEffect } from 'react';
|
||||
import RouterProvider from '@/providers/RouterProvider';
|
||||
import TopBar from '@/layout/TopBar';
|
||||
import RouterContainer from '@/components/RouterContainer';
|
||||
import ErrorBoundary from '@/components/ErrorBoundary';
|
||||
import { MessageAction, sendMessage } from '@/utils/messages';
|
||||
|
||||
export default function App() {
|
||||
useEffect(() => {
|
||||
sendMessage(MessageAction.SIDE_PANEL_STATE_CHANGED, { isOpen: true });
|
||||
return () => {
|
||||
sendMessage(MessageAction.SIDE_PANEL_STATE_CHANGED, { isOpen: false });
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<RouterProvider defaultRoute="dashboard" syncKey="app/sidepanelRoute">
|
||||
<div className="app flex flex-col h-screen w-full overflow-hidden">
|
||||
<TopBar />
|
||||
<ErrorBoundary>
|
||||
<RouterContainer />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
</RouterProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Testing Tools - Side Panel</title>
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
var raw = localStorage.getItem('snapshot/app/themeMode');
|
||||
var mode = raw ? JSON.parse(raw) : 'system';
|
||||
if (mode !== 'light' && mode !== 'dark' && mode !== 'system') mode = 'system';
|
||||
var isDark =
|
||||
mode === 'dark' ||
|
||||
(mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||
if (isDark) document.documentElement.classList.add('dark');
|
||||
} catch (_error) {}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,10 @@
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import AppRoot from '@/providers/AppRoot';
|
||||
import '@/index.css';
|
||||
import App from './App.tsx';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<AppRoot>
|
||||
<App />
|
||||
</AppRoot>,
|
||||
);
|
||||
@@ -1,5 +1,3 @@
|
||||
@config "../../tailwind.shell.config.js";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -92,87 +90,3 @@
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.page-transition-enter {
|
||||
@apply motion-reduce:transition-none;
|
||||
animation: tt-page-enter 200ms ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.fade-in-150 {
|
||||
animation: tt-fade-in 150ms ease-out forwards;
|
||||
}
|
||||
|
||||
.fade-in-200 {
|
||||
animation: tt-fade-in 200ms ease-out forwards;
|
||||
}
|
||||
|
||||
.fade-in-300 {
|
||||
animation: tt-fade-in 300ms ease-out forwards;
|
||||
}
|
||||
|
||||
.fade-in-zoom-95 {
|
||||
animation: tt-fade-in-zoom-95 150ms ease-out forwards;
|
||||
}
|
||||
|
||||
.fade-in-slide-top-1 {
|
||||
animation: tt-fade-in-slide-top-1 150ms ease-out forwards;
|
||||
}
|
||||
|
||||
.fade-in-slide-top-2 {
|
||||
animation: tt-fade-in-slide-top-2 150ms ease-out forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tt-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tt-fade-in-zoom-95 {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tt-fade-in-slide-top-1 {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-0.25rem);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tt-fade-in-slide-top-2 {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-0.5rem);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tt-page-enter {
|
||||
from {
|
||||
opacity: 0.92;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import type { PageType } from '@/types/storage';
|
||||
import FeatureNav from '@/layout/FeatureNav';
|
||||
|
||||
const mockNavigateTo = vi.fn();
|
||||
|
||||
const mockRouterValue = {
|
||||
currentPage: 'timestamp' as PageType,
|
||||
visiblePages: ['timestamp', 'jwt', 'storageCleaner'] as PageType[],
|
||||
pageOrder: ['jwt', 'timestamp', 'storageCleaner'] as PageType[],
|
||||
recentlyUsedTools: [] as PageType[],
|
||||
isLoaded: true,
|
||||
navigateTo: mockNavigateTo,
|
||||
setVisiblePages: vi.fn(),
|
||||
setPageOrder: vi.fn(),
|
||||
};
|
||||
|
||||
vi.mock('@/providers/RouterProvider', () => ({
|
||||
useRouter: () => mockRouterValue,
|
||||
}));
|
||||
|
||||
describe('FeatureNav 组件', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
mockRouterValue.pageOrder = ['jwt', 'timestamp', 'storageCleaner'];
|
||||
mockRouterValue.visiblePages = ['timestamp', 'jwt', 'storageCleaner'];
|
||||
});
|
||||
|
||||
it('应渲染全部可见工具图标', () => {
|
||||
render(<FeatureNav />);
|
||||
|
||||
expect(screen.getByLabelText('JWT 解析')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('时间戳')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('存储清理')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('点击图标应调用 navigateTo', () => {
|
||||
render(<FeatureNav />);
|
||||
|
||||
fireEvent.click(screen.getByLabelText('JWT 解析'));
|
||||
expect(mockNavigateTo).toHaveBeenCalledWith('jwt');
|
||||
});
|
||||
|
||||
it('当前页对应项应有 active 样式与 aria-current', () => {
|
||||
render(<FeatureNav />);
|
||||
|
||||
const activeButton = screen.getByLabelText('时间戳');
|
||||
expect(activeButton).toHaveAttribute('aria-current', 'page');
|
||||
expect(activeButton).toHaveClass('bg-muted');
|
||||
expect(activeButton).toHaveClass('border-primary');
|
||||
});
|
||||
});
|
||||
@@ -1,35 +0,0 @@
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useFeatureNav } from './useFeatureNav';
|
||||
|
||||
export default function FeatureNav() {
|
||||
const { navItems, currentPage, navigateTo } = useFeatureNav();
|
||||
|
||||
return (
|
||||
<nav
|
||||
aria-label="功能导航"
|
||||
className="flex w-12 shrink-0 flex-col items-center gap-1 overflow-y-auto border-l border-border py-2"
|
||||
>
|
||||
{navItems.map(({ key, feature }) => {
|
||||
const Icon = feature.icon;
|
||||
const isActive = currentPage === key;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
title={feature.label}
|
||||
aria-label={feature.label}
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
onClick={() => navigateTo(key)}
|
||||
className={cn(
|
||||
'flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground',
|
||||
isActive && 'border-l-2 border-primary bg-muted text-foreground',
|
||||
)}
|
||||
>
|
||||
<Icon className="h-4 w-4" aria-hidden="true" />
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import { getFeatureByKey, type FeatureConfig } from '@/config/features';
|
||||
import type { PageType } from '@/types/storage';
|
||||
|
||||
export interface NavFeatureItem {
|
||||
key: PageType;
|
||||
feature: FeatureConfig & { icon: NonNullable<FeatureConfig['icon']> };
|
||||
}
|
||||
|
||||
function isNavFeature(feature: FeatureConfig): feature is NavFeatureItem['feature'] {
|
||||
return feature.icon != null;
|
||||
}
|
||||
|
||||
export function resolveNavFeatures(keys: PageType[], visiblePages: PageType[]): NavFeatureItem[] {
|
||||
const visibleSet = new Set(visiblePages);
|
||||
const items: NavFeatureItem[] = [];
|
||||
|
||||
for (const key of keys) {
|
||||
if (!visibleSet.has(key)) continue;
|
||||
|
||||
const feature = getFeatureByKey(key);
|
||||
if (!feature || !isNavFeature(feature)) continue;
|
||||
|
||||
items.push({ key, feature });
|
||||
}
|
||||
|
||||
return items;
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import type { PageType } from '@/types/storage';
|
||||
import { resolveNavFeatures, type NavFeatureItem } from './resolveNavFeatures';
|
||||
|
||||
export interface UseFeatureNavReturn {
|
||||
navItems: NavFeatureItem[];
|
||||
currentPage: PageType;
|
||||
navigateTo: (page: PageType) => void;
|
||||
}
|
||||
|
||||
export function useFeatureNav(): UseFeatureNavReturn {
|
||||
const { currentPage, pageOrder, visiblePages, navigateTo } = useRouter();
|
||||
|
||||
const navItems = useMemo(
|
||||
() => resolveNavFeatures(pageOrder, visiblePages),
|
||||
[pageOrder, visiblePages],
|
||||
);
|
||||
|
||||
return { navItems, currentPage, navigateTo };
|
||||
}
|
||||
@@ -16,16 +16,16 @@ export default function SearchDropdown({
|
||||
selectedIndex,
|
||||
onSelect,
|
||||
}: SearchDropdownProps) {
|
||||
const isSearching = !!searchQuery.trim();
|
||||
const isSearching = searchQuery.trim().length > 0;
|
||||
const items = isSearching ? searchResults : recentFeatures;
|
||||
|
||||
return (
|
||||
<div className="absolute left-0 right-0 top-full z-50 mt-1.5 max-h-80 overflow-y-auto rounded-lg border border-border bg-popover text-popover-foreground shadow-lg fade-in-slide-top-2">
|
||||
<div className="absolute left-0 right-0 top-full z-50 mt-1.5 max-h-80 overflow-y-auto rounded-lg border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in slide-in-from-top-2 duration-150">
|
||||
<ul role="listbox" className="p-1.5">
|
||||
{!isSearching && items.length > 0 && (
|
||||
<li className="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
|
||||
<div className="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
|
||||
最近搜索
|
||||
</li>
|
||||
</div>
|
||||
)}
|
||||
{isSearching && items.length === 0 ? (
|
||||
<li className="px-4 py-6 text-center text-sm text-muted-foreground">未找到相关工具</li>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { type KeyboardEvent, type RefObject } from 'react';
|
||||
import { type RefObject } from 'react';
|
||||
import { Search, X } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
@@ -9,7 +9,7 @@ interface SearchInputProps {
|
||||
searchQuery: string;
|
||||
onSearchQueryChange: (value: string) => void;
|
||||
onFocus: () => void;
|
||||
onKeyDown: (e: KeyboardEvent) => void;
|
||||
onKeyDown: (e: React.KeyboardEvent) => void;
|
||||
onClear: () => void;
|
||||
}
|
||||
|
||||
@@ -26,6 +26,7 @@ export default function SearchInput({
|
||||
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/60 transition-colors group-focus-within:text-muted-foreground" />
|
||||
<Input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
placeholder="搜索工具..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => onSearchQueryChange(e.target.value)}
|
||||
@@ -34,7 +35,12 @@ export default function SearchInput({
|
||||
aria-label="搜索工具..."
|
||||
className="h-9 rounded-lg border-border/60 bg-muted/40 pl-9 pr-16 shadow-none focus-visible:ring-1 focus-visible:ring-offset-0 placeholder:text-muted-foreground/50"
|
||||
/>
|
||||
{searchQuery ? (
|
||||
{!searchQuery && (
|
||||
<kbd className="pointer-events-none absolute right-3 top-1/2 hidden h-5 -translate-y-1/2 items-center gap-0.5 rounded border border-border/60 bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground/60 sm:inline-flex">
|
||||
{getSearchShortcutLabel()}
|
||||
</kbd>
|
||||
)}
|
||||
{searchQuery && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
@@ -45,10 +51,6 @@ export default function SearchInput({
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
) : (
|
||||
<kbd className="pointer-events-none absolute right-3 top-1/2 hidden h-5 -translate-y-1/2 items-center rounded border border-border/60 bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground/60 sm:inline-flex">
|
||||
{getSearchShortcutLabel()}
|
||||
</kbd>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import type { PageType } from '@/types/storage';
|
||||
import React from 'react';
|
||||
import TopBar from '@/layout/TopBar';
|
||||
@@ -21,12 +21,13 @@ Object.defineProperty(window, 'matchMedia', {
|
||||
});
|
||||
|
||||
const mockRouterValue = {
|
||||
currentPage: 'timestamp' as PageType,
|
||||
visiblePages: ['timestamp', 'jwt'] as PageType[],
|
||||
currentPage: 'dashboard' as PageType,
|
||||
visiblePages: ['dashboard', 'timestamp'] as PageType[],
|
||||
pageOrder: ['timestamp'] as PageType[],
|
||||
recentlyUsedTools: [] as PageType[],
|
||||
isLoaded: true,
|
||||
navigateTo: vi.fn(),
|
||||
syncNavigation: vi.fn(),
|
||||
goHome: vi.fn(),
|
||||
setVisiblePages: vi.fn(),
|
||||
setPageOrder: vi.fn(),
|
||||
};
|
||||
@@ -50,14 +51,26 @@ describe('TopBar 组件', () => {
|
||||
};
|
||||
|
||||
describe('渲染测试', () => {
|
||||
it('不应渲染返回首页按钮', () => {
|
||||
it('不在 dashboard 时应渲染返回按钮', () => {
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
renderWithProvider(<TopBar />);
|
||||
expect(screen.getByLabelText('返回首页')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('在 dashboard 上不应渲染返回按钮', () => {
|
||||
mockRouterValue.currentPage = 'dashboard';
|
||||
renderWithProvider(<TopBar />);
|
||||
expect(screen.queryByLabelText('返回首页')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('应渲染搜索输入框', () => {
|
||||
describe('交互测试', () => {
|
||||
it('点击返回按钮时应调用 goHome', () => {
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
renderWithProvider(<TopBar />);
|
||||
expect(screen.getByRole('textbox')).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(screen.getByLabelText('返回首页'));
|
||||
expect(mockRouterValue.goHome).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { ArrowLeft, ExternalLink } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import SearchDropdown from './SearchDropdown';
|
||||
import SearchInput from './SearchInput';
|
||||
import TopBarActions from './TopBarActions';
|
||||
@@ -9,6 +11,7 @@ export default function TopBar() {
|
||||
searchResults,
|
||||
recentFeatures,
|
||||
selectedIndex,
|
||||
isDashboard,
|
||||
ThemeIcon,
|
||||
themeTitle,
|
||||
showDropdown,
|
||||
@@ -19,13 +22,40 @@ export default function TopBar() {
|
||||
handleSelectFeature,
|
||||
handleKeyDown,
|
||||
cycleThemeMode,
|
||||
handleOpenInTab,
|
||||
goHome,
|
||||
clearSearch,
|
||||
} = useTopBar();
|
||||
|
||||
const actions = [{ id: 'theme', icon: ThemeIcon, title: themeTitle, onClick: cycleThemeMode }];
|
||||
const actions = [
|
||||
{ id: 'theme', icon: ThemeIcon, title: themeTitle, onClick: cycleThemeMode },
|
||||
{
|
||||
id: 'open-in-tab',
|
||||
icon: ExternalLink,
|
||||
title: '在标签页打开',
|
||||
onClick: () => {
|
||||
void handleOpenInTab();
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<header className="relative z-50 flex h-14 items-center justify-between border-b border-border bg-background px-4">
|
||||
<div className="flex w-10 items-center justify-start">
|
||||
{!isDashboard && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={goHome}
|
||||
aria-label="返回首页"
|
||||
className="h-8 w-8 shadow-sm text-muted-foreground"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div ref={containerRef} className="relative mx-4 max-w-md flex-1">
|
||||
<SearchInput
|
||||
inputRef={inputRef}
|
||||
|
||||
@@ -1,16 +1,10 @@
|
||||
import {
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
type KeyboardEvent as ReactKeyboardEvent,
|
||||
type RefObject,
|
||||
} from 'react';
|
||||
import { useEffect, useMemo, useRef, useState, type RefObject } from 'react';
|
||||
import { Monitor, Moon, Sun } from 'lucide-react';
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import { useThemeMode } from '@/providers/ThemeModeProvider';
|
||||
import { type FeatureConfig, FEATURES } from '@/config/features';
|
||||
import { useStorageState } from '@/utils/useStorageState';
|
||||
import { openExtensionPage } from '@/utils/chromeTabs';
|
||||
import { isSearchHistory, SEARCH_HISTORY_DISPLAY, SEARCH_HISTORY_LIMIT } from './constants';
|
||||
|
||||
export interface UseTopBarReturn {
|
||||
@@ -18,6 +12,7 @@ export interface UseTopBarReturn {
|
||||
searchResults: FeatureConfig[];
|
||||
recentFeatures: FeatureConfig[];
|
||||
selectedIndex: number;
|
||||
isDashboard: boolean;
|
||||
ThemeIcon: typeof Sun;
|
||||
themeTitle: string;
|
||||
showDropdown: boolean;
|
||||
@@ -26,13 +21,15 @@ export interface UseTopBarReturn {
|
||||
handleSearchQueryChange: (value: string) => void;
|
||||
handleSearchFocus: () => void;
|
||||
handleSelectFeature: (feature: FeatureConfig) => void;
|
||||
handleKeyDown: (e: ReactKeyboardEvent) => void;
|
||||
handleKeyDown: (e: React.KeyboardEvent) => void;
|
||||
cycleThemeMode: () => void;
|
||||
handleOpenInTab: () => Promise<void>;
|
||||
goHome: () => void;
|
||||
clearSearch: () => void;
|
||||
}
|
||||
|
||||
export function useTopBar(): UseTopBarReturn {
|
||||
const { navigateTo } = useRouter();
|
||||
const { currentPage, goHome, navigateTo } = useRouter();
|
||||
const { mode, setMode } = useThemeMode();
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
@@ -47,6 +44,11 @@ export function useTopBar(): UseTopBarReturn {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleOpenInTab = async () => {
|
||||
await openExtensionPage('popup.html', { mode: 'tab' });
|
||||
window.close();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||
@@ -73,16 +75,17 @@ export function useTopBar(): UseTopBarReturn {
|
||||
const query = searchQuery.trim().toLowerCase();
|
||||
if (!query) return [];
|
||||
return FEATURES.filter((f) => {
|
||||
if (f.key === 'dashboard') return false;
|
||||
return f.label.toLowerCase().includes(query) || f.description.toLowerCase().includes(query);
|
||||
});
|
||||
}, [searchQuery]);
|
||||
|
||||
const recentFeatures = useMemo(() => {
|
||||
const displayedHistory = useMemo(() => {
|
||||
if (searchQuery.trim()) return [];
|
||||
return searchHistory
|
||||
.slice(0, SEARCH_HISTORY_DISPLAY)
|
||||
.map((key) => FEATURES.find((f) => f.key === key))
|
||||
.filter((feature): feature is FeatureConfig => !!feature);
|
||||
.filter((feature): feature is FeatureConfig => !!feature && feature.key !== 'dashboard');
|
||||
}, [searchHistory, searchQuery]);
|
||||
|
||||
const saveToHistory = (featureKey: string) => {
|
||||
@@ -108,10 +111,8 @@ export function useTopBar(): UseTopBarReturn {
|
||||
const themeTitle =
|
||||
mode === 'light' ? '切换到深色模式' : mode === 'dark' ? '切换到系统模式' : '切换到浅色模式';
|
||||
|
||||
const handleKeyDown = (e: ReactKeyboardEvent) => {
|
||||
const isSearching = !!searchQuery.trim();
|
||||
const items = isSearching ? searchResults : recentFeatures;
|
||||
const totalItems = items.length;
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;
|
||||
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
@@ -121,12 +122,13 @@ export function useTopBar(): UseTopBarReturn {
|
||||
setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
|
||||
} else if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
let feature: FeatureConfig | undefined;
|
||||
if (selectedIndex >= 0 && selectedIndex < totalItems) {
|
||||
feature = items[selectedIndex];
|
||||
} else if (isSearching && searchResults.length > 0) {
|
||||
feature = searchResults[0];
|
||||
}
|
||||
const items = searchQuery.trim() ? searchResults : displayedHistory;
|
||||
const feature =
|
||||
selectedIndex >= 0 && selectedIndex < totalItems
|
||||
? items[selectedIndex]
|
||||
: searchQuery.trim() && searchResults.length > 0
|
||||
? searchResults[0]
|
||||
: undefined;
|
||||
if (feature) handleSelectFeature(feature);
|
||||
} else if (e.key === 'Escape') {
|
||||
setShowResults(false);
|
||||
@@ -147,14 +149,16 @@ export function useTopBar(): UseTopBarReturn {
|
||||
|
||||
const handleSearchFocus = () => setShowResults(true);
|
||||
|
||||
const showDropdown = showResults && (!!searchQuery.trim() || recentFeatures.length > 0);
|
||||
const showDropdown =
|
||||
showResults && (searchQuery.trim().length > 0 || displayedHistory.length > 0);
|
||||
|
||||
return {
|
||||
searchQuery,
|
||||
searchResults,
|
||||
recentFeatures,
|
||||
recentFeatures: displayedHistory,
|
||||
selectedIndex,
|
||||
showDropdown,
|
||||
isDashboard: currentPage === 'dashboard',
|
||||
ThemeIcon,
|
||||
themeTitle,
|
||||
containerRef,
|
||||
@@ -164,6 +168,8 @@ export function useTopBar(): UseTopBarReturn {
|
||||
handleSelectFeature,
|
||||
handleKeyDown,
|
||||
cycleThemeMode,
|
||||
handleOpenInTab,
|
||||
goHome,
|
||||
clearSearch,
|
||||
};
|
||||
}
|
||||
|
||||
+2
-1
@@ -1,5 +1,6 @@
|
||||
import { type ClassValue, clsx } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return clsx(inputs);
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
@@ -2,6 +2,15 @@ import { describe, expect, it, vi } from 'vitest';
|
||||
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||
import Base64ConverterPage from '../index';
|
||||
|
||||
// Mock getEntryPointType
|
||||
vi.mock('@/config/features', async (importOriginal) => {
|
||||
const actual = await importOriginal<typeof import('@/config/features')>();
|
||||
return {
|
||||
...actual,
|
||||
getEntryPointType: () => 'sidepanel',
|
||||
};
|
||||
});
|
||||
|
||||
// Mock 子组件
|
||||
vi.mock('../components/TextMode', () => ({
|
||||
default: ({ onSwitchToImageMode }: { onSwitchToImageMode?: () => void }) => (
|
||||
@@ -13,9 +22,7 @@ vi.mock('../components/TextMode', () => ({
|
||||
}));
|
||||
|
||||
vi.mock('../components/Base64ConverterSection', () => ({
|
||||
default: ({ mode }: { mode: 'file' | 'image' }) => (
|
||||
<div data-testid={`${mode}-mode`}>{mode.toUpperCase()} Mode</div>
|
||||
),
|
||||
default: ({ mode }: { mode: string }) => <div data-testid={`${mode}-mode`}>{mode}</div>,
|
||||
}));
|
||||
|
||||
const waitForStorageInit = () =>
|
||||
|
||||
@@ -50,6 +50,10 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
setDirection(next);
|
||||
};
|
||||
|
||||
const handleDownload = () => {
|
||||
if (decoded) downloadBlob(decoded.blob, decodedFileName);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col space-y-4 px-2">
|
||||
<div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
|
||||
@@ -111,7 +115,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<Upload className="w-8 h-8 text-primary" />
|
||||
<Upload className={cn('w-8 h-8 text-primary')} />
|
||||
<span className="text-sm font-bold text-foreground/90 max-w-[280px] truncate">
|
||||
{info.name}
|
||||
</span>
|
||||
@@ -133,11 +137,11 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
{mode === 'image' ? '点击或拖拽图像到此处' : '点击或拖拽文件到此处'}
|
||||
</span>
|
||||
<span className="text-[10px] font-medium text-muted-foreground/60">
|
||||
最大文件大小：{maxFileSizeStr}
|
||||
{`最大文件大小：${maxFileSizeStr}`}
|
||||
</span>
|
||||
{mode === 'image' && (
|
||||
<span className="text-[10px] font-medium text-muted-foreground/50">
|
||||
支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式
|
||||
{'支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
@@ -227,7 +231,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
blobSize={decoded.blob.size}
|
||||
fileName={decodedFileName}
|
||||
onFileNameChange={setCustomFileName}
|
||||
onDownload={() => downloadBlob(decoded.blob, decodedFileName)}
|
||||
onDownload={handleDownload}
|
||||
>
|
||||
{mode === 'image' && (
|
||||
<div className="relative p-1.5 border border-border bg-background dark:bg-muted/10 rounded-xl max-w-[220px] mb-3 overflow-hidden shadow-sm">
|
||||
|
||||
+8
-17
@@ -1,14 +1,14 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import * as featureConfig from '@/config/features';
|
||||
import { resolveNavFeatures } from '../resolveNavFeatures';
|
||||
import { resolveDashboardFeatures } from '../dashboardFeatures';
|
||||
|
||||
describe('resolveNavFeatures', () => {
|
||||
describe('resolveDashboardFeatures', () => {
|
||||
beforeEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
it('应按 keys 顺序返回可见工具', () => {
|
||||
const items = resolveNavFeatures(['jwt', 'timestamp'], ['timestamp', 'jwt']);
|
||||
it('应按 keys 顺序返回可见工具，并排除 dashboard', () => {
|
||||
const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard', 'timestamp', 'jwt']);
|
||||
|
||||
expect(items.map((item) => item.key)).toEqual(['jwt', 'timestamp']);
|
||||
expect(items.map((item) => item.feature.label)).toEqual(['JWT 解析', '时间戳']);
|
||||
@@ -24,34 +24,25 @@ describe('resolveNavFeatures', () => {
|
||||
return feature;
|
||||
});
|
||||
|
||||
const items = resolveNavFeatures(['timestamp'], ['timestamp']);
|
||||
const items = resolveDashboardFeatures(['timestamp'], ['dashboard', 'timestamp']);
|
||||
|
||||
expect(items.map((item) => item.key)).toEqual(['timestamp']);
|
||||
});
|
||||
|
||||
it('应过滤不在 visiblePages 中的工具', () => {
|
||||
const items = resolveNavFeatures(['jwt', 'timestamp'], ['timestamp']);
|
||||
const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard', 'timestamp']);
|
||||
|
||||
expect(items.map((item) => item.key)).toEqual(['timestamp']);
|
||||
});
|
||||
|
||||
it('visiblePages 无匹配工具时应返回空列表', () => {
|
||||
const items = resolveNavFeatures(['jwt', 'timestamp'], []);
|
||||
const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard']);
|
||||
|
||||
expect(items).toEqual([]);
|
||||
});
|
||||
|
||||
it('应过滤缺少 icon 的工具', () => {
|
||||
const originalGetFeatureByKey = featureConfig.getFeatureByKey;
|
||||
vi.spyOn(featureConfig, 'getFeatureByKey').mockImplementation((key) => {
|
||||
const feature = originalGetFeatureByKey(key);
|
||||
if (key === 'jwt' && feature) {
|
||||
return { ...feature, icon: undefined };
|
||||
}
|
||||
return feature;
|
||||
});
|
||||
|
||||
const items = resolveNavFeatures(['jwt', 'timestamp'], ['jwt', 'timestamp']);
|
||||
const items = resolveDashboardFeatures(['dashboard', 'timestamp'], ['dashboard', 'timestamp']);
|
||||
|
||||
expect(items.map((item) => item.key)).toEqual(['timestamp']);
|
||||
});
|
||||
@@ -0,0 +1,95 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { resolveDashboardFeatures, type DashboardFeatureItem } from '../dashboardFeatures';
|
||||
import Index from '../index';
|
||||
|
||||
const mockNavigateTo = vi.fn();
|
||||
const mockUseDashboard = vi.fn();
|
||||
|
||||
vi.mock('../useDashboard', () => ({
|
||||
useDashboard: () => mockUseDashboard(),
|
||||
}));
|
||||
|
||||
function buildFeatureItem(key: 'timestamp' | 'jwt'): DashboardFeatureItem {
|
||||
return resolveDashboardFeatures([key], [key])[0]!;
|
||||
}
|
||||
|
||||
describe('Dashboard 页面', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
mockUseDashboard.mockReturnValue({
|
||||
visibleFeatures: [buildFeatureItem('timestamp'), buildFeatureItem('jwt')],
|
||||
recentFeatures: [],
|
||||
showRecent: false,
|
||||
navigateTo: mockNavigateTo,
|
||||
});
|
||||
});
|
||||
|
||||
it('应渲染全部工具网格', () => {
|
||||
render(<Index />);
|
||||
|
||||
expect(screen.getByText('全部工具')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: '时间戳' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'JWT 解析' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('点击工具卡片应触发 navigateTo', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<Index />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '时间戳' }));
|
||||
|
||||
expect(mockNavigateTo).toHaveBeenCalledTimes(1);
|
||||
expect(mockNavigateTo).toHaveBeenCalledWith('timestamp');
|
||||
});
|
||||
|
||||
it('有最近使用数据时应显示最近使用区块', () => {
|
||||
mockUseDashboard.mockReturnValue({
|
||||
visibleFeatures: [buildFeatureItem('timestamp')],
|
||||
recentFeatures: [buildFeatureItem('jwt')],
|
||||
showRecent: true,
|
||||
navigateTo: mockNavigateTo,
|
||||
});
|
||||
|
||||
render(<Index />);
|
||||
|
||||
expect(screen.getByText('最近使用')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'JWT 解析' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('无最近使用数据时不应显示最近使用区块', () => {
|
||||
render(<Index />);
|
||||
|
||||
expect(screen.queryByText('最近使用')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('点击最近使用按钮应触发 navigateTo', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockUseDashboard.mockReturnValue({
|
||||
visibleFeatures: [buildFeatureItem('timestamp')],
|
||||
recentFeatures: [buildFeatureItem('jwt')],
|
||||
showRecent: true,
|
||||
navigateTo: mockNavigateTo,
|
||||
});
|
||||
|
||||
render(<Index />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: 'JWT 解析' }));
|
||||
|
||||
expect(mockNavigateTo).toHaveBeenCalledWith('jwt');
|
||||
});
|
||||
|
||||
it('无可见工具时应显示空状态', () => {
|
||||
mockUseDashboard.mockReturnValue({
|
||||
visibleFeatures: [],
|
||||
recentFeatures: [],
|
||||
showRecent: false,
|
||||
navigateTo: mockNavigateTo,
|
||||
});
|
||||
|
||||
render(<Index />);
|
||||
|
||||
expect(screen.getByText('没有可用的工具')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,78 @@
|
||||
import { renderHook } from '@testing-library/react';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import { useDashboard } from '../useDashboard';
|
||||
import type { PageType } from '@/types/storage';
|
||||
|
||||
vi.mock('@/providers/RouterProvider', () => ({
|
||||
useRouter: vi.fn(),
|
||||
}));
|
||||
|
||||
const mockNavigateTo = vi.fn();
|
||||
|
||||
function mockRouterState(
|
||||
overrides: {
|
||||
visiblePages?: PageType[];
|
||||
pageOrder?: PageType[];
|
||||
recentlyUsedTools?: PageType[];
|
||||
} = {},
|
||||
) {
|
||||
vi.mocked(useRouter).mockReturnValue({
|
||||
currentPage: 'dashboard',
|
||||
visiblePages: overrides.visiblePages ?? ['dashboard', 'timestamp', 'jwt'],
|
||||
pageOrder: overrides.pageOrder ?? ['jwt', 'timestamp'],
|
||||
recentlyUsedTools: overrides.recentlyUsedTools ?? [],
|
||||
isLoaded: true,
|
||||
navigateTo: mockNavigateTo,
|
||||
goHome: vi.fn(),
|
||||
setVisiblePages: vi.fn(),
|
||||
setPageOrder: vi.fn(),
|
||||
});
|
||||
}
|
||||
|
||||
describe('useDashboard', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('应透传 router 中的 navigateTo', () => {
|
||||
mockRouterState();
|
||||
|
||||
const { result } = renderHook(() => useDashboard());
|
||||
|
||||
expect(result.current.navigateTo).toBe(mockNavigateTo);
|
||||
});
|
||||
|
||||
it('recentlyUsedTools 有可见工具时应显示最近使用', () => {
|
||||
mockRouterState({
|
||||
visiblePages: ['dashboard', 'timestamp', 'jwt'],
|
||||
recentlyUsedTools: ['timestamp', 'jwt'],
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useDashboard());
|
||||
|
||||
expect(result.current.showRecent).toBe(true);
|
||||
expect(result.current.recentFeatures.map((item) => item.key)).toEqual(['timestamp', 'jwt']);
|
||||
});
|
||||
|
||||
it('recentlyUsedTools 为空时不应显示最近使用', () => {
|
||||
mockRouterState({ recentlyUsedTools: [] });
|
||||
|
||||
const { result } = renderHook(() => useDashboard());
|
||||
|
||||
expect(result.current.showRecent).toBe(false);
|
||||
expect(result.current.recentFeatures).toEqual([]);
|
||||
});
|
||||
|
||||
it('最近使用中的不可见工具应被过滤', () => {
|
||||
mockRouterState({
|
||||
visiblePages: ['dashboard', 'timestamp'],
|
||||
recentlyUsedTools: ['jwt', 'timestamp'],
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useDashboard());
|
||||
|
||||
expect(result.current.showRecent).toBe(true);
|
||||
expect(result.current.recentFeatures.map((item) => item.key)).toEqual(['timestamp']);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,34 @@
|
||||
import { getFeatureByKey, type FeatureConfig } from '@/config/features';
|
||||
import type { PageType } from '@/types/storage';
|
||||
|
||||
export type DashboardFeature = FeatureConfig & {
|
||||
icon: NonNullable<FeatureConfig['icon']>;
|
||||
};
|
||||
|
||||
export interface DashboardFeatureItem {
|
||||
key: PageType;
|
||||
feature: DashboardFeature;
|
||||
}
|
||||
|
||||
function isDashboardFeature(feature: FeatureConfig): feature is DashboardFeature {
|
||||
return feature.icon != null;
|
||||
}
|
||||
|
||||
export function resolveDashboardFeatures(
|
||||
keys: PageType[],
|
||||
visiblePages: PageType[],
|
||||
): DashboardFeatureItem[] {
|
||||
const visibleSet = new Set(visiblePages);
|
||||
const items: DashboardFeatureItem[] = [];
|
||||
|
||||
for (const key of keys) {
|
||||
if (!visibleSet.has(key)) continue;
|
||||
|
||||
const feature = getFeatureByKey(key);
|
||||
if (!feature || !isDashboardFeature(feature)) continue;
|
||||
|
||||
items.push({ key, feature });
|
||||
}
|
||||
|
||||
return items;
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useDashboard } from './useDashboard';
|
||||
|
||||
export default function Index() {
|
||||
const { visibleFeatures, recentFeatures, showRecent, navigateTo } = useDashboard();
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-col gap-4 p-3.5 w-full h-auto select-none')}>
|
||||
{showRecent && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
|
||||
最近使用
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{recentFeatures.map(({ key, feature }) => {
|
||||
const IconComponent = feature.icon;
|
||||
return (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
onClick={() => navigateTo(key)}
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium',
|
||||
'border border-border/60 bg-card text-card-foreground',
|
||||
'hover:bg-muted/40 hover:border-primary/30',
|
||||
'transition-colors cursor-pointer',
|
||||
)}
|
||||
>
|
||||
<IconComponent className="h-3.5 w-3.5 text-muted-foreground/70" />
|
||||
{feature.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
|
||||
全部工具
|
||||
</h3>
|
||||
{visibleFeatures.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground py-4 text-center">没有可用的工具</p>
|
||||
) : (
|
||||
<div
|
||||
className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}
|
||||
>
|
||||
{visibleFeatures.map(({ key, feature }) => {
|
||||
const IconComponent = feature.icon;
|
||||
return (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
onClick={() => navigateTo(key)}
|
||||
className={cn(
|
||||
'group flex flex-col items-center justify-center gap-1.5',
|
||||
'py-3 px-2 rounded-xl border border-border/50 bg-card',
|
||||
'hover:bg-muted/40 hover:border-primary/30',
|
||||
'transition-colors cursor-pointer',
|
||||
)}
|
||||
>
|
||||
<IconComponent
|
||||
className={cn(
|
||||
'h-5 w-5 text-muted-foreground/70',
|
||||
'group-hover:text-foreground',
|
||||
'transition-colors',
|
||||
)}
|
||||
/>
|
||||
<span className="text-[11px] font-medium text-muted-foreground/80 group-hover:text-foreground leading-tight text-center truncate w-full transition-colors">
|
||||
{feature.label}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import type { PageType } from '@/types/storage';
|
||||
import { resolveDashboardFeatures, type DashboardFeatureItem } from './dashboardFeatures';
|
||||
|
||||
export interface UseDashboardReturn {
|
||||
visibleFeatures: DashboardFeatureItem[];
|
||||
recentFeatures: DashboardFeatureItem[];
|
||||
showRecent: boolean;
|
||||
navigateTo: (page: PageType) => void;
|
||||
}
|
||||
|
||||
export function useDashboard(): UseDashboardReturn {
|
||||
const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
|
||||
|
||||
const visibleFeatures = useMemo(
|
||||
() => resolveDashboardFeatures(pageOrder, visiblePages),
|
||||
[pageOrder, visiblePages],
|
||||
);
|
||||
|
||||
const recentFeatures = useMemo(
|
||||
() => resolveDashboardFeatures(recentlyUsedTools, visiblePages),
|
||||
[recentlyUsedTools, visiblePages],
|
||||
);
|
||||
|
||||
const showRecent = recentFeatures.length > 0;
|
||||
|
||||
return { visibleFeatures, recentFeatures, showRecent, navigateTo };
|
||||
}
|
||||
@@ -18,6 +18,14 @@ vi.mock('@/components/GlobalSnackbar', () => ({
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock('@/config/features', async (importOriginal) => {
|
||||
const actual = await importOriginal<typeof import('@/config/features')>();
|
||||
return {
|
||||
...actual,
|
||||
getEntryPointType: () => 'sidepanel',
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock('../components/QrCodePreview', () => ({
|
||||
default: () => <div data-testid="qr-code-preview">QrCodePreview</div>,
|
||||
}));
|
||||
|
||||
@@ -44,7 +44,7 @@ const QrCodePreview = ({
|
||||
<img
|
||||
src={qrCodeDataUrl}
|
||||
alt="QR Code Preview"
|
||||
className="w-48 h-48 max-w-full object-contain block fade-in-300"
|
||||
className="w-48 h-48 max-w-full object-contain block animate-in fade-in duration-300"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -126,34 +126,7 @@ describe('StorageCleaner 页面', () => {
|
||||
|
||||
await waitFor(() => {
|
||||
expect(clearStorage).not.toHaveBeenCalled();
|
||||
expect(toast.warning).toHaveBeenCalledWith('当前页面已变更，请等待数据刷新后再清理');
|
||||
});
|
||||
});
|
||||
|
||||
it('同一标签页 URL 变更后、数据刷新完成前不应执行清理', async () => {
|
||||
let currentUrl = 'https://a.example.com';
|
||||
vi.mocked(getCurrentTab).mockImplementation(
|
||||
async () =>
|
||||
({
|
||||
id: 1,
|
||||
url: currentUrl,
|
||||
}) as any,
|
||||
);
|
||||
|
||||
render(<Index />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button', { name: /立即清理/ })).not.toBeDisabled();
|
||||
});
|
||||
|
||||
currentUrl = 'https://b.example.com';
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /立即清理/ }));
|
||||
fireEvent.click(screen.getByRole('button', { name: /确认清理/ }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(clearStorage).not.toHaveBeenCalled();
|
||||
expect(toast.warning).toHaveBeenCalledWith('当前页面已变更，请等待数据刷新后再清理');
|
||||
expect(toast.warning).toHaveBeenCalledWith('当前标签页已切换，请等待数据刷新后再清理');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -258,8 +258,8 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
|
||||
}
|
||||
|
||||
const boundTab = boundTabRef.current;
|
||||
if (!boundTab || boundTab.id !== tab.id || boundTab.url !== tab.url) {
|
||||
toast.warning('当前页面已变更，请等待数据刷新后再清理');
|
||||
if (!boundTab || boundTab.id !== tab.id) {
|
||||
toast.warning('当前标签页已切换，请等待数据刷新后再清理');
|
||||
setShowConfirm(false);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -234,38 +234,29 @@ export default function FieldList({
|
||||
if (!ruleName.trim()) return;
|
||||
|
||||
const trimmedName = ruleName.trim();
|
||||
const existingRule = ruleStorage.getByName(trimmedName);
|
||||
|
||||
// 检查名称是否重复
|
||||
if (!overwrite && existingRule) {
|
||||
setShowConfirmOverwrite(true);
|
||||
return;
|
||||
if (!overwrite) {
|
||||
const existingRule = ruleStorage.getByName(trimmedName);
|
||||
if (existingRule) {
|
||||
setShowConfirmOverwrite(true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const savedRule = ruleStorage.save(
|
||||
overwrite && existingRule
|
||||
? {
|
||||
id: existingRule.id,
|
||||
name: trimmedName,
|
||||
description: ruleDescription.trim(),
|
||||
fields: fields,
|
||||
}
|
||||
: {
|
||||
name: trimmedName,
|
||||
description: ruleDescription.trim(),
|
||||
fields: fields,
|
||||
},
|
||||
);
|
||||
const newRule = ruleStorage.save({
|
||||
name: trimmedName,
|
||||
description: ruleDescription.trim(),
|
||||
fields: fields,
|
||||
});
|
||||
|
||||
if (savedRule) {
|
||||
if (newRule) {
|
||||
setShowSaveDialog(false);
|
||||
setShowConfirmOverwrite(false);
|
||||
setRuleName('');
|
||||
setRuleDescription('');
|
||||
toast.success(overwrite ? '规则已覆盖' : '规则已保存');
|
||||
toast.success('规则已保存');
|
||||
onRuleSaved?.();
|
||||
} else {
|
||||
toast.error('规则保存失败');
|
||||
}
|
||||
},
|
||||
[ruleName, ruleDescription, fields, onRuleSaved],
|
||||
@@ -286,7 +277,7 @@ export default function FieldList({
|
||||
onClick={handleUpdateRule}
|
||||
disabled={fields.length === 0}
|
||||
className="h-8 gap-1.5 px-2.5"
|
||||
title={editingRule ? `编辑中: ${editingRule.name}` : ''}
|
||||
title={`编辑中: ${editingRule.name}`}
|
||||
>
|
||||
<Save className="h-3.5 w-3.5" />
|
||||
更新规则
|
||||
|
||||
@@ -33,10 +33,7 @@ export default function GenerateButton({
|
||||
{progress && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>
|
||||
已生成 {progress.generated.toLocaleString()} / {progress.total.toLocaleString()}{' '}
|
||||
条
|
||||
</span>
|
||||
<span>{`已生成 ${progress.generated.toLocaleString()} / ${progress.total.toLocaleString()} 条`}</span>
|
||||
<span>{progress.progress}%</span>
|
||||
</div>
|
||||
<div className="h-2 bg-muted rounded-full overflow-hidden">
|
||||
@@ -47,7 +44,7 @@ export default function GenerateButton({
|
||||
</div>
|
||||
{progress.estimatedTimeLeft !== undefined && (
|
||||
<p className="text-xs text-muted-foreground text-center">
|
||||
预计剩余 {Math.ceil(progress.estimatedTimeLeft / 1000)} 秒
|
||||
{`预计剩余 ${Math.ceil(progress.estimatedTimeLeft / 1000)} 秒`}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -82,7 +82,7 @@ export default function ResultPanel({ result }: ResultPanelProps) {
|
||||
))}
|
||||
{result.warnings.length > 5 && (
|
||||
<li className="text-xs text-yellow-500/80">
|
||||
... 还有 {result.warnings.length - 5} 条警告
|
||||
{`... 还有 ${result.warnings.length - 5} 条警告`}
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
|
||||
@@ -227,7 +227,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
|
||||
maxLength={20}
|
||||
/>
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground pointer-events-none tabular-nums">
|
||||
已保存 {rules.length}/{ruleStorage.MAX_RULES} 条
|
||||
{`已保存 ${rules.length}/${ruleStorage.MAX_RULES} 条`}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -260,7 +260,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
|
||||
<Clock className="h-3 w-3" />
|
||||
{formatDate(rule.updatedAt)}
|
||||
</span>
|
||||
<span>使用 {rule.useCount} 次</span>
|
||||
<span>{`使用 ${rule.useCount} 次`}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,92 +0,0 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import type { FieldConfig } from '@/types/testDataGenerator';
|
||||
|
||||
vi.mock('@/utils/ruleStorage', () => ({
|
||||
getByName: vi.fn(),
|
||||
save: vi.fn(),
|
||||
update: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('sonner', () => ({
|
||||
toast: {
|
||||
success: vi.fn(),
|
||||
error: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
import FieldList from '../FieldList';
|
||||
import * as ruleStorage from '@/utils/ruleStorage';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
const mockedRuleStorage = vi.mocked(ruleStorage);
|
||||
const mockedToast = vi.mocked(toast);
|
||||
|
||||
const mockFields: FieldConfig[] = [
|
||||
{
|
||||
id: 'field-1',
|
||||
name: 'username',
|
||||
generatorId: 'string',
|
||||
params: {},
|
||||
required: true,
|
||||
nullRate: 0,
|
||||
unique: false,
|
||||
},
|
||||
];
|
||||
|
||||
const defaultProps = {
|
||||
fields: mockFields,
|
||||
onUpdate: vi.fn(),
|
||||
onRemove: vi.fn(),
|
||||
onAdd: vi.fn(),
|
||||
onEdit: vi.fn(),
|
||||
onReorder: vi.fn(),
|
||||
};
|
||||
|
||||
describe('FieldList 规则保存', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
mockedRuleStorage.getByName.mockReturnValue(undefined);
|
||||
mockedRuleStorage.save.mockReturnValue({
|
||||
id: 'rule-1',
|
||||
name: 'My Rule',
|
||||
fields: mockFields,
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now(),
|
||||
useCount: 0,
|
||||
});
|
||||
});
|
||||
|
||||
it('覆盖同名规则时应更新已有规则而非新建', async () => {
|
||||
const user = userEvent.setup();
|
||||
const existingRule = {
|
||||
id: 'existing-rule-id',
|
||||
name: 'My Rule',
|
||||
fields: mockFields,
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now(),
|
||||
useCount: 0,
|
||||
};
|
||||
|
||||
mockedRuleStorage.getByName.mockReturnValue(existingRule);
|
||||
|
||||
render(<FieldList {...defaultProps} />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /保存规则/ }));
|
||||
await user.type(screen.getByPlaceholderText('规则名称'), 'My Rule');
|
||||
await user.click(screen.getByRole('button', { name: '确认' }));
|
||||
|
||||
expect(screen.getByText('已存在同名规则，是否覆盖保存？')).toBeInTheDocument();
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '覆盖' }));
|
||||
|
||||
expect(mockedRuleStorage.save).toHaveBeenCalledWith({
|
||||
id: 'existing-rule-id',
|
||||
name: 'My Rule',
|
||||
description: '',
|
||||
fields: mockFields,
|
||||
});
|
||||
expect(mockedToast.success).toHaveBeenCalledWith('规则已覆盖');
|
||||
});
|
||||
});
|
||||
@@ -114,25 +114,4 @@ describe('useGenerator', () => {
|
||||
expect(result.current.isGenerating).toBe(false);
|
||||
expect(worker.postedMessages).toEqual(expect.arrayContaining([{ type: 'cancel' }]));
|
||||
});
|
||||
|
||||
it('正在生成时不应重复发送 start 消息', () => {
|
||||
const { result } = renderHook(() => useGenerator());
|
||||
|
||||
act(() => {
|
||||
result.current.generate([mockField], 10);
|
||||
result.current.generate([mockField], 20);
|
||||
});
|
||||
|
||||
const worker = MockWorker.instances[0];
|
||||
const startMessages = worker.postedMessages.filter(
|
||||
(message): message is { type: 'start'; payload: { count: number } } =>
|
||||
typeof message === 'object' &&
|
||||
message !== null &&
|
||||
'type' in message &&
|
||||
message.type === 'start',
|
||||
);
|
||||
|
||||
expect(startMessages).toHaveLength(1);
|
||||
expect(startMessages[0]?.payload.count).toBe(10);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -37,12 +37,6 @@ export function useGenerator(): UseGeneratorReturn {
|
||||
|
||||
const workerRef = useRef<Worker | null>(null);
|
||||
const generationIdRef = useRef(0);
|
||||
const isGeneratingRef = useRef(false);
|
||||
|
||||
const finishGenerating = useCallback(() => {
|
||||
isGeneratingRef.current = false;
|
||||
setIsGenerating(false);
|
||||
}, []);
|
||||
|
||||
// 清理 Worker
|
||||
useEffect(() => {
|
||||
@@ -79,7 +73,7 @@ export function useGenerator(): UseGeneratorReturn {
|
||||
setProgress(data.payload);
|
||||
break;
|
||||
case 'complete':
|
||||
finishGenerating();
|
||||
setIsGenerating(false);
|
||||
if (data.payload.success) {
|
||||
setResult(data.payload);
|
||||
} else if (data.payload.error && data.payload.error !== '生成已取消') {
|
||||
@@ -88,7 +82,7 @@ export function useGenerator(): UseGeneratorReturn {
|
||||
setProgress(null);
|
||||
break;
|
||||
case 'error':
|
||||
finishGenerating();
|
||||
setIsGenerating(false);
|
||||
setError(data.payload.error);
|
||||
setProgress(null);
|
||||
break;
|
||||
@@ -97,7 +91,7 @@ export function useGenerator(): UseGeneratorReturn {
|
||||
|
||||
worker.onerror = (err) => {
|
||||
console.error('[useGenerator] Worker 错误:', err);
|
||||
finishGenerating();
|
||||
setIsGenerating(false);
|
||||
setError(err.message || 'Worker 运行错误');
|
||||
setProgress(null);
|
||||
// Worker 出错后销毁，下次重新创建
|
||||
@@ -107,17 +101,16 @@ export function useGenerator(): UseGeneratorReturn {
|
||||
|
||||
workerRef.current = worker;
|
||||
return worker;
|
||||
}, [finishGenerating]);
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 开始生成
|
||||
*/
|
||||
const generate = useCallback(
|
||||
(fields: FieldConfig[], count: number, csvMode = false) => {
|
||||
if (isGeneratingRef.current) return;
|
||||
if (isGenerating) return;
|
||||
|
||||
const generationId = ++generationIdRef.current;
|
||||
isGeneratingRef.current = true;
|
||||
|
||||
setIsGenerating(true);
|
||||
setProgress(null);
|
||||
@@ -131,22 +124,21 @@ export function useGenerator(): UseGeneratorReturn {
|
||||
};
|
||||
worker.postMessage(message);
|
||||
},
|
||||
[getWorker],
|
||||
[isGenerating, getWorker],
|
||||
);
|
||||
|
||||
/**
|
||||
* 取消生成
|
||||
*/
|
||||
const cancel = useCallback(() => {
|
||||
if (workerRef.current && isGeneratingRef.current) {
|
||||
if (workerRef.current && isGenerating) {
|
||||
++generationIdRef.current;
|
||||
const message: WorkerRequestMessage = { type: 'cancel' };
|
||||
workerRef.current.postMessage(message);
|
||||
isGeneratingRef.current = false;
|
||||
setIsGenerating(false);
|
||||
setProgress(null);
|
||||
}
|
||||
}, []);
|
||||
}, [isGenerating]);
|
||||
|
||||
/**
|
||||
* 清除结果
|
||||
|
||||
@@ -28,11 +28,10 @@ const isValidPage = (page: unknown): page is PageType => {
|
||||
};
|
||||
|
||||
/**
|
||||
* 从页面列表中过滤非法项（如已移除的 dashboard），保留合法 PageType
|
||||
* 校验页面列表是否合法
|
||||
*/
|
||||
const sanitizePageList = (pages: unknown): PageType[] | null => {
|
||||
if (!Array.isArray(pages)) return null;
|
||||
return pages.filter(isValidPage);
|
||||
const isValidPageList = (pages: unknown): pages is PageType[] => {
|
||||
return Array.isArray(pages) && pages.every(isValidPage);
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -48,15 +47,6 @@ const mergeWithDefaults = (saved: PageType[], defaults: PageType[]): PageType[]
|
||||
return [...preserved, ...newItems];
|
||||
};
|
||||
|
||||
/**
|
||||
* 解析并合并页面列表：过滤非法项后与默认列表合并
|
||||
*/
|
||||
const resolvePageList = (pages: unknown, defaults: PageType[]): PageType[] => {
|
||||
const sanitized = sanitizePageList(pages);
|
||||
if (sanitized === null) return defaults;
|
||||
return mergeWithDefaults(sanitized, defaults);
|
||||
};
|
||||
|
||||
interface RouterContextType {
|
||||
currentPage: PageType;
|
||||
visiblePages: PageType[];
|
||||
@@ -64,6 +54,7 @@ interface RouterContextType {
|
||||
recentlyUsedTools: PageType[];
|
||||
isLoaded: boolean;
|
||||
navigateTo: (page: PageType) => void;
|
||||
goHome: () => void;
|
||||
setVisiblePages: (pages: PageType[]) => void;
|
||||
setPageOrder: (pages: PageType[]) => void;
|
||||
}
|
||||
@@ -81,7 +72,7 @@ interface RouterProviderProps {
|
||||
|
||||
export function RouterProvider({
|
||||
children,
|
||||
defaultRoute = 'timestamp',
|
||||
defaultRoute = 'dashboard',
|
||||
syncRoute = true,
|
||||
syncKey = 'app/currentRoute',
|
||||
visiblePagesKey = 'app/visiblePages',
|
||||
@@ -91,19 +82,26 @@ export function RouterProvider({
|
||||
getSyncSnapshot(syncKey as string, defaultRoute, isValidPage),
|
||||
);
|
||||
|
||||
const [visiblePages, setVisiblePages] = useState<PageType[]>(() =>
|
||||
resolvePageList(
|
||||
getSyncSnapshot(visiblePagesKey as string, null),
|
||||
const [visiblePages, setVisiblePages] = useState<PageType[]>(() => {
|
||||
const snapshot = getSyncSnapshot(
|
||||
visiblePagesKey as string,
|
||||
getDefaultVisibleFeatureKeys(),
|
||||
),
|
||||
);
|
||||
isValidPageList,
|
||||
);
|
||||
return mergeWithDefaults(snapshot, getDefaultVisibleFeatureKeys());
|
||||
});
|
||||
|
||||
const [pageOrder, setPageOrder] = useState<PageType[]>(() =>
|
||||
resolvePageList(getSyncSnapshot(pageOrderKey as string, null), getDefaultPageOrder()),
|
||||
);
|
||||
const [pageOrder, setPageOrder] = useState<PageType[]>(() => {
|
||||
const snapshot = getSyncSnapshot(
|
||||
pageOrderKey as string,
|
||||
getDefaultPageOrder(),
|
||||
isValidPageList,
|
||||
);
|
||||
return mergeWithDefaults(snapshot, getDefaultPageOrder());
|
||||
});
|
||||
|
||||
const [recentlyUsedTools, setRecentlyUsedTools] = useState<PageType[]>(
|
||||
() => sanitizePageList(getSyncSnapshot('app/recentlyUsedTools', null)) ?? [],
|
||||
const [recentlyUsedTools, setRecentlyUsedTools] = useState<PageType[]>(() =>
|
||||
getSyncSnapshot('app/recentlyUsedTools', [], isValidPageList),
|
||||
);
|
||||
|
||||
const [isLoaded, setIsLoaded] = useState(false);
|
||||
@@ -112,39 +110,29 @@ export function RouterProvider({
|
||||
|
||||
const loadInitialData = useCallback(async () => {
|
||||
try {
|
||||
const stored = await storageUtil.getMany([
|
||||
syncKey,
|
||||
const savedRoute = await storageUtil.get(syncKey, defaultRoute);
|
||||
const savedVisiblePages = await storageUtil.get(
|
||||
visiblePagesKey,
|
||||
pageOrderKey,
|
||||
'app/recentlyUsedTools',
|
||||
'contextMenu/pendingData',
|
||||
]);
|
||||
|
||||
const savedRoute = (stored[syncKey] ?? defaultRoute) as PageType;
|
||||
const savedVisiblePages = (stored[visiblePagesKey] ??
|
||||
getDefaultVisibleFeatureKeys()) as PageType[];
|
||||
const savedPageOrder = (stored[pageOrderKey] ?? getDefaultPageOrder()) as PageType[];
|
||||
const savedRecentTools = (stored['app/recentlyUsedTools'] ?? []) as PageType[];
|
||||
getDefaultVisibleFeatureKeys(),
|
||||
);
|
||||
const savedPageOrder = await storageUtil.get(pageOrderKey, getDefaultPageOrder());
|
||||
const savedRecentTools = await storageUtil.get('app/recentlyUsedTools', []);
|
||||
|
||||
if (isValidPage(savedRoute) && syncRoute && !hasUserNavigatedRef.current) {
|
||||
setCurrentPage(savedRoute);
|
||||
}
|
||||
if (sanitizePageList(savedVisiblePages) !== null) {
|
||||
setVisiblePages(resolvePageList(savedVisiblePages, getDefaultVisibleFeatureKeys()));
|
||||
if (isValidPageList(savedVisiblePages)) {
|
||||
setVisiblePages(mergeWithDefaults(savedVisiblePages, getDefaultVisibleFeatureKeys()));
|
||||
}
|
||||
if (sanitizePageList(savedPageOrder) !== null) {
|
||||
setPageOrder(resolvePageList(savedPageOrder, getDefaultPageOrder()));
|
||||
if (isValidPageList(savedPageOrder) && savedPageOrder.length > 0) {
|
||||
setPageOrder(mergeWithDefaults(savedPageOrder, getDefaultPageOrder()));
|
||||
}
|
||||
const sanitizedRecentTools = sanitizePageList(savedRecentTools);
|
||||
if (sanitizedRecentTools !== null) {
|
||||
setRecentlyUsedTools(sanitizedRecentTools);
|
||||
if (isValidPageList(savedRecentTools)) {
|
||||
setRecentlyUsedTools(savedRecentTools);
|
||||
}
|
||||
canPersistRef.current = true;
|
||||
|
||||
return stored['contextMenu/pendingData'];
|
||||
} catch (error) {
|
||||
console.error('[Router Init Error] Core data fetch failed:', error);
|
||||
return undefined;
|
||||
} finally {
|
||||
setIsLoaded(true);
|
||||
}
|
||||
@@ -155,7 +143,7 @@ export function RouterProvider({
|
||||
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect -- Valid async data loading pattern on mount
|
||||
loadInitialData()
|
||||
.then((pendingData) => {
|
||||
.then(() => {
|
||||
if (cancelled) return;
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
@@ -177,13 +165,18 @@ export function RouterProvider({
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
pendingData &&
|
||||
isValidPage(pendingData.featureKey) &&
|
||||
Date.now() - pendingData.timestamp < CONTEXT_MENU_DATA_EXPIRY_MS
|
||||
) {
|
||||
setCurrentPage(pendingData.featureKey as PageType);
|
||||
}
|
||||
storageUtil
|
||||
.get('contextMenu/pendingData')
|
||||
.then((pendingData) => {
|
||||
if (
|
||||
pendingData &&
|
||||
isValidPage(pendingData.featureKey) &&
|
||||
Date.now() - pendingData.timestamp < CONTEXT_MENU_DATA_EXPIRY_MS
|
||||
) {
|
||||
setCurrentPage(pendingData.featureKey as PageType);
|
||||
}
|
||||
})
|
||||
.catch(console.error);
|
||||
})
|
||||
.catch(console.error);
|
||||
|
||||
@@ -253,21 +246,20 @@ export function RouterProvider({
|
||||
}
|
||||
if (changes[visiblePagesKey as string]) {
|
||||
const newPages = changes[visiblePagesKey as string].newValue;
|
||||
if (sanitizePageList(newPages) !== null) {
|
||||
setVisiblePages(resolvePageList(newPages, getDefaultVisibleFeatureKeys()));
|
||||
if (isValidPageList(newPages)) {
|
||||
setVisiblePages(mergeWithDefaults(newPages, getDefaultVisibleFeatureKeys()));
|
||||
}
|
||||
}
|
||||
if (changes[pageOrderKey as string]) {
|
||||
const newOrder = changes[pageOrderKey as string].newValue;
|
||||
if (sanitizePageList(newOrder) !== null) {
|
||||
setPageOrder(resolvePageList(newOrder, getDefaultPageOrder()));
|
||||
if (isValidPageList(newOrder)) {
|
||||
setPageOrder(mergeWithDefaults(newOrder, getDefaultPageOrder()));
|
||||
}
|
||||
}
|
||||
if (changes['app/recentlyUsedTools']) {
|
||||
const newRecent = changes['app/recentlyUsedTools'].newValue;
|
||||
const sanitizedRecent = sanitizePageList(newRecent);
|
||||
if (sanitizedRecent !== null) {
|
||||
setRecentlyUsedTools(sanitizedRecent);
|
||||
if (isValidPageList(newRecent)) {
|
||||
setRecentlyUsedTools(newRecent);
|
||||
}
|
||||
}
|
||||
if (changes['contextMenu/pendingData']) {
|
||||
@@ -299,6 +291,12 @@ export function RouterProvider({
|
||||
});
|
||||
};
|
||||
|
||||
const goHome = () => {
|
||||
hasUserNavigatedRef.current = true;
|
||||
canPersistRef.current = true;
|
||||
setCurrentPage('dashboard');
|
||||
};
|
||||
|
||||
return (
|
||||
<RouterContext.Provider
|
||||
value={{
|
||||
@@ -308,6 +306,7 @@ export function RouterProvider({
|
||||
recentlyUsedTools,
|
||||
isLoaded,
|
||||
navigateTo,
|
||||
goHome,
|
||||
setVisiblePages,
|
||||
setPageOrder,
|
||||
}}
|
||||
|
||||
@@ -13,7 +13,6 @@ import { storageUtil } from '@/utils/chromeStorage';
|
||||
import {
|
||||
applyResolvedThemeClass,
|
||||
getThemeSyncSnapshot,
|
||||
hasThemeSyncSnapshot,
|
||||
isValidThemeMode,
|
||||
persistThemeModeSnapshot,
|
||||
resolveThemeMode,
|
||||
@@ -69,10 +68,6 @@ export function ThemeModeProvider({ children }: ThemeModeProviderProps) {
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (hasThemeSyncSnapshot()) {
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
|
||||
storageUtil
|
||||
|
||||
@@ -7,24 +7,10 @@ import { storageUtil } from '@/utils/chromeStorage';
|
||||
vi.mock('@/utils/chromeStorage', () => ({
|
||||
storageUtil: {
|
||||
get: vi.fn(),
|
||||
getMany: vi.fn(),
|
||||
set: vi.fn(() => Promise.resolve()),
|
||||
},
|
||||
}));
|
||||
|
||||
/** 模拟批量 storage 读取，未指定的键由 Router 侧使用默认值 */
|
||||
function mockStorageBatch(map: Record<string, unknown> = {}) {
|
||||
(storageUtil.getMany as ReturnType<typeof vi.fn>).mockImplementation((keys: string[]) => {
|
||||
const result: Record<string, unknown> = {};
|
||||
for (const key of keys) {
|
||||
if (key in map) {
|
||||
result[key] = map[key];
|
||||
}
|
||||
}
|
||||
return Promise.resolve(result);
|
||||
});
|
||||
}
|
||||
|
||||
const TestComponent = () => {
|
||||
const { currentPage, navigateTo, visiblePages, pageOrder } = useRouter();
|
||||
return (
|
||||
@@ -60,10 +46,29 @@ describe('RouterProvider', () => {
|
||||
});
|
||||
|
||||
it('应该使用默认值初始化路由', async () => {
|
||||
mockStorageBatch();
|
||||
(storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
|
||||
Promise.resolve(defaultValue),
|
||||
);
|
||||
|
||||
render(
|
||||
<RouterProvider defaultRoute="timestamp">
|
||||
<RouterProvider defaultRoute="dashboard">
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard');
|
||||
});
|
||||
});
|
||||
|
||||
it('应该从指定的 syncKey 加载路由', async () => {
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key === 'app/sidepanelRoute') return Promise.resolve('timestamp');
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(
|
||||
<RouterProvider syncKey="app/sidepanelRoute">
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
@@ -71,32 +76,12 @@ describe('RouterProvider', () => {
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
|
||||
});
|
||||
|
||||
expect(storageUtil.getMany).toHaveBeenCalledWith([
|
||||
'app/currentRoute',
|
||||
'app/visiblePages',
|
||||
'app/pageOrder',
|
||||
'app/recentlyUsedTools',
|
||||
'contextMenu/pendingData',
|
||||
]);
|
||||
});
|
||||
|
||||
it('应该从指定的 syncKey 加载路由', async () => {
|
||||
mockStorageBatch({ 'app/popupRoute': 'jwt' });
|
||||
|
||||
render(
|
||||
<RouterProvider syncKey="app/popupRoute">
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('current-page')).toHaveTextContent('jwt');
|
||||
});
|
||||
});
|
||||
|
||||
it('导航时应该更新指定的 syncKey', async () => {
|
||||
mockStorageBatch();
|
||||
(storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
|
||||
Promise.resolve(defaultValue),
|
||||
);
|
||||
|
||||
render(
|
||||
<RouterProvider syncKey="app/popupRoute">
|
||||
@@ -105,7 +90,7 @@ describe('RouterProvider', () => {
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
|
||||
expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard');
|
||||
});
|
||||
|
||||
const btn = screen.getByTestId('navigate-btn');
|
||||
@@ -118,14 +103,36 @@ describe('RouterProvider', () => {
|
||||
expect(storageUtil.set).toHaveBeenCalledWith('app/popupRoute', 'timestamp');
|
||||
});
|
||||
|
||||
it('应该独立支持 visiblePagesKey 和 pageOrderKey，并合并缺失的新功能', async () => {
|
||||
mockStorageBatch({
|
||||
'app/popupVisiblePages': ['timestamp', 'storageCleaner'],
|
||||
'app/popupPageOrder': ['storageCleaner', 'timestamp'],
|
||||
it('应该支持独立的标签页路由同步', async () => {
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key === 'app/tabRoute') return Promise.resolve('qrCode');
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(
|
||||
<RouterProvider visiblePagesKey="app/popupVisiblePages" pageOrderKey="app/popupPageOrder">
|
||||
<RouterProvider syncKey="app/tabRoute">
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('current-page')).toHaveTextContent('qrCode');
|
||||
});
|
||||
});
|
||||
|
||||
it('应该独立支持 visiblePagesKey 和 pageOrderKey，并合并缺失的新功能', async () => {
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key === 'app/sidepanelVisiblePages')
|
||||
return Promise.resolve(['timestamp', 'storageCleaner']);
|
||||
if (key === 'app/sidepanelPageOrder') return Promise.resolve(['storageCleaner', 'timestamp']);
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(
|
||||
<RouterProvider
|
||||
visiblePagesKey="app/sidepanelVisiblePages"
|
||||
pageOrderKey="app/sidepanelPageOrder"
|
||||
>
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
@@ -143,6 +150,7 @@ describe('RouterProvider', () => {
|
||||
|
||||
it('应该将旧存储中缺失的新功能自动合并到 visiblePages 和 pageOrder', async () => {
|
||||
const oldVisiblePages = [
|
||||
'dashboard',
|
||||
'timestamp',
|
||||
'storageCleaner',
|
||||
'qrCode',
|
||||
@@ -159,9 +167,10 @@ describe('RouterProvider', () => {
|
||||
'jsonTools',
|
||||
];
|
||||
|
||||
mockStorageBatch({
|
||||
'app/popupVisiblePages': oldVisiblePages,
|
||||
'app/popupPageOrder': oldPageOrder,
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key === 'app/popupVisiblePages') return Promise.resolve(oldVisiblePages);
|
||||
if (key === 'app/popupPageOrder') return Promise.resolve(oldPageOrder);
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(
|
||||
@@ -174,78 +183,14 @@ describe('RouterProvider', () => {
|
||||
const visiblePages = screen.getByTestId('visible-pages').textContent!;
|
||||
const pageOrder = screen.getByTestId('page-order').textContent!;
|
||||
|
||||
expect(visiblePages.startsWith('timestamp,storageCleaner')).toBe(true);
|
||||
expect(visiblePages.startsWith('dashboard,timestamp')).toBe(true);
|
||||
expect(pageOrder.startsWith('timestamp,storageCleaner')).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
it('storage 中 dashboard 路由无效时应回退到 timestamp', async () => {
|
||||
mockStorageBatch({ 'app/popupRoute': 'dashboard' });
|
||||
|
||||
render(
|
||||
<RouterProvider syncKey="app/popupRoute" defaultRoute="timestamp">
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
|
||||
});
|
||||
});
|
||||
|
||||
it('storage 列表含 dashboard 时应过滤并保留其余自定义配置', async () => {
|
||||
mockStorageBatch({
|
||||
'app/popupVisiblePages': ['dashboard', 'jwt', 'timestamp'],
|
||||
'app/popupPageOrder': ['jwt', 'dashboard', 'timestamp'],
|
||||
'app/recentlyUsedTools': ['dashboard', 'jwt'],
|
||||
});
|
||||
|
||||
render(
|
||||
<RouterProvider visiblePagesKey="app/popupVisiblePages" pageOrderKey="app/popupPageOrder">
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const visiblePages = screen.getByTestId('visible-pages').textContent!;
|
||||
const pageOrder = screen.getByTestId('page-order').textContent!;
|
||||
|
||||
expect(visiblePages.startsWith('jwt,timestamp')).toBe(true);
|
||||
expect(pageOrder.startsWith('jwt,timestamp')).toBe(true);
|
||||
expect(visiblePages).not.toContain('dashboard');
|
||||
expect(pageOrder).not.toContain('dashboard');
|
||||
});
|
||||
});
|
||||
|
||||
it('localStorage 快照含 dashboard 时应过滤并保留其余配置', async () => {
|
||||
localStorage.setItem(
|
||||
'snapshot/app/popupVisiblePages',
|
||||
JSON.stringify(['dashboard', 'jwt', 'timestamp']),
|
||||
);
|
||||
localStorage.setItem(
|
||||
'snapshot/app/popupPageOrder',
|
||||
JSON.stringify(['jwt', 'dashboard', 'timestamp']),
|
||||
);
|
||||
|
||||
mockStorageBatch();
|
||||
|
||||
render(
|
||||
<RouterProvider visiblePagesKey="app/popupVisiblePages" pageOrderKey="app/popupPageOrder">
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
const visiblePages = screen.getByTestId('visible-pages').textContent!;
|
||||
const pageOrder = screen.getByTestId('page-order').textContent!;
|
||||
|
||||
expect(visiblePages.startsWith('jwt,timestamp')).toBe(true);
|
||||
expect(pageOrder.startsWith('jwt,timestamp')).toBe(true);
|
||||
expect(visiblePages).not.toContain('dashboard');
|
||||
expect(pageOrder).not.toContain('dashboard');
|
||||
});
|
||||
|
||||
it('应该从 localStorage 快照合并缺失的新功能', async () => {
|
||||
const oldVisiblePages = [
|
||||
'dashboard',
|
||||
'timestamp',
|
||||
'storageCleaner',
|
||||
'qrCode',
|
||||
@@ -264,7 +209,9 @@ describe('RouterProvider', () => {
|
||||
localStorage.setItem('snapshot/app/visiblePages', JSON.stringify(oldVisiblePages));
|
||||
localStorage.setItem('snapshot/app/pageOrder', JSON.stringify(oldPageOrder));
|
||||
|
||||
mockStorageBatch();
|
||||
(storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
|
||||
Promise.resolve(defaultValue),
|
||||
);
|
||||
|
||||
render(
|
||||
<RouterProvider>
|
||||
@@ -279,7 +226,9 @@ describe('RouterProvider', () => {
|
||||
});
|
||||
|
||||
it('storage.onChanged 同步 visiblePages 时应合并缺失的新功能', async () => {
|
||||
mockStorageBatch();
|
||||
(storageUtil.get as any).mockImplementation((_key: string, defaultValue: unknown) =>
|
||||
Promise.resolve(defaultValue),
|
||||
);
|
||||
|
||||
render(
|
||||
<RouterProvider visiblePagesKey="app/popupVisiblePages" pageOrderKey="app/popupPageOrder">
|
||||
@@ -295,6 +244,7 @@ describe('RouterProvider', () => {
|
||||
.calls[0][0] as (changes: Record<string, { newValue?: unknown }>) => void;
|
||||
|
||||
const oldVisiblePages = [
|
||||
'dashboard',
|
||||
'timestamp',
|
||||
'storageCleaner',
|
||||
'qrCode',
|
||||
@@ -322,7 +272,7 @@ describe('RouterProvider', () => {
|
||||
const visiblePages = screen.getByTestId('visible-pages').textContent!;
|
||||
const pageOrder = screen.getByTestId('page-order').textContent!;
|
||||
|
||||
expect(visiblePages.startsWith('timestamp,storageCleaner')).toBe(true);
|
||||
expect(visiblePages.startsWith('dashboard,timestamp')).toBe(true);
|
||||
expect(pageOrder.startsWith('timestamp,storageCleaner')).toBe(true);
|
||||
});
|
||||
});
|
||||
@@ -330,7 +280,7 @@ describe('RouterProvider', () => {
|
||||
it('localStorage 快照过期时，loadInitialData 完成前不应覆盖 chrome.storage', async () => {
|
||||
const staleRoute = 'timestamp';
|
||||
const correctRoute = 'jsonTools';
|
||||
const defaultVisible = ['timestamp', 'storageCleaner'];
|
||||
const defaultVisible = ['dashboard', 'timestamp', 'storageCleaner'];
|
||||
const defaultOrder = ['timestamp', 'storageCleaner'];
|
||||
|
||||
localStorage.setItem('snapshot/app/currentRoute', JSON.stringify(staleRoute));
|
||||
@@ -349,9 +299,9 @@ describe('RouterProvider', () => {
|
||||
resolveGet = resolve;
|
||||
});
|
||||
|
||||
(storageUtil.getMany as ReturnType<typeof vi.fn>).mockImplementation(async () => {
|
||||
(storageUtil.get as any).mockImplementation(async (key: string, defaultValue: unknown) => {
|
||||
await getBlocked;
|
||||
return Object.fromEntries(storage.entries());
|
||||
return storage.get(key) ?? defaultValue;
|
||||
});
|
||||
(storageUtil.set as any).mockImplementation(async (key: string, value: unknown) => {
|
||||
storage.set(key, value);
|
||||
@@ -374,9 +324,7 @@ describe('RouterProvider', () => {
|
||||
});
|
||||
|
||||
it('初始化失败时仍应解除加载状态以便渲染页面', async () => {
|
||||
(storageUtil.getMany as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error('Storage unavailable'),
|
||||
);
|
||||
(storageUtil.get as any).mockRejectedValue(new Error('Storage unavailable'));
|
||||
|
||||
render(
|
||||
<RouterProvider>
|
||||
@@ -385,7 +333,7 @@ describe('RouterProvider', () => {
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
|
||||
expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard');
|
||||
});
|
||||
expect(storageUtil.set).not.toHaveBeenCalled();
|
||||
});
|
||||
@@ -396,9 +344,10 @@ describe('RouterProvider', () => {
|
||||
resolveGet = resolve;
|
||||
});
|
||||
|
||||
(storageUtil.getMany as ReturnType<typeof vi.fn>).mockImplementation(async () => {
|
||||
(storageUtil.get as any).mockImplementation(async (key: string, defaultValue: unknown) => {
|
||||
await getBlocked;
|
||||
return { 'app/currentRoute': 'jwt' };
|
||||
if (key === 'app/currentRoute') return 'dashboard';
|
||||
return defaultValue;
|
||||
});
|
||||
|
||||
render(
|
||||
@@ -425,7 +374,7 @@ describe('RouterProvider', () => {
|
||||
resolveStorage = resolve;
|
||||
});
|
||||
|
||||
(storageUtil.getMany as ReturnType<typeof vi.fn>).mockImplementation(() => storagePromise);
|
||||
(storageUtil.get as any).mockImplementation(() => storagePromise);
|
||||
|
||||
const { unmount } = render(
|
||||
<RouterProvider>
|
||||
@@ -434,7 +383,7 @@ describe('RouterProvider', () => {
|
||||
);
|
||||
|
||||
unmount();
|
||||
resolveStorage!({});
|
||||
resolveStorage!('dashboard');
|
||||
|
||||
await act(async () => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
||||
|
||||
@@ -46,7 +46,6 @@ describe('ThemeModeProvider', () => {
|
||||
expect(screen.getByTestId('mode')).toHaveTextContent('dark');
|
||||
expect(screen.getByTestId('resolved-mode')).toHaveTextContent('dark');
|
||||
expect(document.documentElement.classList.contains('dark')).toBe(true);
|
||||
expect(storageUtil.get).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('异步恢复 storage 后应写回 snapshot', async () => {
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
@config "../../tailwind.pages.config.js";
|
||||
|
||||
@tailwind utilities;
|
||||
Vendored
-4
@@ -1,4 +0,0 @@
|
||||
declare module '*.css' {
|
||||
const css: string;
|
||||
export default css;
|
||||
}
|
||||
Vendored
+14
-1
@@ -2,6 +2,7 @@
|
||||
* 应用页面类型定义
|
||||
*/
|
||||
export type PageType =
|
||||
| 'dashboard' // 仪表盘/首页
|
||||
| 'timestamp' // 时间戳转换工具
|
||||
| 'storageCleaner' // 存储清理工具
|
||||
| 'qrCode' // 二维码工具
|
||||
@@ -65,10 +66,14 @@ export interface FormMapEntry {
|
||||
* 定义了所有持久化在客户端的数据结构
|
||||
*/
|
||||
export interface StorageSchema {
|
||||
/** RouterProvider 的默认路由键，仅当未显式传入 syncKey 时使用（popup 入口已覆盖） */
|
||||
/** RouterProvider 的默认路由键，仅当未显式传入 syncKey 时使用（popup/sidepanel/tab 入口已各自覆盖） */
|
||||
'app/currentRoute': PageType;
|
||||
/** Popup 窗口的当前路由 */
|
||||
'app/popupRoute': PageType;
|
||||
/** 侧边栏的当前路由 */
|
||||
'app/sidepanelRoute': PageType;
|
||||
/** 标签页的当前路由 */
|
||||
'app/tabRoute': PageType;
|
||||
/** RouterProvider 的默认可见页面列表键，仅当未显式传入 visiblePagesKey 时使用 */
|
||||
'app/visiblePages': PageType[];
|
||||
/** RouterProvider 的默认页面排序键，仅当未显式传入 pageOrderKey 时使用 */
|
||||
@@ -77,6 +82,14 @@ export interface StorageSchema {
|
||||
'app/popupVisiblePages': PageType[];
|
||||
/** Popup 窗口页面的显示顺序 */
|
||||
'app/popupPageOrder': PageType[];
|
||||
/** 侧边栏可见的页面列表 */
|
||||
'app/sidepanelVisiblePages': PageType[];
|
||||
/** 侧边栏页面的显示顺序 */
|
||||
'app/sidepanelPageOrder': PageType[];
|
||||
/** 标签页可见的页面列表 */
|
||||
'app/tabVisiblePages': PageType[];
|
||||
/** 标签页页面的显示顺序 */
|
||||
'app/tabPageOrder': PageType[];
|
||||
/** 应用主题配置 */
|
||||
'app/theme': string;
|
||||
/** 主题模式偏好（light/dark/system） */
|
||||
|
||||
@@ -37,7 +37,7 @@ describe('chromeStorage', () => {
|
||||
});
|
||||
|
||||
it('应该支持数组类型值', async () => {
|
||||
const pages = ['timestamp', 'jwt'] as const;
|
||||
const pages = ['dashboard', 'timestamp'] as const;
|
||||
(chrome.storage.local.get as any).mockResolvedValue({ 'app/visiblePages': pages });
|
||||
|
||||
const result = await storageUtil.get('app/visiblePages');
|
||||
@@ -75,27 +75,6 @@ describe('chromeStorage', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('getMany', () => {
|
||||
it('应该一次读取多个键', async () => {
|
||||
(chrome.storage.local.get as any).mockResolvedValue({
|
||||
'app/theme': 'dark',
|
||||
'app/popupRoute': 'timestamp',
|
||||
});
|
||||
|
||||
const result = await storageUtil.getMany(['app/theme', 'app/popupRoute']);
|
||||
|
||||
expect(result).toEqual({ 'app/theme': 'dark', 'app/popupRoute': 'timestamp' });
|
||||
expect(chrome.storage.local.get).toHaveBeenCalledWith(['app/theme', 'app/popupRoute']);
|
||||
});
|
||||
|
||||
it('空键数组应直接返回空对象', async () => {
|
||||
const result = await storageUtil.getMany([]);
|
||||
|
||||
expect(result).toEqual({});
|
||||
expect(chrome.storage.local.get).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('get 类型签名', () => {
|
||||
it('无默认值时应推断为可选返回类型', () => {
|
||||
const _getWithoutDefault = () => storageUtil.get('app/theme');
|
||||
@@ -126,7 +105,7 @@ describe('chromeStorage', () => {
|
||||
});
|
||||
|
||||
it('应该成功设置数组值', async () => {
|
||||
const pages: Array<'timestamp' | 'jwt'> = ['timestamp', 'jwt'];
|
||||
const pages: Array<'dashboard' | 'timestamp'> = ['dashboard', 'timestamp'];
|
||||
await storageUtil.set('app/visiblePages', pages);
|
||||
|
||||
expect(chrome.storage.local.set).toHaveBeenCalledWith({ 'app/visiblePages': pages });
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { openExtensionPage } from '@/utils/chromeTabs';
|
||||
|
||||
describe('chromeTabs', () => {
|
||||
describe('openExtensionPage', () => {
|
||||
it('应该在新标签页中打开扩展页面', async () => {
|
||||
await openExtensionPage('popup.html');
|
||||
|
||||
expect(chrome.runtime.getURL).toHaveBeenCalledWith('popup.html');
|
||||
expect(chrome.tabs.create).toHaveBeenCalledWith({
|
||||
url: 'chrome-extension://test-extension-id/popup.html',
|
||||
});
|
||||
});
|
||||
|
||||
it('当创建标签页失败时应记录错误', async () => {
|
||||
const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
|
||||
(chrome.tabs.create as any).mockRejectedValue(new Error('Tab creation failed'));
|
||||
|
||||
await openExtensionPage('popup.html');
|
||||
|
||||
expect(consoleSpy).toHaveBeenCalledWith('打开扩展页面失败:', expect.any(Error));
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -44,21 +44,18 @@ describe('messages', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('应该支持带数据的消息发送', async () => {
|
||||
it('应该支持不带数据的消息发送', async () => {
|
||||
const mockSendMessage = await getMockSendMessage();
|
||||
mockSendMessage.mockResolvedValue(undefined);
|
||||
|
||||
const mockTab = { id: 456, url: 'https://example.com' };
|
||||
(chrome.tabs.query as any).mockResolvedValue([mockTab]);
|
||||
|
||||
await sendMessageToContent(MessageAction.CONTEXT_MENU_CLICKED, {
|
||||
featureKey: 'timestamp',
|
||||
payload: '1234567890',
|
||||
});
|
||||
await sendMessageToContent(MessageAction.SIDE_PANEL_STATE_CHANGED, { isOpen: true });
|
||||
|
||||
expect(mockSendMessage).toHaveBeenCalledWith(
|
||||
MessageAction.CONTEXT_MENU_CLICKED,
|
||||
{ featureKey: 'timestamp', payload: '1234567890' },
|
||||
MessageAction.SIDE_PANEL_STATE_CHANGED,
|
||||
{ isOpen: true },
|
||||
456,
|
||||
);
|
||||
});
|
||||
|
||||
@@ -48,27 +48,6 @@ describe('ruleStorage', () => {
|
||||
expect(updated).toBeNull();
|
||||
});
|
||||
|
||||
it('save 带 id 时应更新已有规则而非新建', () => {
|
||||
const first = ruleStorage.save({
|
||||
name: 'Test Rule',
|
||||
fields: [mockField],
|
||||
});
|
||||
expect(first).not.toBeNull();
|
||||
|
||||
const updatedField = { ...mockField, name: 'email' };
|
||||
const updated = ruleStorage.save({
|
||||
id: first!.id,
|
||||
name: 'Test Rule',
|
||||
description: 'Updated',
|
||||
fields: [updatedField],
|
||||
});
|
||||
|
||||
expect(updated).not.toBeNull();
|
||||
expect(ruleStorage.getCount()).toBe(1);
|
||||
expect(ruleStorage.getById(first!.id)?.fields[0].name).toBe('email');
|
||||
expect(ruleStorage.getById(first!.id)?.description).toBe('Updated');
|
||||
});
|
||||
|
||||
it('deleteRule 在 localStorage 写入失败时应返回 false', () => {
|
||||
const saved = ruleStorage.save({
|
||||
name: 'Test Rule',
|
||||
|
||||
@@ -40,7 +40,6 @@ describe('useStorageState', () => {
|
||||
|
||||
// 初始值应从快照恢复，而非默认值
|
||||
expect(result.current[0]).toBe(false);
|
||||
expect(storageUtil.get).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('应该从 Chrome Storage 异步加载并覆盖初始值', async () => {
|
||||
@@ -180,6 +179,5 @@ describe('useStorageState', () => {
|
||||
await waitFor(() => {
|
||||
expect(storageUtil.set).not.toHaveBeenCalled();
|
||||
});
|
||||
expect(storageUtil.get).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -18,26 +18,13 @@ class StorageUtils {
|
||||
key: K,
|
||||
defaultValue?: StorageSchema[K],
|
||||
): Promise<StorageSchema[K] | undefined> {
|
||||
const result = await this.getMany([key]);
|
||||
const result = await chrome.storage.local.get([key]);
|
||||
if (defaultValue !== undefined) {
|
||||
return (result[key] ?? defaultValue) as StorageSchema[K];
|
||||
}
|
||||
return result[key] as StorageSchema[K] | undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量获取多个键（单次 IPC）
|
||||
*/
|
||||
async getMany<K extends keyof StorageSchema>(
|
||||
keys: readonly K[],
|
||||
): Promise<Partial<Pick<StorageSchema, K>>> {
|
||||
if (keys.length === 0) {
|
||||
return {};
|
||||
}
|
||||
const result = await chrome.storage.local.get([...keys]);
|
||||
return result as Partial<Pick<StorageSchema, K>>;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置值
|
||||
* @param key
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
/**
|
||||
* Chrome 标签页相关工具函数
|
||||
*/
|
||||
|
||||
/**
|
||||
* 在新标签页中打开扩展页面
|
||||
* @param page - 扩展页面路径（如 'popup.html'）
|
||||
* @param params - 可选的查询参数
|
||||
*/
|
||||
export async function openExtensionPage(
|
||||
page: string,
|
||||
params?: Record<string, string>,
|
||||
): Promise<void> {
|
||||
try {
|
||||
const url = new URL(chrome.runtime.getURL(page));
|
||||
if (params) {
|
||||
Object.entries(params).forEach(([key, value]) => url.searchParams.set(key, value));
|
||||
}
|
||||
await chrome.tabs.create({ url: url.toString() });
|
||||
} catch (error) {
|
||||
console.error('打开扩展页面失败:', error);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { defineExtensionMessaging } from '@webext-core/messaging';
|
||||
|
||||
export enum MessageAction {
|
||||
SIDE_PANEL_STATE_CHANGED = 'sidePanelStateChanged',
|
||||
CONTEXT_MENU_CLICKED = 'contextMenuClicked',
|
||||
RESTORE_RIGHT_CLICK = 'restoreRightClick',
|
||||
QUERY_RIGHT_CLICK_STATUS = 'queryRightClickStatus',
|
||||
@@ -19,6 +20,7 @@ export interface ContextMenuClickedPayload {
|
||||
}
|
||||
|
||||
export interface ProtocolMap {
|
||||
[MessageAction.SIDE_PANEL_STATE_CHANGED](data: { isOpen: boolean }): void;
|
||||
[MessageAction.CONTEXT_MENU_CLICKED](data: ContextMenuClickedPayload): void;
|
||||
[MessageAction.RESTORE_RIGHT_CLICK](data: undefined): MessageResponse & { restored: boolean };
|
||||
[MessageAction.QUERY_RIGHT_CLICK_STATUS](
|
||||
|
||||
@@ -1,14 +1,3 @@
|
||||
/**
|
||||
* 检查 localStorage 中是否存在指定键的快照
|
||||
*/
|
||||
export function hasSyncSnapshot(key: string): boolean {
|
||||
try {
|
||||
return localStorage.getItem(`snapshot/${key}`) !== null;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 从 localStorage 获取同步快照（用于消除异步加载产生的首屏闪烁）
|
||||
*/
|
||||
|
||||
@@ -9,15 +9,6 @@ const VALID_MODES: ThemeMode[] = ['light', 'dark', 'system'];
|
||||
export const isValidThemeMode = (value: unknown): value is ThemeMode =>
|
||||
VALID_MODES.includes(value as ThemeMode);
|
||||
|
||||
/** 检查 localStorage 中是否存在主题快照 */
|
||||
export const hasThemeSyncSnapshot = (): boolean => {
|
||||
try {
|
||||
return localStorage.getItem(THEME_MODE_SNAPSHOT_KEY) !== null;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 同步读取 localStorage 快照（首屏防闪烁）
|
||||
*/
|
||||
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
type SetStateAction,
|
||||
} from 'react';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
import { getSyncSnapshot, hasSyncSnapshot } from '@/utils/syncSnapshot';
|
||||
import { getSyncSnapshot } from '@/utils/syncSnapshot';
|
||||
import type { StorageSchema } from '@/types/storage';
|
||||
|
||||
export const useStorageState = <K extends keyof StorageSchema>(
|
||||
@@ -34,14 +34,6 @@ export const useStorageState = <K extends keyof StorageSchema>(
|
||||
let cancelled = false;
|
||||
|
||||
const loadState = async () => {
|
||||
if (hasSyncSnapshot(key as string)) {
|
||||
if (!cancelled) {
|
||||
setIsInitialized(true);
|
||||
hasLoadedFromStorage.current = true;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const savedValue = await storageUtil.get(key, defaultValue);
|
||||
if (cancelled) return;
|
||||
|
||||
@@ -14,14 +14,10 @@ import type {
|
||||
/** 每生成 N 行让出一次事件循环，以便处理 cancel 消息 */
|
||||
const YIELD_EVERY = 100;
|
||||
|
||||
/** 当前活跃生成任务 ID；新 start 会 supersede 旧任务 */
|
||||
let activeGenerationId: number | null = null;
|
||||
// 生成结果缓存
|
||||
let generatedData: Record<string, unknown>[] = [];
|
||||
let isCancelled = false;
|
||||
|
||||
function shouldAbort(generationId: number): boolean {
|
||||
return isCancelled || generationId !== activeGenerationId;
|
||||
}
|
||||
|
||||
/**
|
||||
* Worker 消息处理器
|
||||
*/
|
||||
@@ -31,17 +27,12 @@ self.onmessage = async (e: MessageEvent<WorkerRequestMessage>) => {
|
||||
|
||||
switch (type) {
|
||||
case 'start':
|
||||
activeGenerationId = data.payload.generationId;
|
||||
isCancelled = false;
|
||||
await handleStart(data.payload);
|
||||
break;
|
||||
case 'cancel':
|
||||
isCancelled = true;
|
||||
break;
|
||||
default: {
|
||||
const _exhaustive: never = type;
|
||||
return _exhaustive;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -55,7 +46,7 @@ async function handleStart(payload: {
|
||||
csvMode: boolean;
|
||||
}): Promise<void> {
|
||||
const { generationId, fields, count } = payload;
|
||||
const generatedData: Record<string, unknown>[] = [];
|
||||
generatedData = [];
|
||||
|
||||
try {
|
||||
// 验证所有生成器是否存在
|
||||
@@ -76,17 +67,15 @@ async function handleStart(payload: {
|
||||
|
||||
// 生成数据
|
||||
for (let i = 0; i < count; i++) {
|
||||
if (shouldAbort(generationId)) {
|
||||
if (generationId === activeGenerationId) {
|
||||
self.postMessage({
|
||||
type: 'complete',
|
||||
generationId,
|
||||
payload: {
|
||||
success: false,
|
||||
error: '生成已取消',
|
||||
},
|
||||
});
|
||||
}
|
||||
if (isCancelled) {
|
||||
self.postMessage({
|
||||
type: 'complete',
|
||||
generationId,
|
||||
payload: {
|
||||
success: false,
|
||||
error: '生成已取消',
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -159,26 +148,20 @@ async function handleStart(payload: {
|
||||
// 定期让出事件循环，使 cancel 消息能被处理
|
||||
if ((i + 1) % YIELD_EVERY === 0) {
|
||||
await new Promise<void>((resolve) => setTimeout(resolve, 0));
|
||||
if (shouldAbort(generationId)) {
|
||||
if (generationId === activeGenerationId) {
|
||||
self.postMessage({
|
||||
type: 'complete',
|
||||
generationId,
|
||||
payload: {
|
||||
success: false,
|
||||
error: '生成已取消',
|
||||
},
|
||||
});
|
||||
}
|
||||
if (isCancelled) {
|
||||
self.postMessage({
|
||||
type: 'complete',
|
||||
generationId,
|
||||
payload: {
|
||||
success: false,
|
||||
error: '生成已取消',
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (shouldAbort(generationId)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const duration = Date.now() - startTime;
|
||||
const successCount = generatedData.filter((item) => Object.keys(item).length > 0).length;
|
||||
|
||||
|
||||
+34
-1
@@ -1 +1,34 @@
|
||||
export { default } from './tailwind.shell.config.js';
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
darkMode: 'class',
|
||||
content: ['./entrypoints/**/*.{js,ts,jsx,tsx}', './src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
card: 'hsl(var(--card))',
|
||||
'card-foreground': 'hsl(var(--card-foreground))',
|
||||
popover: 'hsl(var(--popover))',
|
||||
'popover-foreground': 'hsl(var(--popover-foreground))',
|
||||
primary: 'hsl(var(--primary))',
|
||||
'primary-foreground': 'hsl(var(--primary-foreground))',
|
||||
secondary: 'hsl(var(--secondary))',
|
||||
'secondary-foreground': 'hsl(var(--secondary-foreground))',
|
||||
muted: 'hsl(var(--muted))',
|
||||
'muted-foreground': 'hsl(var(--muted-foreground))',
|
||||
accent: 'hsl(var(--accent))',
|
||||
'accent-foreground': 'hsl(var(--accent-foreground))',
|
||||
destructive: 'hsl(var(--destructive))',
|
||||
'destructive-foreground': 'hsl(var(--destructive-foreground))',
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
},
|
||||
borderRadius: {
|
||||
DEFAULT: 'var(--radius)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
import { sharedTheme } from './tailwind.shared.js';
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
darkMode: 'class',
|
||||
content: [
|
||||
'./src/pages/**/*.{js,ts,jsx,tsx}',
|
||||
'./src/components/CopyButton.tsx',
|
||||
'./src/components/TextInputArea.tsx',
|
||||
'./src/components/SwitchButtonGroup.tsx',
|
||||
'./src/components/EmptyPlaceholder.tsx',
|
||||
'./src/components/ui/badge.tsx',
|
||||
'./src/components/ui/checkbox.tsx',
|
||||
'./src/components/ui/dialog.tsx',
|
||||
'./src/components/ui/label.tsx',
|
||||
'./src/components/ui/select.tsx',
|
||||
'./src/components/ui/switch.tsx',
|
||||
'./src/styles/pages.css',
|
||||
],
|
||||
theme: sharedTheme,
|
||||
plugins: [],
|
||||
};
|
||||
@@ -1,29 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config['theme']} */
|
||||
export const sharedTheme = {
|
||||
extend: {
|
||||
colors: {
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
card: 'hsl(var(--card))',
|
||||
'card-foreground': 'hsl(var(--card-foreground))',
|
||||
popover: 'hsl(var(--popover))',
|
||||
'popover-foreground': 'hsl(var(--popover-foreground))',
|
||||
primary: 'hsl(var(--primary))',
|
||||
'primary-foreground': 'hsl(var(--primary-foreground))',
|
||||
secondary: 'hsl(var(--secondary))',
|
||||
'secondary-foreground': 'hsl(var(--secondary-foreground))',
|
||||
muted: 'hsl(var(--muted))',
|
||||
'muted-foreground': 'hsl(var(--muted-foreground))',
|
||||
accent: 'hsl(var(--accent))',
|
||||
'accent-foreground': 'hsl(var(--accent-foreground))',
|
||||
destructive: 'hsl(var(--destructive))',
|
||||
'destructive-foreground': 'hsl(var(--destructive-foreground))',
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
},
|
||||
borderRadius: {
|
||||
DEFAULT: 'var(--radius)',
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,22 +0,0 @@
|
||||
import { sharedTheme } from './tailwind.shared.js';
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
darkMode: 'class',
|
||||
content: [
|
||||
'./src/entrypoints/**/*.{js,ts,jsx,tsx}',
|
||||
'./src/layout/**/*.{js,ts,jsx,tsx}',
|
||||
'./src/providers/**/*.{js,ts,jsx,tsx}',
|
||||
'./src/components/RouterContainer.tsx',
|
||||
'./src/components/ErrorBoundary.tsx',
|
||||
'./src/components/ErrorFallback.tsx',
|
||||
'./src/components/PageErrorBoundary.tsx',
|
||||
'./src/components/PageSkeleton.tsx',
|
||||
'./src/components/ui/button.tsx',
|
||||
'./src/components/ui/input.tsx',
|
||||
'./src/components/ui/sonner.tsx',
|
||||
'./src/styles/shell.css',
|
||||
],
|
||||
theme: sharedTheme,
|
||||
plugins: [],
|
||||
};
|
||||
+20
-6
@@ -22,10 +22,14 @@ function manualChunksForHtmlOnly(): Plugin {
|
||||
) {
|
||||
return 'vendor-react';
|
||||
}
|
||||
|
||||
// qrious / qr-scanner / @dnd-kit 不单独拆 vendor chunk：
|
||||
// 独立 vendor 会与 Vite preload 辅助函数共 chunk，被 App Shell 静态拉取。
|
||||
// 这些依赖随各自页面 async chunk 加载即可。
|
||||
// 二维码活态感知依赖分流
|
||||
if (id.includes('qr-scanner') || id.includes('qrious')) {
|
||||
return 'vendor-qr';
|
||||
}
|
||||
// 拖拽排序高级组件分流
|
||||
if (id.includes('@dnd-kit')) {
|
||||
return 'vendor-dnd';
|
||||
}
|
||||
|
||||
return undefined;
|
||||
},
|
||||
@@ -41,7 +45,15 @@ export default defineConfig({
|
||||
name: 'Testing Tool',
|
||||
description: 'A tool for testing web applications.',
|
||||
version_name: undefined,
|
||||
permissions: ['storage', 'clipboardWrite', 'scripting', 'tabs', 'cookies', 'contextMenus'],
|
||||
permissions: [
|
||||
'storage',
|
||||
'clipboardWrite',
|
||||
'scripting',
|
||||
'tabs',
|
||||
'cookies',
|
||||
'sidePanel',
|
||||
'contextMenus',
|
||||
],
|
||||
host_permissions: ['<all_urls>'],
|
||||
icons: {
|
||||
'16': 'icon/16.png',
|
||||
@@ -58,11 +70,13 @@ export default defineConfig({
|
||||
'48': 'icon/48.png',
|
||||
},
|
||||
},
|
||||
side_panel: {
|
||||
default_path: 'entrypoints/sidepanel/index.html',
|
||||
},
|
||||
},
|
||||
vite: () => ({
|
||||
plugins: [manualChunksForHtmlOnly()],
|
||||
build: {
|
||||
modulePreload: false,
|
||||
minify: 'terser',
|
||||
terserOptions: {
|
||||
format: { ascii_only: true, comments: false },
|
||||
|
||||
Reference in New Issue
Block a user