# 🌐 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**