蹴鞠社：用鸿蒙 ArkTS 重现「一鞠穿云，万众喝彩」的草场碧绿足球盛景

一、写在前面：千年蹴鞠，数字绿茵

1.1 蹴鞠：世界足球的东方鼻祖

在许多人眼中，足球是一项现代西方运动。但鲜为人知的是，早在两千多年前的战国时期，中国就有了"蹴鞠"——一种以皮革裹制、内填毛发，用脚踢击的球类运动。汉代刘向《别录》记载："蹴鞠者，传言黄帝所作，或曰起战国之时。"到了宋代，蹴鞠更是风靡朝野：汴京御街上蹴鞠艺人云集，《水浒传》里高俅凭一脚好球平步青云的典故，正是那个时代蹴鞠文化鼎盛的缩影。“凤点头”“鸳鸯拐”"流星赶月"这些充满武侠气息的招式名，就诞生于那个全民皆鞠的年代。

这份代码的主角，正是一座名为 “蹴鞠社” 的鸿蒙应用。它用草场碧绿与明黄为基调，试图在数字世界里搭建一座宋代风格的足球俱乐部：球艺、阵型、赛事、战绩、球迷五大板块，从招式到兵法、从赛场到看台，一应俱全。

二、项目总览：四层架构与一张全景图

在进入逐段解析之前，先用一张架构图把整份代码的"骨架"立起来。整份代码依然可以清晰划分成四个层次：

• 类型与常量层：CujuPalette 色板接口、COLORS 色板常量、CujuTab 页签枚举、STabMeta 页签元数据（含 color）、五组业务接口、WEEK_GOAL / FORMATION_POS 图表常量。
• 数据模型层：@Observed 修饰的 CujuData 数据类，持有球艺、阵型、赛事、战绩、球迷五组数据。
• 工具函数层：getSkillColor、getCrewColor、getResultColor、getFanColor 四个取色映射函数。
• 界面层：@Entry @Component 修饰的主组件 CujuApp、三个模态弹窗构建器、一个通用标签组件、五个内容子组件。

这张图揭示了一个关键事实：界面层的数据全部来自 CujuData 单例对象，子组件通过 @ObjectLink 与其建立深度绑定，主组件通过 @State 管理页签和弹窗的可见性。四层各司其职、互不越界。而阵型布阵图作为最大的差异化亮点，其棋子位置完全由 FORMATION_POS 里的 x/y 坐标数据驱动——数据即位置。

三、逐段代码解析（全量呈现，一字不落）

3.1 主题色板：草场碧绿的 CujuPalette 与 COLORS

代码的第一段，是定义"蹴鞠社"视觉基调的色板接口与色板常量。草场的绿、太阳的黄、球衣的红、天空的蓝、应援的紫，是这份代码想传递的全部热血。

// ============ 蹴鞠社 · 草场碧绿 ============
export interface CujuPalette {
  primary: string;
  primaryLight: string;
  primaryDark: string;
  accent: string;
  accentLight: string;
  bg: string;
  cardBg: string;
  cardAlt: string;
  textPrimary: string;
  textSecondary: string;
  textHint: string;
  border: string;
  line: string;
  success: string;
  warning: string;
  danger: string;
  white: string;
  pitch: string;
  chalk: string;
}

export const COLORS: CujuPalette = {
  primary: '#2E7D32',
  primaryLight: '#81C784',
  primaryDark: '#1B3A1D',
  accent: '#F9A825',
  accentLight: '#FDD835',
  bg: '#EDF5EE',
  cardBg: '#FFFFFF',
  cardAlt: '#DDEAD2',
  textPrimary: '#1B3A1D',
  textSecondary: '#5A6D4A',
  textHint: '#9CAE8E',
  border: '#C5D9B8',
  line: '#E2EAD6',
  success: '#2E7D32',
  warning: '#F9A825',
  danger: '#C62828',
  white: '#FFFFFF',
  pitch: '#3A7D3E',
  chalk: '#FFFFFF'
};

export enum CujuTab {
  SKILL = 0,
  FORMATION = 1,
  EVENT = 2,
  RECORD = 3,
  FAN = 4
}

export interface STabMeta {
  key: string;
  icon: string;
  label: string;
  color: string;
}

export const TAB_LIST: STabMeta[] = [
  { key: 'skill', icon: '⚽', label: '球艺', color: '#2E7D32' },
  { key: 'formation', icon: '🛡️', label: '阵型', color: '#F9A825' },
  { key: 'event', icon: '🏟️', label: '赛事', color: '#1565C0' },
  { key: 'record', icon: '🏆', label: '战绩', color: '#C62828' },
  { key: 'fan', icon: '📣', label: '球迷', color: '#7B1FA2' }
];

export interface SkillItem {
  name: string;
  level: number;
  master: string;
  crew: string;
  emoji: string;
}

export interface FormationItem {
  name: string;
  shape: string;
  forwards: number;
  backs: number;
  emoji: string;
}

export interface EventItem {
  name: string;
  date: string;
  venue: string;
  teams: number;
  emoji: string;
}

export interface RecordItem {
  name: string;
  result: string;
  score: string;
  rival: string;
  emoji: string;
}

export interface FanItem {
  name: string;
  city: string;
  cheers: number;
  years: number;
  emoji: string;
}

export interface WeekGoalMeta {
  day: string;
  value: number;
}

export interface FormationPosMeta {
  name: string;
  x: number;
  y: number;
  color: string;
}

export const WEEK_GOAL: WeekGoalMeta[] = [
  { day: '周一', value: 4 },
  { day: '周二', value: 6 },
  { day: '周三', value: 5 },
  { day: '周四', value: 8 },
  { day: '周五', value: 7 },
  { day: '周六', value: 12 },
  { day: '周日', value: 9 }
];

export const FORMATION_POS: FormationPosMeta[] = [
  { name: '门将', x: 50, y: 88, color: '#F9A825' },
  { name: '左卫', x: 22, y: 66, color: '#2E7D32' },
  { name: '中卫', x: 50, y: 70, color: '#2E7D32' },
  { name: '右卫', x: 78, y: 66, color: '#2E7D32' },
  { name: '左前', x: 28, y: 38, color: '#1565C0' },
  { name: '中前', x: 50, y: 30, color: '#C62828' },
  { name: '右前', x: 72, y: 38, color: '#1565C0' },
  { name: '锋头', x: 50, y: 12, color: '#C62828' }
];

@Observed
export class CujuData {
  skills: SkillItem[] = [
    { name: '凤点头', level: 95, master: '张蹴', crew: '锋线', emoji: '🦅' },
    { name: '鸳鸯拐', level: 92, master: '李鞠', crew: '中场', emoji: '🦢' },
    { name: '流星赶月', level: 90, master: '王蹴', crew: '锋线', emoji: '☄️' },
    { name: '魁星踢斗', level: 88, master: '赵鞠', crew: '中场', emoji: '⭐' },
    { name: '金丝缠腕', level: 86, master: '钱蹴', crew: '后卫', emoji: '🪢' },
    { name: '海底捞月', level: 84, master: '孙鞠', crew: '门将', emoji: '🌙' },
    { name: '燕子穿林', level: 89, master: '周蹴', crew: '锋线', emoji: '🐦' },
    { name: '老虎摆尾', level: 87, master: '吴鞠', crew: '后卫', emoji: '🐯' },
    { name: '童子拜佛', level: 83, master: '郑蹴', crew: '中场', emoji: '🧒' },
    { name: '斜插梅花', level: 85, master: '王鞠', crew: '锋线', emoji: '🌸' },
    { name: '转身倒勾', level: 91, master: '冯蹴', crew: '锋线', emoji: '🌀' },
    { name: '老将绝技', level: 96, master: '堂主', crew: '全能', emoji: '📜' }
  ];

