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

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 更新对应条目为已完成

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 层级对齐

涉及文件

验收标准

Activity

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` 层级对齐