From 0bdd88ba9cd2233ecc422f3aa0c3324cbb0c932b Mon Sep 17 00:00:00 2001
From: QiuSW <105186638@qq.com>
Date: Wed, 12 Aug 2026 10:56:07 +0800
Subject: [PATCH] feat: align Bell prototype with go-admin-ui (#31)
---
prototypes/README.md | 11 +-
prototypes/assets/app.js | 30 +--
.../sense.js => assets/go-admin-shell.js} | 20 +-
prototypes/assets/go-admin-ui.css | 182 ++++++++++++++++++
prototypes/bell/bell.css | 33 ++++
prototypes/bell/index.html | 130 ++++++++++---
prototypes/sense/go-admin-ui.css | 181 -----------------
prototypes/sense/index.html | 8 +-
8 files changed, 350 insertions(+), 245 deletions(-)
rename prototypes/{sense/sense.js => assets/go-admin-shell.js} (65%)
create mode 100644 prototypes/assets/go-admin-ui.css
create mode 100644 prototypes/bell/bell.css
delete mode 100644 prototypes/sense/go-admin-ui.css
diff --git a/prototypes/README.md b/prototypes/README.md
index 7f5604c..2051fdf 100644
--- a/prototypes/README.md
+++ b/prototypes/README.md
@@ -16,8 +16,8 @@ python -m http.server 4173 --directory prototypes
- `sense/index.html`：设备接入、ONVIF/RTSP、MediaMTX、实时监看和区域配置；直接映射 go-admin-ui 与 Element Plus 的通用管理端组件。
- `brain/index.html`：合成输入到项目内匿名事件的内部流水线；Brain 无客户管理 UI。
-- `bell/index.html`：合成事件、不可变 Event、规则/Alert、ack/close 和审计时间线。
-- `assets/`：三套原型复用的样式和交互脚本。
+- `bell/index.html`：合成事件、不可变 Event、规则/Alert、ack/close 和审计时间线；直接映射 go-admin-ui 与 Element Plus 的通用管理端组件。
+- `assets/`：三套原型复用的基础样式和交互脚本；Sense/Bell 共同复用 go-admin-ui 原型外壳适配器。
- `design-system/yovision/MASTER.md`：由 UI/UX Pro Max 生成的设计系统基线。
## 交互提示
@@ -28,13 +28,16 @@ python -m http.server 4173 --directory prototypes
- Bell 可注入合成事件，并演示 Alert 的 ack 和 close。
- 所有弹窗支持 `Esc` 关闭，交互元素支持键盘焦点。
-## Sense 的 go-admin-ui 对齐基线
+## Sense / Bell 的 go-admin-ui 对齐基线
- 只读参考仓库：`D:\github\goadmin\go-admin-ui`。
- 参考 commit：`67d393d713877572fab0b897296a4c1d525fc81d`。
- 应用外壳映射：`Sidebar`、`Navbar`、`TagsView`、`AppMain` 和 `BasicLayout` / 页面容器。
- 通用组件映射：Element Plus 的 Button、Form、Input/Select、Table、Pagination、Dialog 和 Tag，以及 go-admin-ui 的搜索区与 `v-permisaction` 权限按钮模式。
-- Sense 专用组件：视频舞台 `SenseVideoStage` 与区域画布 `SenseZoneCanvas`；正式实现前先确认 go-admin-ui 内没有等价组件。
+- 共用原型适配器：`assets/go-admin-ui.css` 与 `assets/go-admin-shell.js`；两套产品不复制应用外壳和通用组件原型代码。
+- Sense 专用组件：视频舞台 `SenseVideoStage` 与区域画布 `SenseZoneCanvas`。
+- Bell 专用组件：值班处置工作台 `AlertWorkbench` 与审计时间线 `AlertAuditTimeline`。
+- 新增专用组件前必须先确认 go-admin-ui / Element Plus 中没有等价组件。
- 原型仍是无构建依赖的 HTML/CSS/JavaScript，并未嵌入或复制 go-admin-ui / Element Plus 源码；这些名称用于约束正式 Vue 实现的组件落点。
## 事实来源边界
diff --git a/prototypes/assets/app.js b/prototypes/assets/app.js
index edcb6b3..82561d0 100644
--- a/prototypes/assets/app.js
+++ b/prototypes/assets/app.js
@@ -148,14 +148,16 @@
});
qs("[data-action='inject-event']")?.addEventListener("click", (event) => {
- event.currentTarget.disabled = true;
- event.currentTarget.textContent = "注入中…";
+ const button = event.currentTarget;
+ const idleText = button.textContent;
+ button.disabled = true;
+ button.textContent = "注入中…";
window.setTimeout(() => {
const count = qs("[data-alert-count]");
if (count) count.textContent = String(Number(count.textContent) + 1);
- event.currentTarget.disabled = false;
- event.currentTarget.textContent = "注入合成事件";
- closeModal(event.currentTarget.closest(".modal-backdrop"));
+ button.disabled = false;
+ button.textContent = idleText;
+ closeModal(button.closest(".modal-backdrop"));
toast("合成事件已校验并生成新的 Alert");
}, 520);
});
@@ -165,7 +167,7 @@
const closeButton = qs("[data-action='close-alert']");
ackButton?.addEventListener("click", () => {
alertState.textContent = "已确认";
- alertState.className = "status status-warning";
+ alertState.className = "status status-warning el-tag";
ackButton.disabled = true;
closeButton.disabled = false;
const timeline = qs("[data-alert-timeline]");
@@ -174,7 +176,7 @@
});
closeButton?.addEventListener("click", () => {
alertState.textContent = "已关闭";
- alertState.className = "status status-success";
+ alertState.className = "status status-success el-tag";
closeButton.disabled = true;
qs("[data-alert-timeline]")?.insertAdjacentHTML("beforeend", `处置完成并关闭
刚刚 · 原始 Event 保持不变
-