# 视图

- Human documentation: [https://docs.univer.ai/zh-CN/guides/bases/features/core/views](https://docs.univer.ai/zh-CN/guides/bases/features/core/views)

- Agent Markdown: [https://docs.univer.ai/zh-CN/guides/bases/features/core/views.md](https://docs.univer.ai/zh-CN/guides/bases/features/core/views.md)

- Requested language: `zh-CN`

- Content language: `zh-CN`

- Documentation version: `1.0.0-rc.0`

- Source: [bases/features/core/views.zh-CN.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/bases/features/core/views.zh-CN.mdx)

---

同一张表可以有多个视图，例如用网格录入任务，再用看板追踪状态。切换视图不会复制记录。

| 视图            | 适合的场景      | 主要配置                                        |
| ------------- | ---------- | ------------------------------------------- |
| 网格 `Grid`     | 逐行编辑、筛选和排序 | 冻结字段、行高、字段宽度                                |
| 看板 `Kanban`   | 按状态或负责人分组  | `groupFieldId`                              |
| 日历 `Calendar` | 查看日期安排     | `startDateFieldId`，可选结束日期                   |
| 甘特图 `Gantt`   | 计划工期与依赖    | 开始、结束日期，以及可选进度和依赖字段                         |
| 画廊 `Gallery`  | 展示图片和内容卡片  | 封面、标题和卡片字段                                  |
| 透视 `Pivot`    | 汇总统计与图表    | 需要[仪表盘插件](https://docs.univer.ai/zh-CN/guides/bases/features/dashboard.md) |

下面的 `table` 是已取得的表，字段 ID 应替换为该表中的实际字段。日期、分组等字段应先创建，再配置相应视图。

## 创建视图

```ts
const grid = table.createView('All records', univerAPI.Enum.BaseViewType.Grid)

const kanban = table.createView(
  'By status',
  univerAPI.Enum.BaseViewType.Kanban,
  {
    view: {
      config: { groupFieldId: 'status' },
    },
  },
)
```

## 在 UI 中激活视图

```ts
const baseUI = univerAPI.getBaseUI()
await baseUI.activateTable(table.getId())
await baseUI.activateView(kanban.getId())
```

## 配置视图规则

```ts
kanban.setGroup([
  { fieldId: 'status', direction: univerAPI.Enum.BaseSortDirection.ASC },
])

kanban.setFilter({
  conjunction: univerAPI.Enum.BaseFilterConjunction.AND,
  conditions: [
    { fieldId: 'archived', operator: univerAPI.Enum.BaseFilterOperator.IS, operand: false },
  ],
})
```

通过视图级字段设置，可以控制字段的可见性、宽度和卡片展示方式，而无需更改底层表结构。

## 日历与日期字段

```ts
const calendar = table.createView('Schedule', univerAPI.Enum.BaseViewType.Calendar, {
  view: {
    config: { startDateFieldId: 'startDate', endDateFieldId: 'endDate', mode: 'month' },
  },
})
```

日历需要开始日期字段。甘特图还要求结束日期字段，并可以配置工作日、进度和依赖关系。画廊通过 `card` 配置标题和展示字段。

## 排序和字段显示

```ts
grid.setSort([{ fieldId: 'priority', direction: univerAPI.Enum.BaseSortDirection.DESC }])
grid.setFieldVisible('internalNotes', false)
grid.setFieldWidth('title', 280)
```

筛选、排序、分组和字段显示均属于当前视图；不会删除原始记录或字段。

## 条件着色

例如，将分数超过 80 的记录标为绿色：

```ts
const score = table.addField('Score', univerAPI.Enum.BaseFieldType.Number)
grid.setConditionalColorRules([{
  id: 'high-score',
  target: univerAPI.Enum.BaseConditionalColorTarget.ROW,
  fieldId: score.getId(),
  operator: univerAPI.Enum.BaseConditionalColorOperator.GREATER_THAN,
  operand: 80,
  color: '#dcfce7',
}])
```

规则按数组顺序确定优先级；传入 `[]` 清空规则。支持单元格、整行和整列着色，其中整列着色不判断条件。