@lark-apaas/coding-template-nestjs-react-fullstack 0.1.55-alpha.20261101083729 → 0.1.56

package/template/client/src/components/business-ui/record-comments/internal/discussion.tsx

@@ -1,535 +0,0 @@
-import type { DiscussionReply, DiscussionImage, DiscussionPanelProps } from './view-types';
-import type { MentionRef } from '../types';
-import { COMMENT_THEME_CLASS, formatCommentTime, commentFailureMessage } from './model';
-import { DiscussionIcon } from './icons';
-import { DiscussionImageViewer } from './images';
-import { DiscussionComposer } from './composer';
-import { CommentReactionEntry, CommentReactionList } from './reactions';
-import { CommentContent } from './content';
-import { MentionProvider, useMentionEntity } from './mentions';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { LockKeyhole } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
-
-function PersonAvatar({
-  refValue,
-  small,
-  onClick,
-}: {
-  refValue: MentionRef;
-  small?: boolean;
-  onClick?: (anchor: HTMLElement) => void;
-}) {
-  const person = useMentionEntity(refValue);
-  return (
-    <button
-      type="button"
-      className="replica-author-avatar"
-      data-small={small || undefined}
-      aria-label={`查看${person?.status === 'resolved' ? person.label : '评论者'}的人员卡片`}
-      onClick={(event) => onClick?.(event.currentTarget)}
-    >
-      <svg viewBox="0 0 72 72" aria-hidden="true">
-        <circle fill="#BBBFC4" cx="36" cy="36" r="36" />
-        <path
-          d="M30 37h12c5.523 0 12 4.286 12 12v4a2 2 0 01-2 2H20a2 2 0 01-2-2v-4c0-7.708 6.477-12 12-12zm6-2c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10z"
-          fill="#FFF"
-        />
-      </svg>
-      {person?.status === 'resolved' && person.avatarUrl && (
-        <img src={person.avatarUrl} alt="" />
-      )}
-    </button>
-  );
-}
-function CommentTime({ time, edited }: { time: number; edited?: boolean }) {
-  const [, tick] = useState(0);
-  useEffect(() => {
-    const timer = window.setInterval(() => tick((value) => value + 1), 20000);
-    return () => clearInterval(timer);
-  }, []);
-  // Derive from the current timestamp on every render; an edit must not wait
-  // for the next relative-time timer before showing its new time.
-  const label = formatCommentTime(time);
-  return (
-    <time
-      className="replica-time"
-      dateTime={new Date(time * 1000).toISOString()}
-      title={new Date(time * 1000).toLocaleString('zh-CN')}
-    >
-      {label}
-      {edited ? ' （编辑过）' : ''}
-    </time>
-  );
-}
-function ReplyItem({
-  comment,
-  commentID,
-  child,
-  panel,
-  replying,
-  onReply,
-  onPreviewImage,
-  replyDisabled,
-}: {
-  comment: DiscussionReply;
-  commentID: string;
-  child: boolean;
-  panel: DiscussionPanelProps;
-  replying: boolean;
-  onReply: () => void;
-  onPreviewImage: (images: DiscussionImage[], index: number) => void;
-  replyDisabled?: boolean;
-}) {
-  const person = useMentionEntity(comment.author || { kind: 'user', idType: 'snapshot', id: 'unknown' });
-  const [editing, setEditing] = useState(false);
-  const [editedLocally, setEditedLocally] = useState(false);
-  const [menu, setMenu] = useState(false);
-  const [picker, setPicker] = useState(false);
-  const [error, setError] = useState('');
-  const reactionBusy = useRef(false);
-  const deleteBusy = useRef(false);
-  const [reacting, setReacting] = useState(false);
-  const owned = Boolean(
-    panel.currentUser && comment.author &&
-    [panel.currentUser.id, ...(panel.currentUserAliases || [])].includes(
-      comment.author.id,
-    ),
-  );
-  const mutation = comment.mutation;
-  const mutationBlocked = Boolean(mutation || comment.mutationBlocked);
-  const pendingAdd = mutation?.kind === 'add' && mutation.phase === 'sending';
-  const [showPending, setShowPending] = useState(false);
-  useEffect(() => {
-    setShowPending(false);
-    if (!pendingAdd) return;
-    const timer = setTimeout(() => setShowPending(true), 500);
-    return () => clearTimeout(timer);
-  }, [mutation?.id, pendingAdd]);
-  const mutationFailed = mutation?.phase === 'failed' || mutation?.phase === 'uncertain';
-  const mutationError = /network|timeout|网络|超时|结果未知/i.test(mutation?.message ?? '')
-    ? '网络异常，请稍后重试' : /权限/.test(mutation?.message ?? '') ? '暂无权限评论此文档' : mutation?.kind === 'edit' ? '评论修改失败' : mutation?.kind === 'delete' ? '评论删除失败' : '评论发送失败';
-  const canEdit = !mutationBlocked && (comment.permissions?.canEdit ?? owned);
-  const canDelete = !mutationBlocked && (comment.permissions?.canDelete ?? owned);
-  const canCopyLink = !mutationBlocked && (comment.permissions?.canCopyLink ?? owned);
-  useEffect(() => { if (!canEdit) setEditing(false); }, [canEdit]);
-  const canCompose = !mutationBlocked && (panel.allowCompose ?? Boolean(panel.currentUser));
-  const canReact = !mutationBlocked && (comment.permissions?.canReact ?? true) && (panel.allowReact ?? Boolean(panel.currentUser));
-  const handleToggleReaction = async (key: string) => {
-    if (reactionBusy.current || !canReact) return;
-    reactionBusy.current = true;
-    setReacting(true);
-    setError('');
-    try { await panel.onToggleReaction(commentID, comment.replyID, key); }
-    catch (cause) { setError(commentFailureMessage(cause, '回应失败，请重试')); }
-    finally { reactionBusy.current = false; setReacting(false); }
-  };
-  const handleProfile = (anchor: HTMLElement) =>
-    comment.author && panel.onMentionClick?.(comment.author, anchor);
-  return (
-    <article
-      className={`replica-reply ${child ? 'replica-reply-child' : ''} ${replying || editing ? 'replica-reply-target' : ''}`}
-      tabIndex={0}
-      data-comment-id={commentID}
-      data-reply-id={comment.replyID}
-      data-tools-open={menu || picker || undefined}
-      data-mutation-state={mutation?.phase}
-      aria-busy={mutation?.phase === 'sending' || undefined}
-    >
-      <PersonAvatar
-        refValue={comment.author || { kind: 'user', idType: 'snapshot', id: 'unknown' }}
-        small={child}
-        onClick={handleProfile}
-      />
-      <div className="replica-reply-main">
-        <div className="replica-reply-info">
-          <button
-            type="button"
-            className="replica-author-name"
-            onClick={(event) => handleProfile(event.currentTarget)}
-          >
-            {person?.status === 'resolved' ? person.label : comment.author && !person ? '加载中…' : '未知用户'}
-          </button>
-          {mutation?.phase !== 'sending' && !mutationFailed && <CommentTime time={comment.updateTime ?? comment.createTime} edited={comment.edited || editedLocally} />}
-          {comment.private && (
-            <LockKeyhole
-              size={12}
-              className="replica-private-marker"
-              aria-label="私有评论"
-            />
-          )}
-          <div className="replica-reply-controls" hidden={editing}>
-            {panel.showReactions !== false && canReact && <CommentReactionEntry
-              disabled={reacting}
-              onToggle={(key) => { void handleToggleReaction(key); }}
-              onOpenChange={setPicker}
-            />}
-            {canCompose && <button
-              type="button"
-              className="replica-icon-button"
-              aria-label="回复评论"
-              title="回复"
-              disabled={replyDisabled}
-              onClick={onReply}
-            >
-              <DiscussionIcon name="reply" />
-            </button>}
-            {(canEdit || canDelete || canCopyLink) && (
-              <Popover open={menu} onOpenChange={setMenu}>
-                <PopoverTrigger asChild>
-                  <button
-                    type="button"
-                    className="replica-icon-button"
-                    aria-label="更多评论操作"
-                    title="更多"
-                  >
-                    <DiscussionIcon name="more" />
-                  </button>
-                </PopoverTrigger>
-                <PopoverContent
-                  align="end"
-                  sideOffset={6}
-                  data-replica-comment-overlay
-                  className={`${COMMENT_THEME_CLASS} replica-action-menu`}
-                >
-                  <div
-                    role="menu"
-                    aria-label="评论操作"
-                    onKeyDown={(event) => {
-                      if (
-                        !['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(
-                          event.key,
-                        )
-                      )
-                        return;
-                      const items = Array.from(
-                        event.currentTarget.querySelectorAll<HTMLButtonElement>(
-                          '[role="menuitem"]',
-                        ),
-                      );
-                      const index = items.indexOf(
-                        event.target as HTMLButtonElement,
-                      );
-                      const next =
-                        event.key === 'Home'
-                          ? 0
-                          : event.key === 'End'
-                            ? items.length - 1
-                            : (index +
-                                (event.key === 'ArrowDown' ? 1 : -1) +
-                                items.length) %
-                              items.length;
-                      event.preventDefault();
-                      items[next]?.focus();
-                    }}
-                  >
-                    {canEdit && (
-                      <button
-                        type="button"
-                        role="menuitem"
-                        onClick={() => {
-                          setMenu(false);
-                          setEditing(true);
-                        }}
-                      >
-                        编辑
-                      </button>
-                    )}
-                    {canCopyLink && (
-                      <button
-                        type="button"
-                        role="menuitem"
-                        onClick={async () => {
-                          try {
-                            const fallback = new URL(window.location.href);
-                            fallback.searchParams.set('comment_id', commentID);
-                            fallback.searchParams.set('reply_id', comment.replyID);
-                            const link =
-                              panel.getCommentLink?.(commentID, comment) ||
-                              comment.link ||
-                              fallback.href;
-                            await navigator.clipboard.writeText(link);
-                            setMenu(false);
-                          } catch {
-                            setError('无法访问剪贴板，请重试复制链接');
-                          }
-                        }}
-                      >
-                        复制链接
-                      </button>
-                    )}
-                    {canDelete && (
-                      <button
-                        type="button"
-                        role="menuitem"
-                        onClick={async () => {
-                          if (deleteBusy.current || !canDelete) return;
-                          deleteBusy.current = true;
-                          setMenu(false);
-                          setError('');
-                          try { await panel.onDelete(commentID, comment.replyID); }
-                          catch (cause) { setError(commentFailureMessage(cause, '删除失败，请重试')); }
-                          finally { deleteBusy.current = false; }
-                        }}
-                      >
-                        删除
-                      </button>
-                    )}
-                  </div>
-                </PopoverContent>
-              </Popover>
-            )}
-          </div>
-        </div>
-        {editing ? (
-          <DiscussionComposer
-            key={comment.replyID}
-            sessionKey={`edit:${comment.replyID}`}
-            editing
-            initialValue={comment.value}
-            initialImages={comment.images}
-            onCancel={() => setEditing(false)}
-            enableDocuments={panel.enableDocuments}
-            enableImages={panel.enableEditImages ?? panel.enableImages}
-            enablePrivateComments={panel.enablePrivateComments}
-            onSubmit={async (draft) => {
-              await panel.onEdit(commentID, comment.replyID, draft.value, draft.images);
-              if (!panel.optimisticMutations) setEditedLocally(true);
-              setEditing(false);
-            }}
-          />
-        ) : (
-          <>
-            <CommentContent
-              value={comment.value}
-              className="replica-reply-body"
-              onMentionClick={panel.onMentionClick}
-              trailing={pendingAdd && showPending && !comment.images.length ? (
-                <span className="replica-mutation-loading" role="status" aria-label="正在提交评论">
-                  <svg viewBox="0 0 100 100" aria-hidden="true">
-                    <circle cx="50" cy="50" r="35" stroke="currentColor" strokeWidth="11" strokeLinecap="round" fill="none" />
-                  </svg>
-                </span>
-              ) : undefined}
-            />
-            {comment.images.length > 0 && (
-              <div className="replica-message-images">
-                {comment.images.map((image, index) => (
-                  <button
-                    type="button"
-                    key={image.id}
-                    aria-label={`预览图片 ${image.name}`}
-                    onClick={() => onPreviewImage(comment.images, index)}
-                  >
-                    <img src={image.url} alt={image.name} />
-                  </button>
-                ))}
-              </div>
-            )}
-            <div className="replica-reactions">
-              <CommentReactionList
-                replyId={comment.replyID}
-                reactions={comment.reactions}
-                onToggle={
-                  canReact && !reacting
-                    ? (key) => { void handleToggleReaction(key); }
-                    : undefined
-                }
-                loadDetails={panel.loadReactionDetails
-                  ? (signal) => panel.loadReactionDetails!(commentID, comment.replyID, signal)
-                  : undefined}
-                onUserClick={(id, anchor) =>
-                  panel.onMentionClick?.(
-                    panel.resolveUserRef?.(id) || {
-                      kind: 'user',
-                      idType: 'apaas-user',
-                      id,
-                    },
-                    anchor,
-                  )
-                }
-              />
-            </div>
-          </>
-        )}
-        {mutation && mutationFailed && <div className="replica-mutation-error" role="alert">
-          <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
-            <path d="M8 16A8 8 0 118 0a8 8 0 010 16z" fill="currentColor" />
-            <path d="M7 4l.48 6H8.5L9 4s.277-1-1-1C6.723 3 7 4 7 4z" fill="#fff" />
-            <circle fill="#fff" cx="8" cy="12" r="1" />
-          </svg>
-          <span>{mutationError}{mutation.phase === 'failed' && <button type="button" onClick={() => panel.onRetryMutation?.(mutation.id)}>点击重试</button>}</span>
-        </div>}
-        {error && (
-          <p role="alert" className="replica-error">
-            {error}
-          </p>
-        )}
-      </div>
-    </article>
-  );
-}
-
-function DiscussionPanelContent(panel: DiscussionPanelProps) {
-  const [replyTarget, setReplyTarget] = useState<{ commentID: string; reply: DiscussionReply } | null>(
-    null,
-  );
-  const [replyRevision, setReplyRevision] = useState(0);
-  const [gallery, setGallery] = useState<{
-    images: DiscussionImage[];
-    index: number;
-  } | null>(null);
-  const [composing, setComposing] = useState(false);
-  const composeBusy = useRef(false);
-  const list = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    const locate = () => {
-      const id = new URL(window.location.href).searchParams.get('reply_id');
-      list.current
-        ?.querySelectorAll('.replica-reply-linked')
-        .forEach((element) => element.classList.remove('replica-reply-linked'));
-      if (!id) return;
-      const target = list.current?.querySelector<HTMLElement>(
-        `[data-reply-id="${CSS.escape(id)}"]`,
-      );
-      if (target) {
-        target.classList.add('replica-reply-linked');
-        target.scrollIntoView({ block: 'nearest' });
-      }
-    };
-    locate();
-    window.addEventListener('popstate', locate);
-    return () => window.removeEventListener('popstate', locate);
-  }, []);
-  const allowCompose = panel.allowCompose ?? Boolean(panel.currentUser);
-  useEffect(() => { if (!allowCompose) setReplyTarget(null); }, [allowCompose]);
-  const replies = panel.comments.flatMap((thread) => thread.replies);
-  const previousIds = useRef(new Set(replies.map((item) => item.replyID)));
-  const replyPerson = useMentionEntity(
-    replyTarget
-      ? replyTarget.reply.author || { kind: 'user', idType: 'snapshot', id: 'unknown' }
-      : panel.currentUser || { kind: 'user', idType: 'snapshot', id: 'none' },
-  );
-  useEffect(() => {
-    const added = replies.filter((item) => !previousIds.current.has(item.replyID));
-    const newest = added.at(-1);
-    if (newest && panel.autoScrollNewReplies !== false)
-      list.current
-        ?.querySelector(`[data-reply-id="${CSS.escape(newest.replyID)}"]`)
-        ?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-    previousIds.current = new Set(replies.map((item) => item.replyID));
-    if (
-      gallery &&
-      !replies.some((comment) =>
-        comment.images.some((item) => item.id === gallery.images[gallery.index]?.id),
-      )
-    )
-      setGallery(null);
-    if (
-      replyTarget &&
-      !panel.comments.some((thread) => thread.commentID === replyTarget.commentID && thread.replies.some((reply) => reply.replyID === replyTarget.reply.replyID))
-    )
-      setReplyTarget(null);
-  }, [panel.comments, replyTarget, gallery]);
-  return (
-    <section
-      className={`${COMMENT_THEME_CLASS} replica-discussion ${panel.className || ''}`}
-      aria-label="评论区域"
-    >
-      <header className="replica-discussion-header">
-        评论 ({replies.length})
-      </header>
-      <div className="replica-discussion-list" ref={list}>
-        {panel.listHeader}
-        {panel.comments.map((thread) => (
-          <div className="replica-thread" key={thread.commentID} data-thread-id={thread.commentID}>
-            {thread.isSolved && <span className="replica-panel-solved">已解决</span>}
-            {thread.replies.map((comment, index) => (
-              <ReplyItem
-                key={comment.replyID}
-                comment={comment}
-                commentID={thread.commentID}
-                child={index > 0}
-                panel={panel}
-                replying={replyTarget?.commentID === thread.commentID && replyTarget.reply.replyID === comment.replyID}
-                replyDisabled={composing}
-                onReply={() => {
-                  if (composeBusy.current) return;
-                  setReplyTarget({ commentID: thread.commentID, reply: comment });
-                  setReplyRevision((value) => value + 1);
-                }}
-                onPreviewImage={(images, index) => setGallery({ images, index })}
-              />
-            ))}
-          </div>
-        ))}
-        {!replies.length && (
-          panel.emptyState === undefined ? <div className="replica-empty">当前记录暂无评论</div> : panel.emptyState
-        )}
-        {panel.listFooter}
-      </div>
-      {allowCompose && <div className="replica-discussion-footer">
-        <DiscussionComposer
-          sessionKey="new"
-          commentID={replyTarget?.commentID}
-          replyIntentKey={
-            replyTarget ? `${replyTarget.commentID}:${replyTarget.reply.replyID}:${replyRevision}` : undefined
-          }
-          replyMention={
-            replyTarget?.reply.author
-              ? {
-                  type: 'mention',
-                  ref: replyTarget.reply.author,
-                  label:
-                    replyPerson?.status === 'resolved'
-                      ? replyPerson.label
-                      : undefined,
-                }
-              : undefined
-          }
-          enableDocuments={panel.enableDocuments}
-          enableImages={panel.enableImages}
-          enablePrivateComments={panel.enablePrivateComments}
-          replyName={
-            replyTarget
-              ? replyPerson?.status === 'resolved'
-                ? replyPerson.label
-                : '评论者'
-              : undefined
-          }
-          placeholder={
-            replyTarget
-              ? `回复 ${replyPerson?.status === 'resolved' ? replyPerson.label : '评论者'}...`
-              : '添加新的评论...'
-          }
-          onCancel={() => setReplyTarget(null)}
-          onSubmit={async (draft) => {
-            composeBusy.current = true;
-            setComposing(true);
-            try { await panel.onSubmit(draft); setReplyTarget(null); }
-            finally { composeBusy.current = false; setComposing(false); }
-          }}
-        />
-      </div>}
-      {gallery && (
-        <DiscussionImageViewer
-          images={gallery.images}
-          initialIndex={gallery.index}
-          onClose={() => setGallery(null)}
-        />
-      )}
-    </section>
-  );
-}
-export function DiscussionPanel(props: DiscussionPanelProps) {
-  return (
-    <MentionProvider
-      source={props.source}
-      currentUserID={props.currentUser?.id}
-      highlightUserIDs={props.highlightUserIDs}
-      resolveUserRef={props.resolveUserRef}
-    >
-      <DiscussionPanelContent {...props} />
-    </MentionProvider>
-  );
-}