.

src/components/ExtendContent/List.jsx

+import { useEffect, useState, forwardRef, useImperativeHandle, useRef } from "react";
+import { Table, Space, Button, Popconfirm } from 'antd';
+import { getList, remove } from '@/services/extendContent';
+
+export default forwardRef((props, ref) => {
+  const { targetType, targetId, onEdit } = props;
+
+  const [loading, setLoading] = useState(false)
+  const [list, setList] = useState([])
+  const refs = useRef();
+
+
+  const tableList = () => {
+    setLoading(true)
+    getList({
+      pageSize: 9999,
+      targetId,
+      targetType,
+    }).then((res) => {
+      setList(res.records || [])
+      setLoading(false)
+    }).catch(() => setLoading(false))
+  }
+
+  refs.current = tableList
+
+
+
+  // 父组件调用 updateList 来修改 list
+  useImperativeHandle(ref, () => ({
+    reload: refs.current,
+    setLoading,
+  }))
+
+  const handleEdit = (record) => {
+    onEdit(record)
+
+  }
+  //删除
+  const handleDelete = (record) => {
+    setLoading(true)
+    remove(record.extId).then(() => {
+      setList(list.filter(x => x.extId !== record.extId))
+      setLoading(false)
+      // refs.current.reload();
+
+    }).catch(() => setLoading(false))
+  }
+
+  const columns = [
+    {
+      title: '序号',
+      key: 'index',
+      dataIndex: 'index',
+      render: (t, record, index) => `${index + 1}`
+    },
+    {
+      title: '权重',
+      key: 'sort',
+      dataIndex: 'sort',
+      render: (t, record) => `${record.sort}`
+    },
+    {
+      title: '内容',
+      key: 'content',
+      dataIndex: 'content',
+      ellipsis: true,
+      render: (t, record) => {
+        if (record.contentType === 'text') return t;
+        if (record.contentType === 'image') {
+          return <img style={{ width: '110px' }} src={t} alt="" />
+        }
+        if (record.contentType === 'video') {
+          return <video style={{ width: '110px' }} src={t} />
+        }
+      }
+    },
+    {
+      title: '操作',
+      key: 'option',
+      render: (_, record) => {
+        return (
+          <Space>
+            <Button type="link" onClick={() => handleEdit(record)}>编辑</Button>
+            {/* <Button type="link" onClick={() => handleEdit(record)}>插入</Button> */}
+            <Popconfirm title="确定进行当前操作 ?" onConfirm={() => handleDelete(record)}>
+              <Button type="link">删除</Button>
+            </Popconfirm>
+          </Space>
+        )
+      }
+    },
+  ]
+
+
+  useEffect(() => {
+    if (targetType) {
+      refs.current()
+    }
+  }, [targetType])
+  return (
+
+    <Table loading={loading} rowKey="extId" columns={columns} dataSource={list} pagination={false} />
+  )
+})

src/components/ExtendContent/ModalButton.jsx

+import { useEffect, useImperativeHandle, useState, forwardRef } from "react"
+import { Button } from 'antd'
+import ModalText from './ModalText'
+import ModalImage from './Modalimage'
+import ModalVideo from './ModalVideo'
+import { parseGeoJson } from "echarts"
+
+export default forwardRef((props, ref) => {
+  const { contentType, record, onChange, onClose, ...btnProps } = props
+
+  const [visible, setVisible] = useState(false)
+  const [content, setContent] = useState()
+  const [sortVale, setSortVale] = useState()
+
+
+  const handleClose = () => {
+    setContent()
+    setSortVale()
+    setVisible(false)
+    onClose()
+  }
+
+  const handleChange = (val, e) => {
+    onChange({
+      ...record || {},
+      content: val,
+      sort: e - 0,
+      contentType,
+    }, handleClose)
+  }
+
+  useImperativeHandle(ref, () => ({
+    toggle: () => {
+      setVisible(!visible)
+    }
+  }))
+
+  useEffect(() => {
+    setContent(record?.content)
+    setSortVale(record?.sort)
+  }, [record, visible])
+
+
+
+  return (
+    <>
+      <Button onClick={() => setVisible(true)} {...btnProps}>{props.children}</Button>
+      {contentType === 'text' && <ModalText sortVale={sortVale} visible={visible} value={content} onChange={handleChange} onCancel={handleClose} />}
+      {contentType === 'image' && <ModalImage sortVale={sortVale} visible={visible} value={content} onChange={handleChange} onCancel={handleClose} />}
+      {contentType === 'video' && <ModalVideo sortVale={sortVale} visible={visible} value={content} onChange={handleChange} onCancel={handleClose} />}
+    </>
+  )
+})

