实用在线工具集 — 全部在浏览器中运行，数据不上传服务器（除视频下载和文档互转外）。
- 前端框架: React 18 + TypeScript
- 构建工具: Vite 6
- 样式方案: Tailwind CSS 3
- 路由: React Router v7
- 状态管理: React Hooks（无额外依赖）
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
# 预览构建产物
npm run preview需要视频下载功能时，需同时启动后端服务：
# 同时启动前端和后端
npm run dev:all
# 仅启动后端
npm run dev:server路径: /qr
支持生成多种类型的二维码，并提供丰富的样式自定义选项。
支持的数据类型:
- URL 链接 — 网址、链接地址
- 纯文本 — 任意文字内容
- vCard 联系人 — 包含姓名、电话、邮箱、地址等信息，扫码即可添加联系人
- WiFi 凭证 — 包含 SSID、密码、加密方式，扫码即可连接 WiFi
两种生成模式:
- 单个生成 — 输入内容，实时预览，调整样式后下载
- 批量生成 — 通过 CSV 文件导入多行数据，一次性批量生成并打包下载为 ZIP
样式自定义:
- 点阵样式：方形 / 圆角 / 圆点
- 点阵颜色：前景色、背景色
- 容错等级：L / M / Q / H
- 图片 Logo：中心嵌入自定义 Logo
- 尺寸：支持多种输出尺寸
使用方法:
- 选择数据类型（URL / 文本 / 联系人 / WiFi）
- 输入对应的内容
- 在「外观样式」面板中调整点阵样式、颜色、Logo 等
- 右侧实时预览二维码效果
- 点击「下载 PNG」或「下载 SVG」保存
批量生成:
- 切换到「批量生成」标签页
- 下载 CSV 模板并填写数据
- 上传填好的 CSV 文件
- 点击「批量生成」按钮
- 下载打包好的 ZIP 文件
路径: /compress
纯浏览器端图片压缩工具，支持批量处理，图片不会上传到任何服务器。
支持格式:
- 输入：JPEG / PNG / WebP / BMP / GIF（静态）
- 输出：JPEG / WebP
功能特性:
- 拖拽上传 — 支持拖拽文件或点击选择，支持一次添加多张图片
- 批量处理 — 4 张图片并发压缩，显示每张的压缩进度
- 质量调节 — 滑块控制压缩质量（1-100），实时显示预估文件大小
- 格式转换 — 可选择输出为 JPEG 或 WebP
- 最大宽度 — 可设置最大宽度限制，超出自动等比缩放
- 对比查看 — 点击缩略图可打开左右/上下对比滑块，直观查看压缩前后效果
- 统计信息 — 实时显示总原始大小、总压缩大小、压缩率
- 批量下载 — 所有压缩完成的图片打包为 ZIP 下载
使用方法:
- 拖拽或点击上传图片（支持一次多张）
- 调整压缩质量滑块（推荐 60-85）
- 选择输出格式（JPEG 或 WebP）
- 如需限制尺寸，设置最大宽度
- 点击「开始压缩」按钮
- 压缩完成后可单张下载或打包下载全部
路径: /logo
基于模板组合引擎的 Logo 在线生成工具，可选择接入 AI 增强生成。
三步生成流程:
第一步 — 品牌信息:
- 输入品牌名称（必填）
- 输入品牌口号（选填）
- 选择所属行业（15 个行业类别）
- 选择视觉风格（现代 / 经典 / 活泼 / 优雅 / 极简 / 粗犷 / 几何 / 手写 / 奢华 / 温暖）
- 选择 Logo 类型（文字标 / 字母标 / 图标标 / 组合标 / 徽章标）
- 选择主色调（信任 / 活力 / 自然 / 创意 / 奢华 / 趣味 / 极简 / 温暖 / 大胆 / 优雅）
第二步 — 生成与编辑:
- 点击「生成 Logo」后，系统根据品牌名 Hash + 风格偏好组合出 9 个候选方案
- 3x3 网格展示所有方案，点击选择
- 右侧编辑面板支持：
- 切换字体（20+ Google Fonts）
- 切换配色方案
- 调整图标大小
- 调整字间距
- 调整文字大小
- 调整口号大小
- 大图实时预览编辑效果
- 点击「重新生成」刷新候选方案
- AI 增强生成（可选）：展开 AI 面板，输入 OpenAI API Key，可上传参考图片，调用 DALL-E 3 生成 AI Logo
第三步 — 导出:
- SVG 导出 — 矢量格式，字体内嵌，可无限缩放
- PNG 导出 — 支持 6 种尺寸（64 / 128 / 256 / 512 / 1024 / 2048 像素）
- ZIP 打包导出 — SVG + 全部尺寸 PNG 打包下载
技术实现:
- 内置 20+ Google Fonts（含中文字体 Noto Sans/Serif SC）
- 60+ SVG 图标按行业分类
- 24 套配色方案按色调分类
- 6 种布局模板
- 种子随机数确保同一品牌名生成结果一致
路径: /pdf
纯浏览器端 PDF 处理工具，所有操作在本地完成，不上传文件。
两种模式:
合并 PDF:
- 上传多个 PDF 文件
- 拖拽调整文件顺序
- 一键合并为单个 PDF 下载
拆分 & 编辑:
- 上传一个 PDF 文件
- 缩略图预览所有页面
- 支持：
- 删除指定页面
- 拖拽重排页面顺序
- 按页码范围提取页面
- 添加书签目录
使用方法:
合并模式：
- 选择「合并 PDF」标签
- 拖拽或点击上传多个 PDF 文件
- 拖拽调整合并顺序
- 点击「合并并下载」
编辑模式：
- 选择「拆分 & 编辑」标签
- 上传一个 PDF 文件
- 在缩略图上进行删除、拖拽排序等操作
- 设置提取页码范围（如
1-3, 5, 7-10） - 点击「导出」下载处理后的 PDF
路径: /converter
在线 JSON 与 XML 互转工具，支持格式化、压缩和实时校验。
功能特性:
- 自动检测 — 粘贴内容后自动识别 JSON 或 XML 格式
- 实时校验 — 输入时即时检查语法错误并提示
- 美化格式化 — 将压缩的 JSON/XML 格式化为带缩进的可读形式
- 压缩 — 去除多余空白，最小化体积
- JSON → XML — 将 JSON 数据转换为 XML 格式
- XML → JSON — 将 XML 数据转换为 JSON 格式
- 一键复制 — 复制输出结果到剪贴板
- 示例数据 — 内置示例 JSON 数据，方便测试
使用方法:
- 在左侧输入区粘贴 JSON 或 XML 内容
- 工具栏按钮变为可用状态（根据输入格式）
- 点击对应操作按钮：
- 「美化」— 格式化当前内容
- 「压缩」— 压缩当前内容
- 「JSON → XML」— 转换格式
- 「XML → JSON」— 转换格式
- 右侧输出区显示结果，点击「复制」保存
路径: /markdown
Markdown 编辑器，实时预览样式化 HTML，支持多种主题。
功能特性:
- 实时预览 — 左侧编辑 Markdown，右侧即时渲染 HTML 效果
- 5 种主题 — GitHub / Medium / Newsprint / Slate / Elegant
- 代码高亮 — 自动识别编程语言并高亮显示
- 目录生成 — 自动提取标题生成可折叠的目录（TOC）
- 一键复制 — 复制渲染后的 HTML 代码
- 导出 HTML — 下载完整独立的 HTML 文件（含样式），可直接在浏览器打开
- 字数统计 — 显示字符数和标题数
使用方法:
- 在左侧编辑区输入 Markdown 内容
- 工具栏选择喜欢的主题
- 右侧实时查看渲染效果
- 点击「目录」按钮查看/跳转标题
- 点击「复制 HTML」复制代码，或「下载 HTML」导出文件
路径: /download
多平台视频下载工具，需要后端服务支持。
支持平台: YouTube / Twitter(X) / Bilibili / Vimeo 等上千个网站（通过 yt-dlp）
功能特性:
- 链接解析 — 粘贴视频链接，自动识别平台并获取视频信息
- 播放列表 — 支持解析播放列表，可选择下载部分视频
- 画质选择 — 支持 4K / 1080p / 720p / 480p / 360p
- 格式选择 — MP4 / WebM / MKV（视频），MP3 / AAC / FLAC / M4A（纯音频）
- 下载模式 — 视频模式或纯音频模式
- 下载队列 — 支持多个下载任务并行，显示进度和速度
- 模拟模式 — 后端未启动时使用模拟数据演示 UI
后端部署:
后端依赖 yt-dlp，需在服务器上安装：
# 安装 yt-dlp
pip install yt-dlp
# 或使用 brew（macOS）
brew install yt-dlp
# 启动后端
npm run dev:server使用方法:
- 启动后端服务（
npm run dev:server或npm run dev:all） - 粘贴视频链接到输入框
- 点击「解析」获取视频信息
- 选择画质和格式
- 点击「开始下载」
- 在下载队列中查看进度，完成后自动保存
路径: /doc-sync
语雀与飞书文档格式双向转换工具，支持文档树递归转换。
功能特性:
- 自动识别 — 粘贴链接后自动检测语雀或飞书平台
- 双向转换 — 语雀 → 飞书 / 飞书 → 语雀
- 子文档支持 — 可选择是否包含子文档一起转换
- 文档树展示 — 以树形结构展示转换进度，实时更新每篇文档状态
- 进度追踪 — 总体进度条 + 单文档状态指示
- 一键交换 — 点击交换按钮快速切换源和目标
使用方法:
- 在「源文档地址」输入框粘贴语雀或飞书的文档链接
- 在「目标文档地址」输入框粘贴目标平台的文档链接
- 系统自动检测平台和转换方向
- 勾选「包含子文档一起转换」（可选）
- 点击「开始转换」
- 在文档树面板中实时查看转换进度
- 转换完成后可在目标平台查看结果
路径: /ai-image（需通过直接访问 URL）
多引擎 AI 图片生成工具，支持 Midjourney、豆包 Seedream、Nano Banana 2。
支持引擎:
- Midjourney — 高质量艺术风格图片生成
- 支持 Imagine（文生图）和 Describe（图生文）
- 支持 U1-U4 放大和 V1-V4 变换
- 支持 R 重绘
- 支持 niji 模式（动漫风格）
- 豆包 Seedream — 字节跳动旗下 AI 图片生成
- Nano Banana 2 — 轻量级 AI 图片生成
使用方法:
- 点击右上角「API 配置」设置各引擎的 API Key 和接口地址
- 在左侧选择生成引擎
- 设置引擎参数（如 Midjourney 的 botType）
- 在输入框中输入描述文字（Prompt）
- 点击「生成」按钮
- 在下方任务列表和预览区查看生成结果
- Midjourney 生成后可使用 U/V/R 操作按钮
src/
├── components/ # UI 组件
│ ├── ui/ # 基础 UI 组件（Button, Card, Input 等）
│ ├── compressor/ # 图片压缩相关组件
│ ├── downloader/ # 视频下载相关组件
│ ├── logo/ # Logo 生成相关组件
│ ├── md/ # Markdown 编辑器组件
│ ├── pdf/ # PDF 工具组件
│ └── ai-image/ # AI 图片生成组件
├── hooks/ # 自定义 Hooks
├── lib/ # 核心逻辑库
│ ├── logo/ # Logo 生成引擎
│ ├── markdown/ # Markdown 解析和渲染
│ ├── ai-image/ # AI 图片生成 API
│ └── converter/ # JSON/XML 转换核心
├── pages/ # 页面组件
├── types/ # TypeScript 类型定义
├── App.tsx # 应用入口和路由配置
├── main.tsx # 渲染入口
└── index.css # 全局样式
- 所有数据处理默认在浏览器端完成，保护用户隐私
- 视频下载和文档互转需要后端服务支持
- 支持亮色/暗色主题切换
- 响应式布局，适配桌面和移动端
Private