  formations: FormationItem[] = [
    { name: '一锋七卫', shape: '1-3-3-1', forwards: 1, backs: 7, emoji: '🛡️' },
    { name: '三星阵', shape: '3-3-1', forwards: 3, backs: 4, emoji: '⭐' },
    { name: '梅花阵', shape: '5-2', forwards: 5, backs: 2, emoji: '🌸' },
    { name: '北斗阵', shape: '2-3-2', forwards: 2, backs: 5, emoji: '🌌' },
    { name: '雁翅阵', shape: '4-3', forwards: 4, backs: 3, emoji: '🦢' },
    { name: '长蛇阵', shape: '1-6-1', forwards: 1, backs: 6, emoji: '🐍' },
    { name: '八卦阵', shape: '3-4-1', forwards: 3, backs: 5, emoji: '☯️' },
    { name: '锋矢阵', shape: '5-2-1', forwards: 5, backs: 3, emoji: '🏹' },
    { name: '鸳鸯阵', shape: '2-4-2', forwards: 2, backs: 6, emoji: '🦆' },
    { name: '六合阵', shape: '2-4-2', forwards: 2, backs: 6, emoji: '🎴' },
    { name: '风火阵', shape: '4-3-1', forwards: 4, backs: 4, emoji: '🔥' },
    { name: '老堂秘阵', shape: '秘制', forwards: 3, backs: 5, emoji: '📜' }
  ];

  events: EventItem[] = [
    { name: '端阳蹴鞠大赛', date: '06-10', venue: '汴京御街', teams: 16, emoji: '🐉' },
    { name: '中秋鞠会', date: '09-15', venue: '临安涌金门', teams: 12, emoji: '🌕' },
    { name: '重阳登高赛', date: '10-09', venue: '长安乐游原', teams: 8, emoji: '🍂' },
    { name: '上元灯夕赛', date: '02-14', venue: '洛阳天津桥', teams: 20, emoji: '🏮' },
    { name: '寒食踏青赛', date: '04-05', venue: '成都锦江畔', teams: 10, emoji: '🌱' },
    { name: '端午龙舟鞠', date: '06-02', venue: '苏州金鸡湖', teams: 14, emoji: '🐲' },
    { name: '七夕乞巧赛', date: '08-10', venue: '杭州西湖', teams: 12, emoji: '💕' },
    { name: '社日乡赛', date: '03-21', venue: '乡间社坛', teams: 6, emoji: '🌾' },
    { name: '立春开鞠赛', date: '02-04', venue: '京华鞠场', teams: 18, emoji: '🌸' },
    { name: '冬至贺岁赛', date: '12-22', venue: '汴京州桥', teams: 8, emoji: '❄️' },
    { name: '清明蹴鞠会', date: '04-05', venue: '曲江芙蓉园', teams: 16, emoji: '🌷' },
    { name: '腊月封场赛', date: '12-08', venue: '临安涌金门', teams: 10, emoji: '⛄' }
  ];

  records: RecordItem[] = [
    { name: '端阳大赛决赛', result: '胜', score: '3:1', rival: '临安社', emoji: '🏆' },
    { name: '中秋鞠会半决赛', result: '胜', score: '2:0', rival: '长安社', emoji: '🥇' },
    { name: '重阳登高赛', result: '负', score: '1:2', rival: '洛阳社', emoji: '🥈' },
    { name: '上元灯夕赛决赛', result: '胜', score: '4:2', rival: '苏州社', emoji: '🏆' },
    { name: '寒食踏青赛', result: '平', score: '2:2', rival: '成都社', emoji: '🤝' },
    { name: '端午龙舟鞠', result: '胜', score: '3:0', rival: '扬州社', emoji: '🥇' },
    { name: '七夕乞巧赛', result: '胜', score: '2:1', rival: '钱塘社', emoji: '🏆' },
    { name: '社日乡赛', result: '负', score: '0:1', rival: '乡勇队', emoji: '🥈' },
    { name: '立春开鞠赛', result: '胜', score: '5:1', rival: '京华社', emoji: '🏆' },
    { name: '冬至贺岁赛', result: '胜', score: '3:2', rival: '汴京社', emoji: '🥇' },
    { name: '清明蹴鞠会', result: '平', score: '1:1', rival: '曲江社', emoji: '🤝' },
    { name: '腊月封场赛', result: '胜', score: '4:0', rival: '临安社', emoji: '🏆' }
  ];

  fans: FanItem[] = [
    { name: '汴京老张', city: '汴京', cheers: 1200, years: 30, emoji: '👴' },
    { name: '临安小李', city: '临安', cheers: 980, years: 12, emoji: '👨' },
    { name: '长安王二', city: '长安', cheers: 860, years: 25, emoji: '🧔' },
    { name: '洛阳赵姐', city: '洛阳', cheers: 760, years: 8, emoji: '👩' },
    { name: '苏州钱三', city: '苏州', cheers: 640, years: 15, emoji: '🧑' },
    { name: '成都孙四', city: '成都', cheers: 720, years: 10, emoji: '👱' },
    { name: '杭州周伯', city: '杭州', cheers: 1100, years: 40, emoji: '🧓' },
    { name: '扬州吴娘', city: '扬州', cheers: 540, years: 6, emoji: '👧' },
    { name: '京华郑少', city: '京华', cheers: 880, years: 20, emoji: '🧒' },
    { name: '钱塘冯嫂', city: '钱塘', cheers: 460, years: 4, emoji: '👩‍🦰' },
    { name: '乡勇陈头', city: '乡间', cheers: 380, years: 18, emoji: '🧙' },
    { name: '曲江楚公子', city: '曲江', cheers: 920, years: 22, emoji: '🤵' }
  ];
}

export function getSkillColor(level: number): string {
  if (level >= 95) {
    return '#C62828';
  } else if (level >= 90) {
    return '#F9A825';
  } else if (level >= 86) {
    return '#1565C0';
  }
  return '#2E7D32';
}

export function getCrewColor(crew: string): string {
  if (crew === '锋线') {
    return '#C62828';
  } else if (crew === '中场') {
    return '#1565C0';
  } else if (crew === '后卫' || crew === '门将') {
    return '#2E7D32';
  }
  return '#7B1FA2';
}

export function getResultColor(result: string): string {
  if (result === '胜') {
    return '#2E7D32';
  } else if (result === '平') {
    return '#F9A825';
  }
  return '#C62828';
}