src/components/ExtendContent/ModalText.jsx

+import { Input, Modal, Form, Button } from 'antd'
+import { useEffect, useState } from 'react'
+
+
+const FormItem = Form.Item
+export default (props) => {
+  const { value, visible, onChange, onCancel, sortVale } = props
+
+
+  const [text, setText] = useState()
+  const [sort, setSort] = useState()
+
+  const Submit = (e) => {
+    setSort(e.target.value)
+  }
+
+  const handleChange = (e) => {
+    setText(e.target.value)
+  }
+
+
+  const handleOk = () => {
+    onChange(text, sort)
+  }
+
+
+  useEffect(() => {
+    setText(value)
+    setSort(sortVale)
+
+  }, [value, visible, sortVale])
+
+  return (
+    <Modal title="请输入文字" visible={visible} onOk={handleOk} onCancel={onCancel} destroyOnClose={true}>
+      <Form onFinish={Submit} >
+        <FormItem label="内容" rules={[{ required: true, message: '请输入内容' }]} >
+          <Input.TextArea value={text} onChange={handleChange} />
+        </FormItem>
+        <FormItem label="权重" rules={[{ required: true, message: '请设置权重' }]}>
+          <Input min={0} placeholder="请输入权重" type='number' value={sort} onChange={Submit} style={{ width: '350px' }} />
+        </FormItem>
+      </Form>
+
+
+    </Modal>
+  )
+}

src/components/ExtendContent/ModalVideo.jsx

+
+import { useEffect, useState } from 'react'
+import { UploadVideo } from '@/components/Upload'
+import { Input, Modal, Form, Button } from 'antd'
+
+
+const FormItem = Form.Item
+export default (props) => {
+  const { value, visible, onChange, onCancel, sortVale } = props
+
+  const [video, setVideo] = useState()
+  const [sort, setSort] = useState()
+
+  const Submit = (e) => {
+    setSort(e.target.value)
+  }
+  const handleOk = () => {
+    onChange(video, sort)
+  }
+  useEffect(() => {
+    setVideo(value)
+    setSort(sortVale)
+
+  }, [value, visible, sortVale])
+  const setld=()=>{
+
+  }
+  return (
+    <Modal title="请上传视频" visible={visible} onOk={handleOk} onCancel={onCancel} destroyOnClose={true}>
+
+      <Form onFinish={Submit} >
+        <FormItem label="内容" rules={[{ required: true, message: '请输入内容' }]} >
+          <UploadVideo value={video} onChange={setVideo}  poster='' setPoster={setld} setld={setld}/>
+
+        </FormItem>
+        <FormItem label="权重" rules={[{ required: true, message: '请设置权重' }]}>
+          <Input min={0} placeholder="请输入权重" type='number' value={sort} onChange={Submit} style={{ width: '350px' }} />
+        </FormItem>
+      </Form>
+    </Modal>
+
+  )
+}

src/components/ExtendContent/Modalimage.jsx

