# web_tools

**Repository Path**: FullStackDamon/web_tools

## Basic Information

- **Project Name**: web_tools
- **Description**: 更新常用工具页面
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-19
- **Last Updated**: 2026-05-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Web Tools - 开发者工具集

基于 Vue 3 + Vite + Element Plus 构建的在线开发者工具网站，提供校验计算、数据转换、编码解码等常用工具。

## 功能特性

### 用户系统
- **登录认证** - 测试账号登录（test/a123456），登录后显示用户头像
- **项目切换** - 登录后可切换项目：网络工具、专用工具、技术文档

### 校验工具
- **BCC 校验** - 异或校验计算，支持 XOR 和 LRC 模式
- **CRC 校验** - CRC-16/CRC-32 校验计算，支持 Modbus、CCITT、XMODEM 等多种标准

### 转换工具
- **Float ⇄ Hex** - IEEE 754 浮点数与十六进制互转，支持 16/32/64/128-bit 精度
- **时间戳转换** - 时间戳与日期时间互转，支持时区选择和实时显示
- **进制互转** - 二进制、八进制、十进制、十六进制实时互转

### 编码工具
- **Base64 编码** - 文本与 Base64 双向转换，支持标准和 URL 安全格式
- **UTF-8 编码** - 文本与 UTF-8 编码互转，显示 HEX/DEC/BIN/Unicode
- **ASCII 编码** - 标准 ASCII 字符（0-127）与编码互转
- **GBK/GB2312 编码** - 文本与 GBK 十六进制编码互转

### 硬件工具
- **电路仿真** - 在线电路仿真工具 Wokwi，嵌入式 iframe 显示
- **芯片手册** - 芯片数据手册查询，支持半导小芯和立创商城

### 设计工具
- **配色选择** - 颜色选择与转换，显示 HEX、RGB、CMYK、HSL 值，提供推荐颜色和历史记录

## 技术栈

- **前端框架**：Vue 3 (Composition API)
- **构建工具**：Vite
- **UI 组件**：Element Plus
- **路由**：Vue Router 4
- **样式**：SCSS

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
# 自定义端口
npm run dev -- --port 3000
```

### 生产构建

```bash
npm run build
npm run preview  # 本地预览构建结果
```

## 项目结构

```
src/
├── components/
│   └── Layout/          # 页面布局组件
│       ├── Layout.vue   # 主布局（侧边栏 + 内容区）
│       ├── SideNav.vue  # 侧边栏导航
│       └── ToolCards.vue # 工具卡片列表
├── views/
│   ├── Home.vue         # 工具列表页
│   └── tools/           # 各工具页面组件
│       ├── BccChecker.vue
│       ├── CrcChecker.vue
│       ├── FloatConverter.vue
│       ├── TimestampConverter.vue
│       ├── RadixConverter.vue
│       ├── Base64Converter.vue
│       ├── Utf8Converter.vue
│       ├── AsciiConverter.vue
│       ├── GbkConverter.vue
│       ├── CircuitSimulator.vue
│       └── ColorPicker.vue
├── utils/
│   ├── toolsConfig.js   # 工具配置注册表
│   ├── bcc.js           # BCC 校验算法
│   ├── crc.js           # CRC 校验算法
│   ├── floatConverter.js # IEEE 754 转换
│   ├── timestamp.js     # 时间戳转换
│   ├── base64.js        # Base64 编解码
│   ├── utf8.js          # UTF-8 编码转换
│   ├── ascii.js         # ASCII 编码转换
│   ├── gbk.js           # GBK 编码转换
│   └── hexAscii.js      # HEX/ASCII 转换
├── router/
│   └── index.js         # 路由配置
├── styles/
│   └── global.scss      # 全局样式
├── App.vue
└── main.js
```

## 添加新工具

1. 在 `src/utils/toolsConfig.js` 的 `tools` 数组中添加配置：
```javascript
{
  id: 'new-tool',
  name: '新工具名称',
  description: '工具功能描述',
  categoryId: 'converter',
  icon: 'IconName',
  route: '/tools/new-tool'
}
```

2. 在 `src/components/Layout/SideNav.vue` 和 `ToolCards.vue` 中导入图标

3. 创建组件 `src/views/tools/NewTool.vue`

4. 在 `src/router/index.js` 添加路由

5. 如需计算逻辑，创建 `src/utils/newTool.js`

## Git 工作流程

- **dev 分支**：日常开发提交
- **master 分支**：稳定版本

```bash
# 提交格式
feat: 新功能
fix: 修复问题
chore: 小改动
docs: 文档更新
refactor: 重构
```

## 访问地址

- 开发环境：http://localhost:20006
- 远程仓库：https://gitee.com/FullStackDamon/web_tools

## 许可证

MIT