export function getFanColor(cheers: number): string {
  if (cheers >= 900) {
    return '#7B1FA2';
  } else if (cheers >= 700) {
    return '#F9A825';
  } else if (cheers >= 500) {
    return '#1565C0';
  }
  return '#5A6D4A';
}

@Component
struct CujuTag {
  @Prop text: string;
  @Prop color: string;

  build() {
    Text(this.text)
      .fontSize(9)
      .fontColor(this.color)
      .padding({ left: 7, right: 7, top: 2, bottom: 2 })
      .backgroundColor(this.color + '1F')
      .borderRadius(9)
      .border({ width: 1, color: this.color + '40' })
  }
}

@Component
struct CujuSkillContent {
  @ObjectLink data: CujuData;
  onAdd: () => void = () => {};

  build() {
    Scroll() {
      Column() {
        Column() {
          Row() {
            Text('📈 本周社中进球')
              .fontSize(13)
              .fontWeight(FontWeight.Bold)
              .fontColor(COLORS.textPrimary)
            Text('周六12球')
              .fontSize(9)
              .fontColor(COLORS.accent)
              .margin({ left: 8 })
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          Row() {
            ForEach(WEEK_GOAL, (w: WeekGoalMeta) => {
              Column() {
                Text(w.value + '')
                  .fontSize(8)
                  .fontColor(w.value >= 9 ? COLORS.accent : COLORS.primaryLight)
                Column()
                  .width(20)
                  .height(w.value * 6)
                  .backgroundColor(w.value >= 9 ? COLORS.accent : COLORS.primaryLight)
                  .borderRadius(10)
                  .margin({ top: 4 })
                Text(w.day)
                  .fontSize(9)
                  .fontColor(COLORS.textSecondary)
                  .margin({ top: 4 })
              }
              .layoutWeight(1)
              .alignItems(HorizontalAlign.Center)
            }, (w: WeekGoalMeta) => w.day)
          }
          .width('100%')
          .alignItems(VerticalAlign.Bottom)
          .height(120)
          .margin({ top: 10 })
        }
        .width('100%')
        .padding(14)
        .backgroundColor(COLORS.cardBg)
        .borderRadius(16)
        .border({ width: 1, color: COLORS.accent + '55' })

        Row() {
          Text('⚽ 球艺谱')
            .fontSize(13)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
          Column().layoutWeight(1)
          Text('点击➕练艺')
            .fontSize(9)
            .fontColor(COLORS.textHint)
          Text('➕')
            .fontSize(14)
            .margin({ left: 6 })
            .onClick(() => { this.onAdd(); })
        }
        .width('100%')
        .margin({ top: 14, bottom: 4 })

        ForEach(this.data.skills, (s: SkillItem, i: number) => {
          Row() {
            Column() {
              Text(s.emoji)
                .fontSize(22)
            }
            .width(50)
            .height(50)
            .justifyContent(FlexAlign.Center)
            .alignItems(HorizontalAlign.Center)
            .backgroundColor(getSkillColor(s.level) + '22')
            .borderRadius(25)
            .border({ width: 2, color: getSkillColor(s.level) + '80' })

            Column() {
              Text(s.name)
                .fontSize(13)
                .fontWeight(FontWeight.Bold)
                .fontColor(COLORS.textPrimary)
              Row() {
                CujuTag({ text: s.crew, color: getCrewColor(s.crew) })
                CujuTag({ text: '难' + s.level, color: COLORS.primaryLight })
              }
              .margin({ top: 6 })
              Text('传人 ' + s.master)
                .fontSize(9)
                .fontColor(COLORS.textSecondary)
                .margin({ top: 4 })
            }
            .layoutWeight(1)
            .alignItems(HorizontalAlign.Start)
            .margin({ left: 12 })

            Text(s.level + '')
              .fontSize(16)
              .fontWeight(FontWeight.Bold)
              .fontColor(getSkillColor(s.level))
          }
          .width('100%')
          .padding(12)
          .backgroundColor(i % 2 === 0 ? COLORS.cardBg : COLORS.cardAlt)
          .borderRadius(16)
          .border({ width: 1, color: COLORS.line })
          .margin({ top: 8 })
        }, (s: SkillItem, i: number) => 'sk' + s.name + i)
      }
      .width('100%')
      .padding({ left: 12, right: 12, bottom: 16 })
    }
    .width('100%')
    .layoutWeight(1)
    .scrollable(ScrollDirection.Vertical)
    .scrollBar(BarState.Off)
  }
}

@Component
struct CujuFormationContent {
  @ObjectLink data: CujuData;
  onEdit: () => void = () => {};

  build() {
    Scroll() {
      Column() {
        Column() {
          Row() {
            Text('🛡️ 阵型布阵图')
              .fontSize(13)
              .fontWeight(FontWeight.Bold)
              .fontColor(COLORS.chalk)
            Column().layoutWeight(1)
            Text('点击✏️调配')
              .fontSize(9)
              .fontColor(COLORS.primaryLight)
              .onClick(() => { this.onEdit(); })
          }
          .width('100%')
          Stack() {
            Column()
              .width('100%')
              .height(220)
              .backgroundColor(COLORS.pitch)
              .borderRadius(12)
            Column()
              .width('100%')
              .height(1)
              .backgroundColor(COLORS.chalk + '66')
              .position({ x: 0, y: 110 })
            Column()
              .width(60)
              .height(1)
              .backgroundColor(COLORS.chalk + '66')
              .position({ x: 0, y: 55 })
            Column()
              .width(60)
              .height(1)
              .backgroundColor(COLORS.chalk + '66')
              .position({ x: 0, y: 165 })
            Column()
              .width(40)
              .height(60)
              .border({ width: 1, color: COLORS.chalk + '66' })
              .position({ x: 0, y: 80 })
            ForEach(FORMATION_POS, (p: FormationPosMeta, idx: number) => {
              Column() {
                Text(p.name)
                  .fontSize(8)
                  .fontColor(COLORS.chalk)
                  .margin({ bottom: 2 })
                Column()
                  .width(18)
                  .height(18)
                  .backgroundColor(p.color)
                  .borderRadius(9)
                  .border({ width: 2, color: COLORS.chalk })
              }
              .position({ x: (p.x - 9) + '%', y: (p.y * 2.2) })
            }, (p: FormationPosMeta) => p.name)
          }
          .width('100%')
          .height(220)
          .margin({ top: 10 })
        }
        .width('100%')
        .padding(14)
        .backgroundColor(COLORS.primaryDark)
        .borderRadius(16)

        Row() {
          Text('🛡️ 阵型总览')
            .fontSize(13)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
          Column().layoutWeight(1)
          Text('12套阵法')
            .fontSize(9)
            .fontColor(COLORS.textHint)
        }
        .width('100%')
        .margin({ top: 14, bottom: 4 })

        ForEach(this.data.formations, (f: FormationItem, i: number) => {
          Row() {
            Column() {
              Text(f.emoji)
                .fontSize(18)
            }
            .width(42)
            .height(42)
            .justifyContent(FlexAlign.Center)
            .alignItems(HorizontalAlign.Center)
            .backgroundColor(COLORS.accent + '22')
            .borderRadius(21)
            .border({ width: 1, color: COLORS.accent + '55' })

            Column() {
              Row() {
                Text(f.name)
                  .fontSize(13)
                  .fontWeight(FontWeight.Bold)
                  .fontColor(COLORS.textPrimary)
                Text(f.shape)
                  .fontSize(9)
                  .fontColor(COLORS.accent)
                  .margin({ left: 8 })
              }
              .width('100%')
              Row() {
                Text('锋' + f.forwards + ' · 卫' + f.backs)
                  .fontSize(9)
                  .fontColor(COLORS.textSecondary)
                Text('阵型')
                  .fontSize(9)
                  .fontColor(COLORS.textHint)
                  .margin({ left: 8 })
              }
              .width('100%')
              .margin({ top: 6 })
            }
            .layoutWeight(1)
            .alignItems(HorizontalAlign.Start)
            .margin({ left: 10 })
          }
          .width('100%')
          .padding(10)
          .backgroundColor(i % 2 === 0 ? COLORS.cardBg : COLORS.cardAlt)
          .borderRadius(14)
          .border({ width: 1, color: COLORS.line })
          .margin({ top: 8 })
        }, (f: FormationItem, i: number) => 'fm' + f.name + i)
      }
      .width('100%')
      .padding({ left: 12, right: 12, bottom: 16 })
    }
    .width('100%')
    .layoutWeight(1)
    .scrollable(ScrollDirection.Vertical)
    .scrollBar(BarState.Off)
  }
}

@Component
struct CujuEventContent {
  @ObjectLink data: CujuData;

