feat(comment): add mobile comment component

site/docs/overview.en-US.md

@@ -277,6 +277,13 @@ spline: explain
       <p class="name">CountDown</p>
     </a>
   </div>
+  <div class="image-wrapper">
+    <a class="item" href="./components/comment">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-comment.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-comment-dark.png" />
+      <p class="name">Comment</p>
+    </a>
+  </div>
   <div class="image-wrapper">
     <a class="item" href="./components/empty-en">
       <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-empty.png" />
@@ -484,4 +491,4 @@ spline: explain
       <p class="name">Toast</p>
     </a>
   </div>
-</section>
+</section>

site/docs/overview.md

@@ -277,6 +277,13 @@ spline: explain
       <p class="name">CountDown 倒计时</p>
     </a>
   </div>
+  <div class="image-wrapper">
+    <a class="item" href="./components/comment">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-comment.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-comment-dark.png" />
+      <p class="name">Comment 评论</p>
+    </a>
+  </div>
   <div class="image-wrapper">
     <a class="item" href="./components/empty">
       <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-empty.png" />
@@ -484,4 +491,4 @@ spline: explain
       <p class="name">Toast 轻提示</p>
     </a>
   </div>
-</section>
+</section>

site/mobile/mobile.config.js

@@ -428,5 +428,11 @@ export default {
       name: 'typography',
       component: () => import('tdesign-mobile-react/typography/_example/index.tsx'),
     },
+    {
+      title: 'Comment 评论',
+      titleEn: 'Comment',
+      name: 'comment',
+      component: () => import('tdesign-mobile-react/comment/_example/index.tsx'),
+    },
   ],
 };

site/web/site.config.js

@@ -375,6 +375,14 @@ export const docs = [
         component: () => import('tdesign-mobile-react/count-down/count-down.md'),
         componentEn: () => import('tdesign-mobile-react/count-down/count-down.en-US.md'),
       },
