TrueGrowth Golden Image Page UI Standard

http://127.0.0.1:7200/image is the approved golden page for TrueGrowth desktop UI. Future page work must use this page as the visual, interaction, spacing, and quality reference before inventing a new layout.

This standard applies to all navigation-entered first-level pages, app pages, drawers, popovers, dialogs, and settings surfaces. Complex canvas editing can keep its canvas-specific interaction model, but its visible shell controls, dialogs, and panels must still inherit these rules.

Product Character

The product is a minimalist AI creative workbench, not a marketing site and not a generic admin template.
Use TrueGrowth orange #ff5b00 as the only primary action, selected, progress, and focus accent.
Keep the left navigation stable and quiet. Page work happens in the content area.
The outer workbench must never become a scroll container during theme/status focus changes. If the left navigation content exceeds viewport height, scroll the navigation item rail internally and keep the bottom status/theme controls visible.
Light mode uses a clean white left creation surface and a soft gray result surface. Dark mode uses near-black surfaces with visible low-contrast borders.
UI density should feel professional and calm: compact controls, clear labels, generous but not wasteful whitespace.

Golden Layout

Generator pages such as AI 图片, AI 视频, 数字人, 音乐, and other creation flows SHALL follow the /image structure:

left nav | left creation panel (about 1/3) | right result feed (about 2/3)

The left panel is a full-height operation area, not a floating card.
The right panel is a full-height soft result area with task batches and history.
The gap between panels is tight and useful; do not create a large empty moat between form and results.
Page content should start close to the navigation boundary. Do not add broad top padding or a global topbar.
Theme switching must not move the page, change the content origin, or push the sidebar footer out of the viewport.
On smaller widths, panels may stack, but controls and media must not overlap or wrap awkwardly.

Non-generator pages must still borrow the same rhythm:

Exploration/App Center: full content surface, large visual discovery cards, hover actions, no cluttered button grids.
Asset/result libraries: large media-first grids, full media display, title/actions on hover or beneath media.
Task/status pages: dense timeline/list rows using the same typography, chips, orange progress, and quiet surfaces.
Settings/model pages: left-side grouped configuration, right-side status/detail panels, single-layer inputs, restrained borders.

Form Standard

Controls are 40-42px tall, 8-10px radius, and use orange focus rings.
Labels are visible and concise. Avoid raw implementation words, debug values, or unexplained auto text in user-facing summaries.
Textareas and long prompts are calm, lightly bordered, and sized to the workflow.
Model selection and parameter selection are real clickable controls. No decorative inactive pills.
Generate actions are centered/aligned to the form control width.
Avoid reset buttons unless the workflow truly needs one.
Search fields must be single-surface: either wrapper owns border/background and input is transparent, or input owns border/background. Never place a white input inside a white bordered wrapper.

Media And Result Feed

Results are grouped by generation batch. One generation request is one feed batch.
A batch shows one concise title, then only essential metadata: count, size/ratio, model, and status.
Generated images/videos display at their natural ratio with object-fit: contain; do not crop, add white circles, or put a decorative frame behind the media.
Multiple results in one batch sit on one horizontal rail and scroll horizontally.
Completed media surfaces are visually quiet; default actions are hidden until hover or placed in a compact action row.
Primary visible batch actions: 编辑, 重新生成, and a compact 更多 menu. Secondary actions such as publish, insert canvas, download, and delete live under 更多 unless the workflow requires direct exposure.
Publish actions route to the publish center with the chosen asset preselected and previewed.
Failure reason belongs at the batch/status level, not inside the media placeholder.

Loading, Empty, And Failed States

Loading placeholders use the requested generation ratio from parameters.
Processing media placeholders center a circular orange progress indicator above one concise label. The progress ring and label must be one vertical stack and must not overlap.
While loading/progress is visible, do not show the generic image/video placeholder icon.
Failed media uses a centered placeholder with a clean failure state; the batch shows the concrete failure reason.
Empty states are directional and short. They should tell the user what will appear there, not expose technical state.

Overlays, Popovers, And Dialogs

Dialogs, dropdowns, popovers, drawers, and menus must use the same radius, orange focus states, and light/dark surfaces as /image.
Avoid stacked card borders inside dialogs. If a section already has a surface, the inner input should be transparent or borderless.
Parameter popovers should be compact and graphical where possible, especially size/ratio choices.
Sliders are preferred for bounded numeric generation settings such as image count; image count max is 10 unless a product requirement changes it.
Hover menus should reveal actions smoothly without covering important media content.

Icon And Component Rules

New visible UI uses @/ui primitives and lucide-react icons.
Do not add new tdesign-react or tdesign-icons-react imports in app UI.
Do not create page-local basic buttons, inputs, cards, tabs, popovers, or progress components.
21st.dev, Tremor, or Magic UI snippets may be copied locally only after being retokenized into this style. They are not separate runtime design systems.

Browser QA Requirement

Every page migration must include browser evidence:

Visit the real route at http://127.0.0.1:7200/....
Capture desktop screenshot and at least one narrower viewport when practical.
Check light and dark mode for custom surfaces.
Inspect console warnings/errors and explain any remaining relevant issue.
Exercise one primary interaction: open a model/parameter selector, hover media actions, open a dialog, search/filter, or trigger the route's main CTA.
Verify no overlap, no text clipping, no button wrapping, no nested white search fields, and no media crop/white backing.

Migration Checklist

For each navigation-entered page:

It clearly follows either the generator split layout or the closest /image-derived library/status/settings layout.
Primary action is orange and only one primary action is visually dominant.
Forms use the same control height, radius, labels, focus, and density.
Results/media use full-ratio display and hover/compact actions.
Dialogs/popovers use single-surface inputs and consistent radius.
Light and dark mode are both styled.
Browser screenshot review has been completed.

7.2 KiB Raw Blame History