# 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:

```text
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.