Jammy/TrueGrowth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial TrueGrowth source import

Browse Source
This commit is contained in:
Jammy
2026-07-07 09:36:36 +08:00
commit 3b6781d695
2283 changed files with 691996 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
openspec/changes/refactor-truegrowth-ui-system/design.md Normal file
View File

@@ -0,0 +1,26 @@
## Context
The app is a React/Vite/Nx desktop-style AI workbench with a large legacy Drawnix/opentu surface. Existing UI uses global SCSS tokens, TDesign compatibility overrides, workbench-specific SCSS, Lucide icons, and old tdesign icons.
## Goals
- Provide one local UI entry point that future app pages and Codex changes can reuse.
- Keep the implementation free for commercial use and locally controllable.
- Preserve light and dark mode, orange brand actions, and dense SaaS workbench ergonomics.
- Make `/image` AI 图片生成 the concrete golden page standard so future UI reviews compare against a real approved screen instead of vague style language.
- Avoid a second large UI framework replacing TDesign with another black-box dependency.
## Non-Goals
- This first phase does not remove all TDesign usage from Drawnix internals.
- This first phase does not purchase or depend on Tailwind Plus/Catalyst.
- This first phase does not change generation, asset, task, or canvas business logic.
## Decisions
- `apps/web/src/ui` is the only new app UI primitive entry point.
- Components are shadcn-style local React components with TrueGrowth CSS tokens.
- `docs/TRUEGROWTH_GOLDEN_IMAGE_PAGE_UI.md` is the canonical interpretation of the approved `/image` page and should be used before changing other navigation-entered pages.
- Radix primitives remain the intended future backing for complex menus/overlays when dependencies are installed.
- Lucide is the only icon set for new app UI.
- TDesign imports in new app code are blocked, while known legacy boundaries remain temporary exceptions.

27
openspec/changes/refactor-truegrowth-ui-system/proposal.md Normal file
View File

@@ -0,0 +1,27 @@
# Change: refactor TrueGrowth UI system
## Why
TrueGrowth currently mixes a custom workbench shell, legacy Drawnix/opentu TDesign surfaces, tdesign icons, local SCSS controls, and partial Lucide usage. This makes new pages drift visually and makes Codex-driven development inconsistent.
The product needs one free, locally controlled UI system so future pages stay stable, efficient, and visually aligned with the orange Aurora-style AI workbench direction.
## What Changes
- Add a local `@/ui` component entry for shadcn-style components built on TrueGrowth tokens
- Standardize the visual language around white/near-black surfaces, thin borders, soft shadows, compact forms, Lucide icons, and `#ff5b00` primary actions
- Treat the approved `/image` AI image-generation page as the golden UI reference for every page, dialog, drawer, popover, and migration review
- Add guard rails that prevent new app UI from importing TDesign or tdesign icons
- Add page templates for list, form, and generator surfaces
- Define TDesign as a compatibility boundary for legacy Drawnix/opentu UI while migration continues
## Impact
- Affected specs: `ui-design-system`, `workbench-shell`
- Affected code:
- `apps/web/src/ui/`
- `apps/web/src/styles.scss`
- `apps/web/src/app/app.tsx`
- `scripts/check-truegrowth-ui-system.mjs`
- `docs/TRUEGROWTH_UI_SYSTEM.md`
- `docs/TRUEGROWTH_GOLDEN_IMAGE_PAGE_UI.md`

59
openspec/changes/refactor-truegrowth-ui-system/specs/ui-design-system/spec.md Normal file
View File

@@ -0,0 +1,59 @@
## ADDED Requirements
### Requirement: App UI SHALL Use A Local TrueGrowth UI Entry
New customer-facing app UI SHALL import reusable primitives from the local `@/ui` entry so that controls, overlays, cards, tables, forms, and feedback states share one visual system.
#### Scenario: New app page needs controls
- **WHEN** a new app page needs buttons, inputs, dialogs, drawers, tabs, cards, tables, badges, progress, or empty states
- **THEN** it SHALL use components from `@/ui`
- **AND** it SHALL NOT create page-local replacements for those primitives
#### Scenario: Component needs brand emphasis
- **WHEN** a component needs a primary action, selected state, or focus ring
- **THEN** it SHALL use TrueGrowth orange tokens
- **AND** it SHALL NOT introduce blue primary actions or hard-coded primary colors
### Requirement: AI Image Page SHALL Be The Golden UI Reference
The AI image-generation page at `/image` SHALL be the concrete golden UI reference for TrueGrowth page layout, component density, media/result presentation, hover actions, loading states, failed states, popovers, dialogs, and light/dark styling.
#### Scenario: Contributor designs or refactors a page
- **WHEN** a contributor designs or refactors a navigation-entered page, dialog, drawer, or popover
- **THEN** they SHALL compare the result against the `/image` golden page standard in `docs/TRUEGROWTH_GOLDEN_IMAGE_PAGE_UI.md`
- **AND** they SHALL preserve the same orange accent, quiet surfaces, compact controls, single-surface inputs, and browser-verified polish
#### Scenario: Contributor changes a generator page
- **WHEN** a contributor changes a generator page such as AI video, digital human, music, image editing, or batch creation
- **THEN** the page SHALL use the `/image` split layout pattern with a full-height left creation panel and right task/result feed
- **AND** generated media SHALL be grouped by batch, displayed at its real ratio, and expose secondary actions through hover or compact menus
#### Scenario: Contributor changes a dialog or popover
- **WHEN** a contributor changes settings, model, parameter, knowledge, picker, or action dialogs
- **THEN** the surface SHALL use the same radius, light/dark surfaces, orange focus states, and single-layer input treatment as `/image`
- **AND** it SHALL NOT introduce stacked white input wrappers or unrelated component-library styling
### Requirement: New App UI SHALL Use Lucide Icons
New app UI SHALL use `lucide-react` for icons so icon size, stroke, and visual weight remain consistent.
#### Scenario: New action button needs an icon
- **WHEN** a new action button, nav item, toolbar item, or empty state needs an icon
- **THEN** it SHALL import an icon from `lucide-react`
- **AND** it SHALL NOT import from `tdesign-icons-react`
### Requirement: TDesign SHALL Be Legacy Compatibility Only
TDesign SHALL remain only as a temporary compatibility boundary for old Drawnix/opentu surfaces while visible UI is migrated to the TrueGrowth UI system.
#### Scenario: New app code is added
- **WHEN** a new app page or component is added under `apps/web/src`
- **THEN** it SHALL NOT import `tdesign-react`
- **AND** it SHALL use `@/ui` primitives instead

