🆕 添加音频组件，修复组件中图片链接失效问题

package.json

@@ -71,6 +71,7 @@
     "keymaster": "^1.6.2",
     "qrcode.react": "^1.0.0",
     "react": "^16.12.0",
+    "react-audio-player": "^0.14.0",
     "react-codemirror2": "^7.2.1",
     "react-color": "^2.18.1",
     "react-contexify": "^4.1.1",

src/components/BasicShop/BasicComponents/Qrcode/schema.ts

@@ -55,7 +55,7 @@ const Qrcode: IQrcodeSchema = {
         uid: '001',
         name: 'image.png',
         status: 'done',
-        url: 'http://io.nainor.com/uploads/code_173e1705e0c.png',
+        url: 'http://49.234.61.19/uploads/code_173e1705e0c.png',
       },
     ],
     text: '二维码',

src/components/BasicShop/MediaComponents/Audio/index.less

@@ -0,0 +1,5 @@
+.audioWrap {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}

src/components/BasicShop/MediaComponents/Audio/index.tsx

@@ -1,30 +1,32 @@
 import React, { memo } from 'react';
 import ReactAudioPlayer from 'react-audio-player';
-import './index.css';
+import styles from './index.less';
-import { IVideoConfig } from './schema';
+import { IAudioConfig } from './schema';
-import logo from '@/assets/14-视频.png';
+import logo from '@/assets/music@2x.png';
-// import Audio from '@/assets/audio'
+
-const VideoPlayer = memo((props: IVideoConfig & { isTpl: boolean }) => {
+const AudioPlayer = memo((props: IAudioConfig & { isTpl: boolean }) => {
-  const { poster, url, isTpl } = props;
+  const { height, url, isTpl } = props;
   return (
     <>
       {isTpl ? (
         <div>
-          <img src={logo} alt=""></img>
+          <img src={logo} style={{ width: '100%' }} alt="h5-dooring音频播放组件"></img>
         </div>
       ) : (
-        <div>
+        <div className={styles.audioWrap}>
-          <Player
+          <ReactAudioPlayer
-            playsInline
+            src={url}
-            poster={poster[0].url}
+            autoPlay={false}
-            src={url || 'https://gossv.vcg.com/cmsUploadVideo/creative/1移轴/7月移轴.mp4'}
+            controls
-          >
+            style={{
-            <BigPlayButton position="center" />
+              width: '100%',
-          </Player>
+              height: height + 'px',
+            }}
+          />
         </div>
       )}
     </>
   );
 });
 
-export default VideoPlayer;
+export default AudioPlayer;

src/components/BasicShop/MediaComponents/Audio/schema.ts

@@ -1,45 +1,38 @@
 import {
   ITextConfigType,
-  IUploadConfigType,
+  INumberConfigType,
   TTextDefaultType,
-  TUploadDefaultType,
+  TNumberDefaultType,
 } from '@/components/PanelComponents/FormEditor/types';
 
-export type TVideoEditData = Array<IUploadConfigType | ITextConfigType>;
+export type TAudioEditData = Array<INumberConfigType | ITextConfigType>;
-export interface IVideoConfig {
+export interface IAudioConfig {
-  poster: TUploadDefaultType;
+  height: TNumberDefaultType;
   url: TTextDefaultType;
 }
 
-export interface IVideoSchema {
+export interface IAudioSchema {
-  editData: TVideoEditData;
+  editData: TAudioEditData;
-  config: IVideoConfig;
+  config: IAudioConfig;
 }
 
-const Video: IVideoSchema = {
+const Audio: IAudioSchema = {
   editData: [
     {
-      key: 'poster',
+      key: 'height',
-      name: '视频封面',
+      name: '音频高度',
-      type: 'Upload',
+      type: 'Number',
     },
     {
       key: 'url',
-      name: '视频链接',
+      name: '音频链接',
       type: 'Text',
     },
   ],
   config: {
-    poster: [
+    height: 32,
-      {
+    url: 'http://io.nainor.com/audio.mp3',
-        uid: '001',
-        name: 'image.png',
-        status: 'done',
-        url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png',
-      },
-    ],
-    url: '',
   },
 };
 
-export default Video;
+export default Audio;

src/components/BasicShop/MediaComponents/Audio/template.ts

@@ -1,6 +1,6 @@
 const template = {
   type: 'Audio',
-  h: 107,
+  h: 48,
   displayName: '音频组件',
 };
 export default template;

src/components/BasicShop/MediaComponents/Video/schema.ts

@@ -35,7 +35,7 @@ const Video: IVideoSchema = {
         uid: '001',
         name: 'image.png',
         status: 'done',
-        url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png',
+        url: 'http://49.234.61.19/uploads/1_1740c6fbcd9.png',
       },
     ],
     url: '',

src/components/BasicShop/MediaComponents/schema.ts

@@ -1,6 +1,8 @@
 import Video from './Video/schema';
+import Audio from './Audio/schema';
 
 const mediaSchema = {
   Video,
+  Audio,
 };
 export default mediaSchema;

src/components/BasicShop/MediaComponents/template.ts

@@ -1,6 +1,7 @@
 import Video from './Video/template';
+import Audio from './Audio/template';
 
-const mediaTemplate = [Video];
+const mediaTemplate = [Video, Audio];
 
 const MediaTemplate = mediaTemplate.map(v => {
   return { ...v, category: 'media' };

src/components/Zan/index.tsx

@@ -13,8 +13,8 @@ export default memo(function ZanPao() {
   return (
     <div className={styles.takeCat} style={{ display: 'inline-block' }}>
       <Popover placement="top" title={null} content={content} trigger="hover">
-        <Button type="primary" danger>
+        <Button type="primary" size="large">
-          赞助作者
+          支持开源, 请作者喝奶茶~
         </Button>
       </Popover>
     </div>

src/pages/editor/Container.tsx

@@ -481,27 +481,6 @@ const Container = (props: {
         >
           {!rightColla ? <DoubleRightOutlined /> : <DoubleLeftOutlined />}
         </div>
-        <div
-          style={{
-            width: rightColla ? 0 : '279px',
-            position: 'absolute',
-            transform: 'translate(0,-10%)',
-            transition: 'all ease-in-out 0.5s',
-            textAlign: 'center',
-            bottom: -5,
-            right: rightColla ? 0 : 16,
-            background: 'hsla(0,0%,88.2%,.7)',
-            padding: rightColla ? 0 : '10px',
-          }}
-        >
-          {curPoint?.id ? (
-            <Button block type="primary" onClick={() => handleDel(curPoint.id)}>
-              删除
-            </Button>
-          ) : (
-            ''
-          )}
-        </div>
         <div
           style={{
             width: rightColla ? 0 : '304px',

src/pages/home/index.tsx

@@ -94,25 +94,20 @@ const Home = () => {
             <div style={{ marginTop: '30px' }}>
               <Zan />
             </div>
-            <div style={{ width: '160px', marginLeft: '60px', marginTop: '32px' }}>
-              <a
-                href="http://49.234.61.19/h5?tid=B73349B8&isTpl=1"
-                style={{ marginRight: '24px' }}
-                target="_blank"
-              >
-                商务合作
-              </a>
-              <a href="http://49.234.61.19/h5?tid=7B4008F7&isTpl=1" target="_blank">
-                友情链接
-              </a>
-            </div>
           </div>
           <div style={{ display: 'flex', justifyContent: 'center' }}>
-            <div style={{ width: '360px', marginLeft: '60px', marginTop: '32px' }}>
+            <div style={{ width: '500px', marginLeft: '40px', marginTop: '32px' }}>
               <span style={{ marginRight: '24px' }}>更多产品: </span>
               <a href="http://49.234.61.19/qt" style={{ marginRight: '24px' }} target="_blank">
                 趣图-在线gif动图制作平台
               </a>
+              <a
+                href="http://49.234.61.19/tool/cssTriangle"
+                style={{ marginRight: '24px' }}
+                target="_blank"
+              >
+                在线css三角形生成器
+              </a>
             </div>
           </div>
         </footer>

yarn.lock

@@ -11847,6 +11847,13 @@ rc-virtual-list@^3.0.1, rc-virtual-list@^3.0.3:
     rc-resize-observer "^0.2.3"
     rc-util "^5.0.7"
 
+react-audio-player@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/react-audio-player/-/react-audio-player-0.14.0.tgz#b57bc2b980b1bb3c8b4f6a2134062160462c5081"
+  integrity sha512-B0kP3KVjbp+TXG8TUh1kl91xnYwYx8c+YLbx3oZS9drcHvgTPWl4sl8inmwyLWPH0bMW5eqGFL5qT1fuHk8Ysw==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-codemirror2@^7.2.1:
   version "7.2.1"
   resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-7.2.1.tgz#38dab492fcbe5fb8ebf5630e5bb7922db8d3a10c"