# tao-admin

**Repository Path**: htttaozi/tao-admin

## Basic Information

- **Project Name**: tao-admin
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-05
- **Last Updated**: 2026-01-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">

# 🚀 Tao Admin

### 沃兹基德管理系统

[![Vue](https://img.shields.io/badge/Vue-3.4+-4FC08D?style=flat-square&logo=vue.js&logoColor=white)](https://vuejs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178C6?style=flat-square&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![Node.js](https://img.shields.io/badge/Node.js-20+-339933?style=flat-square&logo=node.js&logoColor=white)](https://nodejs.org/)
[![MySQL](https://img.shields.io/badge/MySQL-8.0-4479A1?style=flat-square&logo=mysql&logoColor=white)](https://www.mysql.com/)
[![License](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](LICENSE)

</div>

---

## ✨ 核心功能

### 🎯 智能上传引擎

- **秒传检测** - 基于文件哈希的极速秒传，服务器已存在文件直接返回结果，零等待
- **分片上传** - 大文件智能分片处理，支持自定义分片大小，稳定高效
- **断点续传** - 精准记录上传进度，网络中断或浏览器刷新后自动续传，永不丢失
- **并发控制** - 智能并发队列管理，同时上传 3-5 个分片，动态补充，最大化带宽利用
- **进度可视化** - 实时监听分片状态，精确计算整体进度，流畅的用户体验

### 👤 用户管理系统

- 完善的用户注册与登录机制
- 全面的用户信息管理功能
- 精细的权限控制体系（管理员/普通用户）
- 头像上传与智能缩略图生成

### 📁 文件管理

- 直观的文件列表展示
- 详细的文件信息查看
- 流畅的图片预览体验

### 📷 图片压缩

- **批量压缩** - 支持多图同时压缩，高效处理大量图片
- **智能压缩** - 自动检测文件大小，超过阈值自动启用压缩
- **并发处理** - 可配置并发数量，最大化利用系统资源
- **Web Worker** - 后台线程处理，避免阻塞主线程，保持界面流畅
- **格式转换** - 支持 JPEG、PNG、WebP 格式互转
- **参数可调** - 自定义压缩质量、目标大小、最大宽高等参数
- **对比预览** - 实时对比压缩前后效果，所见即所得
- **进度显示** - 实时显示压缩进度和压缩率
- **EXIF 保留** - 智能保留图片元数据信息
- **缩略图生成** - 大图自动生成缩略图，优化列表展示性能

### 🏷️ 3D 词云图

- **3D 球形布局** - 采用球形分布算法，标签在三维空间中均匀分布
- **交互式旋转** - 支持鼠标拖拽和滚轮缩放，流畅的 3D 交互体验
- **智能权重** - 根据标签权重自动调整字体大小和颜色，突出重要内容
- **高亮效果** - 多种高亮方式（轮廓、颜色、大小、块状），鼠标悬停时突出显示
- **响应式设计** - 自适应容器大小，ResizeObserver 监听窗口变化自动重绘
- **自定义配置** - 丰富的配置选项，支持自定义字体、颜色、形状、速度等
- **五分位分级** - 基于数据分布自动计算五分位数，智能分配标签等级
- **音频支持** - 支持为标签添加音频，鼠标悬停时播放提示音
- **提示框** - 支持原生提示和自定义 div 提示框
- **脉冲动画** - 高亮标签支持呼吸效果，增强视觉反馈

---

## 🛠 技术栈

### 前端技术

| 技术 | 版本 | 说明 |
|------|------|------|
| Vue | 3.4+ | 渐进式 JavaScript 框架 |
| TypeScript | 5.x | JavaScript 的超集 |
| Vite | 6.x | 下一代前端构建工具 |
| Element Plus | 2.13+ | Vue 3 组件库 |
| Pinia | 3.x | Vue 状态管理库 |
| Vue Router | 4.x | Vue 官方路由 |
| Tailwind CSS | 3.x | 原子化 CSS 框架 |
| Axios | 1.x | HTTP 客户端 |
| Spark MD5 | 3.x | 文件哈希计算 |
| browser-image-compression | 2.0.2 | 图片压缩 |

### 后端技术

| 技术 | 版本 | 说明 |
|------|------|------|
| Node.js | 20+ | JavaScript 运行时 |
| Express | 4.x | Web 应用框架 |
| TypeScript | 5.x | 类型安全的 JavaScript |
| MySQL | 8.0 | 关系型数据库 |
| Multer | 1.x | 文件上传中间件 |
| JWT | 9.x | 身份认证 |
| Bcrypt | 6.x | 密码加密 |
| Sharp | 0.x | 图像处理 |
| node-schedule | 2.x | 定时任务 |

### 开发工具

| 工具 | 版本 | 说明 |
|------|------|------|
| pnpm | 10.12.1 | 快速、节省磁盘空间的包管理器 |
| Turbo | 2.x | 高性能构建系统 |
| ESLint | 9.x | 代码质量检查 |
| tsx | 4.x | TypeScript 执行器 |

---

## 📦 项目结构

```
root/
├── backend/                 # 后端服务
│   ├── src/
│   │   ├── controllers/     # 控制器层
│   │   ├── middleware/      # 中间件
│   │   ├── routes/          # 路由定义
│   │   ├── services/        # 业务逻辑层
│   │   └── utils/           # 工具函数
│   └── package.json
├── frontend/                # 前端应用
│   ├── src/
│   │   ├── apis/            # API 接口
│   │   ├── assets/          # 静态资源
│   │   ├── components/      # 公共组件
│   │   ├── layouts/         # 布局组件
│   │   ├── network/         # 网络请求
│   │   ├── router/          # 路由配置
│   │   ├── stores/          # 状态管理
│   │   ├── styles/          # 样式文件
│   │   ├── utils/           # 工具函数
│   │   └── views/           # 页面组件
│   └── package.json
├── common/                  # 公共代码
├── interface/               # TypeScript 类型定义
├── database/                # 数据库脚本
│   └── init.sql             # 初始化脚本
├── package.json             # 根目录配置
├── pnpm-workspace.yaml      # pnpm 工作区配置
└── turbo.json               # Turbo 配置
```

---

## 🚀 快速开始

### 环境要求

- Node.js >= 20.18.0
- pnpm >= 10.12.1
- MySQL >= 8.0

### 安装依赖

```bash
pnpm install
```

### 数据库配置

1. 创建数据库并执行初始化脚本：

```bash
mysql -u root -p < database/init.sql
```

2. 配置数据库连接信息（在 `backend/.env` 文件中）：

```env
DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=your_password
DB_NAME=tao_admin
JWT_SECRET=your_jwt_secret
```

### 启动开发服务

```bash
# 同时启动前后端
pnpm dev

# 仅启动后端
pnpm backend:dev

# 仅启动前端
pnpm frontend:dev
```

### 构建生产版本

```bash
pnpm build
```

---

## 📝 核心实现

### 秒传检测原理

1. 前端使用 Spark MD5 计算文件哈希值
2. 发送哈希值到服务器查询文件是否存在
3. 如果存在，直接返回文件信息，跳过上传

### 分片上传流程

1. 前端根据文件大小计算分片数量
2. 将文件切割成固定大小的分片（默认 5MB）
3. 并发上传分片到服务器
4. 服务器接收分片并存储到临时目录
5. 所有分片上传完成后，合并为完整文件

### 断点续传机制

1. 前端记录已上传的分片索引
2. 上传前查询服务器已接收的分片
3. 只上传未完成的分片
4. 支持浏览器刷新后继续上传

### 图片压缩原理

1. **文件检测** - 根据配置的阈值自动判断是否需要压缩
2. **Web Worker** - 使用浏览器后台线程处理压缩，避免阻塞主线程
3. **并发队列** - 支持多张图片同时压缩，可配置并发数量
4. **参数优化** - 根据目标大小、最大宽高等参数智能调整压缩质量
5. **格式转换** - 支持将图片转换为 JPEG、PNG、WebP 等格式
6. **元数据保留** - 智能保留 EXIF 等图片元数据信息
7. **缩略图生成** - 使用 OffscreenCanvas 生成小尺寸缩略图，优化性能

---

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

---

## 📄 许可证

[MIT](LICENSE)

---

<div align="center">

**Made with ❤️ by Tao Team**

</div>