Web SDK

評論

評論功能允許使用者在文件中新增評論和回覆，便於團隊成員之間的交流和協作。

外掛模式

安裝

Shell
pnpm add @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs/docs-thread-comment @univerjs/docs-thread-comment-ui

使用

TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverDocsThreadCommentPlugin } from '@univerjs/docs-thread-comment'import { UniverDocsThreadCommentUIPlugin } from '@univerjs/docs-thread-comment-ui'import { UniverThreadCommentPlugin } from '@univerjs/thread-comment'import { UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui'import DocsCommentLocale from '@univerjs/docs-thread-comment-ui/locale/zh-TW'import ThreadCommentUIZhTW from '@univerjs/thread-comment-ui/locale/zh-TW'import '@univerjs/docs-thread-comment/facade'import '@univerjs/docs-thread-comment-ui/lib/index.css'import '@univerjs/thread-comment-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.ZH_TW,  locales: {    [LocaleType.ZH_TW]: mergeLocales(      ThreadCommentUIZhTW,      DocsCommentLocale,     ),  },})univer.registerPlugin(UniverThreadCommentPlugin)univer.registerPlugin(UniverThreadCommentUIPlugin)univer.registerPlugin(UniverDocsThreadCommentPlugin)univer.registerPlugin(UniverDocsThreadCommentUIPlugin)

配合協同編輯使用

如使用協同編輯功能，需參照以下方式配置：

Shell
pnpm add @univerjs-pro/thread-comment-datasource
TypeScript
import { UniverThreadCommentDataSourcePlugin } from '@univerjs-pro/thread-comment-datasource'univer.registerPlugin(UniverThreadCommentDataSourcePlugin)

行動裝置支援

先設定行動版編輯器。在本頁外掛模式的初始化程式碼中，將下列桌面版註冊替換為同一套件匯出的行動版外掛，並在開啟文件前完成。保留模型外掛、樣式、語言套件與 Facade 匯入，請勿同時註冊兩個版本。

套件桌面版註冊行動版註冊
@univerjs/docs-thread-comment-uiUniverDocsThreadCommentUIPluginUniverDocsThreadCommentMobileUIPlugin
@univerjs/thread-comment-uiUniverThreadCommentUIPluginUniverThreadCommentMobileUIPlugin

預設模式

安裝

Shell
pnpm add @univerjs/preset-docs-thread-comment

使用

TypeScript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreZhTW from '@univerjs/preset-docs-core/locales/zh-TW'import { UniverDocsThreadCommentPreset } from '@univerjs/preset-docs-thread-comment'import UniverPresetDocsThreadCommentZhTW from '@univerjs/preset-docs-thread-comment/locales/zh-TW'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-docs-core/lib/index.css'import '@univerjs/preset-docs-thread-comment/lib/index.css'const { univerAPI } = createUniver({  locale: LocaleType.ZH_TW,  locales: {    [LocaleType.ZH_TW]: mergeLocales(      UniverPresetDocsCoreZhTW,      UniverPresetDocsThreadCommentZhTW,     ),  },  presets: [    UniverDocsCorePreset(),    UniverDocsThreadCommentPreset(),   ],})

評論 Facade

呼叫前同時匯入通用評論 Facade 與品類 Facade。品類方法建立穩定錨點，通用 API 負責回覆、修改、解決與刪除。getComments() 讀取本機狀態；listCommentsAsync() 透過已設定的資料來源同步已知討論串，不會探索伺服器上的全部討論串。

TypeScript
import '@univerjs/thread-comment/facade'import '@univerjs/docs-thread-comment/facade'const range = univerAPI.getActiveDocument()?.getTextRange(0, 1)if (range) {  await range.createCommentAsync('Please review this text.')  console.log(await range.listCommentsAsync())}
TypeScript
import '@univerjs/thread-comment/facade'const [thread] = univerAPI.getComments({ resolved: false })if (thread) {  await univerAPI.replyCommentAsync({    unitId: thread.unitId,    subUnitId: thread.subUnitId,    threadId: thread.threadId,    content: 'Reviewed.',  })}

共享討論

先透過 Server SDK 整合 Comment Service 與 Endpoint，再於協同及授權設定之後註冊 @univerjs-pro/thread-comment-datasource 的 UniverThreadCommentDataSourcePlugin。內建資料來源存取 /universer-api/comment/unit/{unitId}/... 與 /universer-api/user/list，請由應用程式提供這些路由。服務端須獨立驗證評論讀寫權限，不能僅依賴文件編輯權限。

你覺得這篇文檔如何？

© 2026 DreamNum Co., Ltd.