From 830ea626c9046ddfc5314ab291ae490d8467053d Mon Sep 17 00:00:00 2001
From: huangping <huangping@craftlabs.cn>
Date: Mon, 25 May 2026 01:06:28 +0800
Subject: [PATCH] feat(web): add M8 todo center and notification settings pages

---
 web/delivery-platform-ui/src/router/index.js  |  12 ++
 .../src/views/NotificationSettingsView.vue    | 131 ++++++++++++
 .../src/views/TodoCenterView.vue              | 200 ++++++++++++++++++
 3 files changed, 343 insertions(+)
 create mode 100644 web/delivery-platform-ui/src/views/NotificationSettingsView.vue
 create mode 100644 web/delivery-platform-ui/src/views/TodoCenterView.vue

diff --git a/web/delivery-platform-ui/src/router/index.js b/web/delivery-platform-ui/src/router/index.js
index cfe4cb5..ac5be2d 100644
--- a/web/delivery-platform-ui/src/router/index.js
+++ b/web/delivery-platform-ui/src/router/index.js
@@ -128,6 +128,18 @@ const routes = [
         component: () => import("../views/DeviceListView.vue"),
         meta: { roles: ["SYS_ADMIN", "DEVELOPER", "OPS"], title: "设备管理" },
       },
+      {
+        path: "todos",
+        name: "todos",
+        component: () => import("../views/TodoCenterView.vue"),
+        meta: { roles: ["SYS_ADMIN", "DEVELOPER", "OPS"], title: "待办中心" },
+      },
+      {
+        path: "notifications/settings",
+        name: "notification-settings",
+        component: () => import("../views/NotificationSettingsView.vue"),
+        meta: { roles: ["SYS_ADMIN"], title: "通知设置" },
+      },
     ],
   },
   { path: "/403", name: "forbidden", component: () => import("../views/ForbiddenView.vue") },
