风筝坊 · 纸鸢凌空 —— 鸿蒙 ArkTS 时间轴布局页面深度解析

在中华传统文化的浩瀚天空中，风筝以其纸鸢凌空、线牵大地的独特魅力，成为了春日里最具诗意的民间技艺。从选竹、劈篾、扎骨、糊面、彩绘、穿线到放飞，一只风筝的诞生需要经历多道精细工序，而每一次放飞都是人与天空之间一场无声的对话。在鸿蒙 ArkTS 的声明式 UI 体系中，我们可以运用天青桃红的春日色彩主题、时间轴纵向列表布局、风筝飘浮与彩带摆动动画等手段，将一座风筝坊完整地呈现在数字屏幕之上，让用户通过指尖即可浏览骨架品类、纸面材质、图样纹饰、扎匠名册、放飞记录与客户订单。

本文将围绕一个完整的风筝坊管理页面展开逐段深度剖析，从天青桃红春日色彩体系设计、六类业务数据模型构建、辅助位置函数运算、组件状态管理、头部表单与风筝飘浮动画、六大时间轴标签页内容、放飞量柱状图、模态弹窗交互到底部两行标签栏，全面揭示 ArkTS 在时间轴布局复杂业务场景下的组件拆分策略、动画驱动原理与状态联动机制。通过这篇文章，读者不仅能够深入理解风筝坊页面的每一行代码含义，更能掌握鸿蒙声明式 UI 中时间轴布局的实现范式。

---

一、天青桃红春日色彩体系

1.1 ColorPalette 接口定义

风筝坊页面的色彩体系以"天青"与"桃红"为双主色调，营造出一种春日晴空、桃红柳绿的明媚氛围。开发者通过 ColorPalette 接口集中声明了十八个语义化颜色字段。

interface ColorPalette {
  bg: string;
  card: string;
  paper: string;
  title: string;
  sub: string;
  text3: string;
  sky: string;
  skyB: string;
  peach: string;
  peachB: string;
  willow: string;
  cloud: string;
  line: string;
  tabOn: string;
  deep: string;
  mask: string;
  kite: string;
  ribbon: string;
  transparent: string;
}

字段涵盖了背景色（bg）、卡片色（card）、纸面色（paper）、标题色（title）、副文本色（sub）、三级文本色（text3）、天青色（sky）、深天青色（skyB）、桃红色（peach）、深桃红色（peachB）、柳绿色（willow）、云朵色（cloud）、分隔线色（line）、标签选中色（tabOn）、深色（deep）、遮罩色（mask）、风筝黄（kite）、彩带粉（ribbon）以及透明色（transparent）。这些颜色名称直接呼应风筝放飞场景的视觉元素——sky 指代蓝天，peach 指代桃花，willow 指代春柳，cloud 指代云朵，kite 指代风筝，ribbon 指代风筝彩带。

1.2 COLORS 常量赋值

const COLORS: ColorPalette = {
  bg: '#EEF4F8',
  card: '#FFFFFF',
  paper: '#F5F9FC',
  title: '#2A4A6B',
  sub: '#6B8CA8',
  text3: '#9AB0C4',
  sky: '#5BA3D0',
  skyB: '#3B82B5',
  peach: '#E86A7A',
  peachB: '#D04A5C',
  willow: '#7AB56A',
  cloud: '#DCEAF5',
  line: '#CFE0EC',
  tabOn: '#5BA3D0',
  deep: '#1E3A5C',
  mask: 'rgba(42,74,107,0.5)',
  kite: '#FFB347',
  ribbon: '#FF8FA3',
  transparent: 'rgba(0,0,0,0)'
};

