Web 控制端 (Smart-Home-MQTT-Control) 是一个现代化的单页面应用 (SPA)，为用户提供了通过浏览器远程监控和管理智能家居系统的能力。它与嵌入式主控终端通过 MQTT 协议进行实时、双向的通信。
技术栈
根据项目的文件结构 (vite.config.ts, main.ts 等)，可以确定其技术栈如下：
- 核心框架: Vue.js (从构建工具和文件结构看，应为 Vue 3)
- 开发语言: TypeScript
- 构建工具: Vite
- 通信协议: MQTT (通过 WebSocket 连接)
核心功能
Web 端的核心功能都集中在一个统一的仪表盘界面中，主要包括：
- MQTT 连接管理: 提供 UI 界面，用于配置并连接到 MQTT Broker。
- 灯光控制: 实时显示所有灯光的状态，并提供单独开关、一键全开/全关和刷新状态的功能。
- 警报系统控制: 显示和控制安防警报系统的开启与关闭状态。
- 文件管理: 能够列出嵌入式设备上的文件，并提供了文件上传的交互界面。
- 实时日志: 显示所有收发的 MQTT 消息，方便调试和监控。
项目结构
该项目是一个标准的 Vite + Vue + TS 项目，结构简洁清晰：
src/main.ts: 应用程序的入口文件。src/App.vue: Vue 应用的根组件。src/components/MqttDemo.vue: 核心业务组件，几乎所有的 UI 和业务逻辑都在这个组件内实现。