285 lines
8.1 KiB
Markdown
285 lines
8.1 KiB
Markdown
# Zkit - 在线工具箱
|
||
|
||
<div align="center">
|
||
|
||
**一个现代化的在线工具箱平台，提供多种实用工具和完整的管理后台系统**
|
||
|
||
[](https://vuejs.org/)
|
||
[](https://vitejs.dev/)
|
||
[](https://pinia.vuejs.org/)
|
||
[](LICENSE)
|
||
|
||
</div>
|
||
|
||
---
|
||
|
||
## 📖 项目简介
|
||
|
||
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
|
||
- 发送邮件
|
||
|
||
---
|
||
|
||
<div align="center">
|
||
|
||
**用 ❤️ 构建**
|
||
|
||
</div>
|