@lark-apaas/coding-template-nestjs-react-fullstack 0.1.60-alpha.20261105142153 → 0.1.60-beta.0

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

@@ -1,683 +0,0 @@
-import spriteUrl from '../assets/reaction-sprite.png';
-import { DEFAULT_USED_REACTIONS, REACTION_CATALOG, REACTION_SPRITE_SIZE } from './reaction-catalog';
-import { safeUrl, COMMENT_THEME_CLASS } from './model';
-import { useMentionContext, useMentionEntity } from './mentions';
-import { cn } from '@/lib/utils';
-import { Image } from '@/components/ui/image';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { LoaderCircle } from 'lucide-react';
-import * as React from 'react';
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-
-/** Independent of reply.content; the page owns persistence and toggle direction. */
-export interface CommentReaction {
-  key: string;
-  count: number;
-  mine: boolean;
-  /** Miaoda user IDs. This can be the server's ahead subset, not the full count. */
-  users: readonly string[];
-}
-
-export interface CommentEmoji {
-  text?: string;
-  key: string;
-  label: string;
-  group?: string;
-  /** Authenticated/custom assets are supplied by the host, not fetched via a Lark gateway here. */
-  url?: string;
-}
-
-const catalog = new Map(REACTION_CATALOG.map((entry) => [entry[0], entry]));
-// Keep the server key for explicit add/delete, alias only its visual asset.
-catalog.set('MediumThumbsup', catalog.get('THUMBSUP')!);
-export const DEFAULT_REACTION_EMOJIS: readonly CommentEmoji[] =
-  REACTION_CATALOG.map(([key, label]) => ({ key, label }));
-
-export function CommentReactionEmoji({
-  code,
-  size = 24,
-  emoji,
-}: {
-  code: string;
-  size?: number;
-  emoji?: CommentEmoji;
-}) {
-  const entry = catalog.get(code);
-  const label = emoji?.label || entry?.[1] || code;
-  if (emoji?.url && safeUrl(emoji.url))
-    return (
-      <Image
-        src={safeUrl(emoji.url)}
-        alt={label}
-        draggable={false}
-        className="replica-comment-reaction-emoji"
-        style={{ height: size, width: 'auto' }}
-      />
-    );
-  if (emoji?.text || !entry)
-    return (
-      <span className="text-xs" role="img" aria-label={label}>
-        {emoji?.text || `[${label}]`}
-      </span>
-    );
-  const [, , x, y, width, height] = entry;
-  const ratio = size / height;
-  return (
-    <span
-      role="img"
-      aria-label={label}
-      className="replica-comment-reaction-emoji"
-      style={{
-        width: width * ratio,
-        height: size,
-        backgroundImage: `url(${spriteUrl})`,
-        backgroundSize: `${REACTION_SPRITE_SIZE[0] * ratio}px ${REACTION_SPRITE_SIZE[1] * ratio}px`,
-        backgroundPosition: `${-x * ratio}px ${-y * ratio}px`,
-      }}
-    />
-  );
-}
-
-/** Same 14px default/thumbs-up icon as miaoda/replica-comment-reaction-icon.tsx. */
-function ReactionIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 14 14"
-      fill="none"
-      aria-hidden="true"
-    >
-      <path
-        d="M1.75 12.833h-.583a.29.29 0 01-.292-.291V4.958a.292.292 0 01.292-.291h.583a.292.292 0 01.292.291v7.584a.292.292 0 01-.292.291zm7-8.167h2.501c1.74 0 2.14 1.536 1.74 2.688l-1.74 4.582a1.237 1.237 0 01-1.196.902H3.204a.293.293 0 01-.292-.291v-7.59a.292.292 0 01.292-.291h.6a.583.583 0 00.477-.248L6.702.973c.164-.26.607-.46 1.078-.246.708.322 1.554 1.025 1.554 2.19 0 .44-.195 1.023-.585 1.749z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
-/** Source hover timings: 200ms open/close, 400ms suppression after selection. */
-function useReactionHover() {
-  const [open, setOpen] = useState(false);
-  const opening = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-  const closing = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-  const until = useRef(0);
-  const cancel = () => {
-    clearTimeout(opening.current);
-    clearTimeout(closing.current);
-    opening.current = undefined;
-    closing.current = undefined;
-  };
-  useEffect(() => cancel, []);
-  return {
-    open,
-    change(next: boolean) {
-      cancel();
-      if (!next || Date.now() >= until.current) setOpen(next);
-    },
-    enter() {
-      clearTimeout(closing.current);
-      if (Date.now() < until.current || open || opening.current) return;
-      opening.current = setTimeout(() => {
-        opening.current = undefined;
-        setOpen(true);
-      }, 200);
-    },
-    leave() {
-      cancel();
-      closing.current = setTimeout(() => setOpen(false), 200);
-    },
-    close() {
-      cancel();
-      until.current = Date.now() + 400;
-      setOpen(false);
-    },
-  };
-}
-
-function ReactionPanel({
-  emojis,
-  scopeKey,
-  onSelect,
-}: {
-  emojis: readonly CommentEmoji[];
-  scopeKey: string;
-  onSelect: (key: string) => void;
-}) {
-  const storageKey = `miaoda-comment-replica-reactions:${scopeKey}`;
-  const [recent, setRecent] = useState<string[]>(() => {
-    try {
-      const saved: unknown = JSON.parse(
-        localStorage.getItem(storageKey) || 'null',
-      );
-      if (Array.isArray(saved) && saved.every((key) => typeof key === 'string'))
-        return saved;
-    } catch {
-      /* Storage is optional; preserve the source default order when unavailable. */
-    }
-    return DEFAULT_USED_REACTIONS;
-  });
-  const byKey = new Map(emojis.map((emoji) => [emoji.key, emoji]));
-  const groups = new Map<string, CommentEmoji[]>();
-  for (const emoji of emojis) {
-    const title = emoji.group || '默认表情';
-    const group = groups.get(title) || [];
-    group.push(emoji);
-    groups.set(title, group);
-  }
-  const select = (key: string) => {
-    const next = [key, ...recent.filter((item) => item !== key)].slice(0, 30);
-    setRecent(next);
-    try {
-      localStorage.setItem(storageKey, JSON.stringify(next));
-    } catch {
-      /* Selection works without storage. */
-    }
-    onSelect(key);
-  };
-  const keydown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (
-      ![
-        'ArrowLeft',
-        'ArrowRight',
-        'ArrowDown',
-        'ArrowUp',
-        'Home',
-        'End',
-      ].includes(event.key)
-    )
-      return;
-    const group = (event.target as HTMLElement).closest('[data-reaction-grid]');
-    const buttons = Array.from(
-      group?.querySelectorAll<HTMLButtonElement>('button') || [],
-    );
-    if (!buttons.length) return;
-    const index = buttons.indexOf(event.target as HTMLButtonElement);
-    const delta =
-      { ArrowLeft: -1, ArrowRight: 1, ArrowDown: 9, ArrowUp: -9 }[event.key] ||
-      0;
-    const next =
-      event.key === 'Home'
-        ? 0
-        : event.key === 'End'
-          ? buttons.length - 1
-          : (index + delta + buttons.length) % buttons.length;
-    event.preventDefault();
-    buttons[next]?.focus();
-  };
-  const item = (emoji: CommentEmoji, size = 24) => {
-    const entry = catalog.get(emoji.key);
-    const width = entry
-      ? size === 28
-        ? (entry[4] / entry[5]) * size
-        : Math.max(36, (entry[4] / entry[5]) * size + 4)
-      : size;
-    return (
-      <button
-        key={emoji.key}
-        type="button"
-        aria-label={emoji.label}
-        title={emoji.label}
-        className="replica-comment-reaction-choice"
-        style={{ minWidth: width }}
-        onClick={() => select(emoji.key)}
-      >
-        <CommentReactionEmoji code={emoji.key} size={size} emoji={emoji} />
-      </button>
-    );
-  };
-  return (
-    <div
-      className="replica-comment-reaction-panel"
-      onKeyDown={keydown}
-      onClick={(event) => event.stopPropagation()}
-    >
-      <div className="replica-comment-reaction-recent">
-        <div className="replica-comment-reaction-used-title">最近使用</div>
-        <div className="replica-comment-reaction-used-grid" data-reaction-grid>
-          {recent
-            .filter((key) => byKey.has(key))
-            .slice(0, 7)
-            .flatMap((key) => {
-              const emoji = byKey.get(key);
-              return emoji ? [item(emoji, 28)] : [];
-            })}
-        </div>
-      </div>
-      <div className="replica-comment-reaction-scroll">
-        {[...groups].map(([title, group]) => (
-          <React.Fragment key={title}>
-            <div className="replica-comment-reaction-all-title">{title}</div>
-            <div className="replica-comment-reaction-grid" data-reaction-grid>
-              {group.map((emoji) => item(emoji))}
-            </div>
-          </React.Fragment>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export function CommentReactionEntry({
-  onToggle,
-  onOpenChange,
-  disabled,
-  emojis = DEFAULT_REACTION_EMOJIS,
-}: {
-  onToggle: (key: string) => void;
-  onOpenChange?: (open: boolean) => void;
-  disabled?: boolean;
-  emojis?: readonly CommentEmoji[];
-}) {
-  const { store } = useMentionContext();
-  const hover = useReactionHover();
-  const keyboardOpen = useRef(false);
-  const quick = emojis.find(e=>e.key==='THUMBSUP') ?? emojis[0];
-  useEffect(() => {
-    onOpenChange?.(hover.open);
-  }, [hover.open, onOpenChange]);
-  useEffect(() => {
-    if (disabled) hover.change(false);
-  }, [disabled]);
-  return (
-    <Popover
-      open={!disabled && hover.open}
-      onOpenChange={hover.change}
-      modal={false}
-    >
-      <PopoverTrigger asChild>
-        <button
-          type="button"
-          aria-label="表情回复"
-          title="表情回复（点击点赞，悬停选择）"
-          disabled={disabled || !quick}
-          className={cn(
-            COMMENT_THEME_CLASS,
-            'inline-flex size-[14px] items-center justify-center text-[var(--subtle-foreground)] hover:text-foreground disabled:text-muted-foreground',
-          )}
-          onMouseEnter={() => {
-            keyboardOpen.current = false;
-            hover.enter();
-          }}
-          onMouseLeave={hover.leave}
-          onKeyDown={(event) => {
-            if (event.key === 'ArrowDown') {
-              event.preventDefault();
-              keyboardOpen.current = true;
-              hover.change(true);
-            }
-          }}
-          onClick={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            hover.close();
-            if(quick)onToggle(quick.key);
-          }}
-        >
-          <ReactionIcon />
-        </button>
-      </PopoverTrigger>
-      {hover.open && !disabled ? (
-        <PopoverContent
-          align="end"
-          side="bottom"
-          sideOffset={6}
-          data-replica-comment-overlay
-          data-reaction-picker
-          className={cn(
-            COMMENT_THEME_CLASS,
-            'w-auto max-w-[calc(100vw-24px)] overflow-hidden rounded-lg border-[0.5px] p-0 data-[state=closed]:animate-none!',
-          )}
-          onOpenAutoFocus={(event) => {
-            event.preventDefault();
-            if (keyboardOpen.current && event.target instanceof HTMLElement)
-              event.target
-                .querySelector<HTMLButtonElement>('.replica-comment-reaction-choice')
-                ?.focus();
-          }}
-          onMouseEnter={hover.enter}
-          onMouseLeave={hover.leave}
-        >
-          <ReactionPanel
-            key={store.source.scopeKey}
-            scopeKey={store.source.scopeKey}
-            emojis={emojis}
-            onSelect={(key) => {
-              hover.close();
-              onToggle(key);
-            }}
-          />
-        </PopoverContent>
-      ) : null}
-    </Popover>
-  );
-}
-
-type UserClick = (userID: string, anchor: HTMLElement) => void;
-function ReactionPerson({
-  userID,
-  onUserClick,
-  avatar = false,
-  comma = false,
-}: {
-  userID: string;
-  onUserClick?: UserClick;
-  avatar?: boolean;
-  comma?: boolean;
-}) {
-  const { resolveUserRef } = useMentionContext();
-  const entity = useMentionEntity(resolveUserRef?.(userID) || {
-    kind: 'user', idType: 'apaas-user', id: userID,
-  });
-  const name: string =
-    entity?.status === 'resolved'
-      ? entity.label
-      : entity?.status === 'not-found'
-        ? '用户不存在'
-        : '用户';
-  const avatarUrl =
-    entity?.status === 'resolved' ? safeUrl(entity.avatarUrl) : undefined;
-  return (
-    <button
-      type="button"
-      className={avatar ? 'replica-comment-reaction-person' : 'replica-comment-reaction-user'}
-      onClick={(event) => {
-        event.stopPropagation();
-        onUserClick?.(userID, event.currentTarget);
-      }}
-    >
-      {avatar ? (
-        <Avatar className="mr-2.5 size-8 shrink-0">
-          <AvatarImage src={avatarUrl} alt="" />
-          <AvatarFallback>{Array.from(name)[0]}</AvatarFallback>
-        </Avatar>
-      ) : null}
-      <span className="truncate" title={name}>
-        {name}
-        {comma ? ',' : ''}
-      </span>
-    </button>
-  );
-}
-
-function ReactionBadge({
-  reaction,
-  emoji,
-  onToggle,
-  onMore,
-  onUserClick,
-}: {
-  reaction: CommentReaction;
-  emoji?: CommentEmoji;
-  onToggle?: (key: string) => void;
-  onMore: () => void;
-  onUserClick?: UserClick;
-}) {
-  const badge = useRef<HTMLDivElement>(null);
-  const [visible, setVisible] = useState(reaction.users.length);
-  useLayoutEffect(() => {
-    const element = badge.current;
-    if (!element?.parentElement) return;
-    const measure = () => {
-      const names = Array.from(
-        element.querySelectorAll<HTMLElement>('[data-measure-user]'),
-      );
-      let available = Math.max(0, element.parentElement!.clientWidth - 41);
-      let count = 0;
-      const max = names.length > 6 ? 5 : names.length;
-      const moreWidth = reaction.count > max ? 50 : 0;
-      for (const name of names.slice(0, max)) {
-        const width = name.getBoundingClientRect().width + 5;
-        if (count && width + moreWidth > available) break;
-        available -= width;
-        count++;
-      }
-      setVisible(count);
-    };
-    const observer = new ResizeObserver(measure);
-    observer.observe(element.parentElement);
-    observer.observe(element);
-    const labels = element.querySelector('.replica-comment-reaction-measure');
-    if (labels) observer.observe(labels);
-    measure();
-    return () => observer.disconnect();
-  }, [reaction.users, reaction.count]);
-  const count = Math.min(visible, reaction.users.length);
-  const remaining = Math.max(0, reaction.count - count);
-  return (
-    <div
-      ref={badge}
-      className="replica-comment-reaction-badge"
-      data-mine={reaction.mine || undefined}
-      onClick={(event) => event.stopPropagation()}
-    >
-      <button
-        type="button"
-        className="shrink-0"
-        aria-label={`${reaction.mine ? '撤销' : '添加'}${emoji?.label || catalog.get(reaction.key)?.[1] || reaction.key}`}
-        disabled={!onToggle}
-        onClick={() => onToggle?.(reaction.key)}
-      >
-        <CommentReactionEmoji code={reaction.key} size={18} emoji={emoji} />
-      </button>
-      <span className="replica-comment-reaction-separator" />
-      <div className="replica-comment-reaction-users">
-        {reaction.users.slice(0, count).map((userID, index) => (
-          <ReactionPerson
-            key={userID}
-            userID={userID}
-            comma={index < reaction.count - 1}
-            onUserClick={onUserClick}
-          />
-        ))}
-      </div>
-      {remaining ? (
-        <button
-          type="button"
-          className="replica-comment-reaction-more"
-          onClick={onMore}
-        >
-          +{remaining} 人
-        </button>
-      ) : null}
-      <div className="replica-comment-reaction-measure" aria-hidden="true">
-        {reaction.users.map((userID) => (
-          <span key={userID} data-measure-user>
-            <ReactionPerson userID={userID} comma />
-          </span>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export function CommentReactionList({
-  replyId,
-  reactions,
-  onToggle,
-  onUserClick,
-  loadDetails,
-  emojis = DEFAULT_REACTION_EMOJIS,
-}: {
-  replyId: string;
-  reactions: readonly CommentReaction[];
-  onToggle?: (key: string) => void;
-  onUserClick?: UserClick;
-  /** Fetch full data when the list contains only an ahead subset. */
-  loadDetails?: (signal: AbortSignal) => Promise<readonly CommentReaction[]>;
-  emojis?: readonly CommentEmoji[];
-}) {
-  const { store } = useMentionContext();
-  const sessionKey = JSON.stringify([store.source.scopeKey, replyId]);
-  const [target, setTarget] = useState<{
-    sessionKey: string;
-    key: string;
-  } | null>(null);
-  const activeKey = target?.sessionKey === sessionKey ? target.key : null;
-  const setActiveKey = (key: string | null) =>
-    setTarget(key === null ? null : { sessionKey, key });
-  const [full, setFull] = useState<{
-    sessionKey: string;
-    data: readonly CommentReaction[];
-  } | null>(null);
-  const [error, setError] = useState('');
-  const [retry, setRetry] = useState(0);
-  const latest = useRef({ reactions, loadDetails });
-  latest.current = { reactions, loadDetails };
-  const open =
-    activeKey !== null && reactions.some((reaction) => reaction.count > 0);
-  useEffect(() => {
-    setFull(null);
-    setError('');
-    if (!open) return;
-    const controller = new AbortController();
-    const load = latest.current.loadDetails;
-    if (!load) {
-      setFull({ sessionKey, data: latest.current.reactions });
-      return;
-    }
-    void load(controller.signal)
-      .then((data) => {
-        if (!controller.signal.aborted) setFull({ sessionKey, data });
-      })
-      .catch((cause: unknown) => {
-        if (!controller.signal.aborted)
-          setError(cause instanceof Error ? cause.message : '加载失败，请重试');
-      });
-    return () => controller.abort();
-  }, [open, sessionKey, retry]);
-  const data = loadDetails
-    ? full?.sessionKey === sessionKey
-      ? full.data
-      : null
-    : reactions;
-  const selected =
-    data?.find((reaction) => reaction.key === activeKey) || data?.[0];
-  if (!reactions.length) return null;
-  return (
-    <>
-      <div
-        className={cn(COMMENT_THEME_CLASS, 'mt-1 flex flex-wrap gap-1')}
-        data-replica-comment-reactions
-      >
-        {reactions
-          .filter((reaction) => reaction.count > 0)
-          .map((reaction) => (
-            <ReactionBadge
-              key={reaction.key}
-              reaction={reaction}
-              emoji={emojis.find((emoji) => emoji.key === reaction.key)}
-              onToggle={onToggle}
-              onMore={() => setActiveKey(reaction.key)}
-              onUserClick={onUserClick}
-            />
-          ))}
-      </div>
-      <Dialog
-        open={open}
-        onOpenChange={(next) => {
-          if (!next) setActiveKey(null);
-        }}
-      >
-        <DialogContent
-          data-replica-comment-overlay
-          className={cn(
-            COMMENT_THEME_CLASS,
-            'w-auto max-w-[calc(100vw-24px)] gap-0 p-0 sm:max-w-none',
-          )}
-          onClick={(event) => event.stopPropagation()}
-          onInteractOutside={(event) => {
-            if (
-              event.target instanceof Element &&
-              event.target.closest('[data-replica-comment-overlay]')
-            )
-              event.preventDefault();
-          }}
-          aria-describedby={undefined}
-        >
-          <DialogHeader className="px-6 pb-2 pt-6 text-left">
-            <DialogTitle className="text-base font-medium leading-6">
-              回应详情
-            </DialogTitle>
-          </DialogHeader>
-          <div className="px-6 pb-6">
-            <div className="replica-comment-reaction-detail">
-              {error ? (
-                <div
-                  role="alert"
-                  className="flex h-full items-center justify-center gap-2 text-sm"
-                >
-                  <span>{error}</span>
-                  <button
-                    type="button"
-                    className="text-primary"
-                    onClick={() => setRetry((value) => value + 1)}
-                  >
-                    重试
-                  </button>
-                </div>
-              ) : !data ? (
-                <div className="flex h-full items-center justify-center">
-                  <LoaderCircle
-                    className="size-5 animate-spin text-primary"
-                    aria-label="正在加载回应人员"
-                  />
-                </div>
-              ) : (
-                <>
-                  <div
-                    className="replica-comment-reaction-tabs"
-                    role="tablist"
-                    aria-label="回应表情"
-                  >
-                    {data.map((reaction) => (
-                      <button
-                        type="button"
-                        role="tab"
-                        key={reaction.key}
-                        aria-selected={selected?.key === reaction.key}
-                        onClick={() => setActiveKey(reaction.key)}
-                      >
-                        <CommentReactionEmoji
-                          code={reaction.key}
-                          size={20}
-                          emoji={emojis.find(
-                            (emoji) => emoji.key === reaction.key,
-                          )}
-                        />
-                        <span>{reaction.count}</span>
-                      </button>
-                    ))}
-                  </div>
-                  <div
-                    className="replica-comment-reaction-detail-border"
-                    role="tabpanel"
-                    aria-label="回应人员"
-                  >
-                    <div className="replica-comment-reaction-detail-users">
-                      {selected?.users.map((userID) => (
-                        <ReactionPerson
-                          key={userID}
-                          userID={userID}
-                          avatar
-                          onUserClick={onUserClick}
-                        />
-                      ))}
-                    </div>
-                    {selected && selected.count > selected.users.length ? (
-                      <p className="p-3 text-xs text-[var(--subtle-foreground)]">
-                        当前仅显示部分回应人员。
-                      </p>
-                    ) : null}
-                  </div>
-                </>
-              )}
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}