mosdns/README-VUE.md

🌐 MosDNS Web 管理界面 - Vue 版本

基于 Vue 3 + Element Plus 的现代化 DNS 管理界面

---

⚡ 快速开始

第一次使用

# 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. 域名文件 - 在线编辑

• 文件列表展示
• 在线查看编辑
• 文件信息统计

---

🚀 开发模式

优势： 修改代码后自动热重载，无需重新编译！

# 终端 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 - 技术细节

---

🆚 对比原生版本

特性	原生 JS	Vue 版本
开发效率	⭐⭐	⭐⭐⭐⭐⭐
代码维护	⭐⭐	⭐⭐⭐⭐⭐
类型安全	❌	✅ TypeScript
热重载	❌	✅ 秒级更新
组件复用	❌	✅ Element Plus
开发工具	基础	Vue DevTools

---

💡 为什么选择 Vue 版本？

开发体验 ⬆️ 500%

原生版本：

document.getElementById('list').innerHTML = html  // 手动 DOM

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       # 一键构建脚本

---

🎯 立即体验

# 克隆项目（如果还没有）
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