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

package/template/client/src/components/business-ui/comment/comment-content.tsx

@@ -0,0 +1,235 @@
+import { DocumentIcon } from './document-icon';
+import { fromApiContent } from './content';
+import {
+  USER_MENTION_CLASS,
+  INPUT_USER_MENTION_CLASS,
+  INPUT_USER_MENTION_LABEL_CLASS,
+  COMMENT_THEME_CLASS,
+  USER_MENTION_SELF_CLASS,
+  atUserLabel,
+  USER_MENTION_LABEL_CLASS,
+  DOCUMENT_MENTION_CLASS,
+  DOCUMENT_MENTION_UNREADABLE_CLASS,
+} from './mention-appearance';
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import {
+  mentionLabel,
+  normalizeValue,
+  safeUrl,
+} from './content';
+import {
+  useMentionContext,
+  useMentionEntity,
+  useResolveComment,
+} from './mention-provider';
+import type {
+  CommentMentionClickHandler,
+  CommentApiContent,
+  CommentPart,
+  CommentValue,
+} from './types';
+
+function Mention({
+  part,
+  onMentionClick,
+  mentionVariant,
+}: {
+  part: Extract<CommentPart, { type: 'mention' }>;
+  onMentionClick?: CommentMentionClickHandler;
+  mentionVariant?: 'text' | 'pill';
+}) {
+  const { strict, store, currentUserID } = useMentionContext();
+  const result = useMentionEntity(part.ref);
+  const label = mentionLabel(part.ref, part.label, result, strict);
+  if (part.ref.kind === 'document') {
+    const resolved = result?.status === 'resolved' ? result : undefined;
+    const documentHref = safeUrl(
+      resolved?.href || (!strict ? part.href : undefined),
+    );
+    const metadata =
+      resolved?.document || (!strict ? part.document : undefined);
+    const title = resolved
+      ? resolved.label
+      : result?.status === 'forbidden' ||
+          result?.status === 'not-found' ||
+          strict
+        ? label
+        : part.label;
+    const body = (
+      <>
+        {title ? (
+          <DocumentIcon refValue={part.ref} metadata={metadata} />
+        ) : null}
+        <span>{title || documentHref || '文档'}</span>
+      </>
+    );
+    if (documentHref)
+      return (
+        <a
+          className={
+            result?.status === 'forbidden' || resolved?.readable === false
+              ? DOCUMENT_MENTION_UNREADABLE_CLASS
+              : DOCUMENT_MENTION_CLASS
+          }
+          href={documentHref}
+          target="_blank"
+          rel="noopener noreferrer"
+          data-doclink="true"
+          data-doclink-token={part.ref.id}
+          data-doclink-type={part.ref.resourceType}
+          onClick={(event) => event.stopPropagation()}
+          onMouseDown={(event) => event.preventDefault()}
+        >
+          {body}
+        </a>
+      );
+    if (result?.status === 'error')
+      return (
+        <button
+          type="button"
+          className={DOCUMENT_MENTION_CLASS}
+          title="信息加载失败，点击重试"
+          onClick={() => store.ensure([part.ref], true)}
+        >
+          {body}
+        </button>
+      );
+    return <span className={DOCUMENT_MENTION_CLASS}>{body}</span>;
+  }
+  const userLabelClass =
+    mentionVariant === 'pill'
+      ? INPUT_USER_MENTION_LABEL_CLASS
+      : part.ref.id === currentUserID
+        ? USER_MENTION_SELF_CLASS
+        : USER_MENTION_LABEL_CLASS;
+  const body = (
+    <span
+      className={cn(
+        userLabelClass,
+        result?.status === 'forbidden' && 'text-muted-foreground',
+      )}
+    >
+      {atUserLabel(label)}
+    </span>
+  );
+  const className =
+    mentionVariant === 'pill' ? INPUT_USER_MENTION_CLASS : USER_MENTION_CLASS;
+  if (
+    onMentionClick &&
+    result?.status !== 'forbidden' &&
+    result?.status !== 'not-found'
+  )
+    return (
+      <button
+        type="button"
+        className={className}
+        onClick={(event) => onMentionClick(part.ref, event.currentTarget)}
+      >
+        {body}
+      </button>
+    );
+  if (result?.status === 'error')
+    return (
+      <button
+        type="button"
+        className={className}
+        title="信息加载失败，点击重试"
+        onClick={() => store.ensure([part.ref], true)}
+      >
+        {body}
+      </button>
+    );
+  return <span className={className}>{body}</span>;
+}
+
+export type CommentContentProps = {
+  className?: string;
+  onMentionClick?: CommentMentionClickHandler;
+  mentionVariant?: 'text' | 'pill';
+} & (
+  | { value: CommentValue; content?: never }
+  | { content: readonly CommentApiContent[]; value?: never }
+);
+
+/** Pass API content with userID only; metadata is fetched internally in batches. */
+export function CommentContent(props: CommentContentProps) {
+  const { className, onMentionClick, mentionVariant = 'text' } = props;
+  let normalized: CommentValue;
+  try {
+    normalized = props.value
+      ? normalizeValue(props.value)
+      : fromApiContent(props.content!);
+  } catch {
+    return (
+      <p role="alert" className="text-sm text-destructive">
+        评论内容格式无效，无法展示
+      </p>
+    );
+  }
+  return React.createElement(ResolvedContent, {
+    value: normalized,
+    className,
+    onMentionClick,
+    mentionVariant,
+  });
+}
+
+function ResolvedContent({
+  value: normalized,
+  className,
+  onMentionClick,
+  mentionVariant,
+}: {
+  value: CommentValue;
+  className?: string;
+  onMentionClick?: CommentMentionClickHandler;
+  mentionVariant?: 'text' | 'pill';
+}) {
+  useResolveComment(normalized);
+  return (
+    <div
+      className={cn(
+        COMMENT_THEME_CLASS,
+        'text-foreground text-sm leading-[22px]',
+        className,
+      )}
+    >
+      <div className="whitespace-pre-wrap break-words">
+        {normalized.content.map((part, index) =>
+          part.type === 'text' ? (
+            part.text
+          ) : part.type === 'break' ? (
+            <br key={index} />
+          ) : part.type === 'link' ? (
+            <a
+              key={index}
+              href={safeUrl(part.url)}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="break-words text-primary no-underline hover:underline"
+              onClick={(event) => event.stopPropagation()}
+            >
+              {part.url}
+            </a>
+          ) : part.type === 'unresolved-mention' ? (
+            <span
+              key={index}
+              className="text-subtle-foreground"
+              title="原评论缺少被提及对象的信息"
+            >
+              引用信息缺失
+            </span>
+          ) : (
+            <Mention
+              key={index}
+              part={part}
+              onMentionClick={onMentionClick}
+              mentionVariant={mentionVariant}
+            />
+          ),
+        )}
+      </div>
+    </div>
+  );
+}