逐一审视色值：背景色 bg 使用极淡的天青灰 #EEF4F8，模拟春日晴空的浅蓝底色；标题色 title 为深天青蓝 #2A4A6B，确保文字在浅色背景上清晰可读；天青色 sky #5BA3D0 与深天青色 skyB #3B82B5 是页面的核心强调色，用于骨架圆标、放飞数值与标签选中态；桃红色 peach #E86A7A 与深桃红色 peachB #D04A5C 作为对比强调色，用于纸面圆标、订单数值与删除按钮；柳绿色 willow #7AB56A 用于纸面标签的节点圆点；云朵色 cloud #DCEAF5 是极淡的蓝白色，用于云朵装饰、选中标签背景与按钮文字色；风筝黄 kite #FFB347 用于放飞标签的节点与数值；彩带粉 ribbon #FF8FA3 用于头部彩带装饰。整体色彩搭配清新明快，精准再现了"草长莺飞二月天，拂堤杨柳醉春烟"的春日风筝意境。

---

二、标签元数据与索引数组

2.1 TabMeta 与 TAB_LIST

interface TabMeta {
  icon: string;
  label: string;
}

const TAB_LIST: TabMeta[] = [
  { icon: '骨', label: '骨架' },
  { icon: '纸', label: '纸面' },
  { icon: '样', label: '图样' },
  { icon: '匠', label: '扎匠' },
  { icon: '飞', label: '放飞' },
  { icon: '单', label: '订单' }
];

六个标签分别对应风筝坊管理的六个核心维度：骨架管理各类竹篾扎就的风筝骨架（硬翅、软翅、串式、桶形等），纸面管理各类轻薄承风的纸张材质（宣纸、绢丝、棉纸等），图样管理各类彩绘描金的纹饰图样（沙燕、盘鹰、金鱼等），扎匠管理师徒制筝的匠人名册，放飞管理各类凌空万里的放飞活动（高飞赛、夜光飞等），订单管理客户订筝的订单记录。

2.2 索引数组

const ROW1_IDX: number[] = [0, 1, 2];
const ROW2_IDX: number[] = [3, 4, 5];

const TAG_IDX: number[] = [0, 1, 2, 3];
const TAG_NAME_IDX: string[] = ['骨架', '纸面', '图样', '放飞'];
const KITE_IDX: number[] = [0, 1, 2, 3, 4];
const RIBBON_IDX: number[] = [0, 1, 2, 3];
const CLOUD_IDX: number[] = [0, 1, 2];
const MONTH_IDX: number[] = [0, 1, 2, 3, 4, 5];
const MONTH_NAME_IDX: string[] = ['正月', '二月', '三月', '四月', '五月', '六月'];
const SALES_IDX: number[] = [120, 280, 420, 360, 240, 180];

TAG_IDX 和 TAG_NAME_IDX 为头部表单的筛选 chips 提供四个选项（骨架、纸面、图样、放飞），KITE_IDX 含五个索引用于渲染五个飘浮的风筝，RIBBON_IDX 含四个索引用于渲染四条摆动的彩带，CLOUD_IDX 含三个索引用于渲染三朵云朵。SALES_IDX 记录了正月到六月的放飞量（120、280、420、360、240、180 只），呈现了先升后降的季节性趋势——三月达到峰值 420 只（正值清明风筝节），之后逐渐回落。

---

三、数据模型与 Mock 数据

3.1 六个 @Observed 数据模型类

@Observed
export class FrameItem {
  name: string;
  kind: string;
  spars: number;
  price: number;
  constructor(name: string, kind: string, spars: number, price: number) {
    this.name = name; this.kind = kind; this.spars = spars; this.price = price;
  }
}

@Observed
export class SailItem {
  name: string;
  kind: string;
  sheets: number;
  price: number;
  constructor(name: string, kind: string, sheets: number, price: number) {
    this.name = name; this.kind = kind; this.sheets = sheets; this.price = price;
  }
}

@Observed
export class MotifItem {
  name: string;
  kind: string;
  colors: number;
  price: number;
  constructor(name: string, kind: string, colors: number, price: number) {
    this.name = name; this.kind = kind; this.colors = colors; this.price = price;
  }
}

前三类模型中，FrameItem（骨架项）的量化指标是竹篾根数（spars），从 3 根的拍子骨到 24 根的龙形骨；SailItem（纸面项）的量化指标是纸张张数（sheets）；MotifItem（图样项）的量化指标是用色数量（colors）。

