perf: 优化topic在多回复时的预览体验

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

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"
   }
 }

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}
               />

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} />