评论 / 批注

评论 / 批注插件提供了对单元格进行评论或者批注的功能。

安装

pnpm add @univerjs/sheets-thread-comment-base @univerjs/sheets-thread-comment @univerjs/thread-comment @univerjs/thread-comment-ui

引入

import '@univerjs/thread-comment-ui/lib/index.css';
 
import { IThreadCommentMentionDataService, UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui';
import { UniverThreadCommentPlugin } from '@univerjs/thread-comment';
import { UniverSheetsThreadCommentBasePlugin } from '@univerjs/sheets-thread-comment-base';
import { UniverSheetsThreadCommentPlugin } from '@univerjs/sheets-thread-comment';

国际化

import { LocaleType, Tools } from '@univerjs/core';
import ThreadCommentUIZhCN from '@univerjs/thread-comment-ui/locale/zh-CN';
import SheetsThreadCommentZhCN from '@univerjs/sheets-thread-comment/locale/zh-CN';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: Tools.deepMerge(
      ThreadCommentUIZhCN,
      SheetsThreadCommentZhCN
    ),
  },
});

注册

const mockUser = {
  userID: 'mockId',
  name: 'MockUser',
  avatar: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAInSURBVHgBtZU9TxtBEIbfWRzFSIdkikhBSqRQkJqkCKTCFkqVInSUSaT0wC8w/gXxD4gU2nRJkXQWhAZowDUUWKIwEgWWbEEB3mVmx3dn4DA2nB/ppNuPeWd29mMIPXDr+RxwtgRHeW6+guNPRxogqnL7Dwz9psJ27S4NShaeZTH3kwXy6I81dlRKcmRui88swdq9AcSFL7Buz1Vmlns64MiLsCjzwnIYHLH57tbfFbs7KRaXyEU8FVZofqccOfA5l7Q8LPIkGrwnb2RPNEXWFVMUF3L+kDCk0btDDAMzOm5YfAHDwp4tG74wnzAsiOYMnJ3GoDybA7IT98/jm5+JNnfiIzAS6LlqHQBN/i6b2t/cV1Hh6BfwYlHnHP4AXi5q/8kmMMpOs8+BixZw/Fd6xUEHEbnkgclvQP2fGp7uShRKnQ3G32rkjV1th8JhIGG7tR/JyjGteSOZELwGMmNqIIigRCLRh2OZIE6BjItdd7pCW6Uhm1zzkUtungSxwEUzNpQ+GQumtH1ej1MqgmNT6vwmhCq5yuwq56EYTbgeQUz3yvrpV1b4ok3nYJ+eYhgYmjRUqErx2EDq0Fr8FhG++iqVGqxlUJI/70Ar0UgJaWHj6hYVHJrfKssAHot1JfqwE9WVWzXZVd5z2Ws/4PnmtEjkXeKJDvxUecLbWOXH/DP6QQ4J72NS0adedp1aseBfXP8odlZFfPvBF7SN/8hky1TYuPOAXAEipMx15u5ToAAAAABJRU5ErkJggg==',
  anonymous: false,
  canBindAnonymous: false,
};
 
class CustomMentionDataService implements IThreadCommentMentionDataService {
  dataSource: Nullable<IThreadCommentMentionDataSource>
  trigger: string = '@';
 
  async getMentions(search: string) {
    return [
      {
        id: mockUser.userID,
        label: mockUser.name,
        type: 'user',
        icon: mockUser.avatar,
      },
      {
        id: '2',
        label: 'User2',
        type: 'user',
        icon: mockUser.avatar,
      },
    ];
  }
}
 
univer.registerPlugin(UniverThreadCommentPlugin);
univer.registerPlugin(UniverThreadCommentUIPlugin, {
    overrides: [[IThreadCommentMentionDataService, { useClass: CustomMentionDataService }]],
});
univer.registerPlugin(UniverSheetsThreadCommentBasePlugin);
univer.registerPlugin(UniverSheetsThreadCommentPlugin);

权限控制打印