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

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

@@ -0,0 +1,681 @@
+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 {
+  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 (!entry)
+    return (
+      <span className="text-xs" role="img" aria-label={label}>
+        [{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);
+  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}
+          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();
+            onToggle('THUMBSUP');
+          }}
+        >
+          <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>
+    </>
+  );
+}