fix:上传图片框中预览的样式;评论头像、字体样式

lib/components/ContentItem/index.css

@@ -13,7 +13,7 @@
 .comment-item-right {
   display: inline-block;
   width: 90%;
-  margin-left: 10px;
+  margin-left: 20px;
   margin-bottom: 20px;
 }
 .comment-item-avatar {
@@ -24,8 +24,12 @@
   background-size: cover;
   cursor: pointer;
 }
+.comment-item-name{
+  font-size: 16px;
+}
 .comment-item-content {
   margin: 10px 0;
+  font-size: 16px;
   word-break: break-all;
 }
 
@@ -53,6 +57,7 @@
 }
 
 .comment-item-image {
+  margin-left: -5px;
   width: 400px;
   max-width: 100%;
 }
@@ -121,3 +126,21 @@
     margin-left: 10px;
   }
 }
+
+@media (max-width: 575px) {
+  .comment-item-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 16px;
+  }
+  .comment-item-name {
+    font-size: 14px;
+  } 
+  .comment-item-content {
+    font-size: 14px;
+    margin: 4px 0;
+  }
+  .comment-item-date {
+    font-size: 12px;
+  }
+}

lib/components/ContentItem/index.js

@@ -270,13 +270,14 @@ var CommentItem = function (_Component) {
               "strong",
               {
                 onClick: this.handleUserAvaClick,
+                className: "comment-item-name",
                 style: { cursor: "pointer" }
               },
               content.user_name || _reactIntlUniversal2.default.get("comment.tourist")
             ),
             _react2.default.createElement(
               "span",
-              { style: { marginLeft: 10 } },
+              { className: "comment-item-date", style: { marginLeft: 10 } },
               _react2.default.createElement(
                 _tooltip2.default,
                 {

lib/components/Editor/Upload.css

@@ -12,3 +12,25 @@
   top: -10px;
   right: -15px;
 }
+
+.ant-upload-list-item {
+  padding: 0!important;
+}
+.ant-popover-inner-content {
+  position: relative;
+}
+.ant-upload-list-item-info {
+  display: flex;
+  align-items: center;
+}
+
+.upload-close-icon {
+  position: absolute;
+  background: url("../../assert/close.png");
+  top: 16px;
+  width: 19px;
+  height: 19px;
+  z-index: 99;
+  cursor: pointer;
+  color: #989898;
+}

lib/components/Editor/Upload.js

@@ -8,6 +8,10 @@ var _modal = require("antd/es/modal");
 
 var _modal2 = _interopRequireDefault(_modal);
 
+var _spin = require("antd/es/spin");
+
+var _spin2 = _interopRequireDefault(_spin);
+
 var _upload = require("antd/es/upload");
 
 var _upload2 = _interopRequireDefault(_upload);
@@ -24,6 +28,8 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 require("antd/es/modal/style/css");
 
+require("antd/es/spin/style/css");
+
 require("antd/es/upload/style/css");
 
 require("antd/es/icon/style/css");
@@ -97,12 +103,15 @@ var App = function (_React$Component) {
 
     _this.state = {
       previewVisible: false,
-      previewImage: ""
+      previewImage: "",
+      loading: false
     };
     _this.handleCancel = _this.handleCancel.bind(_this);
     _this.handlePreview = _this.handlePreview.bind(_this);
     _this.handleChange = _this.handleChange.bind(_this);
     _this.customRequest = _this.customRequest.bind(_this);
+    _this.handleCloseClick = _this.handleCloseClick.bind(_this);
+    _this.onImgLoad = _this.onImgLoad.bind(_this);
     return _this;
   }
 
@@ -111,6 +120,13 @@ var App = function (_React$Component) {
     value: function componentDidMount() {
       this.props.app.sOssSts();
     }
+  }, {
+    key: "onImgLoad",
+    value: function onImgLoad() {
+      this.setState({
+        loading: false
+      });
+    }
   }, {
     key: "handleCancel",
     value: function handleCancel() {
@@ -160,9 +176,18 @@ var App = function (_React$Component) {
         });
       };
     }
+  }, {
+    key: "handleCloseClick",
+    value: function handleCloseClick(index) {
+      var newFileList = this.props.fileList;
+      newFileList.splice(index, 1);
+      this.props.onChangeFileList(newFileList);
+    }
   }, {
     key: "render",
     value: function render() {
+      var _this3 = this;
+
       var _state = this.state,
           previewVisible = _state.previewVisible,
           previewImage = _state.previewImage;
@@ -190,6 +215,7 @@ var App = function (_React$Component) {
             accept: "image/jpg,image/jpeg,image/png,image/bmp",
             multiple: multiple,
             listType: "picture-card",
+            showUploadList: { showPreviewIcon: true, showRemoveIcon: false },
             fileList: fileList,
             customRequest: this.customRequest,
             onPreview: this.handlePreview,
@@ -197,6 +223,17 @@ var App = function (_React$Component) {
           },
           fileList.length >= maxUpload ? null : uploadButton
         ),
+        fileList.map(function (file, index) {
+          return _react2.default.createElement("div", {
+            className: "upload-close-icon",
+            onClick: _this3.handleCloseClick.bind(_this3, index),
+            key: file.uid,
+            style: {
+              left: index % 3 * 112 + 98 + "px",
+              top: Math.floor(index / 3) * 112 + 16 + "px"
+            }
+          });
+        }),
         _react2.default.createElement(
           _modal2.default,
           {
@@ -205,7 +242,17 @@ var App = function (_React$Component) {
             footer: null,
             onCancel: this.handleCancel
           },
-          _react2.default.createElement("img", { alt: "upload", style: { width: "100%" }, src: previewImage })
+          _react2.default.createElement(
+            _spin2.default,
+            { spinning: this.state.loading },
+            _react2.default.createElement("img", {
+              alt: "upload",
+              style: { width: "100%" },
+              src: previewImage,
+              onLoad: this.onImgLoad,
+              onError: this.onImgLoad
+            })
+          )
         )
       );
     }

lib/version.json

@@ -1,8 +1,8 @@
 {
     "name":       "comment",
-    "buildDate":  1563244545737,
+    "buildDate":  1563502412201,
     "version":    "1.0.4",
-    "numCommits": 162,
-    "hash":       "388cc92",
+    "numCommits": 168,
+    "hash":       "778cc0a",
     "dirty":      false
 }

src/components/ContentItem/index.css

@@ -13,7 +13,7 @@
 .comment-item-right {
   display: inline-block;
   width: 90%;
-  margin-left: 10px;
+  margin-left: 20px;
   margin-bottom: 20px;
 }
 .comment-item-avatar {
@@ -24,8 +24,12 @@
   background-size: cover;
   cursor: pointer;
 }
+.comment-item-name {
+  font-size: 16px;
+}
 .comment-item-content {
   margin: 10px 0;
+  font-size: 16px;
   word-break: break-all;
 }
 
@@ -53,6 +57,7 @@
 }
 
 .comment-item-image {
+  margin-left: -5px;
   width: 400px;
   max-width: 100%;
 }
