@lark-apaas/coding-template-nestjs-react-fullstack 0.1.57-alpha.20261103143319 → 0.1.57

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

@@ -1,517 +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 { createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState, type HTMLAttributes, type ReactNode } 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>
-  );
-}
-
-interface DiscussionSession {
-  panel: DiscussionPanelProps;
-  replyTarget: { commentID: string; reply: DiscussionReply } | null;
-  replyRevision: number;
-  composing: boolean;
-  hasComposer: boolean;
-  registerComposer: () => () => void;
-  reply: (commentID: string, reply: DiscussionReply) => void;
-  cancelReply: () => void;
-  submit: DiscussionPanelProps['onSubmit'];
-}
-
-const DiscussionContext = createContext<DiscussionSession | null>(null);
-
-function useDiscussion() {
-  const session = useContext(DiscussionContext);
-  if (!session) throw new Error('CommentList and CommentComposer must be used inside CommentsProvider');
-  return session;
-}
-
-/** Owns interaction state and entity resolution, but deliberately renders no DOM. */
-export function DiscussionProvider({ panel, children }: { panel: DiscussionPanelProps; children: ReactNode }) {
-  const [replyTarget, setReplyTarget] = useState<DiscussionSession['replyTarget']>(null);
-  const [replyRevision, setReplyRevision] = useState(0);
-  const [composing, setComposing] = useState(false);
-  const [composerCount, setComposerCount] = useState(0);
-  const composeBusy = useRef(false);
-  const registerComposer = useCallback(() => {
-    setComposerCount((count) => count + 1);
-    return () => setComposerCount((count) => count - 1);
-  }, []);
-  const allowCompose = panel.allowCompose ?? Boolean(panel.currentUser);
-  useEffect(() => {
-    if (!allowCompose || !composerCount || (replyTarget && !panel.comments.some((thread) =>
-      thread.commentID === replyTarget.commentID && thread.replies.some((reply) => reply.replyID === replyTarget.reply.replyID))))
-      setReplyTarget(null);
-  }, [allowCompose, composerCount, panel.comments, replyTarget]);
-  return (
-    <MentionProvider source={panel.source} currentUserID={panel.currentUser?.id}
-      highlightUserIDs={panel.highlightUserIDs} resolveUserRef={panel.resolveUserRef}>
-      <DiscussionContext.Provider value={{
-        panel, replyTarget, replyRevision, composing, hasComposer: composerCount > 0,
-        registerComposer,
-        reply: (commentID, reply) => {
-          if (!allowCompose || composeBusy.current) return;
-          setReplyTarget({ commentID, reply });
-          setReplyRevision((value) => value + 1);
-        },
-        cancelReply: () => setReplyTarget(null),
-        submit: async (draft) => {
-          if (composeBusy.current) return;
-          composeBusy.current = true;
-          setComposing(true);
-          try { await panel.onSubmit(draft); setReplyTarget(null); }
-          finally { composeBusy.current = false; setComposing(false); }
-        },
-      }}>{children}</DiscussionContext.Provider>
-    </MentionProvider>
-  );
-}
-
-/** Shared list body, also used by the compatibility panel without extra wrappers. */
-export const DiscussionList = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function DiscussionList(
-  { className = '', ...props }, forwardedRef,
-) {
-  const { panel, replyTarget, reply, composing, hasComposer } = useDiscussion();
-  const list = useRef<HTMLDivElement>(null);
-  useImperativeHandle(forwardedRef, () => list.current!, []);
-  const [gallery, setGallery] = useState<{ images: DiscussionImage[]; index: number } | null>(null);
-  const replies = panel.comments.flatMap((thread) => thread.replies);
-  const previousIds = useRef(new Set(replies.map((item) => item.replyID)));
-  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);
-  }, []);
-  useEffect(() => {
-    if (panel.submittedReplyID) {
-      const target = list.current?.querySelector(`[data-reply-id="${CSS.escape(panel.submittedReplyID)}"]`);
-      if (target) { target.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); panel.onScrolledToReply?.(); }
-    }
-    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);
-  }, [panel, replies, gallery]);
-  const itemPanel = { ...panel, allowCompose: Boolean(panel.allowCompose && hasComposer) };
-  return <>
-    <div {...props} className={`replica-discussion-list ${className}`} 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={itemPanel} replying={replyTarget?.commentID === thread.commentID && replyTarget.reply.replyID === comment.replyID}
-              replyDisabled={composing} onReply={() => reply(thread.commentID, comment)}
-              onPreviewImage={(images, index) => setGallery({ images, index })} />
-          ))}
-        </div>
-      ))}
-      {!replies.length && (panel.emptyState === undefined ? <div className="replica-empty">当前记录暂无评论</div> : panel.emptyState)}
-      {panel.listFooter}
-    </div>
-    {gallery && <DiscussionImageViewer images={gallery.images} initialIndex={gallery.index} onClose={() => setGallery(null)} />}
-  </>;
-});
-
-export function DiscussionComposerView({ placeholder, disabled }: { placeholder?: string; disabled?: boolean }) {
-  const { panel, replyTarget, replyRevision, cancelReply, submit, registerComposer } = useDiscussion();
-  const allowCompose = panel.allowCompose ?? Boolean(panel.currentUser);
-  useEffect(() => allowCompose ? registerComposer() : undefined, [allowCompose, registerComposer]);
-  const replyPerson = useMentionEntity(replyTarget?.reply.author || { kind: 'user', idType: 'snapshot', id: 'unknown' });
-  if (!allowCompose) return null;
-  const name = replyTarget ? replyPerson?.status === 'resolved' ? replyPerson.label : '评论者' : undefined;
-  return <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={name} placeholder={name ? `回复 ${name}...` : placeholder || '添加新的评论...'}
-    disabled={disabled} onCancel={cancelReply} onSubmit={submit} />;
-}
-
-/** Existing DOM and spacing are retained for callers of CommentPanel. */
-export function DiscussionLayout() {
-  const { panel } = useDiscussion();
-  const allowCompose = panel.allowCompose ?? Boolean(panel.currentUser);
-  const count = panel.comments.reduce((sum, thread) => sum + thread.replies.length, 0);
-  return <section className={`${COMMENT_THEME_CLASS} replica-discussion ${panel.className || ''}`} aria-label="评论区域">
-    <header className="replica-discussion-header">评论 ({count})</header>
-    <DiscussionList />
-    {allowCompose && <div className="replica-discussion-footer"><DiscussionComposerView /></div>}
-  </section>;
-}