ViewConfigPanel 对齐 @objectstack/spec ListViewSchema 完整修改清单



## 背景

`ViewConfigPanel.tsx` 是 Console 右侧面板，用于配置列表视图。当前面板覆盖了约 58% 的 `ListViewSchema` spec 属性。本 Issue 的目标是**以 `@objectstack/spec` UI 协议为准**，补齐所有缺失的面板配置项，确保每个 spec 属性在面板中都有对应的 UI 入口。

**权威来源**：`packages/types/src/objectql.ts` L1101-L1511 `ListViewSchema` interface

**当前面板结构**（`apps/console/src/components/ViewConfigPanel.tsx`）：
- **Page Config** 区：label, description, viewType, 11 个 toolbar 开关
- **Data** 区：sort, filter, columns, groupBy, prefixField, viewType 子选项
- **Appearance** 区：color, fieldTextColor, rowHeight, wrapHeaders, showDescription, collapseAllByDefault, striped, bordered
- **User Actions** 区：editRecordsInline, addDeleteRecordsInline

---

## 修改清单

### P0 — ���优先级（用户可感知，必须在本轮完成）

#### 1. 新增 Navigation 配置（替代 `clickIntoRecordDetails` 简单 toggle）

**Spec 属性**：`navigation: ViewNavigationConfig`
```typescript
interface ViewNavigationConfig {
  mode: 'page' | 'drawer' | 'modal' | 'split' | 'popover' | 'new_window' | 'none';
  view?: string;
  preventNavigation?: boolean;
  openNewTab?: boolean;
  width?: string | number;
}
```

**当前面板**：只有 `clickIntoRecordDetails` boolean toggle（L546-L552）

**修改内容**：
- [ ] **ViewConfigPanel.tsx** Page Config 区：将 `clickIntoRecordDetails` toggle 替换为 `navigation.mode` Select 下拉
  - 选项：`page`(默认)、`drawer`、`modal`、`split`、`popover`、`new_window`、`none`
  - data-testid: `select-navigation-mode`
- [ ] **ViewConfigPanel.tsx**：当 `mode` 为 `drawer`/`modal`/`split` 时，展示 `navigation.width` Input
  - data-testid: `input-navigation-width`
- [ ] **ViewConfigPanel.tsx**：当 `mode` 为 `page`/`new_window` 时，展示 `navigation.openNewTab` Switch
  - data-testid: `toggle-navigation-openNewTab`
- [ ] **Console ObjectView.tsx** `renderListView` fullSchema：透传 `navigation`
- [ ] **PluginObjectView.tsx** `renderContent` schema：透传 `navigation`
- [ ] **ListView.tsx**：消费 `schema.navigation` 控制行点击行为
- [ ] **i18n keys**：`console.objectView.navigationMode`, `console.objectView.navigationWidth`, `console.objectView.openNewTab`
- [ ] **测试**：navigation mode 切换 → 面板 UI 变化 + 值透传

#### 2. 新增 Selection 配置

**Spec 属性**：`selection: { type: 'none' | 'single' | 'multiple' }`

**当前面板**：完全缺失

**修改内容**：
- [ ] **ViewConfigPanel.tsx** Page Config 区：新增 `selection.type` Select 下拉
  - 选项：`none`、`single`、`multiple`
  - data-testid: `select-selection-type`
- [ ] **Console ObjectView.tsx** fullSchema：透传 `selection`
- [ ] **PluginObjectView.tsx** schema：透传 `selection`
- [ ] **i18n keys**：`console.objectView.selectionMode`, `console.objectView.selectionNone`, `console.objectView.selectionSingle`, `console.objectView.selectionMultiple`
- [ ] **测试**：selection type 切换 → 值透传

#### 3. 新增 Pagination 配置

**Spec 属性**：`pagination: { pageSize: number; pageSizeOptions?: number[] }`

**当前面板**：完全缺失

**修改内容**：
- [ ] **ViewConfigPanel.tsx** Data 区：新增 `pagination.pageSize` Number Input
  - data-testid: `input-pagination-pageSize`
  - 默认值提示：25
