diff --git a/apps/web-antd/src/components/form/components/user-tag-select.vue b/apps/web-antd/src/components/form/components/user-tag-select.vue
new file mode 100644
index 00000000..96e0c1c2
--- /dev/null
+++ b/apps/web-antd/src/components/form/components/user-tag-select.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+/**
+ * 通用 Tag 选择器（带头像）
+ *
+ * - 基于 antd Select，multiple 模式默认开启，单选传 multiple=false
+ * - 已选项以 Tag 形式展示头像+名字：
+ *   - 有 avatar 用图片头像
+ *   - 无 avatar 用文本头像（取 label 首字符）
+ * - 下拉选项同样展示头像+名字
+ * - 选项数据：options: { value, label, avatar? }[]
+ */
+import { computed } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import { Avatar, Select, Tag } from 'ant-design-vue';
+
+defineOptions({
+  name: 'UserTagSelect',
+  inheritAttrs: false,
+});
+
+/** 单个选项结构 */
+export interface UserTagOption {
+  value: string | number;
+  label: string;
+  avatar?: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** 已选值数组（多选）或单值（单选时仍用数组包装） */
+    modelValue?: (string | number)[];
+    /** 选项列表 */
+    options: UserTagOption[];
+    /** 是否多选，默认 true */
+    multiple?: boolean;
+    /** 最大选择数，超出截断 */
+    maxCount?: number;
+    placeholder?: string;
+    allowClear?: boolean;
+    showSearch?: boolean;
+    disabled?: boolean;
+  }>(),
+  {
+    modelValue: () => [],
+    multiple: true,
+    maxCount: 99,
+    placeholder: '请选择',
+    allowClear: true,
+    showSearch: true,
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [v: (string | number)[]];
+}>();
+
+// 双向绑定：useVModel 自动处理 modelValue 的读写
+const innerValue = useVModel(props, 'modelValue', emit, {
+  defaultValue: [] as (string | number)[],
+  passive: true,
+});
+
+/** 用于 Select 的 mode，单选时不传 mode */
+const selectMode = computed(() => (props.multiple ? 'multiple' : undefined));
+
+/** 按 value 索引选项，方便 tagRender/option 插槽快速查头像与名字 */
+const optionMap = computed(() => {
+  const map = new Map<string | number, UserTagOption>();
+  for (const opt of props.options) {
+    map.set(opt.value, opt);
+  }
+  return map;
+});
+
+/** 取某 value 对应的展示名 */
+function labelOf(value: string | number) {
+  return optionMap.value.get(value)?.label || String(value);
+}
+
+/** 取某 value 对应的头像 */
+function avatarOf(value: string | number) {
+  return optionMap.value.get(value)?.avatar;
+}
+
+/** 取首字符（文本头像） */
+function firstChar(label?: string) {
+  return (label || '?').trim().charAt(0) || '?';
+}
+
+/** 选项过滤：按 label 包含输入关键字 */
+function filterOption(input: string, option: any) {
+  const v = String(option?.label || '').toLowerCase();
+  return v.includes((input || '').toLowerCase());
+}
+
+/**
+ * change 处理：
+ * - 单选：把单值包成数组
+ * - 多选：超 maxCount 截断
+ */
+function onChange(v: any) {
+  if (!props.multiple) {
+    innerValue.value = v == null ? [] : [v];
+    return;
+  }
+  if (Array.isArray(v) && v.length > props.maxCount) {
+    v = v.slice(0, props.maxCount);
+  }
+  innerValue.value = v;
+}
+</script>
+
+<template>
+  <Select
+    :value="innerValue as any"
+    :mode="selectMode"
+    :options="options"
+    :placeholder="placeholder"
+    :allow-clear="allowClear"
+    :show-search="showSearch"
+    :filter-option="filterOption"
+    :disabled="disabled"
+    :max-tag-count="10"
+    option-filter-prop="label"
+    style="width: 100%"
+    @change="onChange"
+  >
+    <!-- 多选已选项展示头像+名字 -->
+    <template v-if="multiple" #tagRender="{ value, closable, onClose }">
+      <Tag :closable="closable" @close="onClose" class="user-tag-chip">
+        <Avatar :size="16" :src="avatarOf(value)">
+          {{ firstChar(labelOf(value)) }}
+        </Avatar>
+        <span class="user-tag-name">{{ labelOf(value) }}</span>
+      </Tag>
+    </template>
+
+    <!-- 下拉选项展示头像+名字 -->
+    <template #option="{ label, avatar }">
+      <div class="user-tag-option">
+        <Avatar :size="20" :src="avatar">{{ firstChar(label) }}</Avatar>
+        <span>{{ label }}</span>
+      </div>
+    </template>
+  </Select>
+</template>
+
+<style scoped>
+.user-tag-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+}
+
+.user-tag-name {
+  max-width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.user-tag-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+</style>
diff --git a/apps/web-antd/src/components/oa-template-card-editor/BlockLibrary.vue b/apps/web-antd/src/components/oa-template-card-editor/BlockLibrary.vue
index 42c0d131..6918466d 100644
--- a/apps/web-antd/src/components/oa-template-card-editor/BlockLibrary.vue
+++ b/apps/web-antd/src/components/oa-template-card-editor/BlockLibrary.vue
@@ -40,8 +40,8 @@ defineProps<{
   flex-direction: column;
   width: 200px;
   height: 100%;
-  border-right: 1px solid #e5e6eb;
-  background: #fafbfc;
+  border-right: 1px solid var(--ant-color-border-secondary, #e5e6eb);
+  background: var(--ant-color-fill-quaternary, #fafbfc);
 }
 
 .panel-header {
@@ -49,16 +49,16 @@ defineProps<{
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  border-bottom: 1px solid #e5e6eb;
+  border-bottom: 1px solid var(--ant-color-border-secondary, #e5e6eb);
   font-size: 13px;
 
   .title {
     font-weight: 600;
-    color: #1d2129;
+    color: var(--ant-color-text, #1d2129);
   }
 
   .hint {
-    color: #86909c;
+    color: var(--ant-color-text-tertiary, #86909c);
     font-size: 11px;
   }
 }
@@ -75,19 +75,19 @@ defineProps<{
   gap: 8px;
   padding: 10px 12px;
   margin-bottom: 6px;
-  border: 1px dashed #c9cdd4;
+  border: 1px dashed var(--ant-color-border, #c9cdd4);
   border-radius: 4px;
-  background: #fff;
+  background: var(--ant-color-bg-container, #fff);
   font-size: 13px;
-  color: #4e5969;
+  color: var(--ant-color-text-secondary, #4e5969);
   cursor: grab;
   user-select: none;
   transition: all 0.15s;
 
   &:hover {
-    border-color: #165dff;
-    color: #165dff;
-    background: #f2f7ff;
+    border-color: var(--ant-color-primary, #165dff);
+    color: var(--ant-color-primary, #165dff);
+    background: var(--ant-color-primary-bg, #f2f7ff);
   }
 
   &:active {
@@ -102,34 +102,7 @@ defineProps<{
 .empty-hint {
   padding: 24px 12px;
   text-align: center;
-  color: #c9cdd4;
+  color: var(--ant-color-text-quaternary, #c9cdd4);
   font-size: 12px;
 }
-
-.dark {
-  .block-library {
-    background: #1f1f1f;
-    border-right-color: #374151;
-  }
-
-  .panel-header {
-    border-bottom-color: #374151;
-
-    .title {
-      color: #e5e7eb;
-    }
-  }
-
-  .block-item {
-    background: #374151;
-    border-color: #4b5563;
-    color: #d1d5db;
-
-    &:hover {
-      border-color: #60a5fa;
-      color: #60a5fa;
-      background: rgba(96, 165, 250, 0.1);
-    }
-  }
-}
 </style>
diff --git a/apps/web-antd/src/components/oa-template-card-editor/Canvas.vue b/apps/web-antd/src/components/oa-template-card-editor/Canvas.vue
index eb27ab54..fe4751e7 100644
--- a/apps/web-antd/src/components/oa-template-card-editor/Canvas.vue
+++ b/apps/web-antd/src/components/oa-template-card-editor/Canvas.vue
@@ -159,7 +159,7 @@ function handleRemove(instanceId: string) {
   flex-direction: column;
   flex: 1;
   min-width: 0;
-  background: #fff;
+  background: var(--ant-color-bg-container, #fff);
 }
 
 .panel-header {
@@ -167,16 +167,16 @@ function handleRemove(instanceId: string) {
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  border-bottom: 1px solid #e5e6eb;
+  border-bottom: 1px solid var(--ant-color-border-secondary, #e5e6eb);
   font-size: 13px;
 
   .title {
     font-weight: 600;
-    color: #1d2129;
+    color: var(--ant-color-text, #1d2129);
   }
 
   .hint {
-    color: #86909c;
+    color: var(--ant-color-text-tertiary, #86909c);
     font-size: 11px;
   }
 }
@@ -199,22 +199,22 @@ function handleRemove(instanceId: string) {
   font-size: 12px;
 
   .group-label {
-    color: #4e5969;
+    color: var(--ant-color-text-secondary, #4e5969);
     font-weight: 500;
     font-family: 'JetBrains Mono', monospace;
   }
 
   .group-count {
-    color: #86909c;
+    color: var(--ant-color-text-tertiary, #86909c);
   }
 }
 
 .group-dropzone {
   min-height: 60px;
   padding: 8px;
-  border: 2px dashed #d9d9d9;
+  border: 2px dashed var(--ant-color-border, #d9d9d9);
   border-radius: 6px;
-  background: #fafbfc;
+  background: var(--ant-color-fill-quaternary, #fafbfc);
 }
 
 .empty-dropzone {
@@ -222,7 +222,7 @@ function handleRemove(instanceId: string) {
   align-items: center;
   justify-content: center;
   min-height: 44px;
-  color: #c9cdd4;
+  color: var(--ant-color-text-quaternary, #c9cdd4);
   font-size: 12px;
 }
 
@@ -232,9 +232,9 @@ function handleRemove(instanceId: string) {
   justify-content: space-between;
   padding: 8px 10px;
   margin-bottom: 6px;
-  border: 1px solid #e5e6eb;
+  border: 1px solid var(--ant-color-border-secondary, #e5e6eb);
   border-radius: 4px;
-  background: #fff;
+  background: var(--ant-color-bg-container, #fff);
   cursor: pointer;
   transition: all 0.15s;
 
@@ -243,12 +243,12 @@ function handleRemove(instanceId: string) {
   }
 
   &:hover {
-    border-color: #165dff;
+    border-color: var(--ant-color-primary, #165dff);
   }
 
   &.selected {
-    border-color: #165dff;
-    background: #f2f7ff;
+    border-color: var(--ant-color-primary, #165dff);
+    background: var(--ant-color-primary-bg, #f2f7ff);
     box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.15);
   }
 }
@@ -268,13 +268,13 @@ function handleRemove(instanceId: string) {
 
 .instance-label {
   font-size: 13px;
-  color: #1d2129;
+  color: var(--ant-color-text, #1d2129);
   font-weight: 500;
 }
 
 .instance-summary {
   font-size: 11px;
-  color: #86909c;
+  color: var(--ant-color-text-tertiary, #86909c);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -286,52 +286,15 @@ function handleRemove(instanceId: string) {
   border: none;
   border-radius: 50%;
   background: transparent;
-  color: #86909c;
+  color: var(--ant-color-text-tertiary, #86909c);
   font-size: 16px;
   line-height: 1;
   cursor: pointer;
   transition: all 0.15s;
 
   &:hover {
-    background: #f53f3f;
+    background: var(--ant-color-error, #f53f3f);
     color: #fff;
   }
 }
-
-.dark {
-  .canvas {
-    background: #1f1f1f;
-  }
-
-  .panel-header {
-    border-bottom-color: #374151;
-
-    .title {
-      color: #e5e7eb;
-    }
-  }
-
-  .group-dropzone {
-    background: #1f1f1f;
-    border-color: #374151;
-  }
-
-  .instance-item {
-    background: #374151;
-    border-color: #4b5563;
-
-    &:hover {
-      border-color: #60a5fa;
-    }
-
-    &.selected {
-      border-color: #60a5fa;
-      background: rgba(96, 165, 250, 0.1);
-    }
-  }
-
-  .instance-label {
-    color: #e5e7eb;
-  }
-}
 </style>
diff --git a/apps/web-antd/src/components/oa-template-card-editor/JsonPreview.vue b/apps/web-antd/src/components/oa-template-card-editor/JsonPreview.vue
index 2df675c7..479fdbc5 100644
--- a/apps/web-antd/src/components/oa-template-card-editor/JsonPreview.vue
+++ b/apps/web-antd/src/components/oa-template-card-editor/JsonPreview.vue
@@ -68,7 +68,8 @@ async function handleCopy() {
   flex-direction: column;
   width: 280px;
   height: 100%;
-  border-left: 1px solid #e5e6eb;
+  border-left: 1px solid var(--ant-color-border-secondary, #e5e6eb);
+  /* JSON 代码面板保留 VS Code Dark+ 风格暗底（无论浅色/暗色主题） */
   background: #1e1e1e;
 }
 
diff --git a/apps/web-antd/src/components/oa-template-card-editor/PropertyPanel.vue b/apps/web-antd/src/components/oa-template-card-editor/PropertyPanel.vue
index 1415a3bb..bfb3cf7c 100644
--- a/apps/web-antd/src/components/oa-template-card-editor/PropertyPanel.vue
+++ b/apps/web-antd/src/components/oa-template-card-editor/PropertyPanel.vue
@@ -181,7 +181,7 @@ watch(
               read-only
             />
             <GalleryPickLink
-              :accept-types="field.acceptTypes || [1]"
+              :accept-types="field.acceptTypes || [0]"
               @select="(urls) => setFixedValue(field.name, urls[0] || '')"
             />
           </div>
@@ -254,7 +254,7 @@ watch(
               read-only
             />
             <GalleryPickLink
-              :accept-types="field.acceptTypes || [1]"
+              :accept-types="field.acceptTypes || [0]"
               @select="(urls) => setInstanceValue(field.name, urls[0] || '')"
             />
           </div>
@@ -278,8 +278,8 @@ watch(
   flex-direction: column;
   width: 280px;
   height: 100%;
-  border-left: 1px solid #e5e6eb;
-  background: #fff;
+  border-left: 1px solid var(--ant-color-border-secondary, #e5e6eb);
+  background: var(--ant-color-bg-container, #fff);
 }
 
 .panel-header {
@@ -287,16 +287,16 @@ watch(
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  border-bottom: 1px solid #e5e6eb;
+  border-bottom: 1px solid var(--ant-color-border-secondary, #e5e6eb);
   font-size: 13px;
 
   .title {
     font-weight: 600;
-    color: #1d2129;
+    color: var(--ant-color-text, #1d2129);
   }
 
   .hint {
-    color: #86909c;
+    color: var(--ant-color-text-tertiary, #86909c);
     font-size: 11px;
     max-width: 120px;
     overflow: hidden;
@@ -318,10 +318,10 @@ watch(
 .section-title {
   margin-bottom: 12px;
   padding-bottom: 6px;
-  border-bottom: 1px solid #f2f3f5;
+  border-bottom: 1px solid var(--ant-color-split, #f2f3f5);
   font-size: 12px;
   font-weight: 600;
-  color: #4e5969;
+  color: var(--ant-color-text-secondary, #4e5969);
 }
 
 .form-row {
@@ -332,11 +332,11 @@ watch(
   display: block;
   margin-bottom: 4px;
   font-size: 12px;
-  color: #4e5969;
+  color: var(--ant-color-text-secondary, #4e5969);
 
   .required {
     margin-left: 2px;
-    color: #f53f3f;
+    color: var(--ant-color-error, #f53f3f);
   }
 }
 
@@ -345,28 +345,4 @@ watch(
   flex-direction: column;
   gap: 4px;
 }
-
-.dark {
-  .property-panel {
-    background: #1f1f1f;
-    border-left-color: #374151;
-  }
-
-  .panel-header {
-    border-bottom-color: #374151;
-
-    .title {
-      color: #e5e7eb;
-    }
-  }
-
-  .section-title {
-    border-bottom-color: #374151;
-    color: #d1d5db;
-  }
-
-  .form-label {
-    color: #d1d5db;
-  }
-}
 </style>
diff --git a/apps/web-antd/src/components/oa-template-card-editor/index.vue b/apps/web-antd/src/components/oa-template-card-editor/index.vue
index 40ca6e41..b0b448bb 100644
--- a/apps/web-antd/src/components/oa-template-card-editor/index.vue
+++ b/apps/web-antd/src/components/oa-template-card-editor/index.vue
@@ -493,10 +493,10 @@ defineExpose({
   flex-direction: column;
   width: 100%;
   height: 480px;
-  border: 1px solid #e5e6eb;
+  border: 1px solid var(--ant-color-border-secondary, #e5e6eb);
   border-radius: 6px;
   overflow: hidden;
-  background: #fff;
+  background: var(--ant-color-bg-container, #fff);
 }
 
 .editor-toolbar {
@@ -504,13 +504,13 @@ defineExpose({
   align-items: center;
   justify-content: space-between;
   padding: 8px 12px;
-  border-bottom: 1px solid #e5e6eb;
-  background: #fafbfc;
+  border-bottom: 1px solid var(--ant-color-border-secondary, #e5e6eb);
+  background: var(--ant-color-fill-quaternary, #fafbfc);
   font-size: 13px;
 
   .title {
     font-weight: 600;
-    color: #1d2129;
+    color: var(--ant-color-text, #1d2129);
   }
 }
 
@@ -519,20 +519,4 @@ defineExpose({
   flex: 1;
   min-height: 0;
 }
-
-.dark {
-  .template-editor {
-    background: #1f1f1f;
-    border-color: #374151;
-  }
-
-  .editor-toolbar {
-    background: #1f1f1f;
-    border-bottom-color: #374151;
-
-    .title {
-      color: #e5e7eb;
-    }
-  }
-}
 </style>
diff --git a/apps/web-antd/src/views/system/oa-cron-task/api/index.ts b/apps/web-antd/src/views/system/oa-cron-task/api/index.ts
new file mode 100644
index 00000000..d5fe8c48
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-cron-task/api/index.ts
@@ -0,0 +1,30 @@
+import { requestClient } from '#/api/request';
+
+/**
+ * OA 定时任务管理 API
+ *
+ * 仅 list / detail / update；预置 3 条任务不可新增删除。
+ * 路由前缀：oa-cron-task/
+ */
+const prefix = 'oa-cron-task/';
+
+/**
+ * 分页查询定时任务列表
+ */
+export async function getOaCronTaskList(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+
+/**
+ * 获取定时任务详情
+ */
+export async function getOaCronTaskInfo(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/**
+ * 更新启停 / 封面 / 跳转 / active_types / preset_payloads / 投递对象等
+ */
+export async function updateOaCronTask(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
diff --git a/apps/web-antd/src/views/system/oa-cron-task/components/message-config-modal.vue b/apps/web-antd/src/views/system/oa-cron-task/components/message-config-modal.vue
new file mode 100644
index 00000000..a5bcca48
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-cron-task/components/message-config-modal.vue
@@ -0,0 +1,347 @@
+<script lang="ts" setup>
+/**
+ * OA 定时任务「消息配置」弹窗
+ * 平台 Tab → 消息类型 Radio → 复用场景 PayloadSchemaForm（含 GalleryPickLink acceptTypes）
+ * 保存 active_types + 各平台当前类型的 preset_payloads，物化到场景
+ */
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Alert, Radio, RadioGroup, Tabs, message } from 'ant-design-vue';
+
+import {
+  getOaCronTaskInfo,
+  updateOaCronTask,
+} from '#/views/system/oa-cron-task/api';
+import { getOaPlatformList } from '#/views/system/oa-platform/api';
+import { getOaMessageTypes } from '#/views/system/oa-scene/api';
+import MsgPreview from '#/views/system/oa-scene/components/msg-preview.vue';
+import PayloadSchemaForm, {
+  type PayloadFieldSchema,
+} from '#/views/system/oa-scene/components/payload-schema-form.vue';
+
+interface MessageTypeOption {
+  message_type: string;
+  name: string;
+  icon?: string;
+  need_media?: number;
+  payload_schema: string | null;
+}
+
+const gridApi = ref();
+const loading = ref(false);
+const detail = ref<Record<string, any>>({});
+/** 各平台当前激活的消息类型 */
+const activeTypes = ref<Record<string, string>>({});
+/** presets[platform][type] = { payload, field_bindings } */
+const presets = ref<Record<string, Record<string, any>>>({});
+/** 本会话编辑中的 payload（按平台，对应当前 active 类型） */
+const payloadByPlatform = ref<Record<string, Record<string, any>>>({});
+const platforms = ref<
+  Array<{ platform_code: string; name: string; icon?: string }>
+>([]);
+const activePlatform = ref('');
+/** message-types 接口：platform → 类型列表（含 schema） */
+const messageTypesMap = ref<Record<string, MessageTypeOption[]>>({});
+
+/**
+ * 当前平台可选消息类型：presets 已有类型 ∩ 接口返回类型
+ */
+function typeOptionsOf(platformCode: string) {
+  const presetKeys = Object.keys(presets.value?.[platformCode] || {});
+  const apiTypes = messageTypesMap.value[platformCode] || [];
+  const nameMap = Object.fromEntries(
+    apiTypes.map((t) => [t.message_type, t.name]),
+  );
+  return presetKeys.map((t) => ({
+    label: nameMap[t] || t,
+    value: t,
+  }));
+}
+
+/**
+ * 解析当前平台当前类型的 payload_schema
+ */
+function currentPayloadSchema(platformCode: string): PayloadFieldSchema[] {
+  const messageType = activeTypes.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 {
+    const parsed = JSON.parse(typeInfo.payload_schema);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
+/** 当前类型 field_bindings 只读提示 */
+const currentBindings = computed(() => {
+  const p = activePlatform.value;
+  const t = activeTypes.value[p] || '';
+  const raw = presets.value?.[p]?.[t]?.field_bindings || {};
+  return Object.entries(raw).map(([path, key]) => ({
+    path: String(path),
+    key: String(key),
+  }));
+});
+
+/**
+ * 切换消息类型：只改 active_types，并把编辑区切到该类型已有 payload（不丢其它类型 presets）
+ */
+function handleTypeChange(platformCode: string, messageType: string) {
+  if (!platformCode || !messageType) return;
+  // 先把当前编辑区写回 presets，避免切换丢改
+  flushPayloadToPresets(platformCode);
+  activeTypes.value = {
+    ...activeTypes.value,
+    [platformCode]: messageType,
+  };
+  const existing =
+    presets.value?.[platformCode]?.[messageType]?.payload || {};
+  payloadByPlatform.value = {
+    ...payloadByPlatform.value,
+    [platformCode]: { ...existing },
+  };
+}
+
+/**
+ * 把某平台编辑中的 payload 写回 presets[platform][activeType]
+ */
+function flushPayloadToPresets(platformCode: string) {
+  const type = activeTypes.value[platformCode];
+  if (!platformCode || !type) return;
+  const payload = payloadByPlatform.value[platformCode] || {};
+  const platformPresets = { ...(presets.value[platformCode] || {}) };
+  const prev = { ...(platformPresets[type] || {}) };
+  platformPresets[type] = {
+    ...prev,
+    payload: { ...payload },
+  };
+  presets.value = {
+    ...presets.value,
+    [platformCode]: platformPresets,
+  };
+}
+
+/**
+ * 打开时加载详情、平台、场景 message-types（含 payload_schema）
+ */
+async function loadAll(id: number) {
+  loading.value = true;
+  try {
+    const [info, platformList, typesRes] = await Promise.all([
+      getOaCronTaskInfo(id),
+      getOaPlatformList(),
+      getOaMessageTypes(),
+    ]);
+    detail.value = info || {};
+    activeTypes.value = { ...(info?.active_types || {}) };
+    presets.value = { ...(info?.presets || {}) };
+
+    const typeMap =
+      typesRes && typeof typesRes === 'object' && !Array.isArray(typesRes)
+        ? typesRes
+        : typesRes?.data || {};
+    messageTypesMap.value = typeMap as Record<string, MessageTypeOption[]>;
+
+    const rows = Array.isArray(platformList)
+      ? platformList
+      : platformList?.data || [];
+    platforms.value = (Array.isArray(rows) ? rows : [])
+      .filter((p: any) => info?.presets?.[p.platform_code])
+      .map((p: any) => ({
+        platform_code: p.platform_code,
+        name: p.name,
+        icon: p.icon,
+      }));
+    activePlatform.value = platforms.value[0]?.platform_code || '';
+
+    // 初始化各平台编辑区为当前 active 类型的 payload
+    const payloads: Record<string, Record<string, any>> = {};
+    for (const p of platforms.value) {
+      const code = p.platform_code;
+      let type = activeTypes.value[code] || '';
+      const presetKeys = Object.keys(presets.value[code] || {});
+      if (!type || !presetKeys.includes(type)) {
+        type = presetKeys[0] || '';
+        if (type) {
+          activeTypes.value = { ...activeTypes.value, [code]: type };
+        }
+      }
+      payloads[code] = {
+        ...(presets.value?.[code]?.[type]?.payload || {}),
+      };
+    }
+    payloadByPlatform.value = payloads;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/**
+ * 预览用 payload（template_card 需展开）
+ */
+function previewPayloadOf(platformCode: string): Record<string, any> {
+  const messageType = activeTypes.value[platformCode];
+  const payload = { ...(payloadByPlatform.value[platformCode] || {}) };
+  if (messageType === 'template_card' && payload.template_card) {
+    return payload.template_card;
+  }
+  return payload;
+}
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  class: 'w-[920px]',
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    const id = detail.value?.id;
+    if (!id) return;
+    // 提交前把当前 Tab 编辑区写回
+    for (const p of platforms.value) {
+      flushPayloadToPresets(p.platform_code);
+    }
+    const presetPayloads: Record<
+      string,
+      { message_type: string; payload: Record<string, any> }
+    > = {};
+    for (const p of platforms.value) {
+      const code = p.platform_code;
+      const type = activeTypes.value[code];
+      if (!type) continue;
+      presetPayloads[code] = {
+        message_type: type,
+        payload: {
+          ...(presets.value?.[code]?.[type]?.payload ||
+            payloadByPlatform.value[code] ||
+            {}),
+        },
+      };
+    }
+    modalApi.setState({ loading: true, confirmLoading: true });
+    try {
+      await updateOaCronTask({
+        id,
+        active_types: activeTypes.value,
+        preset_payloads: presetPayloads,
+      });
+      message.success('消息配置已保存');
+      gridApi.value?.query?.();
+      modalApi.close();
+    } finally {
+      modalApi.setState({ loading: false, confirmLoading: false });
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) return;
+    const data = modalApi.getData<{ id?: number; gridApi?: any }>();
+    gridApi.value = data?.gridApi;
+    if (data?.id) {
+      await loadAll(data.id);
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="`消息配置：${detail.name || ''}`">
+    <div v-if="loading" class="py-8 text-center text-gray-400">加载中…</div>
+    <div v-else class="cron-msg-config space-y-4">
+      <Alert
+        type="info"
+        show-icon
+        message="按平台选择消息类型并编辑发送内容（与 OA 场景同一套 payload_schema）。定时命令仍用 field_bindings 与 {var} 填充动态字段。"
+      />
+
+      <Tabs v-if="platforms.length" v-model:active-key="activePlatform" type="card">
+        <Tabs.TabPane
+          v-for="p in platforms"
+          :key="p.platform_code"
+          :tab="p.name"
+        >
+          <div class="mb-3">
+            <div class="mb-2 text-sm text-gray-500">消息类型</div>
+            <RadioGroup
+              :value="activeTypes[p.platform_code]"
+              button-style="solid"
+              @update:value="(v) => handleTypeChange(p.platform_code, String(v))"
+            >
+              <Radio.Button
+                v-for="opt in typeOptionsOf(p.platform_code)"
+                :key="opt.value"
+                :value="opt.value"
+              >
+                {{ opt.label }}
+              </Radio.Button>
+            </RadioGroup>
+          </div>
+
+          <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+            <div>
+              <div class="mb-2 font-medium">发送内容</div>
+              <PayloadSchemaForm
+                :schema="currentPayloadSchema(p.platform_code)"
+                :model-value="payloadByPlatform[p.platform_code] || {}"
+                @update:model-value="
+                  (v) => {
+                    payloadByPlatform = {
+                      ...payloadByPlatform,
+                      [p.platform_code]: v || {},
+                    };
+                  }
+                "
+              />
+            </div>
+            <div>
+              <div class="mb-2 font-medium">预览</div>
+              <MsgPreview
+                :platform-code="p.platform_code"
+                :message-type="activeTypes[p.platform_code] || ''"
+                :payload="previewPayloadOf(p.platform_code)"
+              />
+              <div class="mt-3">
+                <div class="mb-1 text-sm font-medium">
+                  可替换变量（field_bindings）
+                </div>
+                <div
+                  v-if="
+                    p.platform_code === activePlatform &&
+                    currentBindings.length === 0
+                  "
+                  class="text-xs text-gray-400"
+                >
+                  当前类型无字段绑定
+                </div>
+                <ul
+                  v-else-if="p.platform_code === activePlatform"
+                  class="m-0 list-disc pl-4 text-xs text-gray-600"
+                >
+                  <li v-for="b in currentBindings" :key="b.path">
+                    <code>{{ b.key }}</code>
+                    ← {{ b.path.replace(/^.*\.payload\./, 'payload.') }}
+                  </li>
+                </ul>
+                <div class="mt-1 text-xs text-gray-400">
+                  payload 字符串中也可写
+                  <code>{{ '{count}' }}</code>
+                  /
+                  <code>{{ '{content}' }}</code>
+                  等模板，定时任务传对应 vars 即可替换
+                </div>
+              </div>
+            </div>
+          </div>
+        </Tabs.TabPane>
+      </Tabs>
+      <div v-else class="py-6 text-center text-gray-400">
+        当前任务暂无平台 presets，请先确认种子数据已写入
+      </div>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/system/oa-cron-task/components/modal.vue b/apps/web-antd/src/views/system/oa-cron-task/components/modal.vue
new file mode 100644
index 00000000..2411070a
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-cron-task/components/modal.vue
@@ -0,0 +1,146 @@
+<script lang="ts" setup>
+/**
+ * OA 定时任务「编辑」弹窗：只改任务基础信息
+ * 启停 / 全局封面 / 全局跳转 / 备注；消息类型与正文改由「消息配置」列独立弹窗
+ */
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Alert, Checkbox, Input, Switch, Textarea, message } from 'ant-design-vue';
+
+import UploadImage from '#/components/form/components/upload-image.vue';
+import {
+  getOaCronTaskInfo,
+  updateOaCronTask,
+} from '#/views/system/oa-cron-task/api';
+
+const gridApi = ref();
+const loading = ref(false);
+const detail = ref<Record<string, any>>({});
+const enabled = ref(false);
+const cardImageUrls = ref<string[]>([]);
+const jumpUrl = ref('');
+const syncCardImage = ref(true);
+const syncJumpUrl = ref(true);
+const remark = ref('');
+
+/**
+ * 打开时加载任务基础字段（不含消息类型/payload）
+ */
+async function loadAll(id: number) {
+  loading.value = true;
+  try {
+    const info = await getOaCronTaskInfo(id);
+    detail.value = info || {};
+    enabled.value = Number(info?.enabled) === 1;
+    const cover = String(info?.card_image_url || '');
+    cardImageUrls.value = cover ? [cover] : [];
+    jumpUrl.value = String(info?.jump_url || '');
+    remark.value = String(info?.remark || '');
+  } finally {
+    loading.value = false;
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  class: 'w-[560px]',
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    const id = detail.value?.id;
+    if (!id) return;
+    modalApi.setState({ loading: true, confirmLoading: true });
+    try {
+      // 不传 active_types / preset_payloads / robot_ids，避免误改其它分弹窗配置
+      await updateOaCronTask({
+        id,
+        enabled: enabled.value ? 1 : 0,
+        card_image_url: cardImageUrls.value[0] || '',
+        sync_card_image: syncCardImage.value ? 1 : 0,
+        jump_url: jumpUrl.value || '',
+        sync_jump_url: syncJumpUrl.value ? 1 : 0,
+        remark: remark.value || '',
+      });
+      message.success('保存成功');
+      gridApi.value?.query?.();
+      modalApi.close();
+    } finally {
+      modalApi.setState({ loading: false, confirmLoading: false });
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) return;
+    const data = modalApi.getData<{ id?: number; gridApi?: any }>();
+    gridApi.value = data?.gridApi;
+    if (data?.id) {
+      await loadAll(data.id);
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="`编辑任务：${detail.name || ''}`">
+    <div v-if="loading" class="py-8 text-center text-gray-400">加载中…</div>
+    <div v-else class="cron-edit space-y-4">
+      <Alert
+        v-if="Number(detail.type) === 2"
+        type="warning"
+        show-icon
+        message="主动触发任务：业务事件发生时推送（如申请提现成功）。启停控制是否推送；消息/机器人/发送人请在列表列配置。"
+      />
+      <Alert
+        v-else
+        type="info"
+        show-icon
+        message="此处只改启停、封面、跳转与备注。消息类型与发送内容请在列表「消息配置」列中编辑。"
+      />
+
+      <div class="flex flex-wrap items-center gap-4">
+        <div class="flex items-center gap-2">
+          <span>启停</span>
+          <Switch
+            v-model:checked="enabled"
+            checked-children="开"
+            un-checked-children="关"
+          />
+        </div>
+        <div class="text-gray-500">编码：{{ detail.task_code }}</div>
+      </div>
+
+      <div>
+        <div class="mb-2 font-medium">全局封面图</div>
+        <UploadImage v-model="cardImageUrls" :max-count="1" :multiple="false" />
+        <Checkbox v-model:checked="syncCardImage" class="mt-2">
+          保存时同步到全部消息类型的图片字段（不改链接）
+        </Checkbox>
+      </div>
+
+      <div>
+        <div class="mb-2 font-medium">全局跳转链接</div>
+        <Input
+          v-model:value="jumpUrl"
+          placeholder="卡片/详情跳转 URL，与封面图分存"
+          allow-clear
+        />
+        <Checkbox v-model:checked="syncJumpUrl" class="mt-2">
+          保存时同步到全部消息类型的链接字段（不改图片）
+        </Checkbox>
+      </div>
+
+      <div>
+        <div class="mb-2 font-medium">备注</div>
+        <Textarea
+          v-model:value="remark"
+          :rows="3"
+          placeholder="可选备注"
+          allow-clear
+        />
+      </div>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/system/oa-cron-task/components/robots-modal.vue b/apps/web-antd/src/views/system/oa-cron-task/components/robots-modal.vue
new file mode 100644
index 00000000..723f8fa3
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-cron-task/components/robots-modal.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+/**
+ * OA 定时任务 — 配置推送机器人弹窗
+ * 从列表「机器人」列打开；仅保存 robot_ids，不改消息类型/图片
+ */
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Checkbox, Tabs, message } from 'ant-design-vue';
+
+import {
+  getOaCronTaskInfo,
+  updateOaCronTask,
+} from '#/views/system/oa-cron-task/api';
+import { getOaPlatformList } from '#/views/system/oa-platform/api';
+import { getOaRobotList } from '#/views/system/oa-robot/api';
+
+const gridApi = ref();
+const loading = ref(false);
+const detail = ref<Record<string, any>>({});
+const robotIds = ref<number[]>([]);
+const platforms = ref<Array<{ platform_code: string; name: string }>>([]);
+const robotsByPlatform = ref<Record<string, Array<{ id: number; name: string }>>>({});
+const activePlatform = ref('');
+
+/**
+ * 打开时加载任务已绑机器人与全量机器人列表
+ */
+async function loadAll(id: number) {
+  loading.value = true;
+  try {
+    const [info, platformList, robotRes] = await Promise.all([
+      getOaCronTaskInfo(id),
+      getOaPlatformList(),
+      getOaRobotList({ page: 1, pageSize: 500 }),
+    ]);
+    detail.value = info || {};
+    robotIds.value = Array.isArray(info?.robot_ids)
+      ? info.robot_ids.map(Number)
+      : [];
+
+    const rows = Array.isArray(platformList)
+      ? platformList
+      : platformList?.data || [];
+    platforms.value = (Array.isArray(rows) ? rows : []).map((p: any) => ({
+      platform_code: p.platform_code,
+      name: p.name,
+    }));
+    if (!activePlatform.value && platforms.value.length) {
+      activePlatform.value = platforms.value[0].platform_code;
+    }
+
+    const robotItems = robotRes?.items || robotRes?.data || robotRes || [];
+    const list = Array.isArray(robotItems) ? robotItems : [];
+    const map: Record<string, Array<{ id: number; name: string }>> = {};
+    for (const r of list) {
+      const code = String(r.platform_code || '');
+      if (!map[code]) map[code] = [];
+      map[code].push({ id: Number(r.id), name: String(r.name || r.id) });
+    }
+    robotsByPlatform.value = map;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function toggleRobot(id: number, checked: boolean) {
+  const set = new Set(robotIds.value);
+  if (checked) set.add(id);
+  else set.delete(id);
+  robotIds.value = [...set];
+}
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  class: 'w-[560px]',
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    const id = detail.value?.id;
+    if (!id) return;
+    modalApi.setState({ loading: true, confirmLoading: true });
+    try {
+      // 只传 robot_ids，后端未传 targets 时保留原值
+      await updateOaCronTask({ id, robot_ids: robotIds.value });
+      message.success('机器人配置已保存');
+      gridApi.value?.query?.();
+      modalApi.close();
+    } finally {
+      modalApi.setState({ loading: false, confirmLoading: false });
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) return;
+    const data = modalApi.getData<{ id?: number; gridApi?: any }>();
+    gridApi.value = data?.gridApi;
+    if (data?.id) {
+      await loadAll(data.id);
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="`配置推送机器人：${detail.name || ''}`">
+    <div v-if="loading" class="py-8 text-center text-gray-400">加载中…</div>
+    <div v-else>
+      <Tabs v-if="platforms.length" v-model:active-key="activePlatform" type="card">
+        <Tabs.TabPane
+          v-for="p in platforms"
+          :key="p.platform_code"
+          :tab="p.name"
+        >
+          <div
+            v-if="!(robotsByPlatform[p.platform_code] || []).length"
+            class="text-sm text-gray-400"
+          >
+            该平台暂无机器人，请先在「OA机器人管理」添加
+          </div>
+          <div v-else class="flex flex-col gap-1">
+            <Checkbox
+              v-for="r in robotsByPlatform[p.platform_code]"
+              :key="r.id"
+              :checked="robotIds.includes(r.id)"
+              @change="(e: any) => toggleRobot(r.id, !!e?.target?.checked)"
+            >
+              {{ r.name }}
+            </Checkbox>
+          </div>
+        </Tabs.TabPane>
+      </Tabs>
+      <div v-else class="text-sm text-gray-400">暂无平台数据</div>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/system/oa-cron-task/components/targets-modal.vue b/apps/web-antd/src/views/system/oa-cron-task/components/targets-modal.vue
new file mode 100644
index 00000000..7f3db4cb
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-cron-task/components/targets-modal.vue
@@ -0,0 +1,284 @@
+<script lang="ts" setup>
+/**
+ * OA 定时任务 — 配置发送用户弹窗（按平台分流）
+ * - work_wechat_app：SceneTargetsPanel（个人/客户群 targets）
+ * - 其它 webhook 平台：按平台勾选 @ 员工（at_users.admin_ids）
+ * 仅展示当前任务已绑机器人所属平台的 Tab
+ */
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Alert, Checkbox, Tabs, message } from 'ant-design-vue';
+
+import UserTagSelect from '#/components/form/components/user-tag-select.vue';
+import {
+  getOaCronTaskInfo,
+  updateOaCronTask,
+} from '#/views/system/oa-cron-task/api';
+import { getAdminList } from '#/views/system/admin/api';
+import { getOaPlatformList } from '#/views/system/oa-platform/api';
+import { getOaRobotList } from '#/views/system/oa-robot/api';
+import SceneTargetsPanel from '#/views/system/oa-scene/components/scene-targets-panel.vue';
+
+type AtSlot = { admin_ids: number[]; userids: string[] };
+
+const gridApi = ref();
+const loading = ref(false);
+const detail = ref<Record<string, any>>({});
+const targets = ref<any[]>([]);
+const selectedAtUsers = ref<Record<string, AtSlot>>({});
+const adminList = ref<Array<{ id: number; name: string; avatar?: string }>>(
+  [],
+);
+const platforms = ref<Array<{ platform_code: string; name: string }>>([]);
+const activePlatform = ref('');
+/** 已绑机器人所属平台编码（决定展示哪些 Tab） */
+const boundPlatformCodes = ref<string[]>([]);
+
+const visiblePlatforms = computed(() =>
+  platforms.value.filter((p) =>
+    boundPlatformCodes.value.includes(p.platform_code),
+  ),
+);
+
+function isWorkWechatApp(code: string) {
+  return code === 'work_wechat_app';
+}
+
+/**
+ * 规范化详情 at_users（兼容旧纯数组）
+ */
+function normalizeAtUsers(
+  raw: Record<string, any> | undefined,
+): Record<string, AtSlot> {
+  const result: Record<string, AtSlot> = {};
+  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 adminIdsOf(platformCode: string): number[] {
+  return selectedAtUsers.value[platformCode]?.admin_ids || [];
+}
+
+function useridsOf(platformCode: string): string[] {
+  return selectedAtUsers.value[platformCode]?.userids || [];
+}
+
+function setAdminIds(platformCode: string, ids: (string | number)[]) {
+  selectedAtUsers.value = {
+    ...selectedAtUsers.value,
+    [platformCode]: {
+      admin_ids: ids.map((n) => Number(n)).filter((n) => n > 0),
+      userids: useridsOf(platformCode),
+    },
+  };
+}
+
+function toggleAllAtUsers(platformCode: string, e: any) {
+  const checked = !!e?.target?.checked;
+  setAdminIds(
+    platformCode,
+    checked ? adminList.value.map((a) => a.id) : [],
+  );
+}
+
+/**
+ * 打开时加载投递目标、@ 人、已绑机器人平台
+ */
+async function loadAll(id: number) {
+  loading.value = true;
+  try {
+    const [info, platformList, robotRes, adminRes] = await Promise.all([
+      getOaCronTaskInfo(id),
+      getOaPlatformList(),
+      getOaRobotList({ page: 1, pageSize: 500 }),
+      getAdminList({ page: 1, pageSize: 500 }),
+    ]);
+    detail.value = info || {};
+    targets.value = Array.isArray(info?.targets) ? [...info.targets] : [];
+    selectedAtUsers.value = normalizeAtUsers(info?.at_users);
+
+    const robotIds = new Set(
+      (Array.isArray(info?.robot_ids) ? info.robot_ids : []).map(Number),
+    );
+    const robotItems = robotRes?.items || robotRes?.data || robotRes || [];
+    const list = Array.isArray(robotItems) ? robotItems : [];
+    const codes = new Set<string>();
+    for (const r of list) {
+      if (robotIds.has(Number(r.id))) {
+        const code = String(r.platform_code || '');
+        if (code) codes.add(code);
+      }
+    }
+    boundPlatformCodes.value = [...codes];
+
+    const rows = Array.isArray(platformList)
+      ? platformList
+      : platformList?.data || [];
+    platforms.value = (Array.isArray(rows) ? rows : [])
+      .filter((p: any) => codes.has(String(p.platform_code)))
+      .map((p: any) => ({
+        platform_code: p.platform_code,
+        name: p.name,
+      }));
+    // 保证绑定了机器人但平台列表缺失时仍有 Tab
+    for (const code of codes) {
+      if (!platforms.value.some((p) => p.platform_code === code)) {
+        platforms.value.push({ platform_code: code, name: code });
+      }
+    }
+    activePlatform.value = platforms.value[0]?.platform_code || '';
+
+    const adminRows = adminRes?.items || adminRes?.data || adminRes || [];
+    adminList.value = (Array.isArray(adminRows) ? adminRows : []).map(
+      (a: any) => ({
+        id: a.id,
+        name: a.nick_name || a.name || a.username || String(a.id),
+        avatar: a.avatar,
+      }),
+    );
+  } finally {
+    loading.value = false;
+  }
+}
+
+/**
+ * 打包提交用的 at_users（仅含有勾选的平台）
+ */
+function buildAtUsersPayload(): Record<string, AtSlot> {
+  const out: Record<string, AtSlot> = {};
+  for (const [code, slot] of Object.entries(selectedAtUsers.value)) {
+    if (isWorkWechatApp(code)) continue;
+    const adminIds = (slot.admin_ids || []).filter((id) => id > 0);
+    const userids = (slot.userids || []).filter((u) => u !== '');
+    if (adminIds.length === 0 && userids.length === 0) continue;
+    out[code] = { admin_ids: adminIds, userids };
+  }
+  return out;
+}
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  class: 'w-[760px]',
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    const id = detail.value?.id;
+    if (!id) return;
+    modalApi.setState({ loading: true, confirmLoading: true });
+    try {
+      // 同时保存 targets（应用 API）与 at_users（webhook @ 人）
+      await updateOaCronTask({
+        id,
+        targets: targets.value,
+        at_users: buildAtUsersPayload(),
+      });
+      message.success('发送用户配置已保存');
+      gridApi.value?.query?.();
+      modalApi.close();
+    } finally {
+      modalApi.setState({ loading: false, confirmLoading: false });
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) return;
+    const data = modalApi.getData<{ id?: number; gridApi?: any }>();
+    gridApi.value = data?.gridApi;
+    if (data?.id) {
+      await loadAll(data.id);
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="`配置发送用户：${detail.name || ''}`">
+    <div v-if="loading" class="py-8 text-center text-gray-400">加载中…</div>
+    <div v-else class="space-y-3">
+      <Alert
+        type="info"
+        show-icon
+        message="按平台分流：企微应用 API 配置投递人/群；群机器人（企微/钉钉/飞书）配置要 @ 的员工。仅展示已绑定机器人的平台。"
+      />
+      <div v-if="visiblePlatforms.length === 0" class="text-sm text-gray-400">
+        请先在「机器人」列绑定至少一个推送机器人
+      </div>
+      <Tabs
+        v-else
+        v-model:active-key="activePlatform"
+        type="card"
+      >
+        <Tabs.TabPane
+          v-for="p in visiblePlatforms"
+          :key="p.platform_code"
+          :tab="p.name"
+        >
+          <template v-if="isWorkWechatApp(p.platform_code)">
+            <div class="mb-2 text-sm text-gray-500">
+              企微应用 API 投递目标（个人 / 客户群）
+            </div>
+            <SceneTargetsPanel
+              v-model="targets"
+              :admin-list="adminList"
+              platform-code="work_wechat_app"
+            />
+          </template>
+          <template v-else>
+            <div class="mb-2 flex items-center justify-between">
+              <span class="text-sm text-gray-500">
+                @ 系统员工
+                <span v-if="p.platform_code === 'feishu'" class="text-orange-500">
+                  （飞书 webhook 将解析为 OA open_id）
+                </span>
+              </span>
+              <Checkbox
+                :checked="
+                  adminList.length > 0 &&
+                  adminIdsOf(p.platform_code).length === adminList.length
+                "
+                @change="(e: any) => toggleAllAtUsers(p.platform_code, e)"
+              >
+                全选
+              </Checkbox>
+            </div>
+            <div v-if="adminList.length === 0" class="text-sm text-gray-400">
+              暂无员工可选
+            </div>
+            <UserTagSelect
+              v-else
+              :model-value="adminIdsOf(p.platform_code)"
+              :options="
+                adminList.map((a) => ({
+                  value: a.id,
+                  label: a.name,
+                  avatar: a.avatar || '',
+                }))
+              "
+              placeholder="选择要 @ 的员工（可多选）"
+              @update:model-value="(v) => setAdminIds(p.platform_code, v)"
+            />
+          </template>
+        </Tabs.TabPane>
+      </Tabs>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/system/oa-cron-task/config/form.ts b/apps/web-antd/src/views/system/oa-cron-task/config/form.ts
new file mode 100644
index 00000000..10fe855a
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-cron-task/config/form.ts
@@ -0,0 +1,98 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+/**
+ * 编辑弹窗表单（遗留 schema，实际编辑走 components/modal.vue 自定义布局）
+ * task_code / name 只读；封面图与跳转链接分存
+ */
+export const modalFormProps: VbenFormProps = {
+  wrapperClass: 'grid-cols-1',
+  commonConfig: {
+    formItemClass: 'col-span-1',
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'name',
+      label: '任务名称',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'task_code',
+      label: '任务编码',
+      componentProps: {
+        disabled: true,
+      },
+      help: '与 Artisan 命令绑定，不可修改',
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'scene_code',
+      label: '场景编码',
+      rules: 'required',
+      help: '对应 OA 场景 scene_code，推送走 OaNotifyService.dispatch',
+      componentProps: {
+        placeholder: '如 unpaid_unshipped_hourly',
+        disabled: true,
+      },
+    },
+    {
+      component: 'RadioGroup',
+      fieldName: 'enabled',
+      label: '启停',
+      rules: 'selectRequired',
+      defaultValue: 0,
+      componentProps: {
+        options: [
+          { label: '启用', value: 1 },
+          { label: '禁用', value: 0 },
+        ],
+      },
+    },
+    {
+      component: 'UploadImage',
+      fieldName: 'card_image_urls',
+      label: '卡片图',
+      help: '作为 vars.card_image；与 jump_url 分存',
+      componentProps: {
+        maxCount: 1,
+        multiple: false,
+        acceptTypes: [1],
+      },
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'jump_url',
+      label: '跳转链接',
+      help: '作为 vars.jump_url；与 card_image_url 分存',
+      componentProps: {
+        placeholder: 'https://...',
+      },
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'remark',
+      label: '备注',
+      componentProps: {
+        rows: 3,
+        placeholder: 'crontab 建议等说明',
+      },
+    },
+  ],
+  showDefaultActions: false,
+};
diff --git a/apps/web-antd/src/views/system/oa-cron-task/config/search.ts b/apps/web-antd/src/views/system/oa-cron-task/config/search.ts
new file mode 100644
index 00000000..25d20e1c
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-cron-task/config/search.ts
@@ -0,0 +1,46 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+/**
+ * 列表顶部搜索表单
+ * 按任务名 / 编码 / 启停筛选，方便运维定位
+ */
+export const formOptions: VbenFormProps = {
+  collapsed: false,
+  schema: [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '任务名称',
+      },
+      fieldName: 'name',
+      label: '任务名称',
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: 'task_code',
+      },
+      fieldName: 'task_code',
+      label: '任务编码',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          { label: '启用', value: 1 },
+          { label: '禁用', value: 0 },
+        ],
+        placeholder: '启停状态',
+      },
+      fieldName: 'enabled',
+      label: '启停',
+    },
+  ],
+  showCollapseButton: false,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  submitOnChange: false,
+  submitOnEnter: true,
+};
diff --git a/apps/web-antd/src/views/system/oa-cron-task/config/table.ts b/apps/web-antd/src/views/system/oa-cron-task/config/table.ts
new file mode 100644
index 00000000..f8a4610c
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-cron-task/config/table.ts
@@ -0,0 +1,117 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getOaCronTaskList } from '#/views/system/oa-cron-task/api';
+
+interface RowType {
+  id: number;
+  task_code: string;
+  name: string;
+  enabled: number;
+  /** 1定时 2主动触发 */
+  type: number;
+  scene_code: string;
+  card_image_url: string;
+  jump_url: string;
+  active_types_summary: string;
+  robot_names: string;
+  target_summary: string;
+  remark: string;
+  created_at: string;
+  updated_at: string;
+}
+
+/**
+ * OA 推送任务列表表格（定时 + 主动触发）
+ * 启停用 Switch；消息配置/机器人/发送用户列可点击打开独立配置弹窗；卡片图缩略图展示
+ */
+export const gridOptions: VxeGridProps<RowType> = {
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+  },
+  columns: [
+    { field: 'id', align: 'left', title: 'ID', width: 70 },
+    { field: 'name', align: 'left', title: '任务名称', minWidth: 160 },
+    { field: 'task_code', align: 'left', title: '任务编码', minWidth: 180 },
+    {
+      field: 'type',
+      align: 'left',
+      title: '触发方式',
+      width: 110,
+      slots: { default: 'task_type' },
+    },
+    {
+      field: 'enabled',
+      align: 'left',
+      title: '启停',
+      width: 100,
+      slots: { default: 'enabled' },
+    },
+    { field: 'scene_code', align: 'left', title: '场景编码', minWidth: 160 },
+    {
+      field: 'card_image_url',
+      align: 'left',
+      title: '卡片图',
+      width: 100,
+      slots: { default: 'card_image' },
+    },
+    {
+      field: 'active_types_summary',
+      align: 'left',
+      title: '消息配置',
+      minWidth: 180,
+      slots: { default: 'message_config' },
+    },
+    {
+      field: 'robot_names',
+      align: 'left',
+      title: '机器人',
+      minWidth: 140,
+      slots: { default: 'robots' },
+    },
+    {
+      field: 'target_summary',
+      align: 'left',
+      title: '发送用户',
+      minWidth: 120,
+      slots: { default: 'send_users' },
+    },
+    { field: 'remark', align: 'left', title: '备注', minWidth: 180 },
+    { field: 'updated_at', align: 'left', title: '更新时间', width: 180 },
+    {
+      type: 'html',
+      title: '操作',
+      slots: { default: 'action' },
+      width: 100,
+      fixed: 'right',
+    },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        return await getOaCronTaskList({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  height: 'auto',
+  border: false,
+  toolbarConfig: {
+    search: true,
+    refresh: true,
+    print: false,
+    export: false,
+    zoom: true,
+    custom: {
+      icon: 'vxe-icon-menu',
+    },
+  },
+  showOverflow: false,
+};
diff --git a/apps/web-antd/src/views/system/oa-cron-task/index.vue b/apps/web-antd/src/views/system/oa-cron-task/index.vue
new file mode 100644
index 00000000..b203cb5e
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-cron-task/index.vue
@@ -0,0 +1,161 @@
+<script lang="ts" setup>
+/**
+ * OA 推送任务管理页（定时 crontab + 主动触发如提现）
+ * 列表 Switch 启停；列点击配置消息/机器人/发送用户；编辑弹窗只管任务基础信息
+ */
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Image, Switch, Tag, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import { updateOaCronTask } from './api';
+import FormModalDemo from './components/modal.vue';
+import MessageConfigModalDemo from './components/message-config-modal.vue';
+import RobotsModalDemo from './components/robots-modal.vue';
+import TargetsModalDemo from './components/targets-modal.vue';
+import { formOptions } from './config/search';
+import { gridOptions } from './config/table';
+
+defineOptions({ name: 'OaCronTask' });
+
+const gridEvents: VxeGridListeners<any> = {};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+const [MessageConfigModal, messageConfigModalApi] = useVbenModal({
+  connectedComponent: MessageConfigModalDemo,
+});
+
+const [RobotsModal, robotsModalApi] = useVbenModal({
+  connectedComponent: RobotsModalDemo,
+});
+
+const [TargetsModal, targetsModalApi] = useVbenModal({
+  connectedComponent: TargetsModalDemo,
+});
+
+/**
+ * 打开任务基础信息编辑（启停/封面/跳转/备注）
+ */
+function openEdit(row: Record<string, any>) {
+  formModalApi.setData({ id: row.id, gridApi });
+  formModalApi.open();
+}
+
+/**
+ * 打开消息配置（类型 + payload_schema 内容）
+ */
+function openMessageConfig(row: Record<string, any>) {
+  messageConfigModalApi.setData({ id: row.id, gridApi });
+  messageConfigModalApi.open();
+}
+
+/**
+ * 打开配置机器人弹窗
+ */
+function openRobots(row: Record<string, any>) {
+  robotsModalApi.setData({ id: row.id, gridApi });
+  robotsModalApi.open();
+}
+
+/**
+ * 打开配置发送用户弹窗
+ */
+function openTargets(row: Record<string, any>) {
+  targetsModalApi.setData({ id: row.id, gridApi });
+  targetsModalApi.open();
+}
+
+/**
+ * 列表行内切换启停（立即落库，避免依赖保存按钮）
+ */
+async function handleEnabledChange(
+  row: Record<string, any>,
+  checked: boolean | string | number,
+) {
+  const next = checked === true || checked === 1 || checked === '1' ? 1 : 0;
+  const old = Number(row.enabled) === 1 ? 1 : 0;
+  if (next === old) {
+    return;
+  }
+  row.enabled = next;
+  try {
+    await updateOaCronTask({ id: row.id, enabled: next });
+    message.success(next === 1 ? '已启用' : '已禁用');
+  } catch {
+    row.enabled = old;
+  }
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal />
+    <MessageConfigModal />
+    <RobotsModal />
+    <TargetsModal />
+    <Grid>
+      <template #task_type="{ row }">
+        <Tag :color="Number(row.type) === 2 ? 'orange' : 'blue'">
+          {{ Number(row.type) === 2 ? '主动触发' : '定时' }}
+        </Tag>
+      </template>
+      <template #enabled="{ row }">
+        <Switch
+          :checked="Number(row.enabled) === 1"
+          checked-children="开"
+          un-checked-children="关"
+          @change="(checked) => handleEnabledChange(row, checked)"
+        />
+      </template>
+      <template #card_image="{ row }">
+        <Image
+          v-if="row.card_image_url"
+          :src="row.card_image_url"
+          :width="40"
+          :height="40"
+          style="object-fit: cover; border-radius: 4px"
+        />
+        <span v-else class="text-gray-400">未配置</span>
+      </template>
+      <template #message_config="{ row }">
+        <a class="cursor-pointer text-primary" @click="openMessageConfig(row)">
+          {{ row.active_types_summary || '点击配置' }}
+        </a>
+      </template>
+      <template #robots="{ row }">
+        <a class="cursor-pointer text-primary" @click="openRobots(row)">
+          {{ row.robot_names || '未配置（点击配置）' }}
+        </a>
+      </template>
+      <template #send_users="{ row }">
+        <a class="cursor-pointer text-primary" @click="openTargets(row)">
+          {{ row.target_summary || '未配置（点击配置）' }}
+        </a>
+      </template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              onClick: () => openEdit(row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/system/oa-scene/api/index.ts b/apps/web-antd/src/views/system/oa-scene/api/index.ts
index aa44f936..35821a99 100644
--- a/apps/web-antd/src/views/system/oa-scene/api/index.ts
+++ b/apps/web-antd/src/views/system/oa-scene/api/index.ts
@@ -54,6 +54,7 @@ export async function getOaMessageTypes() {
 /**
  * 场景测试发送（同步）
  * 可传 id（已保存）或草稿 message_config + robot_ids；test_params 覆盖正文类字段
+ * platform_codes（任务 6）：可选指定只测试某些平台，未在列表中的机器人直接跳过
  */
 export async function testSendOaScene(data: {
   id?: number;
@@ -63,6 +64,7 @@ export async function testSendOaScene(data: {
   robot_ids?: number[];
   at_users?: Record<string, any>;
   targets?: any[];
+  platform_codes?: string[];
   test_params?: {
     content?: string;
     title?: string;
@@ -72,3 +74,58 @@ export async function testSendOaScene(data: {
 }) {
   return requestClient.post<any>(`${prefix}test-send`, data);
 }
+
+/* ===================================================================== *
+ * OA 测试发送手机号记忆库（任务 5）
+ * 路由前缀：oa-test-phone/
+ * 按 admin_id + platform_code 维度隔离，按 use_count 倒序常用排序
+ * ===================================================================== */
+const phonePrefix = 'oa-test-phone/';
+
+/** 单条手机号记忆记录 */
+export interface OaTestPhoneItem {
+  id: number;
+  phone: string;
+  name?: string;
+  use_count: number;
+  last_used_at: number;
+}
+
+/**
+ * 拉取当前操作员在某平台下的手机号记忆列表（按常用排序）
+ * @param platformCode 平台编码
+ */
+export async function getOaTestPhones(platformCode: string) {
+  return requestClient.get<OaTestPhoneItem[]>(`${phonePrefix}list-by-platform`, {
+    params: { platform_code: platformCode },
+  });
+}
+
+/**
+ * 记录一次手机号使用（upsert + use_count++）
+ * @param data { platform_code, phone, name? }
+ */
+export async function recordOaTestPhone(data: {
+  platform_code: string;
+  phone: string;
+  name?: string;
+}) {
+  return requestClient.post<OaTestPhoneItem>(`${phonePrefix}record`, data);
+}
+
+/**
+ * 批量记录多个手机号（一次测试发送可能 @ 多人）
+ */
+export async function recordOaTestPhonesBatch(data: {
+  platform_code: string;
+  phones: string[];
+}) {
+  return requestClient.post<any>(`${phonePrefix}record-batch`, data);
+}
+
+/**
+ * 删除单条手机号记忆
+ */
+export async function deleteOaTestPhone(id: number) {
+  return requestClient.post<any>(`${phonePrefix}delete`, { id });
+}
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
index 0bcea432..e32f1196 100644
--- 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
@@ -1,26 +1,43 @@
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
+/**
+ * OA 场景新增/编辑内页表单（由列表页 v-if 挂载，替代原 modal.vue）
+ *
+ * 三步 C 端化流程（任务 3 大改造）：
+ *   Step 1 基础信息：scene_code/scene_name/启用平台/字段绑定模式
+ *   Step 2 平台配置（合并原"平台消息 + 投递目标"）：
+ *         - 顶部 sticky 平台 Tab（仅展示 Step 1 选中的平台）
+ *         - 纵向滚动：消息类型 + payload + 字段绑定 + 推送机器人 + 投递目标 + @人
+ *         - 桌面右侧 / 移动底部实时消息预览
+ *   Step 3 测试发送：按启用平台独立测试，每平台一行 + 手机号记忆
+ *
+ * 提交 at_users 统一为双结构（后端兼容旧纯数组）：
+ *   { work_wechat: { admin_ids: number[], userids: string[] }, work_wechat_app: { ... } }
+ * work_wechat_app 额外提交 targets：人/多群/每群 @
+ */
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+import { Page, useVbenModal, VbenIcon } from '@vben/common-ui';
 
 import {
   Alert,
   Button,
+  Card,
   Checkbox,
   Empty,
   Input,
-  InputNumber,
   message,
   Radio,
   RadioGroup,
   Select,
   Spin,
+  Step,
+  Steps,
   Tabs,
-  Textarea,
+  Tag,
 } from 'ant-design-vue';
 
-import UploadImage from '#/components/form/components/upload-image.vue';
-import UploadOssFile from '#/components/form/components/upload-oss-file.vue';
+import UserTagSelect from '#/components/form/components/user-tag-select.vue';
 import { useVbenForm } from '#/adapter/form';
 import { getAdminList } from '#/views/system/admin/api';
 import { getOaPlatformList } from '#/views/system/oa-platform/api';
@@ -37,19 +54,13 @@ import {
   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 MsgPreview from '#/views/system/oa-scene/components/msg-preview.vue';
+import PhoneMemoryPicker from '#/views/system/oa-scene/components/phone-memory-picker.vue';
+import PayloadSchemaForm from '#/views/system/oa-scene/components/payload-schema-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：人/多群/每群 @
- */
-
+import { getOaWwUserList } from '#/views/system/oa-chat/api/org';
 interface MessageTypeOption {
   message_type: string;
   name: string;
@@ -95,6 +106,11 @@ const loading = ref(false);
 const saving = ref(false);
 const testing = ref(false);
 
+/** 分步表单当前步：0=基础信息, 1=平台配置（合并）, 2=测试发送 */
+const currentStep = ref(0);
+const stepValidating = ref(false);
+const STEP_TITLES = ['基础信息', '平台配置', '测试发送'];
+
 /** 平台列表（仅展示启用的平台） */
 const platforms = ref<any[]>([]);
 /** 启用平台下的所有机器人 */
@@ -107,14 +123,12 @@ 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>>>({});
 
+/** 字段绑定（任务 2）：键 "<platform_code>.<payload_path>" → business_key */
+const fieldBindings = ref<Record<string, string>>({});
+
 /** 机器人勾选（按平台分组） */
 const selectedRobots = ref<Record<string, number[]>>({});
 /** @ 配置（按平台）：admin_ids=系统员工，userids=应用群成员 */
@@ -127,48 +141,51 @@ const membersByPlatform = ref<
 >({});
 /** 应用 API 投递目标（人 / 群 / 每群 @） */
 const sceneTargets = ref<SceneTargetItem[]>([]);
-/** 投递目标面板实例（保存前校验客户群确认人） */
 const targetsPanelRef = ref<{ validateBeforeSubmit: () => string } | null>(
   null,
 );
-/** 暂存待回显的 robot_ids（数据加载完后处理） */
+/** 暂存待回显的 robot_ids */
 let pendingRobotIds: number[] = [];
 /** 暂存待回显的 targets */
 let pendingTargets: SceneTargetItem[] = [];
 
-/** 业务传参示例值（仅测试用，不落库） */
-const testParams = ref({
-  content: '',
-  title: '',
-  url: '',
-  media_url: '',
-});
-/** 传参示例里展示的 scene_code 提示 */
-const formSceneCode = ref('');
+/** 测试发送：每平台 phones + 可替换业务字段 vars */
+const testParamsByPlatform = ref<
+  Record<string, { phones: string[]; vars: Record<string, string> }>
+>({});
+/** 单个平台测试中的 loading（按平台独立） */
+const testingPlatform = ref<Record<string, boolean>>({});
 
-/** 业务可传字段说明（与 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',
-  },
-];
+/** 41054 客户群未激活类的错误，前端给专门提示 */
+const errCode41054Tip =
+  '客户群群发任务权限未激活（errcode=41054），请在企微管理端开通「客户联系 → 客户群发」功能';
+
+/**
+ * Step3 临时测试成员（仅 work_wechat_app）
+ * 选中后合并进本次 testSend 的 targets；未选则仍用场景已配置 targets
+ */
+const testWwMemberUserids = ref<string[]>([]);
+const wwTestUserOptions = ref<{ label: string; value: string }[]>([]);
+
+/** 加载企微组织成员，供 Step3 临时测试选人 */
+async function loadWwTestUsers() {
+  try {
+    const userRes = await getOaWwUserList({
+      platform_code: 'work_wechat_app',
+      page: 1,
+      pageSize: 500,
+    });
+    const userData = userRes?.data ?? userRes ?? {};
+    const items = Array.isArray(userData.items) ? userData.items : [];
+    wwTestUserOptions.value = items.map((u: any) => ({
+      label: u.name ? `${u.name}（${u.userid}）` : String(u.userid),
+      value: String(u.userid),
+    }));
+  } catch (e) {
+    console.error(e);
+    wwTestUserOptions.value = [];
+  }
+}
 
 const pageTitle = computed(() =>
   props.isUpdate ? '编辑通知场景' : '新增通知场景',
@@ -176,14 +193,67 @@ const pageTitle = computed(() =>
 
 const [Form, formApi] = useVbenForm(modalFormProps);
 
-/** 复用机器人模块的测试结果弹窗，展示场景测试发送明细 */
+/** 复用机器人模块的测试结果弹窗 */
 const [TestResultModalComponent, testResultModalApi] = useVbenModal({
   connectedComponent: TestResultModal,
 });
 
+/* ============================================================ *
+ * 响应式断点：> 768px = 桌面双栏（左配置 + 右预览），否则单栏（底部预览）
+ * ============================================================ */
+
+const isDesktop = ref(false);
+
+function syncBreakpoint() {
+  isDesktop.value = window.innerWidth >= 1024;
+}
+
+onMounted(() => {
+  syncBreakpoint();
+  window.addEventListener('resize', syncBreakpoint);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', syncBreakpoint);
+});
+
+/* ============================================================ *
+ * Step 1 启用平台 + 字段绑定模式
+ * ============================================================ */
+
 /**
- * 规范化详情回显的 at_users（兼容旧纯数组）
+ * form 值镜像（vben form 的 getValues 非响应式，无法被 computed 跟踪）
+ * 这里在 schema 的 componentProps.onChange 里把字段同步到本地 ref
  */
+const scenePlatformsMirror = ref<string[]>([]);
+const fieldBindingModeMirror = ref(0);
+
+/** 当前选中启用的平台编码数组 */
+const scenePlatforms = computed<string[]>(() => scenePlatformsMirror.value);
+
+/** 字段绑定模式（0=固定 1=可替换） */
+const fieldBindingMode = computed(() => fieldBindingModeMirror.value);
+
+/** form schema 字段变更同步到本地镜像（用于响应式触发 visiblePlatforms） */
+function handleFormScenePlatformsChange(v: any) {
+  scenePlatformsMirror.value = Array.isArray(v) ? v.map(String) : [];
+}
+
+function handleFormFieldBindingModeChange(v: any) {
+  fieldBindingModeMirror.value = Number(v) === 1 ? 1 : 0;
+}
+
+/** 实际在 Step 2 展示的平台：Step 1 选中非空 → 取交集；为空 → 全部启用平台（兼容旧行为） */
+const visiblePlatforms = computed(() => {
+  if (scenePlatforms.value.length === 0) return platforms.value;
+  const set = new Set(scenePlatforms.value);
+  return platforms.value.filter((p) => set.has(p.platform_code));
+});
+
+/* ============================================================ *
+ * 数据回显 / 初始化
+ * ============================================================ */
+
 function normalizeAtUsers(
   raw: Record<string, any> | undefined,
 ): Record<string, { admin_ids: number[]; userids: string[] }> {
@@ -225,34 +295,116 @@ function useridsOf(platformCode: string): string[] {
   return selectedAtUsers.value[platformCode]?.userids || [];
 }
 
-/**
- * 根据 props.values 重置并回显表单（等价于原 modal onOpenChange 打开逻辑）
- */
+async function validateCurrentStep(): Promise<boolean> {
+  if (currentStep.value === 0) {
+    const e = await formApi.validate();
+    return !!e.valid;
+  }
+  if (currentStep.value === 1) {
+    // Step 1 平台配置：至少一个平台选了消息类型；必填 payload；至少一个机器人
+    const configured = visiblePlatforms.value.some(
+      (p) => !!selectedMessageType.value[p.platform_code],
+    );
+    if (!configured) {
+      message.warning('请至少为一个平台选择消息类型');
+      return false;
+    }
+    if (!validatePayloadRequired()) return false;
+    const totalRobots = Object.values(selectedRobots.value).reduce(
+      (s, arr) => s + arr.length,
+      0,
+    );
+    if (totalRobots === 0) {
+      message.warning('请至少勾选一个推送机器人');
+      return false;
+    }
+    const targetErr = targetsPanelRef.value?.validateBeforeSubmit?.() || '';
+    if (targetErr) {
+      message.warning(targetErr);
+      return false;
+    }
+    return true;
+  }
+  return true;
+}
+
+function validatePayloadRequired(): boolean {
+  for (const platform of visiblePlatforms.value) {
+    const code = platform.platform_code;
+    const schema = currentPayloadSchema(code);
+    for (const field of schema) {
+      if (!field.required) continue;
+      const val = getPayloadValue(code, field.name);
+      const isEmpty =
+        val === undefined ||
+        val === null ||
+        val === '' ||
+        (Array.isArray(val) && val.length === 0) ||
+        (typeof val === 'object' &&
+          !Array.isArray(val) &&
+          Object.keys(val).length === 0);
+      if (isEmpty) {
+        message.warning(`${platform.name} 缺少必填字段：${field.label}`);
+        return false;
+      }
+    }
+  }
+  return true;
+}
+
+async function goNext() {
+  stepValidating.value = true;
+  try {
+    const ok = await validateCurrentStep();
+    if (ok) {
+      currentStep.value = Math.min(currentStep.value + 1, 2);
+    }
+  } finally {
+    stepValidating.value = false;
+  }
+}
+
+function goPrev() {
+  currentStep.value = Math.max(currentStep.value - 1, 0);
+}
+
 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 || '');
+  fieldBindings.value = {};
+  testParamsByPlatform.value = {};
+  testingPlatform.value = {};
   if (values && Object.keys(values).length > 0) {
     formApi.setValues({
       ...values,
-      // 编辑回显时不带 message_config 进 form（避免被 form schema 当字段处理）
+      // 编辑回显时不带 message_config/field_bindings 进 form（避免被 form schema 当字段处理）
       message_config: undefined,
+      field_bindings: undefined,
+      // scene_platforms / field_binding_mode 直接 formApi.setValues，schema 中已有同名 fieldName
     });
+    // 同步镜像（formApi.setValues 不会触发 onChange，所以手动同步）
+    handleFormScenePlatformsChange(values.scene_platforms || []);
+    handleFormFieldBindingModeChange(values.field_binding_mode || 0);
     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 || {};
     }
+    // 回显字段绑定（后端返回 { "<platform>.<field>": "<key>" }）
+    const fb = values.field_bindings || {};
+    if (fb && typeof fb === 'object') {
+      fieldBindings.value = { ...fb };
+    }
     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',
+      userid: String(t.userid || '').trim() || undefined,
       admin_id: Number(t.admin_id || 0) || undefined,
       chat_id: Number(t.chat_id || 0) || undefined,
       at_admin_ids: (t.at_admin_ids || [])
@@ -268,6 +420,7 @@ function initFromValues(values: Record<string, any>) {
     pendingRobotIds = [];
     pendingTargets = [];
   }
+  currentStep.value = 0;
   loadData();
 }
 
@@ -279,9 +432,6 @@ watch(
   { immediate: true },
 );
 
-/**
- * 加载平台、消息类型、机器人、员工列表（并行）
- */
 async function loadData() {
   loading.value = true;
   try {
@@ -299,6 +449,68 @@ async function loadData() {
       .sort((a: any, b: any) => (b.sort || 0) - (a.sort || 0));
     activePlatformTab.value = platforms.value[0]?.platform_code || '';
 
+    // 注入 scene_platforms Checkbox.Group 选项；仅「新增」默认全选，「编辑」严格用详情已选
+    try {
+      formApi.updateSchema([
+        {
+          fieldName: 'scene_platforms',
+          componentProps: {
+            options: platforms.value.map((p) => ({
+              label: p.name,
+              value: p.platform_code,
+            })),
+            onChange: (e: any) => {
+              const val = Array.isArray(e) ? e : e?.target?.value;
+              handleFormScenePlatformsChange(val);
+            },
+          },
+        },
+        {
+          fieldName: 'field_binding_mode',
+          componentProps: {
+            onChange: (e: any) => {
+              const val = e?.target?.value ?? e;
+              handleFormFieldBindingModeChange(val);
+            },
+          },
+        },
+      ]);
+      const platformsAll = platforms.value.map((p) => p.platform_code);
+      if (props.isUpdate) {
+        // 编辑：只用详情回显的已选平台，禁止兜底全选（getValues 是异步，不要直接点属性）
+        const fromDetail = Array.isArray(props.values?.scene_platforms)
+          ? props.values.scene_platforms.map(String)
+          : [];
+        const formVals = await formApi.getValues();
+        const fromForm = Array.isArray(formVals?.scene_platforms)
+          ? formVals.scene_platforms.map(String)
+          : [];
+        const selected =
+          fromDetail.length > 0 ? fromDetail : fromForm;
+        handleFormScenePlatformsChange(selected);
+        if (selected.length > 0) {
+          await formApi.setValues({
+            ...formVals,
+            scene_platforms: selected,
+          });
+        }
+      } else {
+        // 新增：默认全选当前启用平台
+        const formVals = await formApi.getValues();
+        await formApi.setValues({
+          ...formVals,
+          scene_platforms: platformsAll,
+        });
+        handleFormScenePlatformsChange(platformsAll);
+      }
+      // 字段绑定模式：编辑用详情值，新增保持默认；禁止用 getValues 异步结果覆盖（会竞态打回 0）
+      if (props.isUpdate) {
+        handleFormFieldBindingModeChange(props.values?.field_binding_mode ?? 0);
+      }
+    } catch (e) {
+      console.warn('scene_platforms schema 注入失败', e);
+    }
+
     const typesData = (typesRes as any)?.data ?? typesRes ?? {};
     messageTypesMap.value = typesData;
 
@@ -320,12 +532,14 @@ async function loadData() {
     adminList.value = adminRows.map((a: any) => ({
       id: a.id,
       name: a.nick_name || a.name || a.username || `员工${a.id}`,
+      avatar: a.avatar || '',
     }));
 
     if (pendingRobotIds.length > 0) {
       selectedRobots.value = groupRobotsByPlatform(pendingRobotIds);
     }
     await refreshAppMembers();
+    await loadWwTestUsers();
 
     for (const platform of platforms.value) {
       const code = platform.platform_code;
@@ -360,13 +574,255 @@ function groupRobotsByPlatform(robotIds: number[]): Record<string, number[]> {
   return result;
 }
 
+/* ============================================================ *
+ * 字段绑定（任务 2）：自动生成默认 business_key
+ *   text 类 → name1/name2，image 类 → img1/img2，
+ *   video 类 → video1，voice 类 → voice1，file 类 → file1
+ * ============================================================ */
+
+/** 字段类型分类（按 acceptTypes / component 推断） */
+function fieldCategory(field: PayloadFieldSchema): 'text' | 'image' | 'video' | 'voice' | 'file' {
+  const types = fieldAcceptTypes(field);
+  // xk_file.type：0=图片 1=视频 2=音频 3=excel 4=压缩包
+  if (types.includes(0)) return 'image';
+  if (types.includes(1)) return 'video';
+  if (types.includes(2)) return 'voice';
+  if (types.length > 0 && types.every((t) => t >= 3)) return 'file';
+  // Textarea/Input/InputNumber/RadioGroup/Select 等文本类
+  return 'text';
+}
+
+const FIELD_PREFIX: Record<string, string> = {
+  text: 'name',
+  image: 'img',
+  video: 'video',
+  voice: 'voice',
+  file: 'file',
+};
+
+/** 计算某平台下某字段的默认 business_key（按字段类型在同类型中递增） */
+function defaultBindingKey(platformCode: string, fieldName: string): string {
+  const schema = currentPayloadSchema(platformCode);
+  const counts: Record<string, number> = {
+    text: 0,
+    image: 0,
+    video: 0,
+    voice: 0,
+    file: 0,
+  };
+  for (const f of schema) {
+    const cat = fieldCategory(f);
+    counts[cat] += 1;
+    if (f.name === fieldName) {
+      return `${FIELD_PREFIX[cat]}${counts[cat]}`;
+    }
+  }
+  // 兜底：用 text+1
+  return 'name1';
+}
+
+/** 字段绑定 path：统一 "<platform>.payload.<fieldPath>"（渠道只读 payload） */
+function bindingPathKey(platformCode: string, fieldPath: string): string {
+  const fp = String(fieldPath || '').replace(/^\.?payload\./, '');
+  return `${platformCode}.payload.${fp}`;
+}
+
 /**
- * 组装当前表单的场景草稿（保存与测试发送共用）
+ * 展开某平台可绑定字段（普通 schema + NewsList/LinkList 按条展开子字段）
+ * fieldPath 相对 payload，如 content / articles.0.title / links.1.title
  */
-async function assembleSceneDraft() {
+function expandBindingFields(
+  platformCode: string,
+): Array<{ fieldPath: string; label: string }> {
+  const schema = currentPayloadSchema(platformCode);
+  const payload = payloadValues.value[platformCode] || {};
+  const list: Array<{ fieldPath: string; label: string }> = [];
+  for (const field of schema) {
+    const comp = String(field.component || '');
+    if (comp === 'NewsList') {
+      const articles = Array.isArray(payload[field.name])
+        ? payload[field.name]
+        : [];
+      const count = Math.max(articles.length, 1);
+      const subKeys: Array<{ key: string; label: string }> = [
+        { key: 'title', label: '标题' },
+        { key: 'description', label: '描述' },
+        { key: 'url', label: '链接' },
+        { key: 'picurl', label: '封面' },
+      ];
+      for (let i = 0; i < count; i++) {
+        for (const sub of subKeys) {
+          list.push({
+            fieldPath: `${field.name}.${i}.${sub.key}`,
+            label: `${field.label || '图文'}#${i + 1}.${sub.label}`,
+          });
+        }
+      }
+      continue;
+    }
+    if (comp === 'LinkList') {
+      const links = Array.isArray(payload[field.name]) ? payload[field.name] : [];
+      const count = Math.max(links.length, 1);
+      const subKeys: Array<{ key: string; label: string }> = [
+        { key: 'title', label: '标题' },
+        { key: 'messageURL', label: '链接' },
+        { key: 'picURL', label: '封面' },
+      ];
+      for (let i = 0; i < count; i++) {
+        for (const sub of subKeys) {
+          list.push({
+            fieldPath: `${field.name}.${i}.${sub.key}`,
+            label: `${field.label || '链接'}#${i + 1}.${sub.label}`,
+          });
+        }
+      }
+      continue;
+    }
+    // 列表整块不单独绑；普通输入/图片等一对一
+    if (['ButtonList', 'PostEditor', 'TemplateCardEditor'].includes(comp)) {
+      continue;
+    }
+    list.push({
+      fieldPath: field.name,
+      label: String(field.label || field.name),
+    });
+  }
+  return list;
+}
+
+/** 计算展开字段的默认 business_key（按展开顺序 name1/name2…） */
+function defaultBindingKeyForPath(
+  platformCode: string,
+  fieldPath: string,
+): string {
+  const fields = expandBindingFields(platformCode);
+  let idx = 0;
+  for (const f of fields) {
+    idx += 1;
+    if (f.fieldPath === fieldPath) {
+      return `name${idx}`;
+    }
+  }
+  return 'name1';
+}
+
+/** 读取某字段的 business_key（兼容旧路径 platform.field） */
+function getBindingKey(platformCode: string, fieldPath: string): string {
+  const path = bindingPathKey(platformCode, fieldPath);
+  if (fieldBindings.value[path] !== undefined) {
+    return fieldBindings.value[path];
+  }
+  // 兼容旧数据：work_wechat.content（无 payload. 段）
+  const legacy = `${platformCode}.${fieldPath}`;
+  if (fieldBindings.value[legacy] !== undefined) {
+    return fieldBindings.value[legacy];
+  }
+  return defaultBindingKeyForPath(platformCode, fieldPath);
+}
+
+function setBindingKey(platformCode: string, fieldPath: string, val: string) {
+  const path = bindingPathKey(platformCode, fieldPath);
+  const next = { ...fieldBindings.value, [path]: val };
+  // 清掉同字段旧路径，避免双写歧义
+  const legacy = `${platformCode}.${fieldPath}`;
+  if (legacy in next) {
+    delete next[legacy];
+  }
+  fieldBindings.value = next;
+}
+
+/**
+ * Step3 可替换业务字段列表（与 expandBindingFields 对齐）
+ */
+function replaceableFieldsOf(
+  platformCode: string,
+): Array<{ businessKey: string; payloadPath: string; label: string }> {
+  if (fieldBindingMode.value !== 1) return [];
+  const seen = new Set<string>();
+  const list: Array<{
+    businessKey: string;
+    payloadPath: string;
+    label: string;
+  }> = [];
+  for (const f of expandBindingFields(platformCode)) {
+    const path = bindingPathKey(platformCode, f.fieldPath);
+    const businessKey = String(getBindingKey(platformCode, f.fieldPath) || '').trim();
+    if (!businessKey || seen.has(businessKey)) continue;
+    seen.add(businessKey);
+    list.push({
+      businessKey,
+      payloadPath: path,
+      label: f.label,
+    });
+  }
+  return list;
+}
+
+/**
+ * 打包入库/测试用的 field_bindings：补齐展开字段默认 key
+ */
+function resolveFieldBindingsMap(): Record<string, string> {
+  if (fieldBindingMode.value !== 1) return {};
+  const out: Record<string, string> = { ...fieldBindings.value };
+  for (const p of visiblePlatforms.value) {
+    const code = p.platform_code;
+    for (const f of expandBindingFields(code)) {
+      const path = bindingPathKey(code, f.fieldPath);
+      if (out[path] === undefined) {
+        // 迁移旧路径
+        const legacy = `${code}.${f.fieldPath}`;
+        out[path] =
+          out[legacy] !== undefined
+            ? out[legacy]
+            : defaultBindingKeyForPath(code, f.fieldPath);
+        if (legacy in out) {
+          delete out[legacy];
+        }
+      }
+    }
+  }
+  const cleaned: Record<string, string> = {};
+  for (const [k, v] of Object.entries(out)) {
+    const key = String(v || '').trim();
+    if (key !== '') cleaned[k] = key;
+  }
+  return cleaned;
+}
+
+/** 读取/写入某平台测试 vars */
+function getTestVar(platformCode: string, businessKey: string): string {
+  return testParamsByPlatform.value[platformCode]?.vars?.[businessKey] || '';
+}
+
+function setTestVar(platformCode: string, businessKey: string, val: string) {
+  const prev = testParamsByPlatform.value[platformCode] || {
+    phones: [],
+    vars: {},
+  };
+  testParamsByPlatform.value = {
+    ...testParamsByPlatform.value,
+    [platformCode]: {
+      phones: prev.phones || [],
+      vars: { ...(prev.vars || {}), [businessKey]: val },
+    },
+  };
+}
+
+/* ============================================================ *
+ * 草稿组装（保存 + 测试发送共用）
+ * ============================================================ */
+
+async function assembleSceneDraft(platformCodes?: string[]) {
   const baseValues = await formApi.getValues();
   const message_config: Record<string, any> = {};
-  for (const platform of platforms.value) {
+  // 仅组装传入 platformCodes 列表（测试用），未传则全部
+  const targetPlatforms =
+    platformCodes && platformCodes.length > 0
+      ? visiblePlatforms.value.filter((p) =>
+          platformCodes.includes(p.platform_code),
+        )
+      : visiblePlatforms.value;
+  for (const platform of targetPlatforms) {
     const code = platform.platform_code;
     const messageType = selectedMessageType.value[code];
     if (!messageType) continue;
@@ -376,7 +832,9 @@ async function assembleSceneDraft() {
     };
   }
   const robot_ids: number[] = [];
+  const filterSet = platformCodes ? new Set(platformCodes) : null;
   for (const platformCode of Object.keys(selectedRobots.value)) {
+    if (filterSet && !filterSet.has(platformCode)) continue;
     robot_ids.push(...(selectedRobots.value[platformCode] || []));
   }
   const at_users: Record<
@@ -384,6 +842,7 @@ async function assembleSceneDraft() {
     { admin_ids: number[]; userids: string[] }
   > = {};
   for (const platformCode of Object.keys(selectedAtUsers.value)) {
+    if (filterSet && !filterSet.has(platformCode)) continue;
     if (isWorkWechatApp(platformCode)) continue;
     const slot = selectedAtUsers.value[platformCode] || {
       admin_ids: [],
@@ -396,18 +855,20 @@ async function assembleSceneDraft() {
       };
     }
   }
+  // 字段绑定：仅当 mode=1 时打包（补齐默认 business_key）
+  const fb =
+    fieldBindingMode.value === 1 ? resolveFieldBindingsMap() : undefined;
   return {
     ...baseValues,
     message_config,
     robot_ids,
     at_users,
     targets: sceneTargets.value,
+    field_binding_mode: fieldBindingMode.value,
+    field_bindings: fb,
   };
 }
 
-/**
- * 将场景测试 API 结果映射为 TestResultModal 所需结构
- */
 function mapSceneResultsToModalItems(rows: any[]): TestResultItem[] {
   return rows.map((r) => ({
     message_type: String(r.message_type || r.platform_code || 'text'),
@@ -423,9 +884,6 @@ function mapSceneResultsToModalItems(rows: any[]): TestResultItem[] {
   }));
 }
 
-/**
- * 保存场景：校验通过后提交，成功则通知父级并返回列表
- */
 async function handleSave() {
   const e = await formApi.validate();
   if (!e.valid) return;
@@ -448,17 +906,18 @@ async function handleSave() {
 }
 
 /**
- * 测试发送：用当前草稿 + 示例传参同步投递，完成后打开 TestResultModal
+ * 分平台独立测试发送（任务 6）
+ * @param platformCode 单平台测试；不传则全部启用平台
  */
-async function handleTestSend() {
-  const draft = await assembleSceneDraft();
-  formSceneCode.value = String(draft.scene_code || formSceneCode.value || '');
+async function handleTestSend(platformCode?: string) {
+  const codes = platformCode ? [platformCode] : [];
+  const draft = await assembleSceneDraft(codes);
   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('请先配置至少一个平台的消息类型');
+    message.warning('请先配置该平台的消息类型');
     return;
   }
   const targetErr = targetsPanelRef.value?.validateBeforeSubmit?.() || '';
@@ -466,7 +925,77 @@ async function handleTestSend() {
     message.warning(targetErr);
     return;
   }
-  testing.value = true;
+  // 取该平台测试参数：可替换业务字段 vars + phones
+  // 一键测全部时合并各平台 vars（business_key 场景内通常唯一）
+  let mergedVars: Record<string, string> = {};
+  if (platformCode) {
+    const tp = testParamsByPlatform.value[platformCode] || {
+      phones: [],
+      vars: {},
+    };
+    mergedVars = { ...(tp.vars || {}) };
+  } else {
+    for (const p of visiblePlatforms.value) {
+      const slot = testParamsByPlatform.value[p.platform_code];
+      if (slot?.vars) {
+        mergedVars = { ...mergedVars, ...slot.vars };
+      }
+    }
+  }
+  const tp = testParamsByPlatform.value[platformCode || ''] || {
+    phones: [],
+    vars: {},
+  };
+  const test_params: any = {
+    vars: mergedVars,
+  };
+  // @ 手机号（企微/钉钉用）：把 phones 合并到 atMobiles
+  const phones = Array.isArray(tp.phones) ? tp.phones : [];
+  if (phones.length > 0) {
+    const atUsers = { ...(draft.at_users || {}) };
+    if (platformCode) {
+      const exist = atUsers[platformCode] || { admin_ids: [], userids: [] };
+      atUsers[platformCode] = {
+        admin_ids: exist.admin_ids,
+        userids: exist.userids,
+        atMobiles: phones,
+      } as any;
+    }
+    draft.at_users = atUsers;
+  }
+  // work_wechat_app：临时测试成员合并进 targets（追加个人目标，不覆盖场景已配群/人）
+  let testTargets = Array.isArray(draft.targets) ? [...draft.targets] : [];
+  if (
+    (!platformCode || isWorkWechatApp(platformCode)) &&
+    testWwMemberUserids.value.length > 0
+  ) {
+    const existUserids = new Set(
+      testTargets
+        .filter((t: any) => Number(t.target_type) === 1)
+        .map((t: any) => String(t.userid || '').trim())
+        .filter(Boolean),
+    );
+    for (const uid of testWwMemberUserids.value) {
+      const userid = String(uid || '').trim();
+      if (!userid || existUserids.has(userid)) continue;
+      testTargets.push({
+        target_type: 1,
+        platform_code: 'work_wechat_app',
+        userid,
+        admin_id: 0,
+      });
+      existUserids.add(userid);
+    }
+  }
+  // loading 标记
+  if (platformCode) {
+    testingPlatform.value = {
+      ...testingPlatform.value,
+      [platformCode]: true,
+    };
+  } else {
+    testing.value = true;
+  }
   try {
     const result = await testSendOaScene({
       id: Number(draft.id || 0) || undefined,
@@ -475,8 +1004,11 @@ async function handleTestSend() {
       message_config: draft.message_config,
       robot_ids: draft.robot_ids,
       at_users: draft.at_users,
-      targets: draft.targets,
-      test_params: { ...testParams.value },
+      targets: testTargets,
+      platform_codes: codes,
+      field_binding_mode: draft.field_binding_mode,
+      field_bindings: draft.field_bindings,
+      test_params,
     });
     const rows = Array.isArray(result?.results) ? result.results : [];
     const total = result?.total ?? rows.length;
@@ -491,19 +1023,38 @@ async function handleTestSend() {
     } else {
       message.warning(summary);
     }
+    // 41054 客户群未激活专门提示
+    const has41054 = rows.some(
+      (r: any) =>
+        String(r.message || '').includes('41054') ||
+        JSON.stringify(r.response || {}).includes('41054'),
+    );
+    if (has41054) {
+      message.error(errCode41054Tip, 8);
+    }
     testResultModalApi.setData({
       results: mapSceneResultsToModalItems(rows),
       summary,
       robotName: String(draft.scene_name || ''),
-      platformCode: 'scene',
-      testContent: testParams.value.content || '',
+      platformCode: platformCode || 'scene',
+      testContent:
+        Object.values(test_params.vars || {})
+          .filter((v: any) => String(v || '').trim() !== '')
+          .join(' / ') || '（使用 Step2 原配置）',
       sentAt: Math.floor(Date.now() / 1000),
     });
     testResultModalApi.open();
   } catch (e: any) {
     message.error(e?.message || '测试发送失败');
   } finally {
-    testing.value = false;
+    if (platformCode) {
+      testingPlatform.value = {
+        ...testingPlatform.value,
+        [platformCode]: false,
+      };
+    } else {
+      testing.value = false;
+    }
   }
 }
 
@@ -515,47 +1066,6 @@ 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);
@@ -581,21 +1091,6 @@ function toggleAllAtUsers(platformCode: string, e: any) {
   };
 }
 
-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 去重）
  */
@@ -627,27 +1122,23 @@ async function refreshAppMembers() {
 }
 
 /**
- * 解析字段 acceptTypes（兼容缺省：图片字段默认 [1]）
+ * 解析字段 acceptTypes（兼容缺省：图片字段默认 [0]）
+ * xk_file.type 实际值：0=图片 1=视频 2=音频 3=excel 4=压缩包
  */
 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];
+  return [0];
 }
 
-/**
- * 是否按图片上传组件渲染（仅图片类型）
- */
 function isImageMediaField(field: PayloadFieldSchema) {
   const types = fieldAcceptTypes(field);
-  return types.length === 1 && types[0] === 1;
+  // 仅图片类型（xk_file.type=0）走图片上传器；视频/语音/文件走通用文件上传器
+  return types.length === 1 && types[0] === 0;
 }
 
-/**
- * 图片字段：string URL ↔ UploadImage 的 string[]
- */
 function imageUrlsOf(platformCode: string, fieldName: string): string[] {
   const url = getPayloadValue(platformCode, fieldName);
   return url ? [String(url)] : [];
@@ -661,9 +1152,6 @@ function setImageUrls(
   setPayloadValue(platformCode, fieldName, urls[0] || '');
 }
 
-/**
- * 文件/语音上传 accept
- */
 function fileInputAccept(field: PayloadFieldSchema) {
   const types = fieldAcceptTypes(field);
   if (types.includes(3)) {
@@ -710,8 +1198,48 @@ function handleMessageTypeChange(platformCode: string, messageType: string) {
 
 const isEmpty = computed(() => platforms.value.length === 0);
 
+/* ============================================================ *
+ * 消息预览：把当前 payload 拼成 MsgPreview 需要的格式
+ * ============================================================ */
+
+function previewPayloadOf(platformCode: string): Record<string, any> {
+  const messageType = selectedMessageType.value[platformCode];
+  const payload = { ...(payloadValues.value[platformCode] || {}) };
+  // template_card 类型：把 payload.template_card 暴露给 MsgPreview
+  if (messageType === 'template_card' && payload.template_card) {
+    return payload;
+  }
+  // 可替换模式：用 Step3 vars 按绑定路径覆盖预览（仅顶层字段名能直接映射时）
+  const vars = testParamsByPlatform.value[platformCode]?.vars || {};
+  const merged = { ...payload };
+  if (fieldBindingMode.value === 1) {
+    for (const item of replaceableFieldsOf(platformCode)) {
+      const val = vars[item.businessKey];
+      if (val === undefined || val === '') continue;
+      // path = "platform.fieldName" → 取 fieldName 写入 payload 预览
+      const parts = item.payloadPath.split('.');
+      const fieldName = parts.length >= 2 ? parts[parts.length - 1] : '';
+      if (fieldName) {
+        merged[fieldName] = val;
+      }
+    }
+  }
+  return merged;
+}
+
+/** 当前预览的平台（默认跟随 activePlatformTab） */
+const previewPlatformCode = computed(() => activePlatformTab.value);
+
+const previewMessageType = computed(
+  () => selectedMessageType.value[previewPlatformCode.value] || 'text',
+);
+
+/* ============================================================ *
+ * 机器人 / @ 人 / Tab 切换清理
+ * ============================================================ */
+
 watch(
-  () => platforms.value,
+  () => visiblePlatforms.value,
   (list) => {
     const validCodes = new Set(list.map((p) => p.platform_code));
     const newRobots: Record<string, number[]> = {};
@@ -728,6 +1256,10 @@ watch(
     }
     selectedRobots.value = newRobots;
     selectedAtUsers.value = newAtUsers;
+    // 如果当前 Tab 平台不在 visiblePlatforms 中，切换到第一个
+    if (!validCodes.has(activePlatformTab.value)) {
+      activePlatformTab.value = list[0]?.platform_code || '';
+    }
   },
 );
 </script>
@@ -737,324 +1269,502 @@ watch(
     <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 v-if="currentStep > 0" @click="goPrev">上一步</Button>
+        <Button
+          v-if="currentStep < 2"
+          :loading="stepValidating"
+          type="primary"
+          @click="goNext"
+        >
+          下一步
+        </Button>
+        <Button
+          v-if="currentStep === 2"
+          type="primary"
+          :loading="saving"
+          @click="handleSave"
+        >
           保存
         </Button>
       </div>
     </template>
 
     <Spin :spinning="loading">
-      <Form />
+      <!-- 分步导航（3 步） -->
+      <Steps :current="currentStep" class="mb-4" size="small">
+        <Step
+          v-for="title in STEP_TITLES"
+          :key="title"
+          :title="title"
+        />
+      </Steps>
 
-      <div class="mt-4">
-        <div class="mb-2 font-medium">
-          各平台消息配置 + 关联机器人 + @ 人员
-        </div>
+      <!-- ============== Step 1：基础信息 ============== -->
+      <div v-show="currentStep === 0">
+        <Card :bordered="false" class="scene-card">
+          <Form />
+        </Card>
+      </div>
+
+      <!-- ============== Step 2：平台配置（合并原 2+3 步） ============== -->
+      <div v-show="currentStep === 1">
+        <Alert
+          v-if="scenePlatforms.length === 0 && platforms.length > 0"
+          type="info"
+          show-icon
+          message="未指定启用平台，默认展示所有已启用平台"
+          description="可在「基础信息」步骤中精确选择本场景要启用的平台"
+          class="mb-3"
+        />
         <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)
-                  "
+
+        <!-- 桌面：左右双栏（左配置 + 右预览 sticky）；移动：单栏（底部预览） -->
+        <div :class="['step2-layout', { 'step2-layout--mobile': !isDesktop }]">
+          <!-- 左侧配置区（含顶部 sticky 平台 Tab） -->
+          <div class="step2-config">
+            <div class="platform-tabs-wrapper">
+              <Tabs v-model:active-key="activePlatformTab" size="small">
+                <Tabs.TabPane
+                  v-for="platform in visiblePlatforms"
+                  :key="platform.platform_code"
                 >
-                  <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)
-                        "
+                  <template #tab>
+                    <span class="platform-tab-label">
+                      <VbenIcon
+                        v-if="platform.icon"
+                        :icon="platform.icon"
+                        class="platform-icon"
                       />
-                    </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>
+                      {{ platform.name }}
+                    </span>
                   </template>
 
-                  <Empty
-                    v-if="currentPayloadSchema(platform.platform_code).length === 0"
-                    description="该消息类型无需配置内容"
-                    :image-style="{ height: '40px' }"
-                  />
-                </div>
-              </div>
+                  <div class="oa-scene-tab">
+                    <!-- 消息类型 -->
+                    <Card :bordered="false" size="small" class="sub-card">
+                      <div class="section-title">消息类型</div>
+                      <RadioGroup
+                        :value="selectedMessageType[platform.platform_code]"
+                        @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>
+                    </Card>
 
-              <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>
+                    <!-- 消息内容（payload 表单，复用 PayloadSchemaForm） -->
+                    <Card :bordered="false" size="small" class="sub-card">
+                      <div class="section-title">消息内容</div>
+                      <div class="payload-form">
+                        <PayloadSchemaForm
+                          :schema="currentPayloadSchema(platform.platform_code)"
+                          :model-value="
+                            payloadValues[platform.platform_code] || {}
+                          "
+                          @update:model-value="
+                            (v) => {
+                              payloadValues = {
+                                ...payloadValues,
+                                [platform.platform_code]: v || {},
+                              };
+                            }
+                          "
+                        />
 
-              <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
+                          v-if="
+                            fieldBindingMode === 1 &&
+                            expandBindingFields(platform.platform_code).length >
+                              0
+                          "
+                          class="binding-panel"
+                        >
+                          <div class="section-title">业务字段绑定</div>
+                          <div class="mb-2 text-xs text-gray-500">
+                            dispatch 时用业务 key 覆盖对应 payload 路径；图文按每条卡片的标题/描述/链接/封面分别绑定。投递对象与机器人请在下方「推送机器人 / 投递目标」配置。
+                          </div>
+                          <div
+                            v-for="f in expandBindingFields(
+                              platform.platform_code,
+                            )"
+                            :key="f.fieldPath"
+                            class="binding-row"
+                          >
+                            <label class="binding-label">
+                              {{ f.label }}
+                              <span class="binding-hint">
+                                （{{ f.fieldPath }}）
+                              </span>
+                            </label>
+                            <Input
+                              :value="
+                                getBindingKey(
+                                  platform.platform_code,
+                                  f.fieldPath,
+                                )
+                              "
+                              placeholder="自动生成，可手改"
+                              size="small"
+                              allow-clear
+                              @update:value="
+                                (val) =>
+                                  setBindingKey(
+                                    platform.platform_code,
+                                    f.fieldPath,
+                                    val,
+                                  )
+                              "
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </Card>
+
+                    <!-- 推送机器人（合并自原 Step 3） -->
+                    <Card :bordered="false" size="small" class="sub-card">
+                      <div class="section-title">
+                        推送机器人
+                        <Checkbox
+                          class="float-right"
+                          :checked="
+                            robotsOfPlatform(platform.platform_code).length > 0 &&
+                            checkedRobotsOfPlatform(platform.platform_code)
+                              .length ===
+                              robotsOfPlatform(platform.platform_code).length
+                          "
+                          @change="
+                            toggleAllRobots(platform.platform_code, $event)
+                          "
+                        >
+                          全选
+                        </Checkbox>
+                      </div>
+                      <div
+                        v-if="robotsOfPlatform(platform.platform_code).length === 0"
+                        class="empty-hint"
+                      >
+                        该平台暂无启用的机器人
+                      </div>
+                      <UserTagSelect
+                        v-else
+                        :model-value="
+                          checkedRobotsOfPlatform(platform.platform_code)
+                        "
+                        :options="
+                          robotsOfPlatform(platform.platform_code).map((r) => ({
+                            value: r.id,
+                            label: `${r.name}${Number(r.status) === 0 ? '（已禁用）' : ''}`,
+                          }))
+                        "
+                        placeholder="选择该平台下的推送机器人（可多选）"
+                        @update:model-value="
+                          (v: (string | number)[]) => {
+                            selectedRobots = {
+                              ...selectedRobots,
+                              [platform.platform_code]: v.map((n) => Number(n)),
+                            };
+                            if (isWorkWechatApp(platform.platform_code)) {
+                              refreshAppMembers();
+                            }
+                          }
+                        "
+                      />
+                    </Card>
+
+                    <!-- 投递目标 / @员工（合并自原 Step 3） -->
+                    <Card
+                      v-if="isWorkWechatApp(platform.platform_code)"
+                      :bordered="false"
+                      size="small"
+                      class="sub-card"
+                    >
+                      <div class="section-title">投递目标（企微应用 API）</div>
+                      <SceneTargetsPanel
+                        ref="targetsPanelRef"
+                        v-model="sceneTargets"
+                        :admin-list="adminList"
+                        :platform-code="platform.platform_code"
+                      />
+                    </Card>
+
+                    <Card
+                      v-else
+                      :bordered="false"
+                      size="small"
+                      class="sub-card"
+                    >
+                      <div class="section-title">
+                        @ 系统员工（按手机号）
+                        <Checkbox
+                          class="float-right"
+                          :checked="
+                            adminList.length > 0 &&
+                            adminIdsOf(platform.platform_code).length ===
+                              adminList.length
+                          "
+                          @change="
+                            toggleAllAtUsers(platform.platform_code, $event)
+                          "
+                        >
+                          全选
+                        </Checkbox>
+                      </div>
+                      <div v-if="adminList.length === 0" class="empty-hint">
+                        暂无员工可选
+                      </div>
+                      <UserTagSelect
+                        v-else
+                        :model-value="adminIdsOf(platform.platform_code)"
+                        :options="
+                          adminList.map((a) => ({
+                            value: a.id,
+                            label: a.name,
+                            avatar: a.avatar || '',
+                          }))
+                        "
+                        placeholder="选择要 @ 的员工（可多选）"
+                        @update:model-value="
+                          (v: (string | number)[]) => {
+                            selectedAtUsers = {
+                              ...selectedAtUsers,
+                              [platform.platform_code]: {
+                                admin_ids: v.map((n) => Number(n)),
+                                userids: useridsOf(platform.platform_code),
+                              },
+                            };
+                          }
+                        "
+                      />
+                    </Card>
+                  </div>
+                </Tabs.TabPane>
+              </Tabs>
+            </div>
+          </div>
+
+          <!-- 右侧预览区（桌面 sticky / 移动底部） -->
+          <div class="step2-preview">
+            <div class="preview-inner">
+              <div class="preview-title">实时消息预览</div>
+              <MsgPreview
+                v-if="previewPlatformCode"
+                :platform-code="previewPlatformCode"
+                :message-type="previewMessageType"
+                :payload="previewPayloadOf(previewPlatformCode)"
+              />
+              <Empty
+                v-else
+                description="请先在 Step 1 启用至少一个平台"
+                :image-style="{ height: '40px' }"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ============== Step 3：测试发送（按平台独立测试） ============== -->
+      <div v-show="currentStep === 2">
+        <Alert
+          type="info"
+          show-icon
+          class="mb-3"
+          message="分平台独立测试"
+          description="每个平台一行，可单独测试。可替换模式下填写业务字段测试值；固定模式直接用 Step2 配置。@ 手机号会自动记忆"
+        />
+        <Alert
+          v-if="false"
+          type="warning"
+          show-icon
+          class="mb-3"
+          :message="errCode41054Tip"
+        />
+
+        <div v-if="visiblePlatforms.length === 0" class="empty-hint">
+          请先在 Step 1 启用至少一个平台
+        </div>
+
+        <Card
+          v-for="platform in visiblePlatforms"
+          :key="platform.platform_code"
+          :bordered="false"
+          size="small"
+          class="test-row-card"
+        >
+          <div class="test-row">
+            <div class="test-row-head">
+              <span class="platform-name">
+                <VbenIcon
+                  v-if="platform.icon"
+                  :icon="platform.icon"
+                  class="platform-icon"
                 />
+                {{ platform.name }}
+              </span>
+              <Tag v-if="isWorkWechatApp(platform.platform_code)" color="orange">
+                企微应用 API
+              </Tag>
+              <Tag v-else color="blue">群机器人</Tag>
+            </div>
+
+            <!-- 企微应用：临时测试成员（不改场景配置，仅本次发送追加个人目标） -->
+            <div
+              v-if="isWorkWechatApp(platform.platform_code)"
+              class="test-row-phones"
+            >
+              <div class="mb-1 text-xs">临时测试成员</div>
+              <Select
+                mode="multiple"
+                show-search
+                allow-clear
+                class="w-full"
+                placeholder="可选：从组织架构选成员单独测个人消息"
+                :value="testWwMemberUserids"
+                :options="wwTestUserOptions"
+                :filter-option="
+                  (input: string, option: any) =>
+                    String(option?.label || '')
+                      .toLowerCase()
+                      .includes(input.toLowerCase())
+                "
+                :max-tag-count="4"
+                @change="(v: string[]) => (testWwMemberUserids = v || [])"
+              />
+              <div class="mt-1 text-xs text-gray-400">
+                选中后追加到本次测试的个人目标；未选则仍用 Step2 已配置的投递目标
               </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
+                v-if="wwTestUserOptions.length === 0"
+                class="mt-1 text-xs text-orange-500"
+              >
+                请先在 OA 群聊 → 员工 Tab 同步组织架构
               </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
-            />
+            <!-- 飞书 webhook 不支持手机号 @，隐藏 phones 字段 -->
+            <div
+              v-if="!isWorkWechatApp(platform.platform_code)"
+              class="test-row-phones"
+            >
+              <div class="mb-1 text-xs">@ 手机号</div>
+              <PhoneMemoryPicker
+                v-if="platform.platform_code !== 'feishu'"
+                :platform-code="platform.platform_code"
+                :model-value="
+                  (testParamsByPlatform[platform.platform_code] || {}).phones ||
+                  []
+                "
+                placeholder="输入手机号回车添加（@ 用）"
+                @update:model-value="
+                  (v: string[]) => {
+                    const prev = testParamsByPlatform[platform.platform_code] || {
+                      phones: [],
+                      vars: {},
+                    };
+                    testParamsByPlatform = {
+                      ...testParamsByPlatform,
+                      [platform.platform_code]: {
+                        phones: v,
+                        vars: { ...(prev.vars || {}) },
+                      },
+                    };
+                  }
+                "
+              />
+              <div v-else class="text-xs text-gray-400">
+                飞书 webhook 不支持手机号 @，仅 @all 生效
+              </div>
+            </div>
+
+            <!-- 可替换模式：按 field_bindings 动态业务字段；固定模式用 Step2 配置 -->
+            <div class="test-row-params">
+              <template v-if="fieldBindingMode === 1">
+                <div class="mb-1 text-xs text-gray-500">
+                  可替换业务字段（对应 Step2 绑定；留空则用 Step2 payload 原值）
+                </div>
+                <div
+                  v-if="replaceableFieldsOf(platform.platform_code).length === 0"
+                  class="text-xs text-orange-500"
+                >
+                  该平台未配置可替换字段，请先在 Step2 为消息字段填写业务字段名
+                </div>
+                <div v-else class="param-grid">
+                  <div
+                    v-for="f in replaceableFieldsOf(platform.platform_code)"
+                    :key="f.businessKey"
+                    class="param-cell"
+                  >
+                    <label>
+                      {{ f.label }}
+                      <span class="text-gray-400">（{{ f.businessKey }}）</span>
+                    </label>
+                    <Input
+                      :value="getTestVar(platform.platform_code, f.businessKey)"
+                      :placeholder="`测试值，对应 ${f.businessKey}`"
+                      size="small"
+                      allow-clear
+                      @update:value="
+                        (v) =>
+                          setTestVar(
+                            platform.platform_code,
+                            f.businessKey,
+                            v || '',
+                          )
+                      "
+                    />
+                  </div>
+                </div>
+              </template>
+              <div v-else class="text-xs text-gray-500">
+                当前为固定内容模式，测试将直接使用 Step2 已配置的消息内容
+              </div>
+            </div>
+
+            <div class="test-row-footer">
+              <Button
+                type="primary"
+                size="small"
+                :loading="!!testingPlatform[platform.platform_code]"
+                :disabled="
+                  !selectedMessageType[platform.platform_code] ||
+                  (checkedRobotsOfPlatform(platform.platform_code).length === 0 &&
+                    !isWorkWechatApp(platform.platform_code))
+                "
+                @click="handleTestSend(platform.platform_code)"
+              >
+                测试本平台
+              </Button>
+              <span class="text-xs text-gray-400">
+                {{
+                  isWorkWechatApp(platform.platform_code)
+                    ? testWwMemberUserids.length > 0
+                      ? `将追加 ${testWwMemberUserids.length} 个临时成员 + 场景投递目标`
+                      : '仅发送给已配置的投递目标（可上方选临时成员）'
+                    : `将发送给 ${checkedRobotsOfPlatform(platform.platform_code).length} 个机器人`
+                }}
+              </span>
+            </div>
           </div>
+        </Card>
+
+        <div class="mt-4 text-center">
+          <Button :loading="testing" @click="handleTestSend()">
+            一键测试全部平台
+          </Button>
         </div>
       </div>
     </Spin>
@@ -1064,20 +1774,66 @@ watch(
 </template>
 
 <style scoped>
-.oa-scene-tab {
-  max-height: 600px;
-  overflow-y: auto;
+/* ============ Step 2 双栏布局 ============ */
+.step2-layout {
+  display: grid;
+  grid-template-columns: 1fr 380px;
+  gap: 16px;
+  align-items: start;
+}
+
+.step2-layout--mobile {
+  grid-template-columns: 1fr;
+}
+
+.step2-config {
+  min-width: 0;
+}
+
+.platform-tabs-wrapper {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.step2-preview {
+  position: sticky;
+  top: 16px;
+}
+
+.step2-layout--mobile .step2-preview {
+  position: static;
+  margin-top: 16px;
+}
+
+.preview-inner {
+  border-radius: 8px;
   padding: 12px;
+  border: 1px solid var(--ant-color-border-secondary, #f0f0f0);
 }
 
-.section {
-  margin-bottom: 20px;
-  padding-bottom: 16px;
-  border-bottom: 1px dashed var(--ant-color-border-secondary, #e5e6eb);
+.preview-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ant-color-text, #1d2129);
+  margin-bottom: 8px;
+  text-align: center;
 }
 
-.section:last-child {
-  border-bottom: none;
+/* ============ Tab 内容容器 ============ */
+.oa-scene-tab {
+  padding: 12px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.sub-card {
+  border-radius: 8px;
+}
+
+.sub-card :deep(.ant-card-body) {
+  padding: 12px;
 }
 
 .section-title {
@@ -1085,12 +1841,21 @@ watch(
   font-size: 13px;
   font-weight: 600;
   color: var(--ant-color-text, #1d2129);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.section-title .float-right {
+  float: right;
+  font-weight: 400;
 }
 
 .empty-hint {
   color: var(--ant-color-text-tertiary, #86909c);
 }
 
+/* ============ Payload 表单 ============ */
 .payload-form {
   display: flex;
   flex-direction: column;
@@ -1113,19 +1878,101 @@ watch(
   margin-left: 2px;
 }
 
-.payload-image {
+.binding-row {
+  margin-top: -4px;
+  margin-left: 12px;
+  padding-left: 8px;
+  border-left: 2px solid var(--ant-color-border-secondary, #e8e8e8);
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 
-.dispatch-params {
-  margin-top: 8px;
+.binding-panel {
+  margin-top: 12px;
+  padding-top: 8px;
+  border-top: 1px dashed var(--ant-color-border-secondary, #f0f0f0);
 }
 
-.param-hint {
-  margin-left: 8px;
+.binding-row {
+  margin-bottom: 8px;
+}
+
+.binding-label {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--ant-color-text-secondary, #666);
+}
+
+.binding-hint {
+  margin-left: 4px;
+  color: var(--ant-color-text-tertiary, #bbb);
   font-weight: 400;
+  font-size: 11px;
+}
+
+/* ============ Step 3 测试发送 ============ */
+.test-row-card {
+  margin-bottom: 8px;
+}
+
+.test-row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.test-row-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.platform-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 600;
+}
+
+.platform-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.platform-tab-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.test-row-params {
+  margin-top: 4px;
+}
+
+.param-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.param-cell label {
+  display: block;
+  font-size: 11px;
   color: var(--ant-color-text-tertiary, #86909c);
+  margin-bottom: 2px;
+}
+
+.test-row-footer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 4px;
+}
+
+.scene-card {
+  max-width: 900px;
 }
 </style>
diff --git a/apps/web-antd/src/views/system/oa-scene/components/modal.vue b/apps/web-antd/src/views/system/oa-scene/components/modal.vue
index 464ca607..2bc148df 100644
--- a/apps/web-antd/src/views/system/oa-scene/components/modal.vue
+++ b/apps/web-antd/src/views/system/oa-scene/components/modal.vue
@@ -738,7 +738,7 @@ watch(
                           read-only
                         />
                         <GalleryPickLink
-                          :accept-types="field.props?.acceptTypes || [1]"
+                          :accept-types="field.props?.acceptTypes || [0]"
                           @select="
                             (urls) => setPayloadValue(platform.platform_code, field.name, urls[0] || '')
                           "
@@ -1023,7 +1023,7 @@ watch(
 .section {
   margin-bottom: 20px;
   padding-bottom: 16px;
-  border-bottom: 1px dashed #e5e6eb;
+  border-bottom: 1px dashed var(--ant-color-border-secondary, #e5e6eb);
 }
 
 .section:last-child {
@@ -1034,7 +1034,7 @@ watch(
   margin-bottom: 12px;
   font-size: 13px;
   font-weight: 600;
-  color: #1d2129;
+  color: var(--ant-color-text, #1d2129);
 }
 
 .payload-form {
@@ -1051,11 +1051,11 @@ watch(
 
 .payload-label {
   font-size: 12px;
-  color: #4e5969;
+  color: var(--ant-color-text-secondary, #4e5969);
 }
 
 .payload-label .required {
-  color: #f53f3f;
+  color: var(--ant-color-error, #f53f3f);
   margin-left: 2px;
 }
 
@@ -1072,19 +1072,19 @@ watch(
 .param-hint {
   margin-left: 8px;
   font-weight: 400;
-  color: #86909c;
+  color: var(--ant-color-text-tertiary, #86909c);
 }
 
 .test-results {
   margin-top: 12px;
   padding-top: 12px;
-  border-top: 1px dashed #e5e6eb;
+  border-top: 1px dashed var(--ant-color-border-secondary, #e5e6eb);
 }
 
 .result-item {
   padding: 8px 0;
   font-size: 12px;
-  border-bottom: 1px solid #f2f3f5;
+  border-bottom: 1px solid var(--ant-color-split, #f2f3f5);
 }
 
 .result-name {
@@ -1096,12 +1096,12 @@ watch(
 .result-target,
 .result-cost {
   margin-left: 6px;
-  color: #86909c;
+  color: var(--ant-color-text-tertiary, #86909c);
 }
 
 .result-error {
   margin-top: 4px;
-  color: #f53f3f;
+  color: var(--ant-color-error, #f53f3f);
   word-break: break-all;
 }
 </style>
diff --git a/apps/web-antd/src/views/system/oa-scene/components/msg-preview-modal.vue b/apps/web-antd/src/views/system/oa-scene/components/msg-preview-modal.vue
new file mode 100644
index 00000000..52fc3fab
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-scene/components/msg-preview-modal.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+/**
+ * 场景列表：点击平台标签预览该平台消息配置
+ * 数据由列表页 modalApi.setData 注入：platformName / platformCode / messageType / payload
+ */
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Empty } from 'ant-design-vue';
+
+import MsgPreview from '#/views/system/oa-scene/components/msg-preview.vue';
+
+const platformName = ref('');
+const platformCode = ref('');
+const messageType = ref('');
+const payload = ref<Record<string, any>>({});
+const hasConfig = ref(false);
+
+const [Modal, modalApi] = useVbenModal({
+  title: '消息预览',
+  footer: false,
+  draggable: true,
+  onOpenChange(isOpen: boolean) {
+    if (!isOpen) return;
+    const data = modalApi.getData<any>() || {};
+    platformName.value = String(data.platformName || data.platform_name || '');
+    platformCode.value = String(data.platformCode || data.platform_code || '');
+    messageType.value = String(data.messageType || data.message_type || '');
+    payload.value =
+      data.payload && typeof data.payload === 'object' ? data.payload : {};
+    hasConfig.value = !!messageType.value;
+    modalApi.setState({
+      title: platformName.value
+        ? `消息预览 · ${platformName.value}`
+        : '消息预览',
+    });
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[480px]">
+    <div v-if="hasConfig" class="preview-wrap">
+      <MsgPreview
+        :platform-code="platformCode"
+        :message-type="messageType"
+        :payload="payload"
+      />
+    </div>
+    <Empty v-else description="该平台暂无消息配置" />
+  </Modal>
+</template>
+
+<style scoped>
+.preview-wrap {
+  padding: 8px 4px 12px;
+  min-height: 120px;
+}
+</style>
diff --git a/apps/web-antd/src/views/system/oa-scene/components/msg-preview.vue b/apps/web-antd/src/views/system/oa-scene/components/msg-preview.vue
new file mode 100644
index 00000000..1fde9e0c
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-scene/components/msg-preview.vue
@@ -0,0 +1,1244 @@
+<script lang="ts" setup>
+/**
+ * OA 消息预览组件（独立、纯展示）
+ *
+ * 用途：在场景表单 Step 2 配置完某平台消息后，实时渲染对应平台的消息气泡或卡片 UI，
+ *       让用户所见即所得，复刻企微/钉钉/飞书客户端的展示样式。
+ *
+ * 设计原则：
+ * - 纯展示组件，不调真实接口，无副作用
+ * - 输入：platformCode / messageType / payload（+ content / title / url / mediaUrl）
+ * - 通过 platformCode 切换容器外壳（仿客户端背景色：企微淡灰 / 钉钉淡绿 / 飞书淡蓝）
+ * - 通过 messageType 切换内部渲染（text / markdown / image / news / template_card / link / actionCard / post / interactive ...）
+ * - 复用：机器人管理页测试发送也可用本组件预览返回结果
+ *
+ * 注意：
+ * - markdown 用项目已有的 marked 简单渲染（容错：未引入时降级为 <pre> 文本）
+ * - 所有外部图片仅用 <img> 标签展示，url 为空时用占位图
+ */
+
+import { computed } from 'vue';
+
+/* ------------------------------------------------------------------ *
+ * Props / Types
+ * ------------------------------------------------------------------ */
+
+export interface MsgPreviewPayload {
+  /** 顶层文本（text/markdown 类型用，payload.content 的快捷别名） */
+  content?: string;
+  /** 标题（部分类型用） */
+  title?: string;
+  /** 跳转 URL（link/news 等类型用） */
+  url?: string;
+  /** 媒体 URL（image/file/voice 类型用） */
+  media_url?: string;
+  /** @ 手机号列表（用于展示「@张三」标签） */
+  atMobiles?: string[];
+  /** @ userid 列表 */
+  atUserIds?: string[];
+  /** 完整 payload（结构化数据，按平台官方字段对齐） */
+  [key: string]: any;
+}
+
+interface Props {
+  /** 平台编码：work_wechat / work_wechat_app / dingtalk / feishu */
+  platformCode: string;
+  /** 消息类型：text / markdown / image / news / file / voice / template_card / link / actionCard / feedCard / post / interactive / image / share_chat */
+  messageType: string;
+  /** 消息 payload（结构化） */
+  payload?: MsgPreviewPayload;
+  /** 简单文本内容（覆盖 payload.content，便于父组件直接传表单字段） */
+  content?: string;
+  /** 标题（覆盖 payload.title） */
+  title?: string;
+  /** 跳转 URL（覆盖 payload.url） */
+  url?: string;
+  /** 媒体 URL（覆盖 payload.media_url） */
+  mediaUrl?: string;
+  /** 是否显示外壳（聊天窗口容器），默认 true */
+  showShell?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  payload: () => ({}),
+  content: '',
+  title: '',
+  url: '',
+  mediaUrl: '',
+  showShell: true,
+});
+
+/* ------------------------------------------------------------------ *
+ * 数据合并：把顶层 content/title/url/mediaUrl 与 payload 字段合并
+ * 优先级：props.xxx > payload.xxx（顶层字段更具体）
+ * ------------------------------------------------------------------ */
+
+const mergedPayload = computed<MsgPreviewPayload>(() => {
+  const p = props.payload || {};
+  return {
+    ...p,
+    content: props.content || p.content || '',
+    title: props.title || p.title || '',
+    url: props.url || p.url || '',
+    media_url: props.mediaUrl || p.media_url || '',
+  };
+});
+
+/* ------------------------------------------------------------------ *
+ * 平台分类
+ * work_wechat_app 也归到企微样式（同一个客户端外壳）
+ * ------------------------------------------------------------------ */
+
+const isWorkWechat = computed(
+  () =>
+    props.platformCode === 'work_wechat' ||
+    props.platformCode === 'work_wechat_app',
+);
+const isDingTalk = computed(() => props.platformCode === 'dingtalk');
+const isFeishu = computed(() => props.platformCode === 'feishu');
+
+/** 容器 className（控制外壳底色 + 文字色） */
+const shellClass = computed(() => {
+  if (!props.showShell) return 'msg-preview-shell--inline';
+  if (isWorkWechat.value) return 'msg-preview-shell msg-preview-shell--ww';
+  if (isDingTalk.value) return 'msg-preview-shell msg-preview-shell--dt';
+  if (isFeishu.value) return 'msg-preview-shell msg-preview-shell--fs';
+  return 'msg-preview-shell msg-preview-shell--default';
+});
+
+/** 顶部平台标签文案 */
+const platformLabel = computed(() => {
+  if (props.platformCode === 'work_wechat') return '企业微信';
+  if (props.platformCode === 'work_wechat_app') return '企业微信·应用';
+  if (isDingTalk.value) return '钉钉';
+  if (isFeishu.value) return '飞书';
+  return props.platformCode;
+});
+
+/* ------------------------------------------------------------------ *
+ * Markdown 简单渲染（避免依赖外部 marked 库，仅做基础语法）
+ * 支持：**粗体** / *斜体* / # 标题 / - 列表 / [text](url) / 换行
+ * 复杂语法降级为原始文本展示（保证安全，不执行任何 HTML）
+ * ------------------------------------------------------------------ */
+
+function escapeHtml(s: string): string {
+  return String(s || '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+function renderMarkdown(md: string): string {
+  const lines = String(md || '').split(/\r?\n/);
+  const out: string[] = [];
+  let inList = false;
+
+  const closeList = () => {
+    if (inList) {
+      out.push('</ul>');
+      inList = false;
+    }
+  };
+
+  for (const raw of lines) {
+    const line = raw.trimEnd();
+    if (!line) {
+      closeList();
+      continue;
+    }
+    // 标题 # / ## / ###
+    const h = line.match(/^(#{1,3})\s+(.+)$/);
+    if (h) {
+      closeList();
+      const level = h[1].length + 1;
+      out.push(`<h${level}>${inlineFmt(h[2])}</h${level}>`);
+      continue;
+    }
+    // 无序列表 - / *
+    const li = line.match(/^[-*]\s+(.+)$/);
+    if (li) {
+      if (!inList) {
+        out.push('<ul>');
+        inList = true;
+      }
+      out.push(`<li>${inlineFmt(li[1])}</li>`);
+      continue;
+    }
+    closeList();
+    out.push(`<p>${inlineFmt(line)}</p>`);
+  }
+  closeList();
+  return out.join('');
+}
+
+/** 行内格式化：粗体 / 斜体 / 链接 */
+function inlineFmt(s: string): string {
+  let out = escapeHtml(s);
+  // 链接 [text](url)
+  out = out.replace(
+    /\[([^\]]+)\]\(([^)\s]+)\)/g,
+    '<a href="$2" target="_blank" rel="noopener">$1</a>',
+  );
+  // 粗体 **text**
+  out = out.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+  // 斜体 *text*
+  out = out.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+  // 企微/飞书 @ 标识高亮
+  out = out.replace(/@([\w\u4e00-\u9fa5_-]+)/g, '<span class="at-mention">@$1</span>');
+  return out;
+}
+
+/* ------------------------------------------------------------------ *
+ * 按消息类型计算的展示数据
+ * ------------------------------------------------------------------ */
+
+/** 文本内容（用于 text / markdown） */
+const textContent = computed(() => String(mergedPayload.value.content || ''));
+
+/** @ 人列表（用于在文本后追加展示） */
+const atList = computed<string[]>(() => {
+  const mobiles = Array.isArray(mergedPayload.value.atMobiles)
+    ? mergedPayload.value.atMobiles.map(String)
+    : [];
+  const userIds = Array.isArray(mergedPayload.value.atUserIds)
+    ? mergedPayload.value.atUserIds.map(String)
+    : [];
+  return [...mobiles, ...userIds].filter(Boolean);
+});
+
+/** 图片 URL */
+const imageUrl = computed(() => {
+  const p = mergedPayload.value;
+  // 企微 image 类型 payload 里可能是 mediaId（无 url，展示占位）
+  return String(
+    p.media_url ||
+      p.url ||
+      p.image ||
+      p.image_url ||
+      p.pic_url ||
+      p.picUrl ||
+      '',
+  );
+});
+
+/** 是否是 template_card */
+const templateCard = computed<Record<string, any>>(() => {
+  const p = mergedPayload.value as any;
+  return p.template_card || p.card || (p.card_type ? p : {});
+});
+
+/** 钉钉 actionCard */
+const dingActionCard = computed(() => {
+  const p = mergedPayload.value as any;
+  return {
+    title: p.title || '',
+    text: p.text || '',
+    btns: Array.isArray(p.btns) ? p.btns : [],
+    singleTitle: p.singleTitle || '',
+    singleURL: p.singleURL || '',
+  };
+});
+
+/** 钉钉 link */
+const dingLink = computed(() => {
+  const p = mergedPayload.value as any;
+  return {
+    title: p.title || '',
+    text: p.text || '',
+    picUrl: p.picUrl || '',
+    messageUrl: p.messageUrl || '',
+  };
+});
+
+/** 飞书 post 富文本 */
+const feishuPost = computed(() => {
+  const p = mergedPayload.value as any;
+  // zh_cn 多语言结构：post = { zh_cn: { title, content: [[{tag,text}]] } }
+  const post = p.post || p;
+  const zh = post.zh_cn || post.en_us || post;
+  return {
+    title: zh.title || '',
+    content: Array.isArray(zh.content) ? zh.content : [],
+  };
+});
+
+/** 飞书 interactive 卡片 */
+const feishuCard = computed(() => {
+  const p = mergedPayload.value as any;
+  return p.card || p.elements || p;
+});
+
+/**
+ * 企微 news：优先 articles[]；旧数据仅顶层 title/description 时降级为单条
+ */
+const newsArticles = computed<
+  Array<{ title: string; description: string; url: string; picurl: string }>
+>(() => {
+  const p = mergedPayload.value as any;
+  const raw = Array.isArray(p.articles) ? p.articles : [];
+  if (raw.length > 0) {
+    return raw.slice(0, 8).map((a: any) => ({
+      title: String(a?.title || ''),
+      description: String(a?.description || ''),
+      url: String(a?.url || ''),
+      picurl: String(a?.picurl || a?.picUrl || ''),
+    }));
+  }
+  // 兼容旧扁平结构
+  if (p.title || p.description || p.url || p.picurl) {
+    return [
+      {
+        title: String(p.title || ''),
+        description: String(p.description || ''),
+        url: String(p.url || ''),
+        picurl: String(p.picurl || ''),
+      },
+    ];
+  }
+  return [];
+});
+
+/** 企微 textcard 预览字段 */
+const textCardPreview = computed(() => {
+  const p = mergedPayload.value as any;
+  return {
+    title: String(p.title || ''),
+    description: String(p.description || ''),
+    url: String(p.url || ''),
+    btntxt: String(p.btntxt || '详情'),
+  };
+});
+
+/** 是否展示「@ 提示」 */
+const showAtFooter = computed(
+  () => atList.value.length > 0 && ['text', 'markdown'].includes(props.messageType),
+);
+
+/* ------------------------------------------------------------------ *
+ * 资源占位
+ * ------------------------------------------------------------------ */
+
+const PLACEHOLDER_IMG =
+  'data:image/svg+xml;utf8,' +
+  encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" width="240" height="160"><rect width="100%" height="100%" fill="#f0f2f5"/><text x="50%" y="50%" font-size="14" fill="#86909c" text-anchor="middle" dominant-baseline="middle">图片占位</text></svg>',
+  );
+
+function safeImg(url: string): string {
+  return url && /^https?:\/\//.test(url) ? url : PLACEHOLDER_IMG;
+}
+
+/** 链接域名（用于卡片底部展示「域名前缀」提示） */
+function urlHost(url: string): string {
+  try {
+    return new URL(url).host || url;
+  } catch {
+    return url;
+  }
+}
+</script>
+
+<template>
+  <div :class="shellClass">
+    <!-- 平台标签（仅在外壳模式下显示） -->
+    <div v-if="showShell" class="msg-preview-header">
+      <span class="platform-badge" :class="{
+        'platform-badge--ww': isWorkWechat,
+        'platform-badge--dt': isDingTalk,
+        'platform-badge--fs': isFeishu,
+      }">{{ platformLabel }}</span>
+      <span class="msg-type-badge">{{ messageType }}</span>
+    </div>
+
+    <!-- 消息主体气泡容器 -->
+    <div class="msg-preview-body" :class="{
+      'msg-preview-body--ww': isWorkWechat,
+      'msg-preview-body--dt': isDingTalk,
+      'msg-preview-body--fs': isFeishu,
+    }">
+      <!-- ================= 企微 / 钉钉 / 飞书：text ================= -->
+      <div v-if="messageType === 'text'" class="bubble bubble--text">
+        <span v-if="textContent" class="text-content">{{ textContent }}</span>
+        <span v-else class="empty-tip">（请填写文本内容）</span>
+        <div v-if="showAtFooter" class="at-footer">
+          <span v-for="(at, i) in atList" :key="i" class="at-pill">@{{ at }}</span>
+        </div>
+      </div>
+
+      <!-- ================= markdown ================= -->
+      <div v-else-if="messageType === 'markdown' || messageType === 'markdown_v2'" class="bubble bubble--markdown">
+        <div v-if="textContent" class="md-content" v-html="renderMarkdown(textContent)"></div>
+        <div v-else class="empty-tip">（请填写 Markdown 内容）</div>
+        <div v-if="showAtFooter" class="at-footer">
+          <span v-for="(at, i) in atList" :key="i" class="at-pill">@{{ at }}</span>
+        </div>
+      </div>
+
+      <!-- ================= image ================= -->
+      <div v-else-if="messageType === 'image'" class="bubble bubble--image">
+        <img :src="safeImg(imageUrl)" alt="image" class="bubble-img" />
+      </div>
+
+      <!-- ================= news（企微图文：articles[]，首条大图 + 后续列表） ================= -->
+      <div v-else-if="messageType === 'news'" class="bubble bubble--card news-list">
+        <div v-if="newsArticles.length === 0" class="empty-tip">请添加图文</div>
+        <template v-else>
+          <div
+            v-for="(art, i) in newsArticles"
+            :key="i"
+            :class="['news-item', i === 0 ? 'news-item--hero' : 'news-item--row']"
+          >
+            <img
+              v-if="art.picurl || (i === 0 && imageUrl)"
+              :src="safeImg(art.picurl || imageUrl)"
+              alt="news"
+              :class="i === 0 ? 'card-cover' : 'news-thumb'"
+            />
+            <div class="news-body">
+              <div class="card-title">{{ art.title || '（无标题）' }}</div>
+              <div v-if="art.description" class="card-desc">{{ art.description }}</div>
+              <a
+                v-if="art.url"
+                :href="art.url"
+                target="_blank"
+                rel="noopener"
+                class="card-link"
+              >
+                {{ urlHost(art.url) }} ›
+              </a>
+            </div>
+          </div>
+        </template>
+      </div>
+
+      <!-- ================= textcard（企微文本卡片） ================= -->
+      <div v-else-if="messageType === 'textcard'" class="bubble bubble--card">
+        <div class="card-title">{{ textCardPreview.title || '（无标题）' }}</div>
+        <div v-if="textCardPreview.description" class="card-desc">
+          {{ textCardPreview.description }}
+        </div>
+        <a
+          v-if="textCardPreview.url"
+          :href="textCardPreview.url"
+          target="_blank"
+          rel="noopener"
+          class="card-link textcard-btn"
+        >
+          {{ textCardPreview.btntxt }} ›
+        </a>
+        <div v-else class="card-link textcard-btn">{{ textCardPreview.btntxt }} ›</div>
+      </div>
+
+      <!-- ================= template_card（企微模板卡片） ================= -->
+      <div v-else-if="messageType === 'template_card'" class="bubble bubble--card ww-template-card">
+        <div v-if="templateCard.source?.icon_url || templateCard.source?.desc" class="tc-source">
+          <img v-if="templateCard.source?.icon_url" :src="safeImg(templateCard.source.icon_url)" class="tc-source-icon" />
+          <span>{{ templateCard.source?.desc || '' }}</span>
+        </div>
+        <div v-if="templateCard.main_title?.title || templateCard.main_title?.desc" class="tc-main-title">
+          <div v-if="templateCard.main_title?.title" class="tc-title">{{ templateCard.main_title.title }}</div>
+          <div v-if="templateCard.main_title?.desc" class="tc-desc">{{ templateCard.main_title.desc }}</div>
+        </div>
+        <div v-if="templateCard.card_image?.url" class="tc-image">
+          <img :src="safeImg(templateCard.card_image.url)" />
+        </div>
+        <div v-if="templateCard.emphasis_content?.title || templateCard.emphasis_content?.desc" class="tc-emphasis">
+          <span class="tc-emphasis-title">{{ templateCard.emphasis_content?.title }}</span>
+          <span class="tc-emphasis-desc">{{ templateCard.emphasis_content?.desc }}</span>
+        </div>
+        <div v-if="templateCard.sub_title_text" class="tc-sub">{{ templateCard.sub_title_text }}</div>
+        <!-- 二级标题+文本列表 -->
+        <div v-if="Array.isArray(templateCard.horizontal_content_list) && templateCard.horizontal_content_list.length" class="tc-list">
+          <div v-for="(item, i) in templateCard.horizontal_content_list" :key="i" class="tc-list-row">
+            <span class="tc-list-key">{{ item.keyname }}</span>
+            <span class="tc-list-val">{{ item.value }}</span>
+          </div>
+        </div>
+        <!-- 跳转链接列表 -->
+        <div v-if="Array.isArray(templateCard.jump_list) && templateCard.jump_list.length" class="tc-jump">
+          <a v-for="(item, i) in templateCard.jump_list" :key="i" :href="item.url || '#'" target="_blank" rel="noopener" class="tc-jump-row">
+            <span>{{ item.title }}</span><span class="arrow">›</span>
+          </a>
+        </div>
+      </div>
+
+      <!-- ================= 钉钉 link ================= -->
+      <div v-else-if="messageType === 'link'" class="bubble bubble--card">
+        <div class="card-title">{{ dingLink.title || '（无标题）' }}</div>
+        <div class="card-flex">
+          <div v-if="dingLink.text" class="card-desc">{{ dingLink.text }}</div>
+          <img v-if="dingLink.picUrl" :src="safeImg(dingLink.picUrl)" class="card-thumb" />
+        </div>
+        <a v-if="dingLink.messageUrl" :href="dingLink.messageUrl" target="_blank" rel="noopener" class="card-link">
+          {{ urlHost(dingLink.messageUrl) }} ›
+        </a>
+      </div>
+
+      <!-- ================= 钉钉 actionCard ================= -->
+      <div v-else-if="messageType === 'actionCard'" class="bubble bubble--card">
+        <div v-if="dingActionCard.title" class="card-title">{{ dingActionCard.title }}</div>
+        <div v-if="dingActionCard.text" class="card-desc md-content" v-html="renderMarkdown(dingActionCard.text)"></div>
+        <a v-if="dingActionCard.singleTitle && dingActionCard.singleURL" :href="dingActionCard.singleURL" target="_blank" rel="noopener" class="btn-primary">
+          {{ dingActionCard.singleTitle }}
+        </a>
+        <div v-else-if="dingActionCard.btns.length" class="btn-grid">
+          <a v-for="(b, i) in dingActionCard.btns" :key="i" :href="b.actionURL" target="_blank" rel="noopener" class="btn-default">
+            {{ b.title }}
+          </a>
+        </div>
+      </div>
+
+      <!-- ================= 飞书 post 富文本 ================= -->
+      <div v-else-if="messageType === 'post'" class="bubble bubble--post">
+        <div v-if="feishuPost.title" class="post-title">{{ feishuPost.title }}</div>
+        <div class="post-content">
+          <template v-for="(line, i) in feishuPost.content" :key="i">
+            <div class="post-line">
+              <template v-for="(node, j) in line" :key="j">
+                <a v-if="node.tag === 'a'" :href="node.href" target="_blank" rel="noopener">{{ node.text }}</a>
+                <img v-else-if="node.tag === 'img'" :src="safeImg(node.image_key)" class="post-img" />
+                <strong v-else-if="node.tag === 'b'">{{ node.text }}</strong>
+                <span v-else>{{ node.text }}</span>
+              </template>
+            </div>
+          </template>
+          <div v-if="!feishuPost.content.length" class="empty-tip">（请填写 post 内容）</div>
+        </div>
+      </div>
+
+      <!-- ================= 飞书 interactive 卡片 ================= -->
+      <div v-else-if="messageType === 'interactive'" class="bubble bubble--card fs-interactive">
+        <div v-if="feishuCard?.header?.title?.content" class="fs-card-header" :style="{ background: feishuCard?.header?.template ? '' : '#3370ff' }">
+          {{ feishuCard.header.title.content }}
+        </div>
+        <div v-if="Array.isArray(feishuCard?.elements)" class="fs-elements">
+          <template v-for="(el, i) in feishuCard.elements" :key="i">
+            <div v-if="el.tag === 'div' && el.text" class="fs-el-text" v-html="renderMarkdown(el.text.content || '')"></div>
+            <div v-else-if="el.tag === 'div' && el.column_set" class="fs-el-cols">
+              <div v-for="(col, ci) in el.column_set.columns || []" :key="ci" class="fs-el-col">
+                <template v-for="(cel, cci) in col.elements || []" :key="cci">
+                  <div v-if="cel.tag === 'markdown'" v-html="renderMarkdown(cel.content || '')"></div>
+                </template>
+              </div>
+            </div>
+            <a v-else-if="el.tag === 'action' && Array.isArray(el.actions)" class="fs-btn-row">
+              <span v-for="(btn, bi) in el.actions" :key="bi" class="fs-btn">{{ btn.text?.text || btn.text || '' }}</span>
+            </a>
+            <img v-else-if="el.tag === 'img'" :src="safeImg(el.img_key)" class="fs-img" />
+            <div v-else-if="el.tag === 'hr'" class="fs-hr"></div>
+            <div v-else-if="el.tag === 'note'" class="fs-note">
+              <template v-for="(nel, ni) in el.elements || []" :key="ni">
+                <img v-if="nel.tag === 'img'" :src="safeImg(nel.img_key)" class="fs-note-img" />
+                <span v-else>{{ nel.content || nel.text || '' }}</span>
+              </template>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <!-- ================= 钉钉 feedCard ================= -->
+      <div v-else-if="messageType === 'feedCard'" class="bubble bubble--card">
+        <div v-for="(link, i) in mergedPayload.links || []" :key="i" class="feed-row">
+          <div class="feed-flex">
+            <div>
+              <div class="card-title">{{ link.title }}</div>
+              <div class="card-link">{{ urlHost(link.messageURL) }}</div>
+            </div>
+            <img v-if="link.picURL" :src="safeImg(link.picURL)" class="card-thumb" />
+          </div>
+        </div>
+      </div>
+
+      <!-- ================= file / voice / share_chat ================= -->
+      <div v-else-if="['file', 'voice', 'share_chat'].includes(messageType)" class="bubble bubble--file">
+        <div class="file-icon">📁</div>
+        <div class="file-info">
+          <div class="file-name">{{ mergedPayload.name || `${messageType} 文件` }}</div>
+          <div class="file-meta">{{ messageType }} · 仅展示文件名，实际发送需 media_id</div>
+        </div>
+      </div>
+
+      <!-- ================= 未识别类型 ================= -->
+      <div v-else class="bubble bubble--unknown">
+        <div class="empty-tip">暂未实现「{{ messageType }}」类型的预览样式</div>
+        <pre v-if="Object.keys(mergedPayload).length" class="raw-json">{{ mergedPayload }}</pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+/* ========== 外壳（仿客户端聊天窗口） ========== */
+/* 浅色：保留品牌色调淡版；暗色由下方 html.dark 块覆盖 */
+.msg-preview-shell {
+  width: 100%;
+  padding: 12px;
+  border-radius: 12px;
+  background: var(--mp-shell-default, #ededed);
+  min-height: 200px;
+}
+
+.msg-preview-shell--ww {
+  background: var(--mp-shell-ww, #ededed);
+}
+
+.msg-preview-shell--dt {
+  background: var(--mp-shell-dt, #e8f5e9);
+}
+
+.msg-preview-shell--fs {
+  background: var(--mp-shell-fs, #eef4ff);
+}
+
+.msg-preview-shell--default {
+  background: var(--mp-shell-default, #f5f5f5);
+}
+
+.msg-preview-shell--inline {
+  background: transparent;
+  padding: 0;
+}
+
+.msg-preview-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.platform-badge {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #fff;
+  background: var(--ant-color-text-tertiary, #999);
+}
+
+/* 品牌色保留：企微绿 / 钉钉蓝 / 飞书蓝 */
+.platform-badge--ww {
+  background: #07c160;
+}
+
+.platform-badge--dt {
+  background: #0089ff;
+}
+
+.platform-badge--fs {
+  background: #3370ff;
+}
+
+.msg-type-badge {
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 11px;
+  background: var(--ant-color-fill-tertiary, rgba(0, 0, 0, 0.06));
+  color: var(--ant-color-text-secondary, #555);
+}
+
+/* ========== 消息主体气泡 ========== */
+.msg-preview-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 80%;
+}
+
+.bubble {
+  padding: 10px 12px;
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+/* 企微气泡：白底圆角 */
+.msg-preview-body--ww .bubble {
+  background: var(--ant-color-bg-container, #fff);
+  color: var(--ant-color-text, #1a1a1a);
+}
+
+/* 钉钉气泡：白底，markdown 绿字（暗色由 html.dark 块调亮） */
+.msg-preview-body--dt .bubble {
+  background: var(--ant-color-bg-container, #fff);
+  color: var(--ant-color-text, #1a1a1a);
+}
+
+.msg-preview-body--dt .bubble--markdown {
+  color: #2e8b57;
+}
+
+/* 飞书气泡：白底带边框 */
+.msg-preview-body--fs .bubble {
+  background: var(--ant-color-bg-container, #fff);
+  color: var(--ant-color-text, #1f2329);
+  border: 1px solid var(--ant-color-border-secondary, #e5e6eb);
+}
+
+/* ========== 文本/markdown 内容样式 ========== */
+.text-content {
+  white-space: pre-wrap;
+}
+
+.md-content {
+  :deep(h2) {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 6px 0 4px;
+  }
+
+  :deep(h3) {
+    font-size: 14px;
+    font-weight: 600;
+    margin: 4px 0;
+  }
+
+  :deep(p) {
+    margin: 2px 0;
+  }
+
+  :deep(ul) {
+    padding-left: 20px;
+    margin: 4px 0;
+  }
+
+  /* 品牌色链接 */
+  :deep(a) {
+    color: #3370ff;
+    text-decoration: none;
+  }
+
+  :deep(strong) {
+    font-weight: 600;
+  }
+}
+
+.at-footer {
+  margin-top: 6px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.at-pill {
+  padding: 1px 6px;
+  border-radius: 3px;
+  background: rgba(51, 112, 255, 0.1);
+  /* 品牌色 */
+  color: #3370ff;
+  font-size: 12px;
+}
+
+:deep(.at-mention) {
+  /* 品牌色 */
+  color: #3370ff;
+}
+
+/* ========== 图片气泡 ========== */
+.bubble-img {
+  max-width: 240px;
+  max-height: 240px;
+  border-radius: 6px;
+  display: block;
+}
+
+/* ========== 卡片通用样式（news / link / actionCard / template_card / interactive） ========== */
+.bubble--card {
+  background: var(--ant-color-bg-container, #fff);
+  padding: 0;
+  overflow: hidden;
+  border-radius: 6px;
+  max-width: 320px;
+}
+
+.card-title {
+  font-size: 14px;
+  font-weight: 600;
+  padding: 10px 12px 4px;
+  color: var(--ant-color-text, #1a1a1a);
+}
+
+.card-desc {
+  font-size: 13px;
+  color: var(--ant-color-text-secondary, #555);
+  padding: 0 12px 6px;
+}
+
+.card-cover {
+  width: 100%;
+  max-height: 160px;
+  object-fit: cover;
+  display: block;
+}
+
+/* news 多图文列表：首条大图，后续缩略行 */
+.news-list .news-item + .news-item {
+  border-top: 1px solid var(--ant-color-border-secondary, #f0f0f0);
+}
+
+.news-item--row {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+}
+
+.news-item--row .news-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.news-item--row .card-title {
+  padding: 0;
+  font-size: 13px;
+}
+
+.news-item--row .card-desc {
+  padding: 2px 0 0;
+  font-size: 12px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.news-item--row .card-link {
+  padding: 2px 0 0;
+  font-size: 12px;
+}
+
+.news-thumb {
+  width: 48px;
+  height: 48px;
+  object-fit: cover;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.textcard-btn {
+  display: block;
+  padding: 8px 12px 10px;
+  font-weight: 500;
+}
+
+.card-flex {
+  display: flex;
+  gap: 8px;
+  padding: 0 12px 6px;
+}
+
+.card-thumb {
+  width: 64px;
+  height: 64px;
+  border-radius: 4px;
+  object-fit: cover;
+}
+
+.card-link {
+  display: block;
+  padding: 4px 12px 10px;
+  font-size: 12px;
+  /* 品牌色 */
+  color: #3370ff;
+  text-decoration: none;
+}
+
+.btn-primary,
+.btn-default {
+  display: block;
+  text-align: center;
+  padding: 8px;
+  font-size: 14px;
+  text-decoration: none;
+  /* 品牌色 */
+  color: #3370ff;
+  border-top: 1px solid var(--ant-color-split, #f0f0f0);
+}
+
+.btn-default:nth-child(odd) {
+  border-right: 1px solid var(--ant-color-split, #f0f0f0);
+}
+
+.btn-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+/* ========== 企微 template_card ========== */
+.ww-template-card {
+  max-width: 300px;
+}
+
+.tc-source {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px 0;
+  font-size: 12px;
+  color: var(--ant-color-text-tertiary, #888);
+}
+
+.tc-source-icon {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+}
+
+.tc-main-title {
+  padding: 4px 12px 0;
+}
+
+.tc-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.tc-desc {
+  font-size: 12px;
+  color: var(--ant-color-text-tertiary, #888);
+  margin-top: 2px;
+}
+
+.tc-image img {
+  width: 100%;
+  max-height: 140px;
+  object-fit: cover;
+  margin: 6px 0;
+}
+
+.tc-emphasis {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  padding: 4px 12px;
+}
+
+.tc-emphasis-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--ant-color-text, #222);
+}
+
+.tc-emphasis-desc {
+  font-size: 12px;
+  color: var(--ant-color-text-tertiary, #888);
+}
+
+.tc-sub {
+  font-size: 13px;
+  color: var(--ant-color-text-secondary, #444);
+  padding: 2px 12px 6px;
+}
+
+.tc-list {
+  padding: 4px 12px;
+}
+
+.tc-list-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  padding: 2px 0;
+}
+
+.tc-list-key {
+  color: var(--ant-color-text-tertiary, #888);
+}
+
+.tc-list-val {
+  color: var(--ant-color-text, #1a1a1a);
+}
+
+.tc-jump {
+  margin-top: 6px;
+  border-top: 1px solid var(--ant-color-split, #f0f0f0);
+}
+
+.tc-jump-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 12px;
+  font-size: 13px;
+  /* 品牌色 */
+  color: #3370ff;
+  text-decoration: none;
+  border-bottom: 1px solid var(--ant-color-split, #f7f7f7);
+
+  .arrow {
+    color: var(--ant-color-text-quaternary, #ccc);
+  }
+}
+
+/* ========== 飞书 post 富文本 ========== */
+.bubble--post {
+  max-width: 320px;
+}
+
+.post-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.post-line {
+  margin: 2px 0;
+}
+
+.post-img {
+  max-width: 200px;
+  border-radius: 4px;
+}
+
+/* ========== 飞书 interactive 卡片 ========== */
+.fs-interactive {
+  max-width: 320px;
+}
+
+.fs-card-header {
+  padding: 10px 12px;
+  color: #fff;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.fs-elements {
+  padding: 4px 0;
+}
+
+.fs-el-text {
+  padding: 4px 12px;
+  font-size: 13px;
+}
+
+.fs-el-cols {
+  display: flex;
+  gap: 6px;
+  padding: 4px 12px;
+}
+
+.fs-el-col {
+  flex: 1;
+}
+
+.fs-btn-row {
+  display: flex;
+  gap: 6px;
+  padding: 6px 12px;
+}
+
+.fs-btn {
+  flex: 1;
+  text-align: center;
+  padding: 6px;
+  /* 品牌色 */
+  background: #3370ff;
+  color: #fff;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.fs-img {
+  width: calc(100% - 24px);
+  margin: 4px 12px;
+  border-radius: 4px;
+}
+
+.fs-hr {
+  height: 1px;
+  background: var(--ant-color-border-secondary, #e5e6eb);
+  margin: 6px 12px;
+}
+
+.fs-note {
+  padding: 6px 12px;
+  font-size: 12px;
+  color: var(--ant-color-text-tertiary, #888);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.fs-note-img {
+  width: 14px;
+  height: 14px;
+}
+
+/* ========== 钉钉 feedCard ========== */
+.feed-row {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--ant-color-split, #f5f5f5);
+}
+
+.feed-flex {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+/* ========== 文件类型（file/voice/share_chat） ========== */
+.bubble--file {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--ant-color-bg-container, #fff);
+}
+
+.file-icon {
+  font-size: 28px;
+}
+
+.file-info {
+  flex: 1;
+}
+
+.file-name {
+  font-size: 14px;
+  color: var(--ant-color-text, #1a1a1a);
+}
+
+.file-meta {
+  font-size: 12px;
+  color: var(--ant-color-text-tertiary, #888);
+}
+
+/* ========== 占位提示 ========== */
+.empty-tip {
+  color: var(--ant-color-text-quaternary, #aaa);
+  font-size: 13px;
+  font-style: italic;
+}
+
+.raw-json {
+  margin-top: 6px;
+  font-size: 11px;
+  background: var(--ant-color-fill-quaternary, #f7f7f7);
+  padding: 6px;
+  border-radius: 4px;
+  color: var(--ant-color-text-secondary, #555);
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 200px;
+  overflow: auto;
+}
+
+/* ========== 暗色覆盖（html.dark / .dark）==========
+ * 用户选项 full-dark-adapt：浅色外壳和气泡也跟随暗色，仅保留品牌色
+ * 注：scoped 下 html.dark 作为祖先选择器不会改写，能直接命中
+ */
+html.dark .msg-preview-shell,
+.dark .msg-preview-shell,
+html.dark .msg-preview-shell--ww,
+.dark .msg-preview-shell--ww,
+html.dark .msg-preview-shell--default,
+.dark .msg-preview-shell--default {
+  background: #1f1f1f;
+}
+
+html.dark .msg-preview-shell--dt,
+.dark .msg-preview-shell--dt {
+  background: #16201a;
+}
+
+html.dark .msg-preview-shell--fs,
+.dark .msg-preview-shell--fs {
+  background: #161d2e;
+}
+
+html.dark .bubble,
+.dark .bubble {
+  background: #2a2a2a !important;
+  color: rgba(255, 255, 255, 0.88) !important;
+  border-color: #3a3a3a !important;
+}
+
+html.dark .bubble--card,
+.dark .bubble--card,
+html.dark .bubble--file,
+.dark .bubble--file {
+  background: #2a2a2a !important;
+}
+
+html.dark .card-title,
+.dark .card-title,
+html.dark .tc-emphasis-title,
+.dark .tc-emphasis-title,
+html.dark .tc-list-val,
+.dark .tc-list-val,
+html.dark .file-name,
+.dark .file-name {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+html.dark .card-desc,
+.dark .card-desc,
+html.dark .tc-desc,
+.dark .tc-desc,
+html.dark .file-meta,
+.dark .file-meta {
+  color: rgba(255, 255, 255, 0.55);
+}
+
+html.dark .tc-list-key,
+.dark .tc-list-key,
+html.dark .fs-note,
+.dark .fs-note,
+html.dark .tc-source,
+.dark .tc-source,
+html.dark .tc-emphasis-desc,
+.dark .tc-emphasis-desc {
+  color: rgba(255, 255, 255, 0.45);
+}
+
+html.dark .tc-sub,
+.dark .tc-sub {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+html.dark .msg-type-badge,
+.dark .msg-type-badge {
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.65);
+}
+
+html.dark .fs-hr,
+.dark .fs-hr {
+  background: #3a3a3a;
+}
+
+html.dark .tc-jump,
+.dark .tc-jump,
+html.dark .btn-primary,
+.dark .btn-primary,
+html.dark .btn-default,
+.dark .btn-default {
+  border-color: #3a3a3a !important;
+}
+
+html.dark .tc-jump-row,
+.dark .tc-jump-row {
+  border-bottom-color: #3a3a3a;
+}
+
+html.dark .raw-json,
+.dark .raw-json {
+  background: #1f1f1f;
+  color: rgba(255, 255, 255, 0.65);
+}
+
+html.dark .empty-tip,
+.dark .empty-tip {
+  color: rgba(255, 255, 255, 0.35);
+}
+
+html.dark .feed-row,
+.dark .feed-row {
+  border-bottom-color: #3a3a3a;
+}
+
+/* 钉钉 markdown 在暗色下用浅绿，与暗底对比 */
+html.dark .msg-preview-body--dt .bubble--markdown,
+.dark .msg-preview-body--dt .bubble--markdown {
+  color: #69db94;
+}
+</style>
diff --git a/apps/web-antd/src/views/system/oa-scene/components/payload-lists/button-list.vue b/apps/web-antd/src/views/system/oa-scene/components/payload-lists/button-list.vue
new file mode 100644
index 00000000..eaeb832e
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-scene/components/payload-lists/button-list.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+/**
+ * OA 场景 - 钉钉 actionCard 按钮列表（btns）
+ *
+ * 用于 dingtalk 平台 actionCard 消息类型的 btns 字段编辑。
+ * 每条 btn 字段对齐钉钉官方结构（DingTalkChannel::buildPayload case 'actionCard'）：
+ *   - title      按钮文案（必填）
+ *   - actionURL  跳转 URL（必填）
+ *
+ * 受 maxCount 限制（钉钉限制 6 个）。
+ */
+import { computed } from 'vue';
+
+import { Button, Input } from 'ant-design-vue';
+
+interface ActionButton {
+  title?: string;
+  actionURL?: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** 双向绑定的 btns 数组 */
+    modelValue?: ActionButton[];
+    /** 最大条数 */
+    maxCount?: number;
+  }>(),
+  {
+    modelValue: () => [],
+    maxCount: 6,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: ActionButton[]];
+}>();
+
+const list = computed<ActionButton[]>({
+  get: () => (Array.isArray(props.modelValue) ? props.modelValue : []),
+  set: (val) => emit('update:modelValue', val),
+});
+
+const canAdd = computed(() => list.value.length < props.maxCount);
+
+function updateItem(index: number, key: keyof ActionButton, value: string) {
+  list.value = list.value.map((item, i) =>
+    i === index ? { ...item, [key]: value } : item,
+  );
+}
+
+function addItem() {
+  if (!canAdd.value) return;
+  list.value = [...list.value, {}];
+}
+
+function removeItem(index: number) {
+  list.value = list.value.filter((_, i) => i !== index);
+}
+</script>
+
+<template>
+  <div class="button-list">
+    <div
+      v-for="(item, idx) in list"
+      :key="idx"
+      class="btn-row"
+    >
+      <span class="btn-index">{{ idx + 1 }}</span>
+      <Input
+        :value="item.title"
+        placeholder="按钮文案（必填）"
+        size="small"
+        allow-clear
+        class="btn-input"
+        @update:value="(v: string) => updateItem(idx, 'title', v)"
+      />
+      <Input
+        :value="item.actionURL"
+        placeholder="跳转 URL（必填）"
+        size="small"
+        allow-clear
+        class="btn-input btn-url"
+        @update:value="(v: string) => updateItem(idx, 'actionURL', v)"
+      />
+      <Button
+        type="link"
+        size="small"
+        danger
+        class="btn-del"
+        @click="removeItem(idx)"
+      >
+        删除
+      </Button>
+    </div>
+
+    <Button
+      v-if="canAdd"
+      type="dashed"
+      size="small"
+      block
+      @click="addItem"
+    >
+      + 添加按钮（{{ list.length }}/{{ maxCount }}）
+    </Button>
+    <div v-else-if="list.length > 0" class="max-hint">
+      已达上限 {{ maxCount }} 条
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.button-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+
+.btn-row {
+  display: grid;
+  grid-template-columns: 20px 1fr 1fr auto;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 0;
+  border-bottom: 1px dashed var(--ant-color-split, #f0f0f0);
+}
+
+.btn-index {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--ant-color-text-tertiary, #86909c);
+  text-align: center;
+}
+
+.btn-input {
+  min-width: 0;
+}
+
+.btn-del {
+  padding: 0 4px;
+  height: auto;
+  font-size: 12px;
+}
+
+.max-hint {
+  text-align: center;
+  font-size: 11px;
+  color: var(--ant-color-text-tertiary, #86909c);
+}
+</style>
diff --git a/apps/web-antd/src/views/system/oa-scene/components/payload-lists/link-list.vue b/apps/web-antd/src/views/system/oa-scene/components/payload-lists/link-list.vue
new file mode 100644
index 00000000..212df665
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-scene/components/payload-lists/link-list.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+/**
+ * OA 场景 - 钉钉 feedCard 链接列表（links）
+ *
+ * 用于 dingtalk 平台 feedCard 消息类型的 links 字段编辑。
+ * 每条 link 字段对齐钉钉官方结构（DingTalkChannel::buildPayload case 'feedCard'）：
+ *   - title       标题（必填）
+ *   - messageURL  跳转链接（必填）
+ *   - picURL      封面图（可选，从素材库选图片 xk_file.type=0）
+ *
+ * 受 maxCount 限制（默认 10）。
+ */
+import { computed } from 'vue';
+
+import { Button, Input } from 'ant-design-vue';
+
+import UploadImage from '#/components/form/components/upload-image.vue';
+
+interface FeedLink {
+  title?: string;
+  messageURL?: string;
+  picURL?: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** 双向绑定的 links 数组 */
+    modelValue?: FeedLink[];
+    /** 最大条数 */
+    maxCount?: number;
+  }>(),
+  {
+    modelValue: () => [],
+    maxCount: 10,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: FeedLink[]];
+}>();
+
+const list = computed<FeedLink[]>({
+  get: () => (Array.isArray(props.modelValue) ? props.modelValue : []),
+  set: (val) => emit('update:modelValue', val),
+});
+
+const canAdd = computed(() => list.value.length < props.maxCount);
+
+function updateItem(index: number, key: keyof FeedLink, value: string) {
+  list.value = list.value.map((item, i) =>
+    i === index ? { ...item, [key]: value } : item,
+  );
+}
+
+function updateImage(index: number, urls: string[]) {
+  updateItem(index, 'picURL', urls[0] || '');
+}
+
+function addItem() {
+  if (!canAdd.value) return;
+  list.value = [...list.value, {}];
+}
+
+function removeItem(index: number) {
+  list.value = list.value.filter((_, i) => i !== index);
+}
+</script>
+
+<template>
+  <div class="link-list">
+    <div
+      v-for="(item, idx) in list"
+      :key="idx"
+      class="link-item"
+    >
+      <div class="link-head">
+        <span class="link-index">链接 {{ idx + 1 }}</span>
+        <Button
+          type="link"
+          size="small"
+          danger
+          class="link-del"
+          @click="removeItem(idx)"
+        >
+          删除
+        </Button>
+      </div>
+
+      <div class="link-form">
+        <div class="form-row">
+          <label class="row-label">
+            标题<span class="req">*</span>
+          </label>
+          <Input
+            :value="item.title"
+            placeholder="链接标题（必填）"
+            size="small"
+            allow-clear
+            @update:value="(v: string) => updateItem(idx, 'title', v)"
+          />
+        </div>
+
+        <div class="form-row">
+          <label class="row-label">
+            跳转链接<span class="req">*</span>
+          </label>
+          <Input
+            :value="item.messageURL"
+            placeholder="https://（必填）"
+            size="small"
+            allow-clear
+            @update:value="(v: string) => updateItem(idx, 'messageURL', v)"
+          />
+        </div>
+
+        <div class="form-row">
+          <label class="row-label">封面图（可选）</label>
+          <UploadImage
+            :model-value="item.picURL ? [item.picURL] : []"
+            :multiple="false"
+            :max-count="1"
+            :accept-types="[0]"
+            @update:model-value="(urls: string[]) => updateImage(idx, urls)"
+          />
+        </div>
+      </div>
+    </div>
+
+    <Button
+      v-if="canAdd"
+      type="dashed"
+      size="small"
+      block
+      @click="addItem"
+    >
+      + 添加链接（{{ list.length }}/{{ maxCount }}）
+    </Button>
+    <div v-else-if="list.length > 0" class="max-hint">
+      已达上限 {{ maxCount }} 条
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.link-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.link-item {
+  padding: 8px;
+  border: 1px solid var(--ant-color-border-secondary, #e5e6eb);
+  border-radius: 6px;
+}
+
+.link-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.link-index {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ant-color-text-secondary, #4e5969);
+}
+
+.link-del {
+  padding: 0 4px;
+  height: auto;
+  font-size: 12px;
+}
+
+.link-form {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.form-row {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.row-label {
+  font-size: 11px;
+  color: var(--ant-color-text-secondary, #4e5969);
+}
+
+.req {
+  margin-left: 2px;
+  color: var(--ant-color-error, #f53f3f);
+}
+
+.max-hint {
+  text-align: center;
+  font-size: 11px;
+  color: var(--ant-color-text-tertiary, #86909c);
+}
+</style>
diff --git a/apps/web-antd/src/views/system/oa-scene/components/payload-lists/news-list.vue b/apps/web-antd/src/views/system/oa-scene/components/payload-lists/news-list.vue
new file mode 100644
index 00000000..25aa2a5b
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-scene/components/payload-lists/news-list.vue
@@ -0,0 +1,226 @@
+<script setup lang="ts">
+/**
+ * OA 场景 - 企业微信图文消息列表（news）
+ *
+ * 用于 work_wechat / work_wechat_app 平台 news 消息类型的 articles 字段编辑。
+ * 每条 article 字段对齐企微官方结构（WorkWechatAppChannel::buildPayload case 'news'）：
+ *   - title       标题（必填）
+ *   - description 描述（必填）
+ *   - url         点击跳转链接（必填）
+ *   - picurl      封面图 URL（从素材库选；xk_file.type=0 即图片）
+ *
+ * 受 maxCount 限制（企微限制 1~8 条）。
+ */
+import { computed } from 'vue';
+
+import { Button, Input, Textarea } from 'ant-design-vue';
+
+import UploadImage from '#/components/form/components/upload-image.vue';
+
+interface NewsArticle {
+  title?: string;
+  description?: string;
+  url?: string;
+  picurl?: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** 双向绑定的 articles 数组 */
+    modelValue?: NewsArticle[];
+    /** 最大条数（企微限制 8） */
+    maxCount?: number;
+  }>(),
+  {
+    modelValue: () => [],
+    maxCount: 8,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: NewsArticle[]];
+}>();
+
+/** 内部可变副本（每次更新都重新生成新数组触发响应） */
+const list = computed<NewsArticle[]>({
+  get: () => Array.isArray(props.modelValue) ? props.modelValue : [],
+  set: (val) => emit('update:modelValue', val),
+});
+
+/** 是否允许新增 */
+const canAdd = computed(() => list.value.length < props.maxCount);
+
+/** 更新指定下标 article 的字段 */
+function updateItem(index: number, key: keyof NewsArticle, value: string) {
+  const next = list.value.map((item, i) =>
+    i === index ? { ...item, [key]: value } : item,
+  );
+  list.value = next;
+}
+
+/** 更新封面图 URL（UploadImage 返回 string[]） */
+function updateImage(index: number, urls: string[]) {
+  updateItem(index, 'picurl', urls[0] || '');
+}
+
+/** 新增一条空白 article */
+function addItem() {
+  if (!canAdd.value) return;
+  list.value = [...list.value, {}];
+}
+
+/** 删除指定 article */
+function removeItem(index: number) {
+  list.value = list.value.filter((_, i) => i !== index);
+}
+</script>
+
+<template>
+  <div class="news-list">
+    <div
+      v-for="(item, idx) in list"
+      :key="idx"
+      class="news-item"
+    >
+      <div class="news-head">
+        <span class="news-index">图文 {{ idx + 1 }}</span>
+        <Button
+          type="link"
+          size="small"
+          danger
+          class="news-del"
+          @click="removeItem(idx)"
+        >
+          删除
+        </Button>
+      </div>
+
+      <div class="news-form">
+        <div class="form-row">
+          <label class="row-label">
+            标题<span class="req">*</span>
+          </label>
+          <Input
+            :value="item.title"
+            placeholder="图文标题（必填）"
+            size="small"
+            allow-clear
+            @update:value="(v: string) => updateItem(idx, 'title', v)"
+          />
+        </div>
+
+        <div class="form-row">
+          <label class="row-label">
+            描述<span class="req">*</span>
+          </label>
+          <Textarea
+            :value="item.description"
+            placeholder="图文描述（必填）"
+            :rows="2"
+            size="small"
+            @update:value="(v: string) => updateItem(idx, 'description', v)"
+          />
+        </div>
+
+        <div class="form-row">
+          <label class="row-label">
+            跳转链接<span class="req">*</span>
+          </label>
+          <Input
+            :value="item.url"
+            placeholder="https://（必填）"
+            size="small"
+            allow-clear
+            @update:value="(v: string) => updateItem(idx, 'url', v)"
+          />
+        </div>
+
+        <div class="form-row">
+          <label class="row-label">封面图</label>
+          <UploadImage
+            :model-value="item.picurl ? [item.picurl] : []"
+            :multiple="false"
+            :max-count="1"
+            :accept-types="[0]"
+            @update:model-value="(urls: string[]) => updateImage(idx, urls)"
+          />
+        </div>
+      </div>
+    </div>
+
+    <Button
+      v-if="canAdd"
+      type="dashed"
+      size="small"
+      block
+      @click="addItem"
+    >
+      + 添加图文（{{ list.length }}/{{ maxCount }}）
+    </Button>
+    <div v-else-if="list.length > 0" class="max-hint">
+      已达上限 {{ maxCount }} 条
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.news-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.news-item {
+  padding: 8px;
+  border: 1px solid var(--ant-color-border-secondary, #e5e6eb);
+  border-radius: 6px;
+}
+
+.news-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.news-index {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ant-color-text-secondary, #4e5969);
+}
+
+.news-del {
+  padding: 0 4px;
+  height: auto;
+  font-size: 12px;
+}
+
+.news-form {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.form-row {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.row-label {
+  font-size: 11px;
+  color: var(--ant-color-text-secondary, #4e5969);
+}
+
+.req {
+  margin-left: 2px;
+  color: var(--ant-color-error, #f53f3f);
+}
+
+.max-hint {
+  text-align: center;
+  font-size: 11px;
+  color: var(--ant-color-text-tertiary, #86909c);
+}
+</style>
diff --git a/apps/web-antd/src/views/system/oa-scene/components/payload-lists/post-editor.vue b/apps/web-antd/src/views/system/oa-scene/components/payload-lists/post-editor.vue
new file mode 100644
index 00000000..6cc548df
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-scene/components/payload-lists/post-editor.vue
@@ -0,0 +1,235 @@
+<script setup lang="ts">
+/**
+ * OA 场景 - 飞书 post 富文本编辑器（简化版）
+ *
+ * 用于 feishu 平台 post 消息类型编辑。
+ * 后端期望结构（FeishuChannel::buildPayload case 'post'）：
+ *   {
+ *     zh_cn: {
+ *       title: string,
+ *       content: [[ {tag:'text', text}, {tag:'a', href, text}, ... ]]
+ *     }
+ *   }
+ *
+ * 简化方案：每段一个 Textarea（一行节点），段内用 markdown 风格表达链接：
+ *   - `[文字](url)` → { tag:'a', href:url, text:文字 }
+ *   - 其余文字     → { tag:'text', text:文字 }
+ *
+ * 不支持复杂富文本（图片/at/表情等节点），用户选项 all-four 表示"要能用"即可。
+ */
+import { computed } from 'vue';
+
+import { Button, Input, Textarea } from 'ant-design-vue';
+
+interface PostNode {
+  tag: 'text' | 'a';
+  text: string;
+  href?: string;
+}
+
+interface FeishuPost {
+  zh_cn?: {
+    title?: string;
+    content?: PostNode[][];
+  };
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** 双向绑定的 post 数据（含 zh_cn 包裹） */
+    modelValue?: FeishuPost;
+  }>(),
+  {
+    modelValue: () => ({}),
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: FeishuPost];
+}>();
+
+/** 标题（双向） */
+const title = computed<string>({
+  get: () => props.modelValue?.zh_cn?.title || '',
+  set: (val) => emitValue(val, paragraphs.value),
+});
+
+/** 段落（双向；每段是原始字符串，提交时解析为 PostNode[]） */
+const paragraphs = computed<string[]>({
+  get: () => props.modelValue?.zh_cn?.content?.map(stringifyNodes) ?? [],
+  set: (val) => emitValue(title.value, val),
+});
+
+function emitValue(newTitle: string, newParagraphs: string[]) {
+  emit('update:modelValue', {
+    zh_cn: {
+      title: newTitle,
+      content: newParagraphs.map(parseParagraph).filter((p) => p.length > 0),
+    },
+  });
+}
+
+/**
+ * 把一段文本解析为飞书 post 节点数组
+ * 支持 markdown 风格链接：[text](url)
+ */
+function parseParagraph(text: string): PostNode[] {
+  if (!text) return [];
+  const nodes: PostNode[] = [];
+  // 链接正则：[文字](url)，url 必须以 http(s):// 开头
+  const regex = /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      nodes.push({ tag: 'text', text: text.slice(lastIndex, match.index) });
+    }
+    nodes.push({ tag: 'a', text: match[1]!, href: match[2]! });
+    lastIndex = regex.lastIndex;
+  }
+  if (lastIndex < text.length) {
+    nodes.push({ tag: 'text', text: text.slice(lastIndex) });
+  }
+  return nodes;
+}
+
+/** 反向：把节点数组还原为可编辑的字符串（[文字](url)） */
+function stringifyNodes(nodes: PostNode[] | undefined): string {
+  if (!Array.isArray(nodes) || nodes.length === 0) return '';
+  return nodes
+    .map((n) => {
+      if (n.tag === 'a' && n.href) {
+        return `[${n.text}](${n.href})`;
+      }
+      return n.text || '';
+    })
+    .join('');
+}
+
+function updateParagraph(index: number, value: string) {
+  const next = [...paragraphs.value];
+  next[index] = value;
+  paragraphs.value = next;
+}
+
+function addParagraph() {
+  paragraphs.value = [...paragraphs.value, ''];
+}
+
+function removeParagraph(index: number) {
+  paragraphs.value = paragraphs.value.filter((_, i) => i !== index);
+}
+</script>
+
+<template>
+  <div class="post-editor">
+    <div class="form-row">
+      <label class="row-label">标题</label>
+      <Input
+        :value="title"
+        placeholder="富文本标题（可选）"
+        size="small"
+        allow-clear
+        @update:value="(v: string) => (title = v)"
+      />
+    </div>
+
+    <div class="paragraphs">
+      <div
+        v-for="(p, idx) in paragraphs"
+        :key="idx"
+        class="paragraph-row"
+      >
+        <div class="paragraph-head">
+          <span class="paragraph-index">段落 {{ idx + 1 }}</span>
+          <Button
+            type="link"
+            size="small"
+            danger
+            class="paragraph-del"
+            @click="removeParagraph(idx)"
+          >
+            删除
+          </Button>
+        </div>
+        <Textarea
+          :value="p"
+          :rows="2"
+          size="small"
+          placeholder="支持 [文字](https://链接) 语法"
+          @update:value="(v: string) => updateParagraph(idx, v)"
+        />
+      </div>
+    </div>
+
+    <Button type="dashed" size="small" block @click="addParagraph">
+      + 添加段落
+    </Button>
+
+    <div class="hint">
+      提示：链接语法 <code>[文字](https://...)</code>，其他文字原样作为文本节点
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.post-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.form-row {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.row-label {
+  font-size: 11px;
+  color: var(--ant-color-text-secondary, #4e5969);
+}
+
+.paragraphs {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.paragraph-row {
+  padding: 4px 6px;
+  border: 1px solid var(--ant-color-border-secondary, #e5e6eb);
+  border-radius: 4px;
+}
+
+.paragraph-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 2px;
+}
+
+.paragraph-index {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--ant-color-text-secondary, #4e5969);
+}
+
+.paragraph-del {
+  padding: 0 4px;
+  height: auto;
+  font-size: 12px;
+}
+
+.hint {
+  font-size: 11px;
+  color: var(--ant-color-text-tertiary, #86909c);
+
+  code {
+    padding: 1px 4px;
+    border-radius: 2px;
+    font-family: 'JetBrains Mono', monospace;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/system/oa-scene/components/payload-schema-form.vue b/apps/web-antd/src/views/system/oa-scene/components/payload-schema-form.vue
new file mode 100644
index 00000000..b90c3ded
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-scene/components/payload-schema-form.vue
@@ -0,0 +1,277 @@
+<script lang="ts" setup>
+/**
+ * 按 payload_schema 动态渲染消息内容表单（场景与定时任务共用）
+ * 支持 TemplateCard / NewsList / LinkList / GalleryPickLink(acceptTypes) 等
+ * v-model 绑定整份 payload 对象
+ */
+import { computed } from 'vue';
+
+import {
+  Input,
+  InputNumber,
+  RadioGroup,
+  Select,
+  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 ButtonList from '#/views/system/oa-scene/components/payload-lists/button-list.vue';
+import LinkList from '#/views/system/oa-scene/components/payload-lists/link-list.vue';
+import NewsList from '#/views/system/oa-scene/components/payload-lists/news-list.vue';
+import PostEditor from '#/views/system/oa-scene/components/payload-lists/post-editor.vue';
+import TemplateCardForm from '#/views/system/oa-scene/components/template-card-form.vue';
+
+export interface PayloadFieldSchema {
+  name: string;
+  label: string;
+  component: string;
+  required?: boolean;
+  props?: Record<string, any>;
+}
+
+const props = defineProps<{
+  /** payload_schema 解析后的字段列表 */
+  schema: PayloadFieldSchema[];
+  /** 当前消息 payload */
+  modelValue: Record<string, any>;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Record<string, any>): void;
+}>();
+
+const payload = computed({
+  get() {
+    return props.modelValue && typeof props.modelValue === 'object'
+      ? props.modelValue
+      : {};
+  },
+  set(v: Record<string, any>) {
+    emit('update:modelValue', v || {});
+  },
+});
+
+function getValue(fieldName: string): any {
+  return payload.value?.[fieldName];
+}
+
+function setValue(fieldName: string, value: any) {
+  payload.value = { ...payload.value, [fieldName]: value };
+}
+
+/**
+ * 解析字段 acceptTypes
+ * 兼容两套约定：场景种子常用 0=图片；xk_file_type 常用 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 [0, 1];
+}
+
+function isImageMediaField(field: PayloadFieldSchema) {
+  const types = fieldAcceptTypes(field);
+  // 仅图片类型走图片上传器
+  return types.every((t) => t === 0 || t === 1);
+}
+
+function imageUrlsOf(fieldName: string): string[] {
+  const url = getValue(fieldName);
+  return url ? [String(url)] : [];
+}
+
+function setImageUrls(fieldName: string, urls: string[]) {
+  setValue(fieldName, urls[0] || '');
+}
+
+function fileInputAccept(field: PayloadFieldSchema) {
+  const types = fieldAcceptTypes(field);
+  if (types.includes(3) || types.includes(2)) {
+    return 'audio/*,.amr,.mp3,.wav';
+  }
+  return '.pdf,.doc,.docx,.zip,.rar,.txt,application/pdf,*/*';
+}
+</script>
+
+<template>
+  <div class="payload-schema-form">
+    <template v-for="field in schema" :key="field.name">
+      <div
+        v-if="field.component === 'TemplateCardEditor'"
+        class="payload-row"
+      >
+        <label class="payload-label">{{ field.label }}</label>
+        <TemplateCardForm
+          :model-value="getValue('template_card') || {}"
+          @update:model-value="(val) => setValue('template_card', val)"
+        />
+      </div>
+
+      <div v-else-if="field.component === 'NewsList'" class="payload-row">
+        <label class="payload-label">
+          {{ field.label }}
+          <span v-if="field.required" class="required">*</span>
+        </label>
+        <NewsList
+          :model-value="getValue(field.name) || []"
+          :max-count="field.props?.maxCount || 8"
+          @update:model-value="(val) => setValue(field.name, val)"
+        />
+      </div>
+
+      <div v-else-if="field.component === 'ButtonList'" class="payload-row">
+        <label class="payload-label">
+          {{ field.label }}
+          <span v-if="field.required" class="required">*</span>
+        </label>
+        <ButtonList
+          :model-value="getValue(field.name) || []"
+          :max-count="field.props?.maxCount || 6"
+          @update:model-value="(val) => setValue(field.name, val)"
+        />
+      </div>
+
+      <div v-else-if="field.component === 'LinkList'" class="payload-row">
+        <label class="payload-label">
+          {{ field.label }}
+          <span v-if="field.required" class="required">*</span>
+        </label>
+        <LinkList
+          :model-value="getValue(field.name) || []"
+          :max-count="field.props?.maxCount || 10"
+          @update:model-value="(val) => setValue(field.name, val)"
+        />
+      </div>
+
+      <div v-else-if="field.component === 'PostEditor'" class="payload-row">
+        <label class="payload-label">
+          {{ field.label }}
+          <span v-if="field.required" class="required">*</span>
+        </label>
+        <PostEditor
+          :model-value="getValue(field.name) || {}"
+          @update:model-value="(val) => setValue(field.name, val)"
+        />
+      </div>
+
+      <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(field.name)"
+          :multiple="false"
+          :max-count="1"
+          :accept-types="fieldAcceptTypes(field)"
+          @update:model-value="(urls) => setImageUrls(field.name, urls)"
+        />
+        <UploadOssFile
+          v-else
+          :model-value="getValue(field.name) || ''"
+          :max-count="1"
+          :accept-types="fieldAcceptTypes(field)"
+          :accept="fileInputAccept(field)"
+          @update:model-value="(url) => setValue(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="getValue(field.name)"
+          :rows="field.props?.rows || 3"
+          :placeholder="field.props?.placeholder"
+          @update:value="(val) => setValue(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="getValue(field.name)"
+          :options="field.props?.options"
+          @update:value="(val) => setValue(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="getValue(field.name)"
+          :options="field.props?.options"
+          :placeholder="field.props?.placeholder"
+          style="width: 100%"
+          @update:value="(val) => setValue(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="getValue(field.name)"
+          :placeholder="field.props?.placeholder"
+          style="width: 100%"
+          @update:value="(val) => setValue(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="getValue(field.name)"
+          :placeholder="field.props?.placeholder"
+          @update:value="(val) => setValue(field.name, val)"
+        />
+      </div>
+    </template>
+    <div v-if="!schema?.length" class="empty-hint">该消息类型无需配置内容</div>
+  </div>
+</template>
+
+<style scoped>
+.payload-schema-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.payload-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.payload-label {
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.85);
+}
+.required {
+  color: #ff4d4f;
+  margin-left: 2px;
+}
+.empty-hint {
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.45);
+}
+</style>
diff --git a/apps/web-antd/src/views/system/oa-scene/components/phone-memory-picker.vue b/apps/web-antd/src/views/system/oa-scene/components/phone-memory-picker.vue
new file mode 100644
index 00000000..06dbb58d
--- /dev/null
+++ b/apps/web-antd/src/views/system/oa-scene/components/phone-memory-picker.vue
@@ -0,0 +1,310 @@
+<script lang="ts" setup>
+/**
+ * OA 测试发送手机号输入 + 记忆选择器（任务 5）
+ *
+ * 用途：场景测试发送（Step 3）每个平台一行需要输入 @ 手机号列表，
+ *       本组件把"输入 + 常用快速选择 + 后端记忆"三件事打包成一个独立组件。
+ *
+ * 特性：
+ * - 顶部 Input tags 模式，回车 / 逗号 / 空格都能添加手机号
+ * - 输入框下方展示常用手机号快速选择标签（最多 8 个）
+ *   - 前 3 个使用_count 最高的标为常用色（蓝），其余灰色
+ *   - 点击标签立即添加到选中列表（去重），并后台 record 一次（提升常用度）
+ * - 选中手机号后自动调用 record API 记忆，下次常用排序更靠前
+ * - 当 platform_code 切换时自动重新拉取记忆列表
+ * - 删除单条记忆：标签上 hover 出现 ×（用户主动清除）
+ *
+ * Props：
+ * - platformCode：必填，平台编码（按平台维度隔离记忆库）
+ * - modelValue：string[]，当前选中的手机号列表（双向绑定）
+ *
+ * 复用：
+ * - 任务 3 form-page.vue Step 3 每个启用平台一行用本组件
+ * - 后续机器人管理页测试发送也可复用
+ */
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { CloseOutlined } from '@ant-design/icons-vue';
+import { Input, Spin, Tag, message } from 'ant-design-vue';
+
+import {
+  deleteOaTestPhone,
+  getOaTestPhones,
+  recordOaTestPhone,
+  type OaTestPhoneItem,
+} from '#/views/system/oa-scene/api';
+
+interface Props {
+  /** 平台编码（按平台维度隔离记忆库） */
+  platformCode: string;
+  /** 当前选中的手机号列表 */
+  modelValue?: string[];
+  /** 占位符 */
+  placeholder?: string;
+  /** 是否禁用（例如飞书 webhook 不支持手机号 @，外层可禁用） */
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  placeholder: '输入手机号回车添加，可多选',
+  disabled: false,
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: string[]): void;
+  (e: 'recorded', phone: string): void;
+}>();
+
+/* ----------------- 内部状态 ----------------- */
+
+/** 后端拉取的记忆库列表（按 use_count DESC 已排序） */
+const memoryList = ref<OaTestPhoneItem[]>([]);
+
+/** 加载状态 */
+const loading = ref(false);
+
+/** Input tags 模式的当前值（受控） */
+const inputValue = computed<string[]>({
+  get: () => props.modelValue,
+  set: (v) => emit('update:modelValue', v),
+});
+
+/* ----------------- 数据加载 ----------------- */
+
+async function loadMemory() {
+  if (!props.platformCode) {
+    memoryList.value = [];
+    return;
+  }
+  loading.value = true;
+  try {
+    const res: any = await getOaTestPhones(props.platformCode);
+    const list = res?.data ?? res ?? [];
+    memoryList.value = Array.isArray(list) ? list : [];
+  } catch (e) {
+    console.error('phone-memory-picker loadMemory error', e);
+    memoryList.value = [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(loadMemory);
+watch(() => props.platformCode, loadMemory);
+
+/* ----------------- 标签快捷选择 ----------------- */
+
+/** 展示前 8 个常用手机号（去除当前已选） */
+const quickList = computed(() => {
+  const selected = new Set(props.modelValue.map((p) => p.trim()));
+  return memoryList.value
+    .filter((item) => item.phone && !selected.has(item.phone))
+    .slice(0, 8);
+});
+
+/** 前 3 个标为常用色 */
+function isTopItem(index: number): boolean {
+  return index < 3;
+}
+
+/** 点击快捷标签 → 加入 modelValue，并后台 record */
+async function pickFromMemory(item: OaTestPhoneItem) {
+  if (props.disabled) return;
+  const phone = item.phone.trim();
+  if (!phone) return;
+  // 去重
+  if (props.modelValue.includes(phone)) return;
+  emit('update:modelValue', [...props.modelValue, phone]);
+  // 后台 record，不阻塞 UI（失败也不影响主流程）
+  try {
+    await recordOaTestPhone({
+      platform_code: props.platformCode,
+      phone,
+      name: item.name || '',
+    });
+    emit('recorded', phone);
+    // 静默刷新（更新排序）
+    loadMemory();
+  } catch (e) {
+    console.warn('recordOaTestPhone failed', e);
+  }
+}
+
+/* ----------------- Input tags 添加手机号 ----------------- */
+
+/** 输入新值时的处理（tags 模式 antd Input 不支持，用回车手动添加） */
+function handleInputConfirm(e: Event) {
+  const target = e.target as HTMLInputElement;
+  const raw = target.value || '';
+  // 支持一次粘贴多个：逗号 / 空格 / 换行分隔
+  const phones = raw
+    .split(/[\s,，]+/)
+    .map((s) => s.trim())
+    .filter((s) => s !== '');
+  if (phones.length === 0) return;
+  // 简单校验：11 位数字；非法的提示但不阻塞合法的
+  const validPhones: string[] = [];
+  for (const p of phones) {
+    if (!/^1\d{10}$/.test(p)) {
+      message.warning(`「${p}」不是有效手机号，已忽略`);
+      continue;
+    }
+    if (!props.modelValue.includes(p)) {
+      validPhones.push(p);
+    }
+  }
+  if (validPhones.length > 0) {
+    emit('update:modelValue', [...props.modelValue, ...validPhones]);
+    // 后台批量记忆
+    validPhones.forEach((phone) => {
+      recordOaTestPhone({ platform_code: props.platformCode, phone }).catch(
+        console.warn,
+      );
+    });
+    setTimeout(loadMemory, 200);
+  }
+  // 清空输入框
+  target.value = '';
+}
+
+/* ----------------- 移除选中的手机号 ----------------- */
+
+function removePhone(phone: string) {
+  emit(
+    'update:modelValue',
+    props.modelValue.filter((p) => p !== phone),
+  );
+}
+
+/* ----------------- 删除单条记忆（用户主动清除历史） ----------------- */
+
+async function removeMemory(item: OaTestPhoneItem, e: Event) {
+  e.stopPropagation();
+  try {
+    await deleteOaTestPhone(item.id);
+    message.success('已删除');
+    memoryList.value = memoryList.value.filter((m) => m.id !== item.id);
+  } catch (e) {
+    console.error(e);
+    message.error('删除失败');
+  }
+}
+</script>
+
+<template>
+  <div class="phone-memory-picker">
+    <!-- 已选手机号标签展示（带 × 关闭） -->
+    <div v-if="modelValue.length" class="picked-tags">
+      <Tag
+        v-for="phone in modelValue"
+        :key="phone"
+        closable
+        :disabled="disabled"
+        @close="removePhone(phone)"
+      >
+        {{ phone }}
+      </Tag>
+    </div>
+
+    <!-- 输入框（回车确认 / 粘贴多个） -->
+    <Input
+      :placeholder="placeholder"
+      :disabled="disabled"
+      allow-clear
+      class="phone-input"
+      @keydown.enter="handleInputConfirm"
+      @blur="handleInputConfirm"
+    />
+
+    <!-- 常用快速选择标签 -->
+    <Spin :spinning="loading" size="small">
+      <div v-if="quickList.length" class="quick-tags">
+        <span class="quick-title">常用：</span>
+        <Tag
+          v-for="(item, i) in quickList"
+          :key="item.id"
+          :color="isTopItem(i) ? 'blue' : 'default'"
+          class="quick-tag"
+          @click="pickFromMemory(item)"
+        >
+          <span>{{ item.name ? `${item.name}（${item.phone}）` : item.phone }}</span>
+          <span class="count">·{{ item.use_count }}</span>
+          <CloseOutlined
+            v-if="!disabled"
+            class="del-icon"
+            @click="removeMemory(item, $event)"
+          />
+        </Tag>
+      </div>
+      <div v-else-if="!loading && !modelValue.length" class="empty-tip">
+        输入手机号后会自动记忆，下次快速选择
+      </div>
+    </Spin>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.phone-memory-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.picked-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.phone-input {
+  width: 100%;
+}
+
+.quick-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+}
+
+.quick-title {
+  font-size: 12px;
+  color: var(--ant-color-text-tertiary, #86909c);
+  margin-right: 4px;
+}
+
+.quick-tag {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  transition: transform 0.1s;
+
+  &:hover {
+    transform: translateY(-1px);
+  }
+
+  .count {
+    color: var(--ant-color-text-tertiary, #86909c);
+    font-size: 11px;
+  }
+
+  .del-icon {
+    font-size: 10px;
+    color: var(--ant-color-text-tertiary, #86909c);
+    margin-left: 2px;
+
+    &:hover {
+      color: var(--ant-color-error, #f5222d);
+    }
+  }
+}
+
+.empty-tip {
+  font-size: 12px;
+  color: var(--ant-color-text-tertiary, #86909c);
+  font-style: italic;
+}
+</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
index 8f768771..d8509dd9 100644
--- 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
@@ -1,14 +1,13 @@
 <script lang="ts" setup>
 /**
  * 企微应用 API 场景投递目标面板
- * 支持：选人（多选）+ 选群（多选）+ 每群独立 @员工 / @userid
- * 客户群必须配置「确认发送员工」sender_userid（add_msg_template.sender）
+ * 个人目标：从已同步的企微组织架构（xk_oa_ww_user）选成员，存 userid
+ * 群目标：多选群 + 客户群确认发送人 + 每群 @
  */
 import { computed, onMounted, ref, watch } from 'vue';
 
 import {
   Button,
-  Checkbox,
   Collapse,
   CollapsePanel,
   Select,
@@ -16,12 +15,16 @@ import {
   message,
 } from 'ant-design-vue';
 
+import UserTagSelect from '#/components/form/components/user-tag-select.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;
+  /** 个人目标：企微 userid（优先） */
+  userid?: string;
+  /** 兼容旧数据 / 匹配到系统员工时回填 */
   admin_id?: number;
   chat_id?: number;
   at_admin_ids?: number[];
@@ -32,7 +35,8 @@ export interface SceneTargetItem {
 
 const props = defineProps<{
   modelValue: SceneTargetItem[];
-  adminList: Array<{ id: number; name: string }>;
+  /** 系统员工列表（群 @ 手机号用） */
+  adminList: Array<{ id: number; name: string; avatar?: string }>;
   platformCode?: string;
 }>();
 
@@ -52,16 +56,22 @@ const chatOptions = ref<
   }>
 >([]);
 
-/** 企微组织架构员工（确认发送人 / 可作参考） */
+/** 企微组织架构成员：选项 + userid→matched_admin_id */
 const wwUserOptions = ref<{ label: string; value: string }[]>([]);
+const wwUserAdminMap = ref<Record<string, number>>({});
+const wwUsersLoaded = ref(false);
 
-const personAdminIds = computed({
+/**
+ * 个人目标选中的 userid 列表（与 modelValue 双向同步）
+ */
+const personUserids = computed({
   get() {
     return props.modelValue
-      .filter((t) => t.target_type === 1 && (t.admin_id || 0) > 0)
-      .map((t) => Number(t.admin_id));
+      .filter((t) => t.target_type === 1)
+      .map((t) => String(t.userid || '').trim())
+      .filter((u) => u !== '');
   },
-  set(ids: number[]) {
+  set(ids: string[]) {
     rebuild(ids, groupChatIds.value);
   },
 });
@@ -73,10 +83,22 @@ const groupChatIds = computed({
       .map((t) => Number(t.chat_id));
   },
   set(ids: number[]) {
-    rebuild(personAdminIds.value, ids);
+    rebuild(personUserids.value, ids);
   },
 });
 
+/** 旧数据仅有 admin_id、无 userid 时的提示标记 */
+const orphanPersonAdminIds = computed(() =>
+  props.modelValue
+    .filter(
+      (t) =>
+        t.target_type === 1 &&
+        !String(t.userid || '').trim() &&
+        (t.admin_id || 0) > 0,
+    )
+    .map((t) => Number(t.admin_id)),
+);
+
 /** 按 chat_id 取群目标行（含 @ / 确认人配置） */
 function groupTargetOf(chatId: number): SceneTargetItem {
   return (
@@ -98,15 +120,22 @@ function chatMeta(chatId: number) {
 }
 
 /**
- * 重建 targets：保留已有群的 @ / sender 配置，新增群默认空
+ * 重建 targets：个人按 userid；保留已有群的 @ / sender
  */
-function rebuild(adminIds: number[], chatIds: number[]) {
+function rebuild(userids: string[], chatIds: number[]) {
   const next: SceneTargetItem[] = [];
-  for (const id of adminIds) {
+  const uniq = [...new Set(userids.map((u) => String(u).trim()).filter(Boolean))];
+  for (const userid of uniq) {
+    const matchedAdminId = wwUserAdminMap.value[userid] || 0;
+    // 保留详情回显时已有的 admin_id（若组织列表尚未匹配到）
+    const prev = props.modelValue.find(
+      (t) => t.target_type === 1 && String(t.userid || '') === userid,
+    );
     next.push({
       target_type: 1,
       platform_code: platformCode.value,
-      admin_id: id,
+      userid,
+      admin_id: matchedAdminId || prev?.admin_id || 0,
     });
   }
   for (const chatId of chatIds) {
@@ -186,17 +215,29 @@ async function loadWwUsers() {
     const userRes = await getOaWwUserList({
       platform_code: platformCode.value,
       page: 1,
-      pageSize: 200,
+      pageSize: 500,
     });
     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),
-    }));
+    const adminMap: Record<string, number> = {};
+    wwUserOptions.value = items.map((u: any) => {
+      const userid = String(u.userid || '');
+      const matched = Number(u.matched_admin_id || 0);
+      if (userid && matched > 0) {
+        adminMap[userid] = matched;
+      }
+      return {
+        label: u.name ? `${u.name}（${userid}）` : userid,
+        value: userid,
+      };
+    });
+    wwUserAdminMap.value = adminMap;
+    wwUsersLoaded.value = true;
   } catch (e) {
     console.error(e);
     wwUserOptions.value = [];
+    wwUserAdminMap.value = {};
+    wwUsersLoaded.value = true;
   }
 }
 
@@ -208,6 +249,24 @@ watch(platformCode, () => {
   loadChats();
   loadWwUsers();
 });
+
+/** 系统员工 → UserTagSelect 选项（群 @ 手机号） */
+const adminTagOptions = computed(() =>
+  props.adminList.map((a) => ({
+    value: a.id,
+    label: a.name,
+    avatar: a.avatar || '',
+  })),
+);
+
+/** 群聊 → UserTagSelect 选项 */
+const chatTagOptions = computed(() =>
+  chatOptions.value.map((c) => ({
+    value: c.id,
+    label: `${c.name}${c.chat_kind === 2 ? '（客户群·需确认）' : '（应用群）'}`,
+    avatar: '',
+  })),
+);
 </script>
 
 <template>
@@ -216,39 +275,49 @@ watch(platformCode, () => {
       同一场景可同时选人、多群；客户群发送为群发任务，需指定确认员工并在企微客户端确认（非实时）
     </div>
 
-    <!-- 发送给个人 -->
+    <!-- 发送给个人：企微组织架构成员（userid） -->
     <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"
+        show-search
         allow-clear
         class="w-full"
-        placeholder="选择群聊（可多选）"
-        :options="
-          chatOptions.map((c) => ({
-            label: `${c.name}${c.chat_kind === 2 ? '（客户群·需确认）' : '（应用群）'}`,
-            value: c.id,
-          }))
+        placeholder="从企微组织架构选择成员（可多选）"
+        :value="personUserids"
+        :options="wwUserOptions"
+        :filter-option="
+          (input: string, option: any) =>
+            String(option?.label || '')
+              .toLowerCase()
+              .includes(input.toLowerCase())
         "
+        :max-tag-count="6"
+        @change="(v: string[]) => (personUserids = v || [])"
+      />
+      <div
+        v-if="wwUsersLoaded && wwUserOptions.length === 0"
+        class="mt-1 text-xs text-orange-500"
+      >
+        请先在 OA 群聊 → 员工 Tab 同步组织架构
+      </div>
+      <div
+        v-if="orphanPersonAdminIds.length > 0"
+        class="mt-1 text-xs text-orange-500"
+      >
+        存在仅绑定系统员工、未选企微成员的旧目标（admin_id:
+        {{ orphanPersonAdminIds.join('、') }}），请重新从组织架构选择成员
+      </div>
+    </div>
+
+    <!-- 发送给群：UserTagSelect 多选 -->
+    <div class="mb-2">
+      <div class="section-title">发送给群</div>
+      <UserTagSelect
+        v-model="groupChatIds"
+        :options="chatTagOptions"
+        :max-count="99"
+        placeholder="选择群聊（可多选）"
       />
     </div>
 
@@ -304,29 +373,35 @@ watch(platformCode, () => {
         <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"
+          <UserTagSelect
+            :model-value="groupTargetOf(chatId).at_admin_ids || []"
+            :options="adminTagOptions"
             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 })
+            @update:model-value="
+              (v: (string | number)[]) =>
+                updateGroupAt(chatId, {
+                  at_admin_ids: v.map((n) => Number(n)).filter((n) => n > 0),
+                })
             "
           />
         </div>
         <div>
           <div class="mb-1 text-xs">@ 群成员 userid</div>
           <Select
-            mode="tags"
+            mode="multiple"
+            show-search
             class="w-full"
-            placeholder="输入 userid 回车添加"
-            :token-separators="[',', ' ']"
+            placeholder="从组织架构选择或输入 userid"
+            :options="wwUserOptions"
+            :filter-option="
+              (input: string, option: any) =>
+                String(option?.label || '')
+                  .toLowerCase()
+                  .includes(input.toLowerCase())
+            "
             :value="groupTargetOf(chatId).at_userids || []"
             @change="
-              (v: string[]) => updateGroupAt(chatId, { at_userids: v })
+              (v: string[]) => updateGroupAt(chatId, { at_userids: v || [] })
             "
           />
         </div>
@@ -350,6 +425,6 @@ watch(platformCode, () => {
   margin-bottom: 8px;
   font-size: 13px;
   font-weight: 600;
-  color: #1d2129;
+  color: var(--ant-color-text, #1d2129);
 }
 </style>
diff --git a/apps/web-antd/src/views/system/oa-scene/components/template-card-form.vue b/apps/web-antd/src/views/system/oa-scene/components/template-card-form.vue
index 4a7e1fa1..53f47f38 100644
--- a/apps/web-antd/src/views/system/oa-scene/components/template-card-form.vue
+++ b/apps/web-antd/src/views/system/oa-scene/components/template-card-form.vue
@@ -113,7 +113,7 @@ const newsOnlyFields: FixedField[] = [
     name: 'card_image.url',
     label: '卡片图片 URL',
     type: 'image',
-    acceptTypes: [1],
+    acceptTypes: [0],
     placeholder: '图文展示卡片的主图',
   },
   {
@@ -302,11 +302,11 @@ function handleEditorUpdate(val: Record<string, any>) {
   margin-bottom: 12px;
   padding: 8px 12px;
   border-radius: 4px;
-  background: #f2f7ff;
+  background: var(--ant-color-primary-bg, #f2f7ff);
   font-size: 13px;
 
   label {
-    color: #4e5969;
+    color: var(--ant-color-text-secondary, #4e5969);
     font-weight: 500;
   }
 }
diff --git a/apps/web-antd/src/views/system/oa-scene/config/form.ts b/apps/web-antd/src/views/system/oa-scene/config/form.ts
index 31659c33..e1986dc0 100644
--- a/apps/web-antd/src/views/system/oa-scene/config/form.ts
+++ b/apps/web-antd/src/views/system/oa-scene/config/form.ts
@@ -48,6 +48,33 @@ export const modalFormProps: VbenFormProps = {
       label: '场景名称',
       rules: 'required',
     },
+    // 启用平台（任务 2）：Checkbox.Group，options 由 form-page 异步注入（从后端平台列表）
+    {
+      component: 'CheckboxGroup',
+      fieldName: 'scene_platforms',
+      label: '启用平台',
+      help: '本场景启用的平台（控制 Step 2 平台 Tab 展示范围）；不勾选则默认全启用',
+      componentProps: {
+        options: [],
+      },
+      formItemClass: 'col-span-12',
+    },
+    // 字段绑定模式（任务 2）：开启后 Step 2 每个非空 payload 字段下出现「业务字段名」输入框，
+    // 业务方 dispatch 时按字段名覆盖对应 payload 路径
+    {
+      component: 'RadioGroup',
+      fieldName: 'field_binding_mode',
+      label: '字段绑定模式',
+      defaultValue: 0,
+      help: '0=固定内容（每次推送都一样）；1=可替换内容（业务方 dispatch 时按字段名覆盖）',
+      componentProps: {
+        options: [
+          { label: '固定内容', value: 0 },
+          { label: '可替换内容', value: 1 },
+        ],
+      },
+      formItemClass: 'col-span-12',
+    },
     // 消息类型不再放在基础表单中：每个平台支持的消息类型不同，放在弹窗下方的平台 Tab 内独立配置
     {
       component: 'RadioGroup',
diff --git a/apps/web-antd/src/views/system/oa-scene/config/search.ts b/apps/web-antd/src/views/system/oa-scene/config/search.ts
index 49844ede..a9dffb3b 100644
--- a/apps/web-antd/src/views/system/oa-scene/config/search.ts
+++ b/apps/web-antd/src/views/system/oa-scene/config/search.ts
@@ -29,8 +29,8 @@ export const formOptions: VbenFormProps = {
       componentProps: {
         placeholder: '选择状态',
         options: [
-          { label: '启用', value: 1 },
-          { label: '禁用', value: 0 },
+          { label: '启用', value: '1' },
+          { label: '禁用', value: '0' },
         ],
       },
       defaultValue: '',
diff --git a/apps/web-antd/src/views/system/oa-scene/config/table.ts b/apps/web-antd/src/views/system/oa-scene/config/table.ts
index 63d1d12d..3e5fd73d 100644
--- a/apps/web-antd/src/views/system/oa-scene/config/table.ts
+++ b/apps/web-antd/src/views/system/oa-scene/config/table.ts
@@ -6,7 +6,15 @@ interface RowType {
   id: number;
   scene_code: string;
   scene_name: string;
-  message_type: string;
+  scene_platforms: string[];
+  platform_summaries: Array<{
+    platform_code: string;
+    platform_name: string;
+    icon: string;
+    message_type: string;
+    channel: string;
+  }>;
+  message_config: Record<string, { message_type?: string; payload?: any }>;
   description: string;
   status: number;
   created_at: string;
@@ -14,6 +22,7 @@ interface RowType {
 
 /**
  * 场景列表表格配置
+ * 启用平台 / 发送方式由 platform_summaries 驱动，点击平台 Tag 可预览消息
  */
 export const gridOptions: VxeGridProps<RowType> = {
   checkboxConfig: {
@@ -29,13 +38,38 @@ export const gridOptions: VxeGridProps<RowType> = {
   columns: [
     { type: 'checkbox', width: 60 },
     { field: 'id', align: 'left', title: 'ID', width: 80 },
-    { field: 'scene_code', align: 'left', title: '场景编码', width: 180 },
-    { field: 'scene_name', align: 'left', title: '场景名称' },
-    { field: 'message_type', align: 'left', title: '消息类型', width: 120, slots: { default: 'message_type' } },
-    { field: 'description', align: 'left', title: '说明' },
-    { field: 'status', align: 'left', title: '状态', width: 100, slots: { default: 'status' } },
+    { field: 'scene_code', align: 'left', title: '场景编码', width: 160 },
+    { field: 'scene_name', align: 'left', title: '场景名称', minWidth: 140 },
+    {
+      field: 'platforms',
+      align: 'left',
+      title: '启用平台',
+      minWidth: 200,
+      slots: { default: 'platforms' },
+    },
+    {
+      field: 'send_mode',
+      align: 'left',
+      title: '发送方式',
+      minWidth: 220,
+      slots: { default: 'send_mode' },
+    },
+    { field: 'description', align: 'left', title: '说明', minWidth: 120 },
+    {
+      field: 'status',
+      align: 'left',
+      title: '状态',
+      width: 100,
+      slots: { default: 'status' },
+    },
     { field: 'created_at', align: 'left', title: '创建时间', width: 180 },
-    { type: 'html', title: '操作', slots: { default: 'action' }, width: 200, fixed: 'right' },
+    {
+      type: 'html',
+      title: '操作',
+      slots: { default: 'action' },
+      width: 200,
+      fixed: 'right',
+    },
   ],
   keepSource: true,
   pagerConfig: {},
diff --git a/apps/web-antd/src/views/system/oa-scene/index.vue b/apps/web-antd/src/views/system/oa-scene/index.vue
index bf599358..c364448d 100644
--- a/apps/web-antd/src/views/system/oa-scene/index.vue
+++ b/apps/web-antd/src/views/system/oa-scene/index.vue
@@ -1,9 +1,14 @@
 <script lang="ts" setup>
+/**
+ * OA 通知场景管理列表页
+ * 新增/编辑走内页表单；列表展示启用平台与发送方式，点击平台 Tag 预览消息
+ */
 import type { VxeGridListeners } from '#/adapter/vxe-table';
 
-import { ref } from 'vue';
+import { onDeactivated, ref } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
 
-import { Page } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';
 
 import { message, Tag } from 'ant-design-vue';
 
@@ -11,14 +16,11 @@ import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { TableAction } from '#/components/table-action';
 
 import { deleteOaScene, getOaSceneInfo } from './api';
+import MsgPreviewModal from './components/msg-preview-modal.vue';
 import SceneFormPage from './components/form-page.vue';
 import { formOptions } from './config/search';
 import { gridOptions } from './config/table';
 
-/**
- * OA 通知场景管理列表页
- * 新增/编辑走内页表单（v-if 挂载 form-page），列表用 v-show 保持 Grid 状态
- */
 defineOptions({ name: 'OaScene' });
 
 const showForm = ref(false);
@@ -43,8 +45,35 @@ const [Grid, gridApi] = useVbenVxeGrid({
   gridEvents,
 });
 
+/** 列表点击平台 Tag → 消息预览弹窗 */
+const [PreviewModalComponent, previewModalApi] = useVbenModal({
+  connectedComponent: MsgPreviewModal,
+});
+
 /**
- * 打开新增/编辑内页：编辑必须拉详情（列表无 message_config 等）
+ * 打开平台消息预览：取该行 message_config 中对应平台的类型与 payload
+ */
+function openPlatformPreview(row: any, summary: any) {
+  const code = String(summary?.platform_code || '');
+  const config = row?.message_config?.[code] || {};
+  const messageType = String(
+    config.message_type || summary?.message_type || '',
+  );
+  if (!messageType) {
+    message.warning('该平台暂无消息配置');
+    return;
+  }
+  previewModalApi.setData({
+    platformName: summary?.platform_name || code,
+    platformCode: code,
+    messageType,
+    payload: config.payload || {},
+  });
+  previewModalApi.open();
+}
+
+/**
+ * 打开新增/编辑内页：编辑必须拉详情
  */
 async function openForm(row: any = {}, isUpdate = false) {
   let values: any = {};
@@ -70,6 +99,19 @@ function onFormSaved() {
   gridApi.query();
 }
 
+/**
+ * 离开路由或 KeepAlive 失活时回到列表态
+ * 避免缓存卡在表单页，以及 Transition 卸载时 DOM 节点悬空
+ */
+function resetFormView() {
+  showForm.value = false;
+}
+
+onDeactivated(resetFormView);
+onBeforeRouteLeave(() => {
+  resetFormView();
+});
+
 /**
  * 删除场景（支持单个和批量）
  */
@@ -87,78 +129,129 @@ const deleteApi = (row: any) => {
 };
 </script>
 
+<!-- 单根节点：避免 KeepAlive + Transition 对多根组件报错导致切走空白 -->
 <template>
-  <div v-show="!showForm">
-    <Page auto-content-height title="OA 通知场景管理">
-      <Grid>
-        <template #toolbar-buttons>
-          <TableAction
-            :actions="[
-              {
-                label: '新增',
-                type: 'primary',
-                icon: 'ant-design:plus-outlined',
-                onClick: openForm.bind(null),
-              },
-            ]"
-            :drop-down-actions="[
-              {
-                label: '批量删除',
-                icon: 'ant-design:delete-outlined',
-                ifShow: hasTopTableDropDownActions,
-                popConfirm: {
-                  title: '确定删除吗？',
-                  confirm: deleteApi.bind(null, false),
+  <div class="oa-scene-page">
+    <div v-show="!showForm">
+      <Page auto-content-height title="OA 通知场景管理">
+        <Grid>
+          <template #toolbar-buttons>
+            <TableAction
+              :actions="[
+                {
+                  label: '新增',
+                  type: 'primary',
+                  icon: 'ant-design:plus-outlined',
+                  onClick: openForm.bind(null),
                 },
-              },
-            ]"
-          />
-        </template>
-        <template #message_type="{ row }">
-          <Tag
-            :color="row.message_type === 'markdown' ? 'warning' : 'processing'"
-          >
-            {{ row.message_type === 'markdown' ? 'Markdown' : '文本' }}
-          </Tag>
-        </template>
-        <template #status="{ row }">
-          <Tag :color="row.status === 1 ? 'success' : 'default'">
-            {{ row.status === 1 ? '启用' : '禁用' }}
-          </Tag>
-        </template>
-        <template #toolbar-tools></template>
-        <template #action="{ row }">
-          <TableAction
-            :actions="[
-              {
-                label: '编辑',
-                type: 'link',
-                icon: 'uil:edit',
-                size: 'small',
-                onClick: openForm.bind(null, row, true),
-              },
-              {
-                label: '删除',
-                type: 'link',
-                icon: 'ant-design:delete-outlined',
-                size: 'small',
-                popConfirm: {
-                  title: '确定删除吗？',
-                  confirm: deleteApi.bind(null, row.id),
+              ]"
+              :drop-down-actions="[
+                {
+                  label: '批量删除',
+                  icon: 'ant-design:delete-outlined',
+                  ifShow: hasTopTableDropDownActions,
+                  popConfirm: {
+                    title: '确定删除吗？',
+                    confirm: deleteApi.bind(null, false),
+                  },
                 },
-              },
-            ]"
-          />
-        </template>
-      </Grid>
-    </Page>
-  </div>
+              ]"
+            />
+          </template>
 
-  <SceneFormPage
-    v-if="showForm"
-    :values="formValues"
-    :is-update="formIsUpdate"
-    @back="onFormBack"
-    @saved="onFormSaved"
-  />
+          <!-- 启用平台：点击名称标签可预览该平台消息 -->
+          <template #platforms="{ row }">
+            <div
+              v-if="(row.platform_summaries || []).length"
+              class="tag-wrap"
+            >
+              <Tag
+                v-for="s in row.platform_summaries"
+                :key="s.platform_code"
+                color="processing"
+                class="platform-tag"
+                @click="openPlatformPreview(row, s)"
+              >
+                {{ s.platform_name || s.platform_code }}
+              </Tag>
+            </div>
+            <span v-else class="text-gray-400">未启用</span>
+          </template>
+
+          <!-- 发送方式：通道 · 消息类型 -->
+          <template #send_mode="{ row }">
+            <div
+              v-if="(row.platform_summaries || []).length"
+              class="tag-wrap"
+            >
+              <Tag
+                v-for="s in row.platform_summaries"
+                :key="`mode-${s.platform_code}`"
+                :color="s.channel === '应用API' ? 'orange' : 'blue'"
+              >
+                {{ s.channel
+                }}{{ s.message_type ? ` · ${s.message_type}` : '' }}
+              </Tag>
+            </div>
+            <span v-else class="text-gray-400">-</span>
+          </template>
+
+          <template #status="{ row }">
+            <Tag :color="row.status === 1 ? 'success' : 'default'">
+              {{ row.status === 1 ? '启用' : '禁用' }}
+            </Tag>
+          </template>
+          <template #toolbar-tools></template>
+          <template #action="{ row }">
+            <TableAction
+              :actions="[
+                {
+                  label: '编辑',
+                  type: 'link',
+                  icon: 'uil:edit',
+                  size: 'small',
+                  onClick: openForm.bind(null, row, true),
+                },
+                {
+                  label: '删除',
+                  type: 'link',
+                  icon: 'ant-design:delete-outlined',
+                  size: 'small',
+                  popConfirm: {
+                    title: '确定删除吗？',
+                    confirm: deleteApi.bind(null, row.id),
+                  },
+                },
+              ]"
+            />
+          </template>
+        </Grid>
+        <PreviewModalComponent />
+      </Page>
+    </div>
+
+    <SceneFormPage
+      v-if="showForm"
+      :values="formValues"
+      :is-update="formIsUpdate"
+      @back="onFormBack"
+      @saved="onFormSaved"
+    />
+  </div>
 </template>
+
+<style scoped>
+.tag-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.platform-tag {
+  cursor: pointer;
+}
+
+.platform-tag:hover {
+  opacity: 0.85;
+}
+</style>