feat(aiot): 添加应用名下拉选择功能，支持选择已有或输入新名称

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, watch } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { Page } from '@vben/common-ui';
@@ -84,6 +84,26 @@ const editForm = reactive<Partial<AiotDeviceApi.Camera>>({
   ffmpegCmdKey: '',
 });
 
+// 从已有摄像头中提取应用名选项
+const appOptions = computed(() => {
+  // 统计每个应用名下的摄像头数量
+  const appCounts = new Map<string, number>();
+  cameraList.value.forEach((cam) => {
+    if (cam.app) {
+      appCounts.set(cam.app, (appCounts.get(cam.app) || 0) + 1);
+    }
+  });
+
+  // 转换为选项数组，按摄像头数量降序排序
+  return Array.from(appCounts.entries())
+    .map(([app, count]) => ({
+      label: `${app} (${count}个)`,
+      value: app,
+      count,
+    }))
+    .sort((a, b) => b.count - a.count);
+});
+
 // ==================== 数据加载 ====================
 
 async function loadData() {
@@ -486,12 +506,16 @@ onMounted(() => {
           <Input :value="editForm.cameraCode" disabled />
         </Form.Item>
         <Form.Item label="应用名" required>
-          <Input
+          <Select
             v-model:value="editForm.app"
-            placeholder="场景分类，如：大堂、停车场、入口"
+            placeholder="选择已有场景或输入新场景名"
+            mode="tags"
+            :max-tag-count="1"
+            show-search
+            :options="appOptions"
           />
           <div style="margin-top: 4px; font-size: 12px; color: #999">
-            场景名称，同一场景下可有多个摄像头（可修改）
+            场景名称，同一场景下可有多个摄像头（可选择已有或输入新名称）
           </div>
         </Form.Item>
         <Form.Item label="流ID" required>