From 2b13a1973171ea3bfb1d0be25ae1977417531ff3 Mon Sep 17 00:00:00 2001
From: lq <workerqi@163.com>
Date: Tue, 21 Jul 2026 14:01:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=92=89=E9=92=89=E3=80=81=E4=BC=81?=
 =?UTF-8?q?=E4=B8=9A=E5=BE=AE=E4=BF=A1webbook=E3=80=81=E4=BC=81=E4=B8=9A?=
 =?UTF-8?q?=E5=BE=AE=E4=BF=A1=E5=BA=94=E7=94=A8api=EF=BC=8C=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=EF=BC=9A=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/system/oa-chat/api/org.ts       |   34 +
 .../components/create-app-chat-modal.vue      |  107 ++
 .../oa-chat/components/employee-panel.vue     |  244 ++++
 .../components/app-credential-modal.vue       |  184 +++
 .../system/oa-scene/components/form-page.vue  | 1131 +++++++++++++++++
 .../components/scene-targets-panel.vue        |  355 ++++++
 6 files changed, 2055 insertions(+)
 create mode 100644 apps/web-antd/src/views/system/oa-chat/api/org.ts
 create mode 100644 apps/web-antd/src/views/system/oa-chat/components/create-app-chat-modal.vue
 create mode 100644 apps/web-antd/src/views/system/oa-chat/components/employee-panel.vue
 create mode 100644 apps/web-antd/src/views/system/oa-robot/components/app-credential-modal.vue
 create mode 100644 apps/web-antd/src/views/system/oa-scene/components/form-page.vue
 create mode 100644 apps/web-antd/src/views/system/oa-scene/components/scene-targets-panel.vue

