From 4c16e5c0c9f7529cf88f808d035b8e3e75b3b603 Mon Sep 17 00:00:00 2001
From: walkpan <panfudan0209@qq.com>
Date: Sun, 29 Mar 2026 22:02:23 +0800
Subject: [PATCH] feat: dashboard and devices list pages with cards, toggle,
 and add device modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/src/components/AddDeviceModal.vue | 65 +++++++++++++++++
 frontend/src/components/DeviceCard.vue     | 78 ++++++++++++++++++++
 frontend/src/components/StatsCard.vue      | 24 ++++++
 frontend/src/views/DashboardView.vue       | 85 +++++++++++++++++++++-
 frontend/src/views/DevicesView.vue         | 39 +++++++++-
 5 files changed, 289 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/AddDeviceModal.vue
 create mode 100644 frontend/src/components/DeviceCard.vue
 create mode 100644 frontend/src/components/StatsCard.vue

diff --git a/frontend/src/components/AddDeviceModal.vue b/frontend/src/components/AddDeviceModal.vue
new file mode 100644
index 0000000..a148953
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/DeviceCard.vue b/frontend/src/components/DeviceCard.vue
new file mode 100644
index 0000000..6c5ef0e
--- /dev/null
+++ b/frontend/src/components/DeviceCard.vue
@@ -0,0 +1,78 @@
+<template>
+  <div
+    class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 hover:shadow-md transition-shadow cursor-pointer"
+    @click="$router.push(`/devices/${device.id}`)"
+  >
+    <div class="flex items-start justify-between mb-3">
+      <div class="flex items-center gap-2">
+        <span
+          class="w-2.5 h-2.5 rounded-full"
+          :class="device.is_online ? 'bg-green-500' : 'bg-gray-300'"
+        ></span>
+        <span class="text-sm font-medium text-gray-900 truncate max-w-[160px]">{{ device.name }}</span>
+      </div>
+      <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ device.type }}</span>
+    </div>
+    <div class="text-xs text-gray-500 space-y-1">
+      <div class="flex justify-between">
+        <span>状态</span>
+        <span class="font-medium" :class="device.state ? 'text-gray-900' : 'text-gray-400'">
+          {{ displayState || '未知' }}
+        </span>
+      </div>
+      <div class="flex justify-between">
+        <span>协议</span>
+        <span>{{ device.protocol === 'ha_discovery' ? 'HA' : '自定义' }}</span>
+      </div>
+    </div>
+    <button
+      v-if="device.command_topic && canToggle"
+      class="mt-3 w-full py-1.5 text-sm font-medium rounded-lg transition-colors"
+      :class="isOn ? 'bg-primary-600 text-white hover:bg-primary-700' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
+      @click.stop="toggle"
+    >
+      {{ isOn ? '关闭' : '开启' }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useDeviceStore } from '../stores/devices'
+
+const props = defineProps({
+  device: { type: Object, required: true },
+})
+
+const store = useDeviceStore()
+
+const canToggle = computed(() => ['switch', 'light'].includes(props.device.type))
+
+const isOn = computed(() => {
+  try {
+    const s = JSON.parse(props.device.state || '{}')
+    return s.state === 'ON' || s.state === 'on' || s.state === 'true'
+  } catch {
+    return props.device.state === 'ON' || props.device.state === 'on'
+  }
+})
+
+const displayState = computed(() => {
+  if (!props.device.state) return null
+  try {
+    const s = JSON.parse(props.device.state)
+    return s.state || props.device.state
+  } catch {
+    return props.device.state
+  }
+})
+
+async function toggle() {
+  const newState = isOn.value ? 'off' : 'on'
+  try {
+    await store.sendCommand(props.device.id, JSON.stringify({ state: newState }))
+  } catch {
+    // silent fail, WebSocket will update state
+  }
+}
+</script>
diff --git a/frontend/src/components/StatsCard.vue b/frontend/src/components/StatsCard.vue
new file mode 100644
index 0000000..6fbdbae
--- /dev/null
+++ b/frontend/src/components/StatsCard.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
+    <div class="flex items-center justify-between">
+      <div>
+        <p class="text-sm text-gray-500">{{ label }}</p>
+        <p class="mt-1 text-3xl font-semibold" :class="color">{{ value }}</p>
+      </div>
+      <div class="w-12 h-12 rounded-lg flex items-center justify-center" :class="bgColor">
+        <component :is="icon" class="w-6 h-6" :class="iconColor" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  label: { type: String, required: true },
+  value: { type: [Number, String], required: true },
+  icon: { type: Object, required: true },
+  color: { type: String, default: 'text-gray-900' },
+  bgColor: { type: String, default: 'bg-gray-100' },
+  iconColor: { type: String, default: 'text-gray-600' },
+})
+</script>
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index 5a928f7..0e88f45 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -1 +1,84 @@
-<template><div>Dashboard</div></template>
+<template>
+  <div>
+    <h2 class="text-2xl font-bold text-gray-900 mb-6">仪表盘</h2>
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+      <StatsCard
+        label="设备总数"
+        :value="stats.total_devices"
+        :icon="CpuChipIcon"
+        color="text-gray-900"
+        bg-color="bg-gray-100"
+        icon-color="text-gray-600"
+      />
+      <StatsCard
+        label="在线设备"
+        :value="stats.online_devices"
+        :icon="WifiIcon"
+        color="text-green-600"
+        bg-color="bg-green-50"
+        icon-color="text-green-500"
+      />
+      <StatsCard
+        label="离线设备"
+        :value="stats.offline_devices"
+        :icon="SignalSlashIcon"
+        color="text-red-600"
+        bg-color="bg-red-50"
+        icon-color="text-red-500"
+      />
+    </div>
+
+    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
+      <h3 class="text-lg font-semibold text-gray-900 mb-4">最近活动</h3>
+      <div v-if="stats.recent_logs.length === 0" class="text-gray-400 text-sm">
+        暂无活动
+      </div>
+      <div v-else class="space-y-2">
+        <div
+          v-for="log in stats.recent_logs"
+          :key="log.id"
+          class="flex items-center gap-3 text-sm py-1.5 border-b border-gray-100 last:border-0"
+        >
+          <span
+            class="px-2 py-0.5 rounded text-xs font-medium"
+            :class="log.direction === 'rx' ? 'bg-blue-50 text-blue-700' : 'bg-orange-50 text-orange-700'"
+          >
+            {{ log.direction === 'rx' ? '接收' : '发送' }}
+          </span>
+          <span class="text-gray-500 font-mono text-xs truncate max-w-[200px]">{{ log.topic }}</span>
+          <span class="text-gray-700 truncate flex-1">{{ log.payload }}</span>
+          <span class="text-gray-400 text-xs whitespace-nowrap">{{ formatTime(log.timestamp) }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { getDashboardStats } from '../api'
+import StatsCard from '../components/StatsCard.vue'
+import { CpuChipIcon, WifiIcon, SignalSlashIcon } from '@heroicons/vue/24/outline'
+
+const stats = ref({
+  total_devices: 0,
+  online_devices: 0,
+  offline_devices: 0,
+  recent_logs: [],
+})
+
+function formatTime(ts) {
+  if (!ts) return ''
+  const d = new Date(ts)
+  return d.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+}
+
+onMounted(async () => {
+  try {
+    stats.value = await getDashboardStats()
+  } catch {
+    // silently fail
+  }
+})
+</script>
diff --git a/frontend/src/views/DevicesView.vue b/frontend/src/views/DevicesView.vue
index 10003c3..cf09042 100644
--- a/frontend/src/views/DevicesView.vue
+++ b/frontend/src/views/DevicesView.vue
@@ -1 +1,38 @@
-<template><div>Devices</div></template>
+<template>
+  <div>
+    <div class="flex items-center justify-between mb-6">
+      <h2 class="text-2xl font-bold text-gray-900">设备管理</h2>
+      <button
+        @click="showAdd = true"
+        class="px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700"
+      >
+        + 添加设备
+      </button>
+    </div>
+
+    <div v-if="store.loading" class="text-gray-400">加载中...</div>
+
+    <div v-else-if="store.devices.length === 0" class="text-center py-16 text-gray-400">
+      <p>暂无设备</p>
+      <p class="text-sm mt-1">点击"添加设备"手动注册，或通过 HA Discovery 自动发现</p>
+    </div>
+
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+      <DeviceCard v-for="device in store.devices" :key="device.id" :device="device" />
+    </div>
+
+    <AddDeviceModal :show="showAdd" @close="showAdd = false" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useDeviceStore } from '../stores/devices'
+import DeviceCard from '../components/DeviceCard.vue'
+import AddDeviceModal from '../components/AddDeviceModal.vue'
+
+const store = useDeviceStore()
+const showAdd = ref(false)
+
+onMounted(() => store.fetchDevices())
+</script>