鸿蒙 ArkTS 实战｜网络常用漫剧主角名称分类表：26 位主角 8 大分类 + 搜索筛选

一、设计思路

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

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

typescript 复制代码

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

8 大分类 26 位主角分布：

分类	数量	代表主角
修仙玄幻	6	萧炎 / 唐三 / 石昊 / 韩立 / 陈平安 / 张小凡
都市异能	4	林逸 / 叶辰 / 苏逸 / 秦风
战神赘婿	4	叶无道 / 林北 / 萧战 / 龙傲天
热血国漫	4	张楚岚 / 李星云 / 伍六七 / 沈剑心
历史权谋	3	嬴政 / 韩非 / 白亦非
搞笑日常	2	阿衰 / 罗小黑
校园青春	1	江辰
悬疑烧脑	2	包拯 / 秦风

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

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

typescript 复制代码

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;
  });
}

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

四、分类徽章 + 卡片布局

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

typescript 复制代码

@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); })
}

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

主角	名台词	梗文化指数
萧炎	三十年河东，三十年河西，莫欺少年穷！	⭐⭐⭐⭐⭐
叶无道	三年之期已到，恭迎龙王归位！	⭐⭐⭐⭐⭐
龙傲天	天不生我龙傲天，剑道万古如长夜！	⭐⭐⭐⭐⭐
张楚岚	碧莲大法好，该苟就苟，该打就打。	⭐⭐⭐⭐
伍六七	阿七剪发，五元一位，办卡更优惠。	⭐⭐⭐⭐
罗小黑	喵～（然后一个尾巴甩飞反派）	⭐⭐⭐⭐
韩立	君子不立危墙之下，此事从长计议。	⭐⭐⭐⭐
嬴政	普天之下，莫非王土；率土之滨，莫非王臣。	⭐⭐⭐
秦风	他...他死了，但...但又没完全死。	⭐⭐⭐
阿衰	衰也要衰得有尊严。	⭐⭐⭐

六、技术要点总结

技术点	实现方式
多字段搜索	`filter` 内 4 个字段 `includes` 或运算
动态分类	`getCategories()` 数组去重
分类×关键词叠加	`&&` 组合双条件
展开互斥	`expandedId` 记录当前项
卡片复用	`@Builder heroCard(item)`
横向筛选	`Scroll(scrollable: Horizontal)`

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