# byte-tools

**Repository Path**: antfl/byte-tools

## Basic Information

- **Project Name**: byte-tools
- **Description**: 一个符合当代 UI 且功能强大的 图片，字符串，JSON 工具
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://tools.byteout.cn
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-11-09
- **Last Updated**: 2025-11-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Byte Tools

<div align="center">

![Byte Tools](https://img.shields.io/badge/Byte%20Tools-Multi--Tool%20Platform-blue)
![Vue](https://img.shields.io/badge/Vue-3.5.22-4FC08D?logo=vue.js)
![TypeScript](https://img.shields.io/badge/TypeScript-5.9.3-3178C6?logo=typescript)
![License](https://img.shields.io/badge/License-MIT-green)

**为开发者打造的多功能在线工具集**

集成文本、图片、JSON 三种工具模式，基于 Monaco Editor 提供专业的代码编辑体验。

[开始使用](#快速开始) · [功能特性](#功能特性) · [开发指南](#开发指南)

</div>

---

## 📖 项目简介

Byte Tools 是一个功能强大的在线工具平台，专为开发者设计。它集成了 JSON 处理、文本转换和图片编辑三大核心功能模块，提供直观易用的界面和专业的编辑体验。

> 🌐 **地址**：[https://tools.byteout.cn](https://tools.byteout.cn)

### 核心亮点

- 🎨 **专业编辑器**：基于 Monaco Editor，提供语法高亮、代码折叠、实时预览
- 💾 **本地存储**：使用 IndexedDB 存储常用片段，支持导入导出
- 🌓 **主题切换**：支持深色/浅色主题，自动适配系统偏好
- ⚡ **实时预览**：所有操作实时反馈，所见即所得
- 🔄 **撤销重做**：图片编辑支持历史记录，可撤销/重做操作

## ✨ 功能特性

### 📄 JSON 工具

- **格式化与压缩**
  - 一键格式化 JSON 数据，支持自定义缩进（默认 2 空格）
  - 压缩为单行，节省空间
  - 自动格式化（粘贴/输入时自动格式化）

- **差异对比**
  - 并排对比两个 JSON 文件
  - 使用 jsondiffpatch 高亮显示差异
  - 支持代码折叠、展开
  - 专业的 Diff 编辑器体验

- **修复与解析**
  - 使用 jsonrepair 智能修复常见的 JSON 错误
  - 支持深度解析（递归解析字符串中的 JSON）
  - 详细的错误提示和定位

### 📝 文本工具

- **大小写转换**
  - 全大写、全小写
  - 标题格式、驼峰命名、帕斯卡命名
  - 蛇形命名、短横线命名

- **编码解码**
  - Base64 编码/解码
  - URL 编码/解码

- **文本处理**
  - 去除空白（所有、行首、行尾、行首尾、空行）
  - 文本统计（字符数、单词数、行数、段落数、字节数）

### 🖼️ 图片工具

- **基础编辑**
  - 压缩（可设置质量、最大尺寸）
  - 调整尺寸（支持保持宽高比）
  - 裁剪（自定义区域）
  - 旋转（任意角度）
  - 翻转（水平/垂直）

- **格式转换**
  - 支持 PNG、JPG、WebP、ICO、SVG
  - 转换为 Base64 文本

- **滤镜与调整**
  - 滤镜：灰度、怀旧、反色、模糊
  - 调整：亮度、对比度、饱和度

- **历史记录**
  - 支持撤销/重做（最多 50 步）
  - 操作历史自动保存

### 💾 数据管理

- **本地存储**
  - 使用 IndexedDB 存储数据片段
  - 支持保存、加载、删除
  - 自动保存当前编辑内容

- **导入导出**
  - 支持文件导入（拖拽或选择）
  - 支持导出为文件
  - 支持从缓存加载

## 🛠️ 技术栈

### 核心框架

- **Vue 3.5.22** - 渐进式 JavaScript 框架
- **TypeScript 5.9.3** - 类型安全的 JavaScript
- **Vite 7.1.14** (rolldown) - 下一代前端构建工具
- **Vue Router 4.6.3** - 官方路由管理器
- **Pinia 3.0.4** - 状态管理库

### 编辑器

- **Monaco Editor 0.54.0** - VS Code 编辑器核心
- **monaco-editor-vue3 1.0.4** - Vue 3 集成

### 工具库

- **jsonrepair 3.13.1** - JSON 修复工具
- **jsondiffpatch 0.7.3** - JSON 差异对比
- **browser-image-compression 2.0.2** - 图片压缩
- **exifr 7.1.3** - EXIF 数据读取
- **lucide-vue-next 0.554.0** - 图标组件库

### 样式

- **Less 4.4.2** - CSS 预处理器
- **Lucide Vue Next** - 矢量图标组件库

## 📁 项目结构

```
byte-tools/
├── public/                      # 静态资源目录
│   └── favicon.svg             # 网站图标
│
├── src/                        # 源代码目录
│   ├── assets/                 # 资源文件
│   │   ├── logo.svg           # 项目 Logo
│   │   ├── preview-dark.png   # 深色主题预览图
│   │   └── preview-light.png  # 浅色主题预览图
│   │
│   ├── components/             # Vue 组件
│   │   ├── base/               # 基础组件（4 个）
│   │   │   ├── IconButton.vue  # 图标按钮组件
│   │   │   ├── SiteLogo.vue    # Logo 组件
│   │   │   ├── SvgIcon.vue     # SVG 图标组件
│   │   │   └── ThemeToggle.vue # 主题切换组件
│   │   │
│   │   ├── layout/             # 布局组件（2 个）
│   │   │   ├── AppHeader.vue  # 应用头部
│   │   │   └── AppFooter.vue  # 应用底部
│   │   │
│   │   ├── modals/             # 模态框组件（4 个）
│   │   │   ├── CachePickerModal.vue     # 缓存选择器
│   │   │   ├── ImportOptionsModal.vue   # 导入选项模态框
│   │   │   ├── StorageDialog.vue        # 存储对话框
│   │   │   └── ToolSwitchModal.vue      # 工具切换模态框
│   │   │
│   │   ├── sections/           # 页面区块组件（6 个）
│   │   │   ├── AboutFeaturesSection.vue # 关于页功能展示
│   │   │   ├── AboutHeroSection.vue     # 关于页 Hero 区域
│   │   │   ├── AboutTechSection.vue     # 关于页技术栈展示
│   │   │   ├── AboutToolsSection.vue    # 关于页工具展示
│   │   │   ├── FeatureHighlights.vue    # 功能亮点展示
│   │   │   └── HeroSection.vue          # 首页 Hero 区域
│   │   │
│   │   └── workspace/          # 工作区组件（10 个）
│   │       ├── TopBar.vue               # 顶部工具栏
│   │       ├── SideToolbar.vue          # 侧边工具栏
│   │       ├── JsonWorkspace.vue        # JSON 工作区
│   │       ├── TextWorkspace.vue        # 文本工作区
│   │       ├── ImageWorkspace.vue       # 图片工作区
│   │       ├── DiffWorkspace.vue        # 差异对比工作区
│   │       ├── StatusBar.vue            # 状态栏
│   │       ├── ToolActionButton.vue    # 工具操作按钮
│   │       ├── ImageToolPanel.vue       # 图片工具面板
│   │       └── JsonToggleButtons.vue    # JSON 切换按钮
│   │
│   ├── composables/            # 组合式函数（7 个）
│   │   ├── useActionHandler.ts # 操作处理器
│   │   ├── useFileOperations.ts # 文件操作
│   │   ├── useImageOperations.ts # 图片操作
│   │   ├── useJsonOperations.ts # JSON 操作
│   │   ├── useMessage.ts       # 消息提示
│   │   ├── useTextOperations.ts # 文本操作
│   │   └── useTheme.ts         # 主题管理
│   │
│   ├── config/                 # 配置文件
│   │   ├── app.ts              # 应用配置（默认工具、配置加载/保存）
│   │   ├── sidebarActions.ts   # 侧边栏操作配置
│   │   └── toolActions.ts      # 工具操作按钮配置
│   │
│   ├── constants/              # 常量定义
│   │   └── index.ts            # 应用常量（图片、存储、编辑器等）
│   │
│   ├── router/                 # 路由配置
│   │   └── index.ts            # 路由定义（工作区页、关于页）
│   │
│   ├── services/               # 服务层
│   │   └── storageStore.ts     # IndexedDB 存储服务
│   │
│   ├── stores/                 # 状态管理
│   │   └── workspace.ts       # 工作区状态管理
│   │
│   ├── types/                  # TypeScript 类型定义
│   │   ├── actions.ts          # 操作类型定义
│   │   ├── enums.ts            # 枚举类型（工具类型、图片格式、滤镜等）
│   │   └── jsonTools.ts        # JSON 工具相关类型
│   │
│   ├── utils/                  # 工具函数（7 个）
│   │   ├── console.ts          # 控制台工具（品牌信息显示）
│   │   ├── errorHandler.ts     # 错误处理
│   │   ├── format.ts           # 格式化工具（JSON 错误解析）
│   │   ├── iconMap.ts          # 图标映射配置
│   │   ├── imageTools.ts       # 图片处理工具（核心图片功能）
│   │   ├── monaco.ts           # Monaco Editor 配置
│   │   └── textTools.ts        # 文本处理工具
│   │
│   ├── views/                  # 页面视图（2 个）
│   │   ├── AboutView.vue       # 关于页（产品介绍页）
│   │   └── WorkspaceView.vue   # 工作区页面（主功能页）
│   │
│   ├── App.vue                 # 根组件
│   ├── main.ts                 # 应用入口
│   ├── style.less              # 全局样式
│   └── vite-env.d.ts           # Vite 类型声明
│
├── dist/                       # 构建输出目录
│   └── assets/                 # 构建后的资源文件
│
├── index.html                  # HTML 入口文件
├── package.json                # 项目配置和依赖
├── pnpm-lock.yaml              # pnpm 锁文件
├── tsconfig.json               # TypeScript 配置
├── vite.config.ts              # Vite 构建配置
├── LICENSE                     # 许可证文件
└── README.md                   # 项目说明文档（本文件）
```

### 关键文件说明

#### 核心视图

- **`src/views/WorkspaceView.vue`**
  - 主工作区视图，包含所有工具的核心逻辑
  - 管理 JSON、文本、图片三种工具模式
  - 处理编辑器实例、状态管理、操作处理

- **`src/views/AboutView.vue`**
  - 产品介绍页面
  - 展示功能特性、工具介绍和技术栈

#### 工具函数

- **`src/utils/imageTools.ts`** (402 行)
  - 图片处理核心功能
  - 包含压缩、调整尺寸、裁剪、旋转、翻转、格式转换、滤镜、调整等

- **`src/utils/textTools.ts`**
  - 文本处理功能
  - 大小写转换、编码解码、去除空白、统计信息

- **`src/utils/format.ts`**
  - JSON 错误解析和格式化
  - 提供详细的错误位置信息

#### 配置管理

- **`src/config/toolActions.ts`**
  - 定义所有工具的操作按钮配置
  - 按工具类型分组管理操作

- **`src/config/app.ts`**
  - 应用配置管理
  - 默认工具设置、配置加载/保存

#### 存储服务

- **`src/services/storageStore.ts`**
  - IndexedDB 封装
  - 提供数据片段的保存、加载、删除、列表功能

#### 状态管理

- **`src/stores/workspace.ts`**
  - 工作区状态管理
  - 使用 Pinia 管理全局状态

## 🚀 快速开始

### 环境要求

- Node.js >= 16.0.0
- pnpm >= 8.0.0 (推荐) 或 npm >= 7.0.0

### 安装依赖

```bash
# 使用 pnpm（推荐）
pnpm install

# 或使用 npm
npm install
```

### 开发模式

```bash
# 启动开发服务器
pnpm dev

# 或
npm run dev
```

开发服务器将在 `http://localhost:5173` 启动（端口可能不同，请查看终端输出）。

### 构建生产版本

```bash
# 构建生产版本
pnpm build

# 或
npm run build
```

构建产物将输出到 `dist/` 目录。

### 预览生产构建

```bash
# 预览生产构建
pnpm preview

# 或
npm run preview
```

## 💻 开发指南

### 项目架构

项目采用 Vue 3 Composition API + TypeScript + Pinia 架构，主要特点：

1. **组件化设计**：功能模块高度组件化，便于维护和扩展
2. **类型安全**：全面使用 TypeScript，提供完整的类型定义
3. **状态管理**：使用 Pinia 进行全局状态管理，配合 Vue 3 响应式系统
4. **组合式函数**：使用 Composables 封装可复用的业务逻辑
5. **工具函数分离**：工具函数独立封装，便于测试和复用

### 添加新功能

#### 添加新的工具类型

1. 在 `src/types/enums.ts` 中添加工具类型枚举
2. 在 `src/config/toolActions.ts` 中配置工具操作按钮
3. 在 `src/views/WorkspaceView.vue` 中添加工具处理逻辑
4. 创建对应的工作区组件（如 `NewToolWorkspace.vue`）

#### 添加新的图片处理功能

1. 在 `src/utils/imageTools.ts` 中实现处理函数
2. 在 `src/types/enums.ts` 中添加相关枚举（如滤镜类型）
3. 在 `src/config/toolActions.ts` 中添加操作配置
4. 在 `src/views/WorkspaceView.vue` 中添加处理函数调用

### 代码规范

- 使用 TypeScript 严格模式
- 组件使用 `<script setup>` 语法
- 样式使用 Less 预处理器
- 遵循 Vue 3 组合式 API 最佳实践

### 构建优化

项目使用 Vite + Rolldown 进行构建优化：

- Monaco Editor 按需加载
- 代码分割和懒加载
- 资源压缩和优化
- 生产环境自动 Tree Shaking

## 📦 依赖说明

### 生产依赖

| 包名 | 版本 | 用途 |
|------|------|------|
| vue | ^3.5.22 | 核心框架 |
| vue-router | ^4.6.3 | 路由管理 |
| pinia | ^3.0.4 | 状态管理 |
| monaco-editor | ^0.54.0 | 代码编辑器 |
| monaco-editor-vue3 | ^1.0.4 | Monaco Vue 集成 |
| jsonrepair | ^3.13.1 | JSON 修复 |
| jsondiffpatch | ^0.7.3 | JSON 差异对比 |
| browser-image-compression | ^2.0.2 | 图片压缩 |
| exifr | ^7.1.3 | EXIF 数据读取 |
| lucide-vue-next | ^0.554.0 | 图标组件库 |

### 开发依赖

| 包名 | 版本 | 用途 |
|------|------|------|
| typescript | ~5.9.3 | TypeScript 编译器 |
| vite | npm:rolldown-vite@7.1.14 | 构建工具 |
| @vitejs/plugin-vue | ^6.0.1 | Vue 插件 |
| vue-tsc | ^3.1.0 | Vue TypeScript 检查 |
| less | ^4.4.2 | Less 预处理器 |
| @types/node | ^24.6.0 | Node.js 类型定义 |
| @vue/tsconfig | ^0.8.1 | Vue TypeScript 配置 |
| fast-glob | ^3.3.3 | 文件匹配工具 |

## 🌐 浏览器支持

- Chrome/Edge (最新版本)
- Firefox (最新版本)
- Safari (最新版本)
- 其他现代浏览器

> **注意**：项目使用 IndexedDB 进行本地存储，需要浏览器支持 IndexedDB API。

## 📄 许可证

本项目采用 [MIT License](LICENSE) 许可证。

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📮 联系方式

- 联系我们: <a href="https://byteout.cn/contact" target="_blank" rel="noopener noreferrer">https://byteout.cn/contact</a>
- GitHub: [@antfl](https://github.com/antfl)

---

<div align="center">

**Made with ❤️ by Byte Tools Team**

</div>