From 54e0f8a054a6a8045f3c1a2ee5f83624bc603e29 Mon Sep 17 00:00:00 2001
From: huangping <huangping@craftlabs.cn>
Date: Mon, 25 May 2026 01:05:38 +0800
Subject: [PATCH] feat(web): add M7 device list and detail pages

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 web/delivery-platform-ui/src/router/index.js  |  12 +
 .../src/views/DeviceDetailView.vue            | 219 ++++++++++++++++
 .../src/views/DeviceListView.vue              | 236 ++++++++++++++++++
 3 files changed, 467 insertions(+)
 create mode 100644 web/delivery-platform-ui/src/views/DeviceDetailView.vue
 create mode 100644 web/delivery-platform-ui/src/views/DeviceListView.vue

diff --git a/web/delivery-platform-ui/src/router/index.js b/web/delivery-platform-ui/src/router/index.js
index 9ed4f30..cfe4cb5 100644
--- a/web/delivery-platform-ui/src/router/index.js
+++ b/web/delivery-platform-ui/src/router/index.js
@@ -116,6 +116,18 @@ const routes = [
         component: () => import("../views/LicenseList.vue"),
         meta: { roles: ["SYS_ADMIN", "DEVELOPER"], title: "许可证管理" },
       },
+      {
+        path: "devices/:id",
+        name: "device-detail",
+        component: () => import("../views/DeviceDetailView.vue"),
+        meta: { roles: ["SYS_ADMIN", "DEVELOPER", "OPS"], title: "设备详情" },
+      },
+      {
+        path: "devices",
+        name: "devices",
+        component: () => import("../views/DeviceListView.vue"),
+        meta: { roles: ["SYS_ADMIN", "DEVELOPER", "OPS"], title: "设备管理" },
+      },
     ],
   },
   { path: "/403", name: "forbidden", component: () => import("../views/ForbiddenView.vue") },
