Back to Details

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

参考现有模式

Search 
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渲染正常
  • 绑定功能正常（输入内容可更新状态）
  • 数据行为无回归问题