@Observed
export class FlyItem {
  name: string;
  kind: string;
  meters: number;
  price: number;
  constructor(name: string, kind: string, meters: number, price: number) {
    this.name = name; this.kind = kind; this.meters = meters; this.price = price;
  }
}

FlyItem（放飞项）的量化指标是放飞高度米数（meters），从 50 米的童趣飞到 500 米的高飞赛，这个量化指标与其他模型不同，直接体现了放飞活动的核心数据。MakerItem 和 OrderItem 的量化指标分别是从业年限和订筝只数。

3.2 Mock 数据数组

骨架列表提供了十种风筝骨架，从"硬翅骨"到"软翅骨"，从"串式骨"到"龙形骨"，价格从 18 元到 128 元。纸面列表涵盖十种纸张材质，从生宣薄纸到云母闪光。图样列表包含十一种纹样，从北京沙燕到龙凤呈祥，用色数量从 3 色到 6 色。扎匠列表包含十位匠人，从 38 年非遗传承的"曹风筝"到 3 年学徒"冯学徒"。放飞列表包含十种放飞活动，从 500 米的"高飞赛"到 50 米的"童趣飞"。订单列表包含十笔订单，从 60 只的"清明风筝节"到 150 只的"出口外贸"，总价从 3600 元到 18000 元。

---

四、辅助函数：风筝与云朵的位置计算

function kiteX(i: number): number {
  return 30 + i * 64;
}

function kiteY(i: number): number {
  return 20 + (i % 2) * 12;
}

function ribbonX(i: number): number {
  return 40 + i * 70;
}

function cloudX(i: number): number {
  return 20 + i * 110;
}

四个辅助函数为头部横幅中的动画元素计算空间位置。kiteX 和 kiteY 为五个风筝计算坐标：水平方向以 64 像素为间距均匀排布，垂直方向利用 i % 2 取模制造高低交错的层次感，使风筝在空中呈波浪式分布。ribbonX 为四条彩带计算水平位置，间距 70 像素。cloudX 为三朵云朵计算水平位置，间距 110 像素，使云朵在横幅中均匀分布。

---

五、组件状态管理与生命周期

5.1 @State 状态变量

@Entry
@Component
struct Page750 {
  @State selTab: number = 0;
  @State selTag: number = 0;
  @State breath: boolean = false;
  @State showAdd: boolean = false;
  @State showEdit: boolean = false;
  @State showDel: boolean = false;
  @State selIdx: number = 0;
  @State frameList: FrameItem[] = mockFrameList;
  @State sailList: SailItem[] = mockSailList;
  @State motifList: MotifItem[] = mockMotifList;
  @State makerList: MakerItem[] = mockMakerList;
  @State flyList: FlyItem[] = mockFlyList;
  @State orderList: OrderItem[] = mockOrderList;

页面声明了十三个 @State 状态变量。selTag 控制头部筛选 chips 的选中项，与 selTab 联动——点击筛选 chip 会同时更新 selTag 和 selTab，实现筛选与标签页切换的一体化。breath 以 1500 毫秒周期翻转驱动所有动画，这个周期比其他页面更长，使得风筝飘浮和彩带摆动的节奏更悠闲、更舒缓，符合春日放风筝的慵懒氛围。

5.2 aboutToAppear 生命周期

  aboutToAppear() {
    setInterval(() => { this.breath = !this.breath; }, 1500);
  }

1500 毫秒的动画周期是整个系列页面中最长的，这并非随意选择——风筝在空中的飘浮运动本就是缓慢而优雅的，彩带在风中的摆动也是轻柔的，较长的动画周期更贴合这一视觉意象。

---

六、页面主体构建函数

