Web Tool Platform -在线工具箱

功能特性

🧰 36+ 实用工具（文本、图片、PDF、开发辅助）
📊 浏览/点赞统计（IP 去重）
🔐 管理员后台
🌙 深色模式
📱 响应式设计

工具列表

文本工具 (12个)

字数统计、添加前后缀、文本去重、汉字转拼音、文本排版、文本对比、大小写转换、文本替换、URL提取、去除行号、文本截取、文本排序

开发工具 (11个)

Base64编解码、HTML编辑器、MD编辑器、CSS格式化、JS格式化、URL编解码、JSON格式化、正则测试、时间戳转换、颜色转换、UUID生成

图片工具 (4个)

图片压缩、图片裁剪、图片水印、格式转换

PDF工具 (9个)

PDF合并、PDF拆分、PDF转图片、图片转PDF、PDF压缩、PDF旋转、PDF水印、PDF提取文字、PDF删页

快速开始

cd web-tool-platform
npm install
npx prisma generate
npx prisma db push
npm run db:seed
npm run dev

访问地址：

前台：http://localhost:3008
后台：http://localhost:3008/admin/login
管理员：admin / admin123

开发新工具

1. 创建组件

// src/components/tools/MyTool.tsx
'use client'
import { useState } from 'react'

export function MyTool() {
  return <div>工具内容</div>
}

2. 注册组件

// src/components/tools/registry.ts
export const toolRegistry = {
  // ...
  MyTool: dynamic(() => import('./MyTool').then(m => m.MyTool)),
}

3. 添加到 seed.ts 并重新 seed

npm run db:seed

项目结构

src/
├── app/
│   ├── api/           # API 路由
│   ├── admin/         # 后台管理
│   ├── tools/         # 工具页面
│   └── page.tsx       # 首页
├── components/
│   ├── tools/         # 工具组件
│   ├── layout/        # 布局组件
│   └── ui/            # UI 组件
└── lib/               # 工具函数

常用命令

npm run dev           # 开发服务器 (端口 3008)
npm run build         # 生产构建
npm run db:seed       # 初始化数据
npm test              # 运行测试

生产部署

# 1. 构建
npm run build

# 2. 启动生产服务器 (端口 3008)
npm start

生产环境注意事项：

修改 .env 中的 AUTH_SECRET 为随机强密码
修改 AUTH_URL 为实际域名
确保 prisma/dev.db 数据库文件有读写权限

环境变量

DATABASE_URL="file:./dev.db"
AUTH_SECRET="your-secret-key"
AUTH_URL="http://localhost:3008"