@@ -121,3 +126,21 @@
     margin-left: 10px;
   }
 }
+
+@media (max-width: 575px) {
+  .comment-item-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 16px;
+  }
+  .comment-item-name {
+    font-size: 14px;
+  }
+  .comment-item-content {
+    font-size: 14px;
+    margin: 4px 0;
+  }
+  .comment-item-date {
+    font-size: 12px;
+  }
+}

src/components/ContentItem/index.js

@@ -176,11 +176,12 @@ class CommentItem extends Component {
             </a> */}
             <strong
               onClick={this.handleUserAvaClick}
+              className="comment-item-name"
               style={{ cursor: "pointer" }}
             >
               {content.user_name || intl.get("comment.tourist")}
             </strong>
-            <span style={{ marginLeft: 10 }}>
+            <span className="comment-item-date" style={{ marginLeft: 10 }}>
               <Tooltip
                 placement="top"
                 title={dayjs(content.created * 1000).format(

src/components/Editor/Upload.css

@@ -12,3 +12,25 @@
   top: -10px;
   right: -15px;
 }
+
+.ant-upload-list-item {
+  padding: 0 !important;
+}
+.ant-popover-inner-content {
+  position: relative;
+}
+.ant-upload-list-item-info {
+  display: flex;
+  align-items: center;
+}
+
+.upload-close-icon {
+  position: absolute;
+  background: url("../../assert/close.png");
+  top: 16px;
+  width: 19px;
+  height: 19px;
+  z-index: 99;
+  cursor: pointer;
+  color: #989898;
+}

src/components/Editor/Upload.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Upload, Icon, Modal, message } from "antd";
+import { Upload, Icon, Modal, message, Spin } from "antd";
 import dayjs from "dayjs";
 import shortid from "shortid";
 import intl from "react-intl-universal";
@@ -47,18 +47,27 @@ class App extends React.Component {
     super(props);
     this.state = {
       previewVisible: false,
-      previewImage: ""
+      previewImage: "",
+      loading: false
     };
     this.handleCancel = this.handleCancel.bind(this);
     this.handlePreview = this.handlePreview.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.customRequest = this.customRequest.bind(this);
+    this.handleCloseClick = this.handleCloseClick.bind(this);
+    this.onImgLoad = this.onImgLoad.bind(this);
   }
 
   componentDidMount() {
     this.props.app.sOssSts();
   }
 
+  onImgLoad() {
+    this.setState({
+      loading: false
+    });
+  }
+
   handleCancel() {
     this.setState({ previewVisible: false });
   }
@@ -101,6 +110,12 @@ class App extends React.Component {
     };
   }
 
+  handleCloseClick(index) {
+    let newFileList = this.props.fileList;
+    newFileList.splice(index, 1);
+    this.props.onChangeFileList(newFileList);
+  }
+
   render() {
     const { previewVisible, previewImage } = this.state;
     const { fileList, maxUpload, multiple } = this.props;
@@ -116,6 +131,7 @@ class App extends React.Component {
           accept="image/jpg,image/jpeg,image/png,image/bmp"
           multiple={multiple}
           listType="picture-card"
+          showUploadList={{ showPreviewIcon: true, showRemoveIcon: false }}
           fileList={fileList}
           customRequest={this.customRequest}
           onPreview={this.handlePreview}
@@ -123,13 +139,34 @@ class App extends React.Component {
         >
           {fileList.length >= maxUpload ? null : uploadButton}
         </Upload>
+        {fileList.map((file, index) => {
+          return (
+            <div
+              className="upload-close-icon"
+              onClick={this.handleCloseClick.bind(this, index)}
+              key={file.uid}
+              style={{
+                left: `${(index % 3) * 112 + 98}px`,
+                top: `${Math.floor(index / 3) * 112 + 16}px`
+              }}
+            />
+          );
+        })}
         <Modal
           className="upload-img-preview"
           visible={previewVisible}
           footer={null}
           onCancel={this.handleCancel}
         >
-          <img alt="upload" style={{ width: "100%" }} src={previewImage} />
+          <Spin spinning={this.state.loading}>
+            <img
+              alt="upload"
+              style={{ width: "100%" }}
+              src={previewImage}
+              onLoad={this.onImgLoad}
+              onError={this.onImgLoad}
+            />
+          </Spin>
         </Modal>
       </div>
     );