pattern-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI Polish Phase

UI优化阶段

Only do this AFTER all logic is verified and tests pass.

请在所有逻辑验证通过且测试全部通过后再执行此步骤。

Read First

必读文档

```
docs/common/components/COMPONENTS.md
```
- Full component reference
```
docs/common/patterns/style.md
```
- Styling patterns
```
docs/common/patterns/two-way-binding.md
```
- $value, $checked bindings

```
docs/common/components/COMPONENTS.md
```
- 完整组件参考文档
```
docs/common/patterns/style.md
```
- 样式设计模式
```
docs/common/patterns/two-way-binding.md
```
- $value、$checked绑定说明

Available Components

可用组件

Layout:

ct-screen

ct-vstack

ct-hstack

ct-box

Input:

ct-input

ct-textarea

ct-checkbox

ct-select

Action:

ct-button

Display:

ct-text

ct-status-pill

布局类：

ct-screen

ct-vstack

ct-hstack

ct-box

输入类：

ct-input

ct-textarea

ct-checkbox

ct-select

操作类：

ct-button

展示类：

ct-text

ct-status-pill

Key Patterns

核心模式

Two-way binding:

tsx

<ct-input $value={field} />
<ct-checkbox $checked={done} />

Layout structure:

tsx

<ct-screen title="My Pattern">
  <ct-vstack gap="md">
    <ct-hstack gap="sm">
      {/* horizontal items */}
    </ct-hstack>
  </ct-vstack>
</ct-screen>

双向绑定：

tsx

<ct-input $value={field} />
<ct-checkbox $checked={done} />

布局结构：

tsx

<ct-screen title="My Pattern">
  <ct-vstack gap="md">
    <ct-hstack gap="sm">
      {/* 水平排列的元素 */}
    </ct-hstack>
  </ct-vstack>
</ct-screen>

Reference Existing Patterns

参考现有模式

packages/patterns/

for UI layout examples ONLY (not data/action patterns).

仅在

packages/patterns/

目录中搜索UI布局示例（不要参考数据/操作相关模式）。

Done When

完成标准

UI renders correctly
Bindings work (typing updates state)
No regression in data behavior

UI渲染正常
绑定功能正常（输入内容可更新状态）
数据行为无回归问题