From 206b90d02607efb4f6f5bd7ac4675aa8b927062a Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 12 Feb 2023 00:15:07 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96topic=E5=9C=A8?=
 =?UTF-8?q?=E5=A4=9A=E5=9B=9E=E5=A4=8D=E6=97=B6=E7=9A=84=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pnpm-lock.yaml                                |  5 ++++
 .../plugins/com.msgbyte.topic/package.json    |  4 +++
 .../src/components/TopicCard.tsx              |  7 +++--
 .../src/components/TopicComments.tsx          | 28 +++++++++++++++++--
 4 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fca35262..f6aca88c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1285,11 +1285,16 @@ importers:
 
   server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic:
     specifiers:
+      '@types/lodash': ^4.14.191
       '@types/styled-components': ^5.1.26
+      lodash: ^4.17.21
       react: 18.2.0
       styled-components: ^5.3.6
       zustand: ^4.1.2
+    dependencies:
+      lodash: 4.17.21
     devDependencies:
+      '@types/lodash': 4.14.191
       '@types/styled-components': 5.1.26
       react: 18.2.0
       styled-components: 5.3.6_react@18.2.0
diff --git a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/package.json b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/package.json
index d5617d9b..57361c43 100644
--- a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/package.json
+++ b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/package.json
@@ -9,8 +9,12 @@
   },
   "devDependencies": {
     "@types/styled-components": "^5.1.26",
+    "@types/lodash": "^4.14.191",
     "react": "18.2.0",
     "styled-components": "^5.3.6",
     "zustand": "^4.1.2"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
   }
 }
diff --git a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicCard.tsx b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicCard.tsx
index 105d6430..9388d651 100644
--- a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicCard.tsx
+++ b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicCard.tsx
@@ -7,7 +7,7 @@ import {
 } from '@capital/common';
 import {
   IconBtn,
-  Input,
+  TextArea,
   UserName,
   UserAvatar,
   MessageAckContainer,
@@ -123,11 +123,14 @@ export const TopicCard: React.FC<{
 
           {showReply && (
             <ReplyBox>
-              <Input
+              <TextArea
                 autoFocus
                 placeholder={Translate.replyThisTopic}
                 disabled={loading}
                 value={comment}
+                row={2}
+                maxLength={1000}
+                showCount={true}
                 onChange={(e) => setComment(e.target.value)}
                 onPressEnter={handleComment}
               />
diff --git a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicComments.tsx b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicComments.tsx
index ee3d788e..fec1ebf1 100644
--- a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicComments.tsx
+++ b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicComments.tsx
@@ -1,8 +1,10 @@
 import { getMessageRender } from '@capital/common';
 import { UserAvatar, UserName } from '@capital/component';
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import type { GroupTopicComment } from '../types';
+import _takeRight from 'lodash/takeRight';
+import { Translate } from '../translate';
 
 const Root = styled.div`
   padding: 10px;
@@ -14,6 +16,16 @@ const Root = styled.div`
     background-color: rgba(0, 0, 0, 0.25);
   }
 
+  .show-more {
+    font-size: 12px;
+    cursor: pointer;
+    text-align: center;
+
+    &:hover {
+      color: #40a9ff;
+    }
+  }
+
   .comment-item {
     display: flex;
     margin-bottom: 10px;
@@ -37,9 +49,21 @@ const Root = styled.div`
 export const TopicComments: React.FC<{
   comments: GroupTopicComment[];
 }> = React.memo((props) => {
+  const [showAllComment, setShowAllComment] = useState(false);
+
+  const comments = showAllComment
+    ? props.comments
+    : _takeRight(props.comments, 2);
+
   return (
     <Root>
-      {props.comments.map((comment) => (
+      {props.comments.length > 2 && !showAllComment && (
+        <div className="show-more" onClick={() => setShowAllComment(true)}>
+          {Translate.loadMore}...
+        </div>
+      )}
+
+      {comments.map((comment) => (
         <div key={comment.id} className="comment-item">
           <div className="left">
             <UserAvatar userId={comment.author} size={24} />