diff --git a/web/delivery-platform-ui/src/views/NotificationSettingsView.vue b/web/delivery-platform-ui/src/views/NotificationSettingsView.vue
new file mode 100644
index 0000000..bdbdb02
--- /dev/null
+++ b/web/delivery-platform-ui/src/views/NotificationSettingsView.vue
@@ -0,0 +1,131 @@
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="toolbar">
+        <span class="title">通知设置</span>
+        <div class="actions">
+          <el-button type="primary" :loading="saving" @click="handleSave">保存配置</el-button>
+        </div>
+      </div>
+    </template>
+
+    <el-form label-position="top" style="max-width: 800px">
+      <el-divider content-position="left">通知通道</el-divider>
+      <el-checkbox-group v-model="channels" :disabled="loading">
+        <el-checkbox value="IN_APP" checked disabled>站内待办</el-checkbox>
+        <el-checkbox value="EMAIL" disabled>
+          邮件
+          <el-tooltip content="邮件通道将在后续版本支持" placement="top">
+            <el-icon style="margin-left: 4px"><WarningFilled /></el-icon>
+          </el-tooltip>
+        </el-checkbox>
+        <el-checkbox value="WECOM" disabled>
+          企业微信
+          <el-tooltip content="企业微信通道将在后续版本支持" placement="top">
+            <el-icon style="margin-left: 4px"><WarningFilled /></el-icon>
+          </el-tooltip>
+        </el-checkbox>
+      </el-checkbox-group>
+
+      <el-divider content-position="left">事件订阅</el-divider>
+      <el-table v-loading="loading" :data="subscriptions" stripe style="width: 100%">
+        <el-table-column prop="eventType" label="事件类型" min-width="160" />
+        <el-table-column prop="roleCode" label="角色" width="140" />
+        <el-table-column label="站内通知" width="120">
+          <template #default="{ row, $index }">
+            <el-switch v-model="row.channelInApp" @change="onSwitchChange($index)" />
+          </template>
+        </el-table-column>
+        <el-table-column label="聚合策略" width="160">
+          <template #default="{ row }">
+            <el-select v-model="row.aggregationRule" placeholder="选择策略" style="width: 130px">
+              <el-option label="即时" value="INSTANT" />
+              <el-option label="按小时聚合" value="HOURLY" />
+              <el-option label="按天聚合" value="DAILY" />
+            </el-select>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-form>
+  </el-card>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ElMessage } from "element-plus";
+import { WarningFilled } from "@element-plus/icons-vue";
+import { useAuthStore } from "../stores/auth";
+import { getNotificationConfig, updateNotificationConfig } from "../api/platform";
+import { apiErrorMessage } from "../utils/apiErrorMessage";
+
+const auth = useAuthStore();
+
+const loading = ref(false);
+const saving = ref(false);
+const channels = ref(["IN_APP"]);
+const subscriptions = ref([]);
+
+onMounted(async () => {
+  auth.restoreAxiosAuth();
+  await loadConfig();
+});
+
+async function loadConfig() {
+  loading.value = true;
+  try {
+    const { data } = await getNotificationConfig({});
+    const body = data && typeof data === "object" ? data : {};
+    subscriptions.value = Array.isArray(body.subscriptions) ? body.subscriptions : [];
+    if (Array.isArray(body.channels)) {
+      channels.value = body.channels;
+    }
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "加载通知配置失败"));
+    subscriptions.value = [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+function onSwitchChange(index) {
+  if (!subscriptions.value[index]) return;
+}
+
+async function handleSave() {
+  saving.value = true;
+  try {
+    await updateNotificationConfig({
+      channels: channels.value,
+      subscriptions: subscriptions.value,
+    });
+    ElMessage.success("配置已保存");
+  } 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;
+}
+.el-checkbox {
+  margin-right: 20px;
+}
+</style>
diff --git a/web/delivery-platform-ui/src/views/TodoCenterView.vue b/web/delivery-platform-ui/src/views/TodoCenterView.vue
new file mode 100644
index 0000000..f9a5b73
--- /dev/null
+++ b/web/delivery-platform-ui/src/views/TodoCenterView.vue
@@ -0,0 +1,200 @@
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="toolbar">
+        <span class="title">待办中心</span>
+        <div class="actions">
+          <el-select v-model="filterType" clearable placeholder="待办类型" class="filter" style="width: 160px">
+            <el-option label="全部" value="" />
+            <el-option label="Callback" value="CALLBACK" />
+            <el-option label="SN 发放" value="SN_GRANT" />
+            <el-option label="激活超期" value="ACTIVATION_OVERDUE" />
+            <el-option label="换机审批" value="SWAP_APPROVAL" />
+          </el-select>
+          <el-button type="primary" :loading="loading" @click="handleQuery">查询</el-button>
+        </div>
+      </div>
+    </template>
+
+    <el-table v-loading="loading" :data="rows" stripe style="width: 100%">
+      <el-table-column label="待办类型" width="140">
+        <template #default="{ row }">
+          <el-tag :type="todoTypeTagType(row.todoType)" size="small">
+            {{ todoTypeLabel(row.todoType) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
+      <el-table-column label="优先级" width="100">
+        <template #default="{ row }">
+          <el-tag :type="priorityTagType(row.priority)" size="small">
+            {{ priorityLabel(row.priority) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" width="170">
+        <template #default="{ row }">{{ formatTime(row.createdAt) }}</template>
+      </el-table-column>
+      <el-table-column label="操作" width="160" fixed="right">
+        <template #default="{ row }">
+          <el-button type="primary" link :loading="claimingId === row.id" @click="handleClaim(row.id)">认领</el-button>
+          <el-button type="danger" link :loading="ignoringId === row.id" @click="handleIgnore(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-card>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ElMessage } from "element-plus";
+import { useAuthStore } from "../stores/auth";
+import { listTodos, patchTodoStatus } from "../api/platform";
+import { apiErrorMessage } from "../utils/apiErrorMessage";
+
+const auth = useAuthStore();
+
+const loading = ref(false);
+const rows = ref([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(10);
+const filterType = ref("");
+const claimingId = ref(null);
+const ignoringId = ref(null);
+
+onMounted(async () => {
+  auth.restoreAxiosAuth();
+  await load();
+});
+
+function handleQuery() {
+  page.value = 1;
+  load();
+}
+
+function onSizeChange() {
+  page.value = 1;
+  load();
+}
+
+function todoTypeLabel(s) {
+  const map = {
+    CALLBACK: "Callback",
+    SN_GRANT: "SN 发放",
+    ACTIVATION_OVERDUE: "激活超期",
+    SWAP_APPROVAL: "换机审批",
+  };
+  return map[s] ?? String(s ?? "—");
+}
+
+function todoTypeTagType(s) {
+  if (s === "CALLBACK") return "warning";
+  if (s === "SN_GRANT") return "primary";
+  if (s === "ACTIVATION_OVERDUE") return "danger";
+  if (s === "SWAP_APPROVAL") return "";
+  return "";
+}
+
+function priorityLabel(s) {
+  const map = { HIGH: "HIGH", MEDIUM: "MEDIUM", LOW: "LOW" };
+  return map[s] ?? String(s ?? "—");
+}
+
+function priorityTagType(s) {
+  if (s === "HIGH") return "danger";
+  if (s === "MEDIUM") return "warning";
+  if (s === "LOW") 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 load() {
+  loading.value = true;
+  try {
+    const { data } = await listTodos({
+      page: page.value - 1,
+      size: pageSize.value,
+      todoType: filterType.value || 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;
+  }
+}
+
+async function handleClaim(id) {
+  claimingId.value = id;
+  try {
+    await patchTodoStatus(id, { status: "PROCESSED" });
+    ElMessage.success("已认领");
+    await load();
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "认领失败"));
+  } finally {
+    claimingId.value = null;
+  }
+}
+
+async function handleIgnore(id) {
+  ignoringId.value = id;
+  try {
+    await patchTodoStatus(id, { status: "IGNORED" });
+    ElMessage.success("已忽略");
+    await load();
+  } catch (e) {
+    ElMessage.error(apiErrorMessage(e, "忽略失败"));
+  } finally {
+    ignoringId.value = null;
+  }
+}
+</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;
+}
+.pager {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>