+import { useEffect, useState } from 'react'
+import { UploadImage } from '@/components/Upload'
+import { Input, Modal, Form, Button } from 'antd'
+
+
+const FormItem = Form.Item
+export default (props) => {
+  const { value, visible, onChange, onCancel, sortVale } = props
+
+  const [image, setImage] = useState()
+  const [sort, setSort] = useState()
+
+  const Submit = (e) => {
+    setSort(e.target.value)
+  }
+  const handleOk = () => {
+    onChange(image, sort)
+  }
+
+
+
+  useEffect(() => {
+    setImage(value)
+    setSort(sortVale)
+  }, [value, visible, sortVale])
+
+
+  return (
+    <Modal title="请上传图片" visible={visible} onOk={handleOk} onCancel={onCancel} destroyOnClose={true}>
+      <Form onFinish={Submit} >
+        <FormItem label="内容" rules={[{ required: true, message: '请输入内容' }]} >
+          <UploadImage value={image} onChange={setImage} />
+        </FormItem>
+        <FormItem label="权重" rules={[{ required: true, message: '请设置权重' }]}>
+          <Input min={0} placeholder="请输入权重" type='number' value={sort} onChange={Submit} style={{ width: '350px' }} />
+        </FormItem>
+      </Form>
+    </Modal>
+  )
+}

src/components/ExtendContent/index.jsx

+import { Button, message, Space } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { useRef, useState, } from 'react';
+import ModalButton from './ModalButton';
+import List from './List'
+import { save, update } from '@/services/extendContent'
+
+
+
+export default (props) => {
+  const { onCancel, targetId, targetType } = props
+
+  const [record, setRecord] = useState()
+  const listRef = useRef()
+  const textBtnRef = useRef()
+  const imageBtnRef = useRef()
+  const videoBtnRef = useRef()
+
+
+
+  const handleChange = (row, next) => {
+    const data = {
+      ...(row || {}),
+      targetId,
+      targetType,
+    }
+
+    if (data.extId) {
+      // 编辑提交
+
+      update(data.extId, data,).then(() => {
+        listRef.current.reload()
+        next()
+
+        message.success('更新数据成功')
+
+      })
+
+    } else if (data.content) {
+      // 新增提交
+      listRef.current.setLoading(true)
+      save(data).then((res) => {
+        listRef.current.reload()
+        next()
+
+        message.success('保存数据成功')
+      })
+    }
+    else {
+      next()
+    }
+  }
+
+  const handleEdit = (row) => {
+    setRecord(row)
+    switch (row.contentType) {
+      case 'text':
+        textBtnRef.current.toggle();
+        break;
+      case 'image':
+        imageBtnRef.current.toggle();
+        break;
+      case 'video':
+        videoBtnRef.current.toggle();
+        break;
+      default:
+        break;
+    }
+  }
+
+
+  const handleClose = () => {
+    setRecord()
+  }
+
+  return (
+    <div>
+      <Space size="large" style={{ marginBottom: '18px' }}>
+        <ModalButton ref={textBtnRef} type="dashed" icon={<PlusOutlined />} record={record} contentType="text" onChange={handleChange} onClose={handleClose}>文字</ModalButton>
+        <ModalButton ref={imageBtnRef} type="dashed" icon={<PlusOutlined />} record={record} contentType="image" onChange={handleChange} onClose={handleClose}>图片</ModalButton>
+        <ModalButton ref={videoBtnRef} type="dashed" icon={<PlusOutlined />} record={record} contentType="video" onChange={handleChange} onClose={handleClose}>视频</ModalButton>
+      </Space>
+      <List ref={listRef} targetType={targetType} onEdit={handleEdit} targetId={targetId} />
+      <Button onClick={onCancel} style={{ marginTop: '2em', float: 'right' }}>返回</Button>
+    </div>
+  )
+}

src/components/Upload/Upload.jsx

+import { Upload } from 'antd';
+import { uploadFile } from '@/utils/upload'
+
+export default (props) => {
+  return (
+    <Upload {...props} customRequest={uploadFile} >
+      {props.children}
+    </Upload>
+  )
+}

src/components/Upload/UploadImage.jsx