  build() {
    Column() {
      this.headerForm()
      Divider().strokeWidth(1).color(COLORS.line)
      Scroll() {
        Column() {
          if (this.selTab === 0) {
            this.frameTab()
          } else if (this.selTab === 1) {
            this.sailTab()
          } else if (this.selTab === 2) {
            this.motifTab()
          } else if (this.selTab === 3) {
            this.makerTab()
          } else if (this.selTab === 4) {
            this.flyTab()
          } else {
            this.orderTab()
          }
          this.flyChart()
        }.width('100%').padding({ left: 12, right: 12, top: 10, bottom: 100 })
      }.constraintSize({ maxHeight: '70%' }).scrollBar(BarState.Off)
      this.tabBar()
      if (this.showAdd) {
        this.addModal()
      }
      if (this.showEdit) {
        this.editModal()
      }
      if (this.showDel) {
        this.delModal()
      }
    }.width('100%').height('100%').backgroundColor(COLORS.bg)
  }

build 方法整体结构与之前页面一致，头部改为 headerForm()（表单式头部），内容区底部始终显示 flyChart() 放飞量柱状图。

---

七、头部表单与风筝飘浮动画

7.1 headerForm 整体结构

  @Builder
  headerForm() {
    Stack({ alignContent: Alignment.TopStart }) {
      Column()
        .width('100%')
        .height(168)
        .backgroundColor(COLORS.skyB)
      Text('纸鸢')
        .fontSize(60)
        .fontColor('rgba(255,255,255,0.10)')
        .fontWeight(FontWeight.Bold)
        .position({ x: 250, y: 10 })
      // ... 云朵、风筝飘浮、彩带摆动、搜索框、筛选chips、登记按钮
    }.width('100%').height(168)
  }

头部表单以深天青色 skyB 为背景色，叠加"纸鸢"水印大字，然后依次叠放云朵装饰、飘浮风筝、摆动彩带和搜索表单。

7.2 云朵装饰

      ForEach(CLOUD_IDX, (c: number) => {
        Column()
          .width(40 + c * 6)
          .height(14)
          .backgroundColor(COLORS.cloud)
          .opacity(0.5)
          .borderRadius(7)
          .position({ x: cloudX(c), y: 14 })
      }, (c: number) => 'c' + c)

三朵云朵以云朵色 cloud 渲染为宽扁的圆角矩形，透明度 0.5，宽度递增（40、46、52 像素），定位在横幅顶部 y=14 处，以 110 像素间距水平排列。云朵为深天青背景增添了一抹淡白色的天空装饰。

7.3 风筝飘浮动画

      ForEach(KITE_IDX, (k: number) => {
        Column()
          .width(18)
          .height(18)
          .backgroundColor(k % 2 === 0 ? COLORS.kite : COLORS.peach)
          .borderRadius(3)
          .rotate({ angle: 45 })
          .translate({ y: this.breath ? -8 : 8 })
          .position({ x: kiteX(k), y: kiteY(k) })
          .animation({ duration: 1500, iterations: -1, playMode: PlayMode.Alternate })
      }, (k: number) => 'k' + k)

五个风筝以 18×18 像素的小方块渲染，旋转 45 度形成菱形（模拟风筝的菱形轮廓），颜色在风筝黄 kite 和桃红色 peach 之间交替。关键动画是 .translate({ y: this.breath ? -8 : 8 })——当 breath 为 true 时向上位移 8 像素，为 false 时向下位移 8 像素，配合 1500 毫秒交替播放，形成了风筝在空中上下飘浮的缓慢动态效果。

7.4 彩带摆动

      ForEach(RIBBON_IDX, (r: number) => {
        Column()
          .width(3)
          .height(16)
          .backgroundColor(COLORS.ribbon)
          .borderRadius(2)
          .opacity(0.7)
          .rotate({ angle: this.breath ? 12 : -12 })
          .position({ x: ribbonX(r), y: 60 })
          .animation({ duration: 1500, iterations: -1, playMode: PlayMode.Alternate })
      }, (r: number) => 'rb' + r)

四条彩带以 3×16 像素的细长矩形渲染，彩带粉色 ribbon，透明度 0.7，通过 .rotate({ angle: this.breath ? 12 : -12 }) 在正负 12 度之间交替旋转，模拟风筝彩带在风中左右飘摆的动态。

7.5 搜索框、筛选 chips 与登记按钮