+      {
+        title: 'Comment 评论',
+        titleEn: 'Comment',
+        name: 'comment',
+        path: '/mobile-react/components/comment',
+        component: () => import('tdesign-mobile-react/comment/comment.md'),
+        componentEn: () => import('tdesign-mobile-react/comment/comment.en-US.md'),
+      },
       {
         title: 'Empty 空状态',
         titleEn: 'Empty',

src/comment/Comment.tsx

@@ -0,0 +1,234 @@
+import React, { ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { isObject } from 'lodash-es';
+import { ChevronDownSIcon, ChevronUpSIcon } from 'tdesign-icons-react';
+import { CommentActionItem, CommentFold, CommentFoldState, TdCommentProps } from './type';
+import { usePrefixClass } from '../hooks/useClass';
+import Avatar, { AvatarProps } from '../avatar';
+import parseTNode, { parseContentTNode } from '../_util/parseTNode';
+import { StyledProps, TNode } from '../common';
+
+export interface CommentProps extends TdCommentProps, StyledProps {}
+
+const DEFAULT_COMMENT_FOLDS: CommentFold = {
+  state: 'collapsed',
+  total: 0,
+  step: 3,
+  content: {
+    collapsed: '展开回复',
+    partial: ['展开更多回复', '收起'], // [主文案, 副文案]
+    expanded: '收起',
+  },
+};
+const Comment: React.FC<TdCommentProps> = (props) => {
+  const { actions, author, avatar, content, datetime, folds, defaultFolds, reply, children, onActions, onFolds } =
+    props;
+  const [innerFoldsState, setInnerFoldsState] = useState<CommentFoldState>(defaultFolds?.state || 'collapsed');
+  const foldSteps = useRef(0);
+  const replyBodyRef = useRef<HTMLDivElement>(null);
+  const replyInnerRef = useRef<HTMLDivElement>(null);
+  const rootClassName = usePrefixClass('comment');
+
+  const isControlled = folds !== undefined;
+  const commentFolds = folds || defaultFolds || DEFAULT_COMMENT_FOLDS;
+
+  // 受控模式下，当外部 folds.state 变化时同步 foldSteps
+  useEffect(() => {
+    if (!isControlled) {
+      return;
+    }
+    if (folds.state === 'collapsed') {
+      foldSteps.current = 0;
+    } else if (folds.state === 'expanded') {
+      foldSteps.current = (commentFolds.step || 3) - 1;
+    }
+  }, [isControlled, folds?.state, commentFolds.step]);
+
+  // 当前实际使用的折叠状态
+  const curFoldsState: CommentFoldState = isControlled ? folds.state || 'collapsed' : innerFoldsState;
+
+  // 首次渲染前同步设置高度，避免闪烁（无动画）
+  useLayoutEffect(() => {
+    const body = replyBodyRef.current;
+    const inner = replyInnerRef.current;
+    if (body && inner) {
+      body.style.height = `${inner.scrollHeight}px`;
+    }
+  }, []);
+
+  // 监听回复区内容高度变化，驱动过渡动画
+  useEffect(() => {
+    const body = replyBodyRef.current;
+    const inner = replyInnerRef.current;
+    if (!body || !inner) return;
+
+    const observer = new ResizeObserver(() => {
+      body.style.height = `${inner.scrollHeight}px`;
+    });
+
+    observer.observe(inner);
+    return () => observer.disconnect();
+  }, []);
+
+  const handleClickActions = (event: MouseEvent, action: CommentActionItem | TNode) => {
+    onActions?.({ action, e: event });
+  };
+
+  const handleClickFold = (event: MouseEvent, isExpand: boolean) => {
+    if (!isExpand) {
+      // 收起：重置为 collapsed
+      foldSteps.current = 0;
+      if (!isControlled) {
+        setInnerFoldsState('collapsed');
+      }
+      onFolds?.({
+        fold: { ...commentFolds, state: 'collapsed' },
+        e: event,
+      });
+      return;
+    }
+
+    // 展开：递增步进并计算下一状态
+    foldSteps.current += 1;
+    const nextState: CommentFoldState = foldSteps.current >= (commentFolds.step || 3) - 1 ? 'expanded' : 'partial';
+
+    if (!isControlled) {
+      setInnerFoldsState(nextState);
+    }
+    onFolds?.({
+      fold: { ...commentFolds, state: nextState },
+      e: event,
+    });
+  };
+
+  const renderAvatar = () => {
+    if (isObject(avatar) && !React.isValidElement(avatar) && typeof avatar !== 'function') {
+      return <Avatar className={`${rootClassName}__avatar`} {...(avatar as AvatarProps)} />;
+    }
+    return parseTNode(avatar);
+  };
+
+  const renderAuthor = () => <div className={`${rootClassName}__author`}>{parseTNode(author)}</div>;
+  const renderContent = () => <div className={`${rootClassName}__content`}>{parseTNode(content)}</div>;
+  const renderFooter = () => {
+    const renderActions = () => {
+      if (!actions) {
+        return null;
+      }
+      if (!Array.isArray(actions)) {
+        return (
+          <div onClick={(e) => handleClickActions(e as unknown as MouseEvent, actions)}>{parseTNode(actions)}</div>
+        );
+      }
+      const renderLeftPlacement = () =>
+        actions
+          .filter((item) => item.placement === 'start')
+          .map((item) => (
+            <div key={item.key} onClick={(e) => handleClickActions(e as unknown as MouseEvent, item)}>
+              {parseContentTNode(item.content, { disabled: item.disabled })}
+            </div>
+          ));
+      const renderRightPlacement = () =>
+        actions
+          .filter((item) => item.placement === 'end')
+          .map((item) => (
+            <div key={item.key} onClick={(e) => handleClickActions(e as unknown as MouseEvent, item)}>
+              {parseContentTNode(item.content, { disabled: item.disabled })}
+            </div>
+          ));
+      return (
+        <>
+          <div className={`${rootClassName}-block`}>{renderLeftPlacement()}</div>
+          <div className={`${rootClassName}-block`}>{renderRightPlacement()}</div>
+        </>
+      );
+    };
+    return (
+      <div className={`${rootClassName}__bottom`}>
+        <div className={`${rootClassName}__date`}>{parseTNode(datetime)}</div>
+        <div className={`${rootClassName}__actions`}>{renderActions()}</div>
+      </div>
+    );
+  };
+
+  const renderFolds = () => {
+    const renderFoldsContent = () => {
+      if (curFoldsState === 'collapsed') {
+        // 全收起
+        return (
+          <div
+            className={`${rootClassName}__folds-item`}
+            onClick={(e) => handleClickFold(e as unknown as MouseEvent, true)}
+          >
+            {commentFolds.content.collapsed as ReactNode}
+            <ChevronDownSIcon size="16px" />
+          </div>
+        );
+      }
+      if (curFoldsState === 'partial') {
+        // 半展开
+        return (
+          <>
+            <div
+              className={`${rootClassName}__folds-item`}
+              onClick={(e) => handleClickFold(e as unknown as MouseEvent, true)}
+            >
+              {commentFolds.content.partial[0] as ReactNode}
+              <ChevronDownSIcon size="16px" />
+            </div>
+            <div
+              className={`${rootClassName}__folds-item`}
+              onClick={(e) => handleClickFold(e as unknown as MouseEvent, false)}
+            >
+              {commentFolds.content.partial[1] as ReactNode}
+              <ChevronUpSIcon size="16px" />
+            </div>
+          </>
+        );
+      }
+      // 全展开
+      return (
+        <div
+          className={`${rootClassName}__folds-item`}
+          onClick={(e) => handleClickFold(e as unknown as MouseEvent, false)}
+        >
+          {commentFolds.content.expanded as ReactNode}
+          <ChevronUpSIcon size="16px" />
+        </div>
+      );
+    };
+    if (!commentFolds.total || commentFolds.total <= 1) {
+      return null;
+    }
+    return <div className={`${rootClassName}__folds`}>{renderFoldsContent()}</div>;
+  };
+
+  const renderReply = () => {
+    const replyContent = reply || children;
+    return (
+      <div className={`${rootClassName}__reply`}>
+        <div ref={replyBodyRef} className={`${rootClassName}__reply-body`}>
+          <div ref={replyInnerRef} className={`${rootClassName}__reply-inner`}>
+            {parseTNode(replyContent)}
+          </div>
+        </div>
+        {renderFolds()}
+      </div>
+    );
+  };
+
+  return (
+    <div className={`${rootClassName}`}>
+      <div className={`${rootClassName}__inner`}>
+        {renderAvatar()}
+        <div className={`${rootClassName}__detail`}>
+          {renderAuthor()}
+          {renderContent()}
+          {renderFooter()}
+        </div>
+      </div>
+      {renderReply()}
+    </div>
+  );
+};
+
+export default Comment;

src/comment/_example/base.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Button, Comment, Tag } from 'tdesign-mobile-react';
+import { ThumbUpIcon, Uncomfortable1Icon } from 'tdesign-icons-react';
+
+export default function () {
+  return (
+    <div className="mobile-comment">
+      <Comment
+        avatar={{ shape: 'circle', size: '32px', image: 'https://tdesign.gtimg.com/mobile/demos/avatar1.png' }}
+        author={
+          <div className="mobile-comment__author">
+            <div>Name1 名称</div>
+            <Tag className="mobile-comment__author-tag" variant="light" theme="primary" shape="round">
+              作者
+            </Tag>
+          </div>
+        }
+        actions={[
+          { placement: 'start', content: <div className="mobile-comment__reply-button">回复</div>, key: 'reply' },
+          {
+            placement: 'end',
+            content: (
+              <div className="mobile-comment__actions">
+                <Button className="mobile-comment__actions-button" icon={<ThumbUpIcon size="14px" />} variant="text">
+                  6
+                </Button>
+                <Button
+                  icon={<Uncomfortable1Icon size="14px" />}
+                  className="mobile-comment__actions-button"
+                  variant="text"
+                />
+              </div>
+            ),
+            key: 'actions',
+          },
+        ]}
+        content="这是一段很长很长很长很长很长很长的评论内容。"
+        datetime="今天16:38·广东"
+      />
+    </div>
+  );
+}