# tool_web

**Repository Path**: xiaofei9070/tool_web

## Basic Information

- **Project Name**: tool_web
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-10-22
- **Last Updated**: 2025-12-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 工具类网站

基于Vite + Vue3开发的在线工具集合网站，提供各种实用的开发工具。

## 功能特性

- 🚀 基于Vite + Vue3现代化技术栈
- 🎨 响应式设计，支持暗黑模式
- 📱 移动端友好
- 🔧 丰富的工具集合
- ⚡ 实时双向同步编辑

## 已实现工具

### 文本工具
- **文本转换** - 大小写转换、编码解码等
- **文本对比** - 比较两段文本差异
- **正则测试** - 测试和验证正则表达式

### 代码工具  
- **JSON格式化** - 树形结构展示，支持实时编辑
- **代码美化** - HTML、CSS、JavaScript代码格式化

### 图像工具
- **图像压缩** - 无损压缩图片
- **格式转换** - 图片格式转换

### 加密工具
- **加密解密** - 多种加密算法支持

## JSON格式化工具特色

- 🌳 **树形结构展示** - 清晰的层级关系
- ✏️ **实时双向编辑** - 左侧编辑器和右侧树形结构实时同步
- 🎯 **节点编辑** - 直接点击树节点进行编辑
- 📊 **类型标识** - 不同数据类型使用不同颜色标识
- 🔄 **展开折叠** - 支持节点展开和折叠

## 技术栈

- **前端框架**: Vue 3
- **构建工具**: Vite
- **路由**: Vue Router 4
- **图标**: Font Awesome
- **样式**: CSS3 + CSS变量

## 项目结构

```
src/
├── components/          # 公共组件
│   ├── Navigation.vue   # 导航菜单
│   └── JsonTree.vue     # JSON树形组件
├── views/               # 页面组件
│   ├── Home.vue         # 首页
│   └── tools/           # 工具页面
├── router/              # 路由配置
└── assets/              # 静态资源
```

## 快速开始

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build
```

## 开发说明

### JSON格式化工具核心功能

1. **双向数据绑定**: 左侧编辑器和右侧树形结构实时同步
2. **树形结构渲染**: 使用递归组件实现无限层级展示
3. **节点编辑**: 支持直接编辑字符串、数字、布尔值等基本类型
4. **错误处理**: 智能错误提示和格式验证

### 导航菜单特性

- 下拉菜单支持
- 主题切换功能
- 响应式设计
- 路由激活状态

## 许可证

MIT License