      Column({ space: 8 }) {
        TextInput({ placeholder: '搜索风筝/扎匠/图样' })
          .fontSize(13)
          .fontColor(COLORS.title)
          .placeholderColor(COLORS.text3)
          .backgroundColor(COLORS.paper)
          .borderRadius(20)
          .height(36)
        Row({ space: 8 }) {
          ForEach(TAG_IDX, (t: number) => {
            Text(TAG_NAME_IDX[t])
              .fontSize(11)
              .fontColor(this.selTag === t ? COLORS.deep : COLORS.sub)
              .textAlign(TextAlign.Center)
              .padding({ left: 10, right: 10, top: 5, bottom: 5 })
              .backgroundColor(this.selTag === t ? COLORS.cloud : COLORS.paper)
              .borderRadius(12)
              .onClick(() => { this.selTag = t; this.selTab = t; })
          }, (t: number) => 't' + t)
        }.width('100%')
        Row() {
          Text('已筛选 ' + this.curCount() + ' 项').fontSize(10).fontColor(COLORS.cloud).layoutWeight(1)
          Button() {
            Text('登记新品').fontSize(11).fontColor(COLORS.cloud)
          }.backgroundColor(COLORS.peach).borderRadius(12).height(28).onClick(() => { this.showAdd = true; })
        }.width('100%')
      }.width('88%').padding({ top: 14, bottom: 10 }).position({ x: 22, y: 86 })

搜索框以圆角输入框形式呈现，placeholder 为"搜索风筝/扎匠/图样"。四个筛选 chips 水平排列，选中时以云朵色 cloud 背景突出，文字颜色变为深色 deep；点击 chip 同时更新 selTag 和 selTab，实现筛选与标签页切换联动。底部一行显示"已筛选 N 项"的动态计数（通过 curCount() 方法获取当前标签页列表长度），右侧是桃红色 peach 背景的"登记新品"按钮，点击触发新增弹窗。这种表单式头部设计提供了完整的搜索-筛选-登记功能链路。

---

八、六大时间轴标签页

8.1 骨架标签页 frameTab

  @Builder
  frameTab() {
    Column({ space: 6 }) {
      Row() {
        Text('骨架谱 · 竹篾扎就').fontSize(15).fontColor(COLORS.title).fontWeight(FontWeight.Bold).layoutWeight(1)
        Text(this.frameList.length + ' 种').fontSize(11).fontColor(COLORS.sub)
      }.width('100%')
      ForEach(this.frameList, (item: FrameItem, i: number) => {
        Row({ space: 0 }) {
          Column() {
            Circle().width(i === 0 ? 12 : 8).height(i === 0 ? 12 : 8).fill(COLORS.sky).margin({ bottom: 4 })
            Column().width(2).height(48).backgroundColor(COLORS.line)
          }.width(36).alignItems(HorizontalAlign.Center)
          Row({ space: 10 }) {
            Column()
              .width(36)
              .height(36)
              .backgroundColor(i % 2 === 0 ? COLORS.sky : COLORS.peach)
              .borderRadius(18)
            Column({ space: 3 }) {
              Text(item.name).fontSize(14).fontColor(COLORS.title).fontWeight(FontWeight.Medium)
              Text(item.kind).fontSize(10).fontColor(COLORS.sub)
            }.alignItems(HorizontalAlign.Start).layoutWeight(1)
            Text(item.spars + '根').fontSize(13).fontColor(COLORS.skyB).fontWeight(FontWeight.Bold)
          }
          .layoutWeight(1)
          .padding({ left: 10, right: 12, top: 8, bottom: 8 })
          .backgroundColor(COLORS.card)
          .borderRadius(10)
          .alignItems(VerticalAlign.Center)
          .onClick(() => { this.selIdx = i; this.showEdit = true; })
        }.width('100%').alignItems(VerticalAlign.Top)
      }, (item: FrameItem) => item.name)
    }.width('100%').alignItems(HorizontalAlign.Start)
  }

骨架标签页是本页面最具特色的时间轴布局。每个条目由两部分组成：左侧是时间轴节点列（宽 36 像素），包含一个圆形节点（首条 12 像素、其余 8 像素，天青色填充）和一条竖线（宽 2、高 48 像素，分隔线色），将相邻条目纵向连接；右侧是内容卡片，包含一个圆形色标（天青/桃红交替）、名称与类型的垂直排列、以及竹篾根数"根"的强调文本。

这种时间轴布局与之前页面的 Grid 网格布局和左右分栏布局截然不同——它将列表项以纵向时间线的形式排列，每个节点就像时间轴上的一个刻度点，竖线将所有节点串联成一条完整的时间线。这种布局方式非常适合需要展示"流程顺序"或"历史记录"的场景。

8.2 纸面标签页 sailTab

纸面标签页同样采用时间轴布局，节点圆点改为柳绿色 willow，色标改为云朵色 cloud 的矩形样片（宽 36、高 28 像素），量化指标改为张数"张"，以柳绿色强调。图样标签页的节点为桃红色，色标改为三个小圆点组（桃红、天青、风筝黄三色），量化指标为色数"色"，以深桃红色 peachB 强调。扎匠标签页的节点为深天青色 skyB，色标为首字圆标（深天青背景），量化指标为年限"年"。放飞标签页的节点为风筝黄 kite，色标改为风筝黄竖线（宽 4、高 28 像素），量化指标为米数"米"，以风筝黄强调。订单标签页的节点为深桃红 peachB，色标同样为竖线，量化指标为只数"只"，点击触发删除弹窗。

六个标签页都采用了统一的时间轴布局结构——左侧节点列 + 右侧内容卡片——但通过不同的节点颜色、色标样式和量化指标实现了内容差异化。每个标签页的时间轴节点都使用了与其主题色一致的颜色，使得时间轴本身也成为了视觉差异化的一部分。

---

九、放飞量柱状图