  build() {
    Scroll() {
      Column() {
        Row() {
          Text('🏟️ 赛事年历')
            .fontSize(13)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
          Column().layoutWeight(1)
          Text('12场赛事')
            .fontSize(9)
            .fontColor(COLORS.textHint)
        }
        .width('100%')
        .margin({ bottom: 6 })
        ForEach(this.data.events, (e: EventItem, i: number) => {
          Row() {
            Column() {
              Text(e.emoji)
                .fontSize(16)
            }
            .width(40)
            .height(40)
            .justifyContent(FlexAlign.Center)
            .alignItems(HorizontalAlign.Center)
            .backgroundColor(COLORS.accent + '22')
            .borderRadius(20)
            .border({ width: 1, color: COLORS.accent + '55' })

            Column() {
              Text(e.name)
                .fontSize(13)
                .fontWeight(FontWeight.Bold)
                .fontColor(COLORS.textPrimary)
              Row() {
                Text(e.date + ' · ' + e.venue)
                  .fontSize(9)
                  .fontColor(COLORS.textSecondary)
                Text(e.teams + '队')
                  .fontSize(9)
                  .fontColor(COLORS.accent)
                  .margin({ left: 8 })
              }
              .width('100%')
              .margin({ top: 6 })
            }
            .layoutWeight(1)
            .alignItems(HorizontalAlign.Start)
            .margin({ left: 10 })
          }
          .width('100%')
          .padding(10)
          .backgroundColor(i % 2 === 0 ? COLORS.cardBg : COLORS.cardAlt)
          .borderRadius(14)
          .border({ width: 1, color: COLORS.line })
          .margin({ top: 8 })
        }, (e: EventItem, i: number) => 'ev' + e.name + i)
      }
      .width('100%')
      .padding({ left: 12, right: 12, bottom: 16 })
    }
    .width('100%')
    .layoutWeight(1)
    .scrollable(ScrollDirection.Vertical)
    .scrollBar(BarState.Off)
  }
}

@Component
struct CujuRecordContent {
  @ObjectLink data: CujuData;
  onDel: (n: string) => void = () => {};

  build() {
    Scroll() {
      Column() {
        Row() {
          Text('🏆 战绩榜')
            .fontSize(13)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
          Column().layoutWeight(1)
          Text('8胜2平2负')
            .fontSize(9)
            .fontColor(COLORS.textHint)
        }
        .width('100%')
        .margin({ bottom: 6 })
        ForEach(this.data.records, (r: RecordItem, i: number) => {
          Row() {
            Column() {
              Text(r.emoji)
                .fontSize(16)
            }
            .width(40)
            .height(40)
            .justifyContent(FlexAlign.Center)
            .alignItems(HorizontalAlign.Center)
            .backgroundColor(getResultColor(r.result) + '22')
            .borderRadius(20)
            .border({ width: 1, color: getResultColor(r.result) + '55' })

            Column() {
              Row() {
                Text(r.name)
                  .fontSize(13)
                  .fontWeight(FontWeight.Bold)
                  .fontColor(COLORS.textPrimary)
                Text('🗑️')
                  .fontSize(12)
                  .margin({ left: 8 })
                  .onClick(() => { this.onDel(r.name); })
              }
              .width('100%')
              Row() {
                Text(r.score + ' vs ' + r.rival)
                  .fontSize(9)
                  .fontColor(COLORS.textSecondary)
                CujuTag({ text: r.result, color: getResultColor(r.result) })
                  .margin({ left: 8 })
              }
              .width('100%')
              .margin({ top: 6 })
            }
            .layoutWeight(1)
            .alignItems(HorizontalAlign.Start)
            .margin({ left: 10 })
          }
          .width('100%')
          .padding(10)
          .backgroundColor(i % 2 === 0 ? COLORS.cardBg : COLORS.cardAlt)
          .borderRadius(14)
          .border({ width: 1, color: COLORS.line })
          .margin({ top: 8 })
        }, (r: RecordItem, i: number) => 'rd' + r.name + i)
      }
      .width('100%')
      .padding({ left: 12, right: 12, bottom: 16 })
    }
    .width('100%')
    .layoutWeight(1)
    .scrollable(ScrollDirection.Vertical)
    .scrollBar(BarState.Off)
  }
}

@Component
struct CujuFanContent {
  @ObjectLink data: CujuData;

  build() {
    Scroll() {
      Column() {
        Row() {
          Text('📣 球迷会')
            .fontSize(13)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
          Column().layoutWeight(1)
          Text('12城助威')
            .fontSize(9)
            .fontColor(COLORS.textHint)
        }
        .width('100%')
        .margin({ bottom: 6 })
        ForEach(this.data.fans, (f: FanItem, i: number) => {
          Row() {
            Column() {
              Text(f.emoji)
                .fontSize(16)
            }
            .width(40)
            .height(40)
            .justifyContent(FlexAlign.Center)
            .alignItems(HorizontalAlign.Center)
            .backgroundColor(getFanColor(f.cheers) + '22')
            .borderRadius(20)
            .border({ width: 1, color: getFanColor(f.cheers) + '55' })

            Column() {
              Text(f.name)
                .fontSize(13)
                .fontWeight(FontWeight.Bold)
                .fontColor(COLORS.textPrimary)
              Row() {
                Text(f.city + ' · 助威' + f.cheers + '次')
                  .fontSize(9)
                  .fontColor(getFanColor(f.cheers))
                Text('球迷')
                  .fontSize(9)
                  .fontColor(COLORS.textHint)
                  .margin({ left: 8 })
              }
              .width('100%')
              .margin({ top: 6 })
            }
            .layoutWeight(1)
            .alignItems(HorizontalAlign.Start)
            .margin({ left: 10 })
            Text(f.years + '年')
              .fontSize(11)
              .fontColor(getFanColor(f.cheers))
          }
          .width('100%')
          .padding(10)
          .backgroundColor(i % 2 === 0 ? COLORS.cardBg : COLORS.cardAlt)
          .borderRadius(14)
          .border({ width: 1, color: COLORS.line })
          .margin({ top: 8 })
        }, (f: FanItem, i: number) => 'fn' + f.name + i)
      }
      .width('100%')
      .padding({ left: 12, right: 12, bottom: 16 })
    }
    .width('100%')
    .layoutWeight(1)
    .scrollable(ScrollDirection.Vertical)
    .scrollBar(BarState.Off)
  }
}

@Entry
@Component
export default struct CujuApp {
  @State curTab: number = 0;
  @State data: CujuData = new CujuData();
  @State showAddSkill: boolean = false;
  @State showEditFormation: boolean = false;
  @State showDeleteRecord: boolean = false;
  @State delRecordName: string = '';
  @State ballBounce: boolean = false;
  @State whistle: boolean = false;

