From dc71da002e92ae82bfa7447b434ba0e7ecfdb866 Mon Sep 17 00:00:00 2001
From: 16337 <1633794139@qq.com>
Date: Wed, 25 Feb 2026 13:27:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(aiot):=20=E6=91=84=E5=83=8F=E5=A4=B4?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=20-=20=E5=BA=94=E7=94=A8=E5=90=8D=E5=9C=BA?=
 =?UTF-8?q?=E6=99=AF=E5=8C=96=E5=92=8C=E6=B5=81ID=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E7=BC=96=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 应用名提示优化："场景分类，如：大堂、停车场、入口"
- 流ID提示优化："在当前场景下的唯一标识，如：001（系统会自动编号）"
- 新增摄像头时，流ID自动填充为场景下的顺序编号（001, 002, 003...）
- 监听应用名变化，动态更新流ID编号
- 自动编号逻辑：查找当前场景下已用的纯数字编号，填充下一个可用编号
- 用户可手动修改自动填充的编号（支持语义化命名）

实现：
- autoFillStreamId() 函数：根据应用名计算下一个可用编号
- watch监听 editForm.app 变化，触发自动编号
- handleAdd() 时自动填充流ID

示例：
- 应用名=大堂，已有001、002 → 自动填充003
- 应用名=停车场，首次创建 → 自动填充001
- 用户可修改为语义化名称：B1_entrance
---
 .../src/views/aiot/device/camera/index.vue    | 54 +++++++++++++++++--
 1 file changed, 51 insertions(+), 3 deletions(-)

diff --git a/apps/web-antd/src/views/aiot/device/camera/index.vue b/apps/web-antd/src/views/aiot/device/camera/index.vue
index e1b967f6f..c42f2055d 100644
--- a/apps/web-antd/src/views/aiot/device/camera/index.vue
+++ b/apps/web-antd/src/views/aiot/device/camera/index.vue
@@ -7,7 +7,7 @@
  */
 import type { AiotDeviceApi } from '#/api/aiot/device';
 
-import { onMounted, reactive, ref } from 'vue';
+import { onMounted, reactive, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { Page } from '@vben/common-ui';
@@ -157,11 +157,45 @@ function resetForm() {
   });
 }
 
+/**
+ * 自动填充流ID编号
+ * 根据当前应用名，自动计算下一个可用的编号
+ */
+function autoFillStreamId() {
+  const app = editForm.app;
+  if (!app || editForm.id) return; // 编辑模式不自动填充
+
+  // 过滤出同一应用下的摄像头
+  const sameAppCameras = cameraList.value.filter((c) => c.app === app);
+
+  // 获取已用的纯数字编号
+  const usedNumbers = sameAppCameras
+    .map((c) => c.stream)
+    .filter((s) => /^\d+$/.test(s))
+    .map((s) => parseInt(s, 10))
+    .sort((a, b) => a - b);
+
+  // 找到第一个未使用的编号
+  let nextNum = 1;
+  for (const num of usedNumbers) {
+    if (num === nextNum) {
+      nextNum++;
+    } else {
+      break;
+    }
+  }
+
+  // 自动填充（3位数字，前导零）
+  editForm.stream = String(nextNum).padStart(3, '0');
+}
+
 function handleAdd() {
   resetForm();
   editModalTitle.value = '添加摄像头';
   editModalOpen.value = true;
   loadMediaServers();
+  // 自动填充流ID
+  autoFillStreamId();
 }
 
 function handleEdit(row: AiotDeviceApi.Camera) {
@@ -311,6 +345,14 @@ function handlePageChange(p: number, size: number) {
 
 // ==================== 初始化 ====================
 
+// 监听应用名变化，自动填充流ID
+watch(
+  () => editForm.app,
+  () => {
+    autoFillStreamId();
+  },
+);
+
 onMounted(() => {
   loadData();
 });
@@ -446,16 +488,22 @@ onMounted(() => {
         <Form.Item label="应用名" required>
           <Input
             v-model:value="editForm.app"
-            placeholder="如: live、大堂、停车场等"
+            placeholder="场景分类，如：大堂、停车场、入口"
             :disabled="!!editForm.id"
           />
+          <div style="margin-top: 4px; font-size: 12px; color: #999">
+            场景名称，同一场景下可有多个摄像头
+          </div>
         </Form.Item>
         <Form.Item label="流ID" required>
           <Input
             v-model:value="editForm.stream"
-            placeholder="唯一标识，如: camera01"
+            placeholder="在当前场景下的唯一标识，如：001（系统会自动编号）"
             :disabled="!!editForm.id"
           />
+          <div style="margin-top: 4px; font-size: 12px; color: #999">
+            在当前场景下唯一，系统会根据应用名自动编号
+          </div>
         </Form.Item>
         <Form.Item label="拉流地址" required>
           <Input