diff --git a/web/delivery-platform-ui/src/views/DeviceDetailView.vue b/web/delivery-platform-ui/src/views/DeviceDetailView.vue
new file mode 100644
index 0000000..fcadc31
--- /dev/null
+++ b/web/delivery-platform-ui/src/views/DeviceDetailView.vue
@@ -0,0 +1,219 @@
+<template>
+  <el-card v-loading="loading" shadow="never">
+    <template #header>
+      <div class="toolbar">
+        <div class="head-left">
+          <router-link :to="{ name: 'devices' }" class="back-link">← 设备列表</router-link>
+          <span class="title">设备详情</span>
+          <el-tag v-if="device" :type="statusTagType(device.status)" size="small">
+            {{ statusLabel(device.status) }}
+          </el-tag>
+        </div>
+        <div v-if="device" class="head-actions">
+          <el-button type="primary" @click="openSwapDialog">发起换机申请</el-button>
+        </div>
+      </div>
+    </template>
+
+    <template v-if="device">
+      <el-descriptions :column="2" border class="block">
+        <el-descriptions-item label="MID">{{ device.mid ?? "—" }}</el-descriptions-item>
+        <el-descriptions-item label="设备别名">{{ device.alias ?? "—" }}</el-descriptions-item>
+        <el-descriptions-item label="站点">{{ device.site ?? "—" }}</el-descriptions-item>
+        <el-descriptions-item label="状态">
+          <el-tag :type="statusTagType(device.status)" size="small">
+            {{ statusLabel(device.status) }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="首次发现时间">{{ formatTime(device.firstSeenAt) }}</el-descriptions-item>
+        <el-descriptions-item label="最近心跳时间">{{ formatTime(device.lastHeartbeatAt) }}</el-descriptions-item>
+      </el-descriptions>
+
+      <h3 class="section-title">SN 绑定时间线</h3>
+      <el-table :data="bindingRows" border stripe style="width: 100%">
+        <el-table-column prop="bindTypeLabel" label="绑定类型" min-width="120" />
+        <el-table-column prop="licenseSnId" label="许可 SN ID" min-width="160" show-overflow-tooltip />
+        <el-table-column label="绑定时间" width="180">
+          <template #default="{ row }">{{ formatTime(row.bindAt) }}</template>
+        </el-table-column>
+        <el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip />
+      </el-table>
+    </template>
+
+    <el-empty v-else-if="!loading" description="未加载到设备数据" />
+
+    <el-dialog v-model="swapDialogVisible" title="发起换机申请" width="480px" destroy-on-close @closed="resetSwapForm">
+      <el-form ref="swapFormRef" :model="swapForm" :rules="swapRules" label-width="120px">
+        <el-form-item label="新设备 MID" prop="newMid">
+          <el-input v-model="swapForm.newMid" maxlength="200" placeholder="请输入新设备 MID" />
+        </el-form-item>
+        <el-form-item label="换机原因" prop="reason">
+          <el-input v-model="swapForm.reason" maxlength="500" placeholder="选填" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="swapForm.remark" maxlength="500" placeholder="选填" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="swapDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="swapSaving" @click="handleSwap">提交</el-button>
+      </template>
+    </el-dialog>
+  </el-card>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+import { useAuthStore } from "../stores/auth";
+import { getDevice, getDeviceBindings, createDeviceSwapRequest } from "../api/platform";
+import { apiErrorMessage } from "../utils/apiErrorMessage";
+
+const auth = useAuthStore();
+const route = useRoute();
+
+const loading = ref(false);
+const device = ref(null);
+const bindingRows = ref([]);
+
+const swapDialogVisible = ref(false);
+const swapSaving = ref(false);
+const swapFormRef = ref(null);
+const swapForm = ref({ newMid: "", reason: "", remark: "" });
+const swapRules = {
+  newMid: [{ required: true, message: "请输入新设备 MID", trigger: "blur" }],
+};
+
+const deviceId = computed(() => route.params.id);
+
+onMounted(async () => {
+  auth.restoreAxiosAuth();
+  await loadDevice();
+  await loadBindings();
+});
+
+function statusLabel(s) {
+  if (s == null || s === "") return "—";
+  const u = String(s).toUpperCase();
+  const map = {
+    ACTIVE: "ACTIVE",
+    INACTIVE: "INACTIVE",
+    DECOMMISSIONED: "DECOMMISSIONED",
+  };
+  return map[u] ?? String(s);
+}
+
+function statusTagType(s) {
+  const u = String(s ?? "").toUpperCase();
+  if (u === "ACTIVE") return "success";
+  if (u === "INACTIVE") return "warning";
+  if (u === "DECOMMISSIONED") return "info";
+  return "";
+}
+
+function formatTime(v) {
+  if (v == null) return "—";
+  if (typeof v === "string") return v.replace("T", " ").slice(0, 19);
+  return String(v);
+}
+
+async function loadDevice() {
+  const id = deviceId.value;
+  if (id == null || id === "") return;
+  loading.value = true;
+  try {
+    const { data } = await getDevice(id);
+    device.value = data && typeof data === "object" ? data : null;
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "加载设备失败"));
+    device.value = null;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function loadBindings() {
+  const id = deviceId.value;
+  if (id == null || id === "") return;
+  try {
+    const { data } = await getDeviceBindings(id);
+    const raw = Array.isArray(data) ? data : Array.isArray(data?.content) ? data.content : [];
+    bindingRows.value = raw;
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "加载绑定记录失败"));
+    bindingRows.value = [];
+  }
+}
+
+function openSwapDialog() {
+  swapForm.value = { newMid: "", reason: "", remark: "" };
+  swapDialogVisible.value = true;
+}
+
+function resetSwapForm() {
+  swapForm.value = { newMid: "", reason: "", remark: "" };
+  swapFormRef.value?.resetFields?.();
+}
+
+async function handleSwap() {
+  const f = swapFormRef.value;
+  if (!f) return;
+  try {
+    await f.validate();
+  } catch {
+    return;
+  }
+  swapSaving.value = true;
+  const payload = {
+    newMid: swapForm.value.newMid.trim(),
+    reason: swapForm.value.reason?.trim() || undefined,
+    remark: swapForm.value.remark?.trim() || undefined,
+  };
+  try {
+    await createDeviceSwapRequest(deviceId.value, payload);
+    ElMessage.success("换机申请已提交");
+    swapDialogVisible.value = false;
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "提交失败"));
+  } finally {
+    swapSaving.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.head-left {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+.title {
+  font-weight: 600;
+  font-size: 16px;
+}
+.back-link {
+  color: var(--el-color-primary);
+  text-decoration: none;
+  font-size: 14px;
+}
+.back-link:hover {
+  text-decoration: underline;
+}
+.block {
+  margin-bottom: 20px;
+}
+.section-title {
+  margin: 20px 0 12px;
+  font-size: 15px;
+  font-weight: 600;
+}
+</style>
diff --git a/web/delivery-platform-ui/src/views/DeviceListView.vue b/web/delivery-platform-ui/src/views/DeviceListView.vue
new file mode 100644
index 0000000..a145e4a
--- /dev/null
+++ b/web/delivery-platform-ui/src/views/DeviceListView.vue
@@ -0,0 +1,236 @@
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="toolbar">
+        <span class="title">设备管理</span>
+        <div class="actions">
+          <el-input
+            v-model="keyword"
+            clearable
+            placeholder="按站点搜索"
+            class="search"
+            @keyup.enter="handleQuery"
+          />
+          <el-button type="primary" :loading="loading" @click="handleQuery">查询</el-button>
+          <el-button type="success" @click="openCreate">登记设备</el-button>
+        </div>
+      </div>
+    </template>
+
+    <el-table v-loading="loading" :data="rows" stripe style="width: 100%">
+      <el-table-column prop="mid" label="MID" min-width="160" show-overflow-tooltip />
+      <el-table-column prop="alias" label="设备别名" min-width="160" show-overflow-tooltip />
+      <el-table-column prop="site" label="站点" min-width="140" show-overflow-tooltip />
+      <el-table-column label="状态" width="140">
+        <template #default="{ row }">
+          <el-tag :type="statusTagType(row.status)" size="small">
+            {{ statusLabel(row.status) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="最近心跳" width="180">
+        <template #default="{ row }">
+          {{ formatTime(row.lastHeartbeatAt) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="100" fixed="right">
+        <template #default="{ row }">
+          <el-button type="primary" link @click="goDetail(row.id)">详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pager">
+      <el-pagination
+        v-model:current-page="page"
+        v-model:page-size="pageSize"
+        :total="total"
+        :page-sizes="[10, 20, 50]"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        @current-change="load"
+        @size-change="onSizeChange"
+      />
+    </div>
+
+    <el-dialog v-model="dialogVisible" title="登记设备" width="480px" destroy-on-close @closed="resetForm">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="MID" prop="mid">
+          <el-input v-model="form.mid" maxlength="200" placeholder="请输入设备 MID" />
+        </el-form-item>
+        <el-form-item label="设备别名" prop="alias">
+          <el-input v-model="form.alias" maxlength="200" clearable placeholder="选填" />
+        </el-form-item>
+        <el-form-item label="站点" prop="site">
+          <el-input v-model="form.site" maxlength="200" clearable placeholder="选填" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="handleCreate">保存</el-button>
+      </template>
+    </el-dialog>
+  </el-card>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import { useAuthStore } from "../stores/auth";
+import { listDevices, createDevice } from "../api/platform";
+import { apiErrorMessage } from "../utils/apiErrorMessage";
+
+const auth = useAuthStore();
+const router = useRouter();
+
+const loading = ref(false);
+const saving = ref(false);
+const rows = ref([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(10);
+const keyword = ref("");
+
+const dialogVisible = ref(false);
+const formRef = ref(null);
+const form = reactive({
+  mid: "",
+  alias: "",
+  site: "",
+});
+
+const rules = {
+  mid: [{ required: true, message: "请输入设备 MID", trigger: "blur" }],
+};
+
+onMounted(() => {
+  auth.restoreAxiosAuth();
+  load();
+});
+
+function statusLabel(s) {
+  if (s == null || s === "") return "—";
+  const u = String(s).toUpperCase();
+  const map = {
+    ACTIVE: "ACTIVE",
+    INACTIVE: "INACTIVE",
+    DECOMMISSIONED: "DECOMMISSIONED",
+  };
+  return map[u] ?? String(s);
+}
+
+function statusTagType(s) {
+  const u = String(s ?? "").toUpperCase();
+  if (u === "ACTIVE") return "success";
+  if (u === "INACTIVE") return "warning";
+  if (u === "DECOMMISSIONED") return "info";
+  return "";
+}
+
+function formatTime(v) {
+  if (v == null) return "—";
+  if (typeof v === "string") return v.replace("T", " ").slice(0, 19);
+  return String(v);
+}
+
+function handleQuery() {
+  page.value = 1;
+  load();
+}
+
+function onSizeChange() {
+  page.value = 1;
+  load();
+}
+
+async function load() {
+  loading.value = true;
+  try {
+    const { data } = await listDevices({
+      page: page.value - 1,
+      size: pageSize.value,
+      keyword: keyword.value?.trim() || undefined,
+    });
+    const body = data && typeof data === "object" ? data : {};
+    rows.value = Array.isArray(body.content) ? body.content : [];
+    total.value = Number(body.totalElements ?? body.total ?? 0);
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "加载设备列表失败"));
+    rows.value = [];
+    total.value = 0;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function goDetail(id) {
+  router.push({ name: "device-detail", params: { id } });
+}
+
+function openCreate() {
+  resetForm();
+  dialogVisible.value = true;
+}
+
+function resetForm() {
+  form.mid = "";
+  form.alias = "";
+  form.site = "";
+  formRef.value?.resetFields?.();
+}
+
+async function handleCreate() {
+  const f = formRef.value;
+  if (!f) return;
+  try {
+    await f.validate();
+  } catch {
+    return;
+  }
+  saving.value = true;
+  const payload = {
+    mid: form.mid.trim(),
+    alias: form.alias?.trim() || undefined,
+    site: form.site?.trim() || undefined,
+  };
+  try {
+    await createDevice(payload);
+    ElMessage.success("设备已登记");
+    dialogVisible.value = false;
+    await load();
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "登记失败"));
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.title {
+  font-weight: 600;
+  font-size: 16px;
+}
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+.search {
+  width: 240px;
+}
+.pager {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>