Initial TrueGrowth source import

This commit is contained in:
2026-07-07 09:36:36 +08:00
commit 3b6781d695
2283 changed files with 691996 additions and 0 deletions

View File

@@ -0,0 +1,20 @@
# Change: update UI color system
## Why
素材库当前存在偏黑偏灰的 hover 与选中态,视觉反馈显得突兀且不自然,和品牌橙主色的产品识别不一致。
需要建立全局 UI 配色 token 规范让素材库、AI 编程生成的界面和后续组件改造优先使用统一品牌橙 token减少局部硬编码颜色继续扩散。
## What Changes
- 新增 `ui-color-system` 规范,定义全局 UI token 的使用边界
- 明确素材库 hover、selected、focus 等状态必须使用统一 token
- 明确 AI 编程 UI 规范优先使用 token避免新增重黑遮罩、黑色主按钮和孤立蓝色 focus
- 新增中文文档 `docs/UI_COLOR_SYSTEM.md`,作为实现与评审时的配色约束说明
## Impact
- Affected specs: `ui-color-system`
- Affected docs:
- `docs/UI_COLOR_SYSTEM.md`

View File

@@ -0,0 +1,74 @@
## ADDED Requirements
### Requirement: Global UI Colors SHALL Use Shared Tokens
The system SHALL define and use shared UI color tokens for common application surfaces, text, borders, interactive states, focus rings, and brand orange accents so product UI color choices remain consistent across modules.
#### Scenario: Component needs a common UI color
- **WHEN** a component needs colors for surface, text, border, hover, selected, active, disabled, or focus states
- **THEN** it SHALL use the shared UI color tokens
- **AND** it SHALL NOT introduce ad-hoc hard-coded colors when an existing token can express the same intent
#### Scenario: Component needs brand emphasis
- **WHEN** a component needs primary emphasis, selected emphasis, or brand-aligned focus treatment
- **THEN** it SHALL use the brand orange token family
- **AND** it SHALL keep contrast sufficient for readable text and visible controls
### Requirement: Media Library States SHALL Use UI Tokens
The media library SHALL use shared UI tokens for item hover, selected, active, focus, overlay, and action states so asset browsing feedback feels natural and aligned with the global brand color system.
#### Scenario: Media asset is hovered
- **WHEN** a user hovers a media library asset item
- **THEN** the item SHALL use a tokenized subtle hover background or border treatment
- **AND** it SHALL NOT use heavy black or gray overlays as the default hover feedback
#### Scenario: Media asset is selected
- **WHEN** a user selects a media library asset item
- **THEN** the item SHALL use tokenized selected background, border, or indicator treatment based on the brand orange token family
- **AND** selection SHALL remain visually distinct from hover without relying on near-black fills
- **AND** selection SHALL NOT cover the asset preview with full-card white or dark masks
#### Scenario: Media asset receives keyboard focus
- **WHEN** a media library asset item receives keyboard focus
- **THEN** it SHALL use the shared focus token
- **AND** it SHALL NOT introduce an isolated blue focus ring that conflicts with the global UI color system
#### Scenario: Media library shows multiple actions
- **WHEN** the media library presents actions in one toolbar or inspector area
- **THEN** it SHALL keep at most one brand-primary button in that area
- **AND** secondary actions such as download, cancel, delete, sync, or mark subject SHALL use outline, text, danger, or other lower-emphasis treatments
#### Scenario: Media library batch selection uses inspector actions
- **WHEN** a user is in batch selection mode and a right-side inspector is available
- **THEN** the inspector primary action SHALL represent the batch insert/select action
- **AND** the top toolbar SHALL NOT duplicate that same primary batch insert/select button
### Requirement: AI Coding UI Guidance SHALL Prefer Tokens
AI-assisted UI coding guidance SHALL require generated or modified UI code to prefer existing shared UI color tokens before adding new colors, especially for primary actions, hover states, selected states, focus rings, and overlays.
#### Scenario: AI changes UI styling
- **WHEN** AI-generated code changes component colors or interactive states
- **THEN** it SHALL first reuse existing UI color tokens
- **AND** it SHALL document or justify any new token need before adding a new color value
#### Scenario: AI creates a primary action
- **WHEN** AI-generated code creates or updates a primary action button
- **THEN** it SHALL use the brand primary token treatment
- **AND** it SHALL NOT create a black primary button unless an approved design exception exists
#### Scenario: AI creates an overlay or focus style
- **WHEN** AI-generated code creates overlays or focus styles
- **THEN** it SHALL use shared overlay and focus tokens
- **AND** it SHALL NOT introduce heavy black masks or isolated blue focus styles by default

View File

@@ -0,0 +1,26 @@
## 1. Specification
- [x] 1.1 新增 `ui-color-system` OpenSpec 变更说明
- [x] 1.2 定义全局 UI token、素材库状态 token、AI 编程 token 优先级要求
- [x] 1.3 为每个 requirement 补充至少一个 Scenario
## 2. Documentation
- [x] 2.1 新增 `docs/UI_COLOR_SYSTEM.md`
- [x] 2.2 说明 token 使用边界
- [x] 2.3 说明 hover、selected、focus 默认规范
- [x] 2.4 明确禁止新增重黑遮罩、黑色主按钮、孤立蓝色 focus
## 3. Implementation
- [x] 3.1 在全局样式与 Drawnix/TDesign 主题中新增 `--aitu-ui-*` token
- [x] 3.2 将素材库卡片 hover、selected、focus、overlay、badge、checkbox 状态切换为 token
- [x] 3.3 将素材库工具栏、筛选器、详情栏、窗口、虚拟框选、存储条和视图切换切换为 token
- [x] 3.4 移除素材库组件内局部 `$brand-orange` 与黑色主按钮/重黑遮罩用法
- [x] 3.5 收敛素材库多选操作区,避免重复品牌主按钮与选中整图白色蒙层
## 4. Validation
- [x] 4.1 运行 `openspec validate update-ui-color-system --strict`
- [x] 4.2 运行素材库样式静态扫描,确认无局部 `$brand-orange`、黑色主按钮、重黑遮罩
- [x] 4.3 运行最小类型/构建检查