package/template/client/src/components/business-ui/comment/comment-input.tsx

@@ -0,0 +1,191 @@
+import {
+  useEffect,
+  useImperativeHandle,
+  useCallback,
+  useRef,
+  useState,
+  type ComponentType,
+} from 'react';
+import * as React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { COMMENT_THEME_CLASS } from './mention-appearance';
+import { CommentContent } from './comment-content';
+import { useMentionContext } from './mention-provider';
+import type {
+  CommentInputProps,
+  CommentInputHandle,
+  CommentEditorProps,
+} from './types';
+import { emptyComment, normalizeValue, readApiContent } from './content';
+
+let modulePromise: Promise<typeof import('./editor')> | undefined;
+function loadEditor() {
+  // Reset rejected imports so explicit retry actually executes import again.
+  return (modulePromise ||= import('./editor').catch((error) => {
+    modulePromise = undefined;
+    throw error;
+  }));
+}
+export function preloadCommentEditor() {
+  void loadEditor().catch(() => {});
+}
+
+/** Public entry keeps editing and uploads deferred. A session change resets all work. */
+export function CommentInput(props: CommentInputProps) {
+  const { store } = useMentionContext();
+  try {
+    normalizeValue(props.value);
+  } catch {
+    return (
+      <p role="alert" className="text-sm text-destructive">
+        评论内容格式无效，无法编辑
+      </p>
+    );
+  }
+  return (
+    <ErrorBoundary
+      key={JSON.stringify([store.source.scopeKey, props.documentKey])}
+      fallbackRender={({ resetErrorBoundary }) => (
+        <div
+          role="alert"
+          className="rounded-lg border p-3 text-sm text-destructive"
+        >
+          编辑器发生错误，输入内容已保留。
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={resetErrorBoundary}
+          >
+            重新加载
+          </Button>
+        </div>
+      )}
+    >
+      <InputSession {...props} />
+    </ErrorBoundary>
+  );
+}
+
+function InputSession(props: CommentInputProps) {
+  const [Editor, setEditor] =
+    React.useState<ComponentType<CommentEditorProps> | null>(null);
+  const latest = useRef(props);
+  latest.current = props;
+  const editorRef = useRef<CommentInputHandle | null>(null);
+  const editable = useRef(true);
+  const [enabled, setEnabled] = useState(true);
+  const loadingRef = useRef(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const alive = useRef(true);
+  useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+    };
+  }, []);
+  const activate = useCallback(async () => {
+    if (loadingRef.current || latest.current.disabled || !editable.current)
+      return;
+    loadingRef.current = true;
+    setLoading(true);
+    setError('');
+    try {
+      const module = await loadEditor();
+      if (alive.current) setEditor(() => module.default);
+    } catch {
+      if (alive.current) setError('编辑器加载失败，请重试');
+    } finally {
+      loadingRef.current = false;
+      if (alive.current) setLoading(false);
+    }
+  }, []);
+  useImperativeHandle(
+    props.ref,
+    () => ({
+      getContent: () =>
+        editorRef.current?.getContent() ?? readApiContent(latest.current.value),
+      getImages: () => editorRef.current?.getImages() ?? [],
+      clearImages() {
+        if (!alive.current) return;
+        editorRef.current?.clearImages();
+      },
+      clear() {
+        if (!alive.current) return;
+        if (editorRef.current) editorRef.current.clear();
+        else {
+          const value = emptyComment();
+          latest.current = { ...latest.current, value };
+          latest.current.onChange(value);
+        }
+      },
+      setEditable(next) {
+        if (!alive.current) return;
+        editable.current = next;
+        editorRef.current?.setEditable(next);
+        setEnabled(next);
+      },
+      focus() {
+        if (!alive.current) return;
+        if (editorRef.current) editorRef.current.focus();
+        else void activate();
+      },
+    }),
+    [activate],
+  );
+  const { ref: _ref, ...editorProps } = props;
+  if (Editor)
+    return (
+      <Editor
+        {...editorProps}
+        disabled={props.disabled || !enabled}
+        editorRef={editorRef}
+      />
+    );
+  return (
+    <div className={cn(COMMENT_THEME_CLASS, props.className)}>
+      <div className="relative flex min-h-[34px] flex-col justify-center rounded-[6px] border-[0.5px] border-border bg-card px-3 py-[5px] transition-colors hover:border-primary focus-within:border-primary">
+        <div
+          aria-hidden
+          className="pointer-events-none w-full text-sm leading-[22px]"
+        >
+          {loading || error ? (
+            <span className="text-muted-foreground">
+              {loading ? '正在加载编辑器…' : '重试加载编辑器'}
+            </span>
+          ) : props.value.content.length ? (
+            <CommentContent value={props.value} mentionVariant="pill" />
+          ) : (
+            <span className="text-muted-foreground">
+              {props.placeholder || '输入评论'}
+            </span>
+          )}
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          className="no-default-hover-elevate no-default-active-elevate absolute inset-0 h-full min-h-0 w-full rounded-[6px] p-0"
+          disabled={props.disabled || !enabled || loading}
+          aria-busy={loading}
+          onPointerEnter={preloadCommentEditor}
+          onFocus={preloadCommentEditor}
+          onClick={() => {
+            void activate();
+          }}
+        >
+          <span className="sr-only">
+            {error ? '重试加载编辑器' : props.placeholder || '输入评论'}
+          </span>
+        </Button>
+      </div>
+      {error ? (
+        <p role="alert" className="mt-2 text-xs text-destructive">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/template/client/src/components/business-ui/comment/comment-provider.tsx

@@ -0,0 +1,40 @@
+import { useMemo, type ReactNode } from 'react';
+import * as React from 'react';
+import { getAppId } from '../user-select/utils';
+import { useCurrentUserProfile } from '@lark-apaas/client-toolkit/hooks/useCurrentUserProfile';
+import { createAppCommentSource, withDocumentSource } from './app-source';
+import { MentionProvider } from './mention-provider';
+import type { CommentDataSource, CommentDocumentSource } from './types';
+
+/** Configure the built-in UserDisplay data service once for the input and list. */
+export function CommentProvider({
+  children,
+  scopeKey,
+  currentUserID,
+  recommend,
+  documents,
+}: {
+  children: ReactNode;
+  scopeKey?: string;
+  currentUserID?: string;
+  recommend?: CommentDataSource['recommend'];
+  documents?: CommentDocumentSource;
+}) {
+  const user = useCurrentUserProfile();
+  const scope = JSON.stringify([
+    typeof window === 'undefined' ? null : getAppId(window.location.pathname),
+    scopeKey || user.user_id || 'pending',
+  ]);
+  const source = useMemo(() => {
+    const people = { ...createAppCommentSource(scope), recommend };
+    return documents ? withDocumentSource(people, documents) : people;
+  }, [scope, recommend, documents]);
+  return (
+    <MentionProvider
+      source={source}
+      currentUserID={currentUserID || user.user_id}
+    >
+      {children}
+    </MentionProvider>
+  );
+}