一、设计思路

"主角分类表"是典型的数据表应用：26 位网络漫剧主角按题材归入 8 大分类，每条记录含出处、人设标签、性格定位、名台词。UI 提供"分类筛选 + 关键词搜索"双通道检索，点击卡片展开完整档案。与词汇库同款架构，但数据结构更丰富（每字段承担不同检索职责）。

二、数据模型：主角档案 = 六字段记录

interface CharItem {
  id: number;
  name: string;          // 主角名
  source: string;        // 出处
  category: string;      // 分类
  tag: string;           // 人设标签
  trait: string;         // 性格定位
  catchphrase: string;   // 名台词
}

8 大分类 26 位主角分布：

三、检索通道：四字段关键词搜索

与词汇库不同，本表搜索范围扩展到 4 个字段——名字、出处、名台词、人设标签都能命中：

getFiltered(): CharItem[] {
  return this.heroes.filter((h: CharItem) => {
    const matchCat: boolean = this.category === '全部' || h.category === this.category;
    const k: string = this.keyword.trim();
    const matchKw: boolean =
      k === '' ||
      h.name.includes(k) ||        // 搜名字
      h.source.includes(k) ||      // 搜出处
      h.catchphrase.includes(k) || // 搜名台词
      h.tag.includes(k);           // 搜人设标签
    return matchCat && matchKw;
  });
}

例如输入"三十年"命中萧炎，输入"龙王"命中叶无道，输入"喵"命中罗小黑——检索字段越多，数据表实用性越强。

四、分类徽章 + 卡片布局

每张卡片常显三行信息，点击展开完整档案：

@Builder
heroCard(item: CharItem) {
  Column() {
    // 卡片头：主角名 + 出处 + 分类徽章 + 箭头
    Row({ space: 10 }) {
      Column({ space: 2 }) {
        Text(item.name)                    // 主角名（大号）
          .fontSize(16).fontWeight(FontWeight.Bold).fontColor('#111827')
        Text(item.source)                  // 出处（小号灰色）
          .fontSize(11).fontColor('#6B7280')
      }
      .alignItems(HorizontalAlign.Start)
      .layoutWeight(1)
      Text(item.category)                  // 分类徽章
        .fontSize(11).fontColor(Color.White)
        .backgroundColor('#7C3AED')
        .borderRadius(8)
        .padding({ left: 8, right: 8, top: 2, bottom: 2 })
      Text(this.expandedId === item.id ? '▲' : '▼')
        .fontSize(12).fontColor('#9CA3AF')
    }
    .width('100%').alignItems(VerticalAlign.Center)

    // 人设标签（常显）
    Text('🏷️ ' + item.tag)
      .fontSize(13).fontColor('#7C3AED').fontWeight(FontWeight.Medium)
      .width('100%').margin({ top: 8 })
      .textAlign(TextAlign.Start)

    // 展开区：性格定位 + 名台词
    if (this.expandedId === item.id) {
      Column({ space: 8 }) {
        this.infoRow('🎭 性格定位', item.trait, '#111827')
        this.infoRow('💬 名台词', '「' + item.catchphrase + '」', '#7C3AED')
      }
      .width('100%')
      .margin({ top: 10 })
      .padding({ top: 10 })
      .border({ width: { top: 1 }, color: '#EEF1F6' })
    }
  }
  .width('100%').padding(14)
  .backgroundColor(Color.White).borderRadius(14)
  .onClick(() => { this.toggleExpand(item.id); })
}

五、数据亮点：名台词速查

六、技术要点总结

"分类表"类应用通用模板：数据驱动（加角色不改代码）、检索即所得（零延迟搜索）、档案展开式浏览。换一套数据就是新的分类表——课程表、食谱表、角色表皆可套用。