feat(wxcp): 通知前端支持图片/视频/Markdown/多图文与成员预览

liu

3 天以前 2b695bfabdceccb0ee19c12c8e655bd7f47a6e2f

 src/views/wxcp/notice/data.ts

@@ -7,6 +7,29 @@
/** 表单类型 */
export type NoticeFormType = 'create' | 'update' | 'detail';

/** 通知模板类型 */
export const NOTICE_TYPE = {
  TEXT: 1,
  CARD: 2,
  FILE: 3,
  NEWS: 4,
  IMAGE: 5,
  VIDEO: 6,
  MARKDOWN: 7,
  MULTI_NEWS: 8,
} as const;

export const NOTICE_TYPE_OPTIONS = [
  { label: '纯文本通知', value: NOTICE_TYPE.TEXT },
  { label: '图文卡片（填报/链接）', value: NOTICE_TYPE.CARD },
  { label: '文件通知（上传文件推送）', value: NOTICE_TYPE.FILE },
  { label: '图片通知（上传图片推送）', value: NOTICE_TYPE.IMAGE },
  { label: '视频通知（上传视频推送）', value: NOTICE_TYPE.VIDEO },
  { label: 'Markdown 通知（富文本排版）', value: NOTICE_TYPE.MARKDOWN },
  { label: '多图文消息（多条链接图文）', value: NOTICE_TYPE.MULTI_NEWS },
  { label: '图文消息（标题+摘要+封面）', value: NOTICE_TYPE.NEWS },
];

/** 通知表单 */
export function useNoticeFormSchema(formType: NoticeFormType): VbenFormSchema[] {
  const readonly = formType === 'detail';
@@ -17,24 +40,151 @@
      dependencies: { triggerFields: [''], show: () => false },
    },
    {
      fieldName: 'noticeType',
      label: '通知模板',
      component: 'Select',
      componentProps: {
        options: NOTICE_TYPE_OPTIONS,
        placeholder: '请选择通知模板',
        disabled: readonly,
      },
      rules: 'required',
    },
    {
      fieldName: 'title',
      label: '通知标题',
      component: 'Input',
      componentProps: { placeholder: '请输入通知标题', disabled: readonly },
      rules: 'required',
      formItemClass: 'col-span-2',
    },
    {
      fieldName: 'content',
      label: '通知正文',
      component: 'Textarea',
      componentProps: {
        rows: 8,
        placeholder: '请输入通知正文',
        rows: 6,
        placeholder: '纯文本通知必填；其它模板可作为补充说明',
        disabled: readonly,
      },
      rules: 'required',
      help: '推送时超过 600 字会自动截断，建议把关键信息放前面',
      help: '纯文本推送超过 600 字会自动截断；Markdown 模板支持 # 标题、**加粗**、- 列表、> 引用，正文需控制在 2048 字节内',
      formItemClass: 'col-span-2',
    },
    {
      fieldName: 'summary',
      label: '摘要',
      component: 'Textarea',
      componentProps: {
        rows: 3,
        placeholder: '图文卡片/图文消息展示的摘要',
        disabled: readonly,
      },
      dependencies: {
        triggerFields: ['noticeType'],
        show: (values) =>
          values.noticeType === NOTICE_TYPE.CARD ||
          values.noticeType === NOTICE_TYPE.NEWS,
      },
      formItemClass: 'col-span-2',
    },
    {
      fieldName: 'linkUrl',
      label: '跳转链接',
      component: 'Input',
      componentProps: {
        placeholder: '填报页面或详情页地址，如 https://...',
        disabled: readonly,
      },
      dependencies: {
        triggerFields: ['noticeType'],
        show: (values) =>
          values.noticeType === NOTICE_TYPE.CARD ||
          values.noticeType === NOTICE_TYPE.NEWS,
      },
      formItemClass: 'col-span-2',
    },
    {
      fieldName: 'linkBtnText',
      label: '按钮文案',
      component: 'Input',
      componentProps: {
        placeholder: '如：去填报 / 查看详情',
        disabled: readonly,
      },
      dependencies: {
        triggerFields: ['noticeType'],
        show: (values) => values.noticeType === NOTICE_TYPE.CARD,
      },
    },
    {
      fieldName: 'coverUrl',
      label: '封面图地址',
      component: 'Input',
      componentProps: {
        placeholder: '图文消息封面图地址（选填）',
        disabled: readonly,
      },
      dependencies: {
        triggerFields: ['noticeType'],
        show: (values) => values.noticeType === NOTICE_TYPE.NEWS,
      },
      formItemClass: 'col-span-2',
    },
    {
      // 图片通知：推送时逐张发送图片消息，最多 9 张
      fieldName: 'imageBlobIds',
      label: '推送图片',
      component: 'ImageUpload',
      componentProps: {
        valueKey: 'id',
        resultField: 'id',
        maxNumber: 9,
        multiple: true,
        disabled: readonly,
      },
      dependencies: {
        triggerFields: ['noticeType'],
        show: (values) => values.noticeType === NOTICE_TYPE.IMAGE,
      },
      help: '推送时逐张发送图片消息，单张不超过 10MB，最多 9 张；推送后附「查看全部图片」卡片，成员可在页面内放大查看',
      formItemClass: 'col-span-2',
    },
    {
      // 附件通知：推送时逐个发文件消息，接收人可直接下载
      fieldName: 'fileBlobIds',
      label: '推送附件',
      component: 'FileUpload',
      componentProps: {
        valueKey: 'id',
        maxNumber: 5,
        multiple: true,
        showDescription: !readonly,
        disabled: readonly,
      },
      dependencies: {
        triggerFields: ['noticeType'],
        show: (values) => values.noticeType === NOTICE_TYPE.FILE,
      },
      help: '推送时逐个发送文件消息，单个不超过 20MB，最多 5 个；推送后附「查看全部附件」卡片',
      formItemClass: 'col-span-2',
    },
    {
      // 视频通知：上传 1 个视频，推送时发送视频消息
      fieldName: 'videoBlobIds',
      label: '推送视频',
      component: 'FileUpload',
      componentProps: {
        valueKey: 'id',
        maxNumber: 1,
        multiple: false,
        accept: ['mp4', 'mov', 'm4v'],
        showDescription: !readonly,
        disabled: readonly,
      },
      dependencies: {
        triggerFields: ['noticeType'],
        show: (values) => values.noticeType === NOTICE_TYPE.VIDEO,
      },
      help: '推送时发送视频消息，建议使用 mp4，单个不超过 10MB；推送后附「查看通知详情」卡片，成员可全屏播放',
      formItemClass: 'col-span-2',
    },
    {
@@ -83,6 +233,11 @@
export function useNoticeGridColumns(): VxeTableGridOptions<WxCpNoticeApi.Notice>['columns'] {
  return [
    {
      field: 'noticeTypeName',
      title: '模板',
      width: 150,
    },
    {
      field: 'title',
      title: '通知标题',
      minWidth: 220,