Zkit - 在线工具箱
一个现代化的在线工具箱平台，提供多种实用工具和完整的管理后台系统
📖 项目简介
Zkit 是一个基于 Vue 3 + Vite 构建的现代化在线工具箱平台。项目采用前后端分离架构，提供用户友好的工具界面和功能完善的管理后台系统。
✨ 核心特性
🎨 用户端功能
- 丰富的工具集 - MD5 加密、PDF 处理等多种实用工具
- 响应式设计 - 完美适配桌面端和移动端
- 深色模式 - 智能主题切换，支持亮色/暗色模式（根据时间自动切换）
- 公告系统 - 实时查看平台公告和更新通知
- FAQ 帮助 - 常见问题解答，快速获取帮助
- 用户认证 - 完整的登录/注册系统
- 流畅动画 - 精心设计的交互动画和过渡效果
🛠️ 管理后台
- 仪表盘 - 数据统计和可视化展示
- 用户管理 - 用户信息的增删改查
- 工具管理 - 工具的配置和管理
- 公告管理 - 发布和管理平台公告
- FAQ 管理 - 维护常见问题库
- 广告管理 - 广告位配置和管理
- 页脚管理 - 自定义页脚链接
🚀 技术栈
核心框架
- Vue 3 - 渐进式 JavaScript 框架
- Vite - 下一代前端构建工具
- Vue Router - 官方路由管理器
- Pinia - 新一代状态管理库
工具库
- blueimp-md5 - MD5 加密工具
- Sass - CSS 预处理器
- FontAwesome - 图标库
开发工具
- @vitejs/plugin-vue - Vue 3 单文件组件支持
- vite-plugin-vue-devtools - 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: 最新版本
安装依赖
npm install
开发模式
启动开发服务器，支持热重载：
npm run dev
访问 http://localhost:5173 查看应用
生产构建
构建并压缩生产版本：
npm run build
预览生产版本
本地预览生产构建：
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 + Vue (Official)
- 请禁用 Vetur 扩展以避免冲突
推荐浏览器扩展
Chromium 浏览器 (Chrome, Edge, Brave 等)
Firefox
代码规范
- 使用 Vue 3 Composition API
- 遵循 Vue 官方风格指南
- 组件命名使用 PascalCase
- 文件命名使用 PascalCase (组件) 或 camelCase (工具)
添加新工具
- 在
src/views/创建工具组件 - 在
src/router/index.js添加路由 - 在
AllToolsView.vue添加工具卡片 - 在管理后台添加工具配置
🎨 设计特色
视觉设计
- 现代化 UI: 采用清新的设计风格
- 流畅动画: 精心设计的过渡效果
- 响应式布局: 完美适配各种设备
- 深色模式: 护眼的暗色主题
交互设计
- 回到顶部: 滚动超过 200px 自动显示
- 平滑滚动: 所有页面跳转使用平滑滚动
- 悬停效果: 丰富的鼠标悬停反馈
- 加载状态: 清晰的加载和错误提示
📝 配置说明
Vite 配置
查看 Vite 配置参考 了解更多配置选项。
环境变量
在项目根目录创建 .env 文件：
VITE_API_BASE_URL=your_api_url
VITE_APP_TITLE=Zkit
🤝 贡献指南
欢迎提交 Issue 和 Pull Request！
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启 Pull Request
📄 许可证
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情
📧 联系方式
如有问题或建议，欢迎通过以下方式联系：
- 提交 Issue
- 发送邮件
用 ❤️ 构建