ObjectUI 平台级界面风格与交互一致性优化 #820

概述

本 issue 针对 ObjectUI 元数据平台（非某个特定示例应用）提出整体界面风格和交互规范优化建议。所有通过 ObjectUI SDUI 引擎生成的应用界面（Grid、Board、Calendar、Dashboard、Report 等）均应从中受益。

关联 Issues

• ListView Spec Protocol Gap — Complete Unimplemented Properties Checklist #736 ListView Spec Protocol Gap
• ViewConfigPanel 对齐 @objectstack/spec ListViewSchema 完整修改清单 #724 ViewConfigPanel 对齐 spec
• 通用 Schema-Driven 配置面板框架建设及全平台接入 #731 通用 Schema-Driven 配置面板框架
• 设置面板 UI 严格按协议（spec）对齐、梳理和整改 #741 设置面板 UI 严格按协议对齐

1️⃣ 全局主题与设计 Token 标准化

涉及：packages/core/src/theme/ThemeEngine.ts、packages/components/src/index.css、content/docs/guide/theming.md

现状问题

• 部分组件直接使用硬编码灰度色（如 GridField.tsx 中 text-gray-500、bg-gray-50），未走 theme token
• 字体未统一强制使用 Inter（Storybook 配置了，但平台运行时未全局注入）
• 边框、圆角、间距在不同插件间存在不一致

具体改进

• 扫描所有硬编码颜色：packages/fields/src/widgets/GridField.tsx、packages/plugin-report/src/ReportRenderer.tsx 等组件中 text-gray-*、bg-gray-* 全部替换为 theme token（text-muted-foreground、bg-muted）
• 强制全局字体：在 packages/components/src/index.css 的 :root 中注入 font-family: 'Inter', ui-sans-serif, system-ui，确保所有渲染场景生效
• 统一间距/圆角：所有 card/panel/popover 使用 rounded-lg（var(--radius)），边框统一 border-border/50
• 过渡动画：所有可交互元素添加 transition-colors duration-150

2️⃣ Sidebar 导航组件（packages/layout + packages/components/src/ui/sidebar.tsx）

现状问题

• SidebarNav 组件缺少分组分隔、活跃项指示强化
• 折叠态下图标缺少 Tooltip
• packages/runner/src/LayoutRenderer.tsx 中的手写 sidebar 与 packages/layout/src/SidebarNav.tsx 组件风格不统一

具体改进

• 活跃项样式强化：SidebarMenuButton 的 isActive 态增加左侧 3px 指示条（before:absolute before:left-0 before:w-[3px] before:bg-primary）
• 分组视觉分隔：SidebarGroupLabel 增加 border-t border-border/30 pt-3 mt-2 分隔
• 统一 LayoutRenderer 和 SidebarNav：packages/runner/src/LayoutRenderer.tsx 的手写 sidebar 迁移使用 @object-ui/layout 的 SidebarNav 组件，消除两套实现
• 折叠态 Tooltip：collapsible="icon" 模式下确保所有 SidebarMenuButton 有 tooltip prop

3️⃣ ListView 工具栏布局（packages/plugin-list/src/ListView.tsx）

现状问题

• 工具按钮（Hide fields / Filter / Group / Sort / Color / Density）和快捷过滤器（Status / Priority / Category）平铺在同一行，视觉层次平坦
• Search 以按钮形态隐藏，不够直观
• 工具栏按钮在窄屏下溢出处理不佳

具体改进

• 双行布局：第一行为视图操作工具（Hide fields / Filter / Sort / Group / Color / Density），第二行为 quickFilters pills 和 userFilters
• 搜索栏改为 inline Input：toolbarFlags.showSearch 为 true 时，右侧固定渲染 <Input> 搜索框（而非点击展开），宽度 w-48
• 激活态强化：当 Filter/Sort/Group 有值时，对应按钮增加 bg-primary/8 border-primary/20 背景
• 响应式溢出：窄屏时工具按钮使用 overflow-x-auto 横向滚动，或折叠为 "More" 下拉菜单

4️⃣ ObjectGrid 单元格渲染器（packages/plugin-grid/src/ObjectGrid.tsx + packages/fields/）

现状问题

• inferColumnType() 自动推断类型后的渲染缺少视觉标识——select/status 类字段显示纯文本
• 日期字段直接输出 ISO 字符串（如 2026-02-26T03:09:07.458Z）
• Boolean 字段无视觉渲染

具体改进

• select/status 类型：当 field.type 为 select 时，getCellRenderer() 返回 <Badge> 并支持从 field.options 映射颜色
• 日期类型格式化：formatDate() 在 packages/fields/src/formatters.ts 中增加相对时间模式（"2 days ago"、"Today"、"Overdue 3d"），并在 ObjectGrid 列推断时默认启用
• Boolean 类型：渲染为 <Checkbox disabled checked={value} /> 或 ✓/— 图标
• 表头样式：ObjectGrid 表头行统一使用 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70 bg-muted/5

5️⃣ ConfigPanelRenderer（packages/components/src/custom/ + apps/console/src/components/ViewConfigPanel.tsx）

现状问题

• 右侧配置面板 Section 之间缺少明显分隔
• Toggle/Switch 项密集排列，缺少分组呼吸感
• 面板宽度在不同场景下不一致（ViewConfig vs Dashboard vs Report）

具体改进

• Section 间分隔：ConfigPanelRenderer 渲染 section 之间插入 <Separator className="my-1" />
• 折叠 Section 默认策略：低频使用的 Section（Sharing、Accessibility、Advanced）默认折叠（defaultCollapsed: true）
• 统一面板宽度：所有 ConfigPanel 类组件统一使用 CSS 变量 --config-panel-width: 280px，支持 schema 覆盖
• 标签语言统一：利用 packages/i18n 确保面板标签与主界面语言一致，消除中英混排

6️⃣ 视图 Tab 栏（packages/plugin-view/src/ObjectView.tsx + packages/plugin-list/src/components/TabBar.tsx）

现状问题

• Named View Tabs（All Tasks / Board / Calendar / Active）间距过大
• 活跃 Tab 指示器不够明显
• Tab 与 ViewSwitcher 组件视觉风格不统一

具体改进

• Tab 间距收紧：TabsTrigger 间使用 gap-0.5，padding 缩减为 px-3 py-1.5
• 活跃态指示：底部 border-b-2 border-primary + font-medium text-foreground
• Badge 标记：带状态标记的 Tab（如 "Active•"）使用 <Badge variant="dot" className="bg-green-500"> 替代纯文本圆点

验收标准

• 所有硬编码灰度色已替换为 theme token
• 全局字体、间距、圆角通过 CSS custom properties 统一
• Sidebar 两套实现合并为一套
• ListView 工具栏改为双行布局
• ObjectGrid 的 select/date/boolean 类型有视觉化渲染
• ConfigPanel section 有明确分隔和折叠策略
• Tab 栏视觉风格统一
• pnpm test 全量通过
• ROADMAP.md 相关条目更新