优化视图切换��视图管理：对标主流低代码平台的管理体验

[hotlong]

背景

目前 ObjectUI 已支持网格、看板、日历等多种视图，采用了类似 Airtable 的顶部标签切换。但相比微软 Power Apps、Salesforce Lightning、Airtable 等主流低代码平台，现有界面在"新增、切换、修改、管理"视图的便捷性和丰富性上还有提升空间。

主要问题/差距

• "新增视图"入口不够直观（多为下拉菜单）
• 视图重命名、删除、复制流程不够流畅
• 无法快速保存当前过滤/排序为新视图（Save as View）
• 视图标签无右键菜单，操作入口分散
• 视图标签不可拖动排序，无溢出下拉（More）
• 无过滤/排序等指示器
• 个性化视图和共用视图区分不明显

参考竞品

• Salesforce Lightning：支持标签右键菜单、拖拽排序、Pin View、表头指示
• Microsoft Power Apps、Airtable、Zoho Creator 等：新增视图按钮直观，快速保存当前过滤，支持私有与共享

推荐优化点（建议分阶段实施，优先高频痛点）

第一阶段（快速迭代，可一周内完成）

1. 视图标签栏直接加"+新建"按钮，取消下拉入口
2. 标签支持右键菜单（重命名、复制、删除、设为默认、分享）
3. 标签溢出时自动收敛为"更多"下拉（More...）
4. 有过滤/排序指示小圆点
5. 工具栏增加"保存为新视图"（Save as View）按钮，支持从当前过滤/排序直接存为新视图

第二阶段（增强易用性）

6. 支持视图标签拖拽排序
7. 支持标签双击直接重命名
8. 个性/共享视图专区分组与筛选
9. 支持 Pin 常用视图
10. 视图类型切换 palette/一键切版

技术方案建议

• 将视图 Tab 渲染部分提取为独立组件，并向 schema 增加视图管理相关配置项（详见 code scan 建议）
• 利用现有 useViewSharing hook 丰富 UI 入口
• 实现 ContextMenu/Overflow/Indicator 通用能力，兼容移动端
• 校验所有主流整合场景的可测性

Roadmap 建议

• 第一阶段建议按上述顺序拆分子任务实现（可在一周内完成主体验证）
• 实现后需完善测试用例，并同步补充文档/Storybook/教程

---

参考实现和竞品 UX 分析详见本 issue 评论区/文档。欢迎评��细化补充。

相关资料

• Power Apps 官方文档
• Salesforce Kanban 视图说明
• Airtable View UX
• Zoho Creator 视图类型 UX

[hotlong]

---

📊 Current State Analysis

ObjectUI already has a solid view management foundation:

✅ What's Already Built

Component	Location	Capability
ViewSwitcher (plugin-view)	packages/plugin-view/src/ViewSwitcher.tsx	Tabs / Buttons / Dropdown switching between view types
ViewSwitcher (plugin-list)	packages/plugin-list/src/ViewSwitcher.tsx	Grid/Kanban/Gallery/Calendar/Timeline/Gantt/Map
ObjectView (plugin-view)	packages/plugin-view/src/ObjectView.tsx	Unified CRUD view with multi-view, named views, navigation
ObjectView (console)	apps/console/src/components/ObjectView.tsx	Airtable-style named-view tabs, URL routing
ViewDesigner	packages/plugin-designer/src/ViewDesigner.tsx	Create/edit view configs (columns, filters, sort, type)
useViewSharing	packages/react/src/hooks/useViewSharing.ts	Save/delete/duplicate/share views with visibility
View Switching Tests	packages/react/src/__tests__/view-switching.test.tsx	State preservation (selection, filters, scroll, sort)

Current UX Flow (from Screenshot)

Your demo shows an Airtable-inspired tab bar: All Tasks | Board | Calendar | Active with a "进入设计模式" (Enter Design Mode) button. The toolbar has Hide fields | Filter | Group | Sort | Color | Comfortable controls.

---

🔍 Gap Analysis: ObjectUI vs. Mainstream Platforms

Comparison Matrix

Capability	Salesforce	Power Apps	Airtable	Zoho	ObjectUI	Gap
Named views (pre-configured)	✅	✅	✅	✅	✅	—
View type switching (Grid↔Board↔Calendar)	✅	✅	✅	✅	✅	—
Inline view creation (one-click)	✅	⚠️	✅	✅	⚠️	Gap A
View rename inline	✅	❌	✅	✅	❌	Gap B
View duplication	✅	❌	✅	✅	✅ (hook only)	Gap C
View delete with confirmation	✅	✅	✅	✅	⚠️ (designer only)	Gap D
Drag-reorder view tabs	❌	❌	✅	❌	❌	Gap E
View context menu (right-click)	✅	❌	✅	❌	❌	Gap F
Personal vs. shared views	✅	✅	✅	✅	✅ (hook exists)	Gap G
Pin/favorite views	✅	❌	❌	✅	❌	Gap H
View filter indicator (badge)	✅	❌	✅	✅	❌	Gap I
"Save as new view" from current filters	✅	✅	✅	✅	⚠️ (no UI)	Gap J
View overflow (many views → "More" dropdown)	✅	❌	✅	✅	❌	Gap K

