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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/coding-template-nestjs-react-fullstack",
-  "version": "0.1.55-alpha.20261030035108",
+  "version": "0.1.55-alpha.20261030081308",
   "description": "NestJS + React fullstack template for miaoda coding",
   "type": "module",
   "files": [

package/template/client/src/components/business-ui/README.md

@@ -522,7 +522,7 @@ function BasicExample() {
 
 `comment/comment-content.tsx` 提供不依赖 Tiptap 的只读展示，配合 `comment/mention-provider.tsx` 批量补全人员和文档信息。
 
-评论输入框已内置。从 `@/components/business-ui/comment/comment-input` 直接导入 `CommentInput`，组件提供 getContent/clear/setEditable/focus ref API 和 onSubmitRequest 快捷键回调，发送、取消按钮及请求状态由页面组合，首次激活时动态加载 div 编辑器；支持选择/粘贴图片并在正文下方展示附件，使用 getImages/clearImages 管理。只读 `CommentContent` 不依赖编辑器。作者、时间、线程与接口调用由消费页面组合。
+评论输入框已内置。从 `@/components/business-ui/comment/comment-input` 直接导入 `CommentInput`，组件提供 getContent/clear/setEditable/focus ref API 和 onSubmitRequest 快捷键回调，发送、取消按钮及请求状态由页面组合，原生 div 编辑器直接可编辑；支持选择/粘贴图片并在正文下方展示附件，使用 getImages/clearImages 管理。只读 `CommentContent` 不依赖编辑器。作者、时间、线程与接口调用由消费页面组合。
 
 数据源和真实服务的接入要求见 [CommentInput 使用说明](./comment/README.md)。输入与只读列表应共享同一 CommentProvider；CCM 的 Lark ID 与模板的 apaas ID 不能混用。
 

package/template/client/src/components/business-ui/comment/README.md

@@ -30,9 +30,16 @@ import { CommentInput } from '@/components/business-ui/comment/comment-input';
 import { CommentContent } from '@/components/business-ui/comment/comment-content';
 import { CommentProvider } from '@/components/business-ui/comment/comment-provider';
 import { emptyComment } from '@/components/business-ui/comment/content';
-import type { CommentInputHandle, CommentSubmitPayload } from '@/components/business-ui/comment/types';
-
-export function CommentExample({ save }: { save: (body: CommentSubmitPayload) => Promise<void> }) {
+import type {
+  CommentInputHandle,
+  CommentSubmitPayload,
+} from '@/components/business-ui/comment/types';
+
+export function CommentExample({
+  save,
+}: {
+  save: (body: CommentSubmitPayload) => Promise<void>;
+}) {
   const inputRef = useRef<CommentInputHandle>(null);
   const busy = useRef(false);
   const [value, setValue] = useState(emptyComment);
@@ -56,14 +63,32 @@ export function CommentExample({ save }: { save: (body: CommentSubmitPayload) =>
       setSending(false);
     }
   };
-  return <CommentProvider>
-    <CommentInput ref={inputRef} documentKey="new" value={value}
-      onChange={setValue} onSubmitRequest={() => { void handleSend(); }} />
-    <button disabled={sending} onClick={() => inputRef.current?.clear()}>取消</button>
-    <button disabled={sending} onClick={() => { void handleSend(); }}>发送</button>
-    {error ? <p role="alert">{error}</p> : null}
-    <CommentContent value={value} />
-  </CommentProvider>;
+  return (
+    <CommentProvider>
+      <CommentInput
+        ref={inputRef}
+        documentKey="new"
+        value={value}
+        onChange={setValue}
+        onSubmitRequest={() => {
+          void handleSend();
+        }}
+      />
+      <button disabled={sending} onClick={() => inputRef.current?.clear()}>
+        取消
+      </button>
+      <button
+        disabled={sending}
+        onClick={() => {
+          void handleSend();
+        }}
+      >
+        发送
+      </button>
+      {error ? <p role="alert">{error}</p> : null}
+      <CommentContent value={value} />
+    </CommentProvider>
+  );
 }
 ```
 
@@ -76,10 +101,10 @@ export function CommentExample({ save }: { save: (body: CommentSubmitPayload) =>
 - `getImages()`：读取附件状态与上传结果的快照，不自动转换成多维表格图片协议。
 - `clearImages()`：删除全部附件并取消/忽略上传，释放本地预览地址。附件独立于正文撤销历史。
 - `setEditable(boolean)`：控制正文、上传按钮及附件删除/重试；disabled prop 是外部硬禁用。
-- `focus()`：聚焦输入框，必要时加载编辑器。
+- `focus()`：聚焦输入框。
 - `onSubmitRequest`：Enter（或 submitMode="mod-enter"）通知页面；输入法确认和 @候选选择优先处理，未配置时 Enter 换行。
 
-入口动态 import div 编辑器，首次激活时挂载；不依赖 Tiptap/ProseMirror。加载失败可重试。popover 挂在 Dialog/Sheet 时可传 portalContainer。React 管理外框、候选面板与附件，正文 DOM 由 DivEditor 独立管理，避免受控回写破坏光标和输入法。
+原生 div 编辑器直接挂载，输入区无需二次点击激活；不依赖 Tiptap/ProseMirror。图片存储 SDK 仍按需导入。popover 挂在 Dialog/Sheet 时可传 portalContainer。React 管理外框、候选面板与附件，正文 DOM 由 DivEditor 独立管理，避免受控回写破坏光标和输入法。
 
 ## 搜索与回显
 
@@ -90,9 +115,14 @@ recommend 用于刚输入 @ 或清空关键词；search 防抖 200ms，并忽略
 文档独立配置 `<CommentProvider documents={documents}>`，输入框再开启 enableDocuments：
 
 ```ts
-import { createCcmDocumentSource, createBrowserCcmRequest } from '@/components/business-ui/comment/ccm-document-source';
+import {
+  createCcmDocumentSource,
+  createBrowserCcmRequest,
+} from '@/components/business-ui/comment/ccm-document-source';
 const documents = createCcmDocumentSource({
-  scopeKey: currentUserScope, token: hostDocumentToken, objType: hostDocumentType,
+  scopeKey: currentUserScope,
+  token: hostDocumentToken,
+  objType: hostDocumentType,
   request: createBrowserCcmRequest(authenticatedProxyPath),
   search: searchCloudDocuments, // 可选：宿主提供完整文档搜索
 });
@@ -136,4 +166,12 @@ getImages 返回 `{ id, name, size, previewUrl, status, result?, error? }[]`：i
 
 “授予提及的人阅读权限”仅在传入 onGrantMentionAccessChange 时显示，属于受控的业务意图，组件不直接调用文档授权接口。消费页面负责结合勾选值执行真实授权。
 
-正文使用统一的自有撤销历史，覆盖文字、引用插入/删除、粘贴和 clear。连续文字合并为一组，输入法组合输入作为一组；元数据回显不产生编辑历史，外部替换 value 会重置正文历史。保留旧结构转换函数供已有调用方过渡，新实现不使用它们。
+正文使用统一的自有撤销历史，覆盖文字、引用插入/删除、粘贴和 clear。连续文字合并为一组，输入法组合输入作为一组；元数据回显不产生编辑历史，外部替换 value 会重置正文历史。正文直接使用 CommentValue，不保留 Tiptap 文档结构转换层。
+
+## 文件组织
+
+comment-input.tsx 提供校验、错误边界与原生编辑交互，dom-editor.ts 管理正文与撤销，image-attachments.tsx 管理独立附件。comment-content.tsx 独立提供只读展示，不依赖编辑器。
+
+mention-provider.tsx 放上下文和缓存；comment-provider.tsx 放默认人员服务、文档混合数据源与便捷 Provider。mention-suggestions.tsx 放候选面板和搜索 Hook；mention-view.tsx 放引用样式与文档图标。content.ts/types.ts 放协议转换与类型，ccm-document-source.ts 是可选的宿主文档适配器。
+
+preloadCommentEditor 保留为兼容空操作；编辑器直接挂载后无需预加载。

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

@@ -1,6 +1,6 @@
-import { DocumentIcon } from './document-icon';
 import { fromApiContent } from './content';
 import {
+  DocumentIcon,
   USER_MENTION_CLASS,
   INPUT_USER_MENTION_CLASS,
   INPUT_USER_MENTION_LABEL_CLASS,
@@ -10,14 +10,10 @@ import {
   USER_MENTION_LABEL_CLASS,
   DOCUMENT_MENTION_CLASS,
   DOCUMENT_MENTION_UNREADABLE_CLASS,
-} from './mention-appearance';
+} from './mention-view';
 import * as React from 'react';
 import { cn } from '@/lib/utils';
-import {
-  mentionLabel,
-  normalizeValue,
-  safeUrl,
-} from './content';
+import { mentionLabel, normalizeValue, safeUrl } from './content';
 import {
   useMentionContext,
   useMentionEntity,