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

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

@@ -0,0 +1,374 @@
+import { useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import { ImagePlus, LoaderCircle, RotateCcw, X } from 'lucide-react';
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
+import { Checkbox } from '@/components/ui/checkbox';
+import { safeUrl } from './content';
+import type {
+  CommentImage,
+  CommentImageUploader,
+  CommentInputProps,
+} from './types';
+
+export const IMAGE_ACCEPT =
+  'image/png,image/jpeg,image/webp,image/gif,image/avif,image/bmp';
+const imageTypes = new Set(IMAGE_ACCEPT.split(','));
+
+const defaultUpload: CommentImageUploader = async (file, { signal }) => {
+  signal.throwIfAborted();
+  const { uploadFile } = await import('../api/files/service');
+  signal.throwIfAborted();
+  const result = await uploadFile(file);
+  // The storage SDK does not support cancellation; deleted/session-stale results are ignored.
+  signal.throwIfAborted();
+  return result;
+};
+
+export function useCommentImages(props: CommentInputProps) {
+  const latest = useRef(props);
+  latest.current = props;
+  const [images, setImages] = useState<CommentImage[]>([]);
+  const [error, setError] = useState('');
+  const state = useRef<CommentImage[]>([]);
+  const fileMap = useRef(new Map<string, File>());
+  const jobs = useRef(
+    new Map<
+      string,
+      { file: File; controller: AbortController; running: boolean }
+    >(),
+  );
+  const urls = useRef(new Set<string>());
+  const running = useRef(0);
+  const alive = useRef(true);
+  const publish = (next: CommentImage[]) => {
+    state.current = next;
+    if (alive.current) {
+      setImages(next);
+      latest.current.onImagesChange?.(
+        next.map((image) => ({
+          ...image,
+          result: image.result && { ...image.result },
+        })),
+      );
+    }
+  };
+  const pump = () => {
+    if (!alive.current) return;
+    for (const [id, job] of jobs.current) {
+      if (running.current >= 3) break;
+      if (job.running) continue;
+      job.running = true;
+      running.current++;
+      // Promise wrapping also turns a synchronous custom uploader throw into an error state.
+      void Promise.resolve()
+        .then(() =>
+          (latest.current.uploadImage || defaultUpload)(job.file, {
+            signal: job.controller.signal,
+          }),
+        )
+        .then((result) => {
+          if (
+            !alive.current ||
+            job.controller.signal.aborted ||
+            jobs.current.get(id) !== job
+          )
+            return;
+          if (!result?.id || !safeUrl(result.url))
+            throw new Error('图片上传结果缺少有效的文件标识或地址');
+          publish(
+            state.current.map((image) =>
+              image.id === id
+                ? {
+                    ...image,
+                    status: 'uploaded',
+                    result: { ...result },
+                    error: undefined,
+                  }
+                : image,
+            ),
+          );
+        })
+        .catch((cause) => {
+          if (
+            !alive.current ||
+            job.controller.signal.aborted ||
+            jobs.current.get(id) !== job
+          )
+            return;
+          publish(
+            state.current.map((image) =>
+              image.id === id
+                ? {
+                    ...image,
+                    status: 'error',
+                    error:
+                      cause instanceof Error ? cause.message : '图片上传失败',
+                  }
+                : image,
+            ),
+          );
+        })
+        .finally(() => {
+          running.current--;
+          if (jobs.current.get(id) === job) jobs.current.delete(id);
+          pump();
+        });
+    }
+  };
+  const release = (image: CommentImage) => {
+    jobs.current.get(image.id)?.controller.abort();
+    jobs.current.delete(image.id);
+    fileMap.current.delete(image.id);
+    URL.revokeObjectURL(image.previewUrl);
+    urls.current.delete(image.previewUrl);
+  };
+  useEffect(() => {
+    alive.current = true;
+    latest.current.onImagesChange?.([]);
+    return () => {
+      alive.current = false;
+      for (const job of jobs.current.values()) job.controller.abort();
+      jobs.current.clear();
+      fileMap.current.clear();
+      for (const url of urls.current) URL.revokeObjectURL(url);
+      urls.current.clear();
+    };
+  }, []);
+  return {
+    images,
+    error,
+    getImages: () =>
+      state.current.map((image) => ({
+        ...image,
+        result: image.result && { ...image.result },
+      })),
+    add(files: File[]) {
+      if (!alive.current || !latest.current.enableImages) return;
+      const max = latest.current.maxImages ?? 9;
+      const maxSize = latest.current.maxImageSize ?? 10 * 1024 * 1024;
+      const added: CommentImage[] = [];
+      const errors: string[] = [];
+      for (const file of files) {
+        if (state.current.length + added.length >= max) {
+          errors.push(`最多添加 ${max} 张图片`);
+          break;
+        }
+        if (!imageTypes.has(file.type)) {
+          errors.push(`${file.name || '图片'}：不支持的图片格式`);
+          continue;
+        }
+        if (!file.size || file.size > maxSize) {
+          errors.push(
+            `${file.name || '图片'}：图片不能为空且不能超过 ${Math.round(maxSize / 1024 / 1024)} MB`,
+          );
+          continue;
+        }
+        const id = crypto.randomUUID();
+        const previewUrl = URL.createObjectURL(file);
+        urls.current.add(previewUrl);
+        added.push({
+          id,
+          name: file.name || '粘贴的图片',
+          size: file.size,
+          previewUrl,
+          status: 'uploading',
+        });
+        jobs.current.set(id, {
+          file,
+          controller: new AbortController(),
+          running: false,
+        });
+        fileMap.current.set(id, file);
+      }
+      setError([...new Set(errors)].join('；'));
+      if (added.length) {
+        publish([...state.current, ...added]);
+        pump();
+      }
+    },
+    remove(id: string) {
+      const image = state.current.find((item) => item.id === id);
+      if (!image) return;
+      release(image);
+      publish(state.current.filter((item) => item.id !== id));
+      setError('');
+      pump();
+    },
+    retry(id: string) {
+      // Failed files remain available for explicit retry, without exposing File in public state.
+      const image = state.current.find((item) => item.id === id);
+      const file = fileMap.current.get(id);
+      if (!image || image.status !== 'error' || !file || jobs.current.has(id))
+        return;
+      jobs.current.set(id, {
+        file,
+        controller: new AbortController(),
+        running: false,
+      });
+      publish(
+        state.current.map((item) =>
+          item.id === id
+            ? { ...item, status: 'uploading', error: undefined }
+            : item,
+        ),
+      );
+      pump();
+    },
+    clear() {
+      for (const image of state.current) release(image);
+      fileMap.current.clear();
+      publish([]);
+      setError('');
+    },
+  };
+}
+
+export function ImageAttachments({
+  images,
+  disabled,
+  remove,
+  retry,
+}: {
+  images: CommentImage[];
+  disabled: boolean;
+  remove: (id: string) => void;
+  retry: (id: string) => void;
+}) {
+  const [previewId, setPreviewId] = useState<string | null>(null);
+  const preview = images.find((image) => image.id === previewId);
+  return (
+    <>
+      {images.length ? (
+        <div className="my-2 flex flex-wrap gap-1.5" aria-label="评论图片">
+          {images.map((image) => (
+            <div
+              key={image.id}
+              className="relative size-16 overflow-hidden rounded-[6px] border border-border bg-muted"
+              data-image-status={image.status}
+            >
+              <button
+                type="button"
+                className="block size-full"
+                aria-label={`预览 ${image.name}`}
+                onClick={() => setPreviewId(image.id)}
+              >
+                <img
+                  src={image.previewUrl}
+                  alt={image.name}
+                  className="size-full object-cover"
+                />
+              </button>
+              {image.status === 'uploading' ? (
+                <span
+                  role="status"
+                  aria-label={`${image.name} 正在上传`}
+                  className="pointer-events-none absolute inset-0 flex items-center justify-center bg-black/25 text-white"
+                >
+                  <LoaderCircle className="size-5 animate-spin" />
+                </span>
+              ) : null}
+              {image.status === 'error' ? (
+                <button
+                  type="button"
+                  disabled={disabled}
+                  title={image.error}
+                  aria-label={`重试上传 ${image.name}`}
+                  onClick={() => retry(image.id)}
+                  className="absolute inset-x-0 bottom-0 flex items-center justify-center gap-1 bg-black/65 py-1 text-[10px] text-white"
+                >
+                  <RotateCcw className="size-3" />
+                  重试
+                </button>
+              ) : null}
+              <button
+                type="button"
+                disabled={disabled}
+                aria-label={`删除 ${image.name}`}
+                onClick={() => remove(image.id)}
+                className="absolute right-0.5 top-0.5 flex size-5 items-center justify-center rounded-full bg-black/45 text-white hover:bg-black/65 disabled:opacity-50"
+              >
+                <X className="size-4" />
+              </button>
+            </div>
+          ))}
+        </div>
+      ) : null}
+      <Dialog
+        open={Boolean(preview)}
+        onOpenChange={(open) => {
+          if (!open) setPreviewId(null);
+        }}
+      >
+        <DialogContent className="max-w-3xl">
+          <DialogTitle className="sr-only">
+            {preview?.name || '图片预览'}
+          </DialogTitle>
+          {preview ? (
+            <img
+              src={preview.previewUrl}
+              alt={preview.name}
+              className="max-h-[80vh] w-full object-contain"
+            />
+          ) : null}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+export function AttachmentToolbar({
+  props,
+  disabled,
+  add,
+}: {
+  props: CommentInputProps;
+  disabled: boolean;
+  add: (files: File[]) => void;
+}) {
+  const fileInput = useRef<HTMLInputElement>(null);
+  return (
+    <div className="mt-2 flex min-h-6 items-center justify-between gap-3">
+      {props.onGrantMentionAccessChange ? (
+        <label className="flex cursor-pointer items-center gap-1.5 text-sm text-foreground">
+          <Checkbox
+            disabled={disabled}
+            checked={Boolean(props.grantMentionAccess)}
+            onCheckedChange={(checked) =>
+              props.onGrantMentionAccessChange?.(checked === true)
+            }
+          />
+          授予提及的人阅读权限
+        </label>
+      ) : (
+        <span />
+      )}
+      {props.enableImages ? (
+        <>
+          <input
+            ref={fileInput}
+            type="file"
+            multiple
+            accept={IMAGE_ACCEPT}
+            disabled={disabled}
+            className="hidden"
+            aria-label="选择评论图片"
+            onChange={(event) => {
+              add(Array.from(event.currentTarget.files || []));
+              event.currentTarget.value = '';
+            }}
+          />
+          <button
+            type="button"
+            disabled={disabled}
+            title="上传图片"
+            aria-label="上传图片"
+            className="flex size-6 shrink-0 items-center justify-center rounded text-subtle-foreground hover:bg-accent disabled:opacity-50"
+            onClick={() => fileInput.current?.click()}
+          >
+            <ImagePlus className="size-[18px]" />
+          </button>
+        </>
+      ) : null}
+    </div>
+  );
+}

package/template/client/src/components/business-ui/comment/mention-appearance.ts

@@ -0,0 +1,35 @@
+/** Values from miaoda/design themes.css and comment/utils/comment-at-style.ts. */
+export const COMMENT_THEME_CLASS = [
+  'font-sans text-sm leading-[22px]',
+  '[--foreground:#1f2329] [--background:#fff] [--card:#fff] [--card-foreground:#1f2329]',
+  '[--popover:#fff] [--popover-foreground:#1f2329] [--border:#dee0e3]',
+  '[--primary:#1456f0] [--primary-foreground:#fff] [--button-outline:#dee0e3]',
+  '[--primary-border:transparent] [--comment-warning:#ff811a] [--muted:#f2f3f5] [--muted-foreground:#8f959e]',
+  '[--accent:rgba(31,35,41,0.05)] [--accent-foreground:#1f2329] [--subtle-foreground:#646a73]',
+  '[--info:#1456f0] [--info-foreground:#f5f7ff] [--comment-hover:rgba(31,35,41,0.05)]',
+  'dark:[--foreground:#f0f0f2] dark:[--background:#141414] dark:[--card:#292929]',
+  'dark:[--card-foreground:#f0f0f2] dark:[--popover:#292929] dark:[--popover-foreground:#f0f0f2]',
+  'dark:[--border:rgba(255,255,255,0.15)] dark:[--primary:#4c88ff]',
+  'dark:[--muted:#292929] dark:[--muted-foreground:#a3a3a3] dark:[--subtle-foreground:#a3a3a3]',
+  'dark:[--accent:rgba(255,255,255,0.05)] dark:[--accent-foreground:#f0f0f2]',
+  'dark:[--comment-hover:rgba(255,255,255,0.08)]',
+].join(' ');
+
+export const USER_MENTION_CLASS = 'inline-block max-w-[220px] px-0.5 align-top';
+export const USER_MENTION_LABEL_CLASS =
+  'mt-px block cursor-pointer truncate rounded-[4px] px-0.5 text-primary no-underline leading-5 hover:bg-accent';
+export const USER_MENTION_SELF_CLASS =
+  'mt-px block cursor-pointer truncate rounded px-1 bg-[var(--info)] text-[var(--info-foreground)] no-underline leading-5';
+export const DOCUMENT_MENTION_CLASS =
+  'mx-0.5 inline cursor-pointer break-words rounded-[2px] p-0.5 text-primary no-underline hover:bg-accent';
+export const DOCUMENT_MENTION_UNREADABLE_CLASS =
+  'mx-0.5 inline cursor-pointer break-words rounded-[2px] p-0.5 text-subtle-foreground no-underline hover:bg-muted';
+export function atUserLabel(label: string) {
+  return /^\s*@/.test(label) ? label : `@${label}`;
+}
+
+/** Editable mentions are blue pills; rounded-full keeps semicircular ends for long names. */
+export const INPUT_USER_MENTION_CLASS =
+  'mx-0.5 inline-flex h-5 max-w-[220px] items-center rounded-full bg-primary px-1.5 align-baseline text-primary-foreground leading-5';
+export const INPUT_USER_MENTION_LABEL_CLASS =
+  'min-w-0 truncate leading-5 text-inherit';

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

@@ -0,0 +1,73 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useSyncExternalStore,
+  type ReactNode,
+} from 'react';
+import * as React from 'react';
+import { EntityStore } from './entity-store';
+import { collectMentionRefs, mentionKey } from './content';
+import type { CommentDataSource, CommentValue, MentionRef } from './types';
+
+const Context = createContext<{
+  store: EntityStore;
+  strict: boolean;
+  currentUserID?: string;
+} | null>(null);
+
+export function MentionProvider({
+  source,
+  snapshotPolicy = 'immediate',
+  currentUserID,
+  children,
+}: {
+  source: CommentDataSource;
+  currentUserID?: string;
+  snapshotPolicy?: 'immediate' | 'after-resolve';
+  children: ReactNode;
+}) {
+  const store = useMemo(
+    () => new EntityStore(source),
+    [source, source.scopeKey],
+  );
+  useEffect(() => () => store.clear(), [store]);
+  const context = useMemo(
+    () => ({
+      store,
+      strict: snapshotPolicy === 'after-resolve',
+      currentUserID,
+    }),
+    [store, snapshotPolicy, currentUserID],
+  );
+  return React.createElement(Context.Provider, { value: context }, children);
+}
+
+export function useMentionContext() {
+  const context = useContext(Context);
+  if (!context) throw new Error('评论组件需要放在 MentionProvider 中');
+  return context;
+}
+
+export function useMentionEntity(ref: MentionRef) {
+  const { store } = useMentionContext();
+  const key = mentionKey(ref);
+  useEffect(() => {
+    store.ensure([ref]);
+  }, [store, key]);
+  return useSyncExternalStore(
+    store.subscribe,
+    () => store.peek(ref),
+    () => undefined,
+  );
+}
+
+export function useResolveComment(value: CommentValue) {
+  const { store } = useMentionContext();
+  const refs = collectMentionRefs(value);
+  const keys = JSON.stringify(refs.map(mentionKey));
+  useEffect(() => {
+    store.ensure(refs);
+  }, [store, keys]);
+}