---

🎯 Recommended Improvements (Prioritized)

Phase 1: Quick Wins — View Tab Management UX (1-2 weeks)

These close the biggest UX gaps with the least effort:

1A. Inline "Add View" Button on Tab Bar

Currently the "Add View" is buried in a dropdown menu. Salesforce and Airtable show a + button directly on the tab bar.

// Proposed enhancement to ObjectViewSchema
interface ObjectViewSchema {
  // ... existing props
  
  /**
   * View tab bar configuration
   * Controls inline view management UX
   */
  viewTabBar?: {
    /** Show inline "+" button to create new views */
    showAddButton?: boolean;       // default: true
    /** Allow inline renaming by double-clicking tab */
    inlineRename?: boolean;        // default: true
    /** Show context menu on right-click */
    contextMenu?: boolean;         // default: true
    /** Allow drag-reorder of view tabs */
    reorderable?: boolean;         // default: false
    /** Max visible tabs before overflow → "More" dropdown */
    maxVisibleTabs?: number;       // default: 6
    /** Show filter/sort indicator badges on tabs */
    showIndicators?: boolean;      // default: true
  };
}

1B. View Tab Context Menu (Right-click)

Salesforce's right-click on a list view tab → Rename | Duplicate | Delete | Share | Set as Default

// Concept: Right-click context menu on view tabs
// Would live in apps/console/src/components/ObjectView.tsx

import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger } from '@object-ui/components';

function ViewTab({ view, isActive, onRename, onDuplicate, onDelete, onSetDefault, onShare }: ViewTabProps) {
  return (
    <ContextMenuTrigger asChild>
      <button
        onClick={() => onViewChange(view.id)}
        onDoubleClick={() => onRename(view.id)}
        className={cn(
          "inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium border-b-2 transition-colors",
          isActive ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"
        )}
      >
        <ViewIcon className="h-3.5 w-3.5" />
        {view.label}
        {view.hasActiveFilters && (
          <span className="ml-1 h-1.5 w-1.5 rounded-full bg-primary" />
        )}
      </button>
    </ContextMenuTrigger>
    <ContextMenuContent>
      <ContextMenuItem onClick={() => onRename(view.id)}>
        <Pencil className="h-4 w-4 mr-2" /> Rename
      </ContextMenuItem>
      <ContextMenuItem onClick={() => onDuplicate(view.id)}>
        <Copy className="h-4 w-4 mr-2" /> Duplicate View
      </ContextMenuItem>
      <ContextMenuItem onClick={() => onShare(view.id)}>
        <Share2 className="h-4 w-4 mr-2" /> Share View
      </ContextMenuItem>
      <ContextMenuItem onClick={() => onSetDefault(view.id)}>
        <Star className="h-4 w-4 mr-2" /> Set as Default
      </ContextMenuItem>
      <ContextMenuSeparator />
      <ContextMenuItem onClick={() => onDelete(view.id)} className="text-destructive">
        <Trash2 className="h-4 w-4 mr-2" /> Delete View
      </ContextMenuItem>
    </ContextMenuContent>
  );
}

1C. View Overflow ("More" Dropdown)

When there are 7+ views, the tab bar overflows. Airtable solves this with a "..." overflow button.

