Merge pull request #71 from hocgin/v4.0.42

V4.0.42

mock/_utils/result.ts

@@ -0,0 +1,18 @@
+/**
+ * 模拟返回结构
+ */
+export default function result(success: boolean, message: string, data?: any) {
+  return {
+    success: success,
+    message: message,
+    data: data,
+  };
+}
+
+export function success(data: any = null) {
+  return result(true, 'ok', data);
+}
+
+export function error(message = 'error', data: any = null) {
+  return result(false, message, data);
+}

mock/api.ts

@@ -0,0 +1,8 @@
+import { success } from './_utils/result';
+
+// http://mockjs.com/examples.html
+export default {
+  'GET /api/worked': (req: any, res: any) => {
+    return res.json(success());
+  },
+};

mock/comment.ts

@@ -0,0 +1,65 @@
+import { success } from './_utils/result';
+import Mock from 'mockjs';
+import { CommentType } from '@/Comment/components/type';
+import { UserType } from '@/Utils/interface';
+
+// http://mockjs.com/examples.html
+export default {
+  'GET /api/ums/account': (req: any, res: any) =>
+    res.json(
+      success({
+        id: 1,
+        nickname: 'hocgin',
+        username: 'hocgin',
+        avatar: Mock.Random.image('100x100'),
+      }),
+    ),
+  'POST /api/com/comment/:refType/:refId/like': (req: any, res: any) =>
+    res.json(success(mockData())),
+  'POST /api/com/comment/:refType/:refId/dislike': (req: any, res: any) =>
+    res.json(success(mockData())),
+  'POST /api/com/comment/:refType/:refId/report': (req: any, res: any) =>
+    res.json(success(mockData())),
+  'POST /api/com/comment/:refType/:refId/reply': (req: any, res: any) =>
+    res.json(success(mockData())),
+  'POST /api/com/comment/:refType/:refId/_scroll': (req: any, res: any) =>
+    res.json(
+      success({
+        nextId: 1,
+        hasMore: true,
+        records: [mockData()],
+      }),
+    ),
+  'POST /api/com/comment/:refType/:refId/_paging': (req: any, res: any) =>
+    res.json(
+      success({
+        current: 1,
+        total: 1,
+        size: 1,
+        pages: 1,
+        records: [mockData()],
+      }),
+    ),
+};
+
+let mockData = () => {
+  return Mock.mock({
+    id: '@integer()',
+    replyId: 1,
+    likes: '@integer(0, 10)',
+    disliked: '@integer(0, 10)',
+    action: 'none',
+    content: '@string()',
+    hasReply: '@bool()',
+    author: mockUser(),
+    replier: mockUser(),
+  });
+};
+
+let mockUser = () => {
+  return {
+    id: 1,
+    title: 'hocgin',
+    avatarUrl: Mock.Random.image('100x100'),
+  } as UserType;
+};

mock/file.ts