- [ ] **ViewConfigPanel.tsx**：新增 `pagination.pageSizeOptions` multi-select 或逗号分隔 Input
  - data-testid: `input-pagination-pageSizeOptions`
  - 默认提示：10, 25, 50, 100
- [ ] **Console ObjectView.tsx** fullSchema：透传 `pagination`
- [ ] **PluginObjectView.tsx** schema：透传 `pagination`
- [ ] **i18n keys**：`console.objectView.pageSize`, `console.objectView.pageSizeOptions`
- [ ] **测试**：pageSize 输入 → 值透传

---

### P1 — 中优先级（高级配置，提升完整度）

#### 4. Export Options 展开配置

**Spec 属性**：`exportOptions: { formats?, maxRecords?, includeHeaders?, fileNamePrefix? }`

**当前面板**：只有 `allowExport` boolean toggle（L562-L568），缺 exportOptions 细节

**修改内容**：
- [ ] **ViewConfigPanel.tsx** Page Config 区：当 `allowExport = true` 时展开子配置区
  - [ ] `exportOptions.formats` multi-select checkbox: csv, xlsx, json, pdf
    - data-testid: `export-formats`
  - [ ] `exportOptions.maxRecords` Number Input
    - data-testid: `input-export-maxRecords`
  - [ ] `exportOptions.includeHeaders` Switch
    - data-testid: `toggle-export-includeHeaders`
  - [ ] `exportOptions.fileNamePrefix` Input
    - data-testid: `input-export-fileNamePrefix`
- [ ] **i18n keys**：`console.objectView.exportFormats`, `console.objectView.exportMaxRecords`, `console.objectView.exportIncludeHeaders`, `console.objectView.exportFileNamePrefix`
- [ ] **测试**：allowExport ON → 展开子配置；formats 选择 → exportOptions 正确生成

#### 5. Searchable Fields 配置

**Spec 属性**：`searchableFields: string[]`

**当前面板**：完全缺失

**修改内容**：
- [ ] **ViewConfigPanel.tsx** Data 区：新增 `searchableFields` multi-select checkbox 列表（从 objectDef.fields 派生）
  - data-testid: `searchable-fields-selector`
  - 点击展开，类似现有 columns selector 的 UX
- [ ] **Console ObjectView.tsx** fullSchema：透传 `searchableFields`
- [ ] **i18n keys**：`console.objectView.searchableFields`
- [ ] **测试**：选择字段 → searchableFields 数组更新

#### 6. Filterable Fields 配置

**Spec 属性**：`filterableFields: string[]`

**当前面板**：完全缺失

**修改内容**：
- [ ] **ViewConfigPanel.tsx** Data 区：新增 `filterableFields` multi-select checkbox 列表
  - data-testid: `filterable-fields-selector`
- [ ] **Console ObjectView.tsx** fullSchema：透传 `filterableFields`
- [ ] **i18n keys**：`console.objectView.filterableFields`
- [ ] **测试**：选择字段 → filterableFields 数组更新

#### 7. Resizable 列可拖拽调宽

**Spec 属性**：`resizable: boolean`

**当前面板**：完全缺失

**修改内容**：
- [ ] **ViewConfigPanel.tsx** Appearance 区：新增 `resizable` Switch
  - data-testid: `toggle-resizable`
- [ ] **Console ObjectView.tsx** fullSchema：透传 `resizable`
- [ ] **PluginObjectView.tsx** schema：透传 `resizable`
- [ ] **i18n keys**：`console.objectView.resizableColumns`
- [ ] **测试**：toggle → 值透传

#### 8. Density Mode 独立选择器

**Spec 属性**：`densityMode: 'compact' | 'comfortable' | 'spacious'`

**当前面板**：只有 `rowHeight` 图标按钮（short/medium/tall/extraTall），缺少 densityMode 独立控制

**修改内容**：
- [ ] **ViewConfigPanel.tsx** Appearance 区：新增 `densityMode` Select 下拉
  - 选项：`compact`, `comfortable`, `spacious`
  - data-testid: `select-densityMode`
  - 或：将现有 rowHeight 按钮组值改为 spec 值 `compact`/`medium`/`tall`
