改造: 全局参数配置页面支持按设备查看和修改 ROI 绑定参数

device_id 现在由后端从摄像头配置自动继承，前端不再需要手动选择。

apps/web-antd/src/api/aiot/device/index.ts

@@ -86,6 +86,7 @@ export namespace AiotDeviceApi {
     description?: string;
     isActive?: boolean;
     paramSchema?: string;
+    globalParams?: string;
   }
 
   /** 媒体服务器 */
@@ -231,9 +232,26 @@ export async function getSnapUrl(cameraCode: string, force = false): Promise<str
 // ==================== 算法管理 ====================
 
 /** 算法列表 */
-export function getAlgorithmList() {
+export function getAlgorithmList(deviceId?: string) {
   return wvpRequestClient.get<AiotDeviceApi.Algorithm[]>(
     '/aiot/device/algorithm/list',
+    { params: deviceId ? { deviceId } : {} },
+  );
+}
+
+/** 保存算法全局参数 */
+export function saveAlgoGlobalParams(algoCode: string, globalParams: string) {
+  return wvpRequestClient.post(
+    `/aiot/device/algorithm/global-params/${algoCode}`,
+    { globalParams },
+  );
+}
+
+/** 批量更新设备算法参数 */
+export function updateDeviceAlgoParams(deviceId: string, algoCode: string, params: string) {
+  return wvpRequestClient.post(
+    `/aiot/device/algorithm/device-binds/${deviceId}/${algoCode}`,
+    { params },
   );
 }
 

apps/web-antd/src/views/aiot/alarm/list/data.ts

@@ -9,6 +9,7 @@ export const ALERT_TYPE_OPTIONS = [
   { label: '周界入侵', value: 'intrusion' },
   { label: '车辆违停', value: 'illegal_parking' },
   { label: '车辆拥堵', value: 'vehicle_congestion' },
+  { label: '非机动车违停', value: 'non_motor_vehicle_parking' },
 ];
 
 /** 告警状态选项 */

apps/web-antd/src/views/aiot/alarm/list/index.vue

@@ -6,10 +6,14 @@ import { h, ref } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
-import { Button, Image, message, Modal, Tag } from 'ant-design-vue';
+import { Image, message, Modal, Tag } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getAlert, getAlertPage, handleAlert } from '#/api/aiot/alarm';
+import {
+  getAlert,
+  getAlertPage,
+  handleAlert,
+} from '#/api/aiot/alarm';
 
 import {
   ALERT_LEVEL_OPTIONS,
@@ -62,6 +66,9 @@ function getAlertTypeColor(type?: string) {
     fire_detection: 'volcano',
     smoke_detection: 'magenta',
     fall_detection: 'cyan',
+    illegal_parking: 'blue',
+    vehicle_congestion: 'geekblue',
+    non_motor_vehicle_parking: 'green',
   };
   return type ? colorMap[type] || 'default' : 'default';
 }
@@ -117,37 +124,61 @@ async function handleView(row: AiotAlarmApi.Alert) {
   }
 }
 
