Skip to content

实现ViewConfigPanel全功能交互支持(Airtable风格右侧配置面板) #667

Description

@hotlong

背��

目前ViewConfigPanel为只读展示模式,不具备任何交互能力,不能编辑视图配置或相关功能,缺乏Airtable等主流NoCode平台的所见即所得(WYSIWYG)体验。

优化目标

  • 支持所有配置项的实时编辑,包括:页面标题、描述、视图类型、字段列、过滤器、排序、外观、用户过滤、导出打印等
  • 各配置项均可直接点击、切换、拖拽、切换开关等方式进行修改(UI交互能力如Switch、Input、Select、Button等���
  • 编辑后可本地暂存,点击保存按钮后统一更新后端视图配置
  • 配置项变更后主列表自动刷新,保持所见即所得
  • 支持打开各分区(如列、过滤、排序)专属编辑器面板

实现方案建议

  1. 增加ViewConfigPanel的交互props接口(如:onViewUpdate、onToggle、onOpenEditor、onSave),将变更回调至父组件
  2. 替换只读ToggleIndicator为可编辑Switch组件,按字段(如showSearch、showFilters、showSort、allowExport)直接触发变更
  3. 页面标题、描述支持inline-edit(Input/textarea),失焦或确认后onViewUpdate
  4. Columns、Filter、Sort行变为Button或Clickable Row,支持点击弹出专属编辑器
  5. 视图类型(ViewType)支持Select切换,不同类型自动对应相关配置项
  6. 所有变更走draft本地状态,最后点击保存统一提交onSave
  7. 父组件ObjectView增加本地draft状态,所有交互变更缓存在draft,保存后更新数据源/后端
  8. 更新测试用例,覆盖所有配置交互与保存流程
  9. Roadmap同步更新,说明配置面板能力升级

子任务 Sub-Tasks

  • 定义交互props接口与本地draft状态结构
  • 全部配置项支持可编辑交互能力
  • 打开Columns、Filters、Sort专属面板逻辑实现
  • ViewType Select切换逻辑实现
  • 本地draft状态与保存统一处理
  • 与ObjectView集成数据流,保存后刷新主视图
  • 测试用例补全,覆盖交互与编辑流程
  • Roadmap更新

完成功能后需运行所有相关test,并及时修订roadmap。

Metadata

Metadata

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions