104 lines
7.2 KiB
Markdown
104 lines
7.2 KiB
Markdown
# 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.
|