  @Builder
  flyChart() {
    Column({ space: 8 }) {
      Row() {
        Text('半载放飞量').fontSize(13).fontColor(COLORS.sub).layoutWeight(1)
        Text('单位：只').fontSize(11).fontColor(COLORS.text3)
      }.width('100%')
      Row({ space: 6 }) {
        ForEach(MONTH_IDX, (m: number) => {
          Column() {
            Column()
              .width(20)
              .height(SALES_IDX[m])
              .backgroundColor(m % 2 === 0 ? COLORS.sky : COLORS.peach)
              .borderRadius(4)
              .margin({ bottom: 4 })
            Text(MONTH_NAME_IDX[m]).fontSize(9).fontColor(COLORS.text3)
          }.alignItems(HorizontalAlign.Center)
        }, (m: number) => 'm' + m)
      }.width('100%').alignItems(VerticalAlign.Bottom).height(110).padding({ top: 10 })
    }.width('100%').padding(12).backgroundColor(COLORS.card).borderRadius(12).margin({ top: 10 })
  }

放飞量柱状图位于内容区域底部，通过 ForEach 渲染六根柱子，分别对应正月到六月的放飞量（120、280、420、360、240、180 只）。柱子颜色在天青色 sky 和桃红色 peach 之间交替，整组以底部对齐排列，容器高度 110 像素。数据清晰地展现了风筝放飞的季节性特征：从正月的 120 只逐月攀升至三月的峰值 420 只（正值清明风筝节旺季），之后逐月回落至六月的 180 只（入夏后放飞活动减少），形成一条先升后降的抛物线趋势。

---

十、模态弹窗系统与辅助方法

10.1 通用遮罩层与三种弹窗

遮罩层使用 rgba(42,74,107,0.5) 半透明深天青色，与整体春日蓝色主题一致。新增弹窗确认按钮使用深天青色 skyB 背景，点击后向 frameList push 新条目。编辑弹窗保存按钮使用天青色 sky 背景，通过 curName() 和 curKind() 预填数据。删除弹窗删除按钮使用深桃红色 peachB 背景，点击后调用 delCurrent() 执行 splice 删除。

10.2 curCount、curName、curKind 与 delCurrent

