# super-tool

**Repository Path**: narc/super-tool

## Basic Information

- **Project Name**: super-tool
- **Description**: 一个基于 Cloudflare 部署的在线工具合集网站，提供各种实用的在线工具，具有良好的用户体验和性能。

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-16
- **Last Updated**: 2026-01-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SuperTool - 实用工具合集

一个基于 Cloudflare 部署的在线工具合集网站，提供各种实用的在线工具，具有良好的用户体验和性能。

## 功能特性

- **首页展示**：工具分类展示、热门工具推荐、日期信息展示、搜索功能
- **核心工具**：
  - 计算器：基本的数学计算功能
  - 单位转换：长度单位之间的转换
  - 密码生成器：生成安全的随机密码
- **响应式设计**：支持多设备访问
- **快速响应**：基于 Cloudflare 边缘节点部署

## 技术栈

### 前端技术
- **框架**: React + Vite
- **UI 库**: Tailwind CSS
- **状态管理**: React Context API + useReducer
- **工具库**: 
  - date-fns (日期处理)
  - mathjs (数学计算)
  - marked (Markdown 解析)
  - js-cookie (Cookie 处理)

### 后端技术
- **无服务器函数**: Cloudflare Workers
- **存储方案**:
  - **配置和缓存**: Cloudflare KV
  - **结构化数据**: Cloudflare D1 (SQL 数据库)
  - **文件存储**: Cloudflare R2 (对象存储)

### 部署与 CI/CD
- **托管**: Cloudflare Pages
- **CI/CD**: GitHub Actions

## 项目结构

```
supertool-trae/
├── src/
│   ├── components/         # 通用组件
│   ├── tools/              # 工具模块
│   │   ├── calculator/     # 计算器工具
│   │   ├── converter/      # 转换工具
│   │   ├── generator/      # 生成器工具
│   │   └── ...             # 其他工具
│   ├── hooks/              # 自定义 Hooks
│   ├── utils/              # 工具函数
│   ├── services/           # API 服务
│   ├── context/            # 上下文管理
│   ├── styles/             # 全局样式
│   ├── App.jsx             # 应用入口
│   └── main.jsx            # 主文件
├── public/                 # 静态资源
├── workers/                # Cloudflare Workers
│   ├── api/                # API 端点
│   └── utils/              # Workers 工具函数
├── package.json            # 项目配置
├── vite.config.js          # Vite 配置
├── tailwind.config.js      # Tailwind CSS 配置
├── postcss.config.js       # PostCSS 配置
└── wrangler.toml           # Cloudflare Workers 配置
```

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 部署到 Cloudflare Pages

1. **准备工作**:
   - 确保你有一个 Cloudflare 账户
   - 将项目代码推送到 GitHub 仓库

2. **部署步骤**:
   - 登录 Cloudflare 控制台
   - 导航到 "Pages" 部分
   - 点击 "Create a project"
   - 选择你的 GitHub 仓库
   - 配置构建设置:
     - **Framework preset**: React
     - **Build command**: `npm run build`
     - **Build output directory**: `dist`
   - 点击 "Save and Deploy"

3. **配置 Cloudflare Workers**:
   - 导航到 "Workers & Pages" 部分
   - 点击 "Create Worker"
   - 复制 `workers/api/index.js` 中的代码
   - 部署 Worker
   - 配置路由规则，将 API 请求路由到 Worker

## 添加新工具

1. 在 `src/tools/` 目录下创建新的工具目录
2. 创建工具组件文件
3. 在 `src/App.jsx` 中导入并注册新工具
4. 在 `workers/api/index.js` 中添加相应的 API 端点（如果需要）

## 贡献指南

1. Fork 项目仓库
2. 创建你的功能分支 (`git checkout -b feature/amazing-feature`)
3. 提交你的更改 (`git commit -m 'Add some amazing feature'`)
4. 推送到分支 (`git push origin feature/amazing-feature`)
5. 打开 Pull Request

## 许可证

本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件

## 联系方式

如有问题或建议，欢迎联系我们。