# Zkit - 在线工具箱
**一个现代化的在线工具箱平台，提供多种实用工具和完整的管理后台系统**
[](https://vuejs.org/)
[](https://vitejs.dev/)
[](https://pinia.vuejs.org/)
[](LICENSE)
---
## 📖 项目简介
Zkit 是一个基于 Vue 3 + Vite 构建的现代化在线工具箱平台。项目采用前后端分离架构，提供用户友好的工具界面和功能完善的管理后台系统。
### ✨ 核心特性
#### 🎨 用户端功能
- **丰富的工具集** - MD5 加密、PDF 处理等多种实用工具
- **响应式设计** - 完美适配桌面端和移动端
- **深色模式** - 智能主题切换，支持亮色/暗色模式（根据时间自动切换）
- **公告系统** - 实时查看平台公告和更新通知
- **FAQ 帮助** - 常见问题解答，快速获取帮助
- **用户认证** - 完整的登录/注册系统
- **流畅动画** - 精心设计的交互动画和过渡效果
#### 🛠️ 管理后台
- **仪表盘** - 数据统计和可视化展示
- **用户管理** - 用户信息的增删改查
- **工具管理** - 工具的配置和管理
- **公告管理** - 发布和管理平台公告
- **FAQ 管理** - 维护常见问题库
- **广告管理** - 广告位配置和管理
- **页脚管理** - 自定义页脚链接
---
## 🚀 技术栈
### 核心框架
- **[Vue 3](https://vuejs.org/)** - 渐进式 JavaScript 框架
- **[Vite](https://vitejs.dev/)** - 下一代前端构建工具
- **[Vue Router](https://router.vuejs.org/)** - 官方路由管理器
- **[Pinia](https://pinia.vuejs.org/)** - 新一代状态管理库
### 工具库
- **[blueimp-md5](https://github.com/blueimp/JavaScript-MD5)** - MD5 加密工具
- **[Sass](https://sass-lang.com/)** - CSS 预处理器
- **[FontAwesome](https://fontawesome.com/)** - 图标库
### 开发工具
- **[@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue)** - Vue 3 单文件组件支持
- **[vite-plugin-vue-devtools](https://devtools.vuejs.org/)** - Vue 开发者工具
---
## 📁 项目结构
```
Zkit/
├── public/ # 静态资源
├── src/
│ ├── assets/ # 样式和资源文件
│ │ ├── main.css # 全局样式
│ │ └── ...
│ ├── components/ # 公共组件
│ │ ├── AppHeader.vue # 头部导航
│ │ ├── AppFooter.vue # 页脚
│ │ ├── LoginModal.vue # 登录模态框
│ │ ├── AnnouncementModal.vue # 公告模态框
│ │ ├── ToolCard.vue # 工具卡片
│ │ └── admin/ # 管理后台组件
│ ├── layout/ # 布局组件
│ │ └── MainLayout.vue # 管理后台主布局
│ ├── views/ # 页面视图
│ │ ├── HomeView.vue # 首页
│ │ ├── AllToolsView.vue # 所有工具页
│ │ ├── FaqView.vue # FAQ 页面
│ │ ├── Md5View.vue # MD5 工具页
│ │ ├── PdfView.vue # PDF 工具页
│ │ └── admin/ # 管理后台页面
│ │ ├── Login.vue # 管理员登录
│ │ ├── Dashboard.vue # 仪表盘
│ │ ├── Users.vue # 用户管理
│ │ ├── Tools.vue # 工具管理
│ │ ├── Announcements.vue # 公告管理
│ │ ├── Faqs.vue # FAQ 管理
│ │ ├── Ads.vue # 广告管理
│ │ └── Footer.vue # 页脚管理
│ ├── router/ # 路由配置
│ │ └── index.js
│ ├── stores/ # Pinia 状态管理
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── index.html # HTML 模板
├── vite.config.js # Vite 配置
├── package.json # 项目依赖
└── README.md # 项目文档
```
---
## 🔧 快速开始
### 环境要求
- **Node.js**: `^20.19.0` 或 `>=22.12.0`
- **npm**: 最新版本
### 安装依赖
```bash
npm install
```
### 开发模式
启动开发服务器，支持热重载：
```bash
npm run dev
```
访问 `http://localhost:5173` 查看应用
### 生产构建
构建并压缩生产版本：
```bash
npm run build
```
### 预览生产版本
本地预览生产构建：
```bash
npm run preview
```
---
## 🎯 功能详解
### 用户端路由
| 路由 | 说明 | 组件 |
|------|------|------|
| `/` | 首页 | HomeView |
| `/all-tools` | 所有工具 | AllToolsView |
| `/tool/md5` | MD5 工具 | Md5View |
| `/tool/pdf` | PDF 工具 | PdfView |
| `/faq` | 常见问题 | FaqView |
### 管理后台路由
| 路由 | 说明 | 权限 |
|------|------|------|
| `/admin/login` | 管理员登录 | 公开 |
| `/admin` | 仪表盘 | 需要认证 |
| `/admin/users` | 用户管理 | 需要认证 |
| `/admin/tools` | 工具管理 | 需要认证 |
| `/admin/announcements` | 公告管理 | 需要认证 |
| `/admin/faqs` | FAQ 管理 | 需要认证 |
| `/admin/ads` | 广告管理 | 需要认证 |
| `/admin/footer` | 页脚管理 | 需要认证 |
### 主题系统
- **自动切换**: 根据时间自动切换主题（19:00-06:00 为暗色模式）
- **手动切换**: 点击右下角主题按钮手动切换
- **持久化**: 主题设置保存在本地存储
### 认证系统
- **路由守卫**: 自动检查管理后台访问权限
- **登录状态**: 使用 localStorage 存储登录状态
- **重定向**: 未登录自动跳转到登录页
---
## 💻 开发指南
### 推荐 IDE 配置
- **[VS Code](https://code.visualstudio.com/)** + **[Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar)**
- 请禁用 Vetur 扩展以避免冲突
### 推荐浏览器扩展
#### Chromium 浏览器 (Chrome, Edge, Brave 等)
- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
- [启用自定义对象格式化](http://bit.ly/object-formatters)
#### Firefox
- [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
- [启用自定义对象格式化](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
### 代码规范
- 使用 Vue 3 Composition API
- 遵循 Vue 官方风格指南
- 组件命名使用 PascalCase
- 文件命名使用 PascalCase (组件) 或 camelCase (工具)
### 添加新工具
1. 在 `src/views/` 创建工具组件
2. 在 `src/router/index.js` 添加路由
3. 在 `AllToolsView.vue` 添加工具卡片
4. 在管理后台添加工具配置
---
## 🎨 设计特色
### 视觉设计
- **现代化 UI**: 采用清新的设计风格
- **流畅动画**: 精心设计的过渡效果
- **响应式布局**: 完美适配各种设备
- **深色模式**: 护眼的暗色主题
### 交互设计
- **回到顶部**: 滚动超过 200px 自动显示
- **平滑滚动**: 所有页面跳转使用平滑滚动
- **悬停效果**: 丰富的鼠标悬停反馈
- **加载状态**: 清晰的加载和错误提示
---
## 📝 配置说明
### Vite 配置
查看 [Vite 配置参考](https://vite.dev/config/) 了解更多配置选项。
### 环境变量
在项目根目录创建 `.env` 文件：
```env
VITE_API_BASE_URL=your_api_url
VITE_APP_TITLE=Zkit
```
---
## 🤝 贡献指南
欢迎提交 Issue 和 Pull Request！
1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request
---
## 📄 许可证
本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情
---
## 📧 联系方式
如有问题或建议，欢迎通过以下方式联系：
- 提交 Issue
- 发送邮件
---
**用 ❤️ 构建**