- [ ] **Console ObjectView.tsx** fullSchema：透传 `densityMode`
- [ ] **i18n keys**：`console.objectView.densityCompact`, `console.objectView.densityComfortable`, `console.objectView.densitySpacious`
- [ ] **测试**：densityMode 选择 → 值透传

#### 9. Hidden Fields 默认隐藏字段

**Spec 属性**：`hiddenFields: string[]`

**当前面板**：完全缺失（columns 只控制显示顺序，不等于 hiddenFields）

**修改内容**：
- [ ] **ViewConfigPanel.tsx** Data 区：新增 `hiddenFields` multi-select checkbox
  - data-testid: `hidden-fields-selector`
- [ ] **Console ObjectView.tsx** fullSchema：透传 `hiddenFields`
- [ ] **i18n keys**：`console.objectView.hiddenFields`
- [ ] **测试**：选择字段 → hiddenFields 数组更新

#### 10. Row Actions / Bulk Actions 配置

**Spec 属性**：`rowActions: string[]`、`bulkActions: string[]`

**当前面板**：完全缺失

**修改内容**：
- [ ] **ViewConfigPanel.tsx** User Actions 区：新增 `rowActions` multi-select（从 objectDef 或 ActionSchema 派生可用 action 列表）
  - data-testid: `row-actions-selector`
- [ ] **ViewConfigPanel.tsx** User Actions 区：新增 `bulkActions` multi-select
  - data-testid: `bulk-actions-selector`
- [ ] **Console ObjectView.tsx** fullSchema：透传 `rowActions`, `bulkActions`
- [ ] **i18n keys**：`console.objectView.rowActions`, `console.objectView.bulkActions`
- [ ] **测试**：选择 actions → 值透传

#### 11. Sharing 配置

**Spec 属性**：`sharing: { visibility?: 'private' | 'team' | 'organization' | 'public'; enabled?: boolean }`

**当前面板**：完全缺失

**修改内容**：
- [ ] **ViewConfigPanel.tsx**：新增 Sharing Section（collapsible）
  - [ ] `sharing.enabled` Switch — data-testid: `toggle-sharing-enabled`
  - [ ] `sharing.visibility` Select — data-testid: `select-sharing-visibility`
    - 选项：`private`, `team`, `organization`, `public`
- [ ] **Console ObjectView.tsx** fullSchema：透传 `sharing`
- [ ] **i18n keys**：`console.objectView.sharing`, `console.objectView.sharingEnabled`, `console.objectView.sharingVisibility`
- [ ] **测试**：sharing toggle + visibility 选择 → 值透传

#### 12. Add Record 完整配置

**Spec 属性**：`addRecord: { enabled?, position?, mode?, formView? }`

**当前面板**：只有 `addRecordViaForm` boolean toggle

**修改内容**：
- [ ] **ViewConfigPanel.tsx** Page Config 区：将 `addRecordViaForm` toggle 升级为 `addRecord` 子编辑器
  - [ ] `addRecord.enabled` Switch — data-testid: `toggle-addRecord-enabled`
  - [ ] `addRecord.position` Select（`top`, `bottom`）— data-testid: `select-addRecord-position`
  - [ ] `addRecord.mode` Select（`inline`, `form`, `modal`）— data-testid: `select-addRecord-mode`
  - [ ] `addRecord.formView` Input — data-testid: `input-addRecord-formView`
- [ ] **i18n keys**：`console.objectView.addRecordPosition`, `console.objectView.addRecordMode`, `console.objectView.addRecordFormView`
- [ ] **测试**：addRecord 子配置 → 值透传

#### 13. Conditional Formatting 规则编辑器

**Spec 属性**：`conditionalFormatting: Array<{ field, operator, value, backgroundColor?, textColor?, borderColor?, expression? }>`

**当前面板**：完全缺失

