182 lines
3.3 KiB
Markdown
182 lines
3.3 KiB
Markdown
# 🌐 MosDNS Web 管理界面 - Vue 版本
|
||
|
||
> 基于 Vue 3 + Element Plus 的现代化 DNS 管理界面
|
||
|
||
---
|
||
|
||
## ⚡ 快速开始
|
||
|
||
### 第一次使用
|
||
|
||
```bash
|
||
# 1. 一键构建（Windows）
|
||
.\build-vue.bat
|
||
|
||
# 2. 启动服务
|
||
.\dist\mosdns-vue.exe start -c config.yaml
|
||
|
||
# 3. 访问界面
|
||
浏览器打开: http://localhost:5555
|
||
```
|
||
|
||
**就这么简单！** 🎉
|
||
|
||
---
|
||
|
||
## 📸 界面预览
|
||
|
||
### 现代化的 Element Plus UI
|
||
- ✨ 美观的卡片式布局
|
||
- 📊 直观的数据展示
|
||
- 🎨 专业的配色方案
|
||
- 📱 完美的响应式设计
|
||
|
||
### 主要功能
|
||
|
||
**1. 仪表板** - 一览服务状态
|
||
- 运行状态、运行时间
|
||
- DNS 端口识别
|
||
- 查询统计
|
||
- 快速操作（刷新、清空缓存、重启）
|
||
|
||
**2. MikroTik 管理** - 轻松配置
|
||
- 可视化配置列表
|
||
- 表单化添加配置
|
||
- 字段验证提示
|
||
- 一键删除
|
||
|
||
**3. 域名文件** - 在线编辑
|
||
- 文件列表展示
|
||
- 在线查看编辑
|
||
- 文件信息统计
|
||
|
||
---
|
||
|
||
## 🚀 开发模式
|
||
|
||
**优势：** 修改代码后自动热重载，无需重新编译！
|
||
|
||
```bash
|
||
# 终端 1: Go 后端
|
||
go run main.go start -c config.yaml
|
||
|
||
# 终端 2: Vue 开发服务器
|
||
cd web-ui
|
||
npm run dev
|
||
|
||
# 访问: http://localhost:5173
|
||
```
|
||
|
||
---
|
||
|
||
## 📦 技术栈
|
||
|
||
- **Vue 3** - 渐进式 JavaScript 框架
|
||
- **Element Plus** - Vue 3 UI 组件库
|
||
- **TypeScript** - 类型安全
|
||
- **Pinia** - 状态管理
|
||
- **Vite** - 极速构建工具
|
||
|
||
---
|
||
|
||
## 📚 完整文档
|
||
|
||
详细使用说明请查看：
|
||
- [`Vue版本使用指南.md`](./Vue版本使用指南.md) - 完整教程
|
||
- [`Vue重构完成总结.md`](./Vue重构完成总结.md) - 技术细节
|
||
|
||
---
|
||
|
||
## 🆚 对比原生版本
|
||
|
||
| 特性 | 原生 JS | Vue 版本 |
|
||
|------|---------|----------|
|
||
| 开发效率 | ⭐⭐ | ⭐⭐⭐⭐⭐ |
|
||
| 代码维护 | ⭐⭐ | ⭐⭐⭐⭐⭐ |
|
||
| 类型安全 | ❌ | ✅ TypeScript |
|
||
| 热重载 | ❌ | ✅ 秒级更新 |
|
||
| 组件复用 | ❌ | ✅ Element Plus |
|
||
| 开发工具 | 基础 | Vue DevTools |
|
||
|
||
---
|
||
|
||
## 💡 为什么选择 Vue 版本？
|
||
|
||
### 开发体验 ⬆️ 500%
|
||
|
||
**原生版本：**
|
||
```javascript
|
||
document.getElementById('list').innerHTML = html // 手动 DOM
|
||
```
|
||
|
||
**Vue 版本：**
|
||
```vue
|
||
<el-table :data="configs"> <!-- 数据驱动 -->
|
||
```
|
||
|
||
### 维护成本 ⬇️ 70%
|
||
|
||
- 组件化开发，代码更清晰
|
||
- TypeScript 类型检查，减少 bug
|
||
- Pinia 状态管理，逻辑集中
|
||
|
||
### 扩展性 ⬆️ 无限
|
||
|
||
- 丰富的 Element Plus 组件库
|
||
- 成熟的 Vue 生态系统
|
||
- 活跃的社区支持
|
||
|
||
---
|
||
|
||
## 🔧 系统要求
|
||
|
||
### 开发环境
|
||
- Node.js 16+
|
||
- Go 1.21+
|
||
|
||
### 生产环境
|
||
- 只需要 Go 编译后的可执行文件
|
||
- **用户无需安装 Node.js**
|
||
|
||
---
|
||
|
||
## 📂 项目结构
|
||
|
||
```
|
||
mosdns/
|
||
├── web-ui/ # Vue 3 项目
|
||
│ ├── src/
|
||
│ │ ├── api/ # API 封装
|
||
│ │ ├── stores/ # 状态管理
|
||
│ │ ├── views/ # 页面组件
|
||
│ │ └── router/ # 路由配置
|
||
│ └── dist/ # 构建产物
|
||
├── coremain/
|
||
│ └── web_ui.go # Go 后端（Vue 版）
|
||
└── build-vue.bat # 一键构建脚本
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 立即体验
|
||
|
||
```bash
|
||
# 克隆项目（如果还没有）
|
||
cd D:\Golang\yltx-dns\mosdns
|
||
|
||
# 构建
|
||
.\build-vue.bat
|
||
|
||
# 运行
|
||
.\dist\mosdns-vue.exe start -c config.yaml
|
||
|
||
# 享受现代化的管理界面！
|
||
```
|
||
|
||
访问 **http://localhost:5555** 🚀
|
||
|
||
---
|
||
|
||
**Made with ❤️ using Vue 3 + Element Plus**
|
||
|