一、核心思想

"防渣"的本质不是识人术，而是流程管理：把感情投入拆成五个可执行阶段，每阶段定义目标、动作、红线、退出指令——把"看走眼"的代价控制在小成本内。代码上用一个 StageItem 数据模型承载整套方案，一个页面实现全部交互。

二、数据模型：阶段 = 结构化预案

interface StageItem {
  id: number;
  name: string;          // 阶段名
  time: string;          // 阶段时间窗
  icon: string;
  goal: string;          // 阶段目标
  actions: string[];     // 关键动作（动作列表）
  redLines: string[];    // 红线信号（信号列表）
  execute: string;       // 立即执行指令
}

actions 与 redLines 是 string[]——数组字段天然支持 ForEach 渲染列表，是 ArkTS 结构化数据的常用形态。

五阶段防御体系：

三、阶段卡片的嵌套列表渲染

卡片展开区内有两层嵌套 ForEach：外层渲染 actions，内层渲染 redLines。注意每层都要有唯一 key，且 key 在"外内层组合"下必须区分（加前缀避免冲突）：

if (this.expandedId === item.id) {
  Column({ space: 8 }) {
    Column({ space: 4 }) {
      Text('✅ 关键动作')
        .fontSize(12).fontWeight(FontWeight.Bold).fontColor('#111827')
        .width('100%').textAlign(TextAlign.Start)
      ForEach(item.actions, (act: string, idx: number) => {
        Text((idx + 1) + '. ' + act)
          .fontSize(12).fontColor('#4B5563')
          .width('100%').textAlign(TextAlign.Start)
      }, (act: string, idx: number) => 'a' + idx.toString())
    }
    .width('100%').alignItems(HorizontalAlign.Start)

    Column({ space: 4 }) {
      Text('🚩 红线信号')
        .fontSize(12).fontWeight(FontWeight.Bold).fontColor('#B91C1C')
        .width('100%').textAlign(TextAlign.Start)
      ForEach(item.redLines, (rl: string, idx: number) => {
        Text('• ' + rl)
          .fontSize(12).fontColor('#7F1D1D')
          .width('100%').textAlign(TextAlign.Start)
      }, (rl: string, idx: number) => 'r' + idx.toString())
    }
    .width('100%').alignItems(HorizontalAlign.Start)

    Text('⚡ ' + item.execute)
      .fontSize(12).fontWeight(FontWeight.Medium).fontColor('#065F46')
      .width('100%').textAlign(TextAlign.Start)
  }
  .width('100%')
  .margin({ top: 10 })
  .padding({ top: 10 })
  .border({ width: { top: 1 }, color: '#EEF1F6' })
}

key 设计：外层用 'a' + idx，内层用 'r' + idx。虽然 ArkTS 对同层级 key 才要求唯一，但加前缀是防御性写法，避免两个列表索引相同导致 diff 混乱。

四、红线快速自查区：独立数据 + 固定渲染

底部的"红线自查"不依赖展开状态，任何时候都可见——它是全局提醒区：

@State redLines: string[] = [
  '🚩 言行不一出现 3 次 → 启动止损流程',
  '🚩 底线被试探且无歉意 → 立即止损',
  '🚩 煤气灯话术（"你太敏感了"）→ 立即止损',
  '🚩 忽冷忽热 / 冷暴力 → 降级处理',
  '🚩 单方面索取不回报 → 停止投入',
  '🚩 断联后纠缠威胁 → 证明止损正确'
];

Column({ space: 6 }) {
  Text('🚩 红线快速自查（命中即执行）')
    .fontSize(14).fontWeight(FontWeight.Bold).fontColor('#991B1B')
    .width('100%')
  ForEach(this.redLines, (line: string, idx: number) => {
    Text(line)
      .fontSize(12).fontColor('#7F1D1D')
      .width('100%')
      .textAlign(TextAlign.Start)
  }, (line: string, idx: number) => idx.toString())
}
.width('100%').padding(12)
.backgroundColor('#FEE2E2')      // 红色系背景强调
.borderRadius(12)
.margin({ left: 14, right: 14, top: 0, bottom: 8 })

五、页面结构：列表 + 固定底区

List 占据 layoutWeight(1) 弹性空间，红线区固定贴底——保证滚动时红线区始终可见，符合"执行手册"的使用场景：

// 阶段列表（可滚动）
List({ space: 10 }) {
  ForEach(this.stages, (item: StageItem) => {
    ListItem() { this.stageCard(item) }
  }, (item: StageItem) => item.id.toString())
}
.layoutWeight(1).width('100%')
.padding({ left: 14, right: 14, top: 12, bottom: 4 })
.scrollBar(BarState.Off)

// 红线自查（固定贴底）
Column({ space: 6 }) { /* 红线清单 */ }
.margin({ left: 14, right: 14, top: 0, bottom: 8 })

六、执行心法：止损不是失败，是成本控制

1. 资源前置投入是大忌：观察期零付出，验证期小付出，确认后才逐步加码。
2. 红线是触发器不是建议：命中即执行，绝不"再给一次机会"。
3. 止损要闭环：声明 → 断联 → 清账 → 复盘，四步缺一不可。

技术要点小结：string[] 字段 + 双层 ForEach 渲染列表、key 前缀防冲突、layoutWeight + 固定底区布局、颜色体系强化语义（绿=目标、红=红线）。这套"阶段 + 动作 + 红线"模型可复用到任何流程管理类应用。