4c16e5c0c9
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
66 lines
2.9 KiB
Vue
66 lines
2.9 KiB
Vue
<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>
|