# 批註

- Human documentation: [https://docs.univer.ai/zh-TW/guides/sheets/features/notes](https://docs.univer.ai/zh-TW/guides/sheets/features/notes)

- Agent Markdown: [https://docs.univer.ai/zh-TW/guides/sheets/features/notes.md](https://docs.univer.ai/zh-TW/guides/sheets/features/notes.md)

- Requested language: `zh-TW`

- Content language: `zh-TW`

- Documentation version: `1.2.0`

- Source: [sheets/features/notes.zh-TW.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/features/notes.zh-TW.mdx)

---

#### Package metadata

```json
{
  "preset": [
    {
      "client": "@univerjs/preset-sheets-note",
      "locale": "@univerjs/preset-sheets-note/locales/zh-TW",
      "style": "@univerjs/preset-sheets-note/lib/index.css"
    }
  ],
  "plugins": [
    {
      "client": "@univerjs/sheets-note",
      "facade": "@univerjs/sheets-note/facade"
    },
    {
      "client": "@univerjs/sheets-note-ui",
      "locale": "@univerjs/sheets-note-ui/locale/zh-TW",
      "style": "@univerjs/sheets-note-ui/lib/index.css"
    }
  ],
  "server": false
}
```

批註功能允許使用者在電子表格的單元格中新增註釋，以便記錄額外資訊或提供上下文。它支援多種註釋樣式和操作，幫助使用者更好地理解和協作處理資料。

> Interactive example: [Open the playground](/playground/sheets/notes)

## 外掛模式

### 安裝

#### npm

```bash
npm install @univerjs/sheets-note @univerjs/sheets-note-ui
```

#### pnpm

```bash
pnpm add @univerjs/sheets-note @univerjs/sheets-note-ui
```

#### yarn

```bash
yarn add @univerjs/sheets-note @univerjs/sheets-note-ui
```

#### bun

```bash
bun add @univerjs/sheets-note @univerjs/sheets-note-ui
```

### 使用

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverSheetsNotePlugin } from '@univerjs/sheets-note' // [!code ++]
import { UniverSheetsNoteUIPlugin } from '@univerjs/sheets-note-ui' // [!code ++]
import SheetsNoteUIZhTW from '@univerjs/sheets-note-ui/locale/zh-TW' // [!code ++]

import '@univerjs/sheets-note-ui/lib/index.css' // [!code ++]

import '@univerjs/sheets-note/facade' // [!code ++]

const univer = new Univer({
  locale: LocaleType.ZH_TW,
  locales: {
    [LocaleType.ZH_TW]: mergeLocales(
      SheetsNoteUIZhTW, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverSheetsNotePlugin) // [!code ++]
univer.registerPlugin(UniverSheetsNoteUIPlugin) // [!code ++]
```

## 預設模式

### 安裝

#### npm

```bash
npm install @univerjs/preset-sheets-note
```

#### pnpm

```bash
pnpm add @univerjs/preset-sheets-note
```

#### yarn

```bash
yarn add @univerjs/preset-sheets-note
```

#### bun

```bash
bun add @univerjs/preset-sheets-note
```

### 使用

```typescript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreZhTW from '@univerjs/preset-sheets-core/locales/zh-TW'
import { UniverSheetsNotePreset } from '@univerjs/preset-sheets-note' // [!code ++]
import UniverPresetSheetsNoteZhTW from '@univerjs/preset-sheets-note/locales/zh-TW' // [!code ++]
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-note/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.ZH_TW,
  locales: {
    [LocaleType.ZH_TW]: mergeLocales(
      UniverPresetSheetsCoreZhTW,
      UniverPresetSheetsNoteZhTW, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsNotePreset(), // [!code ++]
  ],
})
```

## Facade API

完整 Facade API 型別定義，請檢視 [FacadeAPI](https://docs.univer.ai/zh-TW/reference/facade/univer.md)。

### 引入

> [!INFO: 外掛模式提示]
> 僅外掛模式需要手動引入 Facade 套件。預設模式已內建對應的 Facade 套件，無需額外引入。

```typescript
import '@univerjs/sheets-note/facade'
```

### 獲取批註

`FWorksheet.getNotes`：獲取工作表的所有批註

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const notes = fWorksheet.getNotes()

notes.forEach((item) => {
  const { row, col, note } = item
  console.log(`單元格 ${fWorksheet.getRange(row, col).getA1Notation()} 的批註為: ${note}`)
})
```

`FRange.getNote`：獲取範圍內左上角單元格的批註

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('A1:D10')
const note = fRange.getNote()
```

### 新增或更新批註

`FRange.createOrUpdateNote`：建立或更新範圍內左上角單元格的批註

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('A1')
fRange.createOrUpdateNote({
  note: '這是一個批註',
  width: 160,
  height: 100,
  show: true,
})
```

### 刪除批註

`FRange.deleteNote`：刪除範圍內左上角單元格的批註

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const notes = fWorksheet.getNotes()

if (notes.length > 0) {
  // 刪除工作表中第一個批註
  const { row, col } = notes[0]
  fWorksheet.getRange(row, col).deleteNote()
}

// 刪除 C1 單元格批註
const fRange = fWorksheet.getRange('C1')
fRange.deleteNote()
```

### 事件監聽

完整事件型別定義，請檢視 [Events](https://docs.univer.ai/zh-TW/reference/facade/events.md)。

| 事件名稱                    | 說明      |
| ----------------------- | ------- |
| `SheetNoteAdd`          | 新增批註後觸發 |
| `SheetNoteDelete`       | 刪除批註後觸發 |
| `SheetNoteUpdate`       | 更新批註後觸發 |
| `SheetNoteShow`         | 顯示批註時觸發 |
| `SheetNoteHide`         | 隱藏批註時觸發 |
| `BeforeSheetNoteAdd`    | 新增批註前觸發 |
| `BeforeSheetNoteDelete` | 刪除批註前觸發 |
| `BeforeSheetNoteUpdate` | 更新批註前觸發 |
| `BeforeSheetNoteShow`   | 顯示批註前觸發 |
| `BeforeSheetNoteHide`   | 隱藏批註前觸發 |

#### 事件監聽示例

```typescript
// 新增批註後事件
const disposable = univerAPI.addEvent(univerAPI.Event.SheetNoteAdd, (params) => {
  const { workbook, worksheet, row, col, note } = params
})

// 移除事件監聽，使用 `disposable.dispose()`
```

```typescript
// 刪除批註前事件，可取消
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeSheetNoteDelete, (params) => {
  const { workbook, worksheet, row, col, oldNote } = params

  // 取消批註刪除操作
  params.cancel = true
})

// 移除事件監聽，使用 `disposable.dispose()`
```