update: 修改中英文文案及页面代码

src/App.js

@@ -11,6 +11,8 @@ import CommentList from "./components/CommentList";
 import Editor from "./components/Editor";
 import RenderText from "./components/RenderText";
 import lang from "./lang";
+import USdata from "./lang/en-US.js";
+import CNdata from "./lang/zh-CN.js";
 import "./App.css";
 // import styles from "./App.module.css";
 
@@ -28,6 +30,11 @@ const SUPPORT_LOCALES = [
   }
 ];
 
+const LOCALES = {
+  "zh-CN": CNdata,
+  "en-US": USdata
+};
+
 class App extends Component {
   constructor(props) {
     super(props);
@@ -88,16 +95,13 @@ class App extends Component {
     currentLocale = SUPPORT_LOCALES.find(item => item.value === currentLocale)
       ? currentLocale
       : "zh-CN";
-    this.axios
-      .get(`locales/${currentLocale}.json`)
-      .then(res => {
-        console.log("App locale data", res.data);
-        return intl.init({
-          currentLocale,
-          locales: {
-            [currentLocale]: res.data
-          }
-        });
+    console.log("locales is", LOCALES[currentLocale]);
+    intl
+      .init({
+        currentLocale,
+        locales: {
+          [currentLocale]: LOCALES[currentLocale]
+        }
       })
       .then(() => {
         this.setState({ initDone: true });

src/components/CommentBox/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { Icon } from "antd";
+import intl from "react-intl-universal";
 import Comment from "../../Comment";
 import ContentItem from "./../ContentItem";
 import "./index.css";
@@ -60,21 +61,20 @@ class CommentBox extends Component {
                   action="replyToReply" // 回复的回复
                 />,
                 <div className="comment-more-box" key="show_more_button">
-                  {!isNoMoreReply &&
-                    replyCount !== len && (
-                      <span
-                        className="comment-show-more"
-                        onClick={() => this.handleGetMoreReply(commentId)}
-                      >
-                        查看更多回复
-                      </span>
-                    )}
+                  {!isNoMoreReply && replyCount !== len && (
+                    <span
+                      className="comment-show-more"
+                      onClick={() => this.handleGetMoreReply(commentId)}
+                    >
+                      {intl.get("reply.moreReply")}
+                    </span>
+                  )}
 
                   <a
                     style={{ float: "right" }}
                     onClick={this.handleToggleReply}
                   >
-                    <Icon type="up" /> 收起回复
+                    <Icon type="up" /> {intl.get("reply.collapse")}
                   </a>
                 </div>
               ];

src/components/CommentList/index.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import { Spin, Pagination } from "antd";
+import intl from "react-intl-universal";
 import Comment from "../../Comment";
 import CommentBox from "../CommentBox";
 import "./index.css";
@@ -35,7 +36,7 @@ class CommentList extends Component {
               onPageChange(page + 1);
             }}
           >
-            <span>查看更多评论</span>
+            <span>{intl.get("comment.moreComment")}</span>
           </div>
         );
       } else {
@@ -67,7 +68,8 @@ class CommentList extends Component {
     return (
       <div>
         <Spin spinning={spinning}>
-          <div>共 {total} 条评论</div>
+          {/* <div>共 {total} 条评论</div> */}
+          <div>{intl.get("comment.totalComment", { total })}</div>
           {list.map(item => (
             <CommentBox content={item} key={item.id} commentId={item.id} />
           ))}

src/components/ContentItem/index.js

@@ -3,7 +3,9 @@ import PropTypes from "prop-types";
 import { Avatar, Icon, Tooltip, Popconfirm } from "antd";
 import dayjs from "dayjs";
 import "dayjs/locale/zh-cn";
+// import 'dayjs/locale/es';
 import relativeTime from "dayjs/plugin/relativeTime";
+import intl from "react-intl-universal";
 import Comment from "../../Comment";
 import CommentInput from "../CommentInput";
 import avatar from "../../avatar";
@@ -12,7 +14,7 @@ import { IMAGE_SPLIT } from "../../constant";
 import "./index.css";
 import ImagePreviewer from "../ImagePreviewer/ImagePreviewer";
 
-dayjs.locale("zh-cn");
+// dayjs.locale("zh-cn");
 dayjs.extend(relativeTime);
 
 class CommentItem extends Component {
@@ -115,7 +117,7 @@ class CommentItem extends Component {
             {/* <a href={`/${content.user_id}`}>
               {content.user_name || "暂无昵称"}
             </a> */}
-            <strong>{content.user_name || "游客"}</strong>
+            <strong>{content.user_name || intl.get("comment.tourist")}</strong>
             <span style={{ marginLeft: 10 }}>
               <Tooltip
                 placement="top"
@@ -124,6 +126,7 @@ class CommentItem extends Component {
                 )}
               >
                 {dayjs(content.created * 1000).fromNow()}
+                {/* {dayjs(content.created * 1000).locale('zh-cn').fromNow()} */}
               </Tooltip>
             </span>
           </div>
@@ -136,66 +139,67 @@ class CommentItem extends Component {
             }}
           />
           {// image为空时不渲染comment-item-image
-          imageList.length > 0 &&
-            imageList[0] !== "" && (
-              <div className="comment-item-image">
-                {!this.state.showPreviewer &&
-                  imgs.map((item, index) => {
-                    if (item.type === "divider") {
-                      return (
-                        <div className="comment-item-image-wrapper" key={index}>
-                          <div className="comment-img-divider" />
-                          {/* <img src={item} alt={item} className="comment-img" /> */}
-                        </div>
-                      );
-                    }
+          imageList.length > 0 && imageList[0] !== "" && (
+            <div className="comment-item-image">
+              {!this.state.showPreviewer &&
+                imgs.map((item, index) => {
+                  if (item.type === "divider") {
                     return (
-                      <div
-                        className="comment-item-image-wrapper"
-                        key={index}
-                        onClick={() => {
-                          let i = index;
-                          if (needClear) {
-                            if (index > 3) {
-                              i -= 1;
-                            }
-                            if (index > 7) {
-                              i -= 1;
-                            }
-                          }
-                          this.showPreviewer(i);
-                        }}
-                      >
-                        <div
-                          style={{ backgroundImage: `url(${item})` }}
-                          className="comment-img-thumbnail"
-                        />
+                      <div className="comment-item-image-wrapper" key={index}>
+                        <div className="comment-img-divider" />
                         {/* <img src={item} alt={item} className="comment-img" /> */}
                       </div>
                     );
-                  })}
-                {this.state.showPreviewer && (
-                  <ImagePreviewer
-                    list={imageList}
-                    index={this.state.previewerIndex}
-                    onFold={this.hidePreviewer}
-                  />
-                )}
-                <div className="clearfix" />
-              </div>
-            )}
+                  }
+                  return (
+                    <div
+                      className="comment-item-image-wrapper"
+                      key={index}
+                      onClick={() => {
+                        let i = index;
+                        if (needClear) {
+                          if (index > 3) {
+                            i -= 1;
+                          }
+                          if (index > 7) {
+                            i -= 1;
+                          }
+                        }
+                        this.showPreviewer(i);
+                      }}
+                    >
+                      <div
+                        style={{ backgroundImage: `url(${item})` }}
+                        className="comment-img-thumbnail"
+                      />
+                      {/* <img src={item} alt={item} className="comment-img" /> */}
+                    </div>
+                  );
+                })}
+              {this.state.showPreviewer && (
+                <ImagePreviewer
+                  list={imageList}
+                  index={this.state.previewerIndex}
+                  onFold={this.hidePreviewer}
+                />
+              )}
+              <div className="clearfix" />
+            </div>
+          )}
           <div className="comment-item-bottom">
             {content.reply_count ? (
               <div>
                 <a className="comment-item-bottom-left" onClick={onShowReply}>
-                  {content.reply_count} 条回复
+                  {/* {content.reply_count} 条回复 */}
+                  {intl.get("reply.totalReply", { total: content.reply_count })}
                   {showReply ? <Icon type="up" /> : <Icon type="down" />}
                 </a>
               </div>
             ) : null}
             {app.userId === content.user_id && (
               <Popconfirm
-                title="确定要删除吗?"
+                // title="确定要删除吗?"
+                title={intl.get("popConfirm.title")}
                 onConfirm={() => {
                   if (replyId) {
                     app.sDeleteReply(content.id, commentId);
@@ -203,17 +207,19 @@ class CommentItem extends Component {
                   }
                   app.sDeleteComment(content.id);
                 }}
-                okText="确定"
-                cancelText="取消"
+                okText={intl.get("popConfirm.ok")}
+                cancelText={intl.get("popConfirm.cancel")}
               >
-                <a className="comment-item-bottom-right">&nbsp; 删除</a>
+                <a className="comment-item-bottom-right">
+                  &nbsp; {intl.get("popConfirm.delete")}
+                </a>
               </Popconfirm>
             )}
             <a
               onClick={this.handleToggleInput}
               className="comment-item-bottom-right"
             >
-              &nbsp; 回复
+              &nbsp; {intl.get("comment.reply")}
             </a>
             <div
               className="comment-item-bottom-right"

src/components/Editor/Upload.js

@@ -2,6 +2,7 @@ import React from "react";
 import { Upload, Icon, Modal, message } from "antd";
 import dayjs from "dayjs";
 import shortid from "shortid";
+import intl from "react-intl-universal";
 import {
   OSS_ENDPOINT,
   OSS_BUCKET,
@@ -106,7 +107,7 @@ class App extends React.Component {
     const uploadButton = (
       <div>
         <Icon type="plus" />
-        <div className="ant-upload-text">上传</div>
+        <div className="ant-upload-text">{intl.get("editor.uploadBtn")}</div>
       </div>
     );
     return (

src/components/Editor/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Icon, Button, Popover, Input, message } from "antd";
 import classnames from "classnames";
+import intl from "react-intl-universal";
 import { OSS_LINK } from "../../constant";
 import { isFunction } from "../../helper";
 import Upload from "./Upload";
@@ -119,7 +120,8 @@ class Editor extends React.Component {
     const { maxLength } = this.props;
     let { value, fileMap, fileList } = this.state;
     if (value.length > maxLength) {
-      message.error(`字数不得超过${maxLength}字`);
+      // message.error(`字数不得超过${maxLength}字`);
+      message.error(intl.get("editor.maxLength", { maxLength }));
       return;
     }
     const files = [];
@@ -166,13 +168,13 @@ class Editor extends React.Component {
   render() {
     const {
       value,
-      placeholder,
+      // placeholder,
       rows,
       showEmoji,
       showUpload,
       closeUploadWhenBlur,
       maxUpload,
-      btnSubmitText,
+      // btnSubmitText,
       btnLoading,
       btnDisabled,
       button,
@@ -181,6 +183,8 @@ class Editor extends React.Component {
       maxLength,
       autoFocus
     } = this.props;
+    let placeholder = this.props.placeholder || intl.get("editor.placeholder");
+    let btnSubmitText = this.props.placeholder || intl.get("editor.SubmitBtn");
     const handleSubmit = this.handleSubmit;
     const disabledSubmit =
       btnDisabled ||
@@ -194,7 +198,11 @@ class Editor extends React.Component {
             "comment-editor-toolbar-error": inputValue.length > maxLength
           })}
         >
-          已输入 {inputValue.length} / {maxLength} 字
+          {intl.get("editor.alreadyEntered", {
+            count: inputValue.length,
+            maxLength
+          })}
+          {/* 已输入 {inputValue.length} / {maxLength} 字 */}
         </div>
         <div className="comment-editor">
           <TextArea
@@ -268,10 +276,12 @@ class Editor extends React.Component {
                   title={
                     <div style={{ margin: "5px auto" }}>
                       <span>
-                        上传图片
+                        {intl.get("editor.uploadTip")}
                         {maxUpload >= 2 ? (
                           <span style={{ color: "#666", fontWeight: 400 }}>
-                            (您还能上传{maxUpload - this.state.fileList.length}张图片)
+                            {intl.get("editor.uploadCount", {
+                              count: maxUpload - this.state.fileList.length
+                            })}
                           </span>
                         ) : null}
                       </span>
@@ -350,12 +360,12 @@ Editor.propTypes = {
 
 Editor.defaultProps = {
   rows: 5,
-  placeholder: "说点什么吧...",
+  // placeholder: "说点什么吧",
   showEmoji: true,
   showUpload: true,
   closeUploadWhenBlur: false,
   maxUpload: 1,
-  btnSubmitText: "发表",
+  // btnSubmitText: "发表",
   btnLoading: false,
   btnDisabled: false,
   showError: true,

src/components/ImagePreviewer/ImagePreviewer.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import classnames from "classnames";
 import { Icon, Spin } from "antd";
+import intl from "react-intl-universal";
 
 import "./ImagePreviewer.less";
 // import "./ImagePreviewer.css";
@@ -104,10 +105,10 @@ export default class ImagePreviewer extends React.Component {
         <div className="toolbar">
           <span className="button" onClick={onFold}>
             <Icon type="to-top" />
-            收起
+            {intl.get("picture.collapse")}
           </span>
           <span className="button" onClick={this.onOrigin}>
-            <Icon type="search" /> 查看原图
+            <Icon type="search" /> {intl.get("picture.viewOriginal")}
           </span>
           {/* <span className="button" onClick={this.rotateRight}>
                         <Icon type="reload" /> 向右旋转

src/lang/en-US.js

@@ -0,0 +1,29 @@
+const USdata = {
+  "editor.alreadyEntered": "already entered {count}/{maxLength}",
+  "editor.placeholder": "say...",
+  "editor.maxLength": "Input number must < {maxLength}",
+  "editor.SubmitBtn": "Submit",
+  "editor.uploadTip": "Upload Pictures",
+  "editor.uploadCount": "(You can also upload {count} images)",
+  "editor.uploadBtn": "upload",
+
+  "comment.tourist": "tourist",
+  "comment.totalComment":
+    "total {total, plural, =1 {one comment} other {# comments}}",
+  "comment.reply": "reply",
+  "comment.moreComment": "More",
+
+  "reply.totalReply": "{total, plural, =1 {one reply} other {# replies}}",
+  "reply.moreReply": "More",
+  "reply.collapse": "clloasp reply",
+
+  "picture.collapse": "collapse",
+  "picture.viewOriginal": "view original picture",
+
+  "popConfirm.title": "Sure?",
+  "popConfirm.ok": "Ok",
+  "popConfirm.cancel": "Cancel",
+  "popConfirm.delete": "Delete"
+};
+
+export default USdata;

src/lang/en-US.json

@@ -1,21 +0,0 @@
-{
-  "editor.alreadyEntered": "已输入{count}/140字",
-  "editor.placeholder": "say...",
-  "editor.SubmitBtn": "Submit",
-  "editor.uploadTip": "上传图片",
-  "editor.uploadCount": "(您还能上传{count}张图片)",
-  "editor.uploadBtn": "upload",
-
-  "comment.totalComment": "共{total}条评论",
-  "comment.reply": "reply",
-  "comment.moreComment": "More",
-
-  "reply.totalReply": "{total}条回复",
-  "reply.moreReply": "More",
-  "reply.collapse": "收起回复",
-
-  "popConfirm.title": "Sure?",
-  "popConfirm.ok": "Ok",
-  "popConfirm.cancel": "Cancel",
-  "popConfirm.delete": "Delete"
-}

src/lang/zh-CN.json → src/lang/zh-CN.js

@@ -1,11 +1,13 @@
-{
+const CNdata = {
   "editor.alreadyEntered": "已输入{count}/140字",
   "editor.placeholder": "说点什么吧...",
+  "editor.maxLength": "字数不过超过{maxLength}字",
   "editor.SubmitBtn": "发表",
   "editor.uploadTip": "上传图片",
   "editor.uploadCount": "(您还能上传{count}张图片)",
   "editor.uploadBtn": "上传",
 
+  "comment.tourist": "游客",
   "comment.totalComment": "共{total}条评论",
   "comment.reply": "回复",
   "comment.moreComment": "查看更多评论",
@@ -14,8 +16,13 @@
   "reply.moreReply": "查看更多回复",
   "reply.collapse": "收起回复",
 
+  "picture.collapse": "收起",
+  "picture.viewOriginal": "查看原图",
+
   "popConfirm.title": "确定要删除吗",
   "popConfirm.ok": "确定",
   "popConfirm.cancel": "取消",
   "popConfirm.delete": "删除"
-}
+};
+
+export default CNdata;