diff --git a/apps/web-antd/src/views/system/oa-chat/api/org.ts b/apps/web-antd/src/views/system/oa-chat/api/org.ts
new file mode 100644
index 00000000..e0a575b9
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-chat/api/org.ts
@@ -0,0 +1,34 @@
+import { requestClient } from '#/api/request';
+
+/**
+ * 企微组织架构 API（OA 群聊页「员工」Tab）
+ * 路由前缀：oa-ww-org/
+ */
+const prefix = 'oa-ww-org/';
+
+/**
+ * 从企微同步组织架构（部门 + 成员）
+ */
+export async function syncOaWwOrg(data: { platform_code?: string } = {}) {
+  return requestClient.post<any>(`${prefix}sync-org`, data);
+}
+
+/**
+ * 本地部门树（antd Tree）
+ */
+export async function getOaWwDeptTree(params: { platform_code?: string } = {}) {
+  return requestClient.get<any>(`${prefix}department-tree`, { params });
+}
+
+/**
+ * 员工分页列表
+ */
+export async function getOaWwUserList(params: {
+  platform_code?: string;
+  dept_id?: number;
+  keyword?: string;
+  page?: number;
+  pageSize?: number;
+}) {
+  return requestClient.get<any>(`${prefix}user-list`, { params });
+}
diff --git a/apps/web-antd/src/views/system/oa-chat/components/create-app-chat-modal.vue b/apps/web-antd/src/views/system/oa-chat/components/create-app-chat-modal.vue
new file mode 100644
index 00000000..64bc08de
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-chat/components/create-app-chat-modal.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+/**
+ * 创建企微应用群聊弹窗
+ * 调 appchat/create，成功后回写本地 xk_oa_chat（chat_kind=应用群，source=接口创建）
+ */
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+import { createOaAppChat } from '../api';
+
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm({
+  wrapperClass: 'grid-cols-12',
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    componentProps: { class: 'w-full' },
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'name',
+      label: '群名称',
+      rules: 'required',
+      componentProps: { placeholder: '应用群聊名称' },
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'owner',
+      label: '群主 userid',
+      rules: 'required',
+      componentProps: { placeholder: '企微成员 userid' },
+    },
+    {
+      component: 'Select',
+      fieldName: 'userlist',
+      label: '成员 userid',
+      rules: 'selectRequired',
+      help: '至少 2 人（含群主）；可输入后回车添加',
+      componentProps: {
+        mode: 'tags',
+        placeholder: '输入 userid 后回车',
+        tokenSeparators: [',', ' '],
+      },
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'chatid',
+      label: '指定 chatid',
+      help: '选填；不填则由企微自动生成',
+      componentProps: { placeholder: '选填' },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    const e = await formApi.validate();
+    if (!e.valid) return;
+    const values = await formApi.getValues();
+    const userlist = Array.isArray(values.userlist)
+      ? values.userlist
+      : String(values.userlist || '')
+          .split(/[,，\s]+/)
+          .filter(Boolean);
+    modalApi.setState({ loading: true, confirmLoading: true });
+    try {
+      await createOaAppChat({
+        platform_code: 'work_wechat_app',
+        name: values.name,
+        owner: values.owner,
+        userlist,
+        chatid: values.chatid || '',
+      });
+      message.success('应用群创建成功');
+      gridApi.value?.reload?.() ?? gridApi.value?.query?.();
+      modalApi.close();
+    } finally {
+      modalApi.setState({ loading: false, confirmLoading: false });
+    }
+  },
+  onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      formApi.resetForm();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="创建应用群聊" class="w-[40%]">
+    <Form />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/system/oa-chat/components/employee-panel.vue b/apps/web-antd/src/views/system/oa-chat/components/employee-panel.vue
new file mode 100644
index 00000000..27617fb5
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-chat/components/employee-panel.vue
@@ -0,0 +1,244 @@
+<script lang="ts" setup>
+/**
+ * OA 群聊页「员工」面板
+ * 左侧企微部门树自动分类，右侧员工列表；支持同步组织架构与关键词搜索
+ */
+import { onMounted, ref } from 'vue';
+
+import {
+  Button,
+  Empty,
+  InputSearch,
+  message,
+  Pagination,
+  Spin,
+  Table,
+  Tag,
+  Tree,
+} from 'ant-design-vue';
+
+import {
+  getOaWwDeptTree,
+  getOaWwUserList,
+  syncOaWwOrg,
+} from '../api/org';
+
+const syncLoading = ref(false);
+const treeLoading = ref(false);
+const tableLoading = ref(false);
+const treeData = ref<any[]>([]);
+const selectedDeptId = ref<number | null>(null);
+const keyword = ref('');
+const users = ref<any[]>([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(20);
+
+/**
+ * 同步企微组织架构
+ */
+async function handleSync() {
+  syncLoading.value = true;
+  try {
+    const res = await syncOaWwOrg({ platform_code: 'work_wechat_app' });
+    const data = res?.data ?? res ?? {};
+    message.success(
+      `同步完成：部门 ${data.dept_count ?? 0}，成员 ${data.user_count ?? 0}`,
+    );
+    selectedDeptId.value = null;
+    page.value = 1;
+    await Promise.all([loadTree(), loadUsers()]);
+  } catch (e: any) {
+    message.error(e?.message || '同步失败，请确认平台凭证与通讯录权限');
+  } finally {
+    syncLoading.value = false;
+  }
+}
+
+/**
+ * 加载部门树
+ */
+async function loadTree() {
+  treeLoading.value = true;
+  try {
+    const res = await getOaWwDeptTree({ platform_code: 'work_wechat_app' });
+    const data = res?.data ?? res ?? [];
+    treeData.value = Array.isArray(data) ? data : [];
+  } catch (e) {
+    console.error(e);
+    treeData.value = [];
+  } finally {
+    treeLoading.value = false;
+  }
+}
+
+/**
+ * 加载员工列表
+ */
+async function loadUsers() {
+  tableLoading.value = true;
+  try {
+    const res = await getOaWwUserList({
+      platform_code: 'work_wechat_app',
+      dept_id: selectedDeptId.value || 0,
+      keyword: keyword.value.trim(),
+      page: page.value,
+      pageSize: pageSize.value,
+    });
+    const data = res?.data ?? res ?? {};
+    users.value = Array.isArray(data.items) ? data.items : [];
+    total.value = Number(data.total || 0);
+  } catch (e) {
+    console.error(e);
+    users.value = [];
+    total.value = 0;
+  } finally {
+    tableLoading.value = false;
+  }
+}
+
+/**
+ * 选中部门节点
+ */
+function onSelectDept(keys: (string | number)[]) {
+  const key = keys[0];
+  selectedDeptId.value = key !== undefined && key !== null ? Number(key) : null;
+  page.value = 1;
+  loadUsers();
+}
+
+function onSearch() {
+  page.value = 1;
+  loadUsers();
+}
+
+function onPageChange(p: number, ps: number) {
+  page.value = p;
+  pageSize.value = ps;
+  loadUsers();
+}
+
+const columns = [
+  { title: 'userid', dataIndex: 'userid', key: 'userid', width: 140 },
+  { title: '姓名', dataIndex: 'name', key: 'name', width: 100 },
+  { title: '手机号', dataIndex: 'mobile', key: 'mobile', width: 120 },
+  {
+    title: '主部门',
+    dataIndex: 'main_department_name',
+    key: 'main_department_name',
+    width: 140,
+  },
+  { title: '职位', dataIndex: 'position', key: 'position', width: 120 },
+  {
+    title: '匹配系统员工',
+    key: 'matched',
+    width: 140,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    width: 90,
+  },
+];
+
+function statusLabel(status: number) {
+  const map: Record<number, string> = {
+    1: '已激活',
+    2: '已禁用',
+    4: '未激活',
+    5: '退出企业',
+  };
+  return map[status] || String(status);
+}
+
+onMounted(async () => {
+  await loadTree();
+  await loadUsers();
+});
+</script>
+
+<template>
+  <div class="employee-panel flex flex-col gap-3">
+    <div class="flex flex-wrap items-center gap-2">
+      <Button type="primary" :loading="syncLoading" @click="handleSync">
+        同步组织架构
+      </Button>
+      <InputSearch
+        v-model:value="keyword"
+        allow-clear
+        placeholder="搜索姓名 / userid / 手机号"
+        class="w-[280px]"
+        @search="onSearch"
+      />
+      <span class="text-xs text-gray-400">
+        需平台凭证且应用已开通通讯录读权限；匹配仅展示，不自动绑定
+      </span>
+    </div>
+
+    <div class="flex gap-3">
+      <!-- 左侧部门树：固定最大高度，内部滚动，避免撑高整页 -->
+      <aside
+        class="flex w-[260px] shrink-0 flex-col rounded-lg border border-border bg-card p-3"
+        style="max-height: 560px"
+      >
+        <div class="mb-2 text-sm font-medium">组织架构</div>
+        <Spin :spinning="treeLoading">
+          <div class="overflow-auto" style="max-height: 500px">
+            <Empty
+              v-if="!treeLoading && treeData.length === 0"
+              description="暂无部门，请先同步"
+              :image="Empty.PRESENTED_IMAGE_SIMPLE"
+            />
+            <Tree
+              v-else
+              :tree-data="treeData"
+              :selected-keys="
+                selectedDeptId !== null ? [String(selectedDeptId)] : []
+              "
+              default-expand-all
+              @select="onSelectDept"
+            />
+          </div>
+        </Spin>
+      </aside>
+
+      <!-- 右侧员工表：不设自适应高度，内容自然撑开 + 横向滚动 -->
+      <div class="min-w-0 flex-1 rounded-lg border border-border bg-card p-3">
+        <Table
+          size="small"
+          :columns="columns"
+          :data-source="users"
+          :loading="tableLoading"
+          :pagination="false"
+          row-key="id"
+          :scroll="{ x: 900 }"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'matched'">
+              <Tag v-if="record.matched_admin_id" color="success">
+                {{ record.matched_admin_name || `#${record.matched_admin_id}` }}
+              </Tag>
+              <span v-else class="text-gray-400">未匹配</span>
+            </template>
+            <template v-else-if="column.key === 'status'">
+              <Tag :color="record.status === 1 ? 'success' : 'default'">
+                {{ statusLabel(Number(record.status)) }}
+              </Tag>
+            </template>
+          </template>
+        </Table>
+        <div class="mt-3 flex justify-end">
+          <Pagination
+            :current="page"
+            :page-size="pageSize"
+            :total="total"
+            show-size-changer
+            :page-size-options="['10', '20', '50', '100']"
+            @change="onPageChange"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/system/oa-robot/components/app-credential-modal.vue b/apps/web-antd/src/views/system/oa-robot/components/app-credential-modal.vue
new file mode 100644
index 00000000..f83318c5
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-robot/components/app-credential-modal.vue
@@ -0,0 +1,184 @@
+<script lang="ts" setup>
+/**
+ * 企业微信应用 API「改凭证」弹窗
+ * 仅保存凭证策略（平台默认 / 自定义 corp/secret/agent）；测试请到列表「测试」弹窗选人/选群
+ */
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Alert, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { updateOaRobotAppCredential } from '#/views/system/oa-robot/api';
+import {
+  isUsePlatformCredential,
+  showCustomAppCredential,
+} from '#/views/system/oa-robot/config/form';
+
+const gridApi = ref();
+const robotId = ref(0);
+
+const [Form, formApi] = useVbenForm({
+  wrapperClass: 'grid-cols-12',
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    componentProps: { class: 'w-full' },
+  },
+  layout: 'horizontal',
+  showDefaultActions: false,
+  schema: [
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '使用平台默认凭证', value: 1 },
+          { label: '自定义凭证', value: 0 },
+        ],
+      },
+      defaultValue: 1,
+      fieldName: 'use_platform_credential',
+      label: '凭证来源',
+      rules: 'selectRequired',
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'corp_id',
+      label: '企业 ID',
+      componentProps: { placeholder: 'corpid', autocomplete: 'off' },
+      dependencies: {
+        triggerFields: ['use_platform_credential'],
+        show: (values: { use_platform_credential?: number }) =>
+          showCustomAppCredential({
+            platform_code: 'work_wechat_app',
+            use_platform_credential: values.use_platform_credential,
+          }),
+        rules: (values: { use_platform_credential?: number }) =>
+          showCustomAppCredential({
+            platform_code: 'work_wechat_app',
+            use_platform_credential: values.use_platform_credential,
+          })
+            ? 'required'
+            : null,
+      },
+    },
+    {
+      component: 'VbenInputPassword',
+      fieldName: 'secret',
+      label: '应用 Secret',
+      componentProps: {
+        placeholder: '留空表示不修改；填写则覆盖',
+        autocomplete: 'new-password',
+      },
+      dependencies: {
+        triggerFields: ['use_platform_credential'],
+        show: (values: { use_platform_credential?: number }) =>
+          showCustomAppCredential({
+            platform_code: 'work_wechat_app',
+            use_platform_credential: values.use_platform_credential,
+          }),
+      },
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'agent_id',
+      label: '应用 AgentId',
+      componentProps: { placeholder: '企业应用 agentid', min: 1, class: 'w-full' },
+      dependencies: {
+        triggerFields: ['use_platform_credential'],
+        show: (values: { use_platform_credential?: number }) =>
+          showCustomAppCredential({
+            platform_code: 'work_wechat_app',
+            use_platform_credential: values.use_platform_credential,
+          }),
+        rules: (values: { use_platform_credential?: number }) =>
+          showCustomAppCredential({
+            platform_code: 'work_wechat_app',
+            use_platform_credential: values.use_platform_credential,
+          })
+            ? 'required'
+            : null,
+      },
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'chat_id',
+      label: '默认群聊 ID',
+      componentProps: {
+        placeholder: '可选；场景选群为主。填写后可同步成员',
+        autocomplete: 'off',
+      },
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    const e = await formApi.validate();
+    if (!e.valid) return;
+    const values = await formApi.getValues();
+    const usePlatform = Number(values.use_platform_credential ?? 1);
+    // 自定义凭证时 secret 首次必填；编辑留空表示不改
+    if (
+      !isUsePlatformCredential({
+        platform_code: 'work_wechat_app',
+        use_platform_credential: usePlatform,
+      }) &&
+      !String(values.secret || '').trim()
+    ) {
+      // 编辑场景允许留空不改；若库中本无 secret 会由后端校验
+    }
+    modalApi.setState({ confirmLoading: true });
+    try {
+      await updateOaRobotAppCredential({
+        id: robotId.value,
+        use_platform_credential: usePlatform,
+        corp_id: String(values.corp_id || ''),
+        secret: String(values.secret || ''),
+        agent_id: Number(values.agent_id || 0) || undefined,
+        chat_id: String(values.chat_id || ''),
+      });
+      message.success('凭证已更新');
+      gridApi.value?.query?.() || gridApi.value?.reload?.();
+      modalApi.close();
+    } finally {
+      modalApi.setState({ confirmLoading: false });
+    }
+  },
+  onOpenChange(isOpen: boolean) {
+    if (!isOpen) return;
+    const data = modalApi.getData<{ row: any; gridApi: any }>() ?? {};
+    gridApi.value = data.gridApi;
+    const row = data.row || {};
+    robotId.value = Number(row.id || 0);
+    formApi.setValues({
+      use_platform_credential: Number(row.use_platform_credential ?? 1),
+      corp_id: row.corp_id || '',
+      secret: '',
+      agent_id: Number(row.agent_id || 0) || undefined,
+      chat_id: row.chat_id || '',
+    });
+    modalApi.setState({
+      title: `改凭证 - ${row.name || ''}`,
+    });
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[40%]">
+    <Alert
+      type="info"
+      show-icon
+      message="本弹窗仅保存凭证"
+      description="冒烟测试请关闭后在列表点击「测试」，并选择接收员工或群聊后再发送。"
+      style="margin-bottom: 16px"
+    />
+    <Form />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/system/oa-scene/components/form-page.vue b/apps/web-antd/src/views/system/oa-scene/components/form-page.vue
new file mode 100644
index 00000000..0bcea432
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-scene/components/form-page.vue
@@ -0,0 +1,1131 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import {
+  Alert,
+  Button,
+  Checkbox,
+  Empty,
+  Input,
+  InputNumber,
+  message,
+  Radio,
+  RadioGroup,
+  Select,
+  Spin,
+  Tabs,
+  Textarea,
+} from 'ant-design-vue';
+
+import UploadImage from '#/components/form/components/upload-image.vue';
+import UploadOssFile from '#/components/form/components/upload-oss-file.vue';
+import { useVbenForm } from '#/adapter/form';
+import { getAdminList } from '#/views/system/admin/api';
+import { getOaPlatformList } from '#/views/system/oa-platform/api';
+import {
+  getOaRobotChatMembers,
+  getOaRobotList,
+} from '#/views/system/oa-robot/api';
+import { isWorkWechatApp } from '#/views/system/oa-robot/config/form';
+import TestResultModal from '#/views/system/oa-robot/components/test-result-modal.vue';
+import {
+  createOaScene,
+  getOaMessageTypes,
+  testSendOaScene,
+  updateOaScene,
+} from '#/views/system/oa-scene/api';
+import { modalFormProps } from '#/views/system/oa-scene/config/form';
+import TemplateCardForm from '#/views/system/oa-scene/components/template-card-form.vue';
+import SceneTargetsPanel, {
+  type SceneTargetItem,
+} from '#/views/system/oa-scene/components/scene-targets-panel.vue';
+
+/**
+ * OA 场景新增/编辑内页表单（由列表页 v-if 挂载，替代原 modal.vue）
+ *
+ * 提交 at_users 统一为双结构（后端兼容旧纯数组）：
+ *   { work_wechat: { admin_ids: number[], userids: string[] }, work_wechat_app: { ... } }
+ * work_wechat_app 额外提交 targets：人/多群/每群 @
+ */
+
+interface MessageTypeOption {
+  message_type: string;
+  name: string;
+  icon: string;
+  need_media: number;
+  payload_schema: string | null;
+}
+
+interface PayloadFieldSchema {
+  name: string;
+  label: string;
+  component: string;
+  required?: boolean;
+  props?: Record<string, any>;
+}
+
+/** TestResultModal 所需的结果项结构 */
+interface TestResultItem {
+  message_type: string;
+  name: string;
+  success: boolean;
+  message: string;
+  request?: any;
+  response: any;
+  cost_ms: number;
+}
+
+const props = defineProps<{
+  /** 详情或空对象（新增） */
+  values: Record<string, any>;
+  /** 是否编辑模式 */
+  isUpdate: boolean;
+}>();
+
+const emit = defineEmits<{
+  back: [];
+  saved: [];
+}>();
+
+defineOptions({ name: 'OaSceneFormPage' });
+
+const loading = ref(false);
+const saving = ref(false);
+const testing = ref(false);
+
+/** 平台列表（仅展示启用的平台） */
+const platforms = ref<any[]>([]);
+/** 启用平台下的所有机器人 */
+const allRobots = ref<any[]>([]);
+/** 员工列表（用于 @ 人多选） */
+const adminList = ref<any[]>([]);
+/** 当前选中的 Tab 平台编码 */
+const activePlatformTab = ref('');
+
+/** 各平台支持的消息类型列表（来自 message-types 接口） */
+const messageTypesMap = ref<Record<string, MessageTypeOption[]>>({});
+
+/**
+ * 多维状态：
+ * - selectedMessageType: 每个平台选中的消息类型
+ * - payloadValues: 每个平台 payload 字段值（按 message_type 不同字段不同）
+ */
+const selectedMessageType = ref<Record<string, string>>({});
+const payloadValues = ref<Record<string, Record<string, any>>>({});
+
+/** 机器人勾选（按平台分组） */
+const selectedRobots = ref<Record<string, number[]>>({});
+/** @ 配置（按平台）：admin_ids=系统员工，userids=应用群成员 */
+const selectedAtUsers = ref<
+  Record<string, { admin_ids: number[]; userids: string[] }>
+>({});
+/** 应用 API 群成员选项（按平台合并已选机器人的成员） */
+const membersByPlatform = ref<
+  Record<string, { userid: string; name: string }[]>
+>({});
+/** 应用 API 投递目标（人 / 群 / 每群 @） */
+const sceneTargets = ref<SceneTargetItem[]>([]);
+/** 投递目标面板实例（保存前校验客户群确认人） */
+const targetsPanelRef = ref<{ validateBeforeSubmit: () => string } | null>(
+  null,
+);
+/** 暂存待回显的 robot_ids（数据加载完后处理） */
+let pendingRobotIds: number[] = [];
+/** 暂存待回显的 targets */
+let pendingTargets: SceneTargetItem[] = [];
+
+/** 业务传参示例值（仅测试用，不落库） */
+const testParams = ref({
+  content: '',
+  title: '',
+  url: '',
+  media_url: '',
+});
+/** 传参示例里展示的 scene_code 提示 */
+const formSceneCode = ref('');
+
+/** 业务可传字段说明（与 SendOaNotifyJob 覆盖规则对齐） */
+const DISPATCH_PARAM_FIELDS = [
+  {
+    key: 'content' as const,
+    label: 'content',
+    hint: '正文：覆盖各平台 payload.content',
+  },
+  {
+    key: 'title' as const,
+    label: 'title',
+    hint: '标题：覆盖 payload.title',
+  },
+  {
+    key: 'url' as const,
+    label: 'url',
+    hint: '链接：覆盖 payload.url',
+  },
+  {
+    key: 'media_url' as const,
+    label: 'media_url',
+    hint: '媒体：覆盖 payload.media_url',
+  },
+];
+
+const pageTitle = computed(() =>
+  props.isUpdate ? '编辑通知场景' : '新增通知场景',
+);
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+/** 复用机器人模块的测试结果弹窗，展示场景测试发送明细 */
+const [TestResultModalComponent, testResultModalApi] = useVbenModal({
+  connectedComponent: TestResultModal,
+});
+
+/**
+ * 规范化详情回显的 at_users（兼容旧纯数组）
+ */
+function normalizeAtUsers(
+  raw: Record<string, any> | undefined,
+): Record<string, { admin_ids: number[]; userids: string[] }> {
+  const result: Record<string, { admin_ids: number[]; userids: string[] }> = {};
+  for (const [code, val] of Object.entries(raw || {})) {
+    if (Array.isArray(val)) {
+      result[code] = {
+        admin_ids: val.map((id) => Number(id)).filter((id) => id > 0),
+        userids: [],
+      };
+    } else {
+      result[code] = {
+        admin_ids: ((val as any)?.admin_ids || [])
+          .map((id: any) => Number(id))
+          .filter((id: number) => id > 0),
+        userids: ((val as any)?.userids || [])
+          .map((u: any) => String(u))
+          .filter((u: string) => u !== ''),
+      };
+    }
+  }
+  return result;
+}
+
+function ensureAtSlot(platformCode: string) {
+  if (!selectedAtUsers.value[platformCode]) {
+    selectedAtUsers.value = {
+      ...selectedAtUsers.value,
+      [platformCode]: { admin_ids: [], userids: [] },
+    };
+  }
+}
+
+function adminIdsOf(platformCode: string): number[] {
+  return selectedAtUsers.value[platformCode]?.admin_ids || [];
+}
+
+function useridsOf(platformCode: string): string[] {
+  return selectedAtUsers.value[platformCode]?.userids || [];
+}
+
+/**
+ * 根据 props.values 重置并回显表单（等价于原 modal onOpenChange 打开逻辑）
+ */
+function initFromValues(values: Record<string, any>) {
+  selectedMessageType.value = {};
+  payloadValues.value = {};
+  selectedRobots.value = {};
+  selectedAtUsers.value = {};
+  sceneTargets.value = [];
+  testParams.value = { content: '', title: '', url: '', media_url: '' };
+  formSceneCode.value = String(values?.scene_code || '');
+  if (values && Object.keys(values).length > 0) {
+    formApi.setValues({
+      ...values,
+      // 编辑回显时不带 message_config 进 form（避免被 form schema 当字段处理）
+      message_config: undefined,
+    });
+    const config = values.message_config || {};
+    for (const code of Object.keys(config)) {
+      selectedMessageType.value[code] = config[code].message_type || 'text';
+      payloadValues.value[code] = config[code].payload || {};
+    }
+    pendingRobotIds = values.robot_ids || [];
+    selectedAtUsers.value = normalizeAtUsers(values.at_users);
+    pendingTargets = Array.isArray(values.targets) ? values.targets : [];
+    sceneTargets.value = pendingTargets.map((t: any) => ({
+      target_type: Number(t.target_type) === 1 ? 1 : 2,
+      platform_code: t.platform_code || 'work_wechat_app',
+      admin_id: Number(t.admin_id || 0) || undefined,
+      chat_id: Number(t.chat_id || 0) || undefined,
+      at_admin_ids: (t.at_admin_ids || [])
+        .map(Number)
+        .filter((n: number) => n > 0),
+      at_userids: (t.at_userids || [])
+        .map(String)
+        .filter((s: string) => s !== ''),
+      sender_userid: String(t.sender_userid || ''),
+    }));
+  } else {
+    formApi.resetForm();
+    pendingRobotIds = [];
+    pendingTargets = [];
+  }
+  loadData();
+}
+
+watch(
+  () => props.values,
+  (values) => {
+    initFromValues(values || {});
+  },
+  { immediate: true },
+);
+
+/**
+ * 加载平台、消息类型、机器人、员工列表（并行）
+ */
+async function loadData() {
+  loading.value = true;
+  try {
+    const [platformList, typesRes, adminRes] = await Promise.all([
+      getOaPlatformList(),
+      getOaMessageTypes(),
+      getAdminList({ page: 1, pageSize: 500 }),
+    ]);
+
+    const platformRows: any[] = Array.isArray(platformList)
+      ? platformList
+      : platformList?.data || [];
+    platforms.value = platformRows
+      .filter((p: any) => p.enabled === 1)
+      .sort((a: any, b: any) => (b.sort || 0) - (a.sort || 0));
+    activePlatformTab.value = platforms.value[0]?.platform_code || '';
+
+    const typesData = (typesRes as any)?.data ?? typesRes ?? {};
+    messageTypesMap.value = typesData;
+
+    const robotRes = await getOaRobotList({
+      page: 1,
+      pageSize: 500,
+    });
+    const robotRows: any[] = robotRes?.items || robotRes?.data || [];
+    const boundIdSet = new Set(pendingRobotIds.map((id) => Number(id)));
+    allRobots.value = robotRows.filter((r: any) => {
+      const onPlatform = platforms.value.some(
+        (p: any) => p.platform_code === r.platform_code,
+      );
+      if (!onPlatform) return false;
+      return Number(r.status) === 1 || boundIdSet.has(Number(r.id));
+    });
+
+    const adminRows: any[] = adminRes?.items || adminRes?.data || [];
+    adminList.value = adminRows.map((a: any) => ({
+      id: a.id,
+      name: a.nick_name || a.name || a.username || `员工${a.id}`,
+    }));
+
+    if (pendingRobotIds.length > 0) {
+      selectedRobots.value = groupRobotsByPlatform(pendingRobotIds);
+    }
+    await refreshAppMembers();
+
+    for (const platform of platforms.value) {
+      const code = platform.platform_code;
+      ensureAtSlot(code);
+      if (!selectedMessageType.value[code]) {
+        const types = messageTypesMap.value[code] || [];
+        const defaultType = types.find((t) => t.message_type === 'text');
+        selectedMessageType.value[code] =
+          defaultType?.message_type || types[0]?.message_type || '';
+        payloadValues.value[code] = {};
+      }
+    }
+  } catch (e) {
+    console.error('加载场景数据失败', e);
+    message.error('加载场景数据失败，请刷新重试');
+  } finally {
+    loading.value = false;
+  }
+}
+
+function groupRobotsByPlatform(robotIds: number[]): Record<string, number[]> {
+  const result: Record<string, number[]> = {};
+  for (const id of robotIds) {
+    const robot = allRobots.value.find((r) => r.id === id);
+    if (robot) {
+      if (!result[robot.platform_code]) {
+        result[robot.platform_code] = [];
+      }
+      result[robot.platform_code].push(id);
+    }
+  }
+  return result;
+}
+
+/**
+ * 组装当前表单的场景草稿（保存与测试发送共用）
+ */
+async function assembleSceneDraft() {
+  const baseValues = await formApi.getValues();
+  const message_config: Record<string, any> = {};
+  for (const platform of platforms.value) {
+    const code = platform.platform_code;
+    const messageType = selectedMessageType.value[code];
+    if (!messageType) continue;
+    message_config[code] = {
+      message_type: messageType,
+      payload: payloadValues.value[code] || {},
+    };
+  }
+  const robot_ids: number[] = [];
+  for (const platformCode of Object.keys(selectedRobots.value)) {
+    robot_ids.push(...(selectedRobots.value[platformCode] || []));
+  }
+  const at_users: Record<
+    string,
+    { admin_ids: number[]; userids: string[] }
+  > = {};
+  for (const platformCode of Object.keys(selectedAtUsers.value)) {
+    if (isWorkWechatApp(platformCode)) continue;
+    const slot = selectedAtUsers.value[platformCode] || {
+      admin_ids: [],
+      userids: [],
+    };
+    if (slot.admin_ids.length > 0 || slot.userids.length > 0) {
+      at_users[platformCode] = {
+        admin_ids: slot.admin_ids,
+        userids: slot.userids,
+      };
+    }
+  }
+  return {
+    ...baseValues,
+    message_config,
+    robot_ids,
+    at_users,
+    targets: sceneTargets.value,
+  };
+}
+
+/**
+ * 将场景测试 API 结果映射为 TestResultModal 所需结构
+ */
+function mapSceneResultsToModalItems(rows: any[]): TestResultItem[] {
+  return rows.map((r) => ({
+    message_type: String(r.message_type || r.platform_code || 'text'),
+    name: String(
+      r.name ||
+        `${r.robot_name || ''}${r.target_label ? ` → ${r.target_label}` : ''}`,
+    ),
+    success: !!r.success,
+    message: String(r.message || ''),
+    request: r.request,
+    response: r.response ?? {},
+    cost_ms: Number(r.cost_ms || 0),
+  }));
+}
+
+/**
+ * 保存场景：校验通过后提交，成功则通知父级并返回列表
+ */
+async function handleSave() {
+  const e = await formApi.validate();
+  if (!e.valid) return;
+  const targetErr = targetsPanelRef.value?.validateBeforeSubmit?.() || '';
+  if (targetErr) {
+    message.warning(targetErr);
+    return;
+  }
+  saving.value = true;
+  try {
+    const payload = await assembleSceneDraft();
+    const submitApi = props.isUpdate ? updateOaScene : createOaScene;
+    await submitApi(payload);
+    message.success('保存成功');
+    emit('saved');
+    emit('back');
+  } finally {
+    saving.value = false;
+  }
+}
+
+/**
+ * 测试发送：用当前草稿 + 示例传参同步投递，完成后打开 TestResultModal
+ */
+async function handleTestSend() {
+  const draft = await assembleSceneDraft();
+  formSceneCode.value = String(draft.scene_code || formSceneCode.value || '');
+  if (!draft.robot_ids || draft.robot_ids.length === 0) {
+    message.warning('请先勾选至少一个推送机器人');
+    return;
+  }
+  if (!draft.message_config || Object.keys(draft.message_config).length === 0) {
+    message.warning('请先配置至少一个平台的消息类型');
+    return;
+  }
+  const targetErr = targetsPanelRef.value?.validateBeforeSubmit?.() || '';
+  if (targetErr) {
+    message.warning(targetErr);
+    return;
+  }
+  testing.value = true;
+  try {
+    const result = await testSendOaScene({
+      id: Number(draft.id || 0) || undefined,
+      scene_code: String(draft.scene_code || ''),
+      scene_name: String(draft.scene_name || ''),
+      message_config: draft.message_config,
+      robot_ids: draft.robot_ids,
+      at_users: draft.at_users,
+      targets: draft.targets,
+      test_params: { ...testParams.value },
+    });
+    const rows = Array.isArray(result?.results) ? result.results : [];
+    const total = result?.total ?? rows.length;
+    const succ =
+      result?.success_count ?? rows.filter((r: any) => r.success).length;
+    const fail = total - succ;
+    const summary = `共 ${total} 条，成功 ${succ}，失败 ${fail}`;
+    if (fail === 0) {
+      message.success(summary);
+    } else if (succ === 0) {
+      message.error(summary);
+    } else {
+      message.warning(summary);
+    }
+    testResultModalApi.setData({
+      results: mapSceneResultsToModalItems(rows),
+      summary,
+      robotName: String(draft.scene_name || ''),
+      platformCode: 'scene',
+      testContent: testParams.value.content || '',
+      sentAt: Math.floor(Date.now() / 1000),
+    });
+    testResultModalApi.open();
+  } catch (e: any) {
+    message.error(e?.message || '测试发送失败');
+  } finally {
+    testing.value = false;
+  }
+}
+
+function robotsOfPlatform(platformCode: string): any[] {
+  return allRobots.value.filter((r: any) => r.platform_code === platformCode);
+}
+
+function checkedRobotsOfPlatform(platformCode: string): number[] {
+  return selectedRobots.value[platformCode] || [];
+}
+
+function toggleRobot(platformCode: string, robotId: number, checked: boolean) {
+  const current = new Set(selectedRobots.value[platformCode] || []);
+  if (checked) current.add(robotId);
+  else current.delete(robotId);
+  selectedRobots.value = {
+    ...selectedRobots.value,
+    [platformCode]: Array.from(current),
+  };
+  if (isWorkWechatApp(platformCode)) {
+    refreshAppMembers();
+  }
+}
+
+function toggleAtUser(platformCode: string, adminId: number, checked: boolean) {
+  ensureAtSlot(platformCode);
+  const current = new Set(adminIdsOf(platformCode));
+  if (checked) current.add(adminId);
+  else current.delete(adminId);
+  selectedAtUsers.value = {
+    ...selectedAtUsers.value,
+    [platformCode]: {
+      admin_ids: Array.from(current),
+      userids: useridsOf(platformCode),
+    },
+  };
+}
+
+function toggleAtMember(platformCode: string, userid: string, checked: boolean) {
+  ensureAtSlot(platformCode);
+  const current = new Set(useridsOf(platformCode));
+  if (checked) current.add(userid);
+  else current.delete(userid);
+  selectedAtUsers.value = {
+    ...selectedAtUsers.value,
+    [platformCode]: {
+      admin_ids: adminIdsOf(platformCode),
+      userids: Array.from(current),
+    },
+  };
+}
+
+function toggleAllRobots(platformCode: string, e: any) {
+  const checked = (e?.target as HTMLInputElement)?.checked;
+  const robotIds = robotsOfPlatform(platformCode).map((r) => r.id);
+  selectedRobots.value = {
+    ...selectedRobots.value,
+    [platformCode]: checked ? robotIds : [],
+  };
+  if (isWorkWechatApp(platformCode)) {
+    refreshAppMembers();
+  }
+}
+
+function toggleAllAtUsers(platformCode: string, e: any) {
+  const checked = (e?.target as HTMLInputElement)?.checked;
+  const adminIds = adminList.value.map((a) => a.id);
+  ensureAtSlot(platformCode);
+  selectedAtUsers.value = {
+    ...selectedAtUsers.value,
+    [platformCode]: {
+      admin_ids: checked ? adminIds : [],
+      userids: useridsOf(platformCode),
+    },
+  };
+}
+
+function toggleAllAtMembers(platformCode: string, e: any) {
+  const checked = (e?.target as HTMLInputElement)?.checked;
+  const allIds = (membersByPlatform.value[platformCode] || []).map(
+    (m) => m.userid,
+  );
+  ensureAtSlot(platformCode);
+  selectedAtUsers.value = {
+    ...selectedAtUsers.value,
+    [platformCode]: {
+      admin_ids: adminIdsOf(platformCode),
+      userids: checked ? allIds : [],
+    },
+  };
+}
+
+/**
+ * 按已选应用 API 机器人合并拉取群成员（userid 去重）
+ */
+async function refreshAppMembers() {
+  const appCodes = platforms.value
+    .map((p) => p.platform_code)
+    .filter((code) => isWorkWechatApp(code));
+  for (const code of appCodes) {
+    const robotIds = selectedRobots.value[code] || [];
+    if (robotIds.length === 0) {
+      membersByPlatform.value = { ...membersByPlatform.value, [code]: [] };
+      continue;
+    }
+    try {
+      const list = await getOaRobotChatMembers({ robot_ids: robotIds });
+      const rows: any[] = Array.isArray(list) ? list : list?.data || [];
+      membersByPlatform.value = {
+        ...membersByPlatform.value,
+        [code]: rows.map((m) => ({
+          userid: String(m.userid),
+          name: String(m.name || ''),
+        })),
+      };
+    } catch (e) {
+      console.error('加载应用群成员失败', e);
+      membersByPlatform.value = { ...membersByPlatform.value, [code]: [] };
+    }
+  }
+}
+
+/**
+ * 解析字段 acceptTypes（兼容缺省：图片字段默认 [1]）
+ */
+function fieldAcceptTypes(field: PayloadFieldSchema): number[] {
+  const raw = field.props?.acceptTypes;
+  if (Array.isArray(raw) && raw.length > 0) {
+    return raw.map(Number).filter((n) => !Number.isNaN(n));
+  }
+  return [1];
+}
+
+/**
+ * 是否按图片上传组件渲染（仅图片类型）
+ */
+function isImageMediaField(field: PayloadFieldSchema) {
+  const types = fieldAcceptTypes(field);
+  return types.length === 1 && types[0] === 1;
+}
+
+/**
+ * 图片字段：string URL ↔ UploadImage 的 string[]
+ */
+function imageUrlsOf(platformCode: string, fieldName: string): string[] {
+  const url = getPayloadValue(platformCode, fieldName);
+  return url ? [String(url)] : [];
+}
+
+function setImageUrls(
+  platformCode: string,
+  fieldName: string,
+  urls: string[],
+) {
+  setPayloadValue(platformCode, fieldName, urls[0] || '');
+}
+
+/**
+ * 文件/语音上传 accept
+ */
+function fileInputAccept(field: PayloadFieldSchema) {
+  const types = fieldAcceptTypes(field);
+  if (types.includes(3)) {
+    return 'audio/*,.amr,.mp3,.wav';
+  }
+  return '.pdf,.doc,.docx,.zip,.rar,.txt,application/pdf,*/*';
+}
+
+function currentPayloadSchema(platformCode: string): PayloadFieldSchema[] {
+  const messageType = selectedMessageType.value[platformCode];
+  if (!messageType) return [];
+  const types = messageTypesMap.value[platformCode] || [];
+  const typeInfo = types.find((t) => t.message_type === messageType);
+  if (!typeInfo?.payload_schema) return [];
+  try {
+    return JSON.parse(typeInfo.payload_schema);
+  } catch {
+    return [];
+  }
+}
+
+function getPayloadValue(platformCode: string, fieldName: string): any {
+  return payloadValues.value[platformCode]?.[fieldName];
+}
+
+function setPayloadValue(platformCode: string, fieldName: string, value: any) {
+  const current = payloadValues.value[platformCode] || {};
+  payloadValues.value = {
+    ...payloadValues.value,
+    [platformCode]: { ...current, [fieldName]: value },
+  };
+}
+
+function handleMessageTypeChange(platformCode: string, messageType: string) {
+  selectedMessageType.value = {
+    ...selectedMessageType.value,
+    [platformCode]: messageType,
+  };
+  payloadValues.value = {
+    ...payloadValues.value,
+    [platformCode]: {},
+  };
+}
+
+const isEmpty = computed(() => platforms.value.length === 0);
+
+watch(
+  () => platforms.value,
+  (list) => {
+    const validCodes = new Set(list.map((p) => p.platform_code));
+    const newRobots: Record<string, number[]> = {};
+    const newAtUsers: Record<
+      string,
+      { admin_ids: number[]; userids: string[] }
+    > = {};
+    for (const code of validCodes) {
+      newRobots[code] = selectedRobots.value[code] || [];
+      newAtUsers[code] = selectedAtUsers.value[code] || {
+        admin_ids: [],
+        userids: [],
+      };
+    }
+    selectedRobots.value = newRobots;
+    selectedAtUsers.value = newAtUsers;
+  },
+);
+</script>
+
+<template>
+  <Page :title="pageTitle" auto-content-height>
+    <template #extra>
+      <div class="flex items-center gap-2">
+        <Button @click="emit('back')">返回</Button>
+        <Button :loading="testing" @click="handleTestSend">测试发送</Button>
+        <Button type="primary" :loading="saving" @click="handleSave">
+          保存
+        </Button>
+      </div>
+    </template>
+
+    <Spin :spinning="loading">
+      <Form />
+
+      <div class="mt-4">
+        <div class="mb-2 font-medium">
+          各平台消息配置 + 关联机器人 + @ 人员
+        </div>
+        <div v-if="isEmpty" class="empty-hint py-4 text-center">
+          暂无启用的平台，请先在「系统配置 → OA 通知」中启用平台
+        </div>
+        <Tabs v-else v-model:active-key="activePlatformTab">
+          <Tabs.TabPane
+            v-for="platform in platforms"
+            :key="platform.platform_code"
+            :tab="platform.name"
+          >
+            <div class="oa-scene-tab">
+              <div class="section">
+                <div class="section-title">消息类型</div>
+                <RadioGroup
+                  :value="selectedMessageType[platform.platform_code]"
+                  size="small"
+                  @update:value="
+                    (val) => handleMessageTypeChange(platform.platform_code, val)
+                  "
+                >
+                  <Radio
+                    v-for="opt in (messageTypesMap[platform.platform_code] || [])"
+                    :key="opt.message_type"
+                    :value="opt.message_type"
+                  >
+                    {{ opt.name }}
+                  </Radio>
+                </RadioGroup>
+              </div>
+
+              <div class="section">
+                <div class="section-title">消息内容</div>
+                <div class="payload-form">
+                  <template
+                    v-for="field in currentPayloadSchema(platform.platform_code)"
+                    :key="field.name"
+                  >
+                    <div
+                      v-if="field.component === 'TemplateCardEditor'"
+                      class="payload-row"
+                    >
+                      <label class="payload-label">{{ field.label }}</label>
+                      <TemplateCardForm
+                        :model-value="getPayloadValue(platform.platform_code, 'template_card') || {}"
+                        @update:model-value="
+                          (val) => setPayloadValue(platform.platform_code, 'template_card', val)
+                        "
+                      />
+                    </div>
+
+                    <!-- 图片：上传 + 素材库；文件/语音：上传 + 素材库（禁止手填 URL） -->
+                    <div
+                      v-else-if="field.component === 'GalleryPickLink'"
+                      class="payload-row"
+                    >
+                      <label class="payload-label">
+                        {{ field.label }}
+                        <span v-if="field.required" class="required">*</span>
+                      </label>
+                      <UploadImage
+                        v-if="isImageMediaField(field)"
+                        :model-value="
+                          imageUrlsOf(platform.platform_code, field.name)
+                        "
+                        :multiple="false"
+                        :max-count="1"
+                        :accept-types="fieldAcceptTypes(field)"
+                        @update:model-value="
+                          (urls) =>
+                            setImageUrls(
+                              platform.platform_code,
+                              field.name,
+                              urls,
+                            )
+                        "
+                      />
+                      <UploadOssFile
+                        v-else
+                        :model-value="
+                          getPayloadValue(platform.platform_code, field.name) ||
+                          ''
+                        "
+                        :max-count="1"
+                        :accept-types="fieldAcceptTypes(field)"
+                        :accept="fileInputAccept(field)"
+                        @update:model-value="
+                          (url) =>
+                            setPayloadValue(
+                              platform.platform_code,
+                              field.name,
+                              url || '',
+                            )
+                        "
+                      />
+                    </div>
+
+                    <div v-else-if="field.component === 'Textarea'" class="payload-row">
+                      <label class="payload-label">
+                        {{ field.label }}
+                        <span v-if="field.required" class="required">*</span>
+                      </label>
+                      <Textarea
+                        :value="getPayloadValue(platform.platform_code, field.name)"
+                        :rows="field.props?.rows || 3"
+                        :placeholder="field.props?.placeholder"
+                        @update:value="
+                          (val) => setPayloadValue(platform.platform_code, field.name, val)
+                        "
+                      />
+                    </div>
+
+                    <div v-else-if="field.component === 'RadioGroup'" class="payload-row">
+                      <label class="payload-label">
+                        {{ field.label }}
+                        <span v-if="field.required" class="required">*</span>
+                      </label>
+                      <RadioGroup
+                        :value="getPayloadValue(platform.platform_code, field.name)"
+                        :options="field.props?.options"
+                        size="small"
+                        @update:value="
+                          (val) => setPayloadValue(platform.platform_code, field.name, val)
+                        "
+                      />
+                    </div>
+
+                    <div v-else-if="field.component === 'Select'" class="payload-row">
+                      <label class="payload-label">
+                        {{ field.label }}
+                        <span v-if="field.required" class="required">*</span>
+                      </label>
+                      <Select
+                        :value="getPayloadValue(platform.platform_code, field.name)"
+                        :options="field.props?.options"
+                        :placeholder="field.props?.placeholder"
+                        size="small"
+                        @update:value="
+                          (val) => setPayloadValue(platform.platform_code, field.name, val)
+                        "
+                      />
+                    </div>
+
+                    <div v-else-if="field.component === 'InputNumber'" class="payload-row">
+                      <label class="payload-label">
+                        {{ field.label }}
+                        <span v-if="field.required" class="required">*</span>
+                      </label>
+                      <InputNumber
+                        :value="getPayloadValue(platform.platform_code, field.name)"
+                        :placeholder="field.props?.placeholder"
+                        size="small"
+                        style="width: 100%"
+                        @update:value="
+                          (val) => setPayloadValue(platform.platform_code, field.name, val)
+                        "
+                      />
+                    </div>
+
+                    <div v-else class="payload-row">
+                      <label class="payload-label">
+                        {{ field.label }}
+                        <span v-if="field.required" class="required">*</span>
+                      </label>
+                      <Input
+                        :value="getPayloadValue(platform.platform_code, field.name)"
+                        :placeholder="field.props?.placeholder"
+                        size="small"
+                        @update:value="
+                          (val) => setPayloadValue(platform.platform_code, field.name, val)
+                        "
+                      />
+                    </div>
+                  </template>
+
+                  <Empty
+                    v-if="currentPayloadSchema(platform.platform_code).length === 0"
+                    description="该消息类型无需配置内容"
+                    :image-style="{ height: '40px' }"
+                  />
+                </div>
+              </div>
+
+              <div class="section">
+                <div class="mb-2 flex items-center">
+                  <Checkbox
+                    :checked="
+                      robotsOfPlatform(platform.platform_code).length > 0 &&
+                      checkedRobotsOfPlatform(platform.platform_code).length ===
+                        robotsOfPlatform(platform.platform_code).length
+                    "
+                    @change="toggleAllRobots(platform.platform_code, $event)"
+                  >
+                    <span class="font-medium">推送机器人（全选）</span>
+                  </Checkbox>
+                </div>
+                <div
+                  v-if="robotsOfPlatform(platform.platform_code).length === 0"
+                  class="empty-hint"
+                >
+                  该平台暂无启用的机器人
+                </div>
+                <Checkbox.Group
+                  v-else
+                  :value="checkedRobotsOfPlatform(platform.platform_code)"
+                  class="flex flex-wrap gap-2"
+                >
+                  <Checkbox
+                    v-for="robot in robotsOfPlatform(platform.platform_code)"
+                    :key="robot.id"
+                    :value="robot.id"
+                    :checked="
+                      checkedRobotsOfPlatform(platform.platform_code).includes(robot.id)
+                    "
+                    @change="
+                      toggleRobot(
+                        platform.platform_code,
+                        robot.id,
+                        ($event.target as HTMLInputElement).checked,
+                      )
+                    "
+                  >
+                    {{ robot.name
+                    }}{{ Number(robot.status) === 0 ? '（已禁用）' : '' }}
+                  </Checkbox>
+                </Checkbox.Group>
+              </div>
+
+              <div v-if="isWorkWechatApp(platform.platform_code)" class="section">
+                <div class="section-title">投递目标</div>
+                <SceneTargetsPanel
+                  ref="targetsPanelRef"
+                  v-model="sceneTargets"
+                  :admin-list="adminList"
+                  :platform-code="platform.platform_code"
+                />
+              </div>
+              <div v-else class="section">
+                <div class="mb-2 flex items-center">
+                  <Checkbox
+                    :checked="
+                      adminList.length > 0 &&
+                      adminIdsOf(platform.platform_code).length ===
+                        adminList.length
+                    "
+                    @change="toggleAllAtUsers(platform.platform_code, $event)"
+                  >
+                    <span class="font-medium">@ 系统员工</span>
+                  </Checkbox>
+                </div>
+                <div v-if="adminList.length === 0" class="empty-hint">
+                  暂无员工可选
+                </div>
+                <Checkbox.Group
+                  v-else
+                  :value="adminIdsOf(platform.platform_code)"
+                  class="flex flex-wrap gap-2"
+                >
+                  <Checkbox
+                    v-for="admin in adminList"
+                    :key="admin.id"
+                    :value="admin.id"
+                    :checked="
+                      adminIdsOf(platform.platform_code).includes(admin.id)
+                    "
+                    @change="
+                      toggleAtUser(
+                        platform.platform_code,
+                        admin.id,
+                        ($event.target as HTMLInputElement).checked,
+                      )
+                    "
+                  >
+                    {{ admin.name }}
+                  </Checkbox>
+                </Checkbox.Group>
+              </div>
+            </div>
+          </Tabs.TabPane>
+        </Tabs>
+
+        <div class="section dispatch-params">
+          <div class="section-title">业务传参（测试用）</div>
+          <Alert
+            type="info"
+            show-icon
+            class="mb-3"
+            message="业务方调用示例"
+            :description="`OaNotifyService::dispatch('${formSceneCode || 'scene_code'}', ['content' => '...', 'title' => '...'])；非空示例值会覆盖场景 payload 对应字段`"
+          />
+          <div
+            v-for="field in DISPATCH_PARAM_FIELDS"
+            :key="field.key"
+            class="payload-row mb-2"
+          >
+            <label class="payload-label">
+              <code>{{ field.label }}</code>
+              <span class="param-hint">{{ field.hint }}</span>
+            </label>
+            <Input
+              v-model:value="testParams[field.key]"
+              :placeholder="`示例值（可选）`"
+              size="small"
+              allow-clear
+            />
+          </div>
+        </div>
+      </div>
+    </Spin>
+
+    <TestResultModalComponent />
+  </Page>
+</template>
+
+<style scoped>
+.oa-scene-tab {
+  max-height: 600px;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.section {
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px dashed var(--ant-color-border-secondary, #e5e6eb);
+}
+
+.section:last-child {
+  border-bottom: none;
+}
+
+.section-title {
+  margin-bottom: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ant-color-text, #1d2129);
+}
+
+.empty-hint {
+  color: var(--ant-color-text-tertiary, #86909c);
+}
+
+.payload-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.payload-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.payload-label {
+  font-size: 12px;
+  color: var(--ant-color-text-secondary, #4e5969);
+}
+
+.payload-label .required {
+  color: var(--ant-color-error, #f53f3f);
+  margin-left: 2px;
+}
+
+.payload-image {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.dispatch-params {
+  margin-top: 8px;
+}
+
+.param-hint {
+  margin-left: 8px;
+  font-weight: 400;
+  color: var(--ant-color-text-tertiary, #86909c);
+}
+</style>
diff --git a/apps/web-antd/src/views/system/oa-scene/components/scene-targets-panel.vue b/apps/web-antd/src/views/system/oa-scene/components/scene-targets-panel.vue
new file mode 100644
index 00000000..8f768771
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-scene/components/scene-targets-panel.vue
@@ -0,0 +1,355 @@
+<script lang="ts" setup>
+/**
+ * 企微应用 API 场景投递目标面板
+ * 支持：选人（多选）+ 选群（多选）+ 每群独立 @员工 / @userid
+ * 客户群必须配置「确认发送员工」sender_userid（add_msg_template.sender）
+ */
+import { computed, onMounted, ref, watch } from 'vue';
+
+import {
+  Button,
+  Checkbox,
+  Collapse,
+  CollapsePanel,
+  Select,
+  Tag,
+  message,
+} from 'ant-design-vue';
+
+import { getOaChatListByPlatform } from '#/views/system/oa-chat/api';
+import { getOaWwUserList } from '#/views/system/oa-chat/api/org';
+
+export interface SceneTargetItem {
+  target_type: 1 | 2;
+  platform_code: string;
+  admin_id?: number;
+  chat_id?: number;
+  at_admin_ids?: number[];
+  at_userids?: string[];
+  /** 客户群群发确认人 userid */
+  sender_userid?: string;
+}
+
+const props = defineProps<{
+  modelValue: SceneTargetItem[];
+  adminList: Array<{ id: number; name: string }>;
+  platformCode?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: SceneTargetItem[]): void;
+}>();
+
+const platformCode = computed(() => props.platformCode || 'work_wechat_app');
+
+/** 该平台下的群聊选项 */
+const chatOptions = ref<
+  Array<{
+    id: number;
+    name: string;
+    chat_kind: number;
+    external_id: string;
+  }>
+>([]);
+
+/** 企微组织架构员工（确认发送人 / 可作参考） */
+const wwUserOptions = ref<{ label: string; value: string }[]>([]);
+
+const personAdminIds = computed({
+  get() {
+    return props.modelValue
+      .filter((t) => t.target_type === 1 && (t.admin_id || 0) > 0)
+      .map((t) => Number(t.admin_id));
+  },
+  set(ids: number[]) {
+    rebuild(ids, groupChatIds.value);
+  },
+});
+
+const groupChatIds = computed({
+  get() {
+    return props.modelValue
+      .filter((t) => t.target_type === 2 && (t.chat_id || 0) > 0)
+      .map((t) => Number(t.chat_id));
+  },
+  set(ids: number[]) {
+    rebuild(personAdminIds.value, ids);
+  },
+});
+
+/** 按 chat_id 取群目标行（含 @ / 确认人配置） */
+function groupTargetOf(chatId: number): SceneTargetItem {
+  return (
+    props.modelValue.find(
+      (t) => t.target_type === 2 && Number(t.chat_id) === chatId,
+    ) || {
+      target_type: 2,
+      platform_code: platformCode.value,
+      chat_id: chatId,
+      at_admin_ids: [],
+      at_userids: [],
+      sender_userid: '',
+    }
+  );
+}
+
+function chatMeta(chatId: number) {
+  return chatOptions.value.find((c) => c.id === chatId);
+}
+
+/**
+ * 重建 targets：保留已有群的 @ / sender 配置，新增群默认空
+ */
+function rebuild(adminIds: number[], chatIds: number[]) {
+  const next: SceneTargetItem[] = [];
+  for (const id of adminIds) {
+    next.push({
+      target_type: 1,
+      platform_code: platformCode.value,
+      admin_id: id,
+    });
+  }
+  for (const chatId of chatIds) {
+    const prev = groupTargetOf(chatId);
+    next.push({
+      target_type: 2,
+      platform_code: platformCode.value,
+      chat_id: chatId,
+      at_admin_ids: [...(prev.at_admin_ids || [])],
+      at_userids: [...(prev.at_userids || [])],
+      sender_userid: prev.sender_userid || '',
+    });
+  }
+  emit('update:modelValue', next);
+}
+
+function updateGroupAt(
+  chatId: number,
+  patch: {
+    at_admin_ids?: number[];
+    at_userids?: string[];
+    sender_userid?: string;
+  },
+) {
+  const next = props.modelValue.map((t) => {
+    if (t.target_type !== 2 || Number(t.chat_id) !== chatId) return t;
+    return {
+      ...t,
+      at_admin_ids: patch.at_admin_ids ?? t.at_admin_ids ?? [],
+      at_userids: patch.at_userids ?? t.at_userids ?? [],
+      sender_userid:
+        patch.sender_userid !== undefined
+          ? patch.sender_userid
+          : t.sender_userid || '',
+    };
+  });
+  emit('update:modelValue', next);
+}
+
+/**
+ * 保存前校验：任一客户群缺确认发送员工则拦截
+ * @returns 错误文案，通过返回空串
+ */
+function validateBeforeSubmit(): string {
+  for (const chatId of groupChatIds.value) {
+    const meta = chatMeta(chatId);
+    if (Number(meta?.chat_kind) !== 2) continue;
+    const sender = String(groupTargetOf(chatId).sender_userid || '').trim();
+    if (!sender) {
+      return `客户群「${meta?.name || chatId}」请选择确认发送员工`;
+    }
+  }
+  return '';
+}
+
+defineExpose({ validateBeforeSubmit });
+
+async function loadChats() {
+  try {
+    const res = await getOaChatListByPlatform();
+    const grouped = res?.data ?? res ?? {};
+    const list = grouped[platformCode.value] || [];
+    chatOptions.value = (Array.isArray(list) ? list : []).map((c: any) => ({
+      id: Number(c.id),
+      name: String(c.name || ''),
+      chat_kind: Number(c.chat_kind ?? 2),
+      external_id: String(c.external_id || ''),
+    }));
+  } catch (e) {
+    console.error(e);
+    message.error('加载群聊列表失败');
+  }
+}
+
+async function loadWwUsers() {
+  try {
+    const userRes = await getOaWwUserList({
+      platform_code: platformCode.value,
+      page: 1,
+      pageSize: 200,
+    });
+    const userData = userRes?.data ?? userRes ?? {};
+    const items = Array.isArray(userData.items) ? userData.items : [];
+    wwUserOptions.value = items.map((u: any) => ({
+      label: u.name ? `${u.name}（${u.userid}）` : String(u.userid),
+      value: String(u.userid),
+    }));
+  } catch (e) {
+    console.error(e);
+    wwUserOptions.value = [];
+  }
+}
+
+onMounted(() => {
+  loadChats();
+  loadWwUsers();
+});
+watch(platformCode, () => {
+  loadChats();
+  loadWwUsers();
+});
+</script>
+
+<template>
+  <div class="scene-targets-panel">
+    <div class="mb-3 text-xs text-gray-500">
+      同一场景可同时选人、多群；客户群发送为群发任务，需指定确认员工并在企微客户端确认（非实时）
+    </div>
+
+    <!-- 发送给个人 -->
+    <div class="mb-4">
+      <div class="section-title">发送给个人</div>
+      <Checkbox.Group
+        v-model:value="personAdminIds"
+        class="flex flex-wrap gap-2"
+      >
+        <Checkbox
+          v-for="admin in adminList"
+          :key="admin.id"
+          :value="admin.id"
+        >
+          {{ admin.name }}
+        </Checkbox>
+      </Checkbox.Group>
+      <div v-if="adminList.length === 0" class="text-gray-400">暂无员工可选</div>
+    </div>
+
+    <!-- 发送给群 -->
+    <div class="mb-2">
+      <div class="section-title">发送给群</div>
+      <Select
+        v-model:value="groupChatIds"
+        mode="multiple"
+        allow-clear
+        class="w-full"
+        placeholder="选择群聊（可多选）"
+        :options="
+          chatOptions.map((c) => ({
+            label: `${c.name}${c.chat_kind === 2 ? '（客户群·需确认）' : '（应用群）'}`,
+            value: c.id,
+          }))
+        "
+      />
+    </div>
+
+    <Collapse v-if="groupChatIds.length > 0" ghost>
+      <CollapsePanel
+        v-for="chatId in groupChatIds"
+        :key="chatId"
+        :header="chatMeta(chatId)?.name || `群#${chatId}`"
+      >
+        <template #extra>
+          <Tag
+            :color="chatMeta(chatId)?.chat_kind === 1 ? 'blue' : 'orange'"
+            @click.stop
+          >
+            {{
+              chatMeta(chatId)?.chat_kind === 1
+                ? '应用群·实时'
+                : '客户群·需确认'
+            }}
+          </Tag>
+        </template>
+
+        <!-- 仅客户群：确认发送员工必填 -->
+        <div
+          v-if="chatMeta(chatId)?.chat_kind === 2"
+          class="mb-3"
+        >
+          <div class="mb-1 text-xs">
+            确认发送员工 <span class="text-red-500">*</span>
+          </div>
+          <Select
+            show-search
+            allow-clear
+            class="w-full"
+            placeholder="选择在企微客户端确认群发的员工 userid"
+            :value="groupTargetOf(chatId).sender_userid || undefined"
+            :options="wwUserOptions"
+            :filter-option="
+              (input: string, option: any) =>
+                String(option?.label || '')
+                  .toLowerCase()
+                  .includes(input.toLowerCase())
+            "
+            @change="
+              (v: string) => updateGroupAt(chatId, { sender_userid: v || '' })
+            "
+          />
+          <div class="mt-1 text-xs text-gray-400">
+            对应企微 add_msg_template.sender，该员工需在客户端点确认后消息才会发出
+          </div>
+        </div>
+
+        <div class="mb-2 text-xs text-gray-500">本群 @ 配置</div>
+        <div class="mb-2">
+          <div class="mb-1 text-xs">@ 系统员工（手机号）</div>
+          <Select
+            mode="multiple"
+            class="w-full"
+            placeholder="选择要 @ 的员工"
+            :value="groupTargetOf(chatId).at_admin_ids || []"
+            :options="
+              adminList.map((a) => ({ label: a.name, value: a.id }))
+            "
+            @change="
+              (v: number[]) => updateGroupAt(chatId, { at_admin_ids: v })
+            "
+          />
+        </div>
+        <div>
+          <div class="mb-1 text-xs">@ 群成员 userid</div>
+          <Select
+            mode="tags"
+            class="w-full"
+            placeholder="输入 userid 回车添加"
+            :token-separators="[',', ' ']"
+            :value="groupTargetOf(chatId).at_userids || []"
+            @change="
+              (v: string[]) => updateGroupAt(chatId, { at_userids: v })
+            "
+          />
+        </div>
+      </CollapsePanel>
+    </Collapse>
+
+    <Button
+      v-if="chatOptions.length === 0"
+      type="link"
+      size="small"
+      class="px-0"
+      @click="loadChats"
+    >
+      刷新群聊列表
+    </Button>
+  </div>
+</template>
+
+<style scoped>
+.section-title {
+  margin-bottom: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #1d2129;
+}
+</style>