@@ -0,0 +1,12 @@
+import { success } from './_utils/result';
+import Mock from 'mockjs';
+
+// http://mockjs.com/examples.html
+export default {
+  'POST /api/com/file/upload': (req: any, res: any) => {
+    return res.json(success(Mock.Random.image('100x100')));
+  },
+  'GET /api/com/file/upload': (req: any, res: any) => {
+    return res.json(success(Mock.Random.image('100x100')));
+  },
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hocgin/ui",
-  "version": "4.0.41",
+  "version": "4.0.42",
   "sideEffects": [
     ".less",
     ".css"
@@ -54,6 +54,7 @@
     "draft-js-prism": "^1.0.6",
     "emoji-mart": "^3.0.1",
     "memoize-one": "^5.2.1",
+    "mockjs": "^1.1.0",
     "randexp": "^0.5.3",
     "react-copy-to-clipboard": "^5.0.4",
     "react-countup": "^5.2.0",

src/Comment/components/Comment/index.tsx

@@ -52,13 +52,11 @@ const UserOptions: React.FC<{
   comment: CommentType;
   useAction: UseAction;
   userAction?: string;
-  likesCount?: number;
-  dislikedCount?: number;
 }> = (props, ref) => {
   let { useAction, comment } = props;
   let [userAction, setUserAction] = useState(props?.userAction);
-  let [likesCount, setLikesCount] = useState(props?.likesCount || 0);
-  let [dislikedCount, setDislikedCount] = useState(props?.dislikedCount || 0);
+  let [likesCount, setLikesCount] = useState(comment?.likes || 0);
+  let [dislikedCount, setDislikedCount] = useState(comment?.disliked || 0);
 
   let commentId = comment.id;
   let options = {
@@ -207,7 +205,7 @@ const Comment: React.FC<{
             )}
           </>
         }
-        content={<p className={styles.content}>{content}</p>}
+        content={<div className={styles.content}>{content}</div>}
         actions={actions}
       >
         {children}
@@ -284,7 +282,7 @@ const Index: React.FC<{
       datetime={datetime}
       author={author}
       replier={replier}
-      content={<p className={styles.content}>{content}</p>}
+      content={<div className={styles.content}>{content}</div>}
       actions={[
         <UserOptions
           reply$={reply$}

src/Comment/components/Editor/index.less

@@ -18,6 +18,11 @@
     height: 30px;
     line-height: 30px;
     color: rgba(0, 0, 0, 0.85);
+
+    .title {
+      font-weight: 400;
+      font-size: 1.1em;
+    }
   }
 
   .reply {

src/Comment/components/Editor/index.tsx

@@ -3,7 +3,12 @@ import classNames from 'classnames';
 import styles from './index.less';
 import { EventEmitter } from 'ahooks/lib/useEventEmitter';
 import { Avatar, Button, Divider, Popover, Tooltip, Input } from 'antd';
-import { ClearOutlined, SmileOutlined, UserOutlined } from '@ant-design/icons';
+import {
+  CheckOutlined,
+  ClearOutlined,
+  SmileOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
 import {
   CommentType,
   ReplyDataType,
@@ -14,7 +19,7 @@ import {
 // @ts-ignore
 import { Picker } from 'emoji-mart';
 import 'emoji-mart/css/emoji-mart.css';
-import { useMount, useRequest } from 'ahooks';
+import { useInterval, useMount, useRequest } from 'ahooks';
 
 const { TextArea } = Input;
 
@@ -32,6 +37,9 @@ const Editor: React.FC<{
   } = props;
   let [reply, setReply] = useState<CommentType | undefined>(undefined);
   let [content, setContent] = useState<string | undefined>('');
+  let [replied, setReplied] = useState(false);
+  useInterval(() => setReplied?.(false), 2000);
+
   reply$.useSubscription((comment?: CommentType) => {
     setReply(comment);
   });
@@ -54,6 +62,10 @@ const Editor: React.FC<{
     debounceWait: 300,
     onSuccess: (data: ReplyDataType) => {
       replied$.emit(data);
+
+      // 清除原先内容
+      setContent('');
+      setReplied(true);
     },
   });
 
@@ -86,7 +98,7 @@ const Editor: React.FC<{
       </div>
       <div className={styles.right}>
         <div className={styles.header}>
-          {userName}{' '}
+          <span className={styles.title}>{userName} </span>
           {hasBeReply && (
             <>
               <a href={`#c_${replyId}`} className={styles.reply}>
@@ -115,8 +127,14 @@ const Editor: React.FC<{
           />
         </div>
         <div>
-          <Button size="small" disabled={!landed} onClick={onSubmitReply}>
-            评论
+          <Button disabled={!landed} onClick={onSubmitReply}>
+            {replied ? (
+              <>
+                <CheckOutlined style={{ color: '#00B06D' } as any} /> 评论成功
+              </>
+            ) : (
+              '评论'
+            )}
           </Button>
           <Divider type="vertical" />
           <div className={styles.emojiBox}>

src/Comment/components/index.tsx

@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
 import {
-  CommentType, ScrollDataType, ScrollParamsType, UseAction,
+  CommentType,
+  ScrollDataType,
+  ScrollParamsType,
+  UseAction,
 } from './type';
 import classNames from 'classnames';
 import styles from './index.less';
@@ -39,51 +42,58 @@ const Index: React.FC<IndexProps> = (props, ref) => {
   });
 
   // 请求
-  let scrollPull = useRequest<ScrollDataType, [ScrollParamsType]>(useAction!.scroll, {
-    manual: true,
-    onSuccess: (data: ScrollDataType) => {
-      let hasMore: boolean = data?.hasMore || false;
-      let records: CommentType[] = data?.records || [];
-      let nextId = data?.nextId;
+  let scrollPull = useRequest<ScrollDataType, [ScrollParamsType]>(
+    useAction!.scroll,
+    {
+      manual: true,
+      onSuccess: (data: ScrollDataType) => {
+        let hasMore: boolean = data?.hasMore || false;
+        let records: CommentType[] = data?.records || [];
+        let nextId = data?.nextId;
 
-      setDefaultParams({ nextId: nextId });
-      setDataSource([...dataSource, ...records] as CommentType[]);
-      setHasMore(hasMore);
+        setDefaultParams({ nextId: nextId });
+        setDataSource([...dataSource, ...records] as CommentType[]);
+        setHasMore(hasMore);
+      },
     },
-  });
+  );
 
   let onLoadMore = (page = 1) => {
     scrollPull.run({ ...defaultParams, page } as ScrollParamsType);
   };
 
-  return (<div className={classNames(styles.commentGroup)}>
-    <InfiniteScroll
-      initialLoad={true}
-      pageStart={0}
-      loadMore={onLoadMore}
-      hasMore={!scrollPull.loading && hasMore}
-      useWindow={true}>
-      <List className={styles.comments}
-            loading={scrollPull?.loading}
-            locale={{ emptyText: '赶快来评论一下吧～' } as any}
-            itemLayout='horizontal'
-            header={`${total} 评论`}
-            dataSource={dataSource}
-            renderItem={(item: CommentType, index) => (
-              <List.Item key={index}>
-                <Comment
-                  reply$={reply$}
-                  replied$={replied$}
-                  comment={item}
-                  useAction={useAction}
-                  initialLoad={index < 3}
-                />
-              </List.Item>
-            )}
-      />
-    </InfiniteScroll>
-    <AffixEditor reply$={reply$} replied$={replied$} useAction={useAction} />
-  </div>);
+  return (
+    <div className={classNames(styles.commentGroup)}>
+      <InfiniteScroll
+        initialLoad={true}
+        pageStart={0}
+        loadMore={onLoadMore}
+        hasMore={!scrollPull.loading && hasMore}
+        useWindow={true}
+      >
+        <List
+          className={styles.comments}
+          loading={scrollPull?.loading}
+          locale={{ emptyText: '赶快来评论一下吧～' } as any}
+          itemLayout="horizontal"
+          header={total !== undefined ? `${total} 评论` : '评论'}
+          dataSource={dataSource}
+          renderItem={(item: CommentType, index) => (
+            <List.Item key={index}>
+              <Comment
+                reply$={reply$}
+                replied$={replied$}
+                comment={item}
+                useAction={useAction}
+                initialLoad={index < 3}
+              />
+            </List.Item>
+          )}
+        />
+      </InfiniteScroll>
+      <AffixEditor reply$={reply$} replied$={replied$} useAction={useAction} />
+    </div>
+  );
 };
 
 export default Index;