feat: dashboard and devices list pages with cards, toggle, and add device modal

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/components/AddDeviceModal.vue

@@ -0,0 +1,65 @@
+<template>
+  <div v-if="show" class="fixed inset-0 bg-black/40 flex items-center justify-center z-50" @click.self="$emit('close')">
+    <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4 p-6">
+      <h3 class="text-lg font-semibold text-gray-900 mb-4">添加设备</h3>
+      <form @submit.prevent="submit" class="space-y-4">
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">设备名称</label>
+          <input v-model="form.name" type="text" required class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500" />
+        </div>
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">设备类型</label>
+          <select v-model="form.type" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
+            <option value="switch">Switch 开关</option>
+            <option value="light">Light 灯光</option>
+            <option value="sensor">Sensor 传感器</option>
+            <option value="binary_sensor">Binary Sensor</option>
+            <option value="climate">Climate 温控</option>
+          </select>
+        </div>
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">状态主题 (State Topic)</label>
+          <input v-model="form.mqtt_topic" type="text" required placeholder="home/living/light" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500" />
+        </div>
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">命令主题 (Command Topic)</label>
+          <input v-model="form.command_topic" type="text" placeholder="home/living/light/set" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500" />
+        </div>
+        <div class="flex justify-end gap-3 pt-2">
+          <button type="button" @click="$emit('close')" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200">取消</button>
+          <button type="submit" :disabled="submitting" class="px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 disabled:opacity-50">添加</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { useDeviceStore } from '../stores/devices'
+
+defineProps({ show: { type: Boolean, default: false } })
+defineEmits(['close'])
+
+const store = useDeviceStore()
+const submitting = ref(false)
+
+const form = reactive({
+  name: '',
+  type: 'switch',
+  mqtt_topic: '',
+  command_topic: '',
+})
+
+async function submit() {
+  submitting.value = true
+  try {
+    await store.addDevice(form)
+    form.name = ''
+    form.mqtt_topic = ''
+    form.command_topic = ''
+  } finally {
+    submitting.value = false
+  }
+}
+</script>