  @Builder modalOverlay(onClose: () => void) {
    Column()
      .width('100%')
      .height('100%')
      .backgroundColor('#66000000')
      .onClick(() => { onClose(); })
  }

  @Builder addSkillModal() {
    Stack() {
      this.modalOverlay(() => { this.showAddSkill = false; })
      Column() {
        Row() {
          Text('⚽ 新练球艺')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
          Column().layoutWeight(1)
          Text('✕')
            .fontSize(16)
            .fontColor(COLORS.textHint)
            .onClick(() => { this.showAddSkill = false; })
        }
        .width('100%')
        Column() {
          Text('🦅')
            .fontSize(30)
          Text('凤点头')
            .fontSize(14)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
            .margin({ top: 6 })
        }
        .width('100%')
        .padding(14)
        .backgroundColor(COLORS.cardAlt)
        .borderRadius(14)
        .margin({ top: 12 })
        Row() {
          Text('传人')
            .fontSize(11)
            .fontColor(COLORS.textSecondary)
            .width(56)
          Text('张蹴 · 锋线')
            .fontSize(11)
            .fontColor(getCrewColor('锋线'))
        }
        .width('100%')
        .padding(10)
        .backgroundColor(COLORS.cardAlt)
        .borderRadius(12)
        .margin({ top: 8 })
        Row() {
          Text('难度')
            .fontSize(11)
            .fontColor(COLORS.textSecondary)
            .width(56)
          Text('★★★★★ · 95 分')
            .fontSize(11)
            .fontColor(getSkillColor(95))
        }
        .width('100%')
        .padding(10)
        .backgroundColor(COLORS.cardAlt)
        .borderRadius(12)
        .margin({ top: 8 })
        Row() {
          Text('要诀')
            .fontSize(11)
            .fontColor(COLORS.textSecondary)
            .width(56)
          Text('凌空点球 · 一击破门')
            .fontSize(11)
            .fontColor(COLORS.textPrimary)
        }
        .width('100%')
        .padding(10)
        .backgroundColor(COLORS.cardAlt)
        .borderRadius(12)
        .margin({ top: 8 })
        Row() {
          Text('再想想')
            .fontSize(12)
            .fontColor(COLORS.textSecondary)
            .padding({ left: 16, right: 16, top: 7, bottom: 7 })
            .borderRadius(14)
            .border({ width: 1, color: COLORS.border })
            .onClick(() => { this.showAddSkill = false; })
          Text('确认入册')
            .fontSize(12)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.white)
            .padding({ left: 16, right: 16, top: 7, bottom: 7 })
            .backgroundColor(COLORS.primary)
            .borderRadius(14)
            .margin({ left: 10 })
            .onClick(() => { this.showAddSkill = false; })
        }
        .width('100%')
        .justifyContent(FlexAlign.End)
        .margin({ top: 14 })
      }
      .width('86%')
      .padding(16)
      .backgroundColor(COLORS.cardBg)
      .borderRadius(18)
      .constraintSize({ maxHeight: '80%' })
    }
    .width('100%')
    .height('100%')
    .position({ x: 0, y: 0 })
  }