// Concept: Overflow handling for many view tabs
function ViewTabBar({ views, activeViewId, maxVisible = 6 }: ViewTabBarProps) {
  const visibleViews = views.slice(0, maxVisible);
  const overflowViews = views.slice(maxVisible);

  return (
    <div className="flex items-center gap-0.5 border-b px-3 overflow-hidden">
      {visibleViews.map(view => (
        <ViewTab key={view.id} view={view} isActive={view.id === activeViewId} />
      ))}
      
      {overflowViews.length > 0 && (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button className="px-2 py-2 text-sm text-muted-foreground hover:text-foreground">
              <MoreHorizontal className="h-4 w-4" />
              <span className="ml-1 text-xs">{overflowViews.length} more</span>
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            {overflowViews.map(view => (
              <DropdownMenuItem key={view.id} onClick={() => onViewChange(view.id)}>
                <ViewIcon type={view.type} className="h-4 w-4 mr-2" />
                {view.label}
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      )}
      
      {/* Inline add button — always visible */}
      <button onClick={onAddView} className="px-2 py-2 text-muted-foreground hover:text-foreground">
        <Plus className="h-4 w-4" />
      </button>
    </div>
  );
}

Phase 2: "Save Current State as View" (1 week)

The biggest missing pattern from Salesforce — the ability to apply filters/sort/group, then click "Save as New View" without entering the full ViewDesigner.

// Quick "Save as View" dialog
// Triggered from toolbar when user has active filters/sort that differ from the view definition

interface SaveAsViewDialogProps {
  objectName: string;
  currentFilters: Record<string, any>;
  currentSort: Array<{ field: string; direction: 'asc' | 'desc' }>;
  currentViewType: ViewType;
  currentColumns: string[];
  onSave: (config: { name: string; visibility: 'private' | 'shared' }) => void;
}

function SaveAsViewButton({ hasUnsavedChanges, onSave, onReset }: {
  hasUnsavedChanges: boolean;
  onSave: () => void;
  onReset: () => void;
}) {
  if (!hasUnsavedChanges) return null;
  
  return (
    <div className="flex items-center gap-1 ml-2 text-xs text-amber-600">
      <AlertCircle className="h-3.5 w-3.5" />
      <span>Unsaved changes</span>
      <Button variant="ghost" size="sm" onClick={onSave}>Save</Button>
      <Button variant="ghost" size="sm" onClick={onReset}>Reset</Button>
    </div>
  );
}

Phase 3: View Type Quick-Switch Palette (1 week)

Instead of requiring a new named view for each type, allow quick-switching the current view's type like Notion's "Layout" menu:

// A command palette for switching view type within the current view
// Similar to Notion's "Layout" dropdown

const VIEW_TYPE_OPTIONS = [
  { type: 'grid',     label: 'Table',    icon: Table,           description: 'Rows and columns' },
  { type: 'kanban',   label: 'Board',    icon: LayoutGrid,      description: 'Group by status' },
  { type: 'calendar', label: 'Calendar', icon: Calendar,        description: 'Events on a calendar' },
  { type: 'gallery',  label: 'Gallery',  icon: Images,          description: 'Visual cards' },
  { type: 'timeline', label: 'Timeline', icon: Activity,        description: 'Chronological order' },
  { type: 'gantt',    label: 'Gantt',    icon: GanttChartSquare,description: 'Project scheduling' },
  { type: 'map',      label: 'Map',      icon: MapPin,          description: 'Geographic view' },
] as const;

// This would be a popover/command triggered from a "Layout" button in the toolbar

Phase 4: Drag-to-Reorder View Tabs (Optional, 1-2 days)

Low priority but differentiating — Airtable allows dragging tabs to reorder. Can be added using @dnd-kit/sortable (already likely in dependencies for Kanban).

---

🏗️ Architecture Recommendation

Based on the code scan, I recommend these specific changes:

A. Enhance ViewSwitcherSchema in @object-ui/types

// Enhancement to packages/types/src/views.ts

export interface ViewTabBarConfig {
  /** Show inline "+" button to create views */
  showAddButton?: boolean;
  /** Allow inline tab rename via double-click */
  inlineRename?: boolean;
  /** Right-click context menu */
  contextMenu?: boolean;
  /** Drag-reorder tabs */
  reorderable?: boolean;
  /** Max visible tabs before overflow */
  maxVisibleTabs?: number;
  /** Show filter/sort badges on tabs */
  showIndicators?: boolean;
  /** Show "Save as View" when filters differ from saved */
  showSaveAsView?: boolean;
}

// Add to ObjectViewSchema:
export interface ObjectViewSchema extends BaseSchema {
  // ... existing
  
  /** View tab bar UX configuration */
  viewTabBar?: ViewTabBarConfig;
  
  /** Callback when a view is created inline */
  onViewCreate?: string;
  
  /** Callback when a view is deleted */
  onViewDelete?: string;
  
  /** Callback when views are reordered */
  onViewReorder?: string;
}

B. Refactor Console's ObjectView Tab Bar into a Reusable Component

Currently the tab rendering is inline in apps/console/src/components/ObjectView.tsx. Extract it into @object-ui/plugin-view as a <ViewTabBar> component so it's reusable:

// Move from: apps/console/src/components/ObjectView.tsx (inline JSX)
// Move to:   packages/plugin-view/src/ViewTabBar.tsx (reusable component)

// This allows:
// 1. Console to use it
// 2. Any SDUI consumer to use it via schema
// 3. Storybook isolation for testing

C. Connect useViewSharing Hook to the Tab Bar UI

The hook at packages/react/src/hooks/useViewSharing.ts already supports saveView, deleteView, duplicateView, setVisibility — but there's no UI wired to it. The context menu and "Save as View" patterns complete this connection.

---

📋 Implementation Priority Summary

#	Enhancement	Effort	Impact	Inspired By
1	Inline + Add View button on tab bar	2h	🔴 High	Airtable, Salesforce
2	Right-click Context Menu on view tabs	1d	🔴 High	Salesforce, Notion
3	Tab overflow → "More" dropdown	4h	🟡 Medium	Airtable
4	Filter/Sort badge indicator on tabs	2h	🟡 Medium	Salesforce, Airtable
5	"Save as New View" from current state	2d	🔴 High	Salesforce, Zoho
6	Inline tab rename (double-click)	4h	🟡 Medium	Airtable
7	View type quick-switch palette	1d	🟡 Medium	Notion
8	Extract ViewTabBar as reusable component	1d	🟡 Medium	Architecture
9	Drag-reorder view tabs	1d	🟢 Low	Airtable
10	Pin/favorite views	4h	🟢 Low	Salesforce

Total estimated effort: ~2 weeks for all 10 items.

Items 1-5 (the top 5) deliver 80% of the UX improvement and can be done in ~1 week.