  curCount(): number {
    if (this.selTab === 0) { return this.frameList.length; }
    if (this.selTab === 1) { return this.sailList.length; }
    if (this.selTab === 2) { return this.motifList.length; }
    if (this.selTab === 3) { return this.makerList.length; }
    if (this.selTab === 4) { return this.flyList.length; }
    return this.orderList.length;
  }

curCount 是本页面新增的辅助方法，返回当前标签页对应列表的长度，用于头部表单"已筛选 N 项"的动态计数显示。当用户在不同标签页之间切换时，该数字会实时更新，提供了数据规模的一目了然概览。

---

十一、底部标签栏

底部标签栏结构与之前页面一致，选中标签图标颜色为天青色 tabOn，背景为云朵色 cloud，标签文字颜色为深天青色 skyB。第二行最后一个标签（订单）点击同时弹出新增弹窗。

---

十二、系统架构流程图

┌─────────────────────────────────────────────────────────────┐
│                    Page750 入口组件                          │
│                   @Entry @Component                         │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │              状态管理层 (@State)                     │   │
│  │  selTab · selTag · breath · showAdd                  │   │
│  │  showEdit · showDel · selIdx                          │   │
│  │  frameList · sailList · motifList · makerList         │   │
│  │  flyList · orderList                                  │   │
│  └──────────────┬──────────────────────────────────────┘   │
│                 │                                           │
│       ┌─────────┴──────────┐                               │
│       │  aboutToAppear()    │                               │
│       │  setInterval 1500ms │                               │
│       │  翻转 breath 驱动动画│                               │
│       └─────────┬──────────┘                               │
│                 ▼                                           │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                  build() 渲染入口                      │   │
│  │  ┌──────────┐  ┌───────────┐  ┌──────────┐         │   │
│  │  │headerForm│→ │ Scroll    │→ │  tabBar  │          │   │
│  │  │ 表单头部  │  │ 时间轴内容  │  │ 底部标签栏│         │   │
│  │  └──────────┘  └─────┬─────┘  └──────────┘         │   │
│  │                      │                                │   │
│  │    ┌────────┬───────┼───────┬────────┐               │   │
│  │    ▼        ▼       ▼       ▼        ▼               │   │
│  │ frameTab sailTab motifTab makerTab flyTab            │   │
│  │    │        │       │       │        │               │   │
│  │    └────────┴───────┴───────┴────────┘               │   │
│  │                   │                                   │   │
│  │    统一时间轴布局：节点圆点 + 竖线 + 卡片             │   │
│  │                   │                                   │   │
│  │                   ▼                                   │   │
│  │            ┌────────────┐                             │   │
│  │            │ flyChart   │  放飞量柱状图（始终显示）    │   │
│  │            └────────────┘                             │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │              模态弹窗层 (条件渲染)                     │   │
│  │  ┌──────────┐ ┌──────────┐ ┌──────────┐             │   │
│  │  │ addModal │ │ editModal│ │ delModal │             │   │
│  │  └──────────┘ └──────────┘ └──────────┘             │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

---

十三、动画驱动流程图

┌──────────────────────────────────────────┐
│      aboutToAppear 生命周期触发           │
└──────────────────┬───────────────────────┘
                   │
                   ▼
    ┌──────────────────────────────┐
    │  setInterval(() => {          │
    │    this.breath = !this.breath │
    │  }, 1500)                    │
    └──────────────┬──────────────┘
                   │
         每 1500ms 翻转一次（系列最长周期）
                   │
     ┌─────────┬───┴──────┐
     ▼         ▼          ▼
┌────────┐┌─────────┐┌──────────┐
│风筝飘浮 ││彩带摆动  ││云朵装饰  │
│translate││ rotate  ││ 静态    │
│ -8↔+8px ││-12↔+12° ││         │
└────────┘└─────────┘└──────────┘
     │         │
     └────┬────┘
          ▼
    .animation({
      duration: 1500,
      iterations: -1,
      playMode: Alternate
    })
          │
          ▼
    头部横幅: 风筝上下飘浮 +
    彩带左右摆动 + 云朵静态装饰
    = 春日晴空纸鸢凌空场景

---

十四、六大标签页时间轴对比

标签页	节点圆点色	色标元素	量化指标	强调色	点击行为
骨架	天青 sky	圆标(天青/桃红交替)	根数(根)	深天青 skyB	编辑弹窗
纸面	柳绿 willow	矩形样片(云朵色)	张数(张)	柳绿 willow	编辑弹窗
图样	桃红 peach	三色圆点组	色数(色)	深桃红 peachB	编辑弹窗
扎匠	深天青 skyB	首字圆标(深天青)	年限(年)	深天青 skyB	编辑弹窗
放飞	风筝黄 kite	竖线(风筝黄)	米数(米)	风筝黄 kite	编辑弹窗
订单	深桃红 peachB	竖线(深桃红)	只数(只)	深桃红 peachB	删除弹窗

---

十五、色彩语义对照表

色彩字段	十六进制值	语义用途	使用场景
bg	#EEF4F8	极淡天青灰	页面整体背景
card	#FFFFFF	纯白卡片	卡片、标签栏背景
title	#2A4A6B	深天青蓝	标题文字
sky	#5BA3D0	天青色	骨架节点、圆标、标签选中
skyB	#3B82B5	深天青	强调数值、圆标背景
peach	#E86A7A	桃红色	圆标、柱状图交替色
peachB	#D04A5C	深桃红	订单数值、删除按钮
willow	#7AB56A	柳绿色	纸面节点、纸面数值
cloud	#DCEAF5	云朵色	云朵装饰、选中背景
kite	#FFB347	风筝黄	放飞节点、放飞数值
ribbon	#FF8FA3	彩带粉	彩带装饰

---

十六、总结与展望

时间轴布局创新总结

风筝坊管理页面是整个传统手工艺系列中唯一采用时间轴纵向列表布局的页面，这一布局选择具有深意——风筝放飞本身就是一种时间线上的活动，从扎骨到放飞每一步都有先后顺序，时间轴布局天然契合这一业务语义。每个列表条目由"节点圆点 + 竖线 + 卡片"三段式构成，节点圆点的颜色随标签页主题色变化，竖线将所有节点串联成一条完整的视觉时间线，使得列表不再是孤立的卡片堆叠，而是一条有始有终的叙事线。六个标签页统一采用时间轴布局，但通过不同的节点颜色和色标样式实现了视觉差异化，在统一性与差异性之间取得了精妙平衡。

表单式头部设计总结

本页面的头部采用了表单式设计——搜索输入框、筛选 chips、动态计数与登记按钮四位一体，构成了完整的"搜索-筛选-统计-新增"功能链路。筛选 chips 与底部标签栏通过 selTag 和 selTab 的双向联动实现了筛选与内容切换的一体化，curCount() 方法实时显示当前筛选结果数量，为用户提供了即时的数据规模反馈。这种表单式头部比之前页面的统计卡片或导航条提供了更强的功能性，适合数据量较大、需要频繁筛选的场景。

动画与色彩总结

动画方面，1500 毫秒的周期是整个系列页面中最长的，使得风筝飘浮（±8 像素位移）和彩带摆动（±12 度旋转）的节奏更悠闲、更舒缓，完美契合春日放风筝的慵懒氛围。色彩方面，天青桃红双主色调的设计在系列中独树一帜——天青色代表晴空，桃红色代表春花，两者在骨架圆标中以交替方式出现，在柱状图中也以交替方式着色，形成了一种明快活泼的视觉节奏。放飞量柱状图的数据序列（120→280→420→360→240→180）清晰地展现了风筝放飞的季节性特征，三月峰值 420 只对应清明风筝节，入夏后回落至 180 只，数据与业务语义高度吻合。

未来展望

展望未来，这一页面架构可以进一步优化：一是为时间轴布局增加时间标签（如"第一步"、“第二步”），使流程顺序更明确；二是为搜索框实现真正的模糊搜索逻辑，而非仅作 UI 展示；三是为风筝飘浮动画增加水平方向的随机位移，使每个风筝的运动轨迹更自然；四是将柱状图升级为带趋势线的折线图，更直观地展示季节性变化趋势。这些优化方向可以在保持时间轴布局优势的基础上，进一步提升页面的功能完整性与用户体验丰富度。