-/** 处理告警 */
-async function handleProcess(row: AiotAlarmApi.Alert, status: string) {
-  const statusText = status === 'handled' ? '处理' : '忽略';
-  Modal.confirm({
-    title: `${statusText}告警`,
-    content: h('div', [
-      h('p', `确定要${statusText}该告警吗？`),
-      h('p', { class: 'text-gray-500 text-sm' }, `告警编号：${row.alertNo}`),
-      h('textarea', {
-        id: 'processRemark',
-        class: 'ant-input mt-2',
-        rows: 3,
-        placeholder: '请输入处理备注（可选）',
-      }),
-    ]),
-    async onOk() {
-      const textarea = document.querySelector(
-        '#processRemark',
-      ) as HTMLTextAreaElement;
-      const remark = textarea?.value || '';
+/** 处理告警 — "处理"弹窗（支持备注） */
+const handleModalVisible = ref(false);
+const handleModalRow = ref<AiotAlarmApi.Alert | null>(null);
+const handleRemark = ref('');
+const handleSubmitting = ref(false);
 
+function openHandleModal(row: AiotAlarmApi.Alert) {
+  handleModalRow.value = row;
+  handleRemark.value = '';
+  handleModalVisible.value = true;
+}
+
+async function submitHandle() {
+  const row = handleModalRow.value;
+  if (!row) return;
+
+  handleSubmitting.value = true;
+  try {
+    await handleAlert(
+      row.alarmId || row.id!,
+      'handled',
+      handleRemark.value || undefined,
+    );
+    message.success('处理成功');
+    handleModalVisible.value = false;
+    handleRefresh();
+  } catch (error) {
+    console.error('处理失败:', error);
+    message.error('处理失败');
+  } finally {
+    handleSubmitting.value = false;
+  }
+}
+
+/** 处理告警 — "误报"确认弹窗 */
+function handleFalseAlarm(row: AiotAlarmApi.Alert) {
+  Modal.confirm({
+    title: '标记误报',
+    content: h('div', [
+      h('p', '确定要将该告警标记为误报吗？'),
+      h('p', { class: 'text-gray-500 text-sm' }, `告警编号：${row.alertNo}`),
+    ]),
+    okText: '确定',
+    cancelText: '取消',
+    async onOk() {
       const hideLoading = message.loading({
         content: '正在处理...',
         duration: 0,
       });
       try {
-        await handleAlert(row.alarmId || row.id!, status, remark);
-        message.success(`${statusText}成功`);
+        await handleAlert(row.alarmId || row.id!, 'ignored');
+        message.success('已标记为误报');
         handleRefresh();
       } catch (error) {
-        console.error(`${statusText}失败:`, error);
+        console.error('标记误报失败:', error);
         throw error;
       } finally {
         hideLoading();
@@ -272,15 +303,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: '处理',
               type: 'link',
               icon: ACTION_ICON.EDIT,
-              onClick: handleProcess.bind(null, row, 'handled'),
-              ifShow: row.status === 'pending',
+              onClick: openHandleModal.bind(null, row),
+              ifShow: row.status === 'pending' || row.status === 'processing',
             },
             {
-              label: '忽略',
+              label: '误报',
               type: 'link',
               danger: true,
-              onClick: handleProcess.bind(null, row, 'ignored'),
-              ifShow: row.status === 'pending',
+              onClick: handleFalseAlarm.bind(null, row),
+              ifShow: row.status === 'pending' || row.status === 'processing',
             },
           ]"
         />
@@ -409,5 +440,30 @@ const [Grid, gridApi] = useVbenVxeGrid({
         </div>
       </div>
     </Modal>
+
+    <!-- 处理告警弹窗 -->
+    <Modal
+      v-model:open="handleModalVisible"
+      title="处理告警"
+      :confirm-loading="handleSubmitting"
+      ok-text="确认处理"
+      cancel-text="取消"
+      @ok="submitHandle"
+    >
+      <div v-if="handleModalRow" class="space-y-4">
+        <div class="text-gray-500 text-sm">
+          告警编号：{{ handleModalRow.alertNo }}
+        </div>
+        <div>
+          <div class="mb-1 text-sm">处理备注</div>
+          <textarea
+            v-model="handleRemark"
+            class="ant-input w-full"
+            :rows="3"
+            placeholder="请输入处理备注（可选）"
+          />
+        </div>
+      </div>
+    </Modal>
   </Page>
 </template>

apps/web-antd/src/views/aiot/device/algorithm/index.vue

@@ -0,0 +1,480 @@
+<script setup lang="ts">
+import type { AiotDeviceApi } from '#/api/aiot/device';
+import type { AiotEdgeApi } from '#/api/aiot/edge';
+
+import { computed, onMounted, ref } from 'vue';
+
+import {
+  Button,
+  Card,
+  Form,
+  InputNumber,
+  message,
+  Select,
+  SelectOption,
+  Spin,
+  Tabs,
+} from 'ant-design-vue';
+
+import {
+  getAlgorithmList,
+  saveAlgoGlobalParams,
+  updateDeviceAlgoParams,
+} from '#/api/aiot/device';
+import { getDeviceList } from '#/api/aiot/edge';
+
+// 参数名中英文映射（与 AlgorithmParamEditor 保持一致）
+const paramNameMap: Record<string, string> = {
+  leave_countdown_sec: '离岗倒计时(秒)',
+  working_hours: '工作时间段',
+  cooldown_seconds: '告警冷却期(秒)',
+  confirm_seconds: '确认时间(秒)',
+  confirm_intrusion_seconds: '入侵确认时间(秒)',
+  confirm_clear_seconds: '消失确认时间(秒)',
+  min_confidence: '最小置信度',
+  max_targets: '最大目标数',
+  detection_interval: '检测间隔(秒)',
+  enable_tracking: '启用跟踪',
+  tracking_timeout: '跟踪超时(秒)',
+  confirm_vehicle_sec: '车辆确认时间(秒)',
+  parking_countdown_sec: '违停倒计时(秒)',
+  confirm_clear_sec: '消失确认时间(秒)',
+  cooldown_sec: '告警冷却期(秒)',
+  count_threshold: '车辆数量阈值',
+  confirm_congestion_sec: '拥堵确认时间(秒)',
+};
+
+// 参数说明映射
+const paramDescMap: Record<string, string> = {
+  leave_countdown_sec: '人员离开后，倒计时多少秒才触发离岗告警',
+  working_hours: '仅在指定时间段内进行监控，留空表示24小时监控',
+  cooldown_seconds: '触发告警后，多少秒内不再重复告警（用于周界入侵等算法）',
+  confirm_seconds: '持续检测到人达到该时间后触发告警',
+  confirm_intrusion_seconds: '入侵确认：持续检测到人达到该时间后触发告警',
+  confirm_clear_seconds: '消失确认：持续无人达到该时间后自动结束告警',
+  confirm_vehicle_sec: '确认车辆停留的时间，超过该时间开始违停倒计时',
+  parking_countdown_sec: '确认有车后的违停等待时间，超过该时间触发违停告警',
+  confirm_clear_sec: '车辆离开后，持续无车达到该时间后自动结束告警',
+  cooldown_sec: '触发告警后，多少秒内不再重复告警',
+  count_threshold: '区域内车辆数量达到该值时判定为拥堵',
+  confirm_congestion_sec: '车辆数持续超过阈值达到该时间后触发拥堵告警',
+};
+
+// ==================== 设备选择器 ====================
+const selectedDeviceId = ref<string>('');
+const deviceList = ref<AiotEdgeApi.Device[]>([]);
+
+const isDeviceMode = computed(() => selectedDeviceId.value !== '');
+
+const saveButtonText = computed(() => {
+  if (!isDeviceMode.value) return '保存全局默认';
+  const device = deviceList.value.find(
+    (d) => d.deviceId === selectedDeviceId.value,
+  );
+  const name = device?.deviceName || device?.deviceId || selectedDeviceId.value;
+  return `保存到 ${name}`;
+});
+
+// ==================== 算法数据 ====================
+const algorithms = ref<AiotDeviceApi.Algorithm[]>([]);
+const activeTab = ref<string>('');
+const loading = ref(false);
+const saving = ref(false);
+
+// 每个算法的表单数据: { algoCode: { paramKey: value } }
+const formDataMap = ref<Record<string, Record<string, any>>>({});
+// 记录用户修改过的字段
+const dirtyFieldsMap = ref<Record<string, Set<string>>>({});
+
+const currentAlgo = computed(() => {
+  return algorithms.value.find((a) => a.algoCode === activeTab.value);
+});
+
+const currentSchema = computed(() => {
+  const algo = currentAlgo.value;
+  if (!algo?.paramSchema) return {};
+  try {
+    return JSON.parse(algo.paramSchema);
+  } catch {
+    return {};
+  }
+});
+
+const currentFormData = computed(() => {
+  return formDataMap.value[activeTab.value] || {};
+});
+
+function getParamLabel(key: string): string {
+  return paramNameMap[key] || key;
+}
+
+function getParamDesc(key: string): string | undefined {
+  return paramDescMap[key];
+}
+
+onMounted(async () => {
+  await Promise.all([loadDevices(), loadAlgorithms()]);
+});
+
+async function loadDevices() {
+  try {
+    const list = await getDeviceList();
+    deviceList.value = Array.isArray(list) ? list : [];
+  } catch {
+    deviceList.value = [];
+  }
+}
+
+async function onDeviceChange() {
+  await loadAlgorithms();
+}
+
+async function loadAlgorithms() {
+  loading.value = true;
+  try {
+    const deviceId = selectedDeviceId.value || undefined;
+    const data = await getAlgorithmList(deviceId);
+    algorithms.value = Array.isArray(data) ? data : [];
+    if (algorithms.value.length > 0) {
+      // 保持当前 tab，如果不存在则切到第一个
+      const codes = algorithms.value.map((a) => a.algoCode);
+      if (!codes.includes(activeTab.value)) {
+        activeTab.value = algorithms.value[0]!.algoCode || '';
+      }
+      // 初始化所有算法的表单数据
+      for (const algo of algorithms.value) {
+        initFormData(algo);
+      }
+    } else {
+      activeTab.value = '';
+    }
+  } catch {
+    message.error('加载算法列表失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+function initFormData(algo: AiotDeviceApi.Algorithm) {
+  const code = algo.algoCode || '';
+  let schema: Record<string, any> = {};
+  let globalParams: Record<string, any> = {};
+
+  try {
+    schema = JSON.parse(algo.paramSchema || '{}');
+  } catch { /* empty */ }
+  try {
+    globalParams = JSON.parse(algo.globalParams || '{}');
+  } catch { /* empty */ }
+
+  const form: Record<string, any> = {};
+  for (const key of Object.keys(schema)) {
+    // 优先用已保存的 globalParams 值，否则用 schema default
+    if (globalParams[key] !== undefined) {
+      form[key] = globalParams[key];
+    } else {
+      form[key] = schema[key]?.type === 'list'
+        ? (schema[key]?.default || [])
+        : schema[key]?.default;
+    }
+  }
+  formDataMap.value[code] = form;
+  dirtyFieldsMap.value[code] = new Set();
+}
+
+function onFieldChange(key: string) {
+  const code = activeTab.value;
+  if (!dirtyFieldsMap.value[code]) {
+    dirtyFieldsMap.value[code] = new Set();
+  }
+  dirtyFieldsMap.value[code]!.add(key);
+}
+
+function getSchemaDefault(key: string): any {
+  return currentSchema.value[key]?.default;
+}
+
+function isModified(key: string): boolean {
+  const form = currentFormData.value;
+  const defaultVal = getSchemaDefault(key);
+  return form[key] !== defaultVal;
+}
+
+async function handleSave() {
+  const algo = currentAlgo.value;
+  if (!algo?.algoCode) return;
+
+  saving.value = true;
+  try {
+    const form = currentFormData.value;
+    const schema = currentSchema.value;
+
+    // 只保存与 paramSchema default 不同的字段
+    const toSave: Record<string, any> = {};
+    for (const key of Object.keys(schema)) {
+      const defaultVal = schema[key]?.default;
+      if (form[key] !== defaultVal) {
+        toSave[key] = form[key];
+      }
+    }
+
+    if (isDeviceMode.value) {
+      // 设备模式：保存到设备绑定
+      await updateDeviceAlgoParams(
+        selectedDeviceId.value,
+        algo.algoCode,
+        JSON.stringify(toSave),
+      );
+      message.success('设备参数保存成功');
+    } else {
+      // 全局模式：保存全局参数
+      await saveAlgoGlobalParams(algo.algoCode, JSON.stringify(toSave));
+      message.success('全局参数保存成功');
+    }
+    // 更新本地算法数据
+    algo.globalParams = JSON.stringify(toSave);
+    dirtyFieldsMap.value[algo.algoCode] = new Set();
+  } catch (err: any) {
+    const errorMsg =
+      err?.response?.data?.msg ||
+      err?.response?.data?.message ||
+      err?.message ||
+      '保存失败';
+    message.error(errorMsg);
+  } finally {
+    saving.value = false;
+  }
+}
+
+function resetToDefault(key: string) {
+  const code = activeTab.value;
+  const defaultVal = getSchemaDefault(key);
+  if (formDataMap.value[code]) {
+    formDataMap.value[code]![key] = defaultVal;
+    onFieldChange(key);
+  }
+}
+
+/** 判断字段是否为不适合在全局配置中编辑的类型 */
+function isSkippedField(key: string, schema: any): boolean {
+  // working_hours 和 list 类型在全局配置中跳过（场景差异大，不适合全局设置）
+  return key === 'working_hours' || schema.type === 'list';
+}
+</script>
+
+<template>
+  <div class="algo-global-config">
+    <Card title="算法参数配置">
+      <template #extra>
+        <div class="card-extra">
+          <Select
+            v-model:value="selectedDeviceId"
+            style="width: 240px"
+            placeholder="选择设备"
+            @change="onDeviceChange"
+          >
+            <SelectOption value="">全局默认</SelectOption>
+            <SelectOption
+              v-for="d in deviceList"
+              :key="d.deviceId"
+              :value="d.deviceId"
+            >
+              {{ d.deviceName || d.deviceId }}
+            </SelectOption>
+          </Select>
+        </div>
+      </template>
+
+      <Spin :spinning="loading">
+        <div v-if="algorithms.length === 0 && !loading" class="empty-state">
+          暂无可用算法
+        </div>
+
+        <Tabs
+          v-if="algorithms.length > 0"
+          v-model:activeKey="activeTab"
+          type="card"
+        >
+          <Tabs.TabPane
+            v-for="algo in algorithms"
+            :key="algo.algoCode"
+            :tab="algo.algoName || algo.algoCode"
+          >
+            <div class="algo-desc" v-if="algo.description">
+              {{ algo.description }}
+            </div>
+
+            <Form
+              layout="horizontal"
+              :label-col="{ span: 6 }"
+              :wrapper-col="{ span: 14 }"
+              class="param-form"
+            >
+              <template
+                v-for="(schema, key) in currentSchema"
+                :key="key"
+              >
+                <Form.Item
+                  v-if="!isSkippedField(String(key), schema)"
+                  :label="getParamLabel(String(key))"
+                >
+                  <!-- 整数类型 -->
+                  <template v-if="schema.type === 'int'">
+                    <div class="field-row">
+                      <InputNumber
+                        v-model:value="currentFormData[String(key)]"
+                        :min="schema.min"
+                        :placeholder="`默认: ${schema.default}`"
+                        style="width: 200px"
+                        @change="onFieldChange(String(key))"
+                      />
+                      <Button
+                        v-if="isModified(String(key))"
+                        size="small"
+                        type="link"
+                        @click="resetToDefault(String(key))"
+                      >
+                        恢复默认
+                      </Button>
+                    </div>
+                    <div v-if="getParamDesc(String(key))" class="param-desc">
+                      {{ getParamDesc(String(key)) }}
+                    </div>
+                    <div class="schema-default">
+                      Schema 默认值: {{ schema.default }}
+                    </div>
+                  </template>
+
+                  <!-- 浮点数类型 -->
+                  <template v-else-if="schema.type === 'float'">
+                    <div class="field-row">
+                      <InputNumber
+                        v-model:value="currentFormData[String(key)]"
+                        :min="schema.min"
+                        :max="schema.max"
+                        :step="0.01"
+                        :placeholder="`默认: ${schema.default}`"
+                        style="width: 200px"
+                        @change="onFieldChange(String(key))"
+                      />
+                      <Button
+                        v-if="isModified(String(key))"
+                        size="small"
+                        type="link"
+                        @click="resetToDefault(String(key))"
+                      >
+                        恢复默认
+                      </Button>
+                    </div>
+                    <div v-if="getParamDesc(String(key))" class="param-desc">
+                      {{ getParamDesc(String(key)) }}
+                    </div>
+                    <div class="schema-default">
+                      Schema 默认值: {{ schema.default }}
+                    </div>
+                  </template>
+                </Form.Item>
+              </template>
+            </Form>
+
+            <div class="form-footer">
+              <Button
+                type="primary"
+                :loading="saving"
+                @click="handleSave"
+              >
+                {{ saveButtonText }}
+              </Button>
+            </div>
+          </Tabs.TabPane>
+        </Tabs>
+      </Spin>
+
+      <!-- 帮助说明 -->
+      <div class="help-tip">
+        <span class="help-text">
+          <template v-if="isDeviceMode">
+            当前查看的是该设备各 ROI 绑定的实际参数。修改后将更新该设备所有 ROI 绑定中对应算法的参数，需重新推送配置到边缘端才能生效。
+          </template>
+          <template v-else>
+            全局参数为各算法的默认配置，当 ROI 绑定算法时未单独设置参数，将使用此处的全局默认值。修改后需重新推送配置到边缘端才能生效。
+          </template>
+        </span>
+      </div>
+    </Card>
+  </div>
+</template>
+
+<style scoped>
+.algo-global-config {
+  padding: 16px;
+}
+
+.card-extra {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 40px 0;
+  color: #999;
+  font-size: 14px;
+}
+
+.algo-desc {
+  margin-bottom: 16px;
+  padding: 8px 12px;
+  background: #fafafa;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #666;
+}
+
+.param-form {
+  max-width: 700px;
+}
+
+.field-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.param-desc {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #8c8c8c;
+  line-height: 1.5;
+}
+
+.schema-default {
+  margin-top: 2px;
+  font-size: 11px;
+  color: #bfbfbf;
+}
+
+.form-footer {
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.help-tip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 16px;
+  padding: 12px;
+  background: #e6f4ff;
+  border: 1px solid #91caff;
+  border-radius: 6px;
+  font-size: 13px;
+  color: #0958d9;
+}
+
+.help-text {
+  flex: 1;
+}
+</style>

apps/web-antd/src/views/aiot/device/roi/components/AlgorithmParamEditor.vue

@@ -22,6 +22,7 @@ interface Props {
   bindId: string;
   priority?: number;
   enabled?: number;
+  globalParams?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -31,6 +32,7 @@ const props = withDefaults(defineProps<Props>(), {
   bindId: '',
   priority: 0,
   enabled: 1,
+  globalParams: '{}',
 });
 
 const emit = defineEmits<{
@@ -94,6 +96,33 @@ function getParamDesc(key: string): string | undefined {
   return paramDescMap[key];
 }
 
+// 解析全局参数
+const parsedGlobalParams = computed(() => {
+  try {
+    return JSON.parse(props.globalParams);
+  } catch {
+    return {};
+  }
+});
+
+// 获取全局默认值（如果有）
+function getGlobalDefault(key: string): any {
+  return parsedGlobalParams.value[key];
+}
+
+// 是否有全局默认值
+function hasGlobalDefault(key: string): boolean {
+  return parsedGlobalParams.value[key] !== undefined;
+}
+
+// 重置为全局默认值
+function resetToGlobalDefault(key: string) {
+  const globalVal = getGlobalDefault(key);
+  if (globalVal !== undefined) {
+    formData.value[key] = globalVal;
+  }
+}
+
 const parsedSchema = computed(() => {
   try {
     return JSON.parse(props.paramSchema);
@@ -283,6 +312,17 @@ function validateParams(params: Record<string, any>): {
           <div v-if="getParamDesc(String(key))" class="param-desc">
             {{ getParamDesc(String(key)) }}
           </div>
+          <div v-if="hasGlobalDefault(String(key))" class="global-default-hint">
+            <span>全局默认: {{ getGlobalDefault(String(key)) }}</span>
+            <Button
+              size="small"
+              type="link"
+              class="reset-btn"
+              @click="resetToGlobalDefault(String(key))"
+            >
+              重置为全局默认
+            </Button>
+          </div>
         </template>
 
         <!-- 工作时间段（特殊处理） -->
@@ -325,11 +365,23 @@ function validateParams(params: Record<string, any>): {
         </div>
 
         <!-- 字符串类型 -->
-        <Input
-          v-else
-          v-model:value="formData[String(key)]"
-          :placeholder="`默认: ${schema.default}`"
-        />
+        <template v-else>
+          <Input
+            v-model:value="formData[String(key)]"
+            :placeholder="`默认: ${schema.default}`"
+          />
+          <div v-if="hasGlobalDefault(String(key))" class="global-default-hint">
+            <span>全局默认: {{ getGlobalDefault(String(key)) }}</span>
+            <Button
+              size="small"
+              type="link"
+              class="reset-btn"
+              @click="resetToGlobalDefault(String(key))"
+            >
+              重置为全局默认
+            </Button>
+          </div>
+        </template>
       </Form.Item>
     </Form>
 
@@ -371,4 +423,20 @@ function validateParams(params: Record<string, any>): {
   color: #8c8c8c;
   line-height: 1.5;
 }
+
+.global-default-hint {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 2px;
+  font-size: 12px;
+  color: #bfbfbf;
+}
+
+.reset-btn {
+  padding: 0 4px;
+  font-size: 12px;
+  height: auto;
+  line-height: 1.5;
+}
 </style>

apps/web-antd/src/views/aiot/device/roi/components/RoiAlgorithmBind.vue

@@ -63,6 +63,7 @@ const currentParams = ref('{}');
 const currentBindId = ref('');
 const currentPriority = ref(0);
 const currentEnabled = ref(1);
+const currentGlobalParams = ref('{}');
 
 watch(
   () => props.roiId,
@@ -128,6 +129,11 @@ function openParamEditor(item: AiotDeviceApi.RoiAlgoBinding) {
   currentParamSchema.value = item.algorithm?.paramSchema || '{}';
   currentPriority.value = item.bind.priority ?? 0;
   currentEnabled.value = item.bind.enabled ?? 1;
+  // 查找该算法的全局参数
+  const algo = availableAlgorithms.value.find(
+    (a) => a.algoCode === item.bind.algoCode,
+  );
+  currentGlobalParams.value = algo?.globalParams || '{}';
   paramEditorOpen.value = true;
 }
 
@@ -307,6 +313,7 @@ async function onAlarmLevelChange(item: AiotDeviceApi.RoiAlgoBinding, level: num
       :bind-id="currentBindId"
       :priority="currentPriority"
       :enabled="currentEnabled"
+      :global-params="currentGlobalParams"
       @saved="onParamSaved"
     />
   </div>

apps/web-antd/src/views/aiot/device/roi/components/RoiCanvas.vue

@@ -18,9 +18,10 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
+  'draw-cancelled': [];
+  'roi-deleted': [roiId: string];
   'roi-drawn': [data: { roi_type: string; coordinates: string }];
   'roi-selected': [roiId: string | null];
-  'roi-deleted': [roiId: string];
   'snap-status': [ok: boolean];
 }>();
 
@@ -31,19 +32,20 @@ let ctx: CanvasRenderingContext2D | null = null;
 let canvasWidth = 0;
 let canvasHeight = 0;
 
-const isDrawing = ref(false);
-let startPoint: { x: number; y: number } | null = null;
-let currentPoint: { x: number; y: number } | null = null;
 const polygonPoints = ref<{ x: number; y: number }[]>([]);
+let mouseMovePoint: { x: number; y: number } | null = null;
 const loading = ref(true);
 const errorMsg = ref('');
 
 watch(() => props.rois, () => redraw(), { deep: true });
 watch(() => props.selectedRoiId, () => redraw());
-watch(() => props.drawMode, () => {
+watch(() => props.drawMode, (newVal) => {
   polygonPoints.value = [];
-  isDrawing.value = false;
+  mouseMovePoint = null;
   redraw();
+  if (newVal && wrapper.value) {
+    wrapper.value.focus();
+  }
 });
 watch(() => props.snapUrl, () => {
   loading.value = true;
@@ -86,7 +88,6 @@ function onImageError() {
   loading.value = false;
   errorMsg.value = '截图加载失败，请确认摄像头拉流地址是否有效';
   emit('snap-status', false);
-  // 关键：截图失败也初始化 canvas，使 ROI 区域可见可操作
   nextTick(() => initCanvas());
 }
 
@@ -143,72 +144,88 @@ function getCanvasPoint(e: MouseEvent) {
   };
 }
 
+// ---- 鼠标事件 ----
+
 function onMouseDown(e: MouseEvent) {
   if (e.button !== 0) return;
   const pt = getCanvasPoint(e);
 
-  if (props.drawMode === 'rectangle') {
-    isDrawing.value = true;
-    startPoint = pt;
-    currentPoint = pt;
-  } else if (props.drawMode === 'polygon') {
+  if (props.drawMode === 'polygon') {
     polygonPoints.value.push(pt);
     redraw();
     drawPolygonInProgress();
-  } else {
+  } else if (!props.drawMode) {
     const clickedRoi = findRoiAtPoint(pt);
     emit('roi-selected', clickedRoi?.roiId ?? null);
   }
 }
 
 function onMouseMove(e: MouseEvent) {
-  if (!isDrawing.value || props.drawMode !== 'rectangle') return;
-  currentPoint = getCanvasPoint(e);
-  redraw();
-  drawRectInProgress();
-}
-
-function onMouseUp(e: MouseEvent) {
-  if (!isDrawing.value || props.drawMode !== 'rectangle') return;
-  isDrawing.value = false;
-  const endPoint = getCanvasPoint(e);
-  const x = Math.min(startPoint!.x, endPoint.x);
-  const y = Math.min(startPoint!.y, endPoint.y);
-  const w = Math.abs(endPoint.x - startPoint!.x);
-  const h = Math.abs(endPoint.y - startPoint!.y);
-  if (w > 0.01 && h > 0.01) {
-    emit('roi-drawn', {
-      roi_type: 'rectangle',
-      coordinates: JSON.stringify({ x, y, w, h }),
-    });
-  }
-  startPoint = null;
-  currentPoint = null;
+  if (props.drawMode !== 'polygon' || polygonPoints.value.length === 0) return;
+  mouseMovePoint = getCanvasPoint(e);
   redraw();
+  drawPolygonInProgress();
 }
 
 function onDoubleClick() {
   if (props.drawMode === 'polygon' && polygonPoints.value.length >= 3) {
-    emit('roi-drawn', {
-      roi_type: 'polygon',
-      coordinates: JSON.stringify(
-        polygonPoints.value.map((p) => ({ x: p.x, y: p.y })),
-      ),
-    });
-    polygonPoints.value = [];
-    redraw();
+    finishPolygon();
   }
 }
 
 function onContextMenu(e: MouseEvent) {
   e.preventDefault();
-  const pt = getCanvasPoint(e);
-  const roi = findRoiAtPoint(pt);
-  if (roi?.roiId) {
-    emit('roi-deleted', roi.roiId);
+  if (props.drawMode === 'polygon' && polygonPoints.value.length >= 3) {
+    finishPolygon();
+    return;
+  }
+  if (!props.drawMode) {
+    const pt = getCanvasPoint(e);
+    const roi = findRoiAtPoint(pt);
+    if (roi?.roiId) {
+      emit('roi-deleted', roi.roiId);
+    }
   }
 }
 
+// ---- 键盘事件 ----
+
+function onKeyDown(e: KeyboardEvent) {
+  if (props.drawMode === 'polygon') {
+    if (e.key === 'Escape') {
+      polygonPoints.value = [];
+      mouseMovePoint = null;
+      emit('draw-cancelled');
+      redraw();
+    } else if ((e.ctrlKey && e.key === 'z') || e.key === 'Backspace') {
+      e.preventDefault();
+      if (polygonPoints.value.length > 0) {
+        polygonPoints.value.pop();
+        redraw();
+        if (polygonPoints.value.length > 0) {
+          drawPolygonInProgress();
+        }
+      }
+    }
+  }
+}
+
+// ---- 多边形完成（公开方法，供父组件调用） ----
+
+function finishPolygon() {
+  if (polygonPoints.value.length < 3) return;
+  const points = polygonPoints.value.map((p) => ({ x: p.x, y: p.y }));
+  emit('roi-drawn', {
+    roi_type: 'polygon',
+    coordinates: JSON.stringify(points),
+  });
+  polygonPoints.value = [];
+  mouseMovePoint = null;
+  redraw();
+}
+
+// ---- ROI 查找 ----
+
 function findRoiAtPoint(pt: { x: number; y: number }) {
   for (let i = props.rois.length - 1; i >= 0; i--) {
     const roi = props.rois[i]!;
@@ -217,7 +234,8 @@ function findRoiAtPoint(pt: { x: number; y: number }) {
         typeof roi.coordinates === 'string'
           ? JSON.parse(roi.coordinates)
           : roi.coordinates;
-      if (roi.roiType === 'rectangle') {
+      const type = roi.roiType;
+      if (type === 'rectangle' || type === 'fullscreen') {
         if (
           pt.x >= coords.x &&
           pt.x <= coords.x + coords.w &&
@@ -226,7 +244,7 @@ function findRoiAtPoint(pt: { x: number; y: number }) {
         ) {
           return roi;
         }
-      } else if (roi.roiType === 'polygon') {
+      } else if (type === 'polygon') {
         if (isPointInPolygon(pt, coords)) return roi;
       }
     } catch {
@@ -254,6 +272,8 @@ function isPointInPolygon(
   return inside;
 }
 
+// ---- 绘制 ----
+
 function redraw() {
   if (!ctx) return;
   ctx.clearRect(0, 0, canvasWidth, canvasHeight);
@@ -266,12 +286,13 @@ function redraw() {
           : roi.coordinates;
       const color = roi.color || '#FF0000';
       const isSelected = roi.roiId === props.selectedRoiId;
+      const type = roi.roiType;
 
       ctx!.strokeStyle = color;
       ctx!.lineWidth = isSelected ? 3 : 2;
       ctx!.fillStyle = `${color}33`;
 
-      if (roi.roiType === 'rectangle') {
+      if (type === 'rectangle' || type === 'fullscreen') {
         const rx = coords.x * canvasWidth;
         const ry = coords.y * canvasHeight;
         const rw = coords.w * canvasWidth;
@@ -283,7 +304,7 @@ function redraw() {
           ctx!.font = '12px Arial';
           ctx!.fillText(roi.name, rx + 4, ry + 14);
         }
-      } else if (roi.roiType === 'polygon') {
+      } else if (type === 'polygon') {
         ctx!.beginPath();
         coords.forEach((p: { x: number; y: number }, idx: number) => {
           const px = p.x * canvasWidth;
@@ -310,19 +331,6 @@ function redraw() {
   });
 }
 
-function drawRectInProgress() {
-  if (!startPoint || !currentPoint || !ctx) return;
-  const x = Math.min(startPoint.x, currentPoint.x) * canvasWidth;
-  const y = Math.min(startPoint.y, currentPoint.y) * canvasHeight;
-  const w = Math.abs(currentPoint.x - startPoint.x) * canvasWidth;
-  const h = Math.abs(currentPoint.y - startPoint.y) * canvasHeight;
-  ctx.strokeStyle = '#00FF00';
-  ctx.lineWidth = 2;
-  ctx.setLineDash([5, 5]);
-  ctx.strokeRect(x, y, w, h);
-  ctx.setLineDash([]);
-}
-
 function drawPolygonInProgress() {
   if (polygonPoints.value.length < 1 || !ctx) return;
   ctx.strokeStyle = '#00FF00';
@@ -335,15 +343,31 @@ function drawPolygonInProgress() {
     if (idx === 0) ctx!.moveTo(px, py);
     else ctx!.lineTo(px, py);
     ctx!.fillStyle = '#00FF00';
-    ctx!.fillRect(px - 3, py - 3, 6, 6);
+    ctx!.fillRect(px - 4, py - 4, 8, 8);
   });
+  // 鼠标跟随线
+  if (mouseMovePoint) {
+    ctx.lineTo(
+      mouseMovePoint.x * canvasWidth,
+      mouseMovePoint.y * canvasHeight,
+    );
+  }
+  // 首尾闭合预览线
+  if (polygonPoints.value.length >= 3) {
+    const first = polygonPoints.value[0]!;
+    const last = mouseMovePoint || polygonPoints.value[polygonPoints.value.length - 1]!;
+    ctx.moveTo(last.x * canvasWidth, last.y * canvasHeight);
+    ctx.lineTo(first.x * canvasWidth, first.y * canvasHeight);
+  }
   ctx.stroke();
   ctx.setLineDash([]);
 }
+
+defineExpose({ polygonPoints, finishPolygon, redraw, drawPolygonInProgress });
 </script>
 
 <template>
-  <div ref="wrapper" class="roi-canvas-wrapper">
+  <div ref="wrapper" class="roi-canvas-wrapper" tabindex="0" @keydown="onKeyDown">
     <img
       v-if="snapUrl"
       :src="snapUrl"
@@ -358,12 +382,16 @@ function drawPolygonInProgress() {
     <canvas
       ref="canvas"
       class="roi-overlay"
+      :class="{ drawing: drawMode === 'polygon' }"
       @mousedown="onMouseDown"
       @mousemove="onMouseMove"
-      @mouseup="onMouseUp"
       @dblclick="onDoubleClick"
       @contextmenu="onContextMenu"
     />
+    <!-- 绘制中浮动提示条 -->
+    <div v-if="drawMode === 'polygon'" class="draw-hint-bar">
+      单击添加顶点 | 双击或右键完成选区 | Esc取消 | Ctrl+Z撤销
+    </div>
   </div>
 </template>
 
@@ -374,6 +402,7 @@ function drawPolygonInProgress() {
   height: 100%;
   min-height: 400px;
   background: #000;
+  outline: none;
 }
 
 .bg-image {
@@ -396,6 +425,24 @@ function drawPolygonInProgress() {
 
 .roi-overlay {
   position: absolute;
+}
+
+.roi-overlay.drawing {
   cursor: crosshair;
 }
+
+.draw-hint-bar {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  padding: 6px 16px;
+  border-radius: 4px;
+  font-size: 13px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 10;
+}
 </style>

apps/web-antd/src/views/aiot/device/roi/index.vue

@@ -2,7 +2,7 @@
 /**
  * ROI 区域配置页面
  *
- * 功能：摄像头截图展示、ROI 区域绘制（矩形/多边形）、ROI 属性编辑、
+ * 功能：摄像头截图展示、ROI 区域绘制（全图/自定义多边形）、ROI 属性编辑、
  *       算法绑定管理、配置推送到边缘端
  * 后端：WVP 视频平台 AiRoi / AiConfig API
  */
@@ -65,31 +65,26 @@ const selectedRoiId = ref<null | string>(null);
 const selectedRoiBindings = ref<AiotDeviceApi.RoiAlgoBinding[]>([]);
 const snapUrl = ref('');
 const snapOk = ref(false);
-
-const edgeDevices = ref<Array<{ deviceId: string }>>([]);
-
-async function loadEdgeDevices() {
-  try {
-    const list = await wvpRequestClient.get<Array<{ deviceId: string }>>('/aiot/device/device/list');
-    edgeDevices.value = (list as any) || [];
-  } catch {
-    edgeDevices.value = [{ deviceId: 'edge' }];
-  }
-}
+const panelVisible = ref(false);
+const roiCanvasRef = ref<InstanceType<typeof RoiCanvas> | null>(null);
 
 const selectedRoi = computed(() => {
   if (!selectedRoiId.value) return null;
   return roiList.value.find((r) => r.roiId === selectedRoiId.value) || null;
 });
 
+const isDrawing = computed(() => drawMode.value === 'polygon');
+
+const polygonPointCount = computed(() => {
+  return roiCanvasRef.value?.polygonPoints?.length ?? 0;
+});
+
 // ==================== 初始化 ====================
 
 onMounted(async () => {
-  loadEdgeDevices();
   const q = route.query;
   if (q.cameraCode) {
     cameraCode.value = String(q.cameraCode);
-    // 加载摄像头信息以获取应用名
     await loadCurrentCamera();
     await buildSnapUrl();
     loadRois();
@@ -121,7 +116,7 @@ async function loadCameraOptions() {
     const list = res.list || [];
     cameraOptions.value = list.map((cam: AiotDeviceApi.Camera) => ({
       value: cam.cameraCode || '',
-      label: `${cam.app || cam.stream}${cam.srcUrl ? ` (${cam.srcUrl})` : ''}`,
+      label: `${cam.cameraName || cam.app || cam.stream}${cam.srcUrl ? ` (${cam.srcUrl})` : ''}`,
       camera: cam,
     }));
   } catch {
@@ -146,6 +141,20 @@ function goBack() {
   router.push('/aiot/device/camera');
 }
 
+// ==================== ROI 类型标签 ====================
+
+function getRoiTagColor(roi: AiotDeviceApi.Roi) {
+  if (roi.roiType === 'fullscreen') return 'orange';
+  if (roi.roiType === 'rectangle') return 'blue';
+  return 'green';
+}
+
+function getRoiTagLabel(roi: AiotDeviceApi.Roi) {
+  if (roi.roiType === 'fullscreen') return '全图';
+  if (roi.roiType === 'rectangle') return '矩形';
+  return '自定义';
+}
+
 // ==================== 截图 ====================
 
 async function buildSnapUrl(force = false) {
@@ -188,42 +197,98 @@ async function loadRoiDetail() {
   }
 }
 
-// ==================== ROI 绘制 ====================
+// ==================== 全图 ====================
+
+function addFullscreen() {
+  const hasFullscreen = roiList.value.some((r) => r.roiType === 'fullscreen');
+  if (hasFullscreen) {
+    message.warning('已存在全图选区');
+    return;
+  }
+  Modal.confirm({
+    title: '新建全图选区',
+    content: '将创建覆盖整张图片的选区',
+    async onOk() {
+      const newRoi: Partial<AiotDeviceApi.Roi> = {
+        cameraId: cameraCode.value,
+        name: `全图-${roiList.value.length + 1}`,
+        roiType: 'fullscreen',
+        coordinates: JSON.stringify({ x: 0, y: 0, w: 1, h: 1 }),
+        color: '#FF0000',
+        priority: 0,
+        enabled: 1,
+        description: '',
+        deviceId: '',
+      };
+      try {
+        await saveRoi(newRoi);
+        message.success('全图选区已创建');
+        loadRois();
+      } catch {
+        message.error('保存失败');
+      }
+    },
+  });
+}
+
+// ==================== 自定义选区（多边形绘制） ====================
 
 function startDraw(mode: string) {
   drawMode.value = mode;
 }
 
+function finishDraw() {
+  roiCanvasRef.value?.finishPolygon();
+}
+
+function undoPoint() {
+  if (roiCanvasRef.value && roiCanvasRef.value.polygonPoints.length > 0) {
+    roiCanvasRef.value.polygonPoints.pop();
+    roiCanvasRef.value.redraw();
+    if (roiCanvasRef.value.polygonPoints.length > 0) {
+      roiCanvasRef.value.drawPolygonInProgress();
+    }
+  }
+}
+
+function cancelDraw() {
+  drawMode.value = null;
+}
+
+function onDrawCancelled() {
+  drawMode.value = null;
+}
+
 async function onRoiDrawn(data: { coordinates: string; roi_type: string }) {
   drawMode.value = null;
+  const roiName = `ROI-${roiList.value.length + 1}`;
   const newRoi: Partial<AiotDeviceApi.Roi> = {
     cameraId: cameraCode.value,
-    name: `ROI-${roiList.value.length + 1}`,
+    name: roiName,
     roiType: data.roi_type,
     coordinates: data.coordinates,
     color: '#FF0000',
     priority: 0,
     enabled: 1,
     description: '',
-    deviceId: edgeDevices.value[0]?.deviceId || 'edge', // 默认关联边缘设备
+    deviceId: '',
   };
   try {
     await saveRoi(newRoi);
-    message.success('ROI已保存');
+    message.success('选区已保存');
     loadRois();
   } catch {
     message.error('保存失败');
   }
 }
 
-// ==================== ROI 选择 ====================
+// ==================== ROI 选择与面板 ====================
 
 function onRoiSelected(roiId: null | string) {
   selectedRoiId.value = roiId;
   if (roiId) {
+    panelVisible.value = true;
     loadRoiDetail();
-  } else {
-    selectedRoiBindings.value = [];
   }
 }
 
@@ -232,6 +297,12 @@ function selectRoi(roi: AiotDeviceApi.Roi) {
   loadRoiDetail();
 }
 
+function closePanel() {
+  panelVisible.value = false;
+  selectedRoiId.value = null;
+  selectedRoiBindings.value = [];
+}
+
 // ==================== ROI 编辑 ====================
 
 async function updateRoiData(roi: AiotDeviceApi.Roi) {
@@ -246,7 +317,13 @@ async function updateRoiData(roi: AiotDeviceApi.Roi) {
 // ==================== ROI 删除 ====================
 
 function onRoiDeleted(roiId: string) {
-  doDeleteRoi(roiId);
+  Modal.confirm({
+    title: '提示',
+    content: '确定删除该ROI？关联的算法绑定也将删除。',
+    async onOk() {
+      doDeleteRoi(roiId);
+    },
+  });
 }
 
 function handleDeleteRoi(roi: AiotDeviceApi.Roi) {
@@ -267,7 +344,10 @@ async function doDeleteRoi(roiId: string) {
       selectedRoiId.value = null;
       selectedRoiBindings.value = [];
     }
-    loadRois();
+    await loadRois();
+    if (roiList.value.length === 0) {
+      panelVisible.value = false;
+    }
   } catch {
     message.error('删除失败');
   }
@@ -316,40 +396,43 @@ function handlePush() {
       <div class="page-header">
         <div class="header-left">
           <Button size="small" @click="goBack">返回</Button>
-          <h3>{{ currentCamera?.app || cameraCode }} - ROI配置</h3>
+          <h3>{{ currentCamera?.cameraName || currentCamera?.app || cameraCode }} - ROI配置</h3>
         </div>
         <div class="header-right">
-          <Button
-            size="small"
-            type="primary"
-            :disabled="drawMode === 'rectangle'"
-            @click="startDraw('rectangle')"
-          >
-            画矩形
-          </Button>
-          <Button
-            size="small"
-            type="primary"
-            :disabled="drawMode === 'polygon'"
-            @click="startDraw('polygon')"
-          >
-            画多边形
-          </Button>
-          <Button size="small" :disabled="!drawMode" @click="drawMode = null">
-            取消绘制
-          </Button>
-          <Button size="small" @click="refreshSnap">刷新截图</Button>
-          <Button size="small" type="default" @click="handlePush">
-            推送到边缘端
-          </Button>
+          <!-- 默认工具栏 -->
+          <template v-if="!isDrawing">
+            <Button size="small" type="primary" @click="addFullscreen">
+              全图
+            </Button>
+            <Button size="small" type="primary" @click="startDraw('polygon')">
+              自定义选区
+            </Button>
+            <Button size="small" @click="refreshSnap">刷新截图</Button>
+            <Button size="small" type="default" @click="handlePush">
+              推送到边缘端
+            </Button>
+          </template>
+          <!-- 绘制中工具栏 -->
+          <template v-else>
+            <Button size="small" type="primary" :disabled="polygonPointCount < 3" @click="finishDraw">
+              完成选区
+            </Button>
+            <Button size="small" :disabled="polygonPointCount === 0" @click="undoPoint">
+              撤销上一点
+            </Button>
+            <Button size="small" danger @click="cancelDraw">
+              取消绘制
+            </Button>
+          </template>
         </div>
       </div>
 
       <!-- 主内容区：左侧画布 + 右侧面板 -->
       <div class="main-content">
         <!-- 画布区域 -->
-        <div class="canvas-panel">
+        <div :class="['canvas-panel', { 'panel-open': panelVisible }]">
           <RoiCanvas
+            ref="roiCanvasRef"
             :rois="roiList"
             :draw-mode="drawMode"
             :selected-roi-id="selectedRoiId"
@@ -357,134 +440,126 @@ function handlePush() {
             @roi-drawn="onRoiDrawn"
             @roi-selected="onRoiSelected"
             @roi-deleted="onRoiDeleted"
+            @draw-cancelled="onDrawCancelled"
             @snap-status="onSnapStatus"
           />
         </div>
 
         <!-- 右侧面板 -->
-        <div class="side-panel">
-          <!-- ROI 列表 -->
-          <div class="section-header">
-            <span>ROI列表 ({{ roiList.length }})</span>
-          </div>
-          <div v-if="roiList.length === 0" class="empty-tip">
-            暂无ROI，请在左侧画面上绘制
-          </div>
-          <div
-            v-for="roi in roiList"
-            :key="roi.roiId"
-            :class="['roi-item', { active: selectedRoiId === roi.roiId }]"
-            @click="selectRoi(roi)"
-          >
-            <div class="roi-item-header">
-              <span
-                class="roi-color"
-                :style="{ background: roi.color || '#FF0000' }"
-              />
-              <span class="roi-name">{{ roi.name || '未命名' }}</span>
-              <Tag
-                :color="roi.roiType === 'rectangle' ? 'blue' : 'green'"
-                style="margin-right: 0"
-              >
-                {{ roi.roiType === 'rectangle' ? '矩形' : '多边形' }}
-              </Tag>
-              <Switch
-                :checked="roi.enabled === 1"
-                size="small"
-                style="margin-left: auto"
-                @change="
-                  (val: string | number | boolean) => {
-                    roi.enabled = val ? 1 : 0;
-                    updateRoiData(roi);
-                  }
-                "
-                @click.stop
-              />
-              <Button
-                size="small"
-                type="text"
-                danger
-                style="margin-left: 4px"
-                @click.stop="handleDeleteRoi(roi)"
-              >
-                删除
+        <transition name="slide-panel">
+          <div v-if="panelVisible" class="side-panel">
+            <div class="panel-close">
+              <Button size="small" shape="circle" @click="closePanel">
+                ✕
               </Button>
             </div>
-          </div>
 
-          <Divider />
-
-          <!-- ROI 属性编辑 -->
-          <div v-if="selectedRoi" class="roi-detail-section">
-            <h4>ROI属性</h4>
-            <Form
-              layout="horizontal"
-              :label-col="{ span: 6 }"
-              :wrapper-col="{ span: 18 }"
-              size="small"
+            <!-- ROI 列表 -->
+            <div class="section-header">
+              <span>ROI列表 ({{ roiList.length }})</span>
+            </div>
+            <div v-if="roiList.length === 0" class="empty-tip">
+              暂无ROI，请使用上方按钮添加
+            </div>
+            <div
+              v-for="roi in roiList"
+              :key="roi.roiId"
+              :class="['roi-item', { active: selectedRoiId === roi.roiId }]"
+              @click="selectRoi(roi)"
             >
-              <Form.Item label="名称">
-                <Input
-                  v-model:value="selectedRoi.name"
-                  @blur="updateRoiData(selectedRoi!)"
+              <div class="roi-item-header">
+                <span
+                  class="roi-color"
+                  :style="{ background: roi.color || '#FF0000' }"
                 />
-              </Form.Item>
-              <Form.Item label="边缘设备">
-                <Select
-                  v-model:value="selectedRoi.deviceId"
-                  placeholder="选择边缘设备"
-                  @change="updateRoiData(selectedRoi!)"
+                <span class="roi-name">{{ roi.name || '未命名' }}</span>
+                <Tag
+                  :color="getRoiTagColor(roi)"
+                  style="margin-right: 0"
                 >
-                  <Select.Option v-for="dev in edgeDevices" :key="dev.deviceId" :value="dev.deviceId">
-                    {{ dev.deviceId }}
-                  </Select.Option>
-                </Select>
-                <div style="margin-top: 4px; font-size: 12px; color: #999">
-                  关联的边缘推理节点
-                </div>
-              </Form.Item>
-              <Form.Item label="颜色">
-                <Input
-                  v-model:value="selectedRoi.color"
-                  type="color"
-                  style="width: 60px; padding: 2px"
-                  @change="updateRoiData(selectedRoi!)"
+                  {{ getRoiTagLabel(roi) }}
+                </Tag>
+                <Switch
+                  :checked="roi.enabled === 1"
+                  size="small"
+                  style="margin-left: auto"
+                  @change="
+                    (val: string | number | boolean) => {
+                      roi.enabled = val ? 1 : 0;
+                      updateRoiData(roi);
+                    }
+                  "
+                  @click.stop
                 />
-              </Form.Item>
-              <Form.Item label="优先级">
-                <InputNumber
-                  v-model:value="selectedRoi.priority"
-                  :min="0"
-                  :max="100"
-                  @change="updateRoiData(selectedRoi!)"
-                />
-                <div style="margin-top: 4px; font-size: 12px; color: #999">
-                  数值越大优先级越高（0-100），多个ROI重叠时优先处理高优先级区域
-                </div>
-              </Form.Item>
-              <Form.Item label="描述">
-                <Input.TextArea
-                  v-model:value="selectedRoi.description"
-                  :rows="2"
-                  @blur="updateRoiData(selectedRoi!)"
-                />
-              </Form.Item>
-            </Form>
+                <Button
+                  size="small"
+                  type="text"
+                  danger
+                  style="margin-left: 4px"
+                  @click.stop="handleDeleteRoi(roi)"
+                >
+                  删除
+                </Button>
+              </div>
+            </div>
 
             <Divider />
 
-            <!-- 算法绑定管理 -->
-            <RoiAlgorithmBind
-              :roi-id="selectedRoi.roiId || ''"
-              :bindings="selectedRoiBindings"
-              :snap-ok="snapOk"
-              @changed="loadRoiDetail"
-            />
+            <!-- ROI 属性编辑 -->
+            <div v-if="selectedRoi" class="roi-detail-section">
+              <h4>ROI属性</h4>
+              <Form
+                layout="horizontal"
+                :label-col="{ span: 6 }"
+                :wrapper-col="{ span: 18 }"
+                size="small"
+              >
+                <Form.Item label="名称">
+                  <Input
+                    v-model:value="selectedRoi.name"
+                    @blur="updateRoiData(selectedRoi!)"
+                  />
+                </Form.Item>
+                <Form.Item label="颜色">
+                  <Input
+                    v-model:value="selectedRoi.color"
+                    type="color"
+                    style="width: 60px; padding: 2px"
+                    @change="updateRoiData(selectedRoi!)"
+                  />
+                </Form.Item>
+                <Form.Item label="优先级">
+                  <InputNumber
+                    v-model:value="selectedRoi.priority"
+                    :min="0"
+                    :max="100"
+                    @change="updateRoiData(selectedRoi!)"
+                  />
+                </Form.Item>
+                <Form.Item label="描述">
+                  <Input.TextArea
+                    v-model:value="selectedRoi.description"
+                    :rows="2"
+                    @blur="updateRoiData(selectedRoi!)"
+                  />
+                </Form.Item>
+              </Form>
+
+              <Divider />
+
+              <!-- 算法绑定管理 -->
+              <RoiAlgorithmBind
+                :roi-id="selectedRoi.roiId || ''"
+                :bindings="selectedRoiBindings"
+                :snap-ok="snapOk"
+                @changed="loadRoiDetail"
+              />
+            </div>
+            <div v-else class="empty-tip" style="margin-top: 20px">
+              点击左侧ROI区域或列表项查看详情
+            </div>
           </div>
-          <div v-else class="empty-tip" style="margin-top: 20px">
-            点击左侧ROI区域或列表项查看详情
-          </div>
-        </div>
+        </transition>
       </div>
     </div>
   </Page>
@@ -513,6 +588,7 @@ function handlePush() {
 
 .header-left h3 {
   margin: 0;
+  font-size: 15px;
 }
 
 .header-right {
@@ -523,15 +599,21 @@ function handlePush() {
 .main-content {
   display: flex;
   flex: 1;
-  gap: 12px;
+  gap: 0;
   overflow: hidden;
+  position: relative;
 }
 
 .canvas-panel {
-  flex: 6;
+  flex: 1;
   background: #000;
   border-radius: 4px;
   overflow: hidden;
+  transition: flex 0.3s ease;
+}
+
+.canvas-panel.panel-open {
+  flex: 6;
 }
 
 .side-panel {
@@ -539,8 +621,28 @@ function handlePush() {
   overflow-y: auto;
   background: #fff;
   border: 1px solid #f0f0f0;
-  border-radius: 4px;
+  border-radius: 0 4px 4px 0;
   padding: 12px;
+  margin-left: 1px;
+}
+
+.panel-close {
+  text-align: right;
+  margin-bottom: 8px;
+}
+
+/* 面板滑入动画 */
+.slide-panel-enter-active,
+.slide-panel-leave-active {
+  transition: all 0.3s ease;
+}
+
+.slide-panel-enter-from,
+.slide-panel-leave-to {
+  flex: 0 !important;
+  padding: 0 !important;
+  overflow: hidden;
+  opacity: 0;
 }
 
 .section-header {

apps/web-antd/src/views/work-order/index.vue

@@ -22,7 +22,8 @@ import {
   Tag,
   Upload,
 } from 'ant-design-vue';
-import { CameraOutlined, UploadOutlined } from '@ant-design/icons-vue';
+// 使用 Unicode 字符替代 @ant-design/icons-vue（该包未安装）
+// CameraOutlined → 📷, UploadOutlined → 用文字
 
 defineOptions({ name: 'WorkOrderDetail' });
 
@@ -314,7 +315,7 @@ onMounted(async () => {
               accept="image/*"
             >
               <div class="upload-btn">
-                <CameraOutlined style="font-size: 24px" />
+                <span style="font-size: 24px">📷</span>
                 <span>拍照/选图</span>
               </div>
             </Upload>