feat: 提交便跟

packages/base-components/RichText/src/demos/demo.jsx

@@ -49,17 +49,16 @@ class RichTextDemo extends React.Component {
     // ];
     // // this.setState({ fileList: arr });
     // this.myRichText.current && this.myRichText.current.setHtml('');
-
   };
 
   componentDidMount = () => {
     this.getData();
   };
 
-    componentDidUpdate = (propNev, stateNev) => { };
+  componentDidUpdate = (propNev, stateNev) => {};
 
   componentWillUnmount() {
-        this.setState = () => { };
+    this.setState = () => {};
   }
 
   render() {
@@ -69,10 +68,10 @@ class RichTextDemo extends React.Component {
           <RichText
             // content={this.state.content}
             personList={this.state.personList}
-                        onChange={val => {
+            onChange={(val) => {
               this.setState({ content: val });
             }}
-                        onChangeFile={arr => {
+            onChangeFile={(arr) => {
               this.setState({ fileList: arr });
             }}
             fileList={this.state.fileList}
@@ -82,7 +81,11 @@ class RichTextDemo extends React.Component {
         </div>
         {/* <div className={styles.contentBox}>{this.state.content}</div> */}
         <div className={styles.contentBox}>
-                    <RichTextShow content={this.state.content} onClickImg={src => { }} fileList={this.state.fileList} />
+          <RichTextShow
+            content={this.state.content}
+            onClickImg={(src) => {}}
+            fileList={this.state.fileList}
+          />
         </div>
         <div className={styles.contentBox}>{this.state.content}</div>
       </div>

packages/base-components/RichText/src/fileListItem.js

@@ -4,16 +4,22 @@
  * @Date: 2022-03-21 14:44:49
  */
 import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
-import { FileTwoTone, DeleteOutlined, FileImageTwoTone, DownloadOutlined, PictureOutlined } from '@ant-design/icons';
+import {
+  FileTwoTone,
+  DeleteOutlined,
+  FileImageTwoTone,
+  DownloadOutlined,
+  PictureOutlined,
+} from '@ant-design/icons';
 import { Button } from 'antd';
 import iconFile from './icon_file.png';
 function fileListItem(props) {
   const [fileList, setFileList] = useState([]);
   const imgType = ['image/png', 'image/jpg', 'image/jpeg'];
-    const onPreview = item => {
+  const onPreview = (item) => {
     props.onPreview(item);
   };
-    const onDownLoad = item => {
+  const onDownLoad = (item) => {
     const a = document.createElement('a');
     a.setAttribute('download', item.name);
     a.setAttribute('href', item.path);
@@ -28,7 +34,10 @@ function fileListItem(props) {
     <>
       {fileList.map((item, index) => {
         return (
-                    <div key={index} className={'panda-civ-work-upload-list panda-civ-work-upload-list-picture'}>
+          <div
+            key={index}
+            className={'panda-civ-work-upload-list panda-civ-work-upload-list-picture'}
+          >
             <div className={'panda-civ-work-upload-list-picture-container'}>
               <div className={'panda-civ-work-upload-list-item'}>
                 <div className={'panda-civ-work-upload-list-item-info'}>
@@ -53,7 +62,7 @@ function fileListItem(props) {
                         <Button
                           title="预览"
                           type="text"
-                                                    onClick={e => {
+                          onClick={(e) => {
                             e && e.stopPropagation();
                             onPreview(item);
                           }}
@@ -65,7 +74,7 @@ function fileListItem(props) {
                       <Button
                         title="下载"
                         type="text"
-                                                onClick={e => {
+                        onClick={(e) => {
                           e && e.stopPropagation();
                           onDownLoad(item);
                         }}
@@ -77,7 +86,7 @@ function fileListItem(props) {
                         <Button
                           title="删除文件"
                           type="text"
-                                                    onClick={e => {
+                          onClick={(e) => {
                             e && e.stopPropagation();
                             props.onDel(item);
                           }}

packages/base-components/RichText/src/index.less

 @import '~antd/es/style/themes/default.less';
 // @import '~antd/es/image/style/index.less';
 .RichText {
-    width: 100%;
-    height: auto;
-    min-height: 200px;
   position: relative;
   display: flex;
   flex-direction: column;
+  width: 100%;
+  height: auto;
+  min-height: 200px;
   border: 1px solid #d9d9d9;
   border-radius: 2px;
 
   .loadingWrap {
-        width: 100%;
-        height: 100%;
     position: absolute;
+    top: 0;
+    left: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-        top: 0;
-        left: 0;
+    width: 100%;
+    height: 100%;
     background-color: rgba(255, 255, 255, 0.8);
   }
 
@@ -26,25 +26,25 @@
     position: absolute;
     top: 0;
     left: 0;
-
-        background: #fff;
+    display: none;
     max-height: 250px;
     overflow-y: scroll;
-        display: none;
+
+    background: #fff;
   }
-    .selectList{
+  .selectList {
     border: 1px solid #efefef;
     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16), 0 0;
   }
   .selectList .selectItem:hover {
-        background: #1685FF;
     color: #fff;
+    background: #1685ff;
     cursor: pointer;
   }
 
   .selectList .selectActiveItem {
-        background: #1685FF;
     color: #fff;
+    background: #1685ff;
   }
 
   .selectItem {
@@ -58,7 +58,6 @@
   ul li {
     list-style: disc !important;
   }
-
 }
 
 .RichTextFileList {
@@ -74,7 +73,7 @@
         width: 20px;
         height: 22px;
 
-                >img {
+        > img {
           width: 100%;
           height: 100%;
         }
@@ -85,15 +84,14 @@
       }
     }
   }
-
 }
 
 .RichTextContainer {
-    background-color: #fff;
-    color: #000000d9;
   position: relative;
-    overflow-y: scroll;
   flex: 1;
+  overflow-y: scroll;
+  color: #000000d9;
+  background-color: #fff;
 
   pre {
     white-space: pre-wrap;
@@ -101,12 +99,10 @@
   }
 }
 
-
 .RichTextToolbar {
   border-bottom: 1px solid #d9d9d9;
   // height: 0;
   // overflow: hidden;
-
 }
 
 .RichTextShow img {
@@ -114,17 +110,17 @@
 }
 
 .RichTextShow span[data-type='person'] {
-    font-weight: bold;
   color: #44acb6 !important;
+  font-weight: bold;
 }
 
 :global {
   #RichTextContainer span[data-type='person'] {
-        font-weight: bold;
     color: #44acb6 !important;
+    font-weight: bold;
   }
 
-    .w-e-menu[data-title="图片"] {
+  .w-e-menu[data-title='图片'] {
     display: none;
   }
 
@@ -134,9 +130,9 @@
   }
 
   #RichTextContainer .RichText-image-img {
-        max-width: calc(100% - 20px);
     display: inline-block;
     width: auto;
+    max-width: calc(100% - 20px);
     height: auto;
   }
 
@@ -149,27 +145,27 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    box-sizing: border-box;
+    margin: 0;
+
+    padding: 0;
     color: #fff;
     background: rgba(0, 0, 0, 0.5);
     cursor: pointer;
     opacity: 0;
     transition: opacity 0.3s;
-
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
   }
 
   .RichText-image-mask-info {
-        padding: 0;
-        margin: 0;
     box-sizing: border-box;
+    margin: 0;
+    padding: 0;
     overflow: hidden;
+    color: #fff;
+    font-size: 20px;
     white-space: nowrap;
     text-overflow: ellipsis;
     cursor: pointer;
-        color: #fff;
-        font-size: 20px;
   }
 
   .RichText-image-mask-info .anticon {
@@ -185,26 +181,25 @@
   }
 
   .r-t-add-file {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
     color: #999;
+    font-weight: normal;
     font-family: 'w-e-icon' !important;
-        speak: none;
     font-style: normal;
-        font-weight: normal;
     font-variant: normal;
-        text-transform: none;
     line-height: 1;
+    text-transform: none;
+    speak: none;
     -webkit-font-smoothing: antialiased;
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
   }
 
   .r-t-add-file:before {
-        content: "\e9cb";
+    content: '\e9cb';
   }
 
   .@{ant-prefix}-image-error {
     display: block;
   }
-
 }