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

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

@@ -0,0 +1,375 @@
+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() {
+      if (!alive.current) return;
+      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-provider.tsx

@@ -0,0 +1,168 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useSyncExternalStore,
+  type ReactNode,
+} from 'react';
+import * as React from 'react';
+import { collectMentionRefs, mentionKey } from './content';
+import type {
+  CommentDataSource,
+  CommentValue,
+  MentionRef,
+  MentionOption,
+  MentionResult,
+} 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]);
+}
+
+/** One store per authenticated scope, shared by editors and all list items. */
+export class EntityStore {
+  private cache = new Map<string, { value: MentionResult; until: number }>();
+  private listeners = new Set<() => void>();
+  private queue = new Map<string, MentionRef>();
+  private pending = new Set<string>();
+  private controllers = new Set<AbortController>();
+  private scheduled = false;
+  private generation = 0;
+
+  constructor(readonly source: CommentDataSource) {}
+  subscribe = (listener: () => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+  peek = (ref: MentionRef) => this.cache.get(mentionKey(ref))?.value;
+  seed(items: MentionOption[]) {
+    for (const item of items) this.write({ ...item, status: 'resolved' });
+  }
+  private write(value: MentionResult) {
+    const key = mentionKey(value.ref);
+    this.cache.delete(key);
+    this.cache.set(key, {
+      value,
+      until: Date.now() + (value.status === 'resolved' ? 300_000 : 30_000),
+    });
+    if (this.cache.size > 500)
+      this.cache.delete(this.cache.keys().next().value!);
+    for (const listener of this.listeners) listener();
+  }
+  ensure(refs: MentionRef[], force = false) {
+    for (const ref of refs) {
+      const key = mentionKey(ref);
+      if (
+        !this.pending.has(key) &&
+        (force || (this.cache.get(key)?.until || 0) <= Date.now())
+      )
+        this.queue.set(key, ref);
+    }
+    if (!this.scheduled && this.queue.size) {
+      this.scheduled = true;
+      queueMicrotask(() => {
+        this.scheduled = false;
+        void this.flush();
+      });
+    }
+  }
+  private async flush() {
+    const refs = [...this.queue.values()];
+    this.queue.clear();
+    const generation = this.generation;
+    for (let i = 0; i < refs.length; i += 50) {
+      const batch = refs.slice(i, i + 50);
+      batch.forEach((ref) => this.pending.add(mentionKey(ref)));
+      const controller = new AbortController();
+      this.controllers.add(controller);
+      void this.source
+        .resolve(batch, controller.signal)
+        .then((results) => {
+          if (generation !== this.generation) return;
+          const byKey = new Map(
+            results.map((item) => [mentionKey(item.ref), item]),
+          );
+          for (const ref of batch)
+            this.write(byKey.get(mentionKey(ref)) || { ref, status: 'error' });
+        })
+        .catch(() => {
+          if (generation === this.generation)
+            for (const ref of batch) this.write({ ref, status: 'error' });
+        })
+        .finally(() => {
+          this.controllers.delete(controller);
+          if (generation === this.generation)
+            batch.forEach((ref) => this.pending.delete(mentionKey(ref)));
+        });
+    }
+  }
+  clear() {
+    this.generation++;
+    for (const controller of this.controllers) controller.abort();
+    this.controllers.clear();
+    this.pending.clear();
+    this.queue.clear();
+    this.cache.clear();
+    for (const listener of this.listeners) listener();
+  }
+}