From 8ea2e9e87316f7dc917ce1d721da37e579273211 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 20 May 2022 23:19:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=B9=E4=BA=8E=E8=BF=87=E9=95=BF?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E8=87=AA=E5=8A=A8=E6=8A=98=E5=8F=A0=E5=B9=B6?=
 =?UTF-8?q?=E9=80=9A=E8=BF=87=E5=B1=95=E5=BC=80=E6=8C=89=E9=92=AE=E5=B1=95?=
 =?UTF-8?q?=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../design/components/AutoFolder/index.tsx    | 10 +++-----
 .../ChatBox/ChatMessageList/Item.tsx          | 23 ++++++++++++++-----
 web/src/styles/global.less                    |  2 ++
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/packages/design/components/AutoFolder/index.tsx b/packages/design/components/AutoFolder/index.tsx
index d4000c40..e191feb1 100644
--- a/packages/design/components/AutoFolder/index.tsx
+++ b/packages/design/components/AutoFolder/index.tsx
@@ -2,15 +2,11 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 interface AutoFolderProps {
   maxHeight: number;
-  showFullText?: string;
+  showFullText?: React.ReactNode;
   backgroundColor?: string;
 }
 export const AutoFolder: React.FC<AutoFolderProps> = React.memo((props) => {
-  const {
-    maxHeight,
-    showFullText = 'More',
-    backgroundColor = 'rgba(0,0,0,0)',
-  } = props;
+  const { maxHeight, showFullText = 'More', backgroundColor = 'white' } = props;
   const [isShowFull, setIsShowFull] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
 
@@ -61,7 +57,7 @@ export const AutoFolder: React.FC<AutoFolderProps> = React.memo((props) => {
             bottom: 0,
             textAlign: 'center',
             cursor: 'pointer',
-            backgroundImage: `linear-gradient(${backgroundColor}, white)`,
+            backgroundImage: `linear-gradient(rgba(0,0,0,0), ${backgroundColor})`,
             padding: '4px 0',
           }}
           onClick={() => setIsShowFull(true)}
diff --git a/web/src/components/ChatBox/ChatMessageList/Item.tsx b/web/src/components/ChatBox/ChatMessageList/Item.tsx
index 2011e3ba..f06b6d4e 100644
--- a/web/src/components/ChatBox/ChatMessageList/Item.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/Item.tsx
@@ -22,6 +22,7 @@ import { TcPopover } from '@/components/TcPopover';
 import { useMessageReactions } from './useMessageReactions';
 import { stopPropagation } from '@/utils/dom-helper';
 import { useUserInfoList } from 'tailchat-shared/hooks/model/useUserInfoList';
+import { AutoFolder } from 'tailchat-design';
 import './Item.less';
 
 /**
@@ -104,14 +105,24 @@ const NormalMessage: React.FC<ChatMessageItemProps> = React.memo((props) => {
         )}
 
         {/* 消息内容 */}
-        <div className="chat-message-item_body leading-6 break-words">
-          <MessageQuote payload={payload} />
+        <AutoFolder
+          maxHeight={320}
+          backgroundColor="var(--tc-content-background-color)"
+          showFullText={
+            <div className="inline-block rounded-full bg-white dark:bg-black opacity-80 py-2 px-3 hover:opacity-100">
+              {t('点击展开更多')}
+            </div>
+          }
+        >
+          <div className="chat-message-item_body leading-6 break-words">
+            <MessageQuote payload={payload} />
 
-          <span>{getMessageRender(payload.content)}</span>
+            <span>{getMessageRender(payload.content)}</span>
 
-          {/* 解释器按钮 */}
-          {useRenderPluginMessageInterpreter(payload.content)}
-        </div>
+            {/* 解释器按钮 */}
+            {useRenderPluginMessageInterpreter(payload.content)}
+          </div>
+        </AutoFolder>
 
         {/* 额外渲染 */}
         <div>
diff --git a/web/src/styles/global.less b/web/src/styles/global.less
index 87d530d3..09229c67 100644
--- a/web/src/styles/global.less
+++ b/web/src/styles/global.less
@@ -4,6 +4,7 @@
   --tc-background-image: url(../../assets/images/bg.jpg);
   --tc-content-background-image: '';
   --tc-content-background-image-opacity: 0.2;
+  --tc-content-background-color: rgba(243, 244, 246, 1); // copy from bg-content-light
 
   .tc-background {
     @apply bg-center bg-cover bg-no-repeat;
@@ -51,6 +52,7 @@
   // 深色模式覆盖
   &.dark {
     @apply text-typography-dark bg-content-dark;
+    --tc-content-background-color: rgba(55, 65, 81, 1);; // copy from bg-content-light
 
     h1,h2,h3,h4,h5,h6 {
       @apply text-typography-dark;