一、设计目标

把「复数规则」这个抽象概念可视化：用户拨动数字，实时看到同一数字在不同语言下怎么变形态，直观理解「为什么不能写死单复数」。同时用真实的购物车业务承载，让复数规则在"商品数量 + 结算提示"的日常场景中自然落地。

设计原则：

1. 数量即交互：购物车每件商品有 −/+ 步进器，数量变化驱动复数形态实时变化；
2. 结算即验证：结算区的大字提示语是复数规则的"考场"——数量一变，词尾就变；
3. 探索即理解：复数分类探索器让用户拨动任意数字，看到它在目标语言下的语法分类。

二、页面结构（组件树）

Scroll
└─ Column（宽 100%）
   ├─ Row：标题「全球购物车」+ 🛒
   ├─ Flex：语言切换（玫红选中 #DB2777）
   ├─ Text：购物车商品（小标题）
   ├─ ForEach → 商品行（Column 白卡）
   │  ├─ Row：商品名（左）| 金额（右玫红加粗）
   │  └─ Row：数量+量词（左）| − 数字 +（步进器）
   ├─ Column 结算卡（浅玫红底 #FDF2F8）
   │  ├─ Text：复数提示语（玫红加粗）
   │  └─ Row：小计 | 总金额（20px 玫红）
   └─ Text：复数分类探索器（小标题）
      └─ Column 白卡
         ├─ Row：−1 | 数字（24px）| +1
         ├─ Text：示例数量 + 量词（16px）
         └─ Text：分类（玫红 13px）

三、色彩与字号规范

主题色 #DB2777（玫红/洋红，象征"数量/活力"），系列内第 5 个主题色：

四、核心实现（UI 代码）

4.1 商品行：数量 + 量词 + 步进器

每件商品行显示"数量 + 量词"（如 3 товара），量词由复数规则自动选择，旁边是 −/+ 步进器：

ForEach(CART, (item: CartItem, i: number) => {
  Column() {
    Row() {
      Text(this.itemName(item)).fontSize(15).fontWeight(FontWeight.Medium)
        .fontColor('#1F2937').layoutWeight(1)
      Text(fmtMoney(this.currentLocale, item.price * this.qty[i]))
        .fontSize(14).fontWeight(FontWeight.Bold).fontColor('#DB2777')
    }.width('100%')
    Row({ space: 10 }) {
      Text(`${this.T(K.qty)}: ${this.qty[i]} ${itemWord(this.currentLocale, this.qty[i])}`)
        .fontSize(12).fontColor('#6B7280').layoutWeight(1)
      Row({ space: 6 }) {
        Button('−').fontSize(16).width(28).height(28).padding(0)
          .backgroundColor('#E5E7EB').fontColor('#1F2937')
          .onClick(() => { this.adjust(i, -1); })
        Text(`${this.qty[i]}`).fontSize(15).fontWeight(FontWeight.Bold)
          .width('28').textAlign(TextAlign.Center)
        Button('+').fontSize(16).width(28).height(28).padding(0)
          .backgroundColor('#E5E7EB').fontColor('#1F2937')
          .onClick(() => { this.adjust(i, 1); })
      }
    }.width('100%').margin({ top: 8 })
  }
  .width('94%').padding(12).backgroundColor(Color.White).borderRadius(12).margin({ top: 8 })
}, (item: CartItem) => item.id)

设计要点：

• 数量 + 量词同行显示：3 товара 让复数形态直接可见，用户点 + 就能看到词尾变化；
• 步进器 28×28 小按钮：紧凑不占空间，−/+ 对称布局；
• adjust(i, delta) 用 Math.max(1, ...) 防止数量为 0 或负。

4.2 结算区：复数提示语 + 总金额

结算区是复数规则的"考场"——cartMessage() 根据总数自动选对复数形态：

Column({ space: 8 }) {
  Text(cartMessage(this.currentLocale, this.totalQty()))
    .fontSize(14).fontWeight(FontWeight.Bold).fontColor('#DB2777').width('100%')
  Row() {
    Text(`${this.T(K.total)}:`).fontSize(14).fontColor('#374151').layoutWeight(1)
    Text(fmtMoney(this.currentLocale, this.totalPrice()))
      .fontSize(20).fontWeight(FontWeight.Bold).fontColor('#DB2777')
  }.width('100%').margin({ top: 4 })
}
.width('94%').padding(14).backgroundColor('#FDF2F8').borderRadius(14).margin({ top: 12 })

浅玫红底 #FDF2F8 与白色商品行区分——"结算结论"独立成区。提示语随总数变化实时切换复数形态（В корзине 3 товара → В корзине 5 товаров），总金额 20px 是结算焦点。

4.3 复数分类探索器

探索器让用户拨动任意数字，实时看到它在目标语言下的分类和量词：

Column() {
  Row({ space: 10 }) {
    Button('−1').fontSize(12).backgroundColor('#E5E7EB').fontColor('#1F2937')
      .onClick(() => { this.demoN = Math.max(0, this.demoN - 1); })
    Text(`${this.demoN}`).fontSize(24).fontWeight(FontWeight.Bold).width('60').textAlign(TextAlign.Center)
    Button('+1').fontSize(12).backgroundColor('#E5E7EB').fontColor('#1F2937')
      .onClick(() => { this.demoN += 1; })
  }.width('100%').justifyContent(FlexAlign.Start)

  Text(`${this.T(K.sample)}: ${this.demoN} ${itemWord(this.currentLocale, this.demoN)}`)
    .fontSize(16).fontWeight(FontWeight.Bold).fontColor('#1F2937').width('100%').margin({ top: 10 })

  Text(`${this.T(K.category)}: ${this.demoCat()}`)
    .fontSize(13).fontColor('#DB2777').width('100%').margin({ top: 4 })
}
.width('94%').padding(14).backgroundColor(Color.White).borderRadius(14).margin({ top: 8, bottom: 16 })

设计要点：

• 数字 24px 大号：核心交互，拨动时明显变化；
• 示例 + 量词（16px）：直观看到该数字的复数形态；
• 分类标签（玫红）：few / many 等语法分类，让用户把"数字 → 分类 → 文案"链路看通——为什么 21 在波兰语是 one、2 却是 few，一眼明白。

五、多语言排版验证清单

六、设计取舍

1. 为什么玫红：系列第 5 色——蓝/紫/青/橙/玫红，复数主题用玫红（活跃、数量感），与购物车"热闹"的语义匹配；
2. 为什么结算区浅玫红底：与商品白卡区分，把"结论"独立成视觉区块；
3. 为什么加探索器：购物车只演示"数量变化"，探索器演示"任意数字的分类"——前者是业务，后者是理解语法，两者互补；
4. 为什么语言切换用平铺胶囊：5 种语言，与 02/03/04 同一模式复用，保持系列一致性。

七、小结

复数 UI 的核心是让语法变化可见：步进器驱动数量、数量驱动词形、词形驱动用户理解。购物车把复数规则藏在"加购、结算"的日常操作里，探索器把它摊开成"拨数字、看分类"的教学演示——业务与教学一体，是"教育型演示应用"的典范布局。