Initial TrueGrowth source import
This commit is contained in:
213
docs/TRUEGROWTH_GOLDEN_PAGE_MIGRATION_AUDIT.md
Normal file
213
docs/TRUEGROWTH_GOLDEN_PAGE_MIGRATION_AUDIT.md
Normal file
@@ -0,0 +1,213 @@
|
||||
# TrueGrowth Golden Page Migration Audit
|
||||
|
||||
This audit tracks the migration of navigation-entered pages to the `/image` golden UI standard. A route is not complete until it has browser screenshots, console health, and one primary interaction verified.
|
||||
|
||||
## Verification Method
|
||||
|
||||
- Start from `http://127.0.0.1:7200/<route>`.
|
||||
- Compare against `docs/TRUEGROWTH_GOLDEN_IMAGE_PAGE_UI.md`.
|
||||
- Capture desktop screenshot and, when practical, one narrower viewport.
|
||||
- Check light and dark mode for any custom surfaces.
|
||||
- Exercise one primary interaction.
|
||||
- Record remaining UI debt before marking complete.
|
||||
|
||||
## Route Inventory
|
||||
|
||||
| Priority | Route | Component Entry | Surface Type | Golden Standard Target | Required Interaction | Status | Browser Evidence |
|
||||
| --------- | --------------- | ------------------------------------ | ------------------------- | -------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| Reference | `/image` | `OpenTuGenerationPage(kind="image")` | Generator | Approved golden page | Model/parameter selector, generation batch, media hover actions | Accepted | Current approved reference |
|
||||
| P0 | `/video` | `OpenTuGenerationPage(kind="video")` | Generator | Left config panel + right batch result feed | Model/parameter selector, video batch hover actions, mobile task tab | Migrated and browser verified | 2026-07-04: desktop light/dark, simulated completed/processing/failed batch, hover actions, more menu, model/parameter popovers, mobile task tab |
|
||||
| P0 | `/avatar` | `DigitalHumanPage` | Generator + media manager | Left config panel + right media/result management | Select avatar/model/sound, open creation dialog, hover image/video assets | Migrated and browser verified | 2026-07-04: compose, avatar management, voice, timbre, products, add avatar/timbre dialogs, desktop light/dark, mobile |
|
||||
| P0 | `/assets` | `AssetsPage` | Media library | Full-ratio media grid, hover/compact actions, single-surface search | Search/filter, hover asset actions, open media picker/preview | Migrated and browser verified | 2026-07-04: desktop light/dark, empty state, single-surface search, simulated media cards/hover, mobile |
|
||||
| P1 | `/publish` | `AutoPublishingPage` | Status + composer | Selected media preview + publish form/status list | Select publishable asset, open account/publish dialog, validate target form | Migrated and browser verified | 2026-07-05: desktop light/dark, media grid, search/select/preview interaction, accounts/drafts/history tabs, mobile |
|
||||
| P1 | `/tasks` | `TasksPage` | Status list | Batch/status rows, orange progress, clear failure reasons | Filter/status action, retry/open result, confirm cleanup dialog | Migrated and browser verified | 2026-07-05: desktop light/dark, compact task rows, failure filter/reason, more menu, branded cleanup confirm, mobile |
|
||||
| P1 | `/models` | `ModelsPage` | Settings/status | Grouped setup panel + model/runtime status detail | Open local import/setup controls, model action menu, status refresh | Migrated and browser verified | 2026-07-05: desktop overview/ComfyUI/import/installed, dark mode, mobile, import input interaction |
|
||||
| P1 | `/settings` | `SettingsPage` | Settings | Inline page, grouped controls, tokenized dialogs/popovers | Open provider/model route controls and save/update settings | Migrated and browser verified | 2026-07-05: desktop light/dark, provider/model/platform views, model dropdown, theme toggle scroll lock, mobile |
|
||||
| P1 | `/workflow` | `BusinessOrchestrationPage` | Status + editor entry | Homepage-first status/list surface, editor deferred, dialogs tokenized | Create from template, open editor entry, inspect history/status | Migrated and browser verified | 2026-07-05: desktop light/dark, saved workflow list/internal scroll, template picker, editor shell, workflow settings modal, mobile |
|
||||
| P2 | `/timeline` | `FunClipEditingPage` | Generator/editor support | Compact creation controls + media/task feed, editor-specific areas preserved | Import media, choose task mode, open result/history action | Migrated and browser verified | 2026-07-05: desktop split with large left editing area, compact right guide, service/history dialogs, no overflow/errors |
|
||||
| P2 | `/intelligence` | `OmniIntelligencePage` | Research/workflow | Dense creation/search panel + result feed/cards | Run/search research input, open result/action panel | Migrated and browser verified | 2026-07-05: desktop research console, saved research side rail, composer controls, no overflow/errors |
|
||||
| P2 | `/home` | `DashboardPage` | Exploration | App discovery surface with large visual cards and minimal hover actions | Search/filter apps, hover card, open `/image` or `/video` | Migrated and browser verified | 2026-07-05: app-center/exploration layout, large visual cards, route-open affordances, no overflow/errors |
|
||||
| Scoped | `/canvas` | Drawnix canvas | Complex canvas | Canvas exempt from full layout, but panels/dialogs/toolbar must follow golden controls | Open tool panel/dialog, task center, media insert drawer | Scoped browser verified | 2026-07-05: canvas shell, inspiration panel, toolbar, model/menu styling checked; infinite SVG overflow is expected canvas behavior |
|
||||
|
||||
## Dialog And Popover Inventory
|
||||
|
||||
| Surface | Expected Golden Behavior | Status |
|
||||
| ---------------------- | ------------------------------------------------------------- | ----------------------------------------------------------- |
|
||||
| Model selector | Clickable, compact, orange focus, no extra outer border | Pending |
|
||||
| Generation parameters | Compact popover, graphical ratio choices, count slider max 10 | Partially aligned on `/image`, verify elsewhere |
|
||||
| Knowledge selector | Single-surface search/input, no nested white input | Partially aligned on `/image`, verify elsewhere |
|
||||
| Media picker | Full-ratio thumbnails, hover actions, single-surface search | Pending |
|
||||
| Confirm dialog | Shared branded modal, not browser confirm | Partially aligned, verify all callsites |
|
||||
| Settings dialogs | Rounded controls, no stacked card/input borders, dark mode | Pending |
|
||||
| Publish picker/preview | Preselect incoming asset and show preview in form | Aligned on `/publish`, verify handoff from each source page |
|
||||
|
||||
## Browser Audit Notes
|
||||
|
||||
### `/video` initial audit
|
||||
|
||||
- Date: 2026-07-04
|
||||
- Evidence: browser loaded `http://127.0.0.1:7200/video` with no relevant console errors.
|
||||
- Current structure: `.tg-first-page--video`, `.ai-video-generation-container`, one left form, and one right feed are present.
|
||||
- Gaps versus `/image`: visible top mode tabs remain; left and right areas are still framed as nested cards; right result feed uses an extra white card background; bottom action area feels pinned and heavier than the `/image` generation button.
|
||||
- Next fix: align `/video` with `/image` generator layout first, then verify result media rails, loading/failed placeholders, and video hover actions.
|
||||
|
||||
### `/video` migration verification
|
||||
|
||||
- Date: 2026-07-04
|
||||
- Evidence: browser verified `http://127.0.0.1:7200/video` against the `/image` golden standard.
|
||||
- Desktop layout: left creation panel `392px` with `#fdfdfd`, right result feed `640px` with `#f9f9fa`, no global topbar, mode switcher hidden, content starts at the navigation boundary.
|
||||
- Empty state: right feed stays unframed and directional, with no nested white card background.
|
||||
- Simulated batch: injected and then removed three temporary `tg-ui-audit-video-golden-*` tasks covering completed, processing, and failed states. Final cleanup removed `3` records and the route returned to zero temporary batches.
|
||||
- Result feed: batch width `600px`; three media items are on one horizontal rail; completed video uses `object-fit: contain` with transparent backing and no shadow; failed reason appears at batch level; loading placeholder keeps `生成视频 / 42% / 生成中` in a centered stack with `10px` gaps and no overlap.
|
||||
- Actions: completed media hover exposes labeled icon actions `预览 / 插入画布 / 去发布 / 下载`; batch row keeps `重试/重新生成` plus `更多`; `更多` opens `插入画布 / 去发布 / 下载 / 删除`.
|
||||
- Popovers: generation parameters open above the trigger without viewport overflow; model selector uses a single-surface search field and rounded orange-selected items.
|
||||
- Dark mode: left `#0f0f12`, right/feed `#111114`, orange progress and primary action preserved, action pills and failure placeholders use dark surfaces.
|
||||
- Mobile `390x780`: no page-level horizontal overflow (`scrollWidth=390`); `生成设置/生成任务` switcher works; task tab hides the form and shows the feed; media hover overlay/play icon is suppressed on mobile so the batch remains clean while the rail scrolls internally.
|
||||
- Console: no new relevant runtime errors were observed. Historical `TaskQueueService restoreTasks` warnings came from temporary injected tasks and were cleaned up.
|
||||
|
||||
### `/avatar` migration verification
|
||||
|
||||
- Date: 2026-07-04
|
||||
- Evidence: browser verified `http://127.0.0.1:7200/avatar` compose and `形象管理` states against the `/image` golden standard.
|
||||
- Compose layout: left creation panel is `392px` with `#fdfdfd`; right task feed is `640px` with `#f9f9fa`; right title no longer wraps vertically; task list height expands to the available feed area.
|
||||
- Compose media selector: selected avatar media card was reduced from a giant `508px` card to a compact `142px` row; thumbnail uses `object-fit: contain` with transparent backing.
|
||||
- Media fallback: local avatar templates whose `videoUrl` is actually a `.jpg` thumbnail now render as `<img>` poster thumbnails instead of blank `<video>` elements; real video URLs remain playable.
|
||||
- Avatar management: `形象管理` now uses a full-width gray media grid with 39 media cards, 5 visible columns at desktop width, full-content thumbnails, transparent card backing, bottom gradient title, and compact hover action buttons.
|
||||
- Add avatar dialog: `添加数字人形象` opens in a viewport-contained resource dialog; panel stays within `1280x720`, actions are visible at the bottom, controls are 42px single-surface inputs, and the backdrop is a full-screen rectangular overlay instead of a distorted button shape.
|
||||
- Dark mode: avatar management custom surfaces were checked by temporarily applying `data-tg-theme="dark"`; page, tabs, grid, cards, and text use dark tokens and orange selection.
|
||||
- Voice synthesis: `声音合成` now follows the `/image` split generator pattern. Browser metrics showed `392px` left operation panel with `#fdfdfd`, `640px` right feed with `#f9f9fa`, full-height `720px` sections, transparent empty state, and no page-level horizontal overflow.
|
||||
- Timbre management: `音色管理` uses the full gray management-grid pattern. Cards are compact `176px` cards with no text clipping, transparent grid background, orange current state, and vertical grid scrolling only inside the content area.
|
||||
- Products management: `成品管理` uses a full gray result-management surface. Empty state is transparent in both light and dark mode; no stray white/gray block remains behind media/result placeholders.
|
||||
- Add timbre dialog: `添加音色` was opened and verified. The dialog panel is viewport-contained at `1040px` desktop width, the form body no longer has a nested white card/background, inputs remain single-surface `42px` controls, the recorder panel uses the same 16px radius system, and the device select is visually distinct inside the recorder surface.
|
||||
- Dark mode: `声音合成`, `音色管理`, and `成品管理` were checked with `data-tg-theme="dark"`. Left voice panel uses `#0f0f12`, right/full surfaces use `#111114`, cards and controls use low-contrast dark surfaces, and orange selection/action states remain visible.
|
||||
- Mobile `390x780`: `声音合成` stacks cleanly under the mobile navigation; page `scrollWidth=390`, task section `scrollWidth=390`, and no hidden horizontal overflow remains after clearing desktop-only right-header padding.
|
||||
- Console: no new relevant runtime errors were observed. Existing `TaskQueueService restoreTasks` warnings remain historical/local task restoration noise.
|
||||
- Remaining `/avatar` debt: edit/delete confirmation flows should still be sampled during the global confirm-dialog sweep, but the route-level first pages and add dialogs now meet the golden-page migration bar.
|
||||
|
||||
### `/assets` migration verification
|
||||
|
||||
- Date: 2026-07-04
|
||||
- Evidence: browser verified `http://127.0.0.1:7200/assets` against the `/image` golden standard for media-library pages.
|
||||
- Desktop light layout: page now uses a full soft-gray `#f9f9fa` workbench surface; the heading is shortened to `素材库`; the old marketing-size title, radial orange wash, white summary card, white grid card, and dashed empty card were removed.
|
||||
- Search: the media search field is single-surface. Browser metrics showed the wrapper owns the `40px` border/focus ring while the inner TDesign `.t-input` has `border: 0`, transparent background, and no shadow.
|
||||
- Empty state: the empty library state is transparent and centered in the media area; no nested white card or dashed frame remains. The icon is a quiet orange-accent tile.
|
||||
- Simulated asset-grid QA: browser temporarily injected and then removed three `#tg-assets-card-qa` cards covering 9:16, 16:9, and 1:1 media. Images used `object-fit: contain`, transparent backing, no white/gray decorative card, and hover revealed title/preview actions without changing media fit.
|
||||
- Dark mode: `data-tg-theme="dark"` was checked. The page uses `#111114`, search/chips/buttons use low-contrast dark surfaces, active chips use orange translucent selection, and the empty state remains transparent.
|
||||
- Mobile `390x780`: no page-level horizontal overflow (`scrollWidth=390`); heading copy wraps correctly; summary and filter rows scroll horizontally inside their own rails instead of widening the page.
|
||||
- Interaction proof: typed `海报` into the search field and verified focus state, value, single border, and orange focus ring.
|
||||
- 2026-07-05 containment pass: desktop root width was rechecked after tightening non-generator immersive sizing. Browser metrics showed `.tg-first-page--assets` at `1000x688`, document width `1280`, client width `1280`, and no page-level overflow. Mobile `390x780` kept document width equal to client width; only the intended local filter/action rail scrolls horizontally.
|
||||
- Console: no new relevant runtime errors were observed. Existing `TaskQueueService restoreTasks` warnings remain historical/local task restoration noise.
|
||||
|
||||
### `/publish` migration verification
|
||||
|
||||
- Date: 2026-07-05
|
||||
- Evidence: browser verified `http://127.0.0.1:7200/publish` against the `/image` golden standard for media/status/composer pages.
|
||||
- Desktop assets tab: page uses soft gray `#f9f9fa`, compact stats chips, pill tabs, a single-surface search field, transparent media grid, and full-ratio media thumbnails. Browser metrics showed `63` real publishable assets, no page horizontal overflow (`scrollWidth=1280`), grid `display:flex` before mobile override, `overlapCount=0`, media `object-fit: contain`, transparent thumb/media backgrounds, and no card shadow.
|
||||
- Filter/upload row: search, upload, and filter rail stay on one desktop row. The upload file input is absolute inside the `156px` upload pill and no longer expands the row.
|
||||
- Interaction proof: searched `ComfyUI`, which reduced visible assets from `63` to `4`; selected the first card, which updated selected count to `1` and enabled `加入当前草稿`; opened the card preview modal.
|
||||
- Preview modal: the publish preview now shows media at natural ratio with `object-fit: contain`, transparent media backing, no black/white decorative fill, and a viewport-contained panel (`860px` desktop panel, image `284x504` for a `432x768` asset).
|
||||
- Accounts tab: account rows were reduced from old white 8px shadow cards to compact 74px low-contrast rows inside a scrollable list; the search field remains single-surface; action buttons are compact and do not wrap.
|
||||
- Drafts tab: draft form now uses natural vertical flow instead of the old fixed grid row rules. Browser metrics showed all labels have nonzero heights, no label overlap, 42px inputs, and the left panel scrolls internally for long fields and tag rows.
|
||||
- Account picker: publish target account choices are compact 64px two-column cards with low-contrast surfaces, no oversized rounded-pill blocks, and a clean empty target list state.
|
||||
- History tab: campaign and target rows use the same low-contrast 14px radius system, no old white card/shadow style, and the campaigns area scrolls internally.
|
||||
- Dark mode: temporarily applied `data-tg-theme="dark"` and verified the publish page background `#111114`, dark search surface, orange selected chips, transparent media thumbnails, and orange primary button.
|
||||
- Mobile `390x780`: no page-level horizontal overflow (`scrollWidth=390`); stats/tabs remain horizontally usable; assets filter stacks into search/upload/filter rail; media grid becomes two stable columns with `159px` cards.
|
||||
- Console: no new relevant runtime errors were observed. Existing `TaskQueueService restoreTasks` warnings remain historical/local task restoration noise.
|
||||
- Remaining `/publish` debt: source-to-publish handoff should be sampled from each generation/media page during the cross-page publish-flow sweep; destructive account/campaign confirmations should be sampled during the global confirm-dialog sweep.
|
||||
|
||||
### `/tasks` migration verification
|
||||
|
||||
- Date: 2026-07-05
|
||||
- Evidence: browser verified `http://127.0.0.1:7200/tasks` against the `/image` golden standard for task/status pages.
|
||||
- Desktop light layout: route uses a soft gray `#f9f9fa` workbench surface, compact `任务中心` header, pill summary chips, status filter rail, and a single-column task feed. Browser metrics showed `5` task rows, `4` filter chips, task list `overflow-y: auto`, no page-level horizontal overflow (`scrollWidth=1280`), and rows sized `942x104`.
|
||||
- Task rows: old large media cards were replaced with compact status rows. Each row has a small `92x72` full-content preview/fallback, concise title, provider/source metadata, one status hint, orange progress, primary open/result action, and a compact `更多` menu for secondary cleanup/publish actions.
|
||||
- Failure state: clicking `失败 1` filtered the feed to one failed row. The failed row preserved the concrete reason `ComfyUI 缺少模型文件：flux1-schnell.safetensors。请先在模型中心下载到 models/diffusion_models 后重启或刷新 ComfyUI。` in the row status area.
|
||||
- Interaction proof: opened the failed row `更多` menu; the menu stayed inside the viewport and showed `清理`. Clicking `清理` opened the shared branded `.tg-confirm-dialog` with `保留 / 清理`, not a native browser confirm. Clicking `保留` closed the dialog and the failed row remained.
|
||||
- Dark mode: temporarily applied `data-tg-theme="dark"` and verified page background `#111114`, transparent list, row background `rgba(255,255,255,0.043)`, row border `rgba(255,255,255,0.09)`, orange progress, and dark menu/action surfaces.
|
||||
- Mobile `390x780`: no page-level horizontal overflow (`scrollWidth=390`); task list scrolls internally; rows stack into a readable single-column shape; action buttons keep readable text (`查看结果`, `回到功能`, `打开功能`, `更多`) and action rails scroll internally when needed.
|
||||
- Console: no new relevant runtime errors were observed. Existing `TaskQueueService restoreTasks` warnings remain historical/local task restoration noise.
|
||||
- Remaining `/tasks` debt: the global mobile workbench navigation still consumes a tall top band before content; this belongs to the shared shell sweep rather than the task page body.
|
||||
|
||||
### `/models` migration verification
|
||||
|
||||
- Date: 2026-07-05
|
||||
- Evidence: browser verified `http://127.0.0.1:7200/models` against the `/image` golden standard for settings/status pages.
|
||||
- Desktop overview: route renders `.tg-first-page--models` with the left grouped model-center panel and right soft-gray status/detail area. Browser metrics showed `1000x688` page area, right surface `#f9f9fa`, no page-level horizontal overflow (`scrollWidth=1280`, `clientWidth=1280`), and overview family/status cards with sibling overlap count `0`.
|
||||
- ComfyUI tab: `ComfyUI` view uses the same grouped setup/detail rhythm. The flow cards and compact model cards had sibling overlap count `0`; the right section scrolls internally (`scrollHeight=1628`, `clientHeight=688`) while the workbench itself stays locked.
|
||||
- Import/install tab: `导入安装` keeps the import flow in compact rows and single-surface controls. The scanned model package rows had sibling overlap count `0`; the model path input is the only matching placeholder, `42px` tall, `12px` radius, and filling `/tmp/truegrowth-test-model.zip` updated the input without page overflow.
|
||||
- Installed tab: `已安装` model cards render in a wrapping card grid with no sibling overlap; browser metrics showed the bridge grid using flex wrapping, three installed cards, and per-card action rows scrolling internally when actions exceed the card width instead of overlapping.
|
||||
- Dark mode: toggled through the real navigation theme control. The models page stayed at `scrollTop=0`; left panel used near-black `#101012`, right/detail section used near-black dark surfaces, cards/inputs used low-contrast dark borders, and orange remains the active/focus/action accent.
|
||||
- Mobile `390x780`: no page-level horizontal overflow (`scrollWidth=390`, `clientWidth=390`); the model center stacks under the shared mobile navigation, tabs become a horizontal rail, and the page scrolls vertically inside the route. The remaining tall mobile navigation band is shared-shell debt rather than `/models` body debt.
|
||||
- Console: no new relevant runtime errors were observed. Existing `TaskQueueService restoreTasks` warnings remain historical/local task restoration noise.
|
||||
- Notes: `/models` was already visually migrated in code, so this pass only added missing browser evidence and audit status; no `/image` code or styling was modified.
|
||||
|
||||
### `/settings` migration verification
|
||||
|
||||
- Date: 2026-07-05
|
||||
- Evidence: browser verified `http://127.0.0.1:7200/settings` against the `/image` golden standard for inline settings pages.
|
||||
- Desktop light layout: route renders as inline `.settings-dialog--embedded`, not a modal. Browser metrics showed one settings dialog with no modal backdrop, no page-level horizontal overflow (`scrollWidth=1280`, `clientWidth=1280`), left settings nav `120px`, middle provider/preset list about `277px`, and right content panel about `603px`.
|
||||
- Provider view: provider rows, switches, inputs, and content sections use the `/image` token rhythm: white/soft-gray surfaces in light mode, 42px controls, 12-16px radius, orange active states, no native browser/system dialog shell.
|
||||
- Model presets view: opened `模型预设` and the first model picker. The trigger is single-surface (`42px`, `12px`, transparent inner input with `border: 0`), and the dropdown stays within the viewport (`520x282`, no offscreen edges). The dropdown was tightened to a `16px` menu with `12px` vendor/model items and orange hover/selected states in both light and dark mode.
|
||||
- Platform config view: preference rows and switches render as compact dark/light tokenized rows; action buttons now stay as a right-aligned compact group instead of stretching across the whole card.
|
||||
- Theme toggle interaction: fixed the shared settings-route shell so the left nav item rail scrolls internally while the bottom task status/theme controls remain visible. Browser proof after clicking theme: `.tg-workbench.scrollTop` stayed `0`, sidebar/main/page `y=0`, settings content `y=16`, and the theme button remained inside the viewport.
|
||||
- 2026-07-05 sidebar containment pass: route changes now scroll the active left-nav item into the sidebar rail instead of letting the last item overlap the footer. Browser metrics on `/settings` showed nav `scrollTop=70`, active item bottom `621`, footer top `647`, no overlap, and document width `1280`.
|
||||
- Dark mode: browser checked provider/model/platform states. Settings surfaces use near-black `#111114`/`#0f0f12` tones, low-contrast dark cards/inputs, orange active chips/switches, and transparent inner model picker input.
|
||||
- Mobile `390x780`: no page-level horizontal overflow (`scrollWidth=390`, `clientWidth=390`). The shared sidebar becomes the mobile top band, settings nav becomes a horizontal rail, and the content panel scrolls internally.
|
||||
- Console: no framework overlay or new relevant runtime errors were observed. Existing `TaskQueueService restoreTasks` warnings remain historical/local task restoration noise.
|
||||
- Remaining `/settings` debt: global shared-shell mobile navigation still consumes a tall top band before content; that belongs to the all-page shell sweep. Additional destructive/reset flows should be sampled later during the global confirm-dialog sweep.
|
||||
|
||||
### `/workflow` migration verification
|
||||
|
||||
- Date: 2026-07-05
|
||||
- Evidence: browser verified `http://127.0.0.1:7200/workflow` against the `/image` golden standard for workflow/status/editor-entry pages.
|
||||
- Desktop library: route now uses a flat `/image`-derived workbench surface with a compact 130px header, soft result area, white/near-black side surface, and no old hero-style card or heavy shadow. Browser metrics showed `15` saved workflows, `1` active schedule, `6` recent runs, no page-level horizontal overflow (`docW=1280`, `clientW=1280`), and `.tg-workbench.scrollTop=0`.
|
||||
- Scroll behavior: saved workflows and recent runs scroll inside their own lists. Browser metrics showed workflow list `clientH=472`, `scrollH=1220`, `overflow-y:auto`; recent run list `clientH=309`, `scrollH=386`, `overflow-y:auto`.
|
||||
- Template picker: clicking `新建流程` opened `选择流程模板`; browser metrics showed `5` template cards, no card overlap, and the template grid scrolls internally inside the route.
|
||||
- Editor entry: clicking `空白流程` kept React Flow/editor deferred until entry, then rendered the editor shell with stable height. Browser metrics showed shell `558px`, canvas `448px`, sidebar and inspector visible, no page horizontal overflow, and the top action rail horizontally scrolls instead of pushing the canvas to zero height.
|
||||
- Dialog: opened `流程设置`; modal stayed within the viewport (`860x615`), controls were `42px` high with `12px` radius, and the form used a single flat modal surface with no nested card shell.
|
||||
- Theme switching: fixed the shared sidebar theme toggle so focusing/clicking it no longer scrolls the workbench. Browser proof after theme toggle: `.tg-workbench`, `.tg-main`, `.tg-content`, and `.tg-page` all stayed at `scrollTop=0`; route `pageY=16`.
|
||||
- Dark mode: verified near-black workflow surfaces, low-contrast borders, orange primary action/progress accents, and no displaced content after toggling.
|
||||
- Mobile `390x780`: no page-level horizontal overflow (`docW=390`, `clientW=390`); header actions remain in a horizontal rail, workflow panels stack cleanly, and empty/list states stay centered without text overlap.
|
||||
- Console: no framework overlay or new relevant runtime errors were observed. Existing `TaskQueueService restoreTasks` warnings remain historical/local task restoration noise.
|
||||
- Remaining `/workflow` debt: the complex React Flow canvas itself is intentionally scoped; future canvas-specific work should keep the editor chunk deferred and retain explicit node handles.
|
||||
|
||||
### `/timeline` migration verification
|
||||
|
||||
- Date: 2026-07-05
|
||||
- Evidence: browser verified `http://127.0.0.1:7200/timeline` against the `/image` standard with the user's flexible layout note applied.
|
||||
- Desktop layout: the page uses a large left editing/selection area and compact right `当前流程` guide. It intentionally does not force the `/image` one-third/two-thirds split because the clip workflow needs a denser left capability list and only lightweight right status.
|
||||
- Interaction proof: opened `检查服务`; the service modal stayed inside the viewport, used a single branded overlay/panel, and showed friendly initialization copy instead of raw browser errors. Opened `任务历史`; the modal used the same quiet dialog surface and empty-state style.
|
||||
- Console and overflow: no relevant errors or page-level overflow were observed. Buttons did not clip or wrap.
|
||||
|
||||
### `/intelligence` migration verification
|
||||
|
||||
- Date: 2026-07-05
|
||||
- Evidence: browser verified `http://127.0.0.1:7200/intelligence` against the `/image` standard for research/workflow pages.
|
||||
- Desktop layout: the research console uses a large result panel, compact saved-research side rail, and bottom composer. Saved research card text is constrained inside the side rail with ellipsis instead of overflowing.
|
||||
- Interaction proof: the page loaded with an existing saved research item, mode tabs, model selector surface, and send action visible. The layout had no button clipping, no page-level overflow, and no console errors.
|
||||
|
||||
### `/home` migration verification
|
||||
|
||||
- Date: 2026-07-05
|
||||
- Evidence: browser verified `http://127.0.0.1:7200/home` as the App Center / exploration surface.
|
||||
- Desktop layout: the page uses a large visual entry area, compact quick-entry cards, and repeated app cards instead of a generic admin list. It keeps TrueGrowth branding, orange primary action, and route-open affordances.
|
||||
- Console and overflow: no relevant errors or page-level overflow were observed. The large discovery cards remain a deliberate exploration-page treatment rather than a generator split.
|
||||
|
||||
### `/canvas` scoped verification
|
||||
|
||||
- Date: 2026-07-05
|
||||
- Evidence: browser verified `http://127.0.0.1:7200/canvas` for the complex Drawnix canvas shell.
|
||||
- Scoped result: the infinite canvas itself keeps its own interaction model. The visible toolbar, inspiration panel, model/agent controls, and floating surfaces were checked for the TrueGrowth light surface, orange states, soft borders, and rounded control rhythm.
|
||||
- Overflow note: the large `board-host-svg` extends beyond the viewport by design for the infinite canvas and is not treated as page-level UI overflow.
|
||||
|
||||
## Done Definition
|
||||
|
||||
A page is complete only when:
|
||||
|
||||
- Layout matches the closest `/image`-derived pattern.
|
||||
- All visible controls use the shared TrueGrowth visual system.
|
||||
- No new TDesign or tdesign icon usage exists outside legacy boundaries.
|
||||
- Media is not cropped or backed by stray white/gray decorative shapes.
|
||||
- Loading, empty, failed, and hover states are checked.
|
||||
- Dialogs/popovers opened from the page are checked.
|
||||
- Browser screenshots and interaction notes are recorded.
|
||||
Reference in New Issue
Block a user