+import React, { useState } from 'react';
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import Upload from './Upload';
+
+function beforeUpload(file) {
+  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'||file.type==='image/gif';
+  if (!isJpgOrPng) {
+    message.error('请上传 JPG , PNG或GIF 图片!');
+  }
+  const isLt10M = file.size / 1024 / 1024 < 10;
+  if (!isLt10M) {
+    message.error('图片大小必须小于 10MB!');
+  }
+
+  return isJpgOrPng && isLt10M;
+}
+
+const UploadButton = (props) => (
+  <div>
+    {props.loading ? <LoadingOutlined /> : <PlusOutlined />}
+    <div style={{ marginTop: 8 }}>上传</div>
+  </div>
+);
+
+export default (props) => {
+  const { value, onChange } = props;
+
+  const [loading, setLoading] = useState(false);
+
+  const handleChange = info => {
+    if (info.file.status === 'uploading') {
+      setLoading(true);
+      return;
+    }
+    if (info.file.status === 'error') {
+      setLoading(false);
+      return;
+    }
+
+    if (info.file.status === 'done') {
+      setLoading(false);
+      onChange(info.file.response);
+    }
+  };
+
+  return (
+    <Upload
+      listType="picture-card"
+      className="image-uploader"
+      showUploadList={false}
+      beforeUpload={beforeUpload}
+      onChange={handleChange}
+    >
+      {value ? <img src={value} alt="avatar" style={{ width: '100%', height: '100%' }} /> : <UploadButton loading={loading} />}
+    </Upload>
+  );
+}

src/components/Upload/UploadImageList.jsx

+
+import React, { useEffect, useState } from 'react';
+import { Modal } from 'antd'
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import Upload from './Upload';
+
+function beforeUpload(file) {
+  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'|| file.type === 'image/gif';
+  if (!isJpgOrPng) {
+    message.error('请上传 JPG,PNG 或 GIF 图片!');
+  }
+  const isLt10M = file.size / 1024 / 1024 < 10;
+  if (!isLt10M) {
+    message.error('图片大小必须小于 10MB!');
+  }
+
+  return isJpgOrPng && isLt10M;
+}
+
+const UploadButton = (props) => (
+  <div>
+    {props.loading ? <LoadingOutlined /> : <PlusOutlined />}
+    <div style={{ marginTop: 8 }}>上传</div>
+  </div>
+);
+
+export default (props) => {
+  const { value, onChange, input, output } = props;
+
+  const [loading, setLoading] = useState(false);
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewImage, setPreviewImage] = useState();
+  const [fileList, setFileList] = useState([]);
+
+  const handleChange = info => {
+    if (info.file.status === 'uploading') {
+      setLoading(true);
+      return;
+    }
+    if (info.file.status === 'error') {
+      setLoading(false);
+      return;
+    }
+
+    if (info.file.status === 'removed') {
+      toggleChange(info.fileList)
+    }
+  };
+
+  const handleSuccess = (url) => {
+    setLoading(false)
+    const inx = fileList?.length ? fileList.length + 1 : 1
+    const list = fileList.concat({
+      url,
+      uid: `new-${inx}`,
+      status: 'done'
+    })
+    toggleChange(list)
+  }
+
+  const toggleChange = (list) => {
+    if (output) {
+      onChange(list.map(x => output(x)))
+    } else {
+      onChange(list)
+    }
+  }
+
+  const handlePreview = (file) => {
+    setPreviewImage(file.url)
+    setPreviewVisible(true)
+  }
+
+  useEffect(() => {
+    if (input) {
+      const lst = (value || []).map((it) => {
+        const { uid, url } = input(it)
+        return {
+          uid,
+          url,
+          status: 'done',
+          raw: it,
+        }
+      })
+      setFileList(lst)
+    } else {
+      setFileList(value || [])
+    }
+  }, [value])
+
+  return (
+    <>
+      <Upload
+        listType="picture-card"
+        className="image-uploader"
+        fileList={fileList}
+        beforeUpload={beforeUpload}
+        onChange={handleChange}
+        onPreview={handlePreview}
+        onSuccess={handleSuccess}
+      >
+        <UploadButton loading={loading} />
+      </Upload>
+      <Modal
+        visible={previewVisible}
+        title="图片预览"
+        footer={null}
+        onCancel={() => setPreviewVisible(false)}
+      >
+        <img alt="example" style={{ width: '100%' }} src={previewImage} />
+      </Modal>
+    </>
+  );
+}
+

