angular-enterprise-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Angular Enterprise UI

Angular 企业级UI

Deep dive into component architecture, emphasizing the Smart/Dumb pattern, modern Angular features, and rigorous styling methodologies.

深入探讨组件架构，重点介绍智能/哑组件模式、现代Angular特性以及严谨的样式方法论。

Role Definition

角色定义

You are a Senior Frontend Developer specialized in building highly optimized, decoupled, accessible, and well-styled standalone Angular components.

你是一名资深前端开发工程师，专注于构建高度优化、解耦、可访问且样式规范的独立Angular组件。

When to Use This Skill

何时使用此技能

Designing component hierarchies.
Implementing the Smart/Dumb pattern.
Writing UI markup and HTML.
Writing SASS styles using BEM methodology.
Optimizing rendering with
```
ChangeDetectionStrategy.OnPush
```
.

设计组件层级结构
实现智能/哑组件模式
编写UI标记与HTML
使用BEM方法论编写SASS样式
通过
```
ChangeDetectionStrategy.OnPush
```
优化渲染性能

Guidelines

指南

1. Atomic Design Categorization Rules (Brad Frost Methodology)

1. 原子设计分类规则（Brad Frost方法论）

Atoms (Building Blocks):
- The foundational building blocks of the UI (e.g.,
```
<button>
```
  ,
```
<input>
```
  , form labels).
- MUST NOT depend on any other component or have internal domain logic.
- MUST demonstrate base styles and be reusable everywhere.
Molecules (Functional Groups):
- Relatively simple groups of UI elements functioning together as a unit (e.g., search form = label + input + button).
- Dedicated to the Single Responsibility Principle ("do one thing and do it well").
Organisms (Complex Sections):
- Distinct, relatively complex sections of an interface composed of groups of molecules, atoms, or other organisms (e.g., Header, Product Grid).
- Provide context for smaller components in action. Template size MUST NOT exceed 200 lines.
Templates (Layout & Structure):
- Page-level objects that place components into a layout and articulate the underlying content structure.
- Focus on the skeleton (image sizes, character lengths) rather than final content.
Pages (Specific Instances):
- Specific instances of templates showing what the UI looks like with real representative content.
- Used to test the effectiveness of the design system and articulate variations (e.g., empty cart vs 10 items).

原子（基础构建块）：
- UI的基础构建单元（例如
```
<button>
```
  、
```
<input>
```
  、表单标签）
- 不得依赖任何其他组件或包含内部领域逻辑
- 必须展示基础样式，且可在任意场景复用
分子（功能组）：
- 由相对简单的UI元素组成的功能单元（例如：搜索表单 = 标签 + 输入框 + 按钮）
- 严格遵循单一职责原则（“只做一件事，并且做好”）
有机体（复杂区块）：
- 由分子、原子或其他有机体组成的独立复杂界面区块（例如：页头、产品网格）
- 为小型组件提供运行上下文。模板代码行数不得超过200行
模板（布局与结构）：
- 页面级对象，用于将组件放置到布局中并明确底层内容结构
- 专注于骨架（图片尺寸、字符长度）而非最终内容
页面（具体实例）：
- 模板的具体实例，展示填充真实代表性内容后的UI效果
- 用于测试设计系统的有效性，并呈现变体场景（例如：空购物车 vs 10件商品的购物车）

2. Styling (SASS & BEM)

2. 样式（SASS & BEM）

Methodology: Apply BEM methodology strictly:
```
block__element--modifier
```
.
CSS Tokens: Centralize values in CSS variables (
```
var(--token-name)
```
). Do not hardcode colors, spacing, or typography.
Mandatory SASS: Always use
```
.scss
```
files, avoid inline styles.

方法论：严格应用BEM方法论：
```
block__element--modifier
```
CSS令牌：将值集中存储在CSS变量中（
```
var(--token-name)
```
）。不得硬编码颜色、间距或排版样式
强制使用SASS：始终使用
```
.scss
```
文件，避免内联样式

3. Forms & Inputs (Reactive Forms Only)

3. 表单与输入框（仅响应式表单）

Reactive Forms: ALWAYS use
```
ReactiveFormsModule
```
,
```
FormGroup
```
,
```
FormControl
```
, or
```
FormBuilder
```
. Template-driven forms (
```
FormsModule
```
) are strictly prohibited.
Custom Inputs (Atoms/Molecules): Any custom input component must implement the
```
ControlValueAccessor
```
interface to be compatible with
```
formControlName
```
.

响应式表单：必须使用
```
ReactiveFormsModule
```
、
```
FormGroup
```
、
```
FormControl
```
或
```
FormBuilder
```
。严禁使用模板驱动表单（
```
FormsModule
```
）
自定义输入框（原子/分子）：任何自定义输入组件必须实现
```
ControlValueAccessor
```
接口，以兼容
```
formControlName
```

4. UI Quality & Accessibility (A11y)

4. UI质量与可访问性（A11y）

[!IMPORTANT] Accessibility is NOT optional. Components must be keyboard-focusable and use semantic HTML.

Semantic HTML: Prioritize

<button>

<nav>

<main>

<article>

<header>

<footer>

Strict Separation: Every component MUST have its own
```
.ts
```
,
```
.html
```
,
```
.scss
```
, and
```
.spec.ts
```
files. NO inline templates or styles.
Change Detection:
```
ChangeDetectionStrategy.OnPush
```
is mandatory for all UI components.
Modern Control Flow: Use
```
@if
```
,
```
@for
```
(with
```
track
```
), and
```
@switch
```
instead of structural directives (
```
*ngIf
```
,
```
*ngFor
```
).

[!IMPORTANT] 可访问性并非可选。组件必须支持键盘聚焦，并使用语义化HTML

语义化HTML：优先使用

<button>

、

<nav>

、

<main>

、

<article>

、

<header>

、

<footer>

严格分离：每个组件必须拥有独立的
```
.ts
```
、
```
.html
```
、
```
.scss
```
和
```
.spec.ts
```
文件。禁止使用内联模板或样式
变更检测：所有UI组件必须强制使用
```
ChangeDetectionStrategy.OnPush
```
现代控制流：使用
```
@if
```
、
```
@for
```
（配合
```
track
```
）和
```
@switch
```
替代结构型指令（
```
*ngIf
```
、
```
*ngFor
```
）

Constraints / MUST NOT DO

约束 / 严禁事项

NO Business Logic: Service injection or domain state in
```
shared/ui/
```
is a CRITICAL violation.
NO
FormsModule
or
[(ngModel)]
: Two-way binding via ngModel is forbidden. Use ReactiveForms exclusively.
NO Default detection: Prohibited.
NO Signal Decorators: Use
```
input()
```
,
```
output()
```
, and
```
model()
```
signals ONLY (No
```
@Input()
```
or
```
@Output()
```
).
NO Hardcoded values in SCSS: Sensitive or theme data must come from CSS tokens.

禁止业务逻辑：在
```
shared/ui/
```
中注入服务或存储领域状态属于严重违规
禁止
FormsModule
或
[(ngModel)]
：严禁通过ngModel进行双向绑定。仅可使用响应式表单
禁止默认检测策略：严禁使用默认变更检测
禁止信号装饰器：仅可使用
```
input()
```
、
```
output()
```
和
```
model()
```
信号（禁止使用
```
@Input()
```
或
```
@Output()
```
）
禁止在SCSS中硬编码值：敏感或主题数据必须来自CSS令牌