ai-status-light-web/src/views/BleConfig.vue

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { message, Modal } from 'ant-design-vue'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { getBleList, createBle, updateBle, deleteBle } from '@/api/ble'
import type { BleConfig, BleConfigForm } from '@/types'

const loading = ref(false)
const list = ref<BleConfig[]>([])
const modalVisible = ref(false)
const editingId = ref<number | null>(null)
const isMobile = ref(window.innerWidth < 768)

const form = reactive<BleConfigForm>({
  device_name: 'AI-Light',
  service_uuid: 'b8b7e001-7a6b-4f4f-9a8b-11c0ffee0001',
  char_uuid: 'b8b7e002-7a6b-4f4f-9a8b-11c0ffee0001',
  enabled: true,
})

const columns = [
  { title: 'ID', dataIndex: 'id', width: 60 },
  { title: '设备名称', dataIndex: 'device_name', width: 120 },
  { title: 'Service UUID', dataIndex: 'service_uuid', ellipsis: true },
  { title: 'Characteristic UUID', dataIndex: 'char_uuid', ellipsis: true },
  { title: '启用', dataIndex: 'enabled', width: 80, key: 'enabled' },
  { title: '操作', key: 'actions', width: 140 },
]

async function fetchList() {
  loading.value = true
  try {
    const res = await getBleList()
    list.value = res.data.data || []
  } catch {
  } finally {
    loading.value = false
  }
}

function openModal(record?: BleConfig) {
  if (record) {
    editingId.value = record.id
    form.device_name = record.device_name
    form.service_uuid = record.service_uuid
    form.char_uuid = record.char_uuid
    form.enabled = record.enabled
  } else {
    editingId.value = null
    form.device_name = 'AI-Light'
    form.service_uuid = 'b8b7e001-7a6b-4f4f-9a8b-11c0ffee0001'
    form.char_uuid = 'b8b7e002-7a6b-4f4f-9a8b-11c0ffee0001'
    form.enabled = true
  }
  modalVisible.value = true
}

async function onSubmit() {
  if (!form.device_name) {
    message.warning('请填写设备名称')
    return
  }
  if (!form.service_uuid) {
    message.warning('请填写 Service UUID')
    return
  }
  if (!form.char_uuid) {
    message.warning('请填写 Characteristic UUID')
    return
  }
  try {
    if (editingId.value !== null) {
      await updateBle(editingId.value, { ...form })
      message.success('更新成功')
    } else {
      await createBle({ ...form })
      message.success('创建成功')
    }
    modalVisible.value = false
    fetchList()
  } catch {}
}

function onDelete(record: BleConfig) {
  Modal.confirm({
    title: '确认删除',
    content: `确定删除 BLE 配置 #${record.id}（${record.device_name}）？`,
    okType: 'danger',
    async onOk() {
      try {
        await deleteBle(record.id)
        message.success('删除成功')
        fetchList()
      } catch {}
    },
  })
}

function onResize() {
  isMobile.value = window.innerWidth < 768
}

onMounted(() => {
  fetchList()
  window.addEventListener('resize', onResize)
})
onUnmounted(() => window.removeEventListener('resize', onResize))
</script>

<template>
  <div class="ble-page">
    <div class="page-header">
      <span>BLE 配置管理</span>
      <a-button type="primary" @click="openModal()">
        <PlusOutlined /> 新建配置
      </a-button>
    </div>

    <a-table
      :columns="columns"
      :data-source="list"
      :loading="loading"
      row-key="id"
      :pagination="false"
      :scroll="isMobile ? { x: 600 } : undefined"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'enabled'">
          <a-badge :status="record.enabled ? 'success' : 'default'" :text="record.enabled ? '启用' : '禁用'" />
        </template>
        <template v-if="column.key === 'actions'">
          <a-space>
            <a-button type="link" size="small" @click="openModal(record)">
              <EditOutlined /> 编辑
            </a-button>
            <a-button type="link" size="small" danger @click="onDelete(record)">
              <DeleteOutlined /> 删除
            </a-button>
          </a-space>
        </template>
      </template>
    </a-table>

    <a-modal
      :title="editingId !== null ? '编辑 BLE 配置' : '新建 BLE 配置'"
      :open="modalVisible"
      @cancel="modalVisible = false"
      :width="480"
      @ok="onSubmit"
      :ok-text="editingId !== null ? '更新' : '创建'"
      cancel-text="取消"
    >
      <a-form layout="vertical">
        <a-form-item label="设备名称" required>
          <a-input v-model:value="form.device_name" placeholder="AI-Light" />
        </a-form-item>
        <a-form-item label="Service UUID" required>
          <a-input v-model:value="form.service_uuid" placeholder="b8b7e001-7a6b-4f4f-9a8b-11c0ffee0001" />
        </a-form-item>
        <a-form-item label="Characteristic UUID" required>
          <a-input v-model:value="form.char_uuid" placeholder="b8b7e002-7a6b-4f4f-9a8b-11c0ffee0001" />
        </a-form-item>
        <a-form-item label="启用">
          <a-switch v-model:checked="form.enabled" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped>
.ble-page {
  color: var(--text-color);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 767px) {
  .page-header {
    margin-bottom: 16px;
    font-size: 14px;
  }
}
</style>