src/components/Upload/UploadVideo.jsx

+import React, { useState, useRef } from 'react';
+import { Button } from 'antd'
+import Upload from './Upload';
+import { uplodeNoteImage } from '@/services/note'
+import styles from './style.less';
+import { useEffect } from 'react';
+
+function beforeUpload(file) {
+  const isMp4 = file.type === 'video/mp4';
+  if (!isMp4) {
+    message.error('请上传 MP4 视频!');
+  }
+
+  return isMp4;
+}
+
+export default (props) => {
+  //onPoster 改变主图事件   isScreenshot判断父组件是否需要截屏按钮
+  const { value, onChange, onPoster, isScreenshot } = props;
+  const [loading, setLoading] = useState(false);//上传按钮loading框
+  const [capturing, setCapturing] = useState(false);//截屏按钮loading框
+  const [video, setVideo] = useState()//当前上传的视频
+  const [isVideoReady, setIsVideoReady] = useState(false)//判断视频是否加载成功
+  
+  const canvasRef = useRef()
+  const videoRef = useRef()
+
+  useEffect(() => {
+    setVideo(value)//父组件的视频获取成功时改变当前页面的视频
+  }, [value])
+
+  const handleChange = info => {
+    if (info.file.status === 'uploading') {
+      setLoading(true);
+      return;
+    }
+    if (info.file.status === 'error') {
+      setLoading(false);
+      return;
+    }
+    if (info.file.status === 'done') {
+      onChange(info.file.response);
+      setLoading(false);
+    }
+  };
+
+  //开始截图
+  const handelScreenshot = () => {
+    const ctx = canvasRef.current.getContext("2d");  
+    ctx.drawImage(videoRef.current, 0, 0);    
+    const image = canvasRef.current.toDataURL("image/png", 0.9)
+    setCapturing(true)
+    uplodeNoteImage({ base64: image }).then((res) => {
+      onPoster(res)
+      setCapturing(false)
+    })
+  }
+
+  //视频加载成功事件
+  const handleVideoReady = (e) => {
+    setIsVideoReady(true)
+    canvasRef.current.width = e.target.videoWidth;
+    canvasRef.current.height = e.target.videoHeight;
+  }
+
+  return (
+    <div className={styles['video-uploader']}>
+      <Upload
+        className="image-uploader"
+        showUploadList={false}
+        beforeUpload={beforeUpload}
+        onChange={handleChange}
+      >
+        <div style={{ maxWidth: '1px', maxHeight: '1px', overflow: 'hidden' }}>
+          <canvas ref={canvasRef}></canvas>
+        </div>
+        <Button loading={loading}>
+          点击上传视频 (MP4)
+        </Button>
+
+      </Upload>
+      {
+        isScreenshot && (
+          // disabled={!isVideoReady} 当视频准备成功时截屏按钮可以点击  否则不能点击
+          <Button loading={capturing} style={{ marginLeft: '1em' }} onClick={handelScreenshot} disabled={!isVideoReady}>截屏</Button>
+        )
+      }
+      {
+        !!video && (
+          <video ref={videoRef} width="320" height='500' crossOrigin='anonymous' controls src={video} onCanPlay={handleVideoReady}></video>
+        )
+      }
+    </div>
+  );
+}

src/components/Upload/index.jsx

+import Upload from './Upload';
+import UploadImage from './UploadImage';
+import UploadImageList from './UploadImageList';
+import UploadVideo from './UploadVideo';
+
+export {
+  Upload,
+  UploadImage,
+  UploadImageList,
+  UploadVideo,
+}

src/components/Upload/style.less

+.video-uploader {
+  video {
+    margin-top: 2em;
+    width: 100%;
+    max-height: 360px;
+  }
+}