Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 LingandRX
|
945780def8 | ||
|
LingandRX
|
d4c29a1bf4 | ||
|
LingandRX
|
42d3fedbaa |
+31
-32
@@ -79,12 +79,12 @@ export function isSupportedImageType(mimeType: string): boolean {
|
||||
|
||||
| 场景 | 导出方式 | 示例 |
|
||||
| ----------- | ------------------------------------------------ | --------------------------------- |
|
||||
| 页面组件 | `export default function ComponentName()` | `pages/Timestamp/index.tsx` |
|
||||
| 页面组件 | `export default function ComponentName()` | `src/pages/Timestamp/index.tsx` |
|
||||
| 业务组件 | `const X = React.memo(...)` + `export default X` | `LiveClock.tsx`, `ResultView.tsx` |
|
||||
| UI 原子组件 | `React.forwardRef(...)` + `export { X }` | `components/ui/button.tsx` |
|
||||
| 工具函数 | `export function xxx()` | `utils/clipboard.ts` |
|
||||
| 自定义 Hook | `export function useXxx()` | `utils/useStorageState.ts` |
|
||||
| 类型/接口 | `export interface` / `export type` | `types/storage.d.ts` |
|
||||
| UI 原子组件 | `React.forwardRef(...)` + `export { X }` | `src/components/ui/button.tsx` |
|
||||
| 工具函数 | `export function xxx()` | `src/utils/clipboard.ts` |
|
||||
| 自定义 Hook | `export function useXxx()` | `src/utils/useStorageState.ts` |
|
||||
| 类型/接口 | `export interface` / `export type` | `src/types/storage.d.ts` |
|
||||
|
||||
```typescript
|
||||
// ✅ 页面组件 — default export
|
||||
@@ -473,7 +473,7 @@ import ErrorBoundary from '@/components/ErrorBoundary';
|
||||
| 类型 | 命名模式 | 示例 |
|
||||
| ----------- | -------------------------- | -------------------------------------------------------- |
|
||||
| 页面目录 | PascalCase | `Timestamp/`, `Base64Converter/`, `StorageCleaner/` |
|
||||
| 页面入口 | `index.tsx` | `pages/Timestamp/index.tsx` |
|
||||
| 页面入口 | `index.tsx` | `src/pages/Timestamp/index.tsx` |
|
||||
| 组件文件 | PascalCase `.tsx` | `TopBar.tsx`, `LiveClock.tsx`, `ResultView.tsx` |
|
||||
| 自定义 Hook | camelCase `.ts` | `useTimestampConverter.ts`, `useStorageCleaner.ts` |
|
||||
| 工具函数 | camelCase `.ts` | `chromeStorage.ts`, `base64Converter.ts`, `clipboard.ts` |
|
||||
@@ -527,12 +527,12 @@ const handleClean = useCallback(async () => { ... }, []);
|
||||
测试文件放在源代码同级的 `__tests__/` 目录下：
|
||||
|
||||
```
|
||||
utils/__tests__/jwt.test.ts
|
||||
utils/__tests__/base64Converter.test.ts
|
||||
utils/__tests__/useStorageState.test.ts
|
||||
components/__tests__/SwitchButtonGroup.test.tsx
|
||||
components/__tests__/ErrorBoundary.test.tsx
|
||||
pages/Timestamp/__tests__/index.test.tsx
|
||||
src/utils/__tests__/jwt.test.ts
|
||||
src/utils/__tests__/base64Converter.test.ts
|
||||
src/utils/__tests__/useStorageState.test.ts
|
||||
src/components/__tests__/SwitchButtonGroup.test.tsx
|
||||
src/components/__tests__/ErrorBoundary.test.tsx
|
||||
src/pages/Timestamp/__tests__/index.test.tsx
|
||||
```
|
||||
|
||||
### 7.2 describe / it 命名
|
||||
@@ -653,16 +653,16 @@ export function useTimestampConverter(): UseTimestampConverterReturn { ... }
|
||||
|
||||
### 8.2 Hook 存放位置
|
||||
|
||||
- **全局通用 Hook**：放在 `utils/` 目录下
|
||||
- **全局通用 Hook**：放在 `src/utils/` 目录下
|
||||
- **页面专属 Hook**：与页面组件同目录
|
||||
|
||||
```
|
||||
utils/useStorageState.ts — Chrome Storage 状态持久化
|
||||
utils/useLazyTranslation.ts — i18n 懒加载
|
||||
utils/useContextMenuData.ts — 右键菜单数据
|
||||
utils/useDebounce.ts — 防抖
|
||||
pages/Timestamp/useTimestampConverter.ts — 页面级 Hook
|
||||
pages/StorageCleaner/useStorageCleaner.ts — 页面级 Hook
|
||||
src/utils/useStorageState.ts — Chrome Storage 状态持久化
|
||||
src/utils/useLazyTranslation.ts — i18n 懒加载
|
||||
src/utils/useContextMenuData.ts — 右键菜单数据
|
||||
src/utils/useDebounce.ts — 防抖
|
||||
src/pages/Timestamp/useTimestampConverter.ts — 页面级 Hook
|
||||
src/pages/StorageCleaner/useStorageCleaner.ts — 页面级 Hook
|
||||
```
|
||||
|
||||
---
|
||||
@@ -767,7 +767,7 @@ const [themeMode, setThemeMode, isInitialized] = useStorageState(
|
||||
### 11.1 页面组件结构
|
||||
|
||||
```
|
||||
pages/FeatureName/
|
||||
src/pages/FeatureName/
|
||||
├── index.tsx # 页面 UI（纯展示，使用 shadcn/ui 组件）
|
||||
├── useFeatureName.ts # 业务逻辑 Hook（状态管理 + 转换逻辑）
|
||||
├── constants.ts # 常量定义（可选）
|
||||
@@ -780,18 +780,17 @@ pages/FeatureName/
|
||||
### 11.2 目录职责
|
||||
|
||||
| 目录 | 职责 |
|
||||
| ---------------- | ------------------------------------------------------------ |
|
||||
| `config/` | 应用配置（功能定义、路由映射） |
|
||||
| `entrypoints/` | 扩展入口点（popup、options、sidepanel、background、content） |
|
||||
| `pages/` | 功能页面组件（懒加载） |
|
||||
| `components/` | 可复用 UI 组件 |
|
||||
| `components/ui/` | shadcn/ui 基础组件（button、dialog、select 等） |
|
||||
| `providers/` | React Context（Router、Theme 等） |
|
||||
| `hooks/` | 自定义 React Hooks |
|
||||
| `utils/` | 工具函数与服务抽象 |
|
||||
| `types/` | TypeScript 类型声明 |
|
||||
| `lib/` | 通用工具函数（cn、utils） |
|
||||
| `i18n/` | 国际化资源 |
|
||||
| -------------------- | ------------------------------------------------------------ |
|
||||
| `src/config/` | 应用配置（功能定义、路由映射） |
|
||||
| `src/entrypoints/` | 扩展入口点（popup、options、sidepanel、background、content） |
|
||||
| `src/pages/` | 功能页面组件（懒加载） |
|
||||
| `src/components/` | 可复用 UI 组件 |
|
||||
| `src/components/ui/` | shadcn/ui 基础组件（button、dialog、select 等） |
|
||||
| `src/providers/` | React Context（Router、Theme 等） |
|
||||
| `src/hooks/` | 自定义 React Hooks |
|
||||
| `src/utils/` | 工具函数与服务抽象 |
|
||||
| `src/types/` | TypeScript 类型声明 |
|
||||
| `src/lib/` | 通用工具函数（cn、utils） |
|
||||
| `public/` | 静态资源 |
|
||||
|
||||
---
|
||||
|
||||
@@ -102,7 +102,7 @@ pages/FeatureName/
|
||||
|
||||
### 代码分割
|
||||
|
||||
`wxt.config.ts` 通过 `manualChunksForHtmlOnly()` 自动分组 vendor 依赖（vendor-react、vendor-i18n、vendor-qr、vendor-dnd、vendor-markdown），无需手动配置。
|
||||
`wxt.config.ts` 通过 `manualChunksForHtmlOnly()` 自动分组 vendor 依赖（vendor-react、vendor-i18n、vendor-qr、vendor-dnd），无需手动配置。
|
||||
|
||||
### 代码风格
|
||||
|
||||
|
||||
@@ -13,8 +13,6 @@ concurrency:
|
||||
cancel-in-progress: true
|
||||
|
||||
jobs:
|
||||
# 💡 1. 提速核心：前置基建节点（Infrastructure Initialization）
|
||||
# 专门负责锁死环境、同步下载并缓存 node_modules，下游节点直接满血复用！
|
||||
setup:
|
||||
name: Prepare Dependencies
|
||||
runs-on: ubuntu-latest
|
||||
@@ -29,7 +27,6 @@ jobs:
|
||||
with:
|
||||
node-version: '22'
|
||||
|
||||
# 建立基于 package-lock.json 唯一哈希的缓存大闸
|
||||
- name: Cache Node Modules
|
||||
id: cache-nodemodules
|
||||
uses: actions/cache@v4
|
||||
@@ -47,7 +44,6 @@ jobs:
|
||||
id: cache-info
|
||||
run: echo "key=${{ runner.os }}-node-v22-${{ hashFiles('**/package-lock.json') }}" >> $GITHUB_OUTPUT
|
||||
|
||||
# 💡 2. 静态语法质检节点（依赖前置节点完成）
|
||||
lint:
|
||||
name: Lint
|
||||
runs-on: ubuntu-latest
|
||||
@@ -70,7 +66,6 @@ jobs:
|
||||
- name: Run ESLint
|
||||
run: npm run lint
|
||||
|
||||
# 💡 3. 强类型守卫节点（2秒瞬时恢复，开箱即查）
|
||||
typecheck:
|
||||
name: TypeScript Check
|
||||
runs-on: ubuntu-latest
|
||||
@@ -96,7 +91,6 @@ jobs:
|
||||
- name: Run TypeScript type check
|
||||
run: npm run typecheck
|
||||
|
||||
# 💡 4. 单元测试节点（无缝运行你刚刚修复完的 setupTests.ts 套件）
|
||||
test:
|
||||
name: Unit Tests
|
||||
runs-on: ubuntu-latest
|
||||
@@ -122,16 +116,12 @@ jobs:
|
||||
- name: Run tests
|
||||
run: npm run test
|
||||
|
||||
# 💡 5. 多端分布式最终编译节点（Production Matrix Compliance）
|
||||
build:
|
||||
name: Build (${{ matrix.browser }})
|
||||
runs-on: ubuntu-latest
|
||||
# 只有当 Linter、类型大闸、Vitest 单元测试全数满分通过，才放行最终打包编译
|
||||
needs: [ lint, typecheck, test ]
|
||||
strategy:
|
||||
matrix:
|
||||
# 💡 完美对齐 WXT 跨端架构：将 firefox 同步纳入生产编译大矩阵，
|
||||
# 如果 firefox 编译因任何多端不兼容挂掉，CI 会立刻拉起警报，防护力拉满！
|
||||
browser: [ chrome, firefox ]
|
||||
fail-fast: false
|
||||
steps:
|
||||
@@ -149,7 +139,6 @@ jobs:
|
||||
path: node_modules
|
||||
key: ${{ runner.os }}-node-v22-${{ hashFiles('**/package-lock.json') }}
|
||||
|
||||
# 💡 动态代理编译指令：完美匹配 WXT / 各类多端打包器的标准构建命令
|
||||
- name: Generate WXT types
|
||||
run: npx wxt prepare
|
||||
|
||||
|
||||
@@ -43,8 +43,9 @@ Pre-commit hook（`.husky/pre-commit` 调用 `lint-staged`，任一步骤返回
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
src/ # 源代码根目录
|
||||
config/features.tsx # 功能定义（路由 + 元数据的单一事实来源）
|
||||
entrypoints/ # 扩展入口点 (popup/, options/, sidepanel/, background.ts, content.ts)
|
||||
entrypoints/ # 扩展入口点 (popup/, sidepanel/, background.ts, content.ts)
|
||||
pages/ # 功能页面组件 (懒加载)
|
||||
components/ # 可复用 UI 组件
|
||||
components/ui/ # shadcn/ui 基础组件 (button, dialog, select 等)
|
||||
@@ -52,7 +53,8 @@ providers/ # React Context (Router, Theme 等)
|
||||
hooks/ # 自定义 React Hooks
|
||||
utils/ # 工具函数与服务抽象
|
||||
types/ # TypeScript 类型声明
|
||||
i18n/locales/{zh,en}/ # 国际化资源 (common.json, features.json 及各功能独立 JSON)
|
||||
lib/ # 通用工具函数（cn、utils）
|
||||
public/ # 静态资源（图标、_locales 等）
|
||||
```
|
||||
|
||||
### 页面组件模式
|
||||
@@ -60,7 +62,7 @@ i18n/locales/{zh,en}/ # 国际化资源 (common.json, features.json 及各功
|
||||
典型功能页面遵循 **UI + Hook 分离** 模式：
|
||||
|
||||
```
|
||||
pages/FeatureName/
|
||||
src/pages/FeatureName/
|
||||
├── index.tsx # 页面 UI（纯展示，使用 shadcn/ui 组件）
|
||||
├── useFeatureName.ts # 业务逻辑 Hook（状态管理 + 转换逻辑）
|
||||
└── constants.ts # 常量定义
|
||||
@@ -72,15 +74,15 @@ pages/FeatureName/
|
||||
|
||||
## 关键架构决策
|
||||
|
||||
**路由**: 不使用 React Router。通过 `config/features.tsx` 的 `FEATURES` 数组管理，`RouterProvider` 根据 `PageType`
|
||||
**路由**: 不使用 React Router。通过 `src/config/features.tsx` 的 `FEATURES` 数组管理，`RouterProvider` 根据 `PageType`
|
||||
渲染对应组件。支持三种渲染模式：popup（弹窗）、sidepanel（侧边栏）和 browser-tab（浏览器新标签页，通过 `open_in_tab` 打开）。
|
||||
每种模式有独立的路由和可见页面配置（`app/popupRoute`、`app/sidepanelRoute`、`app/tabRoute` 等）。
|
||||
|
||||
**存储**: 所有 Chrome Storage 键必须在 `types/storage.d.ts` 的 `StorageSchema` 中定义，键名使用 kebab-case 格式（如 `app/currentRoute`）。
|
||||
使用 `utils/chromeStorage.ts` 及其 Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照以消除首屏闪烁。
|
||||
修改 StorageSchema 时，必须在 `utils/chromeStorage.ts` 添加版本迁移函数，并在测试中覆盖迁移场景。
|
||||
**存储**: 所有 Chrome Storage 键必须在 `src/types/storage.d.ts` 的 `StorageSchema` 中定义，键名使用 kebab-case 格式（如 `app/currentRoute`）。
|
||||
使用 `src/utils/chromeStorage.ts` 及其 Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照以消除首屏闪烁。
|
||||
修改 StorageSchema 时，必须在 `src/utils/chromeStorage.ts` 添加版本迁移函数，并在测试中覆盖迁移场景。
|
||||
|
||||
**通信**: 使用 `@webext-core/messaging`，协议定义在 `utils/messages.ts`。
|
||||
**通信**: 使用 `@webext-core/messaging`，协议定义在 `src/utils/messages.ts`。
|
||||
|
||||
**路径别名**: `@/` 映射到项目根目录 (已在 tsconfig 和 vitest.config 中配置)。
|
||||
|
||||
@@ -116,9 +118,9 @@ pages/FeatureName/
|
||||
|
||||
## 新功能开发清单
|
||||
|
||||
1. 在 `types/storage.d.ts` 添加 `PageType` 联合类型
|
||||
2. 在 `config/features.tsx` 的 `FEATURES` 数组添加配置（指定 key、翻译键、图标、三种渲染模式的组件）
|
||||
3. 在 `pages/` 创建页面组件 (懒加载)：
|
||||
1. 在 `src/types/storage.d.ts` 添加 `PageType` 联合类型
|
||||
2. 在 `src/config/features.tsx` 的 `FEATURES` 数组添加配置（指定 key、翻译键、图标、三种渲染模式的组件）
|
||||
3. 在 `src/pages/` 创建页面组件 (懒加载)：
|
||||
- `index.tsx` — UI 组件，使用 `useLazyTranslation` 获取翻译
|
||||
- `useFeatureName.ts` — 业务逻辑 Hook
|
||||
- `constants.ts` — 常量（可选）
|
||||
@@ -131,7 +133,7 @@ pages/FeatureName/
|
||||
- 禁止使用 `any` (测试文件除外)
|
||||
- 未使用变量/参数: 使用 `_` 前缀 (如 `_unused`)
|
||||
- 样式: 使用 Tailwind CSS + shadcn/ui (通过 `className` 和 `cn()` 工具)
|
||||
- UI 组件: 优先使用 `components/ui/` 下的 shadcn/ui 组件 (button, dialog, select 等)
|
||||
- UI 组件: 优先使用 `src/components/ui/` 下的 shadcn/ui 组件 (button, dialog, select 等)
|
||||
- 图标: 使用 `lucide-react` 图标库
|
||||
- 格式: Prettier (`.prettierrc`: 100 字符宽, 单引号, 尾逗号 all, LF 换行)
|
||||
- ESLint 使用 `typescript-eslint` 的 `projectService: true`（无需手动维护 project 路径）
|
||||
@@ -140,7 +142,6 @@ pages/FeatureName/
|
||||
|
||||
- `@webext-core/messaging` — 扩展消息通信
|
||||
- `@dnd-kit` — 拖拽排序（用于页面顺序管理）
|
||||
- `marked` — Markdown 解析
|
||||
- `qrious` + `qr-scanner` — 二维码生成与解析
|
||||
- `dayjs` — 日期处理（时间戳转换）
|
||||
- `sonner` — Toast 通知（替代传统 snackbar）
|
||||
|
||||
@@ -63,11 +63,6 @@
|
||||
- **文件转换**: 支持文件与 Base64 字符串互转.
|
||||
- **图像预览**: 支持图片 Base64 编码与实时预览.
|
||||
|
||||
### 📝 Markdown ↔ HTML 转换
|
||||
|
||||
- **Markdown 转 HTML**: 实时预览 Markdown 渲染结果，支持导出 HTML 源码.
|
||||
- **HTML 转 Markdown**: 将 HTML 内容转换为 Markdown 格式.
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **框架**: [WXT (Web Extension Toolkit)](https://wxt.dev/)
|
||||
@@ -84,22 +79,21 @@
|
||||
## 项目结构
|
||||
|
||||
```text
|
||||
├── components/ # 可复用 React 组件
|
||||
├── config/ # 应用配置
|
||||
│ └── features.tsx # 功能定义与路由映射
|
||||
├── entrypoints/ # 扩展程序入口点
|
||||
│ ├── popup/ # 点击图标弹出的主界面
|
||||
│ ├── options/ # 扩展程序设置页面
|
||||
│ ├── sidepanel/ # 浏览器侧边栏集成
|
||||
│ ├── background.ts # 后台 Service Worker
|
||||
│ └── content.ts # 网页注入脚本
|
||||
├── pages/ # 各功能模块的页面组件
|
||||
├── providers/ # 全局状态提供者 (Router, Theme 等)
|
||||
├── hooks/ # 自定义 React Hooks
|
||||
├── utils/ # 工具函数与服务抽象
|
||||
├── types/ # TypeScript 类型声明
|
||||
├── lib/ # 通用工具函数 (cn, utils 等)
|
||||
├── i18n/ # 国际化资源
|
||||
├── src/ # 源代码根目录
|
||||
│ ├── components/ # 可复用 React 组件
|
||||
│ ├── config/ # 应用配置
|
||||
│ │ └── features.tsx # 功能定义与路由映射
|
||||
│ ├── entrypoints/ # 扩展程序入口点
|
||||
│ │ ├── popup/ # 点击图标弹出的主界面
|
||||
│ │ ├── sidepanel/ # 浏览器侧边栏集成
|
||||
│ │ ├── background.ts # 后台 Service Worker
|
||||
│ │ └── content.ts # 网页注入脚本
|
||||
│ ├── pages/ # 各功能模块的页面组件
|
||||
│ ├── providers/ # 全局状态提供者 (Router, Theme 等)
|
||||
│ ├── hooks/ # 自定义 React Hooks
|
||||
│ ├── utils/ # 工具函数与服务抽象
|
||||
│ ├── types/ # TypeScript 类型声明
|
||||
│ └── lib/ # 通用工具函数 (cn, utils 等)
|
||||
├── public/ # 静态资源 (图标、manifest 资源等)
|
||||
├── wxt.config.ts # WXT 框架核心配置
|
||||
└── package.json # 项目元数据与依赖管理
|
||||
|
||||
@@ -1,383 +0,0 @@
|
||||
import { SyntheticEvent, useEffect, useMemo, useState } from 'react';
|
||||
import { GripVertical, RefreshCw } from 'lucide-react';
|
||||
import {
|
||||
closestCenter,
|
||||
DndContext,
|
||||
type DragEndEvent,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
} from '@dnd-kit/core';
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
sortableKeyboardCoordinates,
|
||||
useSortable,
|
||||
verticalListSortingStrategy,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import type { PageType, StorageSchema } from '@/types/storage';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
import type { PaletteColorKey } from '@/config/features';
|
||||
import {
|
||||
getAllFeatureKeys,
|
||||
getDefaultPageOrder,
|
||||
getDefaultVisibleFeatureKeys,
|
||||
getFeatureByKey,
|
||||
} from '@/config/features';
|
||||
import GlobalSnackbar, { useSnackbarState } from '@/components/GlobalSnackbar';
|
||||
import PageErrorBoundary from '@/components/PageErrorBoundary';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const PALETTE_COLORS: Record<PaletteColorKey, string> = {
|
||||
primary: '#1976d2',
|
||||
success: '#2e7d32',
|
||||
warning: '#e65100',
|
||||
error: '#c62828',
|
||||
secondary: '#9c27b0',
|
||||
info: '#0288d1',
|
||||
};
|
||||
|
||||
const getColorCode = (key: PaletteColorKey): string => PALETTE_COLORS[key];
|
||||
|
||||
const isValidPage = (page: unknown): page is PageType => {
|
||||
return typeof page === 'string' && (getAllFeatureKeys() as string[]).includes(page);
|
||||
};
|
||||
|
||||
const isValidPageList = (pages: unknown): pages is PageType[] => {
|
||||
return Array.isArray(pages) && pages.every(isValidPage);
|
||||
};
|
||||
|
||||
type WindowType = 'popup' | 'sidepanel' | 'tab';
|
||||
|
||||
interface SortableFeatureRowProps {
|
||||
pageKey: PageType;
|
||||
isLast: boolean;
|
||||
isChecked: boolean;
|
||||
isDisabled: boolean;
|
||||
onToggle: (key: PageType) => void;
|
||||
}
|
||||
|
||||
function SortableFeatureRow({
|
||||
pageKey,
|
||||
isLast,
|
||||
isChecked,
|
||||
isDisabled,
|
||||
onToggle,
|
||||
}: SortableFeatureRowProps) {
|
||||
const { t } = useTranslation(['features']);
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: pageKey,
|
||||
});
|
||||
|
||||
const feature = getFeatureByKey(pageKey);
|
||||
if (!feature) return null;
|
||||
|
||||
const colorKey = feature.themeColorKey ?? 'primary';
|
||||
const colorCode = getColorCode(colorKey);
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
zIndex: isDragging ? 1 : 'auto',
|
||||
position: 'relative' as const,
|
||||
backgroundColor: isDragging ? `${colorCode}0a` : 'transparent',
|
||||
boxShadow: isDragging ? '0 8px 20px rgba(0,0,0,0.08)' : 'none',
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={`flex items-center justify-between p-4 sm:p-5 transition-all duration-200 hover:bg-muted ${
|
||||
isLast ? '' : 'border-b border-border'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3 sm:gap-4 flex-1 min-w-0">
|
||||
{/* 拖拽手柄 */}
|
||||
<div
|
||||
className="drag-handle text-muted-foreground cursor-grab touch-none transition-colors duration-200 hover:text-foreground active:cursor-grabbing"
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
aria-label={`拖拽以调整 ${t(feature.labelKey)} 的位置`}
|
||||
>
|
||||
<GripVertical size={16} />
|
||||
</div>
|
||||
|
||||
{/* 功能图标 */}
|
||||
<div
|
||||
className="flex items-center justify-center w-9 h-9 rounded-xl flex-shrink-0"
|
||||
style={{
|
||||
backgroundColor: `${colorCode}1a`,
|
||||
color: colorCode,
|
||||
}}
|
||||
>
|
||||
{feature.icon && <feature.icon size={20} />}
|
||||
</div>
|
||||
|
||||
{/* 文本信息 */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="font-bold text-[0.95rem] leading-tight text-foreground">
|
||||
{t(feature.labelKey)}
|
||||
</div>
|
||||
{feature.descriptionKey && (
|
||||
<div
|
||||
className="text-xs text-muted-foreground font-medium mt-0.5 overflow-hidden text-ellipsis whitespace-nowrap"
|
||||
title={t(feature.descriptionKey)}
|
||||
>
|
||||
{t(feature.descriptionKey)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 开关 */}
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={isChecked}
|
||||
disabled={isDisabled}
|
||||
onClick={() => onToggle(pageKey)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 ${
|
||||
isChecked ? 'bg-primary' : 'bg-muted'
|
||||
} ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-background transition-transform duration-200 ${
|
||||
isChecked ? 'translate-x-6' : 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const { t } = useTranslation(['features', 'common']);
|
||||
|
||||
const initialWindowType = useMemo(() => {
|
||||
if (typeof window === 'undefined') return 'popup';
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const tab = params.get('tab');
|
||||
if (tab === 'popup' || tab === 'sidepanel' || tab === 'tab') {
|
||||
return tab as WindowType;
|
||||
}
|
||||
return 'popup';
|
||||
}, []);
|
||||
|
||||
const [windowType, setWindowType] = useState<WindowType>(initialWindowType);
|
||||
const [visiblePages, setVisiblePages] = useState<PageType[]>([]);
|
||||
const [pageOrder, setPageOrder] = useState<PageType[]>([]);
|
||||
const [isLoaded, setIsLoaded] = useState(false);
|
||||
const { snackbarProps, showMessage } = useSnackbarState();
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
|
||||
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
|
||||
);
|
||||
|
||||
const configKeys = useMemo(() => {
|
||||
switch (windowType) {
|
||||
case 'sidepanel':
|
||||
return {
|
||||
visible: 'app/sidepanelVisiblePages' as keyof StorageSchema,
|
||||
order: 'app/sidepanelPageOrder' as keyof StorageSchema,
|
||||
};
|
||||
case 'tab':
|
||||
return {
|
||||
visible: 'app/tabVisiblePages' as keyof StorageSchema,
|
||||
order: 'app/tabPageOrder' as keyof StorageSchema,
|
||||
};
|
||||
case 'popup':
|
||||
default:
|
||||
return {
|
||||
visible: 'app/popupVisiblePages' as keyof StorageSchema,
|
||||
order: 'app/popupPageOrder' as keyof StorageSchema,
|
||||
};
|
||||
}
|
||||
}, [windowType]);
|
||||
|
||||
useEffect(() => {
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set('tab', windowType);
|
||||
window.history.replaceState({}, '', url.toString());
|
||||
}, [windowType]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadConfig = async () => {
|
||||
setIsLoaded(false);
|
||||
try {
|
||||
const [savedVisible, savedOrder] = await Promise.all([
|
||||
storageUtil.get(configKeys.visible, getDefaultVisibleFeatureKeys()),
|
||||
storageUtil.get(configKeys.order, getDefaultPageOrder()),
|
||||
]);
|
||||
setVisiblePages(
|
||||
isValidPageList(savedVisible) ? savedVisible : getDefaultVisibleFeatureKeys(),
|
||||
);
|
||||
setPageOrder(isValidPageList(savedOrder) ? savedOrder : getDefaultPageOrder());
|
||||
} catch (error) {
|
||||
console.error('Failed to load config:', error);
|
||||
setVisiblePages(getDefaultVisibleFeatureKeys());
|
||||
setPageOrder(getDefaultPageOrder());
|
||||
} finally {
|
||||
setIsLoaded(true);
|
||||
}
|
||||
};
|
||||
|
||||
loadConfig().catch(console.error);
|
||||
}, [configKeys]);
|
||||
|
||||
const showToast = (message: string, severity: 'success' | 'info' | 'warning') => {
|
||||
showMessage(message, { severity });
|
||||
};
|
||||
|
||||
const handlePageToggle = async (page: PageType) => {
|
||||
const isCurrentlyVisible = visiblePages.includes(page);
|
||||
let newPages: PageType[];
|
||||
|
||||
if (isCurrentlyVisible) {
|
||||
if (visiblePages.length <= 1) {
|
||||
showToast('至少需要保留一个可见页面', 'warning');
|
||||
return;
|
||||
}
|
||||
newPages = visiblePages.filter((p) => p !== page);
|
||||
} else {
|
||||
newPages = [...visiblePages, page];
|
||||
}
|
||||
|
||||
try {
|
||||
await storageUtil.set(configKeys.visible, newPages);
|
||||
setVisiblePages(newPages);
|
||||
const feature = getFeatureByKey(page);
|
||||
const label = feature ? t(feature.labelKey) : page;
|
||||
showToast(`已${isCurrentlyVisible ? '隐藏' : '显示'} ${label}`, 'success');
|
||||
} catch (error) {
|
||||
console.error('Failed to save config:', error);
|
||||
showToast('保存失败', 'warning');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragEnd = async (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id) return;
|
||||
|
||||
const oldIndex = pageOrder.indexOf(active.id as PageType);
|
||||
const newIndex = pageOrder.indexOf(over.id as PageType);
|
||||
if (oldIndex < 0 || newIndex < 0) return;
|
||||
|
||||
const newOrder = arrayMove(pageOrder, oldIndex, newIndex);
|
||||
setPageOrder(newOrder);
|
||||
|
||||
try {
|
||||
await storageUtil.set(configKeys.order, newOrder);
|
||||
} catch (error) {
|
||||
console.error('Failed to save order:', error);
|
||||
showToast('排序保存失败', 'warning');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRestoreDefaults = async () => {
|
||||
try {
|
||||
const defaults = getDefaultVisibleFeatureKeys();
|
||||
const defaultOrder = getDefaultPageOrder();
|
||||
|
||||
await Promise.all([
|
||||
storageUtil.set(configKeys.visible, defaults),
|
||||
storageUtil.set(configKeys.order, defaultOrder),
|
||||
]);
|
||||
|
||||
setVisiblePages(defaults);
|
||||
setPageOrder(defaultOrder);
|
||||
showToast('已恢复当前模式默认设置', 'success');
|
||||
} catch (error) {
|
||||
console.error('Failed to restore defaults:', error);
|
||||
showToast('恢复失败', 'warning');
|
||||
}
|
||||
};
|
||||
|
||||
const handleWindowTypeChange = (_event: SyntheticEvent, newType: WindowType) => {
|
||||
if (newType !== null) {
|
||||
setWindowType(newType);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isLoaded) {
|
||||
return (
|
||||
<div className="flex justify-center items-center min-h-screen">
|
||||
<div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="app min-h-screen bg-background flex flex-col">
|
||||
<PageErrorBoundary>
|
||||
{/* 顶部标题与导航栏 */}
|
||||
<div className="w-full bg-background border-b border-border pt-8 sm:pt-12 pb-0 px-4 sm:px-8">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{/* Tab 与恢复按钮同行 */}
|
||||
<div className="flex items-end justify-between border-b-0">
|
||||
<div className="flex-1 flex">
|
||||
{(['popup', 'sidepanel', 'tab'] as WindowType[]).map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
onClick={(e) => handleWindowTypeChange(e, type)}
|
||||
className={`px-4 sm:px-6 py-2 text-[0.9rem] font-bold transition-colors duration-200 ${
|
||||
windowType === type
|
||||
? 'text-primary border-b-2 border-primary'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
{type === 'popup' ? 'Popup 窗口' : type === 'sidepanel' ? '侧边栏' : '标签页'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
onClick={handleRestoreDefaults}
|
||||
className="mb-1 ml-2 p-1.5 text-muted-foreground hover:text-primary hover:bg-primary/10 rounded-lg transition-colors duration-200"
|
||||
title="恢复当前模式默认"
|
||||
>
|
||||
<RefreshCw size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 主内容区域 */}
|
||||
<div className="flex-1 p-4 sm:p-8">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="rounded-2xl border border-border overflow-hidden bg-card shadow-sm">
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext items={pageOrder} strategy={verticalListSortingStrategy}>
|
||||
<div className="flex flex-col">
|
||||
{pageOrder.map((key, index, array) => {
|
||||
const isChecked = visiblePages.includes(key);
|
||||
const isDisabled = isChecked && visiblePages.length === 1;
|
||||
return (
|
||||
<SortableFeatureRow
|
||||
key={key}
|
||||
pageKey={key}
|
||||
isLast={index === array.length - 1}
|
||||
isChecked={isChecked}
|
||||
isDisabled={isDisabled}
|
||||
onToggle={handlePageToggle}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageErrorBoundary>
|
||||
|
||||
<GlobalSnackbar {...snackbarProps} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,131 +0,0 @@
|
||||
import { describe, expect, it, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import App from '../App';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
import {
|
||||
getDefaultVisibleFeatureKeys,
|
||||
getDefaultPageOrder,
|
||||
getFeatureByKey,
|
||||
} from '@/config/features';
|
||||
|
||||
// Mock storageUtil
|
||||
vi.mock('@/utils/chromeStorage', () => ({
|
||||
storageUtil: {
|
||||
get: vi.fn(),
|
||||
set: vi.fn(() => Promise.resolve()),
|
||||
},
|
||||
}));
|
||||
|
||||
// Mock i18next
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => key,
|
||||
}),
|
||||
}));
|
||||
|
||||
describe('Options App', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
localStorage.clear();
|
||||
});
|
||||
|
||||
it('合法数据应正常加载并显示正确的功能列表', async () => {
|
||||
const defaultOrder = getDefaultPageOrder();
|
||||
|
||||
(storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
|
||||
Promise.resolve(defaultValue),
|
||||
);
|
||||
|
||||
render(<App />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// 验证默认可见的功能都被渲染出来了
|
||||
for (const key of defaultOrder) {
|
||||
const feature = getFeatureByKey(key);
|
||||
if (feature) {
|
||||
expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
it('非法 visiblePages 数据应回退到默认值', async () => {
|
||||
const defaultVisible = getDefaultVisibleFeatureKeys();
|
||||
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key.includes('VisiblePages')) {
|
||||
return Promise.resolve(['invalidPage', 'anotherInvalid']);
|
||||
}
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(<App />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// 验证默认值的功能仍然被渲染（非法数据被回退）
|
||||
for (const key of defaultVisible) {
|
||||
const feature = getFeatureByKey(key);
|
||||
if (feature && key !== 'dashboard') {
|
||||
expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
it('非法 pageOrder 数据应回退到默认值', async () => {
|
||||
const defaultOrder = getDefaultPageOrder();
|
||||
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key.includes('PageOrder')) {
|
||||
return Promise.resolve(['notARealPage', 123, null]);
|
||||
}
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(<App />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// 验证默认顺序的功能都被渲染
|
||||
for (const key of defaultOrder) {
|
||||
const feature = getFeatureByKey(key);
|
||||
if (feature) {
|
||||
expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
it('非数组数据应回退到默认值', async () => {
|
||||
const defaultOrder = getDefaultPageOrder();
|
||||
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key.includes('VisiblePages')) {
|
||||
return Promise.resolve('not-an-array');
|
||||
}
|
||||
if (key.includes('PageOrder')) {
|
||||
return Promise.resolve({ foo: 'bar' });
|
||||
}
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(<App />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// 验证默认功能都被渲染
|
||||
for (const key of defaultOrder) {
|
||||
const feature = getFeatureByKey(key);
|
||||
if (feature) {
|
||||
expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -1,12 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>扩展设置 - Testing Tools</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,11 +0,0 @@
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import AppRoot from '@/providers/AppRoot';
|
||||
import '@/i18n';
|
||||
import '@/src/index.css';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<AppRoot>
|
||||
<App />
|
||||
</AppRoot>,
|
||||
);
|
||||
+2
-22
@@ -5,16 +5,13 @@ import reactPlugin from 'eslint-plugin-react';
|
||||
import globals from 'globals';
|
||||
|
||||
export default tseslint.config(
|
||||
// 1. 全局物理隔离：彻底掐灭对构建产物与配置本身的干扰
|
||||
{
|
||||
ignores: ['dist', '.output', '.wxt', 'node_modules', 'eslint.config.ts', 'eslint.config.js'],
|
||||
},
|
||||
|
||||
// 2. 注入 JavaScript 与 TypeScript 的官方大师级推荐规则集
|
||||
js.configs.recommended,
|
||||
...tseslint.configs.recommended,
|
||||
|
||||
// 3. 针对测试文件专属沙箱：解耦强类型死锁，放行 any，容忍未消费变量
|
||||
{
|
||||
files: ['**/__tests__/**', '**/*.test.{ts,tsx}', '**/*.spec.{ts,tsx}', 'setupTests.ts'],
|
||||
rules: {
|
||||
@@ -26,16 +23,8 @@ export default tseslint.config(
|
||||
},
|
||||
},
|
||||
|
||||
// 4. 核心业务全受控大管线（Hooks, Entrypoints, Components 统一护航）
|
||||
{
|
||||
files: [
|
||||
'hooks/**/*.{ts,tsx}',
|
||||
'entrypoints/**/*.{ts,tsx}',
|
||||
'pages/**/*.{ts,tsx}',
|
||||
'utils/**/*.{ts,tsx}',
|
||||
'components/**/*.{ts,tsx}',
|
||||
'services/**/*.{ts,tsx}',
|
||||
],
|
||||
files: ['src/**/*.{ts,tsx}'],
|
||||
ignores: ['**/__tests__/**', '**/*.test.{ts,tsx}', '**/*.spec.{ts,tsx}'],
|
||||
|
||||
languageOptions: {
|
||||
@@ -44,17 +33,13 @@ export default tseslint.config(
|
||||
...globals.browser,
|
||||
...globals.node,
|
||||
},
|
||||
// 💡 修复点 1（史诗级治愈）：废除脆弱的 project 硬编码路径！
|
||||
// 拥抱 typescript-eslint 官方推荐的 projectService 常驻动态类型调度中枢。
|
||||
// 它会在内存中全自动、流式为所有新建、悬空或暂存文件分配编译上下文，
|
||||
// 彻底终结 "file is not included in any tsconfig" 的全量崩溃黑洞！
|
||||
|
||||
parserOptions: {
|
||||
projectService: true,
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
},
|
||||
|
||||
// 挂载插件沙箱
|
||||
plugins: {
|
||||
react: reactPlugin,
|
||||
'react-hooks': reactHooks,
|
||||
@@ -66,24 +51,19 @@ export default tseslint.config(
|
||||
},
|
||||
},
|
||||
|
||||
// 💡 修复点 2：高精对齐 React 19 / JSX Runtime 的全量生产质检规则大闸
|
||||
rules: {
|
||||
// 激活 react-hooks 官方推荐规则
|
||||
...reactHooks.configs.recommended.rules,
|
||||
// 激活 react 官方精选规则（排除旧版 React 必须手动 import 的历史包袱）
|
||||
...reactPlugin.configs.recommended.rules,
|
||||
...reactPlugin.configs['jsx-runtime'].rules,
|
||||
|
||||
'react/prop-types': 'off',
|
||||
|
||||
// 清洗原生未消费变量冲突，统一交由 TS 高阶哨兵接管
|
||||
'no-unused-vars': 'off',
|
||||
'@typescript-eslint/no-unused-vars': [
|
||||
'warn',
|
||||
{ argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
|
||||
],
|
||||
|
||||
// 彻底关闭老旧的 JSX 作用域检查，全面契合 React 19 核心美学
|
||||
'react/react-in-jsx-scope': 'off',
|
||||
},
|
||||
},
|
||||
|
||||
-144
@@ -1,144 +0,0 @@
|
||||
import i18n from 'i18next';
|
||||
import { initReactI18next } from 'react-i18next';
|
||||
import type { CustomDetector } from 'i18next-browser-languagedetector'; // 💡 1. 引入官方强类型探测器接口
|
||||
import LanguageDetector from 'i18next-browser-languagedetector';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
// 导入 Day.js 本地化语言包
|
||||
import 'dayjs/locale/zh-cn';
|
||||
|
||||
// 同步加载全局核心命名空间
|
||||
import commonZh from './locales/zh/common.json';
|
||||
import featuresZh from './locales/zh/features.json';
|
||||
import commonEn from './locales/en/common.json';
|
||||
import featuresEn from './locales/en/features.json';
|
||||
|
||||
const resources = {
|
||||
zh: {
|
||||
common: commonZh,
|
||||
features: featuresZh,
|
||||
},
|
||||
en: {
|
||||
common: commonEn,
|
||||
features: featuresEn,
|
||||
},
|
||||
};
|
||||
|
||||
export const SUPPORTED_LANGUAGES = ['zh', 'en'] as const;
|
||||
export type SupportedLanguage = (typeof SUPPORTED_LANGUAGES)[number];
|
||||
|
||||
const LANGUAGE_STORAGE_KEY = 'app/language';
|
||||
const LANGUAGE_SNAPSHOT_KEY = 'snapshot/app/language';
|
||||
|
||||
/**
|
||||
* 将任意语言标识归一化为受支持的核心代码
|
||||
*/
|
||||
export const normalizeLanguage = (lng: string): SupportedLanguage => {
|
||||
if (!lng) return 'en';
|
||||
return lng.toLowerCase().startsWith('zh') ? 'zh' : 'en';
|
||||
};
|
||||
|
||||
/**
|
||||
* 严格校验语言安全边界
|
||||
*/
|
||||
const isValidLanguage = (lng: unknown): lng is SupportedLanguage => {
|
||||
return typeof lng === 'string' && (SUPPORTED_LANGUAGES as readonly string[]).includes(lng);
|
||||
};
|
||||
|
||||
/**
|
||||
* 同步从 localStorage 获取语言快照（消除异步闪烁）
|
||||
*/
|
||||
const getSyncLanguageSnapshot = (): SupportedLanguage | null => {
|
||||
try {
|
||||
const val = localStorage.getItem(LANGUAGE_SNAPSHOT_KEY);
|
||||
if (!val) return null;
|
||||
const parsed = JSON.parse(val) as unknown;
|
||||
return isValidLanguage(parsed) ? parsed : null;
|
||||
} catch (error) {
|
||||
console.error('[i18n] Failed to parse sync language snapshot from localStorage:', error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// 💡 2. 强类型接口重塑：显式绑定 CustomDetector 类型，
|
||||
// 告诉 TS 编译器这些方法将被全局 Languagedetector 框架隐式调用，彻底治愈“未使用函数”报错！
|
||||
const chromeStorageDetector: CustomDetector = {
|
||||
name: 'chromeStorage',
|
||||
lookup() {
|
||||
return undefined;
|
||||
},
|
||||
cacheUserLanguage(lng: string) {
|
||||
const target = normalizeLanguage(lng);
|
||||
// 💡 修复点：对异步写盘操作追加 void 算子或 catch，吞掉 Promise 被忽略警告
|
||||
storageUtil.set(LANGUAGE_STORAGE_KEY, target).catch((err) => {
|
||||
console.error('[i18n Detector Error] Failed to write back language state:', err);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
const detector = new LanguageDetector();
|
||||
detector.addDetector(chromeStorageDetector);
|
||||
|
||||
const syncLng = getSyncLanguageSnapshot();
|
||||
|
||||
// 💡 3. 修复点：对 i18n.init() 返回的异步 Promise 前方追加 void 斩断依赖链，放行编译
|
||||
void i18n
|
||||
.use(detector)
|
||||
.use(initReactI18next)
|
||||
.init({
|
||||
resources,
|
||||
fallbackLng: 'en',
|
||||
lng: syncLng || undefined,
|
||||
ns: ['common', 'features'],
|
||||
defaultNS: 'common',
|
||||
debug: false,
|
||||
interpolation: {
|
||||
escapeValue: false,
|
||||
},
|
||||
detection: {
|
||||
order: ['chromeStorage', 'navigator'],
|
||||
caches: ['chromeStorage'],
|
||||
},
|
||||
});
|
||||
|
||||
// 监听语言变更
|
||||
i18n.on('languageChanged', (lng) => {
|
||||
const normalizedLng = normalizeLanguage(lng);
|
||||
dayjs.locale(normalizedLng === 'zh' ? 'zh-cn' : 'en');
|
||||
localStorage.setItem(LANGUAGE_SNAPSHOT_KEY, JSON.stringify(normalizedLng));
|
||||
});
|
||||
|
||||
// 初始化时从长期异步存储中恢复校准
|
||||
storageUtil
|
||||
.get(LANGUAGE_STORAGE_KEY)
|
||||
.then((lng) => {
|
||||
const rawTargetLng = lng || syncLng;
|
||||
|
||||
if (!rawTargetLng) {
|
||||
const initialLng = normalizeLanguage(i18n.language);
|
||||
|
||||
// 💡 修复点：对初始化同步写盘追加安全的 Promise .catch() 异常隔离防护罩
|
||||
storageUtil.set(LANGUAGE_STORAGE_KEY, initialLng).catch((err) => {
|
||||
console.error('[i18n Init Error] Persistent sync collapsed:', err);
|
||||
});
|
||||
|
||||
if (initialLng !== normalizeLanguage(i18n.language)) {
|
||||
// 💡 修复点：对 changeLanguage 异步微任务进行显式 void 断链安全隔离
|
||||
void i18n.changeLanguage(initialLng);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const targetLng = normalizeLanguage(String(rawTargetLng));
|
||||
|
||||
if (isValidLanguage(targetLng) && targetLng !== normalizeLanguage(i18n.language)) {
|
||||
// 💡 修复点：对 changeLanguage 异步微任务进行显式 void 断链安全隔离
|
||||
void i18n.changeLanguage(targetLng);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('[i18n Context Error] Async local storage lookup collapsed:', err);
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
@@ -1,37 +0,0 @@
|
||||
{
|
||||
"pageTitle": "Base64 Converter",
|
||||
"pageSubtitle": "Encode and decode text, files, and images with Base64",
|
||||
"textMode": "Text",
|
||||
"fileMode": "File",
|
||||
"imageMode": "Image",
|
||||
"encode": "Encode",
|
||||
"decode": "Decode",
|
||||
"clear": "Clear",
|
||||
"textInputPlaceholder": "Enter text to encode to Base64...",
|
||||
"base64InputPlaceholder": "Enter Base64 string to decode...",
|
||||
"base64Output": "Base64 Output",
|
||||
"textOutput": "Decoded Text Output",
|
||||
"copyRaw": "Copy Raw Base64",
|
||||
"copyDataUri": "Copy Data URI",
|
||||
"clickOrDropToFile": "Click or drop a file here",
|
||||
"clickOrDropToImage": "Click or drop an image here",
|
||||
"clickOrDropToReplace": "Click or drop to replace the file",
|
||||
"maxFileSize": "Maximum file size: {{max}}",
|
||||
"supportedFormats": "Supports PNG, JPG, WEBP, GIF, BMP, SVG, etc.",
|
||||
"fileSizeExceeded": "File size exceeds the limit (max {{max}})",
|
||||
"unsupportedImageType": "Unsupported image format",
|
||||
"conversionFailed": "Conversion failed",
|
||||
"originalSize": "Original Size",
|
||||
"encodedSize": "Encoded Size",
|
||||
"invalidBase64": "Invalid Base64 string",
|
||||
"binaryDataDetected": "Input appears to be binary data (e.g. an image). Please switch to the Image tab.",
|
||||
"imageDataUriHint": "Detected an image data URI — please use the Image tab to decode it.",
|
||||
"switchToImageMode": "Switch to Image mode",
|
||||
"download": "Download",
|
||||
"decodedFileName": "Decoded file name",
|
||||
"decodeBase64Placeholder": "Enter Base64 or data URI to decode...",
|
||||
"decodedFileOutput": "Decoded File",
|
||||
"decodedImageOutput": "Decoded Image",
|
||||
"inferredMimeType": "Inferred MIME type",
|
||||
"decodedSize": "Decoded size"
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
{
|
||||
"appName": "Testing Tools",
|
||||
"buttons": {
|
||||
"save": "Save",
|
||||
"cancel": "Cancel",
|
||||
"confirm": "Confirm",
|
||||
"copy": "Copy",
|
||||
"clear": "Clear",
|
||||
"refresh": "Refresh",
|
||||
"toggleLanguage": "Switch Language",
|
||||
"toggleTheme": "Toggle theme",
|
||||
"themeMode": {
|
||||
"light": "Switch to dark mode",
|
||||
"dark": "Switch to system mode",
|
||||
"system": "Switch to light mode"
|
||||
},
|
||||
"search": "Search tools...",
|
||||
"back": "Back",
|
||||
"clearSearch": "Clear search",
|
||||
"recentSearch": "Recent search",
|
||||
"noResults": "No tools found",
|
||||
"openInTab": "Open in tab",
|
||||
"settings": "Settings"
|
||||
},
|
||||
"messages": {
|
||||
"copySuccess": "Copied to clipboard",
|
||||
"copyError": "Copy failed",
|
||||
"copyEmpty": "Nothing to copy"
|
||||
},
|
||||
"errorBoundary": {
|
||||
"title": "Oops, something went wrong",
|
||||
"description": "The app encountered an unexpected error. You can try refreshing the page or resetting the app.",
|
||||
"refresh": "Refresh App",
|
||||
"retry": "Retry"
|
||||
},
|
||||
"pageErrorBoundary": {
|
||||
"title": "This feature has encountered an error",
|
||||
"description": "An internal script error occurred while loading or rendering this page. You can try again or switch to another tool from the navigation menu."
|
||||
},
|
||||
"router": {
|
||||
"notFound": "Page Not Found",
|
||||
"notFoundDescription": "This feature is not available or has been removed in the current runtime ({{entryPointType}})."
|
||||
},
|
||||
"textInputArea": {
|
||||
"clear": "Clear",
|
||||
"copyContent": "Copy content",
|
||||
"cleared": "Cleared",
|
||||
"placeholder": "placeholder text"
|
||||
}
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
{
|
||||
"dashboard": {
|
||||
"title": "Dashboard"
|
||||
},
|
||||
"timestamp": {
|
||||
"title": "Timestamp",
|
||||
"description": "Unix millisecond conversion and formatting"
|
||||
},
|
||||
"storageCleaner": {
|
||||
"title": "Storage Cleaner",
|
||||
"description": "Clean cache, cookies, and local storage"
|
||||
},
|
||||
"qrCode": {
|
||||
"title": "QR Code Tools",
|
||||
"description": "Generate QR code for the selected URL"
|
||||
},
|
||||
"textStatistics": {
|
||||
"title": "Text Statistics",
|
||||
"description": "Real-time analysis of text characters, words, and bytes"
|
||||
},
|
||||
"jwt": {
|
||||
"title": "JWT Parser",
|
||||
"description": "JSON Web Token decoding and viewing"
|
||||
},
|
||||
"jsonDiff": {
|
||||
"title": "JSON Tools",
|
||||
"description": "Diff, format, YAML/TOML conversion, and minify"
|
||||
},
|
||||
"base64Converter": {
|
||||
"title": "Base64 Converter",
|
||||
"description": "Encode text, files, and images to Base64"
|
||||
},
|
||||
"markdownToHtml": {
|
||||
"title": "Markdown to HTML",
|
||||
"description": "Real-time Markdown conversion and HTML preview"
|
||||
},
|
||||
"htmlToMarkdown": {
|
||||
"title": "HTML to Markdown",
|
||||
"description": "Real-time HTML conversion and Markdown preview"
|
||||
},
|
||||
"rightClickRestorer": {
|
||||
"title": "Right Click Restorer",
|
||||
"description": "Detect and restore disabled browser right-click menus"
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
{
|
||||
"pageTitle": "HTML to Markdown",
|
||||
"pageSubtitle": "Convert HTML to Markdown in real-time",
|
||||
"splitMode": "Split",
|
||||
"previewMode": "Preview",
|
||||
"markdownMode": "Markdown",
|
||||
"clear": "Clear",
|
||||
"inputLabel": "HTML Input",
|
||||
"previewLabel": "Markdown Preview",
|
||||
"markdownOutputLabel": "Markdown Output",
|
||||
"inputPlaceholder": "Enter your HTML content here...",
|
||||
"charCount": "{{count}} chars",
|
||||
"copyMarkdown": "Copy Markdown",
|
||||
"download": "Download",
|
||||
"emptyHint": "Enter HTML content to see the conversion result"
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
{
|
||||
"pageTitle": "JSON Diff",
|
||||
"pageSubtitle": "Compare differences between two JSON values",
|
||||
"leftPlaceholder": "Enter the original JSON...",
|
||||
"rightPlaceholder": "Enter the target JSON...",
|
||||
"leftLabel": "Original JSON",
|
||||
"rightLabel": "Target JSON",
|
||||
"compareButton": "Compare",
|
||||
"clearButton": "Clear",
|
||||
"sideBySideMode": "Side by side",
|
||||
"unifiedMode": "Unified",
|
||||
"previousDiff": "Previous",
|
||||
"nextDiff": "Next",
|
||||
"noDiffs": "No differences",
|
||||
"diffCount": "{{count}} differences",
|
||||
"invalidJson": "Invalid JSON format",
|
||||
"emptyHint": "Enter JSON on both sides and click Compare",
|
||||
"fixErrorHint": "Fix the JSON syntax errors above to enable live comparison",
|
||||
"added": "Added",
|
||||
"removed": "Removed",
|
||||
"modified": "Modified"
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
{
|
||||
"formatTitle": "JSON Formatter",
|
||||
"formatSubtitle": "Beautify and format JSON data",
|
||||
"inputPlaceholder": "Enter JSON to format...",
|
||||
"formatButton": "Format",
|
||||
"clearButton": "Clear",
|
||||
"sortKeys": "Sort Keys",
|
||||
"sortKeysTooltip": "Sort JSON object keys in alphabetical order",
|
||||
"indentSize": "Indent",
|
||||
"indentSpaces": "{{count}} spaces",
|
||||
"outputLabel": "Formatted Result",
|
||||
"copySuccess": "Copied",
|
||||
"copyFail": "Copy failed",
|
||||
"noContent": "Nothing to copy",
|
||||
"invalidJson": "Invalid JSON format",
|
||||
"emptyHint": "Enter JSON and click Format",
|
||||
"fixErrorHint": "Fix the JSON syntax errors above to enable live formatting",
|
||||
"originalSize": "Original size",
|
||||
"formattedSize": "Formatted size",
|
||||
"diffMode": "Diff",
|
||||
"formatMode": "Format",
|
||||
"yamlMode": "YAML",
|
||||
"tomlMode": "TOML",
|
||||
"minifyMode": "Minify",
|
||||
"yamlTitle": "JSON to YAML",
|
||||
"yamlSubtitle": "Convert JSON data to YAML format",
|
||||
"yamlModeInputPlaceholder": "Enter JSON to convert...",
|
||||
"yamlModeOutputLabel": "YAML Result",
|
||||
"yamlModeEmptyHint": "Enter JSON and click Convert",
|
||||
"convertButton": "Convert",
|
||||
"tomlTitle": "JSON to TOML",
|
||||
"tomlSubtitle": "Convert JSON data to TOML format",
|
||||
"tomlModeInputPlaceholder": "Enter JSON to convert...",
|
||||
"tomlModeOutputLabel": "TOML Result",
|
||||
"tomlModeEmptyHint": "Enter JSON and click Convert",
|
||||
"minifyTitle": "JSON Minifier",
|
||||
"minifySubtitle": "Compress JSON into a compact single-line format",
|
||||
"minifyModeInputPlaceholder": "Enter JSON to minify...",
|
||||
"minifyModeOutputLabel": "Minified Result",
|
||||
"minifyModeEmptyHint": "Enter JSON and click Minify",
|
||||
"minifyButton": "Minify"
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
{
|
||||
"pageTitle": "JWT Parser",
|
||||
"pageSubtitle": "JSON Web Token decoding and viewing",
|
||||
"placeholder": "Paste Encoded JWT here...",
|
||||
"headerTitle": "HEADER: Algorithm & Token Type",
|
||||
"payloadTitle": "PAYLOAD: Data",
|
||||
"signatureTitle": "Signature",
|
||||
"noSignature": "No Signature",
|
||||
"invalidFormat": "Unable to parse",
|
||||
"errors": {
|
||||
"invalidBase64String": "Invalid base64url string",
|
||||
"failedToDecode": "Failed to decode base64url: ",
|
||||
"invalidFormat": "Invalid JWT format: expected 3 parts separated by .",
|
||||
"parseHeaderFailed": "Failed to parse Header: ",
|
||||
"parsePayloadFailed": "Failed to parse Payload: "
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
{
|
||||
"pageTitle": "Markdown to HTML",
|
||||
"pageSubtitle": "Convert Markdown to HTML in real-time with preview",
|
||||
"splitMode": "Split",
|
||||
"previewMode": "Preview",
|
||||
"htmlMode": "HTML",
|
||||
"clear": "Clear",
|
||||
"print": "Print",
|
||||
"download": "Download",
|
||||
"inputLabel": "Markdown Input",
|
||||
"previewLabel": "Live Preview",
|
||||
"htmlOutputLabel": "HTML Output",
|
||||
"inputPlaceholder": "Enter your Markdown content here...",
|
||||
"charCount": "{{count}} chars",
|
||||
"copyHtml": "Copy HTML",
|
||||
"downloadSuccess": "File downloaded successfully",
|
||||
"printSuccess": "Print window opened"
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
{
|
||||
"pageTitle": "QR Code Tools",
|
||||
"pageSubtitle": "Generate and parse QR codes",
|
||||
|
||||
"generateMode": "Generate QR Code",
|
||||
"parseMode": "Parse QR Code",
|
||||
|
||||
"urlToQr": "Text to QR Code",
|
||||
"qrToUrl": "QR Code to Text",
|
||||
|
||||
"urlInputLabel": "Enter URL or Text",
|
||||
"urlInputPlaceholder": "Enter URL or text content, QR code will be generated automatically",
|
||||
"generateButton": "Generate QR Code",
|
||||
"generating": "Generating...",
|
||||
|
||||
"qrCodeWillShow": "QR code will be shown here",
|
||||
"downloadButton": "Download QR Code",
|
||||
"copyQrButton": "Copy QR Code Image",
|
||||
|
||||
"qrCodeSuccess": "QR code generated successfully",
|
||||
"qrCodeDownloadSuccess": "QR code downloaded successfully",
|
||||
"qrCodeCopySuccess": "QR code copied to clipboard",
|
||||
|
||||
"selectImage": "Please select a QR code image",
|
||||
"parseSuccess": "QR code parsed successfully",
|
||||
"noQrDetected": "No QR code detected, please ensure the image is clear and contains a QR code",
|
||||
"parseError": "Failed to parse QR code, please try again",
|
||||
"generateError": "Failed to generate QR code, please check the input",
|
||||
"copyError": "Copy failed, please try again",
|
||||
|
||||
"imagePasted": "Image pasted, parsing...",
|
||||
"imagePasteError": "Failed to paste image, please try again",
|
||||
"imageCleared": "Image cleared",
|
||||
"clickToUpload": "Click, drag, or paste to upload QR code image",
|
||||
"supportFormats": "Supports PNG, JPG, WEBP, Base64 formats",
|
||||
|
||||
"parseButton": "Parse QR Code",
|
||||
"parsing": "Parsing...",
|
||||
"resultLabel": "Parsing Result",
|
||||
"copyTooltip": "Copy",
|
||||
|
||||
"enterUrlError": "Please enter URL or text",
|
||||
"clickToChange": "Click to change image",
|
||||
|
||||
"pasteHint": "Supports Ctrl+V to paste images or Base64 strings",
|
||||
"autoGenerateHint": "QR code will be generated automatically after input",
|
||||
"autoParseHint": "QR code will be parsed automatically after upload"
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
{
|
||||
"title": "Right Click Restorer",
|
||||
"description": "Detect and restore disabled browser right-click menus",
|
||||
"loading": "Loading...",
|
||||
"currentDomain": "Current Domain",
|
||||
"statusLocked": "Locked",
|
||||
"statusUnlocked": "Unlocked",
|
||||
"unsupported": "Unsupported",
|
||||
"unsupportedDesc": "The current page is a browser internal or extension page. Right-click unlock is not available. Please switch to a regular webpage.",
|
||||
"unlockDesc": "Click the button below to temporarily unlock the right-click menu for the current website. You will need to unlock again after refreshing the page.",
|
||||
"unlockBtn": "Unlock Right Click",
|
||||
"alreadyUnlocked": "Right Click Unlocked"
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
{
|
||||
"pageTitle": "Storage Cleaner",
|
||||
"pageSubtitle": "Clear cache, cookies, and local storage",
|
||||
"loading": "Loading...",
|
||||
"initializing": "Reading site data...",
|
||||
"occupied": "Occupied {{size}}",
|
||||
"cleaning": "Cleaning...",
|
||||
"cleanNow": "Clean Now",
|
||||
"autoRefresh": "Auto refresh page after cleaning",
|
||||
"selectAll": "Select all items",
|
||||
"cleanSuccess": "Cleaning complete",
|
||||
"cleanError": "Cleaning failed",
|
||||
"noData": "No data",
|
||||
"countUnit": "items",
|
||||
"errorNoTab": "Unable to get current tab",
|
||||
"errorRestricted": "Storage cleaning is not supported on this page",
|
||||
"cleanSuccessReload": "Cleaning successful, reloading page...",
|
||||
"errorStandardOnly": "Storage cleaning only works on standard web pages",
|
||||
"confirmTitle": "Confirm Clear Data?",
|
||||
"confirmDesc": "You are about to permanently delete the following selected storage items from the current page.",
|
||||
"irreversible": "This action is irreversible",
|
||||
"confirmAction": "Confirm Clear",
|
||||
"cleanedSummary": "Cleaned {{items}}",
|
||||
"noDataToClean": "No storage data found to clean",
|
||||
"partialFailure": "Some items failed to clean",
|
||||
"options": {
|
||||
"localStorage": "Local Storage",
|
||||
"sessionStorage": "Session Storage",
|
||||
"indexedDB": "IndexedDB",
|
||||
"cookies": "Cookies",
|
||||
"cacheStorage": "Cache Storage",
|
||||
"serviceWorkers": "Service Workers"
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
{
|
||||
"pageTitle": "Text Statistics",
|
||||
"pageSubtitle": "Real-time analysis of characters, words, lines, and byte size",
|
||||
"placeholder": "Type or paste text here...",
|
||||
"characters": "Characters",
|
||||
"words": "Words",
|
||||
"lines": "Lines",
|
||||
"bytes": "Byte Size"
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
{
|
||||
"pageTitle": "Timestamp Conversion",
|
||||
"pageSubtitle": "Unix millisecond conversion and formatting",
|
||||
"tsToDate": "Timestamp → Date",
|
||||
"dateToTs": "Date → Timestamp",
|
||||
"placeholderTs": "Enter timestamp...",
|
||||
"placeholderDate": "YYYY-MM-DD HH:mm:ss",
|
||||
"unitMs": "Millisecond (ms)",
|
||||
"unitS": "Second (s)",
|
||||
"convertButton": "Convert Now",
|
||||
"currentTs": "Current Timestamp",
|
||||
"useNowTooltip": "Use this value",
|
||||
"copyTsTooltip": "Copy timestamp",
|
||||
"usedSuccess": "Using current timestamp",
|
||||
"resultLabel": "Conversion Result",
|
||||
"copyResultTooltip": "Copy result",
|
||||
"relativeTime": "Relative Time",
|
||||
"iso8601": "ISO 8601",
|
||||
"utcTime": "UTC Time",
|
||||
"copyTooltip": "Copy",
|
||||
"resultEmpty": "Enter a value and click convert",
|
||||
"errors": {
|
||||
"invalidNumber": "Invalid number",
|
||||
"invalidTimestamp": "Invalid timestamp",
|
||||
"invalidFormat": "Format error"
|
||||
}
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
{
|
||||
"pageTitle": "Base64 转换器",
|
||||
"pageSubtitle": "文本、文件与图像的 Base64 编码与解码",
|
||||
"textMode": "文本",
|
||||
"fileMode": "文件",
|
||||
"imageMode": "图像",
|
||||
"encode": "编码",
|
||||
"decode": "解码",
|
||||
"clear": "清空",
|
||||
"textInputPlaceholder": "输入需要编码为 Base64 的文本...",
|
||||
"base64InputPlaceholder": "输入需要解码的 Base64 字符串...",
|
||||
"base64Output": "Base64 编码结果",
|
||||
"textOutput": "解码文本结果",
|
||||
"copyRaw": "复制纯 Base64",
|
||||
"copyDataUri": "复制 Data URI",
|
||||
"clickOrDropToFile": "点击或拖拽文件到此处",
|
||||
"clickOrDropToImage": "点击或拖拽图像到此处",
|
||||
"clickOrDropToReplace": "点击或拖拽以替换文件",
|
||||
"maxFileSize": "最大文件大小：{{max}}",
|
||||
"supportedFormats": "支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式",
|
||||
"fileSizeExceeded": "文件大小超出限制（最大 {{max}}）",
|
||||
"unsupportedImageType": "不支持的图像格式",
|
||||
"conversionFailed": "转换失败",
|
||||
"originalSize": "原始大小",
|
||||
"encodedSize": "编码大小",
|
||||
"invalidBase64": "Base64 字符串无效",
|
||||
"binaryDataDetected": "输入似乎是二进制数据（如图片）。请切换到「图像」选项卡。",
|
||||
"imageDataUriHint": "检测到图片的 data URI，请使用「图像」选项卡进行解码。",
|
||||
"switchToImageMode": "切换到图像模式",
|
||||
"download": "下载",
|
||||
"decodedFileName": "解码后文件名",
|
||||
"decodeBase64Placeholder": "输入需要解码的 Base64 或 data URI...",
|
||||
"decodedFileOutput": "解码文件",
|
||||
"decodedImageOutput": "解码图像",
|
||||
"inferredMimeType": "推断的 MIME 类型",
|
||||
"decodedSize": "解码大小"
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
{
|
||||
"appName": "测试工具",
|
||||
"buttons": {
|
||||
"save": "保存",
|
||||
"cancel": "取消",
|
||||
"confirm": "确认",
|
||||
"copy": "复制",
|
||||
"clear": "清理",
|
||||
"refresh": "刷新",
|
||||
"toggleLanguage": "切换语言",
|
||||
"toggleTheme": "切换主题",
|
||||
"themeMode": {
|
||||
"light": "切换到深色模式",
|
||||
"dark": "切换到系统模式",
|
||||
"system": "切换到浅色模式"
|
||||
},
|
||||
"search": "搜索工具...",
|
||||
"back": "返回",
|
||||
"clearSearch": "清除搜索",
|
||||
"recentSearch": "最近搜索",
|
||||
"noResults": "未找到相关工具",
|
||||
"openInTab": "在标签页打开",
|
||||
"settings": "设置"
|
||||
},
|
||||
"messages": {
|
||||
"copySuccess": "已复制到剪贴板",
|
||||
"copyError": "复制失败",
|
||||
"copyEmpty": "无内容可复制"
|
||||
},
|
||||
"errorBoundary": {
|
||||
"title": "糟糕，出了点问题",
|
||||
"description": "应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。",
|
||||
"refresh": "刷新应用",
|
||||
"retry": "重新尝试"
|
||||
},
|
||||
"pageErrorBoundary": {
|
||||
"title": "该功能运行异常",
|
||||
"description": "该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。"
|
||||
},
|
||||
"router": {
|
||||
"notFound": "页面未找到",
|
||||
"notFoundDescription": "该功能在当前运行环境（{{entryPointType}}）下不可用或已被移除。"
|
||||
},
|
||||
"textInputArea": {
|
||||
"clear": "清空",
|
||||
"copyContent": "复制内容",
|
||||
"cleared": "已清空",
|
||||
"placeholder": "请输入文本"
|
||||
}
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
{
|
||||
"dashboard": {
|
||||
"title": "仪表盘"
|
||||
},
|
||||
"timestamp": {
|
||||
"title": "时间戳",
|
||||
"description": "Unix 毫秒数转换与格式化"
|
||||
},
|
||||
"storageCleaner": {
|
||||
"title": "存储清理",
|
||||
"description": "清理缓存、Cookies 及本地存储"
|
||||
},
|
||||
"qrCode": {
|
||||
"title": "二维码工具",
|
||||
"description": "生成当前选中的 URL 的二维码"
|
||||
},
|
||||
"textStatistics": {
|
||||
"title": "文本统计",
|
||||
"description": "实时分析文本字符、单词及字节"
|
||||
},
|
||||
"jwt": {
|
||||
"title": "JWT 解析",
|
||||
"description": "JSON Web Token 解码与查看"
|
||||
},
|
||||
"jsonDiff": {
|
||||
"title": "JSON 工具",
|
||||
"description": "差异比较、格式化、YAML/TOML 转换及压缩"
|
||||
},
|
||||
"base64Converter": {
|
||||
"title": "Base64 转换器",
|
||||
"description": "文本、文件与图像的 Base64 编码转换"
|
||||
},
|
||||
"markdownToHtml": {
|
||||
"title": "Markdown 转 HTML",
|
||||
"description": "实时 Markdown 转换与 HTML 预览"
|
||||
},
|
||||
"htmlToMarkdown": {
|
||||
"title": "HTML 转 Markdown",
|
||||
"description": "实时 HTML 转换与 Markdown 预览"
|
||||
},
|
||||
"rightClickRestorer": {
|
||||
"title": "右键恢复",
|
||||
"description": "检测并恢复被网站禁用的浏览器右键菜单"
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
{
|
||||
"pageTitle": "HTML 转 Markdown",
|
||||
"pageSubtitle": "实时将 HTML 转换为 Markdown 格式",
|
||||
"splitMode": "分屏",
|
||||
"previewMode": "预览",
|
||||
"markdownMode": "Markdown",
|
||||
"clear": "清空",
|
||||
"inputLabel": "HTML 输入",
|
||||
"previewLabel": "Markdown 预览",
|
||||
"markdownOutputLabel": "Markdown 输出",
|
||||
"inputPlaceholder": "在此输入 HTML 内容...",
|
||||
"charCount": "{{count}} 字符",
|
||||
"copyMarkdown": "复制 Markdown",
|
||||
"download": "下载",
|
||||
"emptyHint": "输入 HTML 内容以查看转换结果"
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
{
|
||||
"pageTitle": "JSON 差异比较",
|
||||
"pageSubtitle": "对比两个 JSON 数据的差异",
|
||||
"leftPlaceholder": "输入原始 JSON...",
|
||||
"rightPlaceholder": "输入目标 JSON...",
|
||||
"leftLabel": "原始 JSON",
|
||||
"rightLabel": "目标 JSON",
|
||||
"compareButton": "比较",
|
||||
"clearButton": "清空",
|
||||
"sideBySideMode": "并排",
|
||||
"unifiedMode": "统一",
|
||||
"previousDiff": "上一个",
|
||||
"nextDiff": "下一个",
|
||||
"noDiffs": "无差异",
|
||||
"diffCount": "{{count}} 处差异",
|
||||
"invalidJson": "无效的 JSON 格式",
|
||||
"emptyHint": "输入两侧 JSON 后点击比较",
|
||||
"fixErrorHint": "请修正上方 JSON 的语法错误以开启实时流式比对",
|
||||
"added": "新增",
|
||||
"removed": "删除",
|
||||
"modified": "修改"
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
{
|
||||
"formatTitle": "JSON 格式化",
|
||||
"formatSubtitle": "美化和格式化 JSON 数据",
|
||||
"inputPlaceholder": "输入需要格式化的 JSON...",
|
||||
"formatButton": "格式化",
|
||||
"clearButton": "清空",
|
||||
"sortKeys": "键名排序",
|
||||
"sortKeysTooltip": "按字母顺序对 JSON 对象键进行排序",
|
||||
"indentSize": "缩进",
|
||||
"indentSpaces": "{{count}} 个空格",
|
||||
"outputLabel": "格式化结果",
|
||||
"copySuccess": "复制成功",
|
||||
"copyFail": "复制失败",
|
||||
"noContent": "无内容可复制",
|
||||
"invalidJson": "无效的 JSON 格式",
|
||||
"emptyHint": "输入 JSON 后点击格式化",
|
||||
"fixErrorHint": "请修正上方 JSON 的语法错误以开启实时流式格式化",
|
||||
"originalSize": "原始大小",
|
||||
"formattedSize": "格式化后大小",
|
||||
"diffMode": "差异比较",
|
||||
"formatMode": "格式化",
|
||||
"yamlMode": "YAML",
|
||||
"tomlMode": "TOML",
|
||||
"minifyMode": "压缩",
|
||||
"yamlTitle": "JSON 转 YAML",
|
||||
"yamlSubtitle": "将 JSON 数据转换为 YAML 格式",
|
||||
"yamlModeInputPlaceholder": "输入需要转换的 JSON...",
|
||||
"yamlModeOutputLabel": "YAML 结果",
|
||||
"yamlModeEmptyHint": "输入 JSON 后点击转换",
|
||||
"convertButton": "转换",
|
||||
"tomlTitle": "JSON 转 TOML",
|
||||
"tomlSubtitle": "将 JSON 数据转换为 TOML 格式",
|
||||
"tomlModeInputPlaceholder": "输入需要转换的 JSON...",
|
||||
"tomlModeOutputLabel": "TOML 结果",
|
||||
"tomlModeEmptyHint": "输入 JSON 后点击转换",
|
||||
"minifyTitle": "JSON 压缩",
|
||||
"minifySubtitle": "将 JSON 压缩为紧凑的单行格式",
|
||||
"minifyModeInputPlaceholder": "输入需要压缩的 JSON...",
|
||||
"minifyModeOutputLabel": "压缩结果",
|
||||
"minifyModeEmptyHint": "输入 JSON 后点击压缩",
|
||||
"minifyButton": "压缩"
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
{
|
||||
"pageTitle": "JWT 解析",
|
||||
"pageSubtitle": "JSON Web Token 解码与查看",
|
||||
"placeholder": "在此粘贴 JWT 令牌 (Encoded JWT)...",
|
||||
"headerTitle": "HEADER: 算法 & 令牌类型",
|
||||
"payloadTitle": "PAYLOAD: 数据",
|
||||
"signatureTitle": "签名",
|
||||
"noSignature": "无签名",
|
||||
"invalidFormat": "无法解析",
|
||||
"errors": {
|
||||
"invalidBase64String": "无效的 Base64URL 字符串",
|
||||
"failedToDecode": "Base64URL 解码失败：",
|
||||
"invalidFormat": "JWT 格式错误：必须包含三个由 . 分隔的部分",
|
||||
"parseHeaderFailed": "解析 Header 失败：",
|
||||
"parsePayloadFailed": "解析 Payload 失败："
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
{
|
||||
"pageTitle": "Markdown 转 HTML",
|
||||
"pageSubtitle": "实时将 Markdown 转换为 HTML 并预览",
|
||||
"splitMode": "分屏",
|
||||
"previewMode": "预览",
|
||||
"htmlMode": "HTML",
|
||||
"clear": "清空",
|
||||
"print": "打印",
|
||||
"download": "下载",
|
||||
"inputLabel": "Markdown 输入",
|
||||
"previewLabel": "实时预览",
|
||||
"htmlOutputLabel": "HTML 输出",
|
||||
"inputPlaceholder": "在此输入 Markdown 内容...",
|
||||
"charCount": "{{count}} 字符",
|
||||
"copyHtml": "复制 HTML",
|
||||
"downloadSuccess": "文件下载成功",
|
||||
"printSuccess": "打印窗口已打开"
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
{
|
||||
"pageTitle": "二维码工具",
|
||||
"pageSubtitle": "生成和解析二维码",
|
||||
|
||||
"generateMode": "生成二维码",
|
||||
"parseMode": "解析二维码",
|
||||
|
||||
"urlToQr": "文本转二维码",
|
||||
"qrToUrl": "二维码转文本",
|
||||
|
||||
"urlInputLabel": "输入 URL 或文本",
|
||||
"urlInputPlaceholder": "请输入 URL 或文本内容，将自动生成二维码",
|
||||
"generateButton": "生成二维码",
|
||||
"generating": "生成中...",
|
||||
|
||||
"qrCodeWillShow": "二维码将显示在这里",
|
||||
"downloadButton": "下载二维码",
|
||||
"copyQrButton": "复制二维码",
|
||||
|
||||
"qrCodeSuccess": "二维码生成成功",
|
||||
"qrCodeDownloadSuccess": "二维码下载成功",
|
||||
"qrCodeCopySuccess": "二维码已复制到剪贴板",
|
||||
|
||||
"selectImage": "请选择二维码图片",
|
||||
"parseSuccess": "二维码解析成功",
|
||||
"noQrDetected": "未检测到二维码，请确保图片清晰且包含二维码",
|
||||
"parseError": "解析二维码失败，请重试",
|
||||
"generateError": "生成二维码失败，请检查输入内容",
|
||||
"copyError": "复制失败，请重试",
|
||||
|
||||
"imagePasted": "图片粘贴成功，正在解析...",
|
||||
"imagePasteError": "粘贴图片失败，请重试",
|
||||
"imageCleared": "图片已清除",
|
||||
"clickToUpload": "点击、拖拽或粘贴上传二维码图片",
|
||||
"supportFormats": "支持 PNG、JPG、WEBP、Base64 格式",
|
||||
|
||||
"parseButton": "解析二维码",
|
||||
"parsing": "解析中...",
|
||||
"resultLabel": "解析结果",
|
||||
"copyTooltip": "复制",
|
||||
|
||||
"enterUrlError": "请输入 URL 或文本",
|
||||
"clickToChange": "点击更换图片",
|
||||
|
||||
"pasteHint": "支持 Ctrl+V 粘贴图片或 Base64 字符串",
|
||||
"autoGenerateHint": "输入内容后将自动生成二维码",
|
||||
"autoParseHint": "上传图片后将自动解析二维码"
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
{
|
||||
"title": "右键恢复",
|
||||
"description": "检测并恢复被网站禁用的浏览器右键菜单",
|
||||
"loading": "正在加载...",
|
||||
"currentDomain": "当前域名",
|
||||
"statusLocked": "未解锁",
|
||||
"statusUnlocked": "已解锁",
|
||||
"unsupported": "不支持",
|
||||
"unsupportedDesc": "当前页面为浏览器内部页面或扩展页面，无法解锁右键功能。请切换到普通网页后重试。",
|
||||
"unlockDesc": "点击下方按钮，为当前网站临时解锁右键菜单。刷新页面后需要重新解锁。",
|
||||
"unlockBtn": "解锁当前网站右键",
|
||||
"alreadyUnlocked": "右键已解锁"
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
{
|
||||
"pageTitle": "存储清理",
|
||||
"pageSubtitle": "清理缓存、Cookies 及本地存储",
|
||||
"loading": "加载中...",
|
||||
"initializing": "正在读取站点数据...",
|
||||
"occupied": "已占用 {{size}}",
|
||||
"cleaning": "正在清理...",
|
||||
"cleanNow": "立即清理",
|
||||
"autoRefresh": "清理后自动刷新页面",
|
||||
"selectAll": "全选所有项",
|
||||
"cleanSuccess": "清理完成",
|
||||
"cleanError": "清理失败",
|
||||
"noData": "无数据",
|
||||
"countUnit": "个",
|
||||
"errorNoTab": "无法获取当前标签页",
|
||||
"errorRestricted": "存储清理功能不支持此页面",
|
||||
"cleanSuccessReload": "清理成功，即将刷新页面",
|
||||
"errorStandardOnly": "存储清理功能仅适用于标准网页",
|
||||
"confirmTitle": "确认清理数据？",
|
||||
"confirmDesc": "您将永久删除当前页面的以下选定存储项。",
|
||||
"irreversible": "此操作不可撤销",
|
||||
"confirmAction": "确认清理",
|
||||
"cleanedSummary": "清理了 {{items}}",
|
||||
"noDataToClean": "该页面没有可清理的存储数据",
|
||||
"partialFailure": "部分清理失败",
|
||||
"options": {
|
||||
"localStorage": "Local Storage",
|
||||
"sessionStorage": "Session Storage",
|
||||
"indexedDB": "IndexedDB",
|
||||
"cookies": "Cookies",
|
||||
"cacheStorage": "Cache Storage",
|
||||
"serviceWorkers": "Service Workers"
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
{
|
||||
"pageTitle": "文本统计",
|
||||
"pageSubtitle": "实时分析文本的字符、单词、行数及字节大小",
|
||||
"placeholder": "在此输入或粘贴文本...",
|
||||
"characters": "字符数",
|
||||
"words": "单词数",
|
||||
"lines": "行数",
|
||||
"bytes": "字节大小"
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
{
|
||||
"pageTitle": "时间戳转换",
|
||||
"pageSubtitle": "Unix 毫秒数转换与格式化",
|
||||
"tsToDate": "时间戳 → 日期",
|
||||
"dateToTs": "日期 → 时间戳",
|
||||
"placeholderTs": "输入时间戳...",
|
||||
"placeholderDate": "YYYY-MM-DD HH:mm:ss",
|
||||
"unitMs": "毫秒 (ms)",
|
||||
"unitS": "秒 (s)",
|
||||
"convertButton": "立即转换",
|
||||
"currentTs": "当前时间戳",
|
||||
"useNowTooltip": "填充到下方",
|
||||
"copyTsTooltip": "复制时间戳",
|
||||
"usedSuccess": "已使用当前时间戳",
|
||||
"resultLabel": "转换结果",
|
||||
"copyResultTooltip": "复制结果",
|
||||
"relativeTime": "相对时间",
|
||||
"iso8601": "ISO 8601",
|
||||
"utcTime": "UTC 时间",
|
||||
"copyTooltip": "复制",
|
||||
"resultEmpty": "请输入并点击转换",
|
||||
"errors": {
|
||||
"invalidNumber": "无效数字",
|
||||
"invalidTimestamp": "无效时间戳",
|
||||
"invalidFormat": "格式错误"
|
||||
}
|
||||
}
|
||||
Generated
-107
@@ -25,15 +25,11 @@
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"dayjs": "^1.11.20",
|
||||
"i18next": "^26.2.0",
|
||||
"i18next-browser-languagedetector": "^8.2.1",
|
||||
"lucide-react": "^1.16.0",
|
||||
"marked": "^18.0.4",
|
||||
"qr-scanner": "^1.4.2",
|
||||
"qrious": "^4.0.2",
|
||||
"react": "^19.2.6",
|
||||
"react-dom": "^19.2.6",
|
||||
"react-i18next": "^17.0.8",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.6.0"
|
||||
},
|
||||
@@ -6706,15 +6702,6 @@
|
||||
"integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/html-parse-stringify": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
|
||||
"integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"void-elements": "3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/htmlparser2": {
|
||||
"version": "10.1.0",
|
||||
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.1.0.tgz",
|
||||
@@ -6764,43 +6751,6 @@
|
||||
"url": "https://github.com/sponsors/typicode"
|
||||
}
|
||||
},
|
||||
"node_modules/i18next": {
|
||||
"version": "26.2.0",
|
||||
"resolved": "https://registry.npmjs.org/i18next/-/i18next-26.2.0.tgz",
|
||||
"integrity": "sha512-zwBHldHdTmwN7r6UNc7lC6GWNN+YYg3DrRSeHR5PRRBf5QnJZcYHrQc0uaU26qZeYxR7iFZD+Y315dPnKP47wA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://www.locize.com/i18next"
|
||||
},
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
|
||||
},
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://www.locize.com"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"typescript": "^5 || ^6"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/i18next-browser-languagedetector": {
|
||||
"version": "8.2.1",
|
||||
"resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.1.tgz",
|
||||
"integrity": "sha512-bZg8+4bdmaOiApD7N7BPT9W8MLZG+nPTOFlLiJiT8uzKXFjhxw4v2ierCXOwB5sFDMtuA5G4kgYZ0AznZxQ/cw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.23.2"
|
||||
}
|
||||
},
|
||||
"node_modules/ignore": {
|
||||
"version": "7.0.5",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
|
||||
@@ -8513,18 +8463,6 @@
|
||||
"url": "https://github.com/sponsors/fregante"
|
||||
}
|
||||
},
|
||||
"node_modules/marked": {
|
||||
"version": "18.0.4",
|
||||
"resolved": "https://registry.npmjs.org/marked/-/marked-18.0.4.tgz",
|
||||
"integrity": "sha512-c/BTaKzg0G6ezQx97DAkYU7k0HM6ys0FqYeKBL6hlBByZwy+ycA1+f0vDdjMHKKeEjdgkx0GOv9Il6D+85cOqA==",
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"marked": "bin/marked.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 20"
|
||||
}
|
||||
},
|
||||
"node_modules/marky": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/marky/-/marky-1.3.0.tgz",
|
||||
@@ -9887,33 +9825,6 @@
|
||||
"react": "^19.2.6"
|
||||
}
|
||||
},
|
||||
"node_modules/react-i18next": {
|
||||
"version": "17.0.8",
|
||||
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-17.0.8.tgz",
|
||||
"integrity": "sha512-0ooKbGLU8JXhe1zwpQUWIeXSgLPOfwJmgheWRIUpcoA0CpyabpGhayjdG+/eA5esC1AQ8h2jWpXjJfzQzeDOCw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.29.2",
|
||||
"html-parse-stringify": "^3.0.1",
|
||||
"use-sync-external-store": "^1.6.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"i18next": ">= 26.2.0",
|
||||
"react": ">= 16.8.0",
|
||||
"typescript": "^5 || ^6"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"react-native": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-remove-scroll": {
|
||||
"version": "2.7.2",
|
||||
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
|
||||
@@ -11828,15 +11739,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
|
||||
"integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
@@ -12046,15 +11948,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/void-elements": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
|
||||
"integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/w3c-xmlserializer": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
|
||||
|
||||
@@ -36,15 +36,11 @@
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"dayjs": "^1.11.20",
|
||||
"i18next": "^26.2.0",
|
||||
"i18next-browser-languagedetector": "^8.2.1",
|
||||
"lucide-react": "^1.16.0",
|
||||
"marked": "^18.0.4",
|
||||
"qr-scanner": "^1.4.2",
|
||||
"qrious": "^4.0.2",
|
||||
"react": "^19.2.6",
|
||||
"react-dom": "^19.2.6",
|
||||
"react-i18next": "^17.0.8",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.6.0"
|
||||
},
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import ToolCard from '@/pages/Dashboard/ToolCard';
|
||||
import { getFeatureByKey } from '@/config/features';
|
||||
import type { PageType } from '@/types/storage';
|
||||
import { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { navigateTo, visiblePages, pageOrder } = useRouter();
|
||||
const { t } = useTranslation(['features']);
|
||||
|
||||
const visibleSet = useMemo(() => new Set<string>(visiblePages), [visiblePages]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(290px,1fr))] auto-rows-auto gap-3.5 p-3.5 w-full h-auto',
|
||||
'select-none',
|
||||
)}
|
||||
>
|
||||
{pageOrder.map((key) => {
|
||||
if (!visibleSet.has(key)) return null;
|
||||
|
||||
const feature = getFeatureByKey(key);
|
||||
if (!feature?.themeColorKey || feature.icon == null) return null;
|
||||
|
||||
return (
|
||||
<ToolCard
|
||||
key={key}
|
||||
title={t(feature.labelKey)}
|
||||
description={t(feature.descriptionKey)}
|
||||
colorKey={feature.themeColorKey}
|
||||
icon={feature.icon}
|
||||
onNavigate={() => navigateTo(key as PageType)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,177 +0,0 @@
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { Download, Trash2 } from 'lucide-react';
|
||||
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import { Button } from '@/components/ui/button'; // 💡 1. 全面回归规范：引入原生的 shadcn 原子 Button
|
||||
import { useStorageState } from '@/utils/useStorageState';
|
||||
import type { HtmlToMarkdownPreviewMode } from '@/types/storage';
|
||||
import { downloadMarkdownFile, htmlToMarkdown, SAMPLE_HTML } from '@/utils/htmlToMarkdown';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const isValidPreviewMode = (val: unknown): val is HtmlToMarkdownPreviewMode =>
|
||||
typeof val === 'string' && ['split', 'preview', 'markdown'].includes(val);
|
||||
|
||||
export default function HtmlToMarkdownPage() {
|
||||
const { t } = useLazyTranslation('htmlToMarkdown');
|
||||
const [previewMode, setPreviewMode] = useStorageState(
|
||||
'htmlToMarkdown/previewMode',
|
||||
'split' as HtmlToMarkdownPreviewMode,
|
||||
isValidPreviewMode,
|
||||
);
|
||||
const [html, setHtml] = useState(SAMPLE_HTML);
|
||||
|
||||
const result = useMemo(() => htmlToMarkdown(html), [html]);
|
||||
const error = result.hasError ? (result.error ?? null) : null;
|
||||
|
||||
const handleModeChange = useCallback(
|
||||
(newMode: HtmlToMarkdownPreviewMode) => {
|
||||
setPreviewMode(newMode);
|
||||
},
|
||||
[setPreviewMode],
|
||||
);
|
||||
|
||||
const handleClear = useCallback(() => {
|
||||
setHtml('');
|
||||
}, []);
|
||||
|
||||
const handleDownload = useCallback(() => {
|
||||
if (result.markdown) {
|
||||
downloadMarkdownFile(result.markdown, 'converted.md');
|
||||
}
|
||||
}, [result.markdown]);
|
||||
|
||||
const showInput = previewMode !== 'preview';
|
||||
const showOutput = previewMode !== 'markdown';
|
||||
|
||||
return (
|
||||
/* 💡 统一间距尺寸：
|
||||
- 彻底清除多余的 container max-w-7xl 这种网页大边距，
|
||||
- 统一收拢为我们先前在 Dashboard 页、JSON 工具箱制定的 p-4 space-y-4 标准极客桌面规格。
|
||||
*/
|
||||
<div className="p-4 w-full flex flex-col space-y-4 select-none">
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* 工具栏集成区 */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-between items-stretch sm:items-center bg-secondary/40 rounded-xl border border-border/60 px-1.5 py-1.5 sm:h-12">
|
||||
<SwitchButtonGroup
|
||||
value={previewMode}
|
||||
options={[
|
||||
{ value: 'split', label: t('splitMode') },
|
||||
{ value: 'preview', label: t('previewMode') },
|
||||
{ value: 'markdown', label: t('markdownMode') },
|
||||
]}
|
||||
onChange={handleModeChange}
|
||||
size="small"
|
||||
className="w-full sm:w-auto"
|
||||
/>
|
||||
|
||||
<div className="flex gap-2 shrink-0">
|
||||
{/* 2. 重塑下载按钮：接入受控 Button，追加 active 物理微缩放动效 */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleDownload}
|
||||
disabled={!result.markdown}
|
||||
className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm"
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
{t('download')}
|
||||
</Button>
|
||||
|
||||
{/* 重塑清空按钮 */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleClear}
|
||||
className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm text-destructive hover:text-destructive hover:bg-destructive/5 dark:hover:bg-destructive/10 border-input/60"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
{t('clear')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 错误提示：
|
||||
- 💡 核心修复点：将硬编码的 bg-red-50 实色，完美超进化为系统的全自适应透明色变体
|
||||
*/}
|
||||
{error && (
|
||||
<div className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-destructive text-xs font-semibold tracking-wide">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 双翼/单栏联动面板展示区 */}
|
||||
<div
|
||||
className={cn(
|
||||
'grid gap-4 min-h-[460px] w-full',
|
||||
showInput && showOutput ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1',
|
||||
)}
|
||||
>
|
||||
{/* HTML 输入端卡片面板 */}
|
||||
{showInput && (
|
||||
/* 3. 智能聚焦框联动（Focus Ring Clamping）：
|
||||
- 外层容器追加 focus-within 变量追踪大闸。
|
||||
- 只要用户用鼠标点击了内部的 textarea，外层整块精巧的圆角大边框会一帧内亮起 primary 系统的深色呼吸发光环，
|
||||
- 这种“全外包裹层框聚焦”的体验极大模仿了本地原生 IDE 的硬核专业体验！
|
||||
*/
|
||||
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col focus-within:ring-1 focus-within:ring-ring focus-within:border-ring">
|
||||
{/* 卡片头部：改用标准的灰色 bg-muted/50 */}
|
||||
<div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
|
||||
<span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
|
||||
{t('inputLabel')}
|
||||
</span>
|
||||
<span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
|
||||
{t('charCount', { count: html.length })}
|
||||
</span>
|
||||
</div>
|
||||
<textarea
|
||||
value={html}
|
||||
onChange={(e) => setHtml(e.target.value)}
|
||||
placeholder={t('inputPlaceholder')}
|
||||
className="flex-1 min-h-[380px] p-4 bg-transparent font-mono text-xs leading-relaxed resize-none focus:outline-none text-foreground/90 select-text"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Markdown 输出端卡片面板 */}
|
||||
{showOutput && (
|
||||
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col">
|
||||
<div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
|
||||
<span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
|
||||
{(previewMode as string) === 'markdown'
|
||||
? t('markdownOutputLabel')
|
||||
: t('previewLabel')}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
|
||||
{t('charCount', { count: result.markdownLength })}
|
||||
</span>
|
||||
<CopyButton
|
||||
text={result.markdown}
|
||||
className="h-6 w-6 rounded-md border text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(previewMode as string) === 'markdown' ? (
|
||||
<textarea
|
||||
value={result.markdown}
|
||||
readOnly
|
||||
className="flex-1 min-h-[380px] p-4 font-mono text-xs leading-relaxed resize-none focus:outline-none bg-muted/30 dark:bg-muted/10 text-foreground/80 select-text"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex-1 p-4 min-h-[380px] overflow-auto bg-transparent font-mono text-xs leading-relaxed whitespace-pre-wrap break-all text-foreground/90 select-text">
|
||||
{result.markdown || (
|
||||
<span className="text-muted-foreground/70 italic text-[11px] font-sans">
|
||||
{t('emptyHint')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,305 +0,0 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Download, Printer, Trash2 } from 'lucide-react';
|
||||
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useStorageState } from '@/utils/useStorageState';
|
||||
import type { MarkdownToHtmlPreviewMode } from '@/types/storage';
|
||||
import {
|
||||
downloadHtmlFile,
|
||||
markdownToHtml,
|
||||
printHtml,
|
||||
SAMPLE_MARKDOWN,
|
||||
wrapHtmlDocument,
|
||||
} from '@/utils/markdownToHtml';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const isValidPreviewMode = (val: unknown): val is MarkdownToHtmlPreviewMode =>
|
||||
typeof val === 'string' && ['split', 'preview', 'html'].includes(val);
|
||||
|
||||
// 💡 规范回归：保持最纯净的通用选择器集合，内部变量全部交由全局 :root 驱动
|
||||
const PREVIEW_STYLES = `
|
||||
.markdown-body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--md-foreground);
|
||||
background-color: transparent;
|
||||
font-size: 14px;
|
||||
}
|
||||
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
color: var(--md-foreground);
|
||||
}
|
||||
.markdown-body h1 { border-bottom: 1px solid var(--md-border); padding-bottom: 0.3em; font-size: 1.6em; }
|
||||
.markdown-body h2 { border-bottom: 1px solid var(--md-border); padding-bottom: 0.3em; font-size: 1.35em; }
|
||||
.markdown-body p { margin-top: 0; margin-bottom: 16px; }
|
||||
.markdown-body a { color: var(--md-link-color); text-decoration: none; }
|
||||
.markdown-body a:hover { text-decoration: underline; }
|
||||
.markdown-body code {
|
||||
background-color: var(--md-code-bg);
|
||||
border-radius: 4px;
|
||||
font-size: 85%;
|
||||
padding: 0.2em 0.4em;
|
||||
font-family: Menlo, Consolas, monospace;
|
||||
}
|
||||
.markdown-body pre {
|
||||
background-color: var(--md-pre-bg);
|
||||
border-radius: 8px;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
overflow: auto;
|
||||
padding: 16px;
|
||||
margin: 0 0 16px;
|
||||
border: 1px solid var(--md-border);
|
||||
}
|
||||
.markdown-body pre code {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.markdown-body blockquote {
|
||||
border-left: 0.25em solid var(--md-quote-line);
|
||||
color: var(--md-muted);
|
||||
margin: 0 0 16px;
|
||||
padding: 0 1em;
|
||||
}
|
||||
.markdown-body table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.markdown-body table th, .markdown-body table td {
|
||||
border: 1px solid var(--md-border);
|
||||
padding: 6px 13px;
|
||||
}
|
||||
.markdown-body table tr:nth-child(2n) { background-color: var(--md-code-bg); }
|
||||
.markdown-body table th { font-weight: 600; background-color: var(--md-code-bg); }
|
||||
`;
|
||||
|
||||
export default function MarkdownToHtmlPage() {
|
||||
const { t } = useLazyTranslation('markdownToHtml');
|
||||
const [previewMode, setPreviewMode] = useStorageState(
|
||||
'markdownToHtml/previewMode',
|
||||
'split' as MarkdownToHtmlPreviewMode,
|
||||
isValidPreviewMode,
|
||||
);
|
||||
const [markdown, setMarkdown] = useState(SAMPLE_MARKDOWN);
|
||||
const iframeRef = useRef<HTMLIFrameElement>(null);
|
||||
|
||||
const result = useMemo(() => markdownToHtml(markdown), [markdown]);
|
||||
const error = result.hasError ? (result.error ?? null) : null;
|
||||
|
||||
// 💡 自适应大总管：以极高严谨度拼装明暗大闸，用标准换行切断粘连风险
|
||||
useEffect(() => {
|
||||
const iframe = iframeRef.current;
|
||||
if (!iframe) return;
|
||||
|
||||
const isDarkMode = document.documentElement.classList.contains('dark');
|
||||
|
||||
const themeVariables = isDarkMode
|
||||
? `:root {
|
||||
--md-bg: #090d16;
|
||||
--md-foreground: #e6edf3;
|
||||
--md-border: rgba(255,255,255,0.15);
|
||||
--md-code-bg: rgba(255,255,255,0.12);
|
||||
--md-pre-bg: rgba(255,255,255,0.04);
|
||||
--md-muted: #8b949e;
|
||||
--md-quote-line: rgba(255,255,255,0.25);
|
||||
--md-link-color: #58a6ff;
|
||||
}`
|
||||
: `:root {
|
||||
--md-bg: #ffffff;
|
||||
--md-foreground: #1f2328;
|
||||
--md-border: rgba(128,128,128,0.2);
|
||||
--md-code-bg: rgba(128,128,128,0.08);
|
||||
--md-pre-bg: rgba(128,128,128,0.03);
|
||||
--md-muted: #4b5563;
|
||||
--md-quote-line: rgba(128,128,128,0.3);
|
||||
--md-link-color: #3b82f6;
|
||||
}`;
|
||||
|
||||
// 💡 3. 核心大清洗：将全局基础树（html, body）与派生样式完全独立硬编码，杜绝任何语法踩踏
|
||||
const baseGlobalStyles = `
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--md-bg);
|
||||
color: var(--md-foreground);
|
||||
}
|
||||
body {
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
`;
|
||||
|
||||
iframe.srcdoc = `<!DOCTYPE html>
|
||||
<html lang="zh" style="background-color: ${isDarkMode ? '#090d16' : '#ffffff'};">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
${themeVariables}
|
||||
${PREVIEW_STYLES}
|
||||
${baseGlobalStyles}
|
||||
</style>
|
||||
</head>
|
||||
<body class="markdown-body">${result.html}</body>
|
||||
</html>`;
|
||||
}, [result.html, previewMode]);
|
||||
|
||||
const handleModeChange = useCallback(
|
||||
(newMode: MarkdownToHtmlPreviewMode) => {
|
||||
setPreviewMode(newMode);
|
||||
},
|
||||
[setPreviewMode],
|
||||
);
|
||||
|
||||
const handleClear = useCallback(() => {
|
||||
setMarkdown('');
|
||||
}, []);
|
||||
|
||||
const handlePrint = useCallback(() => {
|
||||
printHtml(result.html, t('pageTitle'));
|
||||
}, [result.html, t]);
|
||||
|
||||
const handleDownload = useCallback(() => {
|
||||
const doc = wrapHtmlDocument(result.html, t('pageTitle'));
|
||||
downloadHtmlFile(doc, 'markdown-export.html');
|
||||
}, [result.html, t]);
|
||||
|
||||
const showInput = previewMode !== 'preview';
|
||||
const showPreview = previewMode !== 'html';
|
||||
|
||||
return (
|
||||
<div className="p-4 w-full flex flex-col space-y-4 select-none">
|
||||
<div className="flex flex-col space-y-4">
|
||||
{/* 工具集成控制中枢 */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-between items-stretch sm:items-center bg-secondary/40 rounded-xl border border-border/60 px-1.5 py-1.5 sm:h-12">
|
||||
<SwitchButtonGroup
|
||||
value={previewMode}
|
||||
options={[
|
||||
{ value: 'split', label: t('splitMode') },
|
||||
{ value: 'preview', label: t('previewMode') },
|
||||
{ value: 'html', label: t('htmlMode') },
|
||||
]}
|
||||
onChange={handleModeChange}
|
||||
size="small"
|
||||
className="w-full sm:w-auto"
|
||||
/>
|
||||
|
||||
<div className="flex gap-2 shrink-0">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleClear}
|
||||
className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm text-destructive hover:text-destructive hover:bg-destructive/5 dark:hover:bg-destructive/10 border-input/60"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
{t('clear')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handlePrint}
|
||||
disabled={!result.html}
|
||||
className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm"
|
||||
>
|
||||
<Printer className="h-3.5 w-3.5" />
|
||||
{t('print')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleDownload}
|
||||
disabled={!result.html}
|
||||
className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm"
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
{t('download')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 错误拦截提示框 */}
|
||||
{error && (
|
||||
<div
|
||||
role="alert"
|
||||
className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-destructive text-xs font-semibold tracking-wide"
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 主框架多栏联动排版轴 */}
|
||||
<div
|
||||
className={cn(
|
||||
'grid gap-4 min-h-[480px] w-full',
|
||||
showInput && showPreview ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1',
|
||||
)}
|
||||
>
|
||||
{/* Markdown 输入翼终端 */}
|
||||
{showInput && (
|
||||
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col focus-within:ring-1 focus-within:ring-ring focus-within:border-ring">
|
||||
<div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
|
||||
<span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
|
||||
{t('inputLabel')}
|
||||
</span>
|
||||
<span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
|
||||
{t('charCount', { count: markdown.length })}
|
||||
</span>
|
||||
</div>
|
||||
<textarea
|
||||
value={markdown}
|
||||
onChange={(e) => setMarkdown(e.target.value)}
|
||||
placeholder={t('inputPlaceholder')}
|
||||
className="flex-1 min-h-[390px] p-4 bg-transparent font-mono text-xs leading-relaxed resize-none focus:outline-none text-foreground/90 select-text"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 实时 HTML/Iframe 预览翼终端 */}
|
||||
{showPreview && (
|
||||
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col">
|
||||
<div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
|
||||
<span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
|
||||
{(previewMode as string) === 'html' ? t('htmlOutputLabel') : t('previewLabel')}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
|
||||
{t('charCount', { count: result.htmlLength })}
|
||||
</span>
|
||||
<CopyButton
|
||||
text={result.html}
|
||||
className="h-6 w-6 rounded-md border text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(previewMode as string) === 'html' ? (
|
||||
<textarea
|
||||
value={result.html}
|
||||
readOnly
|
||||
className="flex-1 min-h-[390px] p-4 font-mono text-xs leading-relaxed resize-none focus:outline-none bg-muted/30 dark:bg-muted/10 text-foreground/80 select-text"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex-1 min-h-[390px] overflow-hidden bg-transparent">
|
||||
<iframe
|
||||
ref={iframeRef}
|
||||
title="markdown-preview"
|
||||
className="w-full h-full min-h-[360px] border-none bg-transparent"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,876 @@
|
||||
{
|
||||
"buttons_copy": {
|
||||
"message": "复制",
|
||||
"description": "Translation key: buttons_copy"
|
||||
},
|
||||
"buttons_clear": {
|
||||
"message": "清理",
|
||||
"description": "Translation key: buttons_clear"
|
||||
},
|
||||
|
||||
"messages_copySuccess": {
|
||||
"message": "已复制到剪贴板",
|
||||
"description": "Translation key: messages_copySuccess"
|
||||
},
|
||||
"messages_copyError": {
|
||||
"message": "复制失败",
|
||||
"description": "Translation key: messages_copyError"
|
||||
},
|
||||
"messages_copyEmpty": {
|
||||
"message": "无内容可复制",
|
||||
"description": "Translation key: messages_copyEmpty"
|
||||
},
|
||||
"errorBoundary_title": {
|
||||
"message": "糟糕，出了点问题",
|
||||
"description": "Translation key: errorBoundary_title"
|
||||
},
|
||||
"errorBoundary_description": {
|
||||
"message": "应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。",
|
||||
"description": "Translation key: errorBoundary_description"
|
||||
},
|
||||
"errorBoundary_refresh": {
|
||||
"message": "刷新应用",
|
||||
"description": "Translation key: errorBoundary_refresh"
|
||||
},
|
||||
"errorBoundary_retry": {
|
||||
"message": "重新尝试",
|
||||
"description": "Translation key: errorBoundary_retry"
|
||||
},
|
||||
"pageErrorBoundary_title": {
|
||||
"message": "该功能运行异常",
|
||||
"description": "Translation key: pageErrorBoundary_title"
|
||||
},
|
||||
"pageErrorBoundary_description": {
|
||||
"message": "该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。",
|
||||
"description": "Translation key: pageErrorBoundary_description"
|
||||
},
|
||||
"router_notFound": {
|
||||
"message": "页面未找到",
|
||||
"description": "Translation key: router_notFound"
|
||||
},
|
||||
"router_notFoundDescription": {
|
||||
"message": "该功能在当前运行环境（{{entryPointType}}）下不可用或已被移除。",
|
||||
"description": "Translation key: router_notFoundDescription"
|
||||
},
|
||||
"textInputArea_clear": {
|
||||
"message": "清空",
|
||||
"description": "Translation key: textInputArea_clear"
|
||||
},
|
||||
"textInputArea_copyContent": {
|
||||
"message": "复制内容",
|
||||
"description": "Translation key: textInputArea_copyContent"
|
||||
},
|
||||
"textInputArea_cleared": {
|
||||
"message": "已清空",
|
||||
"description": "Translation key: textInputArea_cleared"
|
||||
},
|
||||
"textInputArea_placeholder": {
|
||||
"message": "请输入文本",
|
||||
"description": "Translation key: textInputArea_placeholder"
|
||||
},
|
||||
"dashboard_title": {
|
||||
"message": "仪表盘",
|
||||
"description": "Translation key: dashboard_title"
|
||||
},
|
||||
"dashboard_searchPlaceholder": {
|
||||
"message": "搜索工具...",
|
||||
"description": "Translation key: dashboard_searchPlaceholder"
|
||||
},
|
||||
"dashboard_recentlyUsed": {
|
||||
"message": "最近使用",
|
||||
"description": "Translation key: dashboard_recentlyUsed"
|
||||
},
|
||||
"dashboard_allTools": {
|
||||
"message": "全部工具",
|
||||
"description": "Translation key: dashboard_allTools"
|
||||
},
|
||||
"timestamp_title": {
|
||||
"message": "时间戳",
|
||||
"description": "Translation key: timestamp_title"
|
||||
},
|
||||
"timestamp_description": {
|
||||
"message": "Unix 毫秒数转换与格式化",
|
||||
"description": "Translation key: timestamp_description"
|
||||
},
|
||||
"storageCleaner_title": {
|
||||
"message": "存储清理",
|
||||
"description": "Translation key: storageCleaner_title"
|
||||
},
|
||||
"storageCleaner_description": {
|
||||
"message": "清理缓存、Cookies 及本地存储",
|
||||
"description": "Translation key: storageCleaner_description"
|
||||
},
|
||||
"qrCode_title": {
|
||||
"message": "二维码工具",
|
||||
"description": "Translation key: qrCode_title"
|
||||
},
|
||||
"qrCode_description": {
|
||||
"message": "生成当前选中的 URL 的二维码",
|
||||
"description": "Translation key: qrCode_description"
|
||||
},
|
||||
"textStatistics_title": {
|
||||
"message": "文本统计",
|
||||
"description": "Translation key: textStatistics_title"
|
||||
},
|
||||
"textStatistics_description": {
|
||||
"message": "实时分析文本字符、单词及字节",
|
||||
"description": "Translation key: textStatistics_description"
|
||||
},
|
||||
"jwt_title": {
|
||||
"message": "JWT 解析",
|
||||
"description": "Translation key: jwt_title"
|
||||
},
|
||||
"jwt_description": {
|
||||
"message": "JSON Web Token 解码与查看",
|
||||
"description": "Translation key: jwt_description"
|
||||
},
|
||||
"jsonDiff_title": {
|
||||
"message": "JSON 工具",
|
||||
"description": "Translation key: jsonDiff_title"
|
||||
},
|
||||
"jsonDiff_description": {
|
||||
"message": "差异比较、格式化、YAML/TOML 转换及压缩",
|
||||
"description": "Translation key: jsonDiff_description"
|
||||
},
|
||||
"base64Converter_title": {
|
||||
"message": "Base64 转换器",
|
||||
"description": "Translation key: base64Converter_title"
|
||||
},
|
||||
"base64Converter_description": {
|
||||
"message": "文本、文件与图像的 Base64 编码转换",
|
||||
"description": "Translation key: base64Converter_description"
|
||||
},
|
||||
"rightClickRestorer_title": {
|
||||
"message": "右键恢复",
|
||||
"description": "Translation key: rightClickRestorer_title"
|
||||
},
|
||||
"rightClickRestorer_description": {
|
||||
"message": "检测并恢复被网站禁用的浏览器右键菜单",
|
||||
"description": "Translation key: rightClickRestorer_description"
|
||||
},
|
||||
"base64Converter_pageTitle": {
|
||||
"message": "Base64 转换器",
|
||||
"description": "Translation key: base64Converter_pageTitle"
|
||||
},
|
||||
"base64Converter_textMode": {
|
||||
"message": "文本",
|
||||
"description": "Translation key: base64Converter_textMode"
|
||||
},
|
||||
"base64Converter_fileMode": {
|
||||
"message": "文件",
|
||||
"description": "Translation key: base64Converter_fileMode"
|
||||
},
|
||||
"base64Converter_imageMode": {
|
||||
"message": "图像",
|
||||
"description": "Translation key: base64Converter_imageMode"
|
||||
},
|
||||
"base64Converter_encode": {
|
||||
"message": "编码",
|
||||
"description": "Translation key: base64Converter_encode"
|
||||
},
|
||||
"base64Converter_decode": {
|
||||
"message": "解码",
|
||||
"description": "Translation key: base64Converter_decode"
|
||||
},
|
||||
"base64Converter_clear": {
|
||||
"message": "清空",
|
||||
"description": "Translation key: base64Converter_clear"
|
||||
},
|
||||
"base64Converter_textInputPlaceholder": {
|
||||
"message": "输入需要编码为 Base64 的文本...",
|
||||
"description": "Translation key: base64Converter_textInputPlaceholder"
|
||||
},
|
||||
"base64Converter_base64InputPlaceholder": {
|
||||
"message": "输入需要解码的 Base64 字符串...",
|
||||
"description": "Translation key: base64Converter_base64InputPlaceholder"
|
||||
},
|
||||
"base64Converter_base64Output": {
|
||||
"message": "Base64 编码结果",
|
||||
"description": "Translation key: base64Converter_base64Output"
|
||||
},
|
||||
"base64Converter_textOutput": {
|
||||
"message": "解码文本结果",
|
||||
"description": "Translation key: base64Converter_textOutput"
|
||||
},
|
||||
"base64Converter_copyRaw": {
|
||||
"message": "复制纯 Base64",
|
||||
"description": "Translation key: base64Converter_copyRaw"
|
||||
},
|
||||
"base64Converter_copyDataUri": {
|
||||
"message": "复制 Data URI",
|
||||
"description": "Translation key: base64Converter_copyDataUri"
|
||||
},
|
||||
"base64Converter_clickOrDropToFile": {
|
||||
"message": "点击或拖拽文件到此处",
|
||||
"description": "Translation key: base64Converter_clickOrDropToFile"
|
||||
},
|
||||
"base64Converter_clickOrDropToImage": {
|
||||
"message": "点击或拖拽图像到此处",
|
||||
"description": "Translation key: base64Converter_clickOrDropToImage"
|
||||
},
|
||||
"base64Converter_clickOrDropToReplace": {
|
||||
"message": "点击或拖拽以替换文件",
|
||||
"description": "Translation key: base64Converter_clickOrDropToReplace"
|
||||
},
|
||||
"base64Converter_maxFileSize": {
|
||||
"message": "最大文件大小：{{max}}",
|
||||
"description": "Translation key: base64Converter_maxFileSize"
|
||||
},
|
||||
"base64Converter_supportedFormats": {
|
||||
"message": "支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式",
|
||||
"description": "Translation key: base64Converter_supportedFormats"
|
||||
},
|
||||
"base64Converter_fileSizeExceeded": {
|
||||
"message": "文件大小超出限制（最大 {{max}}）",
|
||||
"description": "Translation key: base64Converter_fileSizeExceeded"
|
||||
},
|
||||
"base64Converter_unsupportedImageType": {
|
||||
"message": "不支持的图像格式",
|
||||
"description": "Translation key: base64Converter_unsupportedImageType"
|
||||
},
|
||||
"base64Converter_conversionFailed": {
|
||||
"message": "转换失败",
|
||||
"description": "Translation key: base64Converter_conversionFailed"
|
||||
},
|
||||
"base64Converter_originalSize": {
|
||||
"message": "原始大小",
|
||||
"description": "Translation key: base64Converter_originalSize"
|
||||
},
|
||||
"base64Converter_encodedSize": {
|
||||
"message": "编码大小",
|
||||
"description": "Translation key: base64Converter_encodedSize"
|
||||
},
|
||||
"base64Converter_invalidBase64": {
|
||||
"message": "Base64 字符串无效",
|
||||
"description": "Translation key: base64Converter_invalidBase64"
|
||||
},
|
||||
"base64Converter_binaryDataDetected": {
|
||||
"message": "输入似乎是二进制数据（如图片）。请切换到「图像」选项卡。",
|
||||
"description": "Translation key: base64Converter_binaryDataDetected"
|
||||
},
|
||||
"base64Converter_imageDataUriHint": {
|
||||
"message": "检测到图片的 data URI，请使用「图像」选项卡进行解码。",
|
||||
"description": "Translation key: base64Converter_imageDataUriHint"
|
||||
},
|
||||
"base64Converter_switchToImageMode": {
|
||||
"message": "切换到图像模式",
|
||||
"description": "Translation key: base64Converter_switchToImageMode"
|
||||
},
|
||||
"base64Converter_download": {
|
||||
"message": "下载",
|
||||
"description": "Translation key: base64Converter_download"
|
||||
},
|
||||
"base64Converter_decodedFileName": {
|
||||
"message": "解码后文件名",
|
||||
"description": "Translation key: base64Converter_decodedFileName"
|
||||
},
|
||||
"base64Converter_decodeBase64Placeholder": {
|
||||
"message": "输入需要解码的 Base64 或 data URI...",
|
||||
"description": "Translation key: base64Converter_decodeBase64Placeholder"
|
||||
},
|
||||
"base64Converter_decodedFileOutput": {
|
||||
"message": "解码文件",
|
||||
"description": "Translation key: base64Converter_decodedFileOutput"
|
||||
},
|
||||
"base64Converter_decodedImageOutput": {
|
||||
"message": "解码图像",
|
||||
"description": "Translation key: base64Converter_decodedImageOutput"
|
||||
},
|
||||
"base64Converter_inferredMimeType": {
|
||||
"message": "推断的 MIME 类型",
|
||||
"description": "Translation key: base64Converter_inferredMimeType"
|
||||
},
|
||||
"base64Converter_decodedSize": {
|
||||
"message": "解码大小",
|
||||
"description": "Translation key: base64Converter_decodedSize"
|
||||
},
|
||||
"jsonDiff_pageTitle": {
|
||||
"message": "JSON 差异比较",
|
||||
"description": "Translation key: jsonDiff_pageTitle"
|
||||
},
|
||||
"jsonDiff_leftPlaceholder": {
|
||||
"message": "输入原始 JSON...",
|
||||
"description": "Translation key: jsonDiff_leftPlaceholder"
|
||||
},
|
||||
"jsonDiff_rightPlaceholder": {
|
||||
"message": "输入目标 JSON...",
|
||||
"description": "Translation key: jsonDiff_rightPlaceholder"
|
||||
},
|
||||
"jsonDiff_leftLabel": {
|
||||
"message": "原始 JSON",
|
||||
"description": "Translation key: jsonDiff_leftLabel"
|
||||
},
|
||||
"jsonDiff_rightLabel": {
|
||||
"message": "目标 JSON",
|
||||
"description": "Translation key: jsonDiff_rightLabel"
|
||||
},
|
||||
"jsonDiff_sideBySideMode": {
|
||||
"message": "并排",
|
||||
"description": "Translation key: jsonDiff_sideBySideMode"
|
||||
},
|
||||
"jsonDiff_unifiedMode": {
|
||||
"message": "统一",
|
||||
"description": "Translation key: jsonDiff_unifiedMode"
|
||||
},
|
||||
"jsonDiff_previousDiff": {
|
||||
"message": "上一个",
|
||||
"description": "Translation key: jsonDiff_previousDiff"
|
||||
},
|
||||
"jsonDiff_nextDiff": {
|
||||
"message": "下一个",
|
||||
"description": "Translation key: jsonDiff_nextDiff"
|
||||
},
|
||||
"jsonDiff_noDiffs": {
|
||||
"message": "无差异",
|
||||
"description": "Translation key: jsonDiff_noDiffs"
|
||||
},
|
||||
"jsonDiff_invalidJson": {
|
||||
"message": "无效的 JSON 格式",
|
||||
"description": "Translation key: jsonDiff_invalidJson"
|
||||
},
|
||||
"jsonDiff_emptyHint": {
|
||||
"message": "输入两侧 JSON 后点击比较",
|
||||
"description": "Translation key: jsonDiff_emptyHint"
|
||||
},
|
||||
"jsonDiff_fixErrorHint": {
|
||||
"message": "请修正上方 JSON 的语法错误以开启实时流式比对",
|
||||
"description": "Translation key: jsonDiff_fixErrorHint"
|
||||
},
|
||||
"jsonDiff_added": {
|
||||
"message": "新增",
|
||||
"description": "Translation key: jsonDiff_added"
|
||||
},
|
||||
"jsonDiff_removed": {
|
||||
"message": "删除",
|
||||
"description": "Translation key: jsonDiff_removed"
|
||||
},
|
||||
"jsonDiff_modified": {
|
||||
"message": "修改",
|
||||
"description": "Translation key: jsonDiff_modified"
|
||||
},
|
||||
"jsonFormat_inputPlaceholder": {
|
||||
"message": "输入需要格式化的 JSON...",
|
||||
"description": "Translation key: jsonFormat_inputPlaceholder"
|
||||
},
|
||||
"jsonFormat_sortKeys": {
|
||||
"message": "键名排序",
|
||||
"description": "Translation key: jsonFormat_sortKeys"
|
||||
},
|
||||
"jsonFormat_indentSize": {
|
||||
"message": "缩进",
|
||||
"description": "Translation key: jsonFormat_indentSize"
|
||||
},
|
||||
"jsonFormat_outputLabel": {
|
||||
"message": "格式化结果",
|
||||
"description": "Translation key: jsonFormat_outputLabel"
|
||||
},
|
||||
"jsonFormat_invalidJson": {
|
||||
"message": "无效的 JSON 格式",
|
||||
"description": "Translation key: jsonFormat_invalidJson"
|
||||
},
|
||||
"jsonFormat_emptyHint": {
|
||||
"message": "输入 JSON 后点击格式化",
|
||||
"description": "Translation key: jsonFormat_emptyHint"
|
||||
},
|
||||
"jsonFormat_fixErrorHint": {
|
||||
"message": "请修正上方 JSON 的语法错误以开启实时流式格式化",
|
||||
"description": "Translation key: jsonFormat_fixErrorHint"
|
||||
},
|
||||
"jsonFormat_originalSize": {
|
||||
"message": "原始大小",
|
||||
"description": "Translation key: jsonFormat_originalSize"
|
||||
},
|
||||
"jsonFormat_formattedSize": {
|
||||
"message": "格式化后大小",
|
||||
"description": "Translation key: jsonFormat_formattedSize"
|
||||
},
|
||||
"jsonFormat_diffMode": {
|
||||
"message": "差异比较",
|
||||
"description": "Translation key: jsonFormat_diffMode"
|
||||
},
|
||||
"jsonFormat_formatMode": {
|
||||
"message": "格式化",
|
||||
"description": "Translation key: jsonFormat_formatMode"
|
||||
},
|
||||
"jsonFormat_yamlMode": {
|
||||
"message": "YAML",
|
||||
"description": "Translation key: jsonFormat_yamlMode"
|
||||
},
|
||||
"jsonFormat_tomlMode": {
|
||||
"message": "TOML",
|
||||
"description": "Translation key: jsonFormat_tomlMode"
|
||||
},
|
||||
"jsonFormat_minifyMode": {
|
||||
"message": "压缩",
|
||||
"description": "Translation key: jsonFormat_minifyMode"
|
||||
},
|
||||
"jsonFormat_yamlModeInputPlaceholder": {
|
||||
"message": "输入需要转换的 JSON...",
|
||||
"description": "Translation key: jsonFormat_yamlModeInputPlaceholder"
|
||||
},
|
||||
"jsonFormat_yamlModeOutputLabel": {
|
||||
"message": "YAML 结果",
|
||||
"description": "Translation key: jsonFormat_yamlModeOutputLabel"
|
||||
},
|
||||
"jsonFormat_yamlModeEmptyHint": {
|
||||
"message": "输入 JSON 后点击转换",
|
||||
"description": "Translation key: jsonFormat_yamlModeEmptyHint"
|
||||
},
|
||||
"jsonFormat_tomlModeInputPlaceholder": {
|
||||
"message": "输入需要转换的 JSON...",
|
||||
"description": "Translation key: jsonFormat_tomlModeInputPlaceholder"
|
||||
},
|
||||
"jsonFormat_tomlModeOutputLabel": {
|
||||
"message": "TOML 结果",
|
||||
"description": "Translation key: jsonFormat_tomlModeOutputLabel"
|
||||
},
|
||||
"jsonFormat_tomlModeEmptyHint": {
|
||||
"message": "输入 JSON 后点击转换",
|
||||
"description": "Translation key: jsonFormat_tomlModeEmptyHint"
|
||||
},
|
||||
"jsonFormat_minifyModeInputPlaceholder": {
|
||||
"message": "输入需要压缩的 JSON...",
|
||||
"description": "Translation key: jsonFormat_minifyModeInputPlaceholder"
|
||||
},
|
||||
"jsonFormat_minifyModeOutputLabel": {
|
||||
"message": "压缩结果",
|
||||
"description": "Translation key: jsonFormat_minifyModeOutputLabel"
|
||||
},
|
||||
"jsonFormat_minifyModeEmptyHint": {
|
||||
"message": "输入 JSON 后点击压缩",
|
||||
"description": "Translation key: jsonFormat_minifyModeEmptyHint"
|
||||
},
|
||||
"jwt_pageTitle": {
|
||||
"message": "JWT 解析",
|
||||
"description": "Translation key: jwt_pageTitle"
|
||||
},
|
||||
"jwt_placeholder": {
|
||||
"message": "在此粘贴 JWT 令牌 (Encoded JWT)...",
|
||||
"description": "Translation key: jwt_placeholder"
|
||||
},
|
||||
"jwt_headerTitle": {
|
||||
"message": "HEADER: 算法 & 令牌类型",
|
||||
"description": "Translation key: jwt_headerTitle"
|
||||
},
|
||||
"jwt_payloadTitle": {
|
||||
"message": "PAYLOAD: 数据",
|
||||
"description": "Translation key: jwt_payloadTitle"
|
||||
},
|
||||
"jwt_signatureTitle": {
|
||||
"message": "签名",
|
||||
"description": "Translation key: jwt_signatureTitle"
|
||||
},
|
||||
"jwt_noSignature": {
|
||||
"message": "无签名",
|
||||
"description": "Translation key: jwt_noSignature"
|
||||
},
|
||||
"jwt_invalidFormat": {
|
||||
"message": "无法解析",
|
||||
"description": "Translation key: jwt_invalidFormat"
|
||||
},
|
||||
"jwt_errors_invalidBase64String": {
|
||||
"message": "无效的 Base64URL 字符串",
|
||||
"description": "Translation key: jwt_errors_invalidBase64String"
|
||||
},
|
||||
"jwt_errors_failedToDecode": {
|
||||
"message": "Base64URL 解码失败：",
|
||||
"description": "Translation key: jwt_errors_failedToDecode"
|
||||
},
|
||||
"jwt_errors_invalidFormat": {
|
||||
"message": "JWT 格式错误：必须包含三个由 . 分隔的部分",
|
||||
"description": "Translation key: jwt_errors_invalidFormat"
|
||||
},
|
||||
"jwt_errors_parseHeaderFailed": {
|
||||
"message": "解析 Header 失败：",
|
||||
"description": "Translation key: jwt_errors_parseHeaderFailed"
|
||||
},
|
||||
"jwt_errors_parsePayloadFailed": {
|
||||
"message": "解析 Payload 失败：",
|
||||
"description": "Translation key: jwt_errors_parsePayloadFailed"
|
||||
},
|
||||
"qrCode_pageTitle": {
|
||||
"message": "二维码工具",
|
||||
"description": "Translation key: qrCode_pageTitle"
|
||||
},
|
||||
"qrCode_urlToQr": {
|
||||
"message": "文本转二维码",
|
||||
"description": "Translation key: qrCode_urlToQr"
|
||||
},
|
||||
"qrCode_qrToUrl": {
|
||||
"message": "二维码转文本",
|
||||
"description": "Translation key: qrCode_qrToUrl"
|
||||
},
|
||||
"qrCode_urlInputLabel": {
|
||||
"message": "输入 URL 或文本",
|
||||
"description": "Translation key: qrCode_urlInputLabel"
|
||||
},
|
||||
"qrCode_urlInputPlaceholder": {
|
||||
"message": "请输入 URL 或文本内容，将自动生成二维码",
|
||||
"description": "Translation key: qrCode_urlInputPlaceholder"
|
||||
},
|
||||
"qrCode_generating": {
|
||||
"message": "生成中...",
|
||||
"description": "Translation key: qrCode_generating"
|
||||
},
|
||||
"qrCode_qrCodeWillShow": {
|
||||
"message": "二维码将显示在这里",
|
||||
"description": "Translation key: qrCode_qrCodeWillShow"
|
||||
},
|
||||
"qrCode_downloadButton": {
|
||||
"message": "下载二维码",
|
||||
"description": "Translation key: qrCode_downloadButton"
|
||||
},
|
||||
"qrCode_copyQrButton": {
|
||||
"message": "复制二维码",
|
||||
"description": "Translation key: qrCode_copyQrButton"
|
||||
},
|
||||
"qrCode_qrCodeDownloadSuccess": {
|
||||
"message": "二维码下载成功",
|
||||
"description": "Translation key: qrCode_qrCodeDownloadSuccess"
|
||||
},
|
||||
"qrCode_qrCodeCopySuccess": {
|
||||
"message": "二维码已复制到剪贴板",
|
||||
"description": "Translation key: qrCode_qrCodeCopySuccess"
|
||||
},
|
||||
"qrCode_parseSuccess": {
|
||||
"message": "二维码解析成功",
|
||||
"description": "Translation key: qrCode_parseSuccess"
|
||||
},
|
||||
"qrCode_noQrDetected": {
|
||||
"message": "未检测到二维码，请确保图片清晰且包含二维码",
|
||||
"description": "Translation key: qrCode_noQrDetected"
|
||||
},
|
||||
"qrCode_parseError": {
|
||||
"message": "解析二维码失败，请重试",
|
||||
"description": "Translation key: qrCode_parseError"
|
||||
},
|
||||
"qrCode_copyError": {
|
||||
"message": "复制失败，请重试",
|
||||
"description": "Translation key: qrCode_copyError"
|
||||
},
|
||||
"qrCode_imagePasted": {
|
||||
"message": "图片粘贴成功，正在解析...",
|
||||
"description": "Translation key: qrCode_imagePasted"
|
||||
},
|
||||
"qrCode_imagePasteError": {
|
||||
"message": "粘贴图片失败，请重试",
|
||||
"description": "Translation key: qrCode_imagePasteError"
|
||||
},
|
||||
"qrCode_imageCleared": {
|
||||
"message": "图片已清除",
|
||||
"description": "Translation key: qrCode_imageCleared"
|
||||
},
|
||||
"qrCode_clickToUpload": {
|
||||
"message": "点击、拖拽或粘贴上传二维码图片",
|
||||
"description": "Translation key: qrCode_clickToUpload"
|
||||
},
|
||||
"qrCode_supportFormats": {
|
||||
"message": "支持 PNG、JPG、WEBP、Base64 格式",
|
||||
"description": "Translation key: qrCode_supportFormats"
|
||||
},
|
||||
"qrCode_resultLabel": {
|
||||
"message": "解析结果",
|
||||
"description": "Translation key: qrCode_resultLabel"
|
||||
},
|
||||
"qrCode_clickToChange": {
|
||||
"message": "点击更换图片",
|
||||
"description": "Translation key: qrCode_clickToChange"
|
||||
},
|
||||
"rightClickRestorer_loading": {
|
||||
"message": "正在加载...",
|
||||
"description": "Translation key: rightClickRestorer_loading"
|
||||
},
|
||||
"rightClickRestorer_currentDomain": {
|
||||
"message": "当前域名",
|
||||
"description": "Translation key: rightClickRestorer_currentDomain"
|
||||
},
|
||||
"rightClickRestorer_statusLocked": {
|
||||
"message": "未解锁",
|
||||
"description": "Translation key: rightClickRestorer_statusLocked"
|
||||
},
|
||||
"rightClickRestorer_statusUnlocked": {
|
||||
"message": "已解锁",
|
||||
"description": "Translation key: rightClickRestorer_statusUnlocked"
|
||||
},
|
||||
"rightClickRestorer_unsupported": {
|
||||
"message": "不支持",
|
||||
"description": "Translation key: rightClickRestorer_unsupported"
|
||||
},
|
||||
"rightClickRestorer_unsupportedDesc": {
|
||||
"message": "当前页面为浏览器内部页面或扩展页面，无法解锁右键功能。请切换到普通网页后重试。",
|
||||
"description": "Translation key: rightClickRestorer_unsupportedDesc"
|
||||
},
|
||||
"rightClickRestorer_unlockDesc": {
|
||||
"message": "点击下方按钮，为当前网站临时解锁右键菜单。刷新页面后需要重新解锁。",
|
||||
"description": "Translation key: rightClickRestorer_unlockDesc"
|
||||
},
|
||||
"rightClickRestorer_unlockBtn": {
|
||||
"message": "解锁当前网站右键",
|
||||
"description": "Translation key: rightClickRestorer_unlockBtn"
|
||||
},
|
||||
"rightClickRestorer_alreadyUnlocked": {
|
||||
"message": "右键已解锁",
|
||||
"description": "Translation key: rightClickRestorer_alreadyUnlocked"
|
||||
},
|
||||
"storageCleaner_pageTitle": {
|
||||
"message": "存储清理",
|
||||
"description": "Translation key: storageCleaner_pageTitle"
|
||||
},
|
||||
"storageCleaner_loading": {
|
||||
"message": "加载中...",
|
||||
"description": "Translation key: storageCleaner_loading"
|
||||
},
|
||||
"storageCleaner_initializing": {
|
||||
"message": "正在读取站点数据...",
|
||||
"description": "Translation key: storageCleaner_initializing"
|
||||
},
|
||||
"storageCleaner_cleaning": {
|
||||
"message": "正在清理...",
|
||||
"description": "Translation key: storageCleaner_cleaning"
|
||||
},
|
||||
"storageCleaner_cleanNow": {
|
||||
"message": "立即清理",
|
||||
"description": "Translation key: storageCleaner_cleanNow"
|
||||
},
|
||||
"storageCleaner_autoRefresh": {
|
||||
"message": "清理后自动刷新页面",
|
||||
"description": "Translation key: storageCleaner_autoRefresh"
|
||||
},
|
||||
"storageCleaner_selectAll": {
|
||||
"message": "全选所有项",
|
||||
"description": "Translation key: storageCleaner_selectAll"
|
||||
},
|
||||
"storageCleaner_noData": {
|
||||
"message": "无数据",
|
||||
"description": "Translation key: storageCleaner_noData"
|
||||
},
|
||||
"storageCleaner_errorNoTab": {
|
||||
"message": "无法获取当前标签页",
|
||||
"description": "Translation key: storageCleaner_errorNoTab"
|
||||
},
|
||||
"storageCleaner_errorRestricted": {
|
||||
"message": "存储清理功能不支持此页面",
|
||||
"description": "Translation key: storageCleaner_errorRestricted"
|
||||
},
|
||||
"storageCleaner_cleanSuccessReload": {
|
||||
"message": "清理成功，即将刷新页面",
|
||||
"description": "Translation key: storageCleaner_cleanSuccessReload"
|
||||
},
|
||||
"storageCleaner_errorStandardOnly": {
|
||||
"message": "存储清理功能仅适用于标准网页",
|
||||
"description": "Translation key: storageCleaner_errorStandardOnly"
|
||||
},
|
||||
"storageCleaner_confirmTitle": {
|
||||
"message": "确认清理数据？",
|
||||
"description": "Translation key: storageCleaner_confirmTitle"
|
||||
},
|
||||
"storageCleaner_confirmDesc": {
|
||||
"message": "您将永久删除当前页面的以下选定存储项。",
|
||||
"description": "Translation key: storageCleaner_confirmDesc"
|
||||
},
|
||||
"storageCleaner_irreversible": {
|
||||
"message": "此操作不可撤销",
|
||||
"description": "Translation key: storageCleaner_irreversible"
|
||||
},
|
||||
"storageCleaner_confirmAction": {
|
||||
"message": "确认清理",
|
||||
"description": "Translation key: storageCleaner_confirmAction"
|
||||
},
|
||||
"storageCleaner_cleanedSummary": {
|
||||
"message": "清理了 {{items}}",
|
||||
"description": "Translation key: storageCleaner_cleanedSummary"
|
||||
},
|
||||
"storageCleaner_noDataToClean": {
|
||||
"message": "该页面没有可清理的存储数据",
|
||||
"description": "Translation key: storageCleaner_noDataToClean"
|
||||
},
|
||||
"storageCleaner_partialFailure": {
|
||||
"message": "部分清理失败",
|
||||
"description": "Translation key: storageCleaner_partialFailure"
|
||||
},
|
||||
"storageCleaner_options_localStorage": {
|
||||
"message": "Local Storage",
|
||||
"description": "Translation key: storageCleaner_options_localStorage"
|
||||
},
|
||||
"storageCleaner_options_sessionStorage": {
|
||||
"message": "Session Storage",
|
||||
"description": "Translation key: storageCleaner_options_sessionStorage"
|
||||
},
|
||||
"storageCleaner_options_indexedDB": {
|
||||
"message": "IndexedDB",
|
||||
"description": "Translation key: storageCleaner_options_indexedDB"
|
||||
},
|
||||
"storageCleaner_options_cookies": {
|
||||
"message": "Cookies",
|
||||
"description": "Translation key: storageCleaner_options_cookies"
|
||||
},
|
||||
"storageCleaner_options_cacheStorage": {
|
||||
"message": "Cache Storage",
|
||||
"description": "Translation key: storageCleaner_options_cacheStorage"
|
||||
},
|
||||
"storageCleaner_options_serviceWorkers": {
|
||||
"message": "Service Workers",
|
||||
"description": "Translation key: storageCleaner_options_serviceWorkers"
|
||||
},
|
||||
"textStatistics_pageTitle": {
|
||||
"message": "文本统计",
|
||||
"description": "Translation key: textStatistics_pageTitle"
|
||||
},
|
||||
"textStatistics_placeholder": {
|
||||
"message": "在此输入或粘贴文本...",
|
||||
"description": "Translation key: textStatistics_placeholder"
|
||||
},
|
||||
"textStatistics_characters": {
|
||||
"message": "字符数",
|
||||
"description": "Translation key: textStatistics_characters"
|
||||
},
|
||||
"textStatistics_words": {
|
||||
"message": "单词数",
|
||||
"description": "Translation key: textStatistics_words"
|
||||
},
|
||||
"textStatistics_lines": {
|
||||
"message": "行数",
|
||||
"description": "Translation key: textStatistics_lines"
|
||||
},
|
||||
"textStatistics_bytes": {
|
||||
"message": "字节大小",
|
||||
"description": "Translation key: textStatistics_bytes"
|
||||
},
|
||||
"timestamp_pageTitle": {
|
||||
"message": "时间戳转换",
|
||||
"description": "Translation key: timestamp_pageTitle"
|
||||
},
|
||||
"timestamp_tsToDate": {
|
||||
"message": "时间戳 → 日期",
|
||||
"description": "Translation key: timestamp_tsToDate"
|
||||
},
|
||||
"timestamp_dateToTs": {
|
||||
"message": "日期 → 时间戳",
|
||||
"description": "Translation key: timestamp_dateToTs"
|
||||
},
|
||||
"timestamp_placeholderTs": {
|
||||
"message": "输入时间戳...",
|
||||
"description": "Translation key: timestamp_placeholderTs"
|
||||
},
|
||||
"timestamp_placeholderDate": {
|
||||
"message": "YYYY-MM-DD HH:mm:ss",
|
||||
"description": "Translation key: timestamp_placeholderDate"
|
||||
},
|
||||
"timestamp_unitMs": {
|
||||
"message": "毫秒 (ms)",
|
||||
"description": "Translation key: timestamp_unitMs"
|
||||
},
|
||||
"timestamp_currentTs": {
|
||||
"message": "当前时间戳",
|
||||
"description": "Translation key: timestamp_currentTs"
|
||||
},
|
||||
"timestamp_useNowTooltip": {
|
||||
"message": "填充到下方",
|
||||
"description": "Translation key: timestamp_useNowTooltip"
|
||||
},
|
||||
"timestamp_copyTsTooltip": {
|
||||
"message": "复制时间戳",
|
||||
"description": "Translation key: timestamp_copyTsTooltip"
|
||||
},
|
||||
"timestamp_usedSuccess": {
|
||||
"message": "已使用当前时间戳",
|
||||
"description": "Translation key: timestamp_usedSuccess"
|
||||
},
|
||||
"timestamp_resultLabel": {
|
||||
"message": "转换结果",
|
||||
"description": "Translation key: timestamp_resultLabel"
|
||||
},
|
||||
"timestamp_copyResultTooltip": {
|
||||
"message": "复制结果",
|
||||
"description": "Translation key: timestamp_copyResultTooltip"
|
||||
},
|
||||
"timestamp_relativeTime": {
|
||||
"message": "相对时间",
|
||||
"description": "Translation key: timestamp_relativeTime"
|
||||
},
|
||||
"timestamp_iso8601": {
|
||||
"message": "ISO 8601",
|
||||
"description": "Translation key: timestamp_iso8601"
|
||||
},
|
||||
"timestamp_utcTime": {
|
||||
"message": "UTC 时间",
|
||||
"description": "Translation key: timestamp_utcTime"
|
||||
},
|
||||
"timestamp_copyTooltip": {
|
||||
"message": "复制",
|
||||
"description": "Translation key: timestamp_copyTooltip"
|
||||
},
|
||||
"timestamp_resultEmpty": {
|
||||
"message": "请输入并点击转换",
|
||||
"description": "Translation key: timestamp_resultEmpty"
|
||||
},
|
||||
"common_buttons_cancel": {
|
||||
"message": "取消",
|
||||
"description": "Translation key: buttons_cancel"
|
||||
},
|
||||
"common_buttons_copy": {
|
||||
"message": "复制",
|
||||
"description": "Translation key: buttons_copy"
|
||||
},
|
||||
"common_buttons_themeMode_light": {
|
||||
"message": "切换到深色模式",
|
||||
"description": "Translation key: buttons_themeMode_light"
|
||||
},
|
||||
"common_buttons_themeMode_dark": {
|
||||
"message": "切换到系统模式",
|
||||
"description": "Translation key: buttons_themeMode_dark"
|
||||
},
|
||||
"common_buttons_themeMode_system": {
|
||||
"message": "切换到浅色模式",
|
||||
"description": "Translation key: buttons_themeMode_system"
|
||||
},
|
||||
"common_buttons_search": {
|
||||
"message": "搜索工具...",
|
||||
"description": "Translation key: buttons_search"
|
||||
},
|
||||
"common_buttons_back": {
|
||||
"message": "返回",
|
||||
"description": "Translation key: buttons_back"
|
||||
},
|
||||
"common_buttons_clearSearch": {
|
||||
"message": "清除搜索",
|
||||
"description": "Translation key: buttons_clearSearch"
|
||||
},
|
||||
"common_buttons_recentSearch": {
|
||||
"message": "最近搜索",
|
||||
"description": "Translation key: buttons_recentSearch"
|
||||
},
|
||||
"common_buttons_noResults": {
|
||||
"message": "未找到相关工具",
|
||||
"description": "Translation key: buttons_noResults"
|
||||
},
|
||||
"common_buttons_openInTab": {
|
||||
"message": "在标签页打开",
|
||||
"description": "Translation key: buttons_openInTab"
|
||||
},
|
||||
|
||||
"common_errorBoundary_title": {
|
||||
"message": "糟糕，出了点问题",
|
||||
"description": "Translation key: errorBoundary_title"
|
||||
},
|
||||
"common_errorBoundary_description": {
|
||||
"message": "应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。",
|
||||
"description": "Translation key: errorBoundary_description"
|
||||
},
|
||||
"common_errorBoundary_refresh": {
|
||||
"message": "刷新应用",
|
||||
"description": "Translation key: errorBoundary_refresh"
|
||||
},
|
||||
"common_errorBoundary_retry": {
|
||||
"message": "重新尝试",
|
||||
"description": "Translation key: errorBoundary_retry"
|
||||
},
|
||||
"common_pageErrorBoundary_title": {
|
||||
"message": "该功能运行异常",
|
||||
"description": "Translation key: pageErrorBoundary_title"
|
||||
},
|
||||
"common_pageErrorBoundary_description": {
|
||||
"message": "该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。",
|
||||
"description": "Translation key: pageErrorBoundary_description"
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
@@ -4,7 +4,7 @@ import { copyTextToClipboard } from '@/utils/clipboard';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { buttonVariants, type ButtonProps } from '@/components/ui/button';
|
||||
import { toast } from 'sonner';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
|
||||
interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onClick'> {
|
||||
text: string;
|
||||
@@ -19,7 +19,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
const { t } = useTranslation('common');
|
||||
const { t } = useI18n('common');
|
||||
const [copied, setCopied] = useState(false);
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
import { Download } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { formatFileSize } from '@/utils/base64Converter';
|
||||
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
|
||||
interface DecodeResultPaperProps {
|
||||
/** 标题文案，由调用方传入 i18n key 对应的值（如 decodedFileOutput / decodedImageOutput） */
|
||||
@@ -38,7 +38,7 @@ export default function DecodeResultPaper({
|
||||
onDownload,
|
||||
children,
|
||||
}: DecodeResultPaperProps) {
|
||||
const { t } = useLazyTranslation('base64Converter');
|
||||
const { t } = useI18n('base64Converter');
|
||||
|
||||
return (
|
||||
<div className="p-4 rounded-xl bg-primary/10 border border-primary/30">
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Component, ErrorInfo, ReactNode } from 'react';
|
||||
import { withTranslation, type WithTranslation } from 'react-i18next';
|
||||
import { AlertCircle, RefreshCw } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { getMessage } from '@/utils/chromeI18n';
|
||||
|
||||
interface Props extends WithTranslation {
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@ interface State {
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
class ErrorBoundaryBase extends Component<Props, State> {
|
||||
class ErrorBoundary extends Component<Props, State> {
|
||||
state: State = {
|
||||
hasError: false,
|
||||
error: null,
|
||||
@@ -37,7 +37,6 @@ class ErrorBoundaryBase extends Component<Props, State> {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { t } = this.props;
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center mt-16 mx-auto max-w-md">
|
||||
@@ -46,9 +45,11 @@ class ErrorBoundaryBase extends Component<Props, State> {
|
||||
<AlertCircle className="h-8 w-8" />
|
||||
</div>
|
||||
<h2 className="text-xl font-extrabold text-destructive mb-2">
|
||||
{t('errorBoundary.title')}
|
||||
{getMessage('errorBoundary_title')}
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground mb-6">{t('errorBoundary.description')}</p>
|
||||
<p className="text-sm text-muted-foreground mb-6">
|
||||
{getMessage('errorBoundary_description')}
|
||||
</p>
|
||||
{this.state.error && (
|
||||
<div className="mb-6 p-4 rounded-lg bg-zinc-950 dark:bg-zinc-900 text-left max-h-[200px] overflow-auto border border-border/40">
|
||||
<pre className="font-mono text-xs whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700">
|
||||
@@ -62,7 +63,7 @@ class ErrorBoundaryBase extends Component<Props, State> {
|
||||
className="rounded-lg font-bold shadow-sm"
|
||||
>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
{t('errorBoundary.refresh')}
|
||||
{getMessage('errorBoundary_refresh')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,5 +74,5 @@ class ErrorBoundaryBase extends Component<Props, State> {
|
||||
}
|
||||
}
|
||||
|
||||
export const ErrorBoundary = withTranslation('common')(ErrorBoundaryBase);
|
||||
export { ErrorBoundary };
|
||||
export default ErrorBoundary;
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useCallback, useEffect, useRef } from 'react';
|
||||
import { Image, X } from 'lucide-react';
|
||||
import { useSnackbar } from '@/components/GlobalSnackbar';
|
||||
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
|
||||
interface ImageUploaderProps {
|
||||
/** 选中的文件 */
|
||||
@@ -29,7 +29,7 @@ const ImageUploader = ({
|
||||
dragging,
|
||||
onDraggingChange,
|
||||
}: ImageUploaderProps) => {
|
||||
const { t } = useLazyTranslation('qrCode');
|
||||
const { t } = useI18n('qrCode');
|
||||
const { showMessage } = useSnackbar();
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Component, ErrorInfo, ReactNode } from 'react';
|
||||
import { withTranslation, type WithTranslation } from 'react-i18next';
|
||||
import { AlertCircle, RefreshCw } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { getMessage } from '@/utils/chromeI18n';
|
||||
|
||||
interface Props extends WithTranslation {
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
resetKey?: string | number;
|
||||
}
|
||||
@@ -13,7 +13,7 @@ interface State {
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
class PageErrorBoundaryBase extends Component<Props, State> {
|
||||
class PageErrorBoundary extends Component<Props, State> {
|
||||
state: State = {
|
||||
hasError: false,
|
||||
error: null,
|
||||
@@ -38,7 +38,6 @@ class PageErrorBoundaryBase extends Component<Props, State> {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { t } = this.props;
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center flex-1 p-6 min-h-[300px] animate-in fade-in zoom-in-95 duration-200">
|
||||
@@ -48,10 +47,10 @@ class PageErrorBoundaryBase extends Component<Props, State> {
|
||||
</div>
|
||||
|
||||
<h3 className="text-base font-semibold text-foreground mb-1.5">
|
||||
{t('pageErrorBoundary.title')}
|
||||
{getMessage('pageErrorBoundary_title')}
|
||||
</h3>
|
||||
<p className="text-xs text-muted-foreground mb-5">
|
||||
{t('pageErrorBoundary.description')}
|
||||
{getMessage('pageErrorBoundary_description')}
|
||||
</p>
|
||||
|
||||
{this.state.error && (
|
||||
@@ -69,7 +68,7 @@ class PageErrorBoundaryBase extends Component<Props, State> {
|
||||
className="font-medium shadow-sm"
|
||||
>
|
||||
<RefreshCw className="mr-1.5 h-3.5 w-3.5" />
|
||||
{t('errorBoundary.retry')}
|
||||
{getMessage('errorBoundary_retry')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -80,5 +79,5 @@ class PageErrorBoundaryBase extends Component<Props, State> {
|
||||
}
|
||||
}
|
||||
|
||||
export const PageErrorBoundary = withTranslation('common')(PageErrorBoundaryBase);
|
||||
export { PageErrorBoundary };
|
||||
export default PageErrorBoundary;
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Copy, Download } from 'lucide-react';
|
||||
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
@@ -21,7 +21,7 @@ const QrCodePreview = ({
|
||||
className,
|
||||
...props
|
||||
}: QrCodePreviewProps) => {
|
||||
const { t } = useLazyTranslation('qrCode');
|
||||
const { t } = useI18n('qrCode');
|
||||
|
||||
// 空状态下的虚线骨架屏
|
||||
if (!qrCodeDataUrl) {
|
||||
@@ -1,38 +1,35 @@
|
||||
import { FEATURES, getEntryPointType } from '@/config/features';
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import { Suspense, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import PageErrorBoundary from '@/components/PageErrorBoundary';
|
||||
import PageSkeleton from '@/components/PageSkeleton';
|
||||
import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
|
||||
import { AlertTriangle } from 'lucide-react'; // 用于标准的 404 异常展示
|
||||
import { cn } from '@/lib/utils';
|
||||
import { AlertTriangle } from 'lucide-react';
|
||||
|
||||
export default function RouterContainer() {
|
||||
const { currentPage, isLoaded } = useRouter();
|
||||
const { t } = useTranslation('common');
|
||||
const { t } = useI18n('common');
|
||||
|
||||
// 2. 稳定的动态动画类名映射
|
||||
const animationClass = useMemo(() => {
|
||||
return currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
|
||||
}, [currentPage]);
|
||||
|
||||
const entryPointType = getEntryPointType();
|
||||
|
||||
// 骨架屏加载状态守卫
|
||||
if (!isLoaded) {
|
||||
return <PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />;
|
||||
}
|
||||
|
||||
// 3. 严格的路由查找与类型安全的组件分发
|
||||
const currentFeature = FEATURES.find((f) => f.key === currentPage);
|
||||
const MatchedComponent = currentFeature?.components?.[entryPointType];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={currentPage} // 保持原有通过重新挂载触发动画的精简特性
|
||||
key={currentPage}
|
||||
className={cn(
|
||||
'flex-1 flex flex-col overflow-x-hidden overflow-y-auto',
|
||||
'scrollbar-gutter-stable motion-reduce:transition-none', // 当系统开启“减弱动态效果”时，自动优雅降级，防止眩晕
|
||||
'scrollbar-gutter-stable motion-reduce:transition-none',
|
||||
animationClass,
|
||||
)}
|
||||
>
|
||||
@@ -40,11 +37,6 @@ export default function RouterContainer() {
|
||||
fallback={<PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />}
|
||||
>
|
||||
<PageErrorBoundary resetKey={currentPage}>
|
||||
{/*
|
||||
4. 路由防御拦截：
|
||||
如果组件存在则正常流式渲染，如果由于版本更迭或非法路径导致找不到对应组件，
|
||||
渲染一个优雅且符合 shadcn 风格的中性 404 提示页，而不是死白屏。
|
||||
*/}
|
||||
{MatchedComponent ? (
|
||||
<MatchedComponent />
|
||||
) : (
|
||||
@@ -1,12 +1,11 @@
|
||||
import React from 'react';
|
||||
import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface SwitchOption<T extends string | number = string> {
|
||||
value: T;
|
||||
label: React.ReactNode;
|
||||
}
|
||||
|
||||
// 2. 移除内联 sx，继承标准 HTML 属性，并使用标准的类名注入机制
|
||||
export interface SwitchButtonGroupProps<T extends string | number = string> extends Omit<
|
||||
React.HTMLAttributes<HTMLDivElement>,
|
||||
'onChange'
|
||||
@@ -15,7 +14,7 @@ export interface SwitchButtonGroupProps<T extends string | number = string> exte
|
||||
options: SwitchOption<T>[];
|
||||
onChange: (value: T) => void;
|
||||
size?: 'small' | 'medium' | 'large';
|
||||
buttonClassName?: string; // 替换原有的 buttonSx
|
||||
buttonClassName?: string;
|
||||
}
|
||||
|
||||
export default function SwitchButtonGroup<T extends string | number = string>({
|
||||
@@ -27,7 +26,6 @@ export default function SwitchButtonGroup<T extends string | number = string>({
|
||||
buttonClassName,
|
||||
...props
|
||||
}: SwitchButtonGroupProps<T>) {
|
||||
// 3. 将尺寸和高度、内边距等整体对齐，保证按钮和背景容器成比例缩放
|
||||
const sizeClasses = {
|
||||
small: 'text-xs h-8 px-2 py-1 rounded-md',
|
||||
medium: 'text-sm h-9 px-3 py-1.5 rounded-md',
|
||||
@@ -51,7 +49,6 @@ export default function SwitchButtonGroup<T extends string | number = string>({
|
||||
type="button"
|
||||
onClick={() => onChange(option.value)}
|
||||
className={cn(
|
||||
// 4. 完美继承 shadcn 的 Tabs 交互和动效微调
|
||||
'flex-1 inline-flex items-center justify-center font-medium whitespace-nowrap transition-all',
|
||||
'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2',
|
||||
'disabled:pointer-events-none disabled:opacity-50',
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { toast } from 'sonner'; // 推荐使用 shadcn 的默认 Toast
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
@@ -114,17 +114,15 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
||||
const [internalValue, setInternalValue] = useState(defaultValue);
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
const { t } = useTranslation('common');
|
||||
const { t } = useI18n('common');
|
||||
const placeholder = placeholderProp ?? t('textInputArea.placeholder');
|
||||
|
||||
const isControlled = controlledValue !== undefined;
|
||||
const value = isControlled ? controlledValue : internalValue;
|
||||
const displayError = externalError ?? error;
|
||||
|
||||
// 双向合并 ref 指针
|
||||
useImperativeHandle(ref, () => internalRef.current as HTMLTextAreaElement);
|
||||
|
||||
// 1. 高性能的动态高度自适应计算
|
||||
const adjustHeight = useCallback(() => {
|
||||
const textArea = internalRef.current;
|
||||
if (!textArea) return;
|
||||
@@ -132,14 +130,13 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
||||
// 重置高度计算
|
||||
textArea.style.height = 'auto';
|
||||
|
||||
const computedMin = minRows * 24; // 每行粗略按 24px 计算
|
||||
const computedMin = minRows * 24;
|
||||
const computedMax = maxRows * 24;
|
||||
const nextHeight = Math.max(textArea.scrollHeight, computedMin);
|
||||
|
||||
textArea.style.height = `${Math.min(nextHeight, computedMax)}px`;
|
||||
}, [minRows, maxRows]);
|
||||
|
||||
// 当数值改变时自适应扩展
|
||||
React.useEffect(() => {
|
||||
adjustHeight();
|
||||
}, [value, adjustHeight]);
|
||||
@@ -1,33 +1,20 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import {
|
||||
ArrowLeft,
|
||||
ExternalLink,
|
||||
Globe,
|
||||
History,
|
||||
Monitor,
|
||||
Moon,
|
||||
Search,
|
||||
Settings,
|
||||
Sun,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import { ArrowLeft, ExternalLink, Monitor, Moon, Search, Sun, X } from 'lucide-react';
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import { useThemeMode } from '@/providers/ThemeModeProvider';
|
||||
import { FeatureConfig, FEATURES } from '@/config/features';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
import { openExtensionPage } from '@/utils/chromeTabs';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { normalizeLanguage, SUPPORTED_LANGUAGES } from '@/i18n';
|
||||
import { cn } from '@/lib/utils'; // 1. 引入 shadcn 核心工具函数
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
// 常量配置抽取（无需写在全局变量或 styles 对象里）
|
||||
const SEARCH_HISTORY_LIMIT = 10;
|
||||
const SEARCH_HISTORY_DISPLAY = 5;
|
||||
|
||||
export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void }) {
|
||||
export default function TopBar() {
|
||||
const { currentPage, goBack, navigateTo } = useRouter();
|
||||
const { mode, setMode } = useThemeMode();
|
||||
const { t, i18n } = useTranslation(['common', 'features']);
|
||||
const { t } = useI18n(['common', 'features']);
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [showResults, setShowResults] = useState(false);
|
||||
@@ -42,7 +29,6 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
|
||||
window.close();
|
||||
};
|
||||
|
||||
// 2. 健壮的 Click Outside 逻辑：点击空白处收起搜索框
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||
@@ -53,7 +39,19 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// 从 Chrome Storage 异步初始化历史记录
|
||||
// Cmd/Ctrl+K 快捷键聚焦搜索框
|
||||
useEffect(() => {
|
||||
const handleGlobalKeyDown = (e: KeyboardEvent) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
inputRef.current?.focus();
|
||||
setShowResults(true);
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', handleGlobalKeyDown);
|
||||
return () => document.removeEventListener('keydown', handleGlobalKeyDown);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
storageUtil
|
||||
.get('app/searchHistory', [])
|
||||
@@ -63,7 +61,6 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
|
||||
.catch((err) => console.error('加载搜索历史失败:', err));
|
||||
}, []);
|
||||
|
||||
// 3. 模糊搜索匹配（移除了无意义的 dashboard 干扰项）
|
||||
const searchResults = useMemo(() => {
|
||||
const query = searchQuery.trim().toLowerCase();
|
||||
if (!query) return [];
|
||||
@@ -78,13 +75,15 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
|
||||
|
||||
const displayedHistory = useMemo(() => {
|
||||
if (searchQuery.trim()) return [];
|
||||
return searchHistory.slice(0, SEARCH_HISTORY_DISPLAY);
|
||||
return searchHistory
|
||||
.slice(0, SEARCH_HISTORY_DISPLAY)
|
||||
.map((key) => ({ key, feature: FEATURES.find((f) => f.key === key) }))
|
||||
.filter((item) => item.feature && item.feature.key !== 'dashboard');
|
||||
}, [searchHistory, searchQuery]);
|
||||
|
||||
// 新增/持久化历史记录
|
||||
const saveToHistory = async (query: string) => {
|
||||
if (!query.trim()) return;
|
||||
const nextHistory = [query, ...searchHistory.filter((h) => h !== query)].slice(
|
||||
const saveToHistory = async (featureKey: string) => {
|
||||
if (!featureKey.trim()) return;
|
||||
const nextHistory = [featureKey, ...searchHistory.filter((h) => h !== featureKey)].slice(
|
||||
0,
|
||||
SEARCH_HISTORY_LIMIT,
|
||||
);
|
||||
@@ -94,19 +93,11 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
|
||||
|
||||
const handleSelectFeature = (feature: FeatureConfig) => {
|
||||
navigateTo(feature.key);
|
||||
saveToHistory(t(feature.labelKey));
|
||||
saveToHistory(feature.key);
|
||||
setSearchQuery('');
|
||||
setShowResults(false);
|
||||
};
|
||||
|
||||
const toggleLanguage = async () => {
|
||||
const currentLng = normalizeLanguage(i18n.language);
|
||||
const currentIndex = SUPPORTED_LANGUAGES.indexOf(currentLng);
|
||||
const nextLng = SUPPORTED_LANGUAGES[(currentIndex + 1) % SUPPORTED_LANGUAGES.length];
|
||||
await i18n.changeLanguage(nextLng);
|
||||
await storageUtil.set('app/language', nextLng);
|
||||
};
|
||||
|
||||
const cycleThemeMode = () => {
|
||||
const nextMap = { light: 'dark', dark: 'system', system: 'light' } as const;
|
||||
setMode(nextMap[mode]);
|
||||
@@ -114,7 +105,6 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
|
||||
|
||||
const ThemeIcon = mode === 'light' ? Sun : mode === 'dark' ? Moon : Monitor;
|
||||
|
||||
// 4. 健壮的键盘导航交互
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;
|
||||
|
||||
@@ -130,14 +120,9 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
|
||||
if (searchQuery.trim()) {
|
||||
handleSelectFeature(searchResults[selectedIndex]);
|
||||
} else {
|
||||
const selectedQuery = displayedHistory[selectedIndex];
|
||||
if (selectedQuery) {
|
||||
setSearchQuery(selectedQuery);
|
||||
setSelectedIndex(-1);
|
||||
const matched = FEATURES.find(
|
||||
(f) => f.key !== 'dashboard' && t(f.labelKey) === selectedQuery,
|
||||
);
|
||||
if (matched) handleSelectFeature(matched);
|
||||
const selected = displayedHistory[selectedIndex];
|
||||
if (selected?.feature) {
|
||||
handleSelectFeature(selected.feature);
|
||||
}
|
||||
}
|
||||
} else if (searchQuery.trim() && searchResults.length > 0) {
|
||||
@@ -159,7 +144,7 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
|
||||
<button
|
||||
type="button"
|
||||
onClick={goBack}
|
||||
aria-label={t('common:buttons.back')}
|
||||
aria-label={t('common_buttons_back')}
|
||||
className="flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
@@ -169,12 +154,12 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
|
||||
|
||||
{/* 中间：搜索容器 */}
|
||||
<div ref={containerRef} className="flex-1 mx-4 max-w-md relative">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
|
||||
<div className="relative group">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground/60 group-focus-within:text-muted-foreground transition-colors pointer-events-none" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
placeholder={t('common:buttons.search')}
|
||||
placeholder={t('common_buttons_search')}
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value);
|
||||
@@ -183,9 +168,14 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
|
||||
}}
|
||||
onFocus={() => setShowResults(true)}
|
||||
onKeyDown={handleKeyDown}
|
||||
aria-label={t('common:buttons.search')}
|
||||
className="w-full h-9 pl-9 pr-8 text-sm rounded-md border border-input bg-muted/50 transition-all placeholder:text-muted-foreground focus:bg-background focus:outline-none focus:ring-1 focus:ring-ring focus:border-input"
|
||||
aria-label={t('common_buttons_search')}
|
||||
className="w-full h-9 pl-9 pr-16 text-sm rounded-lg border border-border/60 bg-muted/40 transition-all placeholder:text-muted-foreground/50 focus:bg-background focus:outline-none focus:ring-1 focus:ring-ring focus:border-input"
|
||||
/>
|
||||
{!searchQuery && (
|
||||
<kbd className="absolute right-3 top-1/2 -translate-y-1/2 hidden sm:inline-flex h-5 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 pointer-events-none">
|
||||
⌘K
|
||||
</kbd>
|
||||
)}
|
||||
{searchQuery && (
|
||||
<button
|
||||
type="button"
|
||||
@@ -203,8 +193,8 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
|
||||
|
||||
{/* 动态联想结果卡片 */}
|
||||
{showResults && (searchQuery.trim() || displayedHistory.length > 0) && (
|
||||
<div className="absolute top-full left-0 right-0 mt-1 bg-popover text-popover-foreground rounded-md shadow-md border border-border max-h-80 overflow-y-auto z-50 animate-in fade-in slide-in-from-top-1 duration-150">
|
||||
<ul role="listbox" className="p-1">
|
||||
<div className="absolute top-full left-0 right-0 mt-1.5 bg-popover text-popover-foreground rounded-lg shadow-lg border border-border max-h-80 overflow-y-auto z-50 animate-in fade-in slide-in-from-top-2 duration-150">
|
||||
<ul role="listbox" className="p-1.5">
|
||||
{searchQuery.trim() ? (
|
||||
searchResults.length > 0 ? (
|
||||
searchResults.map((feature, index) => (
|
||||
@@ -214,20 +204,25 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
|
||||
aria-selected={selectedIndex === index}
|
||||
onClick={() => handleSelectFeature(feature)}
|
||||
className={cn(
|
||||
'flex items-center gap-3 px-2.5 py-2 rounded-sm cursor-pointer text-sm transition-colors',
|
||||
'flex items-center gap-3 px-3 py-2.5 rounded-md cursor-pointer text-sm transition-colors',
|
||||
selectedIndex === index
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'hover:bg-muted/60',
|
||||
)}
|
||||
>
|
||||
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-sm bg-muted text-muted-foreground">
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg',
|
||||
'bg-muted/80 text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{feature.icon && <feature.icon className="h-4 w-4" />}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-foreground truncate">
|
||||
{t(feature.labelKey)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
<p className="text-xs text-muted-foreground truncate mt-0.5">
|
||||
{t(feature.descriptionKey)}
|
||||
</p>
|
||||
</div>
|
||||
@@ -240,27 +235,38 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
<div className="px-2.5 py-1.5 text-xs font-semibold tracking-wider text-muted-foreground/80">
|
||||
<div className="px-3 py-1.5 text-[11px] font-semibold tracking-wider text-muted-foreground/60 uppercase">
|
||||
{t('common:buttons.recentSearch')}
|
||||
</div>
|
||||
{displayedHistory.map((item, index) => (
|
||||
<li
|
||||
key={item}
|
||||
key={item.key}
|
||||
role="option"
|
||||
aria-selected={selectedIndex === index}
|
||||
onClick={() => {
|
||||
setSearchQuery(item);
|
||||
setSelectedIndex(-1);
|
||||
}}
|
||||
onClick={() => item.feature && handleSelectFeature(item.feature)}
|
||||
className={cn(
|
||||
'flex items-center gap-3 px-2.5 py-2 rounded-sm cursor-pointer text-sm transition-colors',
|
||||
'flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer text-sm transition-colors',
|
||||
selectedIndex === index
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'hover:bg-muted/60',
|
||||
)}
|
||||
>
|
||||
<History className="h-4 w-4 text-muted-foreground shrink-0" />
|
||||
<span className="truncate">{item}</span>
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg',
|
||||
'bg-muted/80 text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{item.feature?.icon && <item.feature.icon className="h-4 w-4" />}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-foreground truncate">
|
||||
{item.feature && t(item.feature.labelKey)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground truncate mt-0.5">
|
||||
{item.feature && t(item.feature.descriptionKey)}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</>
|
||||
@@ -272,18 +278,12 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
|
||||
|
||||
{/* 右侧：操作区 */}
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<IconButton onClick={toggleLanguage} title={t('common:buttons.toggleLanguage')}>
|
||||
<Globe className="h-4 w-4" />
|
||||
</IconButton>
|
||||
<IconButton onClick={cycleThemeMode} title={t(`common:buttons.themeMode.${mode}`)}>
|
||||
<ThemeIcon className="h-4 w-4" />
|
||||
</IconButton>
|
||||
<IconButton onClick={handleOpenInTab} title={t('common:buttons.openInTab')}>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</IconButton>
|
||||
<IconButton onClick={onOpenOptions} title={t('common:buttons.settings')}>
|
||||
<Settings className="h-4 w-4" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
+4
-4
@@ -40,7 +40,7 @@ describe('DecodeResultPaper 组件', () => {
|
||||
|
||||
it('应渲染下载按钮', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
expect(screen.getByRole('button', { name: 'base64Converter:download' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: '下载' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应渲染 children 内容', () => {
|
||||
@@ -64,7 +64,7 @@ describe('DecodeResultPaper 组件', () => {
|
||||
|
||||
it('点击下载按钮时应调用 onDownload', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'base64Converter:download' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '下载' }));
|
||||
expect(defaultProps.onDownload).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
@@ -72,12 +72,12 @@ describe('DecodeResultPaper 组件', () => {
|
||||
describe('按钮状态', () => {
|
||||
it('文件名为空时下载按钮应禁用', () => {
|
||||
render(<DecodeResultPaper {...{ ...defaultProps, fileName: '' }} />);
|
||||
expect(screen.getByRole('button', { name: 'base64Converter:download' })).toBeDisabled();
|
||||
expect(screen.getByRole('button', { name: '下载' })).toBeDisabled();
|
||||
});
|
||||
|
||||
it('文件名不为空时下载按钮应启用', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
expect(screen.getByRole('button', { name: 'base64Converter:download' })).toBeEnabled();
|
||||
expect(screen.getByRole('button', { name: '下载' })).toBeEnabled();
|
||||
});
|
||||
});
|
||||
});
|
||||
+3
-18
@@ -7,25 +7,12 @@ const storageOnChangedMock = { addListener: vi.fn(), removeListener: vi.fn() };
|
||||
(globalThis as any).chrome = { storage: { onChanged: storageOnChangedMock } };
|
||||
(globalThis as any).browser = { storage: { onChanged: storageOnChangedMock } };
|
||||
|
||||
// 💡 1. 规范对齐：挂载标准的 react-i18next 统一桩函数，防止多进程前缀破产
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: vi.fn((ns: string | string[]) => {
|
||||
const nsArray = Array.isArray(ns) ? ns : [ns];
|
||||
return {
|
||||
t: (key: string) => `${nsArray.join(',')}:${key}`,
|
||||
i18n: { language: 'en' },
|
||||
ready: true,
|
||||
};
|
||||
}),
|
||||
}));
|
||||
|
||||
// 模拟 URL API
|
||||
const mockCreateObjectURL = vi.fn();
|
||||
const mockRevokeObjectURL = vi.fn();
|
||||
Object.defineProperty(window.URL, 'createObjectURL', { value: mockCreateObjectURL });
|
||||
Object.defineProperty(window.URL, 'revokeObjectURL', { value: mockRevokeObjectURL });
|
||||
|
||||
// 模拟 showMessage
|
||||
vi.mock('@/components/GlobalSnackbar', () => ({
|
||||
useSnackbar: () => ({
|
||||
showMessage: vi.fn(),
|
||||
@@ -61,9 +48,8 @@ describe('ImageUploader 组件', () => {
|
||||
describe('渲染测试', () => {
|
||||
it('当没有选中文件时应显示上传提示', () => {
|
||||
render(<ImageUploader {...defaultProps} />);
|
||||
// 💡 修复点 2：全面切换为高弹性正则，斩断双重命名空间死锁！
|
||||
expect(screen.getByText(/clickToUpload/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/supportFormats/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/点击.*拖拽/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/格式/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('当没有选中文件时应显示 ImageIcon', () => {
|
||||
@@ -77,8 +63,7 @@ describe('ImageUploader 组件', () => {
|
||||
<ImageUploader {...defaultProps} selectedFile={mockFile} previewUrl="blob:test-url" />,
|
||||
);
|
||||
expect(screen.getByText('test.png')).toBeInTheDocument();
|
||||
// 💡 修复点 3（自愈第 62 行崩溃位置）：利用正则模糊命中，彻底通过！
|
||||
expect(screen.getByText(/clickToChange/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/点击更换/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('当选中文件时应显示预览图片', () => {
|
||||
+7
-25
@@ -2,19 +2,6 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import QrCodePreview from '@/components/QrCodePreview';
|
||||
|
||||
// 💡 1. 规范对齐：在这个测试文件的头部同样挂载统一的 react-i18next 桩函数，
|
||||
// 与你整个工程的国际化解耦架构完美闭环。
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: vi.fn((ns: string | string[]) => {
|
||||
const nsArray = Array.isArray(ns) ? ns : [ns];
|
||||
return {
|
||||
t: (key: string) => `${nsArray.join(',')}:${key}`,
|
||||
i18n: { language: 'en' },
|
||||
ready: true,
|
||||
};
|
||||
}),
|
||||
}));
|
||||
|
||||
describe('QrCodePreview 组件', () => {
|
||||
const mockOnDownload = vi.fn();
|
||||
const mockOnCopy = vi.fn();
|
||||
@@ -31,8 +18,7 @@ describe('QrCodePreview 组件', () => {
|
||||
describe('渲染测试', () => {
|
||||
it('当 qrCodeDataUrl 为空时应显示占位文本', () => {
|
||||
render(<QrCodePreview qrCodeDataUrl="" onDownload={mockOnDownload} onCopy={mockOnCopy} />);
|
||||
// 💡 修复点 2：全面拥抱柔性正则匹配，直接终结多层 'qrCode:qrCode:' 前缀踩踏！
|
||||
expect(screen.getByText(/qrCodeWillShow/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/二维码将显示/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('当 qrCodeDataUrl 有值时应显示二维码图片', () => {
|
||||
@@ -57,8 +43,7 @@ describe('QrCodePreview 组件', () => {
|
||||
onCopy={mockOnCopy}
|
||||
/>,
|
||||
);
|
||||
// 💡 修复点 3：切换为正则，无缝过检
|
||||
expect(screen.getByText(/downloadButton/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/下载二维码/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('当 qrCodeDataUrl 有值时应显示复制按钮', () => {
|
||||
@@ -69,14 +54,13 @@ describe('QrCodePreview 组件', () => {
|
||||
onCopy={mockOnCopy}
|
||||
/>,
|
||||
);
|
||||
// 💡 修复点 4：切换为正则，无缝过检
|
||||
expect(screen.getByText(/copyQrButton/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/复制二维码/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('当 qrCodeDataUrl 为空时不应显示操作按钮', () => {
|
||||
render(<QrCodePreview qrCodeDataUrl="" onDownload={mockOnDownload} onCopy={mockOnCopy} />);
|
||||
expect(screen.queryByText(/downloadButton/)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/copyQrButton/)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/下载二维码/)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/复制二维码/)).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -89,8 +73,7 @@ describe('QrCodePreview 组件', () => {
|
||||
onCopy={mockOnCopy}
|
||||
/>,
|
||||
);
|
||||
// 💡 修复点 5：点击行为同步更改为正则匹配定位，保障状态修改流一帧直达
|
||||
fireEvent.click(screen.getByText(/downloadButton/));
|
||||
fireEvent.click(screen.getByText(/下载二维码/));
|
||||
expect(mockOnDownload).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
@@ -102,8 +85,7 @@ describe('QrCodePreview 组件', () => {
|
||||
onCopy={mockOnCopy}
|
||||
/>,
|
||||
);
|
||||
// 💡 修复点 6：彻底修复第 88 行报错位置，改用正则解开死锁！
|
||||
fireEvent.click(screen.getByText(/copyQrButton/));
|
||||
fireEvent.click(screen.getByText(/复制二维码/));
|
||||
expect(mockOnCopy).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
+16
-32
@@ -4,23 +4,10 @@ import { StorageCleanerConfirm } from '@/pages/StorageCleaner/StorageCleanerConf
|
||||
import type { StorageCleanerOptions } from '@/types/storage';
|
||||
import React from 'react';
|
||||
|
||||
// 💡 1. 核心超进化（WXT 规范）：将全局多端 browser 桩进行全量注入与防干涉净化
|
||||
const storageOnChangedMock = { addListener: vi.fn(), removeListener: vi.fn() };
|
||||
(globalThis as any).chrome = { storage: { onChanged: storageOnChangedMock } };
|
||||
(globalThis as any).browser = { storage: { onChanged: storageOnChangedMock } };
|
||||
|
||||
// 💡 2. 对齐 react-i18next 的分布式国际化桩
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: vi.fn((ns: string | string[]) => {
|
||||
const nsArray = Array.isArray(ns) ? ns : [ns];
|
||||
return {
|
||||
t: (key: string) => `${nsArray.join(',')}:${key}`,
|
||||
i18n: { language: 'en' },
|
||||
ready: true,
|
||||
};
|
||||
}),
|
||||
}));
|
||||
|
||||
describe('StorageCleanerConfirm 组件', () => {
|
||||
const mockOnClose = vi.fn();
|
||||
const mockOnConfirm = vi.fn();
|
||||
@@ -53,28 +40,25 @@ describe('StorageCleanerConfirm 组件', () => {
|
||||
describe('渲染测试', () => {
|
||||
it('open 为 true 时应渲染对话框', () => {
|
||||
renderComponent();
|
||||
// 💡 修复点 3：拥抱模糊正则断言。
|
||||
// 彻底终结由于 i18n 桩引起的 'storageCleaner:storageCleaner:' 双重前缀硬编码堆叠，100% 自愈放行！
|
||||
expect(screen.getByText(/confirmTitle/)).toBeInTheDocument();
|
||||
expect(screen.getByRole('heading', { name: /确认清理/ })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应显示警告信息', () => {
|
||||
renderComponent();
|
||||
expect(screen.getByText(/irreversible/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/不可撤销/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应将选中的选项显示为标签', () => {
|
||||
renderComponent();
|
||||
expect(screen.getByText(/options\.localStorage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/options\.sessionStorage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/options\.cookies/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Local Storage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Session Storage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Cookies/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应显示取消和确认按钮', () => {
|
||||
renderComponent();
|
||||
// 💡 修复点 4：按钮的 Accessible Name 匹配同步切回高弹性正则模式，抵抗一切国际化双前缀污染
|
||||
expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /confirmAction/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /取消/ })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /确认清理/ })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -82,7 +66,7 @@ describe('StorageCleanerConfirm 组件', () => {
|
||||
it('点击取消时应调用 onClose', () => {
|
||||
renderComponent();
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
|
||||
fireEvent.click(screen.getByRole('button', { name: /取消/ }));
|
||||
expect(mockOnClose).toHaveBeenCalledTimes(1);
|
||||
expect(mockOnConfirm).not.toHaveBeenCalled();
|
||||
});
|
||||
@@ -90,7 +74,7 @@ describe('StorageCleanerConfirm 组件', () => {
|
||||
it('点击确认时应调用 onConfirm', () => {
|
||||
renderComponent();
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /confirmAction/i }));
|
||||
fireEvent.click(screen.getByRole('button', { name: /确认清理/ }));
|
||||
expect(mockOnConfirm).toHaveBeenCalledTimes(1);
|
||||
expect(mockOnClose).not.toHaveBeenCalled();
|
||||
});
|
||||
@@ -109,10 +93,10 @@ describe('StorageCleanerConfirm 组件', () => {
|
||||
|
||||
renderComponent({ options: partialOptions });
|
||||
|
||||
expect(screen.getByText(/options\.localStorage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/options\.indexedDB/)).toBeInTheDocument();
|
||||
expect(screen.queryByText(/options\.sessionStorage/)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/options\.cookies/)).not.toBeInTheDocument();
|
||||
expect(screen.getByText(/Local Storage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/IndexedDB/)).toBeInTheDocument();
|
||||
expect(screen.queryByText(/Session Storage/)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/Cookies$/)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应处理空选项', () => {
|
||||
@@ -135,7 +119,7 @@ describe('StorageCleanerConfirm 组件', () => {
|
||||
describe('对话框行为测试', () => {
|
||||
it('open 为 false 时不应渲染', () => {
|
||||
renderComponent({ open: false });
|
||||
expect(screen.queryByText(/confirmTitle/)).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole('heading', { name: /确认清理/ })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应使用不同选项渲染', () => {
|
||||
@@ -150,8 +134,8 @@ describe('StorageCleanerConfirm 组件', () => {
|
||||
|
||||
renderComponent({ options: customOptions });
|
||||
|
||||
expect(screen.getByText(/options\.sessionStorage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/options\.cookies/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Session Storage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Cookies/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
-3
@@ -21,9 +21,7 @@ describe('SwitchButtonGroup 组件', () => {
|
||||
const buttonA = screen.getByRole('button', { name: /选项A/i });
|
||||
const buttonB = screen.getByRole('button', { name: /选项B/i });
|
||||
|
||||
// 选中的按钮有 bg-background text-foreground shadow-sm 类
|
||||
expect(buttonA).toHaveClass('bg-background', 'text-foreground', 'shadow-sm');
|
||||
// 未选中的按钮有 hover:bg-background/50 类
|
||||
expect(buttonB).toHaveClass('hover:bg-background/50');
|
||||
});
|
||||
|
||||
@@ -41,7 +39,6 @@ describe('SwitchButtonGroup 组件', () => {
|
||||
render(<SwitchButtonGroup value="a" options={options} onChange={handleChange} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /选项A/i }));
|
||||
// 新组件每次点击都会触发 onChange
|
||||
expect(handleChange).toHaveBeenCalledWith('a');
|
||||
});
|
||||
|
||||
-1
@@ -353,7 +353,6 @@ describe('TextInputArea 组件', () => {
|
||||
|
||||
it('readOnly 时输入框应只读', () => {
|
||||
render(<TextInputArea value="内容" onChange={() => {}} readOnly />);
|
||||
// MUI TextField 的 readOnly 通过 inputProps 设置，textarea 不会被禁用
|
||||
expect(screen.getByRole('textbox')).not.toBeDisabled();
|
||||
});
|
||||
});
|
||||
@@ -6,7 +6,6 @@ import TopBar from '@/components/TopBar';
|
||||
import { RouterProvider } from '@/providers/RouterProvider';
|
||||
import { ThemeModeProvider } from '@/providers/ThemeModeProvider';
|
||||
|
||||
// matchMedia must be mocked before ThemeModeProvider is imported
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: vi.fn().mockImplementation((query: string) => ({
|
||||
@@ -54,36 +53,23 @@ describe('TopBar 组件', () => {
|
||||
describe('渲染测试', () => {
|
||||
it('不在 dashboard 时应渲染返回按钮', () => {
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
|
||||
expect(screen.getByLabelText('common:buttons.back')).toBeInTheDocument();
|
||||
renderWithProvider(<TopBar />);
|
||||
expect(screen.getByLabelText('返回')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('在 dashboard 上不应渲染返回按钮', () => {
|
||||
mockRouterValue.currentPage = 'dashboard';
|
||||
renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
|
||||
expect(screen.queryByLabelText('common:buttons.back')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应渲染设置按钮', () => {
|
||||
renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
|
||||
expect(screen.getByLabelText('common:buttons.settings')).toBeInTheDocument();
|
||||
renderWithProvider(<TopBar />);
|
||||
expect(screen.queryByLabelText('返回')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('交互测试', () => {
|
||||
it('点击设置按钮时应调用 onOpenOptions', () => {
|
||||
const handleOpenOptions = vi.fn();
|
||||
renderWithProvider(<TopBar onOpenOptions={handleOpenOptions} />);
|
||||
|
||||
fireEvent.click(screen.getByLabelText('common:buttons.settings'));
|
||||
expect(handleOpenOptions).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('点击返回按钮时应调用 goBack', () => {
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
|
||||
renderWithProvider(<TopBar />);
|
||||
|
||||
fireEvent.click(screen.getByLabelText('common:buttons.back'));
|
||||
fireEvent.click(screen.getByLabelText('返回'));
|
||||
expect(mockRouterValue.goBack).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
@@ -9,8 +9,8 @@ import {
|
||||
|
||||
describe('features', () => {
|
||||
describe('FEATURES', () => {
|
||||
it('should have 11 features defined', () => {
|
||||
expect(FEATURES).toHaveLength(11);
|
||||
it('should have 9 features defined', () => {
|
||||
expect(FEATURES).toHaveLength(9);
|
||||
});
|
||||
|
||||
it('should have all required properties for each feature', () => {
|
||||
@@ -50,14 +50,14 @@ describe('features', () => {
|
||||
const feature = getFeatureByKey('dashboard');
|
||||
expect(feature).toBeDefined();
|
||||
expect(feature?.key).toBe('dashboard');
|
||||
expect(feature?.labelKey).toBe('features:dashboard.title');
|
||||
expect(feature?.labelKey).toBe('dashboard_title');
|
||||
});
|
||||
|
||||
it('should return timestamp feature', () => {
|
||||
const feature = getFeatureByKey('timestamp');
|
||||
expect(feature).toBeDefined();
|
||||
expect(feature?.key).toBe('timestamp');
|
||||
expect(feature?.labelKey).toBe('features:timestamp.title');
|
||||
expect(feature?.labelKey).toBe('timestamp_title');
|
||||
expect(feature?.themeColorKey).toBeDefined();
|
||||
});
|
||||
|
||||
@@ -65,7 +65,7 @@ describe('features', () => {
|
||||
const feature = getFeatureByKey('storageCleaner');
|
||||
expect(feature).toBeDefined();
|
||||
expect(feature?.key).toBe('storageCleaner');
|
||||
expect(feature?.labelKey).toBe('features:storageCleaner.title');
|
||||
expect(feature?.labelKey).toBe('storageCleaner_title');
|
||||
});
|
||||
|
||||
it('should return undefined for invalid key', () => {
|
||||
@@ -95,7 +95,7 @@ describe('features', () => {
|
||||
describe('getAllFeatureKeys', () => {
|
||||
it('should return all feature keys', () => {
|
||||
const allKeys = getAllFeatureKeys();
|
||||
expect(allKeys).toHaveLength(11);
|
||||
expect(allKeys).toHaveLength(9);
|
||||
expect(allKeys).toContain('dashboard');
|
||||
expect(allKeys).toContain('timestamp');
|
||||
expect(allKeys).toContain('storageCleaner');
|
||||
@@ -104,8 +104,6 @@ describe('features', () => {
|
||||
expect(allKeys).toContain('jwt');
|
||||
expect(allKeys).toContain('jsonDiff');
|
||||
expect(allKeys).toContain('base64Converter');
|
||||
expect(allKeys).toContain('markdownToHtml');
|
||||
expect(allKeys).toContain('htmlToMarkdown');
|
||||
expect(allKeys).toContain('rightClickRestorer');
|
||||
});
|
||||
});
|
||||
@@ -123,9 +121,9 @@ describe('features', () => {
|
||||
expect(pageOrder).toContain('qrCode');
|
||||
});
|
||||
|
||||
it('should have 10 items in page order', () => {
|
||||
it('should have 8 items in page order', () => {
|
||||
const pageOrder = getDefaultPageOrder();
|
||||
expect(pageOrder).toHaveLength(10);
|
||||
expect(pageOrder).toHaveLength(8);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -9,8 +9,6 @@ import {
|
||||
Key,
|
||||
GitCompareArrows,
|
||||
ArrowLeftRight,
|
||||
Code,
|
||||
File,
|
||||
MousePointerClick,
|
||||
} from 'lucide-react';
|
||||
|
||||
@@ -25,8 +23,6 @@ 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 MarkdownToHtmlPage = lazy(() => import('@/pages/MarkdownToHtml'));
|
||||
const HtmlToMarkdownPage = lazy(() => import('@/pages/HtmlToMarkdown'));
|
||||
const RightClickRestorerPage = lazy(() => import('@/pages/RightClickRestorer'));
|
||||
|
||||
export interface FeatureConfig {
|
||||
@@ -46,7 +42,7 @@ export interface FeatureConfig {
|
||||
export const FEATURES: FeatureConfig[] = [
|
||||
{
|
||||
key: 'dashboard',
|
||||
labelKey: 'features:dashboard.title',
|
||||
labelKey: 'dashboard_title',
|
||||
descriptionKey: '',
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
@@ -57,8 +53,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'timestamp',
|
||||
labelKey: 'features:timestamp.title',
|
||||
descriptionKey: 'features:timestamp.description',
|
||||
labelKey: 'timestamp_title',
|
||||
descriptionKey: 'timestamp_description',
|
||||
themeColorKey: 'primary',
|
||||
icon: Clock,
|
||||
defaultVisible: true,
|
||||
@@ -70,8 +66,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'storageCleaner',
|
||||
labelKey: 'features:storageCleaner.title',
|
||||
descriptionKey: 'features:storageCleaner.description',
|
||||
labelKey: 'storageCleaner_title',
|
||||
descriptionKey: 'storageCleaner_description',
|
||||
themeColorKey: 'warning',
|
||||
icon: Database,
|
||||
defaultVisible: true,
|
||||
@@ -83,8 +79,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'qrCode',
|
||||
labelKey: 'features:qrCode.title',
|
||||
descriptionKey: 'features:qrCode.description',
|
||||
labelKey: 'qrCode_title',
|
||||
descriptionKey: 'qrCode_description',
|
||||
themeColorKey: 'success',
|
||||
icon: QrCode,
|
||||
defaultVisible: true,
|
||||
@@ -96,8 +92,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'textStatistics',
|
||||
labelKey: 'features:textStatistics.title',
|
||||
descriptionKey: 'features:textStatistics.description',
|
||||
labelKey: 'textStatistics_title',
|
||||
descriptionKey: 'textStatistics_description',
|
||||
themeColorKey: 'secondary',
|
||||
icon: FileText,
|
||||
defaultVisible: true,
|
||||
@@ -109,8 +105,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'jwt',
|
||||
labelKey: 'features:jwt.title',
|
||||
descriptionKey: 'features:jwt.description',
|
||||
labelKey: 'jwt_title',
|
||||
descriptionKey: 'jwt_description',
|
||||
themeColorKey: 'info',
|
||||
icon: Key,
|
||||
defaultVisible: true,
|
||||
@@ -122,8 +118,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'jsonDiff',
|
||||
labelKey: 'features:jsonDiff.title',
|
||||
descriptionKey: 'features:jsonDiff.description',
|
||||
labelKey: 'jsonDiff_title',
|
||||
descriptionKey: 'jsonDiff_description',
|
||||
themeColorKey: 'primary',
|
||||
icon: GitCompareArrows,
|
||||
defaultVisible: true,
|
||||
@@ -135,8 +131,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'base64Converter',
|
||||
labelKey: 'features:base64Converter.title',
|
||||
descriptionKey: 'features:base64Converter.description',
|
||||
labelKey: 'base64Converter_title',
|
||||
descriptionKey: 'base64Converter_description',
|
||||
themeColorKey: 'info',
|
||||
icon: ArrowLeftRight,
|
||||
defaultVisible: true,
|
||||
@@ -146,36 +142,10 @@ export const FEATURES: FeatureConfig[] = [
|
||||
tab: Base64ConverterPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'markdownToHtml',
|
||||
labelKey: 'features:markdownToHtml.title',
|
||||
descriptionKey: 'features:markdownToHtml.description',
|
||||
themeColorKey: 'secondary',
|
||||
icon: Code,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: MarkdownToHtmlPage,
|
||||
sidepanel: MarkdownToHtmlPage,
|
||||
tab: MarkdownToHtmlPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'htmlToMarkdown',
|
||||
labelKey: 'features:htmlToMarkdown.title',
|
||||
descriptionKey: 'features:htmlToMarkdown.description',
|
||||
themeColorKey: 'secondary',
|
||||
icon: File,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: HtmlToMarkdownPage,
|
||||
sidepanel: HtmlToMarkdownPage,
|
||||
tab: HtmlToMarkdownPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'rightClickRestorer',
|
||||
labelKey: 'features:rightClickRestorer.title',
|
||||
descriptionKey: 'features:rightClickRestorer.description',
|
||||
labelKey: 'rightClickRestorer_title',
|
||||
descriptionKey: 'rightClickRestorer_description',
|
||||
themeColorKey: 'success',
|
||||
icon: MousePointerClick,
|
||||
defaultVisible: true,
|
||||
@@ -1,4 +1,4 @@
|
||||
import '../.wxt/types/imports.d.ts';
|
||||
import '../../.wxt/types/imports.d.ts';
|
||||
import { browser } from 'wxt/browser';
|
||||
import { MessageAction, onMessage, sendMessage } from '@/utils/messages';
|
||||
import { createAllContextMenus, parseContextMenuClick } from '@/utils/contextMenu';
|
||||
@@ -79,7 +79,6 @@ export default defineBackground(() => {
|
||||
|
||||
const PROTECTED = ['contextmenu', 'copy', 'paste', 'cut', 'selectstart'];
|
||||
|
||||
/* 1. 屏蔽 MouseEvent.prototype.preventDefault（含 mousedown 右键） */
|
||||
const _origPreventDefault = MouseEvent.prototype.preventDefault;
|
||||
Object.defineProperty(MouseEvent.prototype, 'preventDefault', {
|
||||
value: function (this: MouseEvent) {
|
||||
@@ -93,7 +92,6 @@ export default defineBackground(() => {
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
/* 2. 屏蔽 Event.prototype.stopPropagation / stopImmediatePropagation */
|
||||
const _origStopPropagation = Event.prototype.stopPropagation;
|
||||
Object.defineProperty(Event.prototype, 'stopPropagation', {
|
||||
value: function (this: Event) {
|
||||
@@ -114,7 +112,6 @@ export default defineBackground(() => {
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
/* 3. 拦截 document.oncontextmenu（处理 return false 方式） */
|
||||
let _docOnContextMenu: unknown = null;
|
||||
Object.defineProperty(document, 'oncontextmenu', {
|
||||
get() {
|
||||
@@ -147,7 +144,6 @@ export default defineBackground(() => {
|
||||
}
|
||||
});
|
||||
|
||||
// 4. 异步刷新请求监听（统一使用 alarms API，避免 MV3 Service Worker 被销毁导致任务丢失）
|
||||
onMessage(MessageAction.RELOAD_TAB, async (message) => {
|
||||
const { tabId, delay = 0 } = message.data;
|
||||
|
||||
@@ -164,10 +160,8 @@ export default defineBackground(() => {
|
||||
|
||||
const alarmName = `reload-tab-${tabId}-${Date.now()}`;
|
||||
|
||||
// 创建一次性 Alarm，由浏览器内核保障触发（不受 Service Worker 生命周期影响）
|
||||
await browser.alarms.create(alarmName, { when: Date.now() + delay });
|
||||
|
||||
// 兜底清理：若 alarm 因异常未触发，delay 后 5 秒强制移除监听器并清理 alarm
|
||||
const cleanupTimeout = setTimeout(() => {
|
||||
browser.alarms.onAlarm.removeListener(alarmListener);
|
||||
browser.alarms.clear(alarmName).catch(() => {});
|
||||
@@ -1,4 +1,4 @@
|
||||
import '../.wxt/types/imports.d.ts';
|
||||
import '../../.wxt/types/imports.d.ts';
|
||||
import { initMessageHandler } from './content/messageHandler';
|
||||
|
||||
export default defineContentScript({
|
||||
@@ -22,7 +22,7 @@ function injectStyles(): void {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
opacity: 0;
|
||||
visibility: hidden; /* 💡 1. 规整隐藏状态：允许排版引擎计算尺寸，同时阻断视觉呈现 */
|
||||
visibility: hidden;
|
||||
transform: translateY(-8px);
|
||||
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
|
||||
pointer-events: none;
|
||||
@@ -125,7 +125,6 @@ function getOrCreatePopover(): HTMLElement {
|
||||
return popover;
|
||||
}
|
||||
|
||||
// 💡 2. 安全防线：字符实体转义沙箱，彻底掐灭任意恶意脚本的执行通道
|
||||
function escapeHtml(text: string): string {
|
||||
const map: Record<string, string> = {
|
||||
'&': '&',
|
||||
@@ -171,7 +170,6 @@ export function showPopover(
|
||||
): void {
|
||||
const popover = getOrCreatePopover();
|
||||
|
||||
// 💡 3. 坚固的无障碍绑定：废除违规的行内 inline onclick，改用标准原生节点监听
|
||||
popover.innerHTML = '';
|
||||
|
||||
if (title) {
|
||||
@@ -7,10 +7,6 @@ import { getEntryPointType } from '@/config/features';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
export default function App() {
|
||||
const handleOpenOptions = () => {
|
||||
chrome.runtime.openOptionsPage().catch(console.error);
|
||||
};
|
||||
|
||||
const entryType = useMemo(() => getEntryPointType(), []);
|
||||
|
||||
const routerConfig = useMemo(() => {
|
||||
@@ -36,7 +32,7 @@ export default function App() {
|
||||
>
|
||||
<SnackbarProvider initialOptions={{ autoHideDuration: 1500 }}>
|
||||
<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 onOpenOptions={handleOpenOptions} />
|
||||
<TopBar />
|
||||
<ErrorBoundary>
|
||||
<RouterContainer />
|
||||
</ErrorBoundary>
|
||||
@@ -1,7 +1,6 @@
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import AppRoot from '@/providers/AppRoot';
|
||||
import '@/i18n';
|
||||
import '@/src/index.css';
|
||||
import '@/index.css';
|
||||
import App from './App.tsx';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
@@ -7,12 +7,6 @@ import { SnackbarProvider } from '@/components/GlobalSnackbar';
|
||||
import { MessageAction, sendMessage } from '@/utils/messages';
|
||||
|
||||
export default function App() {
|
||||
const handleOpenOptions = () => {
|
||||
chrome.runtime.openOptionsPage().catch((err) => {
|
||||
console.error('Failed to open options page:', err);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
sendMessage(MessageAction.SIDE_PANEL_STATE_CHANGED, { isOpen: true });
|
||||
return () => {
|
||||
@@ -24,7 +18,7 @@ export default function App() {
|
||||
<RouterProvider defaultRoute="dashboard" syncKey="app/sidepanelRoute">
|
||||
<SnackbarProvider initialOptions={{ autoHideDuration: 1500 }}>
|
||||
<div className="app flex flex-col h-screen w-full overflow-hidden">
|
||||
<TopBar onOpenOptions={handleOpenOptions} />
|
||||
<TopBar />
|
||||
<ErrorBoundary>
|
||||
<RouterContainer />
|
||||
</ErrorBoundary>
|
||||
@@ -1,7 +1,6 @@
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import AppRoot from '@/providers/AppRoot';
|
||||
import '@/i18n';
|
||||
import '@/src/index.css';
|
||||
import '@/index.css';
|
||||
import App from './App.tsx';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
import { Image as ImageIcon, Trash2, Upload } from 'lucide-react';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import DecodeResultPaper from '@/components/DecodeResultPaper';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -19,7 +19,7 @@ interface Base64ConverterSectionProps {
|
||||
}
|
||||
|
||||
export default function Base64ConverterSection({ mode }: Base64ConverterSectionProps) {
|
||||
const { t } = useLazyTranslation('base64Converter');
|
||||
const { t } = useI18n('base64Converter');
|
||||
|
||||
const [direction, setDirection] = useStorageState(
|
||||
`base64Converter/${mode}Mode/direction`,
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import { base64ToText, textToBase64 } from '@/utils/base64Converter';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
@@ -20,14 +20,12 @@ interface TextModeProps {
|
||||
}
|
||||
|
||||
export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
|
||||
const { t } = useLazyTranslation('base64Converter');
|
||||
const { t } = useI18n('base64Converter');
|
||||
|
||||
// 1. 纯净的核心源状态机：只保留输入源和转换方向
|
||||
const [input, setInput] = useState('');
|
||||
const [debouncedInput, setDebouncedInput] = useState('');
|
||||
const [direction, setDirection] = useState<'encode' | 'decode'>('encode');
|
||||
|
||||
// 2. 文本高频敲击防抖大闸：斩断频繁进行文本转 Base64 带来的 CPU 计算过热
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
setDebouncedInput(input);
|
||||
@@ -35,7 +33,6 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
|
||||
return () => clearTimeout(handle);
|
||||
}, [input]);
|
||||
|
||||
// 3. 右键联动数据上下文：优雅原地合并受控状态
|
||||
const handleContextMenuData = useCallback((payload: string) => {
|
||||
setInput(payload);
|
||||
setDebouncedInput(payload);
|
||||
@@ -44,8 +41,6 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
|
||||
|
||||
useContextMenuData({ featureKey: 'base64Converter', onData: handleContextMenuData });
|
||||
|
||||
// 💡 4. 贯彻方案 A（彻底消灭 setOutput / setError）：
|
||||
// 让所有的转化逻辑、类型安全校验在 useMemo 内存管道中单次渲染一气呵成！
|
||||
const conversionPipeline = useMemo(() => {
|
||||
const trimmed = debouncedInput.trim();
|
||||
if (!trimmed) return { output: '', error: null };
|
||||
@@ -112,7 +107,7 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
|
||||
placeholder={placeholder}
|
||||
value={input}
|
||||
onChange={setInput}
|
||||
externalError={error || undefined} // 💡 流式异常大闸动态注入
|
||||
externalError={error || undefined}
|
||||
showClear={true}
|
||||
allowCopy={true}
|
||||
minRows={5}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user