45
openspec/changes/refactor-truegrowth-ui-system/specs/workbench-shell/spec.md Normal file
View File

@@ -0,0 +1,45 @@
## ADDED Requirements
### Requirement: Workbench Pages SHALL Follow The Image Golden Page Layout
Workbench pages SHALL use the approved `/image` AI 图片生成 page as the concrete layout and polish reference: wide left navigation, no global topbar, full-height page content, white or near-black operation surfaces, soft gray or near-black result surfaces, compact grids, thin borders, soft shadows, and orange primary actions.
#### Scenario: Page has a primary workflow
- **WHEN** a workbench page presents a primary workflow
- **THEN** it SHALL place the workflow in structured sections or cards using TrueGrowth UI tokens
- **AND** it SHALL keep forms dense, labeled, and readable
#### Scenario: Page is a generator workflow
- **WHEN** the page creates images, videos, digital-human outputs, audio, clips, or other generated media
- **THEN** it SHALL follow the `/image` pattern of left configuration panel plus right result/task feed
- **AND** it SHALL group results by batch with full-ratio media rails and compact batch actions
#### Scenario: Page is a library/status/settings workflow
- **WHEN** the page manages assets, tasks, publishing, models, settings, or workflow history
- **THEN** it SHALL adapt the `/image` rhythm into media-first grids, dense status lists, or grouped configuration panels
- **AND** it SHALL avoid nested cards, always-visible button clutter, and page-local basic controls
#### Scenario: Page supports dark mode
- **WHEN** the app is in dark mode
- **THEN** the page SHALL use near-black surfaces, visible borders, and orange focus/active states
- **AND** controls SHALL remain readable without overlapping or wrapping button text
#### Scenario: Page is visually completed
- **WHEN** a page migration is claimed complete
- **THEN** the route SHALL have browser screenshot evidence from `http://127.0.0.1:7200/...`
- **AND** the verification SHALL include no framework overlay, no relevant console errors, and at least one primary interaction check
### Requirement: Page Templates SHALL Guide New Workbench Surfaces
Workbench implementation SHALL start from documented page templates for list, form, generator, media-library, status, asset, task, and detail surfaces.
#### Scenario: Codex adds a new page
- **WHEN** Codex adds a new workbench page
- **THEN** it SHALL follow the closest page template
- **AND** it SHALL use `PageShell`, `Section`, `FormGrid`, and `Card` from `@/ui` where applicable

37
openspec/changes/refactor-truegrowth-ui-system/tasks.md Normal file
View File

@@ -0,0 +1,37 @@
## 1. UI Foundation
- [x] 1.1 Add local `apps/web/src/ui` component entry
- [x] 1.2 Add core components for buttons, fields, cards, overlays, tabs, tooltip, toast, table, badges, progress, and page templates
- [x] 1.3 Import UI styles into the global app stylesheet
- [x] 1.4 Add `@/ui` TypeScript path alias
## 2. Documentation and Templates
- [x] 2.1 Add TrueGrowth UI system documentation
- [x] 2.2 Add list-page, form-page, and generator-page templates
- [x] 2.3 Document TDesign compatibility boundary and Lucide-only rule
- [x] 2.4 Add `/image` AI image-generation golden page standard
- [x] 2.5 Add media-library and status page templates derived from the golden page
## 3. Guard Rails
- [x] 3.1 Add static UI system check script
- [x] 3.2 Block new app imports of `tdesign-react`
- [x] 3.3 Block new app imports of `tdesign-icons-react`
- [x] 3.4 Block common hard-coded blue primary colors in app UI
- [x] 3.5 Require the golden page standard and templates in the UI system check
## 4. Golden Page Migration
- [ ] 4.1 Browser-audit every navigation-entered first-level route against `/image`
- [x] 4.2 Migrate `/video` to the golden generator layout and verify with screenshots
- [ ] 4.3 Migrate `/avatar` dialogs, image/video grids, and creation flow to the golden generator/media layout
- [ ] 4.4 Migrate `/assets` to the golden media-library layout
- [ ] 4.5 Migrate `/publish`, `/tasks`, `/models`, `/settings`, and `/workflow` shell/dialog surfaces to the golden status/settings layout
- [ ] 4.6 Verify every migrated route in light and dark mode with browser screenshots and one primary interaction
## 5. Validation
- [x] 5.1 Run UI system static check
- [x] 5.2 Run `pnpm nx run web:typecheck`
- [x] 5.3 Run `pnpm build:web`