**修改内容**：
- [ ] **ViewConfigPanel.tsx** Appearance 区：新增 "Conditional Formatting" 展开行
  - 点击展开规则列表编辑器
  - 每条规则：field Select + operator Select + value Input + color pickers（bg/text/border）
  - data-testid: `conditional-formatting-editor`
- [ ] **Console ObjectView.tsx** fullSchema：透传 `conditionalFormatting`
- [ ] **i18n keys**：`console.objectView.conditionalFormatting`, `console.objectView.addRule`
- [ ] **测试**：增加规则 → conditionalFormatting 数组更新

#### 14. Quick Filters 配置

**Spec 属性**：`quickFilters: Array<{ id, label, filters, icon?, defaultActive? }>`

**���前面板**：完全缺失

**修改内容**：
- [ ] **ViewConfigPanel.tsx** Data 区：新增 "Quick Filters" 展开行
  - 规则列表编辑器：每条 quickFilter 有 label Input + filter 条件编辑 + defaultActive Switch
  - data-testid: `quick-filters-editor`
- [ ] **Console ObjectView.tsx** fullSchema：透传 `quickFilters`
- [ ] **i18n keys**：`console.objectView.quickFilters`, `console.objectView.addQuickFilter`
- [ ] **测试**：增加 quickFilter → 值透传

---

### P2 — 低优先级（边缘/开发者配置）

#### 15. Show Record Count

**Spec**：`showRecordCount: boolean` — **修改**：Page Config 区新增 Switch，data-testid: `toggle-showRecordCount`

#### 16. Allow Printing

**Spec**：`allowPrinting: boolean` — **修改**：Page Config 区新增 Switch，data-testid: `toggle-allowPrinting`

#### 17. Virtual Scroll

**Spec**：`virtualScroll: boolean` — **修改**：Data 区新增 Switch，data-testid: `toggle-virtualScroll`

#### 18. Empty State 配置

**Spec**：`emptyState: { title?, message?, icon? }` — **修改**：Appearance 区新增 3 个 Input

#### 19. ARIA 配置

**Spec**：`aria: { label?, describedBy?, live? }` — **修改**：新增 Accessibility Section（collapsible），3 个 Input

#### 20. User Filters 完整编辑器

**Spec**：`userFilters: { element, fields, tabs, allowAddTab, showAllRecords }` — **修改**：Data 区新增完整 userFilters 编辑器（复杂度高，可单独 Issue）

#### 21. View Tabs 配置

**Spec**：`tabs: Array<{ name, label, icon?, view?, filter?, ... }>` — **修改**：新增 Tabs 编辑器

---

### 语义对齐修复（不新增控件，修正现有映射）

#### A. `editRecordsInline` → `inlineEdit` 字段名统一

**当前**：面板写 `editRecordsInline`，Console 映射为 `inlineEdit`

- [ ] **ViewConfigPanel.tsx** L989-993：将 `updateDraft('editRecordsInline', ...)` 改为 `updateDraft('inlineEdit', ...)`
- [ ] **ViewConfigPanel.tsx** L992：`draft.editRecordsInline` → `draft.inlineEdit`
- [ ] **Console ObjectView.tsx**：移除 `editRecordsInline → inlineEdit` 映射层
- [ ] **data-testid**：保持 `toggle-editRecordsInline`（兼容现有测试）或批量更新
- [ ] **测试**：更新所有引用

#### B. `rowHeight` 值域对齐 spec

**当前面板值**：`short`, `medium`, `tall`, `extraTall`
**Spec 值**：`compact`, `medium`, `tall`

- [ ] **ViewConfigPanel.tsx** L185-190 `ROW_HEIGHT_OPTIONS`：改为 `compact`, `medium`, `tall`
- [ ] **测试**：更新 rowHeight 相关断言

#### C. `showDescription` → `appearance.showDescription` 层级对齐

**当前**：面板写 flat `showDescription`，Console 做转换包入 `appearance`

- [ ] 保持现有 flat 写法（简化），Console 继续做转换 — 不需修改，但在注释中说明

---

## 涉及文件

