Skip to content

优化编辑视图页面,支持Airtable风格的右侧配置面板(Inline ViewDesigner) #661

@hotlong

Description

@hotlong

背景

目前ObjectUI的"编辑视图"功能需要跳转到专门的ViewDesignerPage,体验与Airtable等主流NoCode平台相比有较大差距。Airtable等系统,支持在主列表视图页面直接通过右侧配置面板(Inline/Slide Panel)进行字段、过滤、外观等配置,极大提升了易用性与效率。

见下方截图:
Airtable 编辑视图示例

主要优化目标

  • 支持在ObjectView页面直接弹出/收起"视图配置"侧边栏,无需跳转
  • 右侧面板提供:页面(标题/描述)、数据源、外观设定、用户过滤器、交互按钮、导出/打印等配置,风格类比Airtable交互
  • 切换不同的视图Tab,右侧面板自动切换对应内容
  • 管理员操作项(如新建/编辑视图)整合到页面当前内容,更流畅的设计工具体验

建议实现方案

  1. apps/console/src/components/ObjectView.tsx中实现本地State(如showViewConfigPanel),点击"编辑视图"Icon时触发;
  2. 侧边栏参考MetadataPanelViewDesigner面板结构,抽取为可复用组件ViewConfigPanel
  3. 面板内信息分区(页面、数据、外观、用户过滤器、操作等),并自动同步当前视图配置;
  4. 原跳转"视图设计器"菜单替换为本地弹窗/侧栏,所有编辑均为所见即所得(WYSIWYG),保存后即时刷新主列表;
  5. 新建视图、切换视图类型与现有逻辑复用,侧边栏自动闭合或切换;
  6. 需要考虑Panel与主视图Responsive布局兼容;

其他优化项

  • 标题支持"面包屑+描述"展示;
  • 主内容底部可显示当前"记录总数"footer

开发完成需运行相关test,评估对roadmap的影响,并及时修订roadmap。

子任务 Sub-Tasks

  • 设计/出稿 ViewConfigPanel 结构和交互
  • 实现 ObjectView 与 Panel 的集成及状态切换
  • 支持Tab切换和Panel动态内容
  • 替换原"编辑视图"菜单跳转为右侧Panel弹出
  • 优化Responsive兼容性和可访问性
  • 添加主页面footer显示"记录总数"
  • 更新/新增测试用例,完善测试
  • 更新 Roadmap

如有需要可细化面板内各分区配置项。

Metadata

Metadata

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions