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

package/template/client/src/components/business-ui/record-comments/comment-panel.tsx

@@ -1,202 +0,0 @@
-import type { CommentPanelProps, CommentTarget } from './comment-panel.contract';
-import { CommentMutations } from './internal/mutations';
-import { buildPanelThreads, CommentPageLoader, preparePanelDeletion, preparePanelEdit, loadPanelReactionDetails, preparePanelComment } from './internal/model';
-import { DiscussionPanel } from './internal/discussion';
-import { LoaderCircle } from 'lucide-react';
-import { useCallback, useEffect, useReducer, useRef, useState, useSyncExternalStore } from 'react';
-import './internal/styles.css';
-
-function ReadStatus({ loading, error, onRetry, empty, hasMore }: Pick<CommentPanelProps, 'loading' | 'error' | 'onRetry'> & { empty: boolean; hasMore?: boolean }) {
-  const [failure, setFailure] = useState('');
-  const [retrying, setRetrying] = useState(false);
-  const busy = useRef(false);
-  // A successful external read must clear a previous retry failure as well.
-  useEffect(() => setFailure(''), [error]);
-  const pending = loading || retrying;
-  const message = failure || error;
-  if (!empty && !pending && !message) return null;
-  const state = pending ? 'loading' : message ? 'error' : 'empty';
-  return <div className={`replica-panel-status${empty ? ' replica-panel-placeholder' : ''}`}
-    data-state={state} role={state === 'error' ? 'alert' : 'status'} aria-busy={pending}>
-    <div className="replica-panel-status-content">
-      <span>{pending ? <LoaderCircle className="size-4 animate-spin text-primary" aria-label="正在加载评论" />
-        : message || (empty && !hasMore ? '当前记录暂无评论' : null)}</span>
-      {!pending && message && onRetry && <button type="button" onClick={async () => {
-        if (busy.current) return;
-        busy.current = true; setRetrying(true); setFailure('');
-        try { await onRetry(); }
-        catch (cause) { setFailure(cause instanceof Error ? cause.message : '刷新失败，请重试'); }
-        finally { busy.current = false; setRetrying(false); }
-      }}>重试刷新</button>}
-    </div>
-  </div>;
-}
-
-function nearestScrollContainer(node: HTMLElement): HTMLElement | null {
-  for (let parent = node.parentElement; parent; parent = parent.parentElement) {
-    if (/(auto|scroll)/.test(getComputedStyle(parent).overflowY) && parent.clientHeight > 0) return parent;
-  }
-  return null;
-}
-
-function PaginationFooter({ pagination, loading, getScrollContainer }: Pick<CommentPanelProps, 'pagination' | 'loading' | 'getScrollContainer'>) {
-  const sentinel = useRef<HTMLDivElement>(null);
-  const root = useRef<HTMLElement | null>(null);
-  const [gate] = useState(() => new CommentPageLoader());
-  const [, refresh] = useReducer((value: number) => value + 1, 0);
-  const latest = useRef({ pagination, loading });
-  latest.current = { pagination, loading };
-  const alive = useRef(true);
-  const run = useRef((manual = false) => { void manual; });
-  run.current = (manual = false) => {
-    const current = latest.current;
-    if (!alive.current || current.loading || !current.pagination?.hasMore || current.pagination.loading || gate.pending) return;
-    if (!manual && (gate.error || current.pagination.error || gate.automaticLoads >= 3)) return;
-    const promise = gate.load(current.pagination, manual);
-    refresh();
-    void promise.finally(() => { if (alive.current) refresh(); });
-  };
-  const check = useCallback(() => {
-    const element = sentinel.current;
-    if (!element) return;
-    const bounds = element.getBoundingClientRect();
-    const viewport = root.current?.getBoundingClientRect();
-    const visibleTop = Math.max(0, viewport?.top ?? 0);
-    const visibleBottom = Math.min(window.innerHeight, viewport?.bottom ?? window.innerHeight);
-    if (visibleBottom > visibleTop && bounds.top <= visibleBottom + 200 && bounds.bottom >= visibleTop)
-      run.current();
-  }, []);
-  useEffect(() => {
-    alive.current = true;
-    const element = sentinel.current;
-    if (!element) return;
-    root.current = getScrollContainer ? getScrollContainer() : nearestScrollContainer(element);
-    const container = root.current ?? window;
-    const observer = new IntersectionObserver(() => check(), { root: root.current, rootMargin: '0px 0px 200px 0px' });
-    observer.observe(element);
-    const resize = new ResizeObserver(check);
-    resize.observe(root.current ?? document.documentElement);
-    const resume = (event: Event) => {
-      if (event instanceof WheelEvent && event.deltaY > 0) gate.automaticLoads = 0;
-      if (event instanceof KeyboardEvent && ['PageDown', 'End', 'ArrowDown'].includes(event.key)) gate.automaticLoads = 0;
-      check();
-    };
-    container.addEventListener('scroll', check, { passive: true });
-    if (root.current) window.addEventListener('scroll', check, { passive: true });
-    container.addEventListener('wheel', resume, { passive: true });
-    container.addEventListener('keydown', resume);
-    return () => {
-      alive.current = false;
-      observer.disconnect(); resize.disconnect();
-      container.removeEventListener('scroll', check);
-      window.removeEventListener('scroll', check);
-      container.removeEventListener('wheel', resume);
-      container.removeEventListener('keydown', resume);
-    };
-  }, [check, gate, getScrollContainer]);
-  useEffect(() => {
-    const frame = requestAnimationFrame(check);
-    return () => cancelAnimationFrame(frame);
-  });
-  const error = pagination?.hasMore && (gate.error || pagination.error);
-  const pending = gate.pending || pagination?.loading;
-  return <div ref={sentinel} className={pagination?.hasMore ? 'replica-panel-pagination' : undefined} aria-live="polite">
-    {pagination?.hasMore && (error ? <><span role="alert">{error}</span><button type="button" disabled={pending} onClick={() => run.current(true)}>重试加载</button></>
-      : pending ? <LoaderCircle className="size-4 animate-spin text-primary" aria-label="正在加载更多评论" />
-        : pagination?.hasMore ? <button type="button" disabled={loading} onClick={() => run.current(true)}>继续加载</button>
-          : null)}
-  </div>;
-}
-
-function PanelSession(props: CommentPanelProps) {
-  const latest = useRef(props);
-  latest.current = props;
-  const root = useRef<HTMLDivElement>(null);
-  const locks = useRef(new Set<string>());
-  const [submitted, setSubmitted] = useState<string>();
-  const [mutations] = useState(() => new CommentMutations());
-  useSyncExternalStore(mutations.subscribe, mutations.getVersion, mutations.getVersion);
-  const base = buildPanelThreads(props);
-  const comments = mutations.view(base);
-  useEffect(() => {
-    mutations.activate();
-    return () => mutations.dispose();
-  }, [mutations]);
-  useEffect(() => { mutations.reconcile(base); }, [base, mutations]);
-  useEffect(() => {
-    if (!submitted) return;
-    const target = root.current?.querySelector(`[data-reply-id="${CSS.escape(mutations.replyID(submitted))}"]`);
-    if (target) { target.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); setSubmitted(undefined); }
-  }, [comments, submitted, mutations]);
-  async function locked<T>(key: string, action: () => Promise<T>): Promise<T> {
-    if (locks.current.has(key)) throw new Error('该评论正在处理中，请稍后重试');
-    locks.current.add(key);
-    try { return await action(); }
-    finally { locks.current.delete(key); }
-  }
-  const allowCompose = Boolean(props.onAddComment || props.images?.onAddComment);
-  const currentUser = props.currentUserID == null ? undefined
-    : { kind: 'user' as const, idType: 'apaas-user' as const, id: String(props.currentUserID) };
-  return <div ref={root} className={`replica-comment-panel ${props.className ?? ''}`} style={props.style}>
-    <DiscussionPanel
-      source={props.mentionSource}
-      currentUser={currentUser}
-      comments={comments}
-      allowCompose={allowCompose}
-      optimisticMutations
-      onRetryMutation={(id) => mutations.retry(id)}
-      showReactions={Boolean(props.reactions)}
-      allowReact={Boolean(props.reactions?.onChange)}
-      enableImages={Boolean(props.images?.onAddComment)}
-      enableEditImages={Boolean(props.images?.onUpdateComment)}
-      enablePrivateComments={false}
-      enableDocuments={props.enableDocuments ?? false}
-      autoScrollNewReplies={false}
-      emptyState={null}
-      listHeader={<ReadStatus loading={props.loading} error={props.error} onRetry={props.onRetry}
-        empty={!comments.some((thread) => thread.replies.length > 0)} hasMore={props.pagination?.hasMore} />}
-      listFooter={props.pagination && <PaginationFooter pagination={props.pagination} loading={props.loading || Boolean(props.error)} getScrollContainer={props.getScrollContainer} />}
-      onMentionClick={props.onMentionClick}
-      getCommentLink={(commentID, reply) => props.getCommentLink?.({ recordID: props.recordID, commentID, replyID: reply.replyID }) ?? ''}
-      onSubmit={(draft) => {
-        const current = latest.current;
-        preparePanelComment(current, draft); // Validate before accepting/clearing the draft.
-        const thread = base.find((item) => item.commentID === draft.commentID);
-        const id = mutations.add(thread, draft, currentUser, () => preparePanelComment(latest.current, draft)());
-        setSubmitted(id);
-      }}
-      onEdit={(commentID, replyID, value, images) => {
-        const draft = { value, images, private: false };
-        preparePanelEdit(latest.current, commentID, replyID, draft);
-        const thread = base.find((item) => item.commentID === commentID)!;
-        mutations.edit(thread, replyID, draft, () => preparePanelEdit(latest.current, commentID, replyID, draft)());
-      }}
-      onDelete={(commentID, replyID) => {
-        if (!replyID) throw new Error('未选择要删除的评论');
-        preparePanelDeletion(latest.current, commentID, replyID);
-        const thread = base.find((item) => item.commentID === commentID)!;
-        mutations.delete(thread, replyID, () => preparePanelDeletion(latest.current, commentID, replyID)());
-      }}
-      onToggleReaction={async (commentID, replyID, emojiKey) => {
-        await locked(replyID, async () => {
-          const current = latest.current;
-          const feature = current.reactions;
-          if (!feature?.onChange) throw new Error('未提供回应写入能力');
-          const target: CommentTarget = { recordID: current.recordID, commentID, replyID };
-          if (feature.canChange?.(target) === false) throw new Error('表情状态尚未加载或当前身份不可用');
-          const existing = feature.getReactions(target).find((reaction) => reaction.emojiKey === emojiKey ||
-            (emojiKey === 'THUMBSUP' && reaction.emojiKey === 'MediumThumbsup'));
-          await feature.onChange({ ...target, emojiKey: existing?.emojiKey ?? emojiKey, action: existing?.reactedByMe ? 'remove' : 'add' });
-        });
-      }}
-      loadReactionDetails={props.reactions?.loadUsers ? (commentID, replyID, signal) => loadPanelReactionDetails(
-        latest.current, { recordID: props.recordID, commentID, replyID }, signal,
-      ) : undefined}
-    />
-  </div>;
-}
-
-/** Controlled full comment UI; all persistence is supplied by the host. */
-export function CommentPanel(props: CommentPanelProps) {
-  return <PanelSession key={JSON.stringify([props.scopeKey, props.recordID])} {...props} />;
-}

package/template/client/src/components/business-ui/record-comments/index.ts

@@ -1,7 +0,0 @@
-export { CommentPanel } from './comment-panel';
-export { createAppCommentSource, withDocumentSource } from './app-source';
-export type * from './comment-panel.contract';
-export type { CommentDataSource, CommentDocumentSource, CommentMentionClickHandler, MentionRef, MentionOption, MentionResult, MentionKind, DocumentMentionMetadata } from './types';
-
-// URL helpers for external document adapters; no requests or permissions inside.
-export { documentRefFromUrl, safeUrl } from './internal/model';