  @Builder editFormationModal() {
    Stack() {
      this.modalOverlay(() => { this.showEditFormation = false; })
      Column() {
        Row() {
          Text('🛡️ 调配阵型')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
          Column().layoutWeight(1)
          Text('✕')
            .fontSize(16)
            .fontColor(COLORS.textHint)
            .onClick(() => { this.showEditFormation = false; })
        }
        .width('100%')
        Column() {
          Text('🌸')
            .fontSize(30)
          Text('梅花阵')
            .fontSize(14)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
            .margin({ top: 6 })
        }
        .width('100%')
        .padding(14)
        .backgroundColor(COLORS.cardAlt)
        .borderRadius(14)
        .margin({ top: 12 })
        Row() {
          Text('原阵')
            .fontSize(11)
            .fontColor(COLORS.textSecondary)
            .width(56)
          Text('5-2 · 五锋两卫')
            .fontSize(11)
            .fontColor(COLORS.textPrimary)
        }
        .width('100%')
        .padding(10)
        .backgroundColor(COLORS.cardAlt)
        .borderRadius(12)
        .margin({ top: 8 })
        Row() {
          Text('新阵')
            .fontSize(11)
            .fontColor(COLORS.textSecondary)
            .width(56)
          Text('5-2 → 3-3-1')
            .fontSize(11)
            .fontColor(COLORS.accent)
        }
        .width('100%')
        .padding(10)
        .backgroundColor(COLORS.cardAlt)
        .borderRadius(12)
        .margin({ top: 8 })
        Row() {
          Text('锋卫')
            .fontSize(11)
            .fontColor(COLORS.textSecondary)
            .width(56)
          Text('锋5卫2 → 锋3卫5')
            .fontSize(11)
            .fontColor(getCrewColor('锋线'))
        }
        .width('100%')
        .padding(10)
        .backgroundColor(COLORS.cardAlt)
        .borderRadius(12)
        .margin({ top: 8 })
        Row() {
          Text('再想想')
            .fontSize(12)
            .fontColor(COLORS.textSecondary)
            .padding({ left: 16, right: 16, top: 7, bottom: 7 })
            .borderRadius(14)
            .border({ width: 1, color: COLORS.border })
            .onClick(() => { this.showEditFormation = false; })
          Text('保存调配')
            .fontSize(12)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.white)
            .padding({ left: 16, right: 16, top: 7, bottom: 7 })
            .backgroundColor(COLORS.primary)
            .borderRadius(14)
            .margin({ left: 10 })
            .onClick(() => { this.showEditFormation = false; })
        }
        .width('100%')
        .justifyContent(FlexAlign.End)
        .margin({ top: 14 })
      }
      .width('86%')
      .padding(16)
      .backgroundColor(COLORS.cardBg)
      .borderRadius(18)
      .constraintSize({ maxHeight: '80%' })
    }
    .width('100%')
    .height('100%')
    .position({ x: 0, y: 0 })
  }

  @Builder deleteRecordModal() {
    Stack() {
      this.modalOverlay(() => { this.showDeleteRecord = false; })
      Column() {
        Text('🗑️ 移出战绩')
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .fontColor(COLORS.textPrimary)
        Text('确定移出「' + this.delRecordName + '」吗？')
          .fontSize(12)
          .fontColor(COLORS.textSecondary)
          .margin({ top: 10 })
        Text('移出的战绩将从榜单移除。')
          .fontSize(10)
          .fontColor(COLORS.textHint)
          .margin({ top: 4 })
        Row() {
          Text('再想想')
            .fontSize(12)
            .fontColor(COLORS.textSecondary)
            .padding({ left: 16, right: 16, top: 7, bottom: 7 })
            .borderRadius(14)
            .border({ width: 1, color: COLORS.border })
            .onClick(() => { this.showDeleteRecord = false; })
          Text('确认移出')
            .fontSize(12)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.white)
            .padding({ left: 16, right: 16, top: 7, bottom: 7 })
            .backgroundColor(COLORS.danger)
            .borderRadius(14)
            .margin({ left: 10 })
            .onClick(() => { this.showDeleteRecord = false; })
        }
        .width('100%')
        .justifyContent(FlexAlign.End)
        .margin({ top: 16 })
      }
      .width('86%')
      .padding(16)
      .backgroundColor(COLORS.cardBg)
      .borderRadius(18)
      .constraintSize({ maxHeight: '78%' })
    }
    .width('100%')
    .height('100%')
    .position({ x: 0, y: 0 })
  }

  @Builder topBar() {
    Column() {
      Row() {
        Column() {
          Text('⚽ 蹴鞠社')
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.white)
          Text('Cuju · 一鞠穿云 万众喝彩')
            .fontSize(10)
            .fontColor(COLORS.primaryLight)
            .margin({ top: 3 })
        }
        .alignItems(HorizontalAlign.Start)
        .layoutWeight(1)
        Row() {
          Text('⚽')
            .fontSize(18)
            .translate({ y: this.ballBounce ? -8 : 4 })
            .animation({ duration: 500, curve: Curve.EaseOut })
            .onClick(() => { this.ballBounce = !this.ballBounce; })
          Text('📣')
            .fontSize(16)
            .margin({ left: 10 })
            .scale({ x: this.whistle ? 1.3 : 0.9, y: this.whistle ? 1.3 : 0.9 })
            .animation({ duration: 400, curve: Curve.EaseOut })
            .onClick(() => { this.whistle = !this.whistle; })
          Text('🏆')
            .fontSize(14)
            .margin({ left: 6 })
        }
        .padding({ left: 10, right: 10, top: 6, bottom: 6 })
        .backgroundColor(COLORS.accent + '2E')
        .borderRadius(16)
        .border({ width: 1, color: COLORS.accent + '80' })
      }
      .width('100%')
      Row() {
        ForEach([0, 1, 2, 3, 4, 5, 6], (r: number) => {
          Column()
            .width(10)
            .height(10)
            .backgroundColor(r % 2 === 0 ? COLORS.accent : COLORS.primaryLight)
            .borderRadius(5)
        }, (r: number) => 'pk' + r)
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .margin({ top: 12 })
      Row() {
        Column()
          .layoutWeight(1)
          .height(1)
          .backgroundColor(COLORS.primaryLight + '66')
        Text('⚽ 一鞠穿云 · 万众喝彩 📣')
          .fontSize(9)
          .fontColor(COLORS.primaryLight)
          .margin({ left: 8, right: 8 })
        Column()
          .layoutWeight(1)
          .height(1)
          .backgroundColor(COLORS.primaryLight + '66')
      }
      .width('100%')
      .margin({ top: 10 })
    }
    .width('100%')
    .padding({ left: 16, right: 16, top: 12, bottom: 12 })
    .backgroundColor(COLORS.primaryDark)
  }

  build() {
    Column() {
      this.topBar()
      if (this.curTab === CujuTab.SKILL) {
        CujuSkillContent({ data: this.data, onAdd: () => { this.showAddSkill = true; } })
      } else if (this.curTab === CujuTab.FORMATION) {
        CujuFormationContent({ data: this.data, onEdit: () => { this.showEditFormation = true; } })
      } else if (this.curTab === CujuTab.EVENT) {
        CujuEventContent({ data: this.data })
      } else if (this.curTab === CujuTab.RECORD) {
        CujuRecordContent({ data: this.data, onDel: (n: string) => {
          this.delRecordName = n;
          this.showDeleteRecord = true;
        } })
      } else {
        CujuFanContent({ data: this.data })
      }
      Column()
        .width('100%')
        .height(3)
        .backgroundColor(COLORS.primary)
      Row() {
        ForEach(TAB_LIST, (t: STabMeta, idx: number) => {
          Column() {
            Text(t.icon)
              .fontSize(19)
            Text(t.label)
              .fontSize(10)
              .fontColor(this.curTab === idx ? t.color : COLORS.textHint)
              .fontWeight(this.curTab === idx ? FontWeight.Bold : FontWeight.Normal)
              .margin({ top: 2 })
          }
          .layoutWeight(1)
          .justifyContent(FlexAlign.Center)
          .padding({ top: 7, bottom: 7 })
          .backgroundColor(this.curTab === idx ? t.color + '18' : '#00000000')
          .borderRadius(16)
          .onClick(() => { this.curTab = idx; })
        }, (t: STabMeta) => t.key)
      }
      .width('100%')
      .height(60)
      .padding({ left: 8, right: 8 })
      .backgroundColor(COLORS.cardBg)

      if (this.showAddSkill) {
        this.addSkillModal()
      }
      if (this.showEditFormation) {
        this.editFormationModal()
      }
      if (this.showDeleteRecord) {
        this.deleteRecordModal()
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor(COLORS.bg)
  }
}

逐点拆解：

第一，结构同构，气质迥异。蹴鞠社的主色是 #2E7D32（草场绿）——Material Design 标准绿 800 号，饱满而富有生机。#1B3A1D（primaryDark）是深夜球场般的墨绿，#81C784（primaryLight）是新芽般的嫩绿。

第二，本系列第一次出现"高饱和五色"。除了绿色系，还引入了明黄 #F9A825（accent，赛场金哨般的醒目色）、球场红 #C62828（danger）、天空蓝 #1565C0、球迷紫 #7B1FA2。这四种颜色并不是随意堆砌——它们分别对应页签体系里的四个非绿色页签（阵型黄、赛事蓝、战绩红、球迷紫），与"页签即主题"的设计一脉相承。足球运动的活力，靠的就是这份高饱和色彩。

第三，接口末尾多出两个主题点色：pitch（草场色，#3A7D3E）与 chalk（白垩线色，#FFFFFF）。这两个色用于阵型布阵图：pitch 是球场草地底色，chalk 是边线、中线、禁区线的白色线条色。"草场 + 白线"的意象，就是一张标准的足球场。

第四，色板完整体系：primary/primaryLight/primaryDark 绿色梯度、accent/accentLight 明黄强调、bg/cardBg/cardAlt 背景层次（bg 是带一点绿的米白 #EDF5EE）、textPrimary/textSecondary/textHint 文字三级密度（textPrimary 用墨绿 #1B3A1D 而非纯黑）、success/warning/danger 状态色。整体气质：清爽、活力、阳光。

3.2 页签体系：五色齐飞的 CujuTab、STabMeta 与 TAB_LIST

接下来是页签枚举、页签元数据接口与页签列表。这一节延续了榫卯工坊"页签即主题"的设计，并把五色体系推向极致。

enum CujuTab {
  SKILL = 0,
  FORMATION = 1,
  EVENT = 2,
  RECORD = 3,
  FAN = 4
}

interface STabMeta {
  key: string;
  icon: string;
  label: string;
  color: string;
}

const TAB_LIST: STabMeta[] = [
  { key: 'skill', icon: '⚽', label: '球艺', color: '#2E7D32' },
  { key: 'formation', icon: '🛡️', label: '阵型', color: '#F9A825' },
  { key: 'event', icon: '🏟️', label: '赛事', color: '#1565C0' },
  { key: 'record', icon: '🏆', label: '战绩', color: '#C62828' },
  { key: 'fan', icon: '📣', label: '球迷', color: '#7B1FA2' }
];

逐点拆解：

其一，enum CujuTab 把五个页签的索引语义化：SKILL（球艺）、FORMATION（阵型）、EVENT（赛事）、RECORD（战绩）、FAN（球迷）。代码里 this.curTab === CujuTab.SKILL 比 this.curTab === 0 可读性强得多。

其二，五色齐飞的页签配色：球艺页草绿 #2E7D32、阵型页明黄 #F9A825、赛事页天空蓝 #1565C0、战绩页球场红 #C62828、球迷页应援紫 #7B1FA2。五个颜色各有语义：球艺是球场本体的绿，阵型是战术板标记的黄，赛事是广阔天空的蓝，战绩是热血拼搏的红，球迷是狂热应援的紫。每个页签颜色都与该板块的业务语义绑定——这是"页签即主题"设计的高级形态。

其三，底部导航渲染时，选中态直接用 t.color——文字颜色、加粗、背景色（t.color + '18'）全部跟随页签自身颜色变化。切到"赛事"页高亮是蓝，切到"球迷"页高亮是紫，视觉上比前两篇更加活泼跳跃。

3.3 业务实体接口：五组数据契约

紧随页签体系，定义了五组业务实体的接口。

interface SkillItem {
  name: string;
  level: number;
  master: string;
  crew: string;
  emoji: string;
}

interface FormationItem {
  name: string;
  shape: string;
  forwards: number;
  backs: number;
  emoji: string;
}

interface EventItem {
  name: string;
  date: string;
  venue: string;
  teams: number;
  emoji: string;
}

interface RecordItem {
  name: string;
  result: string;
  score: string;
  rival: string;
  emoji: string;
}

interface FanItem {
  name: string;
  city: string;
  cheers: number;
  years: number;
  emoji: string;
}

interface WeekGoalMeta {
  day: string;
  value: number;
}

interface FormationPosMeta {
  name: string;
  x: number;
  y: number;
  color: string;
}

逐点拆解：

第一，五组业务接口各有侧重：

• SkillItem（球艺）：name（招式名，如"凤点头"）、level（难度分）、master（传人）、crew（司职，如"锋线"“中场”“后卫”“门将”）、emoji。level 喂给 getSkillColor，crew 喂给 getCrewColor。
• FormationItem（阵型）：name（阵法名，如"梅花阵"）、shape（阵形代号，如"5-2"）、forwards（前锋数）、backs（后卫数）、emoji。
• EventItem（赛事）：name（赛事名，如"端阳蹴鞠大赛"）、date（日期）、venue（赛场，如"汴京御街"）、teams（参赛队数）、emoji。
• RecordItem（战绩）：name（赛事名）、result（结果：胜/平/负）、score（比分）、rival（对手）、emoji。result 喂给 getResultColor——这是本系列第一次出现"胜平负"三分语义。
• FanItem（球迷）：name（球迷名）、city（城市）、cheers（助威次数）、years（球迷年限）、emoji。cheers 喂给 getFanColor。

第二，两个图表元数据：WeekGoalMeta（周进球：天 + 数值）与 FormationPosMeta（阵型站位：名称 + x/y 坐标 + 颜色）。其中 FormationPosMeta 是本系列第一次出现坐标类元数据——x/y 是两个 0-100 的百分比坐标，直接决定球员棋子在球场画布上的精确位置，后面会详述。

3.4 图表数据常量：WEEK_GOAL 与 FORMATION_POS

const WEEK_GOAL: WeekGoalMeta[] = [
  { day: '周一', value: 4 },
  { day: '周二', value: 6 },
  { day: '周三', value: 5 },
  { day: '周四', value: 8 },
  { day: '周五', value: 7 },
  { day: '周六', value: 12 },
  { day: '周日', value: 9 }
];

const FORMATION_POS: FormationPosMeta[] = [
  { name: '门将', x: 50, y: 88, color: '#F9A825' },
  { name: '左卫', x: 22, y: 66, color: '#2E7D32' },
  { name: '中卫', x: 50, y: 70, color: '#2E7D32' },
  { name: '右卫', x: 78, y: 66, color: '#2E7D32' },
  { name: '左前', x: 28, y: 38, color: '#1565C0' },
  { name: '中前', x: 50, y: 30, color: '#C62828' },
  { name: '右前', x: 72, y: 38, color: '#1565C0' },
  { name: '锋头', x: 50, y: 12, color: '#C62828' }
];

逐点拆解：

WEEK_GOAL 是一周社中进球数据，峰值出现在周六（12 球）——延续"周末是旺季"的叙事设定。数据里"周六 12 球"的数字直接决定了页面右上角提示语"周六12球"的来源，柱状图里 value >= 9 的柱子（周六 12、周日 9）会被高亮为强调色。注意柱高计算是 w.value * 6——进球数 × 6 = 像素高度，12 球就是 72px 高的柱子。

FORMATION_POS 是阵型布阵图的核心数据，需要重点解读：

• 8 个站位：门将（y=88，靠近底线）、左卫/中卫/右卫（y=66_{70，防线）、左前/中前/右前（y=30}38，中场）、锋头（y=12，最前方）——y 坐标从小到大对应从后场到前场，88 是门将、12 是锋头，天然构成纵向的球场位置关系；
• x 坐标左右对称：左卫 22 / 右卫 78、左前 28 / 右前 72，中卫、中前、锋头都在 x=50 的中轴线上——对称性一目了然；
• 颜色语义：门将明黄、后卫绿、中前红、边前蓝、锋头红——与前场攻击手用红、防守用绿、门将用黄的足球惯例一致。

这套坐标数据是"数据驱动图形"的教科书案例：8 个棋子完全由数据摆位，改数据即改阵型，无需改任何 UI 代码。

3.5 数据模型层：@Observed 修饰的 CujuData

这是应用的灵魂底层——被观察的核心数据实体，完整包含 12×5 共计 60 条蹴鞠业务数据，一字不落。

@Observed
export class CujuData {
  skills: SkillItem[] = [
    { name: '凤点头', level: 95, master: '张蹴', crew: '锋线', emoji: '🦅' },
    { name: '鸳鸯拐', level: 92, master: '李鞠', crew: '中场', emoji: '🦢' },
    { name: '流星赶月', level: 90, master: '王蹴', crew: '锋线', emoji: '☄️' },
    { name: '魁星踢斗', level: 88, master: '赵鞠', crew: '中场', emoji: '⭐' },
    { name: '金丝缠腕', level: 86, master: '钱蹴', crew: '后卫', emoji: '🪢' },
    { name: '海底捞月', level: 84, master: '孙鞠', crew: '门将', emoji: '🌙' },
    { name: '燕子穿林', level: 89, master: '周蹴', crew: '锋线', emoji: '🐦' },
    { name: '老虎摆尾', level: 87, master: '吴鞠', crew: '后卫', emoji: '🐯' },
    { name: '童子拜佛', level: 83, master: '郑蹴', crew: '中场', emoji: '🧒' },
    { name: '斜插梅花', level: 85, master: '王鞠', crew: '锋线', emoji: '🌸' },
    { name: '转身倒勾', level: 91, master: '冯蹴', crew: '锋线', emoji: '🌀' },
    { name: '老将绝技', level: 96, master: '堂主', crew: '全能', emoji: '📜' }
  ];

  formations: FormationItem[] = [
    { name: '一锋七卫', shape: '1-3-3-1', forwards: 1, backs: 7, emoji: '🛡️' },
    { name: '三星阵', shape: '3-3-1', forwards: 3, backs: 4, emoji: '⭐' },
    { name: '梅花阵', shape: '5-2', forwards: 5, backs: 2, emoji: '🌸' },
    { name: '北斗阵', shape: '2-3-2', forwards: 2, backs: 5, emoji: '🌌' },
    { name: '雁翅阵', shape: '4-3', forwards: 4, backs: 3, emoji: '🦢' },
    { name: '长蛇阵', shape: '1-6-1', forwards: 1, backs: 6, emoji: '🐍' },
    { name: '八卦阵', shape: '3-4-1', forwards: 3, backs: 5, emoji: '☯️' },
    { name: '锋矢阵', shape: '5-2-1', forwards: 5, backs: 3, emoji: '🏹' },
    { name: '鸳鸯阵', shape: '2-4-2', forwards: 2, backs: 6, emoji: '🦆' },
    { name: '六合阵', shape: '2-4-2', forwards: 2, backs: 6, emoji: '🎴' },
    { name: '风火阵', shape: '4-3-1', forwards: 4, backs: 4, emoji: '🔥' },
    { name: '老堂秘阵', shape: '秘制', forwards: 3, backs: 5, emoji: '📜' }
  ];

  events: EventItem[] = [
    { name: '端阳蹴鞠大赛', date: '06-10', venue: '汴京御街', teams: 16, emoji: '🐉' },
    { name: '中秋鞠会', date: '09-15', venue: '临安涌金门', teams: 12, emoji: '🌕' },
    { name: '重阳登高赛', date: '10-09', venue: '长安乐游原', teams: 8, emoji: '🍂' },
    { name: '上元灯夕赛', date: '02-14', venue: '洛阳天津桥', teams: 20, emoji: '🏮' },
    { name: '寒食踏青赛', date: '04-05', venue: '成都锦江畔', teams: 10, emoji: '🌱' },
    { name: '端午龙舟鞠', date: '06-02', venue: '苏州金鸡湖', teams: 14, emoji: '🐲' },
    { name: '七夕乞巧赛', date: '08-10', venue: '杭州西湖', teams: 12, emoji: '💕' },
    { name: '社日乡赛', date: '03-21', venue: '乡间社坛', teams: 6, emoji: '🌾' },
    { name: '立春开鞠赛', date: '02-04', venue: '京华鞠场', teams: 18, emoji: '🌸' },
    { name: '冬至贺岁赛', date: '12-22', venue: '汴京州桥', teams: 8, emoji: '❄️' },
    { name: '清明蹴鞠会', date: '04-05', venue: '曲江芙蓉园', teams: 16, emoji: '🌷' },
    { name: '腊月封场赛', date: '12-08', venue: '临安涌金门', teams: 10, emoji: '⛄' }
  ];

  records: RecordItem[] = [
    { name: '端阳大赛决赛', result: '胜', score: '3:1', rival: '临安社', emoji: '🏆' },
    { name: '中秋鞠会半决赛', result: '胜', score: '2:0', rival: '长安社', emoji: '🥇' },
    { name: '重阳登高赛', result: '负', score: '1:2', rival: '洛阳社', emoji: '🥈' },
    { name: '上元灯夕赛决赛', result: '胜', score: '4:2', rival: '苏州社', emoji: '🏆' },
    { name: '寒食踏青赛', result: '平', score: '2:2', rival: '成都社', emoji: '🤝' },
    { name: '端午龙舟鞠', result: '胜', score: '3:0', rival: '扬州社', emoji: '🥇' },
    { name: '七夕乞巧赛', result: '胜', score: '2:1', rival: '钱塘社', emoji: '🏆' },
    { name: '社日乡赛', result: '负', score: '0:1', rival: '乡勇队', emoji: '🥈' },
    { name: '立春开鞠赛', result: '胜', score: '5:1', rival: '京华社', emoji: '🏆' },
    { name: '冬至贺岁赛', result: '胜', score: '3:2', rival: '汴京社', emoji: '🥇' },
    { name: '清明蹴鞠会', result: '平', score: '1:1', rival: '曲江社', emoji: '🤝' },
    { name: '腊月封场赛', result: '胜', score: '4:0', rival: '临安社', emoji: '🏆' }
  ];

  fans: FanItem[] = [
    { name: '汴京老张', city: '汴京', cheers: 1200, years: 30, emoji: '👴' },
    { name: '临安小李', city: '临安', cheers: 980, years: 12, emoji: '👨' },
    { name: '长安王二', city: '长安', cheers: 860, years: 25, emoji: '🧔' },
    { name: '洛阳赵姐', city: '洛阳', cheers: 760, years: 8, emoji: '👩' },
    { name: '苏州钱三', city: '苏州', cheers: 640, years: 15, emoji: '🧑' },
    { name: '成都孙四', city: '成都', cheers: 720, years: 10, emoji: '👱' },
    { name: '杭州周伯', city: '杭州', cheers: 1100, years: 40, emoji: '🧓' },
    { name: '扬州吴娘', city: '扬州', cheers: 540, years: 6, emoji: '👧' },
    { name: '京华郑少', city: '京华', cheers: 880, years: 20, emoji: '🧒' },
    { name: '钱塘冯嫂', city: '钱塘', cheers: 460, years: 4, emoji: '👩‍🦰' },
    { name: '乡勇陈头', city: '乡间', cheers: 380, years: 18, emoji: '🧙' },
    { name: '曲江楚公子', city: '曲江', cheers: 920, years: 22, emoji: '🤵' }
  ];
}