| 文件 | 修改类型 |
|------|---------|
| `apps/console/src/components/ViewConfigPanel.tsx` | 主要修改：新增所有面板控件 |
| `apps/console/src/components/ObjectView.tsx` | fullSchema 透传补齐 |
| `packages/plugin-view/src/ObjectView.tsx` | renderContent schema 透传补齐 |
| `packages/plugin-list/src/ListView.tsx` | 消费新增 schema 属性 |
| `packages/types/src/objectql.ts` | NamedListView 补齐缺失属性（navigation, selection, pagination 等） |
| `packages/types/src/zod/objectql.zod.ts` | Zod schema 同步 |
| `packages/i18n/src/locales/en.json` | 新增 i18n keys |
| `packages/i18n/src/locales/zh.json` | 新增 i18n keys |
| `apps/console/src/__tests__/ViewConfigPanel.test.tsx` | 新增测试 |
| `packages/plugin-list/src/__tests__/ListView.test.tsx` | 新增测试 |

## 验收标准

- [ ] `ListViewSchema` 中所有 P0/P1 属性在 ViewConfigPanel 中有对应 UI 入口
- [ ] 每个面板控件的值变更能完整透传到 ListView 消费端
- [ ] 所有新增控件有 data-testid
- [ ] 所有新增控件有对应的 i18n key（en + zh）
- [ ] ViewConfigPanel 单元测试通过
- [ ] ListView 单元测试通过
- [ ] 全量 test suite 通过（`pnpm test`）
- [ ] ROADMAP.md 更新对应条目为已完成

文件	修改类型
`apps/console/src/components/ViewConfigPanel.tsx`	主要修改：新增所有面板控件
`apps/console/src/components/ObjectView.tsx`	fullSchema 透传补齐
`packages/plugin-view/src/ObjectView.tsx`	renderContent schema 透传补齐
`packages/plugin-list/src/ListView.tsx`	消费新增 schema 属性
`packages/types/src/objectql.ts`	NamedListView 补齐缺失属性（navigation, selection, pagination 等）
`packages/types/src/zod/objectql.zod.ts`	Zod schema 同步
`packages/i18n/src/locales/en.json`	新增 i18n keys
`packages/i18n/src/locales/zh.json`	新增 i18n keys
`apps/console/src/__tests__/ViewConfigPanel.test.tsx`	新增测试
`packages/plugin-list/src/__tests__/ListView.test.tsx`	新增测试

ViewConfigPanel 对齐 @objectstack/spec ListViewSchema 完整修改清单 #724

Description

背景

修改清单

P0 — ���优先级（用户可感知，必须在本轮完成）

1. 新增 Navigation 配置（替代 clickIntoRecordDetails 简单 toggle）

2. 新增 Selection 配置

3. 新增 Pagination 配置

P1 — 中优先级（高级配置，提升完整度）

4. Export Options 展开配置

5. Searchable Fields 配置

6. Filterable Fields 配置

7. Resizable 列可拖拽调宽

8. Density Mode 独立选择器

9. Hidden Fields 默认隐藏字段

10. Row Actions / Bulk Actions 配置

11. Sharing 配置

12. Add Record 完整配置

13. Conditional Formatting 规则编辑器

14. Quick Filters 配置

P2 — 低优先级（边缘/开发者配置）

15. Show Record Count

16. Allow Printing

17. Virtual Scroll

18. Empty State 配置

19. ARIA 配置

20. User Filters 完整编辑器

21. View Tabs 配置

语义对齐修复（不新增控件，修正现有映射）

A. editRecordsInline → inlineEdit 字段名统一

B. rowHeight 值域对齐 spec

C. showDescription → appearance.showDescription 层级对齐

涉及文件

验收标准

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

P0 — ��优先级（用户可感知，必须在本轮完成）

1. 新增 Navigation 配置（替代 `clickIntoRecordDetails` 简单 toggle）

A. `editRecordsInline` → `inlineEdit` 字段名统一

B. `rowHeight` 值域对齐 spec

C. `showDescription` → `appearance.showDescription` 层级对齐