Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…t-family and --config-panel-width CSS variable Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
…upport, config panel separators and CSS variable width, tab bar improvements Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
… muted background and uppercase tracking Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
…ter/Sort/Group/Color buttons, responsive overflow Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
…ove unused searchExpanded state Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
…on Optimization Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
…matRelativeDate before formatDate Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
|
@copilot 仔细评估是否完成了任务中要求的所有开发 |
…g hardcoded grays in ObjectGrid and LayoutRenderer Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
完成了详细审查，在 commit 已补齐：
各项完成状态：
ROADMAP.md 已同步更新。全量测试 6495 通过（1 个为预存失败，与本 PR 无关）。 |
There was a problem hiding this comment.
Pull request overview
This PR standardizes UI styling and interaction patterns across ObjectUI-rendered surfaces (layout shell, sidebar navigation, list/grid/report views, and config panels) by aligning them to shared theme tokens and consistent micro-interactions.
Changes:
- Replace multiple hardcoded grays/rounded-md usages with theme tokens and rounded-lg across runner/plugins/fields.
- Improve navigation and view chrome (sidebar active indicator + tooltips, tightened tab bar with active indicator, ListView toolbar inline search + active button states).
- Add shared global styling hooks (Inter font on
:root,--config-panel-width, separators between config sections) and document the work in ROADMAP.
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/runner/src/LayoutRenderer.tsx | Use theme background token for the app shell. |
| packages/plugin-report/src/ReportRenderer.tsx | Tokenize report container/table styling and standardize radius. |
| packages/plugin-list/src/components/TabBar.tsx | Tighten spacing and add active-tab indicator + transitions. |
| packages/plugin-list/src/tests/ListView.test.tsx | Update tests for always-visible inline search input. |
| packages/plugin-list/src/ListView.tsx | Inline search input, active-state styling for toolbar buttons, overflow handling. |
| packages/plugin-grid/src/VirtualGrid.tsx | Unify header background + header typography tokens. |
| packages/plugin-grid/src/ObjectGrid.tsx | Tokenize loading/empty styling and gray fallback badge styling. |
| packages/layout/src/SidebarNav.tsx | Provide tooltip text to sidebar menu buttons (for collapsed mode). |
| packages/fields/src/widgets/GridField.tsx | Tokenize grid field table styling and standardize radius/hover. |
| packages/fields/src/index.tsx | Add formatRelativeDate() and support formatDate(..., 'relative'). |
| packages/components/src/ui/sidebar.tsx | Sidebar group separators + active indicator + transition updates. |
| packages/components/src/renderers/complex/data-table.tsx | Unify table header styling with muted header background and typography. |
| packages/components/src/index.css | Add --config-panel-width and set global font-family on :root. |
| packages/components/src/custom/config-panel-renderer.tsx | Use --config-panel-width and add section separators. |
| ROADMAP.md | Document the UI consistency milestone and status. |
| <tbody className="divide-y divide-border"> | ||
| {value.slice(0, 5).map((row: any, rowIdx: number) => ( | ||
| <tr key={rowIdx} className="hover:bg-gray-50"> | ||
| <tr key={rowIdx} className="hover:bg-muted/50 transition-colors"> |
There was a problem hiding this comment.
The row hover style uses transition-colors without a duration class, so the transition duration will default to 0s. If you want the intended 150ms hover transition, add duration-150 (to match the rest of the UI consistency changes).
| <tr key={rowIdx} className="hover:bg-muted/50 transition-colors"> | |
| <tr key={rowIdx} className="hover:bg-muted/50 transition-colors duration-150"> |
| } | ||
|
|
||
| /** | ||
| * Format date as relative time (e.g., "2 days ago", "Today", "Overdue 3d") |
There was a problem hiding this comment.
The doc comment mentions an "Overdue 3d" output, but formatRelativeDate() never returns an "Overdue"-prefixed string. Either adjust the comment to match current behavior or implement the overdue formatting described.
| * Format date as relative time (e.g., "2 days ago", "Today", "Overdue 3d") | |
| * Format date as relative time (e.g., "2 days ago", "Today", "In 3 days") |
| {schema.sections.map((section, sectionIdx) => { | ||
| if (section.visibleWhen && !section.visibleWhen(draft)) return null; | ||
|
|
||
| const sectionCollapsed = isCollapsed(section.key, section.defaultCollapsed); | ||
|
|
||
| return ( | ||
| <div key={section.key} data-testid={`config-section-${section.key}`}> | ||
| {sectionIdx > 0 && <Separator className="my-1" />} | ||
| <SectionHeader |
There was a problem hiding this comment.
Section separators are keyed off the original section index (sectionIdx). If earlier sections are hidden via visibleWhen, the first visible section can incorrectly render with a leading . Track the index of the last rendered/visible section (or filter visible sections first) before inserting separators.
| "group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", | ||
| // Active indicator bar (3px left accent) | ||
| "relative data-[active=true]:before:absolute data-[active=true]:before:left-0 data-[active=true]:before:top-1/2 data-[active=true]:before:-translate-y-1/2", | ||
| "data-[active=true]:before:h-4 data-[active=true]:before:w-[3px] data-[active=true]:before:rounded-full data-[active=true]:before:bg-primary", |
There was a problem hiding this comment.
The active indicator bar uses ::before utilities, but no before:content-["" ] (or equivalent) is set. Without a content value, the pseudo-element won’t render, so the 3px active indicator may never appear.
| "data-[active=true]:before:h-4 data-[active=true]:before:w-[3px] data-[active=true]:before:rounded-full data-[active=true]:before:bg-primary", | |
| "data-[active=true]:before:h-4 data-[active=true]:before:w-[3px] data-[active=true]:before:rounded-full data-[active=true]:before:bg-primary data-[active=true]:before:content-['']", |
| "h-7 px-3 py-1.5 text-xs rounded-none transition-colors duration-150", | ||
| isActive | ||
| ? "border-b-2 border-primary font-medium text-foreground" | ||
| : "text-muted-foreground hover:text-foreground" |
There was a problem hiding this comment.
Switching the active tab adds a real bottom border only for the active state, which can cause a 2px layout jump when changing tabs. Consider reserving the space by applying border-b-2 border-transparent for inactive tabs (and only changing the border color when active).
| : "text-muted-foreground hover:text-foreground" | |
| : "border-b-2 border-transparent text-muted-foreground hover:text-foreground" |
| placeholder="Search..." | ||
| value={searchTerm} | ||
| onChange={(e) => handleSearchChange(e.target.value)} | ||
| className="pl-7 h-7 text-xs bg-muted/50 border-transparent hover:bg-muted focus:bg-background focus:border-input transition-colors" |
There was a problem hiding this comment.
This input has transition-colors but no duration-* class, so the color transition duration remains the CSS default (effectively no animation). If the goal is consistent 150ms transitions, add duration-150 here as well.
| className="pl-7 h-7 text-xs bg-muted/50 border-transparent hover:bg-muted focus:bg-background focus:border-input transition-colors" | |
| className="pl-7 h-7 text-xs bg-muted/50 border-transparent hover:bg-muted focus:bg-background focus:border-input transition-colors duration-150" |
Standardizes visual treatment across all SDUI-rendered interfaces — hardcoded colors → theme tokens, toolbar interaction states, header typography, sidebar active indicators, config panel separators, and smooth transition animations on all interactive elements.
Theme & Design Tokens
text-gray-*/bg-gray-*/border-gray-*inGridField.tsx,ReportRenderer.tsx,ObjectGrid.tsx, andLayoutRenderer.tsxwith theme tokens (text-muted-foreground/bg-muted/border-border/bg-background)font-family: 'Inter', ui-sans-serif, system-uiin:root--config-panel-width: 280pxCSS custom propertyrounded-md→rounded-lgon card/panel surfacestransition-colors duration-150to all interactive elements (toolbar buttons, tab bar, sidebar menu buttons)Sidebar Navigation
data-[active=true]:before:pseudo-element onSidebarMenuButtonSidebarMenuButtontransition expanded to includecolor, background-colorwithduration-150border-t border-border/30 pt-3 mt-2onSidebarGroupLabeltooltip={item.title}inSidebarNavfor icon-only modeLayoutRenderer.tsxouter shellbg-slate-50/50 dark:bg-zinc-950replaced withbg-backgroundtheme tokenListView Toolbar
<Input w-48>— removed expand/collapse toggle andsearchExpandedstatebg-primary/10 border border-primary/20when active values existoverflow-x-autoon toolbar row for narrow viewportstransition-colors duration-150on all toolbar buttonsGrid Header Styling
text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70 bg-muted/30ConfigPanelRenderer
<Separator className="my-1" />between sections--config-panel-widthCSS variableTab Bar
gap-0.5,px-3 py-1.5border-b-2 border-primary font-medium text-foreground(replaces variant toggle)transition-colors duration-150on tab buttonsOther
formatRelativeDate()in@object-ui/fields— returns "Today", "Yesterday", "3 days ago", etc.Original prompt
This section details on the original issue you should resolve
<issue_title>ObjectUI 平台级界面风格与交互一致性优化</issue_title>
<issue_description>## 概述
本 issue 针对 ObjectUI 元数据平台（非某个特定示例应用）提出整体界面风格和交互规范优化建议。所有通过 ObjectUI SDUI 引擎生成的应用界面（Grid、Board、Calendar、Dashboard、Report 等）均应从中受益。
关联 Issues
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具体改进
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，确保所有渲染场景生效rounded-lg（var(--radius)），边框统一border-border/50transition-colors duration-1502️⃣ Sidebar 导航组件（
packages/layout+packages/components/src/ui/sidebar.tsx）现状问题
SidebarNav组件缺少分组分隔、活跃项指示强化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分隔packages/runner/src/LayoutRenderer.tsx的手写 sidebar 迁移使用@object-ui/layout的SidebarNav组件，消除两套实现collapsible="icon"模式下确保所有SidebarMenuButton有tooltipprop3️⃣ ListView 工具栏布局（
packages/plugin-list/src/ListView.tsx）现状问题
具体改进
quickFilterspills 和userFilterstoolbarFlags.showSearch为 true 时，右侧固定渲染<Input>搜索框（而非点击展开），宽度w-48bg-primary/8 border-primary/20背景overflow-x-auto横向滚动，或折叠为 "More" 下拉菜单4️⃣ ObjectGrid 单元格渲染器（
packages/plugin-grid/src/ObjectGrid.tsx+packages/fields/）现状问题
inferColumnType()自动推断类型后的渲染缺少视觉标识——select/status 类字段显示纯文本2026-02-26T03:09:07.458Z）具体改进
select时，getCellRenderer()返回<Badge>并支持从 field.options 映射颜色formatDate()在packages/fields/src/formatters.ts中增加相对时间模式（"2 days ago"、"Today"、"Overdue 3d"），并在 ObjectGrid 列推断时默认启用<Checkbox disabled checked={value} />或✓/—图标ObjectGrid表头行统一使用text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70 bg-muted/55️⃣ ConfigPanelRenderer（
packages/components/src/custom/+apps/console/src/components/ViewConfigPanel.tsx）现状问题
具体改进
ConfigPanelRenderer渲染 section 之间插入<Separator className="my-1" />defaultCollapsed: true）--config-panel-width: 280px，支持 schema 覆盖packages/i18n确保面板标签与主界面语言一致，消除中英混排6️⃣ 视图 Tab 栏（
packages/plugin-view/src/ObjectView.tsx+packages/plugin-list/src/components/TabBar.tsx）现状问题
ViewSwitcher组件视觉风格不统一具体改进
TabsTrigger间使用gap-0.5，padding 缩减为px-3 py-1.5border-b-2 border-primary+font-medium text-foreground<Badge variant="dot" className="bg-green-500">替代纯文本圆点验收标准
pnpm test全量通过Comments on the Issue (you are @copilot in this section)
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.