技术背景

HarmonyOS 的声明式 UI 框架是华为面向全场景智慧生活打造的新一代界面开发体系，其核心思想是通过描述界面的「应该是什么样子」而非「如何一步步构建」来组织代码。与传统命令式 UI 不同，声明式范式让开发者只需声明界面的最终状态，框架自动负责从当前状态到目标状态的差异计算与渲染更新。这一设计哲学源自现代前端框架（如 Flutter、SwiftUI）的成功经验，同时融合了 HarmonyOS 分布式软总线的能力，使得同一套代码可以在手机、平板、智慧屏、车机等多种设备上自适应运行。在 ArkUI 框架中，组件以 struct 形式定义，通过链式调用配置属性与事件，形成高度可读的 UI 描述树。

ArkTS 是 HarmonyOS 应用开发的主力语言，它在 TypeScript 的基础上进行了深度定制与增强。ArkTS 保留了 TypeScript 的类型系统优势，同时引入了装饰器机制（如 @Entry、@Component、@State、@Builder、@Observed 等）来支撑声明式 UI 的各种能力。与纯 TypeScript 相比，ArkTS 在编译期进行了更严格的类型检查和代码优化，去除了动态特性带来的运行时开销，从而在保证开发效率的同时兼顾了执行性能。ArkTS 的类型系统支持接口（interface）、泛型、联合类型等高级特性，但在 UI 组件层面强制使用 struct 而非 class，这与 Flutter 中 Widget 的设计思路有异曲同工之妙。

HarmonyOS 生态的跨设备能力是其最显著的差异化优势之一。通过分布式软总线、分布式数据管理和分布式任务调度等底层能力，HarmonyOS 应用可以实现无缝的跨设备体验。在 UI 层面，ArkUI 框架提供了自适应布局（如 layoutWeight、百分比宽度、constraintSize 等）和响应式断点机制，让同一套界面代码能在不同屏幕尺寸上优雅适配。对于运动户外类应用而言，用户可能在手机上查看浪况预报、在智能手表上获取实时潮汐提醒、在平板上浏览冲浪课程视频，HarmonyOS 的分布式架构为这种多设备协同场景提供了天然支撑。

@Observed 装饰器是 ArkUI 状态管理体系中的关键一环，它用于标记可观察的数据模型类。当一个类被 @Observed 装饰后，该类实例的属性变化可以被框架追踪，从而驱动依赖这些数据的 UI 组件自动更新。与之配合的 @State 装饰器用于组件内部状态，@Prop 用于父子组件间单向传递，@Link 用于双向绑定，@ObjectLink 则用于嵌套可观察对象的关联。这套分层状态管理体系使得数据流清晰可追溯：从静态数据源到组件状态，再到视图渲染，每一层的变化都能被精确追踪和高效更新。在本项目中，PostItem、BoardItem、SpotItem、GearItem 四个数据模型均使用了 @Observed 装饰，为动态列表的增删改操作提供了响应式基础。

冲浪运动手作社群这一行业赛道具有鲜明的技术特点与挑战。首先，冲浪是一项高度依赖自然条件的运动，浪高、风向、潮汐等实时数据的可视化呈现需要精细的图表能力与动态更新机制。其次，冲浪板手作工坊涉及复杂的产品状态管理——从「制作中」到「待上漆」到「评审」再到「出品」，每个状态对应不同的视觉标识和操作权限，这对状态色映射和条件渲染提出了较高要求。再者，浪友圈社区功能需要支持用户动态发布、互动展示等社交化场景，涉及列表的动态增删与数据绑定。最后，作为一款面向户外运动爱好者的应用，视觉风格上需要营造出海洋、波浪、泡沫等沉浸式氛围，这要求在保证性能的前提下实现自定义动画特效层。

项目概览

浪语·冲浪板手作工坊是一款面向冲浪运动爱好者与手作板型匠人的综合社区应用。从功能架构上看，应用采用「四主 Tab + 七内容 Tab」的双层导航结构：底部导航栏提供「首页」「板坊」「课堂」「我的」四个主要功能入口，其中「首页」Tab 内部又嵌套了「精选」「板型工坊」「浪点预报」「冲浪课堂」「手作工坊」「浪友圈」「配件库」七个内容子 Tab，覆盖了从浪况预报到板型展示、从课程学习到社区互动的完整使用链路。这种多层导航设计在信息密度与操作便捷性之间取得了良好的平衡——核心功能一步可达，细分场景通过子 Tab 平滑切换。

应用的视觉设计围绕海洋主题展开，构建了一套完整的色彩体系。主色调采用海洋蓝（#2E8FD0），辅以浅蓝（#6FB4E0）和深蓝（#1B5F8E）形成层次；强调色选用温暖的琥珀橙（#FFB25C），在冷色调中注入活力；背景色为极淡的天蓝（#EAF4F8），营造清新的海洋氛围。此外还定义了泡沫色（#CFE9F5）、成功色（#4FBF85）、警告色（#E8A84F）、危险色（#E8605C）等语义色，分别用于不同的业务状态标识。这套色彩体系通过一个 ColorPalette 接口和 COLORS 常量集中管理，确保了全应用视觉风格的一致性。

在交互特效方面，应用实现了一套「海浪波纹 + 泡沫上浮」的自定义动画特效层。该特效层位于界面最底层，通过 setInterval 定时器每 90 毫秒驱动一次状态更新（tick 递增、glow 切换），再由纯函数计算波浪和泡沫的位置、高度、透明度等参数，最终通过 ForEach 渲染多条白色波纹条和淡蓝色泡沫点。特效层设置了 hitTestBehavior(HitTestMode.None)，确保不拦截用户的点击事件，从而在视觉装饰与交互响应之间实现了完美隔离。这种将特效层与业务层分离的架构设计，既保证了视觉沉浸感，又不影响功能操作的流畅性。

弹窗体系是应用的另一大交互亮点。应用定义了三类弹框：新增弹框（发布浪语）、编辑弹框（编辑板型）和删除确认弹框（下架板型 / 退课）。每个弹框都由遮罩层（modalOverlay）和内容主体（addModalBody / editModalBody / delModalBody）两部分组成，通过独立的布尔状态变量（addOpen、editOpen、delOpen）控制显隐。弹框内包含 TextInput、TextArea 等表单控件，支持双向数据绑定与实时校验。遮罩层点击可关闭弹框，主体内提供「取消」与「确认」操作按钮，整体交互逻辑清晰且符合用户直觉。

从整体架构来看，应用采用了「数据模型层 + 静态数据层 + 纯函数层 + 组件层」的四层分离架构。数据模型层使用 @Observed 装饰器定义可观察对象；静态数据层集中管理各类预置数据集；纯函数层封装图表高度计算、动画坐标计算、状态色映射等无副作用逻辑；组件层通过 @Builder 构建器拆分出头部、导航、各内容页、弹窗、特效等独立模块，最终在 build 方法中通过 Stack 层叠组合。这种架构使得各层职责分明、耦合度低，便于后续扩展新的内容页或业务功能。

逐段代码分析

一、文件头部注释与场景声明

// ============ 浪语·冲浪板手作工坊（882）============
// 场景：冲浪板手作 / 浪况预报 / 冲浪课堂 / 浪友圈
// 底部4主tab（首页/板坊/课堂/我的）+ 首页7内容tab
// 特效：海浪波纹 + 泡沫上浮（特效层位于底层，不遮挡点击）
// 弹框：新增(发浪语) / 编辑(编辑板型) / 删除(下架板型·退课）

文件头部注释以醒目的分隔线开头，清晰标注了应用的名称——浪语·冲浪板手作工坊，以及内部编号。这种命名规范在大型项目中尤为重要，它帮助开发者在多文件、多模块的项目中快速定位和识别代码归属。注释中采用了「应用名 + 编号」的复合命名方式，既保留了人类可读的业务语义，又提供了机器可索引的唯一标识。

注释的第二行枚举了应用的四大业务场景：冲浪板手作、浪况预报、冲浪课堂和浪友圈。这四个场景对应了应用的核心功能模块，从手作工坊的生产管理到浪况的实时预报，从冲浪教学到社区互动，构建了一个完整的冲浪运动生态闭环。这种在文件头部明确业务场景的写法，有助于后续维护者快速理解应用的全貌。

第三行和第四行分别说明了导航结构和特效设计。导航采用「四主 Tab + 七内容 Tab」的双层架构，特效层位于底层且不遮挡点击，这些关键架构决策在注释中提前声明，为代码阅读者建立了心智模型。弹框类型也在注释中列出，包括新增、编辑、删除三类操作，使读者对应用的交互模式有了预期。总体而言，这段注释起到了「架构契约」的作用，是代码自文档化的良好实践。

二、ColorPalette 接口与 COLORS 颜色体系

interface ColorPalette {
  primary: string;
  primaryLight: string;
  primaryDark: string;
  accent: string;
  accentLight: string;
  bg: string;
  cardBg: string;
  textPrimary: string;
  textSecondary: string;
  textHint: string;
  border: string;
  success: string;
  warning: string;
  danger: string;
  white: string;
  foam: string;
}

const COLORS: ColorPalette = {
  primary: '#2E8FD0',
  primaryLight: '#6FB4E0',
  primaryDark: '#1B5F8E',
  accent: '#FFB25C',
  accentLight: '#FFF3E4',
  bg: '#EAF4F8',
  cardBg: '#FFFFFF',
  textPrimary: '#1E3A4E',
  textSecondary: '#5A7E93',
  textHint: '#9DBBCB',
  border: '#D6E8F2',
  success: '#4FBF85',
  warning: '#E8A84F',
  danger: '#E8605C',
  white: '#FFFFFF',
  foam: '#CFE9F5'
};

ColorPalette 接口定义了应用完整的颜色体系契约，包含了 16 个语义化的颜色字段。这套颜色体系覆盖了主色（primary 及其明暗变体）、强调色（accent 及其浅色变体）、背景色（bg、cardBg）、文本色（三级灰度：textPrimary、textSecondary、textHint）、边框色（border）、语义色（success、warning、danger）以及特殊色（white、foam）。通过接口先行定义类型，再以常量实例化，这种「类型先行」的模式确保了颜色配置的完整性和类型安全性。

主色调采用 #2E8FD0——一种介于天蓝与海蓝之间的色调，精准呼应了海洋主题。primaryLight（#6FB4E0）和 primaryDark（#1B5F8E）分别提供了浅色和深色变体，用于渐变、悬浮态、按压态等视觉层次区分。强调色 accent 选用 #FFB25C 的琥珀橙，在冷色主导的蓝色调中形成温暖对比，常用于按钮高亮、链接文字、标签强调等场景。accentLight（#FFF3E4）则是琥珀橙的极浅变体，用于背景烘托。

文本色系采用三级灰度设计：textPrimary（#1E3A4E）是接近深蓝灰的主文本色，textSecondary（#5A7E93）用于次要信息，textHint（#9DBBCB）用于占位提示和弱化信息。值得注意的是，这三色都带有蓝灰色调，而非纯灰，这与整体的海洋主题保持了一致性。foam（#CFE9F5）是独特的泡沫色，专门用于特效层中泡沫粒子的渲染，这个色彩的命名直接映射了业务语义。

这套集中式颜色管理方案的优势在于：所有颜色值在单一定义点维护，修改主题色只需调整一处；类型检查确保不会使用未定义的颜色字段；语义化命名让代码可读性大幅提升。当后续需要支持暗色模式或主题切换时，只需替换 COLORS 常量的值即可，无需改动任何组件代码，体现了良好的开闭原则。

三、数据模型类 — PostItem 与 BoardItem

@Observed
export class PostItem {
  id: number = 0
  nick: string = ''
  avatar: string = ''
  text: string = ''
  time: string = ''
  likes: number = 0
  constructor(id: number, nick: string, avatar: string, text: string, time: string, likes: number) {
    this.id = id; this.nick = nick; this.avatar = avatar; this.text = text
    this.time = time; this.likes = likes
  }
}

@Observed
export class BoardItem {
  id: number = 0
  name: string = ''
  length: string = ''
  volume: string = ''
  status: string = ''
  tag: string = ''
  constructor(id: number, name: string, length: string, volume: string, status: string, tag: string) {
    this.id = id; this.name = name; this.length = length
    this.status = status; this.tag = tag
  }
}

PostItem 是浪友动态的数据模型，使用 @Observed 装饰器标记为可观察类。该类包含六个字段：id（唯一标识）、nick（昵称）、avatar（头像，使用 Emoji 字符）、text（动态正文）、time（发布时间描述）和 likes（点赞数）。每个字段都有默认初始值，这是 ArkTS 的要求——可观察类的属性必须提供初始值，以便框架在实例化时建立依赖追踪。构造函数采用紧凑的单行赋值风格，将六个参数逐一映射到实例属性。

@Observed 装饰器的工作原理是在编译期对类进行增强，为每个属性生成 getter/setter 拦截器。当属性被赋新值时，setter 会通知框架触发依赖该属性的 UI 组件重新渲染。这种机制使得 PostItem 的实例在被加入 @State 装饰的 postList 数组后，任何属性变化都能被自动捕获。在应用的 doAdd 方法中，新创建的 PostItem 被 unshift 到列表头部，框架检测到数组变化后立即更新浪友动态列表的渲染。

BoardItem 是板型数据模型，同样使用 @Observed 装饰。它包含 id（标识）、name（板型名称，如「碧波长板」）、length（板长，如 9’2"）、volume（体积，如 68L）、status（制作状态：制作中/出品/待上漆/评审）和 tag（风格标签：巡航/竞技/鱼形等）。status 字段是业务核心，它驱动了状态色映射函数 boardColor 的逻辑，并决定了列表项左侧色条的颜色——出品显示绿色，制作中显示橙色，其他显示红色。

BoardItem 在编辑场景中扮演关键角色。openEdit 方法接收一个索引参数，从 boardList 中取出对应项，将其 name、length、volume 分别赋值给编辑弹窗的状态变量 editName、editStyle、editNote。用户在弹窗中修改后，doEdit 方法通过 splice 操作用新构造的 BoardItem 替换原位置数据，实现就地更新。这种「取值-编辑-替换」的流程简洁而可靠，@Observed 装饰确保了数据变化后列表视图的即时刷新。

四、数据模型类 — SpotItem 与 GearItem

@Observed
export class SpotItem {
  id: number = 0
  name: string = ''
  wave: string = ''
  wind: string = ''
  level: string = ''
  constructor(id: number, name: string, wave: string, wind: string, level: string) {
    this.id = id; this.name = name; this.wave = wave
    this.wind = wind; this.level = level
  }
}

@Observed
export class GearItem {
  id: number = 0
  name: string = ''
  desc: string = ''
  icon: string = ''
  constructor(id: number, name: string, desc: string, icon: string) {
    this.id = id; this.name = name; this.desc = desc; this.icon = icon
  }
}

SpotItem 是浪点预报的数据模型，承载着冲浪运动最核心的实时信息。其字段包括 id（标识）、name（浪点名称，如「白沙滩」「礁石湾」）、wave（浪高描述，如「1.2m」）、wind（风向风力描述，如「东风 3 级」）和 level（难度等级：新手/入门/中级/进阶/高手）。其中 level 字段是安全决策的关键——它通过 spotColor 函数映射为语义色，帮助用户快速判断浪点是否适合自身水平。新手和入门显示绿色，中级和进阶显示橙色，高手显示红色，形成了直观的安全梯度提示。

GearItem 是配件库的数据模型，结构较为简洁：id（标识）、name（配件名称）、desc（规格描述）和 icon（Emoji 图标）。冲浪板手作涉及的配件种类繁多，从环氧树脂、玻璃纤维布等原材料，到板蜡、尾鳍套装、脚绳等成品配件，再到砂纸、切割刀、干湿磨机等工具设备，每类配件都有独特的规格参数。desc 字段以紧凑的格式承载这些规格信息，如「双组份 · 快干」「6oz · 平纹」「240-800 目」等，使列表展示信息密度高且一目了然。

这两个模型虽然结构相对简单，但都使用了 @Observed 装饰器。在当前实现中，SpotItem 和 GearItem 的数据是静态的（SPOT_LIST 和 GEAR_LIST 为常量），但 @Observed 装饰为未来扩展预留了空间——当后续接入实时浪况 API 或配件库存管理系统时，数据的变化可以无缝驱动 UI 更新，无需修改模型层代码。这种「面向变化设计」的理念是声明式 UI 框架的核心优势之一。

五、图表与课程接口定义

interface WaveChartItem {
  label: string;
  value: number;
}

interface StyleChartItem {
  label: string;
  value: number;
  color: string;
}

interface CourseItem {
  title: string;
  week: string;
  progress: number;
  color: string;
}

WaveChartItem 接口定义了一周浪高柱状图的数据结构，包含 label（星期标签）和 value（浪高数值，单位为米）。这个接口是纯数据声明，不带 @Observed 装饰，因为图表数据在当前版本是静态的，不需要响应式更新。value 字段为 number 类型，使得它可以参与数学运算——barH 函数正是基于 value 和最大值 max 计算柱状高度，styleColor 函数则根据 value 的大小区间返回不同颜色。

StyleChartItem 接口在 WaveChartItem 的基础上增加了 color 字段，用于板型占比横条图。每个板型（长板、短板、鱼板、枪板、复古）都有独立的颜色和百分比数值，color 字段使得横条的填充色可以与图例精确对应。这种将颜色内置于数据项的方式，让数据驱动视觉的链路更加直接——无需在渲染时根据条件判断颜色，数据本身就携带了视觉指令。

CourseItem 接口定义了冲浪课程的数据结构，包含 title（课程标题）、week（周期描述）、progress（进度百分比）和 color（进度条颜色）。与 StyleChartItem 类似，color 字段将视觉属性与数据绑定，每门课程拥有独特的进度条颜色，使课程列表的视觉呈现丰富而不杂乱。progress 字段为 0-100 的数值，在渲染时通过模板字符串 `${it.progress}%` 转换为 CSS 百分比宽度，驱动进度条的视觉长度。这三个接口虽然结构简洁，但各自精准地服务于特定的图表或列表场景，体现了「接口即数据契约」的设计思想。

六、顶层静态数据集 — POST_LIST 与 BOARD_LIST

const POST_LIST: PostItem[] = [
  new PostItem(1, '浪尖', '🌊', '今早 6 点第一道浪，退潮期浪高 1.2m，起乘那一下太舒服了。', '15分钟前', 88),
  new PostItem(2, '板工', '🛠️', '手工打磨的短板终于出窑（抛光），红木纹路配琥珀环氧。', '40分钟前', 66),
  new PostItem(3, '赶浪人', '🏄', '周末连续追了 4 个浪点，最远开出去 120km，值了！', '1小时前', 59),
  new PostItem(4, '白沫', '🫧', '新手班今日 6 人全部成功站板，教练嗓子已哑。', '2小时前', 74),
  new PostItem(5, '潮汐', '🌙', '大潮日浪涌变大，岸边岩石区谨慎下水，安全第一。', '3小时前', 47),
  new PostItem(6, '长板客', '🏝️', '长板巡航太治愈，配一杯冰椰，海边发呆一下午。', '5小时前', 52),
  new PostItem(7, '鱼鳍', '🔱', '换了新尾鳍（模板 C），切浪转向顺滑度提升明显。', '6小时前', 33),
  new PostItem(8, '岸边人', '📷', '傍晚黄金光线下冲浪剪影合集更新，免费下载原图。', '昨天', 68)
];

const BOARD_LIST: BoardItem[] = [
  new BoardItem(1, '碧波长板', '9\'2"', '68L', '制作中', '巡航'),
  new BoardItem(2, '裂浪短板', '6\'0"', '28L', '出品', '竞技'),
  new BoardItem(3, '晨雾鱼板', '5\'8"', '32L', '出品', '鱼形'),
  new BoardItem(4, '远洋枪板', '7\'6"', '45L', '制作中', '追浪'),
  new BoardItem(5, '泡沫入门', '8\'0"', '75L', '出品', '教学'),
  new BoardItem(6, '双头冲浪', '6\'6"', '36L', '待上漆', '全能'),
  new BoardItem(7, '尾鳍定制', '6\'2"', '30L', '出品', '定制'),
  new BoardItem(8, '复古单鳍', '9\'0"', '58L', '评审', '复古')
];

POST_LIST 是浪友动态的预置数据集，包含 8 条精选动态。每条动态都是 PostItem 的实例化对象，通过构造函数传入完整参数。数据内容精心设计，覆盖了冲浪运动的多个维度：有分享冲浪体验的（浪尖的「第一道浪」）、有展示手作工艺的（板工的「短板出窑」）、有教学成果的（白沫的「新手站板」）、有安全提醒的（潮汐的「大潮日浪涌」），还有器材评测和摄影分享等。这种多元化的内容编排使应用在展示阶段就能呈现出真实社区的氛围感。

BOARD_LIST 是板型工坊的核心数据集，收录了 8 款不同类型的冲浪板。从 9’2" 的碧波长板到 6’0" 的裂浪短板，从 5’8" 的晨雾鱼板到 7’6" 的远洋枪板，数据涵盖了冲浪板的主要类型分类。每块板的状态分布也经过设计——「制作中」和「出品」各占多块，「待上漆」「评审」等中间状态也有覆盖，使得状态色映射函数的每个分支都能被展示到。板长的写法采用了英制单位（英尺英寸），如 9\'2" 表示 9 英尺 2 英寸，这是冲浪行业的国际通用标准。

这两个数据集以 const 常量形式定义在模块顶层，然后在 PageWave 组件中通过 @State postList = POST_LIST 和 @State boardList = BOARD_LIST 初始化为组件状态。这里有一个微妙的细节：const 声明的是引用不可变，但数组内容仍可修改。当 doAdd 方法调用 postList.unshift 或 doDel 方法调用 splice 时，实际上是修改了 @State 变量引用的数组，ArkUI 框架能够检测到这种变化并触发重新渲染。这种「常量数据源 + 状态变量引用」的模式在原型开发阶段非常高效。

七、浪点、配件与图表静态数据

const SPOT_LIST: SpotItem[] = [
  new SpotItem(1, '白沙滩', '1.2m', '东风 3 级', '新手'),
  new SpotItem(2, '礁石湾', '1.8m', '南风 4 级', '进阶'),
  new SpotItem(3, '灯塔浪', '2.4m', '东北风 5 级', '高手'),
  new SpotItem(4, '港湾口', '1.5m', '东南风 3 级', '中级'),
  new SpotItem(5, '长滩', '1.0m', '东风 2 级', '入门'),
  new SpotItem(6, '断浪角', '2.0m', '西风 4 级', '进阶')
];

const GEAR_LIST: GearItem[] = [
  new GearItem(1, '环氧树脂', '双组份 · 快干', '🧪'),
  new GearItem(2, '玻璃纤维布', '6oz · 平纹', '🕸️'),
  new GearItem(3, '板蜡', '热带 · 常温', '🕯️'),
  new GearItem(4, '尾鳍套装', 'FCS 标准', '🔱'),
  new GearItem(5, '脚绳', '7mm · 9ft', '🪢'),
  new GearItem(6, '砂纸', '240-800 目', '🧽'),
  new GearItem(7, '切割刀', '弧形刀片', '🔪'),
  new GearItem(8, '干湿磨机', '调速 3000rpm', '⚙️')
];

SPOT_LIST 包含 6 个浪点的预报数据，浪高从 1.0m 到 2.4m 梯度分布，难度等级从「新手」到「高手」全覆盖。这种数据设计使得 spotColor 函数的三个分支（绿/橙/红）都能在界面上得到展示。浪点名称如「白沙滩」「礁石湾」「灯塔浪」「断浪角」等都极具画面感，配合浪高和风向数据，用户能快速判断哪个浪点适合今日出行。风向描述采用「方向 + 等级」的标准气象格式，如「东北风 5 级」，既专业又直观。

GEAR_LIST 收录了 8 类冲浪板手作配件和工具，从原材料（环氧树脂、玻璃纤维布）到成品配件（板蜡、尾鳍套装、脚绳），再到加工工具（砂纸、切割刀、干湿磨机）。每类配件都配有 Emoji 图标作为视觉标识——这种使用 Unicode Emoji 替代图标字体或图片资源的做法，既减小了应用体积，又保证了跨平台一致性。desc 字段以「核心参数 · 附加信息」的格式承载规格细节，信息密度高且可读性强。

这两个数据集与 POST_LIST、BOARD_LIST 一起构成了应用的完整静态数据层。它们在模块加载时即完成初始化，作为组件状态的初始值注入。这种集中式数据管理的好处在于：当需要接入真实后端 API 时，只需将 const 数组替换为异步请求的结果，组件层的渲染逻辑无需任何改动。数据与视图的解耦，使得从原型到产品的迁移成本最小化。

八、图表数据与导航配置

const WAVE_CHART: WaveChartItem[] = [
  { label: '周一', value: 0.8 },
  { label: '周二', value: 1.1 },
  { label: '周三', value: 0.9 },
  { label: '周四', value: 1.4 },
  { label: '周五', value: 1.8 },
  { label: '周六', value: 2.2 },
  { label: '周日', value: 1.6 }
];

const STYLE_CHART: StyleChartItem[] = [
  { label: '长板', value: 78, color: '#2E8FD0' },
  { label: '短板', value: 66, color: '#FFB25C' },
  { label: '鱼板', value: 52, color: '#4FBF85' },
  { label: '枪板', value: 41, color: '#E8605C' },
  { label: '复古', value: 28, color: '#9DBBCB' }
];

const COURSE_LIST: CourseItem[] = [
  { title: '冲浪入门课', week: '第 1-3 周', progress: 92, color: '#2E8FD0' },
  { title: '站板与划水', week: '第 2-4 周', progress: 71, color: '#FFB25C' },
  { title: '追浪与转向', week: '第 4-6 周', progress: 45, color: '#4FBF85' },
  { title: '板体打磨工艺', week: '第 5-8 周', progress: 26, color: '#E8605C' },
  { title: '环氧上漆实操', week: '第 7-9 周', progress: 10, color: '#9DBBCB' }
];

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

const NAV_LIST: NavItem[] = [
  { icon: '🌊', label: '首页' },
  { icon: '🛠️', label: '板坊' },
  { icon: '📚', label: '课堂' },
  { icon: '👤', label: '我的' }
];

const SUB_NAV_LIST: string[] = ['精选', '板型工坊', '浪点预报', '冲浪课堂', '手作工坊', '浪友圈', '配件库'];

WAVE_CHART 定义了一周浪高预报的图表数据，7 个数据点对应周一到周日。浪高值从周一的 0.8m 逐步攀升至周六的 2.2m（峰值），周日回落至 1.6m。这一数据趋势暗示了周末是冲浪的最佳时机，与应用中「周末最佳浪高 2.2m」的标注文字相呼应。value 字段为 number 类型，在 barH 函数中参与计算：Math.round(120 * v / max)，其中 max 取 2.4，将浪高值映射为 0-120 像素的柱状高度。

STYLE_CHART 定义了板型占比横条图的数据，5 种板型各占不同比例。长板占比最高（78%），短板次之（66%），鱼板和枪板居中，复古板最低（28%）。每个数据项的 color 字段直接引用了 COLORS 体系中的色值，使得横条颜色与整体视觉风格一致。这种将颜色信息内置于数据项的设计，让 ForEach 渲染时可以直接使用 it.color 而无需额外判断，简化了模板代码。

COURSE_LIST 定义了 5 门冲浪课程，每门课程都有周次安排和进度百分比。课程从「冲浪入门课」（92% 进度）到「环氧上漆实操」（10% 进度），覆盖了从基础到进阶的完整学习路径。进度值通过模板字符串转换为进度条宽度，颜色字段使每门课程的进度条色彩各异，形成视觉层次。NavItem 接口和 NAV_LIST 定义了底部导航栏的四个入口，SUB_NAV_LIST 则定义了首页内的七个内容子 Tab。这两组导航常量通过 ForEach 循环渲染为可点击的导航项，是应用导航体系的数据基础。

九、纯函数 — 图表高度与颜色映射

function barH(v: number, max: number): number {
  return Math.round(120 * v / max);
}

function styleColor(v: number): string {
  if (v > 70) {
    return '#2E8FD0';
  } else if (v > 50) {
    return '#FFB25C';
  }
  return '#4FBF85';
}

barH 是一个纯函数，负责将浪高数值映射为柱状图的高度像素值。它接受两个参数：v（当前浪高值）和 max（参考最大值），通过 120 * v / max 的线性比例计算后取整。以 WAVE_CHART 数据为例，最大值 2.2m 对应的高度为 Math.round(120 * 2.2 / 2.4) = 110px，最小值 0.8m 对应 Math.round(120 * 0.8 / 2.4) = 40px。这种线性映射确保了所有柱状高度都在合理范围内，且高度差异直观反映了浪高差异。Math.round 的使用避免了亚像素渲染导致的边缘模糊。

styleColor 函数根据数值大小返回对应的颜色值，采用三段式阈值判断：大于 70 返回主色蓝（#2E8FD0），大于 50 返回强调色橙（#FFB25C），其余返回成功色绿（#4FBF85）。在浪高柱状图中，这意味着浪高较高时柱体呈蓝色（安全且理想），中等浪高呈橙色（注意），较低浪高呈绿色（温和适合新手）。这种基于阈值的颜色映射虽然简单，但有效地传达了业务语义——颜色不仅是装饰，更是信息编码。

值得注意的是，这两个函数都是无副作用的纯函数，相同的输入永远产生相同的输出，不依赖也不修改任何外部状态。将这类计算逻辑从组件中抽离为独立函数，有三大好处：一是提高了代码的可测试性——纯函数可以脱离 UI 环境独立测试；二是减少了组件方法的体积，使 @Builder 中的代码更专注于布局描述；三是促进了复用——如果未来其他页面也需要柱状高度计算或阈值配色，可以直接调用这些函数而无需重复逻辑。

十、纯函数 — 波浪动画坐标计算

function waveX(tick: number, i: number): number {
  return 30 + ((tick * 4 + i * 83) % 600);
}

function waveY(tick: number, i: number): number {
  return 80 + ((tick * 2 + i * 47) % 340);
}

function waveH(tick: number, i: number): number {
  return 4 + ((tick + i * 3) % 8);
}

waveX 函数计算波浪波纹条的水平位置。它接受 tick（时间计数器）和 i（粒子索引）两个参数，通过取模运算 % 600 确保结果在 30-630 像素范围内循环。公式 tick * 4 + i * 83 中，tick 的系数 4 控制了波纹水平移动的速度——每 90ms（定时器间隔）tick 递增 1，波纹水平偏移 4 像素；i 的系数 83 是一个质数，确保不同波纹条之间的初始位置差异足够大，避免视觉上的规则排列。取模运算创造了「无限滚动」的效果——波纹条移出右侧边界后会从左侧重新出现。

waveY 函数计算波纹条的垂直位置，公式结构与 waveX 类似但参数不同。tick * 2 使垂直移动速度慢于水平移动（系数 2 vs 4），营造出海浪缓慢起伏的效果。i * 47 同样使用质数偏移，% 340 将垂直范围限制在 80-420 像素。这种水平快、垂直慢的运动模式，模拟了真实海浪的水平涌动为主、垂直起伏为辅的物理特性。

waveH 函数计算波纹条的宽度（实际用于 width 属性的乘数）。公式 4 + ((tick + i * 3) % 8) 使宽度在 4-11 之间变化。这个动态宽度让波纹条在运动过程中呈现「时宽时窄」的视觉效果，模拟了海浪波纹的粗细变化——浪花破碎处波纹较粗，退潮处较细。三个函数配合使用，在 fxLayer 构建器中通过 ForEach 渲染 8 条波纹，每条波纹的位置和宽度都随 tick 变化而实时更新，形成了持续流动的海浪效果。

这种基于数学公式的动画方案具有显著优势：无需依赖动画框架或 Lottie 等第三方库，纯计算驱动，性能开销极低；每次 tick 变化只需重新计算位置参数，ArkUI 的声明式渲染自动完成差异更新。取模运算天然实现了循环效果，无需额外的状态管理来判断边界回绕。质数系数的选择避免了粒子运动的周期性重复，使动画看起来更加自然随机。

十一、纯函数 — 泡沫动画与状态色

function foamY(tick: number, i: number): number {
  return 420 - ((tick * 3 + i * 59) % 360);
}

function foamA(tick: number): number {
  return tick % 2 === 0 ? 0.8 : 0.3;
}

function boardColor(s: string): string {
  if (s === '出品' || s === '评审') {
    return '#4FBF85';
  } else if (s === '制作中' || s === '待上漆') {
    return '#E8A84F';
  }
  return '#E8605C';
}

function spotColor(s: string): string {
  if (s === '新手' || s === '入门') {
    return '#4FBF85';
  } else if (s === '中级' || s === '进阶') {
    return '#E8A84F';
  }
  return '#E8605C';
}

foamY 函数计算泡沫粒子的垂直位置。与 waveY 不同的是，foamY 使用 420 - 做减法，这意味着泡沫从底部（y=420 附近）向上漂浮（y 值减小），模拟了真实海浪泡沫从水面下方向上冒出的物理现象。tick * 3 控制上浮速度，i * 59 提供粒子间偏移，% 360 限制运动范围。当泡沫漂浮到顶部后，取模运算使其从底部重新开始，形成持续上浮的循环效果。foamA 函数则交替返回 0.8 和 0.3 的透明度值，基于 tick 的奇偶性切换，使泡沫粒子在运动过程中呈现「闪烁」效果，增强了海浪泡沫的灵动感。

boardColor 函数根据板型状态返回语义色。出品和评审状态返回绿色（#4FBF85），表示产品已完成或接近完成；制作中和待上漆状态返回橙色（#E8A84F），表示产品处于加工中途；其他状态返回红色（#E8605C）。这个函数在 pageBoard 和 pageMine 构建器中被反复调用，为每个板型列表项的状态标签和左侧色条提供颜色。将颜色映射逻辑封装为函数而非在模板中内联判断，使得状态与颜色的对应关系集中可维护——如果未来需要调整颜色策略，只需修改这一个函数。

spotColor 函数与 boardColor 结构完全对称，但映射的是浪点难度等级：新手和入门返回绿色（安全），中级和进阶返回橙色（需谨慎），高手返回红色（高风险）。两个函数采用相同的模式（双值匹配 + 默认值），这种一致性使得代码风格统一，降低了维护者的认知负担。在实际应用中，这类状态色映射是运动安全类应用的核心交互设计——颜色作为最直观的信息编码方式，帮助用户在浏览浪点列表时快速做出安全判断。

十二、PageWave 组件状态声明

@Entry
@Component
struct PageWave {
  @State mainTab: number = 0
  @State subTab: number = 0
  @State tick: number = 0
  @State glow: number = 0
  @State addOpen: boolean = false
  @State editOpen: boolean = false
  @State delOpen: boolean = false
  @State editIdx: number = 0
  @State delTarget: string = 'board'
  @State editName: string = ''
  @State editStyle: string = ''
  @State editNote: string = ''
  @State addTitle: string = ''
  @State addContent: string = ''
  @State postList: PostItem[] = POST_LIST
  @State boardList: BoardItem[] = BOARD_LIST
  @State fxTimer: number = -1

PageWave 是应用的唯一入口组件，使用 @Entry 和 @Component 装饰器标记。@Entry 表示这是页面的根组件，框架会将其作为渲染树的起点；@Component 表示这是一个自定义组件，可以被复用和组合。组件内部定义了 16 个 @State 装饰的状态变量，涵盖了导航状态、特效状态、弹窗状态、表单状态和数据列表五大类别。

导航状态包括 mainTab（主 Tab 索引，0-3 对应首页/板坊/课堂/我的）和 subTab（子 Tab 索引，0-6 对应精选/板型工坊/浪点预报/冲浪课堂/手作工坊/浪友圈/配件库）。这两个状态变量驱动了 mainContent 构建器中的条件分支渲染——当 mainTab 或 subTab 变化时，对应的页面内容会切换显示。特效状态包括 tick（动画计数器，驱动波纹和泡沫的位置计算）和 glow（交替值，用于特效闪烁），它们由 aboutToAppear 中的定时器每 90ms 更新一次。

弹窗状态由三个布尔变量 addOpen、editOpen、delOpen 分别控制三类弹框的显隐。editIdx 记录当前编辑的板型索引，delTarget 标识删除操作的目标类型（‘board’ 或 ‘course’）。表单状态包括 editName/editStyle/editNote（编辑弹窗的三个输入字段）和 addTitle/addContent（新增弹窗的标题和内容）。数据列表状态 postList 和 boardList 初始引用了静态数据集 POST_LIST 和 BOARD_LIST，但作为 @State 变量，它们支持后续的动态增删操作。fxTimer 保存定时器 ID，初始值 -1 表示未启动。这些状态变量共同构成了应用的完整状态机，每个变量的变化都会精确触发对应 UI 的重新渲染。

十三、aboutToAppear 生命周期与特效定时器

aboutToAppear(): void {
  this.fxTimer = setInterval(() => {
    this.tick = this.tick + 1;
    this.glow = (this.glow + 1) % 2;
  }, 90);
}

aboutToAppear 是 ArkUI 组件生命周期的关键回调，在组件实例创建后、build 方法执行前被调用。这个时机非常适合做初始化工作——此时组件的状态变量已就绪，但 UI 尚未渲染，因此在此启动定时器不会触发多余的重绘。在本应用中，aboutToAppear 的唯一职责是启动特效定时器：通过 setInterval 每 90 毫秒执行一次回调，递增 tick 并切换 glow 的值（0 和 1 交替）。

90 毫秒的间隔选择经过了精心考量。它比常见的 16ms（60fps）要慢得多，但这是因为特效层不需要流畅的逐帧动画——波浪和泡沫的运动是缓慢、随机的，90ms 的更新频率已经能产生足够自然的视觉效果。较慢的更新频率显著降低了 CPU 和渲染管线的压力，对于需要在低端设备上运行的应用尤为重要。tick 的递增驱动了 waveX、waveY、waveH、foamY 等纯函数的重新计算，每次 tick 变化都会触发 fxLayer 构建器的重新渲染，更新 8 条波纹和 7 个泡沫粒子的位置与外观。

setInterval 返回的定时器 ID 被保存在 fxTimer 状态变量中。这个保存是必要的——当组件销毁时，aboutToDisappear 回调需要通过 clearInterval 停止定时器，避免内存泄漏和在不可见状态下继续消耗资源。glow 变量虽然被更新但在当前版本的 fxLayer 中未被直接使用（fxLayer 使用 foamA 函数基于 tick 的奇偶性切换透明度），它可能为未来的扩展预留——例如可以用于控制全局光晕效果的切换。这种「预留扩展点」的设计思维体现了成熟的前端工程实践。

十四、aboutToDisappear 销毁与弹窗控制方法

aboutToDisappear(): void {
  if (this.fxTimer > 0) {
    clearInterval(this.fxTimer);
    this.fxTimer = -1;
  }
}

openAdd(): void {
  this.addTitle = '';
  this.addContent = '';
  this.addOpen = true;
}

openEdit(index: number): void {
  if (index >= 0 && index < this.boardList.length) {
    this.editIdx = index;
    this.editName = this.boardList[index].name;
    this.editStyle = this.boardList[index].length;
    this.editNote = this.boardList[index].volume;
  }
  this.editOpen = true;
}

openDelA(): void {
  this.delTarget = 'board';
  this.delOpen = true;
}

openDelB(): void {
  this.delTarget = 'course';
  this.delOpen = true;
}

aboutToDisappear 是组件销毁前的回调，与 aboutToAppear 形成生命周期闭环。它首先检查 fxTimer 是否大于 0（即定时器是否处于活跃状态），如果是则调用 clearInterval 清除定时器并将 fxTimer 重置为 -1。这种防御性检查确保了即使 aboutToAppear 因异常未能正常执行，aboutToDisappear 也不会调用 clearInterval 传入无效参数。在 HarmonyOS 的页面栈模型中，当用户导航离开当前页面或应用被系统回收时，aboutToDisappear 会被触发，及时释放定时器资源是避免后台耗电和内存泄漏的关键。

openAdd 方法负责打开「发布浪语」弹框。它在打开前清空了 addTitle 和 addContent 两个表单状态变量，确保每次打开弹框时输入框都是空白的。这种「打开即清空」的设计避免了上次输入的残留数据影响当前操作，是表单交互的最佳实践。设置完表单状态后，将 addOpen 置为 true 触发弹框渲染。

openEdit 方法接收一个 index 参数，打开「编辑板型」弹框。它首先进行边界检查（index >= 0 && index < boardList.length），确保索引有效后才读取数据。然后将目标板型的 name、length、volume 分别赋值给 editName、editStyle、editNote 三个表单变量，实现了「回填预览」——弹框打开时输入框已填充当前板型的信息，用户只需修改需要变更的字段。openDelA 和 openDelB 分别设置 delTarget 为 ‘board’ 和 ‘course’，然后打开删除确认弹框。通过 delTarget 变量的区分，同一个删除弹框可以服务于「下架板型」和「退课」两种不同的删除场景，实现了弹框组件的复用。

十五、数据操作方法 — doAdd、doEdit、doDel

doAdd(): void {
  if (this.addTitle.length > 0) {
    this.postList.unshift(new PostItem(999, '我的浪语', '🌊', this.addTitle, '刚刚', 0));
  }
  this.addOpen = false;
}

doEdit(): void {
  if (this.editIdx >= 0 && this.editIdx < this.boardList.length) {
    this.boardList.splice(this.editIdx, 1, new BoardItem(this.boardList[this.editIdx].id, this.editName, this.editStyle, this.editNote, '制作中', '定制'));
  }
  this.editOpen = false;
}

doDel(): void {
  if (this.delTarget === 'board' && this.boardList.length > 0) {
    this.boardList.splice(0, 1);
  } else if (this.delTarget === 'course' && this.postList.length > 0) {
    this.postList.splice(0, 1);
  }
  this.delOpen = false;
}

doAdd 方法处理「发布浪语」的提交逻辑。它首先校验 addTitle 是否非空（this.addTitle.length > 0），只有用户输入了标题才执行插入操作。插入使用数组的 unshift 方法，将新构造的 PostItem 添加到 postList 的头部。新动态的 id 固定为 999（在演示场景中不会与预置数据冲突），昵称为「我的浪语」，头像使用海洋 Emoji，时间为「刚刚」，点赞数为 0。unshift 到头部的设计使得新发布的动态立即出现在列表顶部，符合社交媒体的「最新优先」展示惯例。操作完成后关闭弹框（addOpen = false）。

doEdit 方法处理「编辑板型」的保存逻辑。它通过 splice 的三参数形式 splice(editIdx, 1, newItem) 实现了「替换」语义——删除指定位置的一个元素并插入新元素。新 BoardItem 的 id 保留了原板型的 id（this.boardList[this.editIdx].id），确保数据标识的连续性；name、length、volume 分别使用编辑后的 editName、editStyle、editNote；status 固定为「制作中」（表示编辑后板型重新进入制作流程）；tag 固定为「定制」。这种设计意味着每次编辑都会将板型状态重置为「制作中」，模拟了手作工坊中「修改设计需要重新制作」的业务逻辑。

doDel 方法处理删除操作，通过 delTarget 变量区分两种场景。当 delTarget 为 ‘board’ 时，删除 boardList 的首项（splice(0, 1)），模拟「下架工坊首块板型」；当 delTarget 为 ‘course’ 时，删除 postList 的首项，模拟「退出首门进行中的课程」（此处复用了 postList 作为课程动态的代理）。两种删除操作都先检查列表长度大于 0，避免对空数组执行 splice 导致的异常。操作完成后关闭弹框。三个 do 方法共同体现了「校验-操作-关闭」的统一处理模式，逻辑清晰且安全可靠。

十六、fxLayer 特效层构建器

@Builder
fxLayer() {
  Stack({ alignContent: Alignment.TopStart }) {
    ForEach([0, 1, 2, 3, 4, 5, 6, 7], (i: number) => {
      Column()
        .width(waveH(this.tick, i) * 6)
        .height(3)
        .borderRadius(2)
        .backgroundColor('#FFFFFF')
        .opacity(0.7)
        .translate({ x: waveX(this.tick, i), y: waveY(this.tick, i) })
    }, (i: number) => i.toString())
    ForEach([0, 1, 2, 3, 4, 5, 6], (i: number) => {
      Column()
        .width(4)
        .height(4)
        .borderRadius(2)
        .backgroundColor(COLORS.foam)
        .backgroundColor(COLORS.foam)
        .opacity(foamA(this.tick))
        .translate({ x: 50 + i * 88, y: foamY(this.tick, i) })
    }, (i: number) => i.toString())
  }
  .width('100%')
  .height('100%')
  .hitTestBehavior(HitTestMode.None)
}

fxLayer 是整个应用视觉设计的点睛之笔，它通过 @Builder 装饰器定义为可复用的 UI 构建片段。整个特效层以 Stack 为容器，采用 TopStart 对齐方式，内部包含两组 ForEach 渲染的粒子元素。第一组渲染 8 条波浪波纹条（Column 组件），每条的宽度由 waveH 函数计算后乘以 6 得到（范围 24-66 像素），高度固定为 3 像素，圆角 2 像素，白色背景，透明度 0.7。位置通过 translate 属性设置，x 和 y 坐标分别由 waveX 和 waveY 函数基于 tick 和索引 i 计算。这些白色细条在屏幕上缓慢移动，模拟了阳光照射在海面上反射的波纹光斑。

第二组渲染 7 个泡沫粒子，每个为 4x4 像素的圆角小方块，使用 COLORS.foam（#CFE9F5）作为背景色。透明度由 foamA 函数根据 tick 的奇偶性交替设置为 0.8 或 0.3，使泡沫呈现闪烁效果。水平位置固定为 50 + i * 88（均匀分布在 50-578 像素区间），垂直位置由 foamY 函数计算，从底部向上漂浮。两组粒子元素叠加在同一个 Stack 中，共同营造出海浪涌动、泡沫翻腾的视觉氛围。

特效层最关键的技术细节是 .hitTestBehavior(HitTestMode.None)。这个属性设置了 Stack 容器及其所有子元素不参与命中测试，即所有触摸和点击事件会穿透特效层，传递到下方的业务 UI 组件。这一设计解决了特效层覆盖全屏可能导致的交互阻断问题——用户可以正常点击特效层「下方」的按钮、列表项和输入框，而特效层纯粹作为视觉装饰存在。这种「视觉在上、交互在下」的分层架构，是声明式 UI 框架中实现沉浸式特效的标准模式。

十七、header 头部构建器

@Builder
header() {
  Row() {
    Column() {
      Text('浪语板坊')
        .fontSize(21)
        .fontWeight(FontWeight.Bold)
        .fontColor(COLORS.textPrimary)
      Text('板型工坊 · 浪点预报 · 冲浪课堂')
        .fontSize(11)
        .fontColor(COLORS.textSecondary)
        .margin({ top: 2 })
    }
    .alignItems(HorizontalAlign.Start)
    .layoutWeight(1)
    Text('🌊')
      .fontSize(24)
    Text('🏄')
      .fontSize(22)
      .margin({ left: 10 })
  }
  .width('100%')
  .padding({ top: 8, bottom: 8 })
}

header 构建器定义了应用的顶部标题栏，采用 Row 水平布局，内部分为左侧文字区和右侧图标区两部分。左侧 Column 包含两行文字：主标题「浪语板坊」使用 21 号粗体字，颜色为 textPrimary（深蓝灰）；副标题「板型工坊 · 浪点预报 · 冲浪课堂」使用 11 号常规字，颜色为 textSecondary（中蓝灰），两行之间通过 margin({ top: 2 }) 留出微小间距。Column 设置了 layoutWeight(1)，使其占据 Row 中除图标外的所有剩余空间，实现了文字左对齐、图标右对齐的经典导航栏布局。

右侧放置了两个 Emoji 图标：🌊（海浪）和🏄（冲浪者），字号分别为 24 和 22，之间用 margin({ left: 10 }) 间隔。使用 Emoji 作为图标的好处是无需引入图标资源文件，且 Emoji 在所有平台上都有原生支持。这两个图标与主标题「浪语板坊」一起，在视觉上强化了应用的海洋冲浪主题。

整个 header 的 padding 设置为上下各 8，左右默认为 0，使得标题栏在视觉上紧凑而不局促。header 作为一个 @Builder 方法，在 mainContent 中被调用，作为每个 Tab 页面的统一顶部。这种「头部复用」的设计确保了应用在不同 Tab 切换时保持一致的标识感，用户始终能通过顶部标题栏确认当前所在的应用和页面。header 不包含返回按钮或导航控制，因为本应用采用底部 Tab 导航模式而非栈式导航，头部仅承担品牌展示功能。

十八、subNav 内容 Tab 横条

@Builder
subNav() {
  Scroll() {
    Row({ space: 8 }) {
      ForEach(SUB_NAV_LIST, (item: string, idx: number) => {
        Text(item)
          .fontSize(13)
          .fontWeight(this.subTab === idx ? FontWeight.Bold : FontWeight.Normal)
          .fontColor(this.subTab === idx ? COLORS.white : COLORS.textSecondary)
          .backgroundColor(this.subTab === idx ? COLORS.primary : COLORS.cardBg)
          .backgroundColor(this.subTab === idx ? COLORS.primary : COLORS.cardBg)
          .padding({ left: 14, right: 14, top: 7, bottom: 7 })
          .borderRadius(16)
          .onClick(() => {
            this.subTab = idx;
          })
      }, (item: string) => item)
    }
    .width('100%')
  }
  .scrollable(ScrollDirection.Horizontal)
  .scrollBar(BarState.Off)
  .padding({ top: 4, bottom: 10 })
}

subNav 构建器实现了首页的内容子 Tab 导航条。它以 Scroll 为外层容器，设置了 scrollable(ScrollDirection.Horizontal) 实现水平滚动，scrollBar(BarState.Off) 隐藏滚动条，使导航条在小屏设备上也能优雅地展示全部 7 个 Tab 项。内层 Row 以 space: 8 的间距排列所有 Tab 项，每个 Tab 项是一个 Text 组件，通过 ForEach 从 SUB_NAV_LIST 数组渲染。

每个 Tab 项的样式根据 this.subTab === idx 的判断结果动态切换：选中状态下使用粗体、白色文字、主色蓝背景；未选中状态下使用常规字、次要文字色、白色背景。padding 设置为左右 14、上下 7，borderRadius 为 16，形成了圆润的药丸形按钮外观。这种「选中态高亮」的交互模式是 Tab 导航的通用范式，用户能一眼识别当前所在的内容页。

onClick 回调中将 this.subTab 赋值为当前点击的索引 idx，触发状态变化后，ArkUI 框架自动重新渲染 subNav 和 mainContent 中的条件分支。值得注意的是，ForEach 的第三个参数（键值生成函数）使用了 item 本身（(item: string) => item），这意味着每个 Tab 项以文本内容作为唯一标识。当 SUB_NAV_LIST 的内容不变时，这个键值策略是安全的；但如果将来需要动态修改 Tab 列表，可能需要更复杂的键值策略来确保 ForEach 的正确 diff。

十九、pageFeatured 精选页 — 浪高柱状图与板型占比

@Builder
pageFeatured() {
  Column({ space: 12 }) {
    // 一周浪高柱状大卡
    Column() {
      Row() {
        Text('一周浪高预报')
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .fontColor(COLORS.textPrimary)
          .layoutWeight(1)
        Text('单位 米')
          .fontSize(10)
          .fontColor(COLORS.textHint)
      }
      .width('100%')
      Row({ space: 10 }) {
        ForEach(WAVE_CHART, (it: WaveChartItem) => {
          Column({ space: 4 }) {
            Column()
              .width(22)
              .height(barH(it.value, 2.4))
              .borderRadius(6)
              .backgroundColor(styleColor(it.value))
            Text(it.label)
              .fontSize(10)
              .fontColor(COLORS.textSecondary)
          }
          .layoutWeight(1)
          .alignItems(HorizontalAlign.Center)
        }, (it: WaveChartItem) => it.label + it.value.toString())
      }
      .width('100%')
      .alignItems(VerticalAlign.Bottom)
      .height(150)
      .margin({ top: 12 })

pageFeatured 是首页「精选」子 Tab 的内容页面，也是信息密度最高的页面。它以 Column 为容器，space 为 12，内部包含三个卡片区块。第一个区块是「一周浪高预报」柱状图卡片。卡片顶部是标题行，左侧标题使用 16 号粗体字，右侧标注「单位 米」使用 10 号提示色。柱状图区域使用 Row 布局，space 为 10，通过 ForEach 渲染 WAVE_CHART 的 7 个数据项。每个柱子是一个 Column 组件，宽度固定 22 像素，高度由 barH 函数计算（基于浪高值与最大值 2.4 的比例，映射到 0-120 像素），borderRadius 为 6 形成圆角柱体，背景色由 styleColor 函数根据浪高阈值返回。

柱状图区域的 Row 设置了 alignItems(VerticalAlign.Bottom)，使所有柱子底部对齐——这是柱状图的标准视觉规范。height 设为 150 像素，为柱子（最高 120）和标签留出足够空间。每个柱子下方有对应的星期标签，使用 10 号次要文字色。ForEach 的键值函数使用了 it.label + it.value.toString() 的组合形式，确保每个柱子项的唯一性。这种自定义柱状图的实现方式完全不依赖图表库，仅通过 Column 的高度属性和背景色即可呈现数据可视化效果，体现了声明式 UI 的灵活性。

第二个区块是「板型占比」横条图卡片。它通过 ForEach 渲染 STYLE_CHART 的 5 个数据项，每项包含标签文字、进度条（Stack 内嵌灰色背景 Row 和彩色填充 Row）和百分比数字。填充条的宽度使用模板字符串 `${it.value}%` 动态设置，颜色直接使用数据项的 color 字段。这种「Stack 叠加双 Row」的进度条实现方式简洁而有效——底层 Row 作为轨道（灰色背景），上层 Row 作为填充（彩色背景），通过百分比宽度控制填充比例。整个精选页面通过柱状图和横条图两种可视化形式，将浪况数据和板型分布信息以直观的图形方式呈现给用户。

二十、pageFeatured 精选页 — 工坊热门板型与浪友动态

      // 板型工坊双列
      Column() {
        Row() {
          Text('工坊热门板型')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
            .layoutWeight(1)
          Text('查看全部')
            .fontSize(11)
            .fontColor(COLORS.primary)
        }
        .width('100%')
        .margin({ bottom: 10 })
        ForEach(this.boardList, (it: BoardItem, idx: number) => {
          if (idx % 2 === 0) {
            Row({ space: 10 }) {
              if (idx < this.boardList.length) {
                Column({ space: 6 }) {
                  Text(it.name)
                    .fontSize(15)
                    .fontWeight(FontWeight.Bold)
                    .fontColor(COLORS.textPrimary)
                  Text(`${it.length} · ${it.volume}`)
                    .fontSize(11)
                    .fontColor(COLORS.textSecondary)
                  Row({ space: 6 }) {
                    Text(it.status)
                      .fontSize(10)
                      .fontWeight(FontWeight.Bold)
                      .fontColor(boardColor(it.status))
                      .padding({ left: 6, right: 6, top: 2, bottom: 2 })
                      .backgroundColor(COLORS.bg)
                      .borderRadius(6)
                    Text(it.tag)
                      .fontSize(10)
                      .fontColor(COLORS.textHint)
                  }
                  .width('100%')
                }
                .layoutWeight(1)
                .padding(12)
                .backgroundColor(COLORS.cardBg)
                .borderRadius(12)
              }

精选页的第三个区块是「工坊热门板型」双列卡片网格。这里实现了一个自定义的双列布局：通过 ForEach 遍历 boardList，但只处理偶数索引（idx % 2 === 0）的项，每个偶数项渲染一个包含两个 Column 的 Row——左侧 Column 使用当前项数据，右侧 Column 使用 this.boardList[idx + 1] 的数据。这种「步进 2」的遍历方式是一种常见的双列网格实现技巧，无需 Grid 组件即可实现网格效果。每个板型卡片包含名称（15 号粗体）、规格（11 号次要色，格式为「板长 · 体积」）、状态标签（使用 boardColor 函数着色）和风格标签（提示色）。

第四个区块是「浪友动态」列表，顶部标题行右侧有「发浪语」链接文字，点击后调用 openAdd 方法打开新增弹框。动态列表通过 this.postList.slice(0, 3) 只展示前 3 条，每条动态以卡片形式呈现：左侧是 Emoji 头像（22 号字），右侧 Column 包含昵称行（昵称+时间）、正文（12 号次要色，最多 2 行，超出省略）和点赞数。maxLines(2) 和 textOverflow({ overflow: TextOverflow.Ellipsis }) 的组合确保了长文本不会撑破卡片布局，而是以省略号收尾。

整个 pageFeatured 是应用中信息量最大的页面，集成了柱状图、横条图、双列卡片网格和动态列表四种布局形态。这些布局全部通过 Row、Column、Stack 的组合实现，无需依赖第三方 UI 库。页面通过 Column 的 space: 12 统一了卡片间的垂直间距，每张卡片都使用 padding(14)、backgroundColor(COLORS.cardBg)、borderRadius(14) 的统一样式，保证了视觉一致性。这种「卡片化设计」使复杂的信息层次在视觉上清晰分明，用户可以快速扫描和定位感兴趣的内容区块。

二十一、pageBoard 板型工坊页

@Builder
pageBoard() {
  Column({ space: 10 }) {
    Row() {
      Text('板型工坊')
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .fontColor(COLORS.textPrimary)
        .layoutWeight(1)
      Text('新建板型')
        .fontSize(12)
        .fontColor(COLORS.primary)
        .onClick(() => {
          this.openAdd();
        })
    }
    .width('100%')
    ForEach(this.boardList, (it: BoardItem, idx: number) => {
      Column({ space: 6 }) {
        Row() {
          Column()
            .width(4)
            .height(38)
            .borderRadius(2)
            .backgroundColor(it.status === '出品' ? COLORS.success : COLORS.warning)
          Column({ space: 4 }) {
            Row() {
              Text(it.name)
                .fontSize(14)
                .fontWeight(FontWeight.Bold)
                .fontColor(COLORS.textPrimary)
                .layoutWeight(1)
              Text(it.status)
                .fontSize(10)
                .fontWeight(FontWeight.Bold)
                .fontColor(boardColor(it.status))
                .padding({ left: 6, right: 6, top: 2, bottom: 2 })
                .backgroundColor(COLORS.bg)
                .borderRadius(6)
            }
            .width('100%')
            Row({ space: 8 }) {
              Text(`📏 ${it.length}`)
                .fontSize(11)
                .fontColor(COLORS.textSecondary)
              Text(`🫧 ${it.volume}`)
                .fontSize(11)
                .fontColor(COLORS.textSecondary)
            }
            .width('100%')
          }
          .layoutWeight(1)
          .alignItems(HorizontalAlign.Start)
        }
        .width('100%')
        Row({ space: 10 }) {
          Text('编辑')
            .fontSize(11)
            .fontColor(COLORS.primary)
            .onClick(() => {
              this.openEdit(idx);
            })
        }
        .width('100%')
        .justifyContent(FlexAlign.End)
      }
      .width('100%')
      .padding(12)
      .backgroundColor(COLORS.cardBg)
      .borderRadius(12)
    }, (it: BoardItem) => it.id.toString())

pageBoard 是「板型工坊」页面的完整实现，也是应用中交互最丰富的列表页。页面顶部标题行右侧有「新建板型」链接，点击调用 openAdd 方法。列表通过 ForEach 遍历 boardList 渲染每个板型卡片。每张卡片的核心视觉元素是左侧的 4 像素宽色条——高度 38 像素，颜色根据板型状态判断：出品为绿色（COLORS.success），其他状态为橙色（COLORS.warning）。这个色条是卡片的状态指示器，用户扫视列表时可以通过色条颜色快速区分已完成和制作中的板型。

卡片主体区包含板型名称（14 号粗体）、状态标签（使用 boardColor 函数着色的药丸标签）和规格信息行（板长和体积，以 Emoji 前缀增强可读性）。卡片底部是「编辑」操作链接，使用 justifyContent(FlexAlign.End) 右对齐，点击后调用 openEdit(idx) 打开编辑弹框。这里巧妙地利用了 ForEach 的索引参数 idx，将其传递给 openEdit 方法，使编辑弹框能够精确定位到被点击的板型数据。

页面底部是一个特殊的「下架板型」按钮实现。由于 ArkUI 的 Button 组件不支持直接设置内部文字样式，开发者采用了 Button + Text 叠加的技巧：先渲染一个红色背景的 Button，然后在同一层级叠加一个 Text(‘下架板型’)，通过负值的 margin（margin({ left: -70, top: -32 })）将文字定位到按钮中心。这种实现方式虽然略显 hack，但在当前版本的 ArkUI 中是达成「自定义按钮文字样式」的有效手段。点击按钮调用 openDelA 方法打开删除确认弹框。

二十二、pageSpot 浪点预报页

@Builder
pageSpot() {
  Column({ space: 10 }) {
    Text('浪点预报')
      .fontSize(16)
      .fontWeight(FontWeight.Bold)
      .fontColor(COLORS.textPrimary)
      .width('100%')
    ForEach(SPOT_LIST, (it: SpotItem) => {
      Column({ space: 6 }) {
        Row() {
          Text(it.name)
            .fontSize(14)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
            .layoutWeight(1)
          Text(it.level)
            .fontSize(10)
            .fontWeight(FontWeight.Bold)
            .fontColor(spotColor(it.level))
            .padding({ left: 6, right: 6, top: 2, bottom: 2 })
            .backgroundColor(COLORS.bg)
            .borderRadius(6)
        }
        .width('100%')
        Row({ space: 10 }) {
          Text(`🌊 浪高 ${it.wave}`)
            .fontSize(12)
            .fontColor(COLORS.textSecondary)
          Text(`💨 风向 ${it.wind}`)
            .fontSize(12)
            .fontColor(COLORS.textSecondary)
        }
        .width('100%')
        Row({ space: 8 }) {
          Text('适合')
            .fontSize(11)
            .fontColor(COLORS.textHint)
          Text(it.level)
            .fontSize(11)
            .fontColor(COLORS.primary)
        }
        .width('100%')
      }
      .width('100%')
      .padding(12)
      .backgroundColor(COLORS.cardBg)
      .borderRadius(12)
    }, (it: SpotItem) => it.id.toString())
  }
  .width('100%')
}

pageSpot 是「浪点预报」页面的构建器，以列表形式展示 6 个浪点的实时浪况信息。每个浪点卡片包含三行信息：第一行是浪点名称和难度等级标签，等级标签使用 spotColor 函数着色——新手和入门为绿色，中级和进阶为橙色，高手为红色。这种颜色编码使安全信息一目了然，是运动安全类应用的核心设计原则。

第二行展示浪高和风向数据，使用 Emoji 前缀（🌊 和 💨）增强信息识别度。浪高数据如「1.2m」和风向数据如「东风 3 级」以 12 号次要文字色呈现，信息密度适中。第三行是「适合」标签和等级文字的重复展示，但这里等级文字使用主色蓝（COLORS.primary）而非 spotColor 函数返回的语义色，形成了「安全色标签 + 主色推荐」的双重视觉提示，既强调了安全等级又引导用户关注适合自身水平的浪点。

pageSpot 的设计简洁而信息高效——没有复杂的交互逻辑，纯粹以信息展示为核心。每张卡片使用统一的 padding(12)、cardBg 背景、borderRadius(12) 样式，与全应用的卡片风格保持一致。ForEach 的键值函数使用 it.id.toString()，确保每个浪点项的唯一标识。当后续接入实时浪况 API 时，只需替换 SPOT_LIST 数据源，UI 渲染逻辑无需任何修改，体现了良好的数据与视图解耦。

二十三、pageCourse 冲浪课堂页

@Builder
pageCourse() {
  Column({ space: 10 }) {
    Text('冲浪课堂')
      .fontSize(16)
      .fontWeight(FontWeight.Bold)
      .fontColor(COLORS.textPrimary)
      .width('100%')
    ForEach(COURSE_LIST, (it: CourseItem) => {
      Column({ space: 8 }) {
        Row() {
          Text(it.title)
            .fontSize(14)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
            .layoutWeight(1)
          Text(it.week)
            .fontSize(11)
            .fontColor(COLORS.textHint)
        }
        .width('100%')
        Stack({ alignContent: Alignment.Start }) {
          Row()
            .width('100%')
            .height(8)
            .borderRadius(4)
            .backgroundColor(COLORS.border)
          Row()
            .width(`${it.progress}%`)
            .height(8)
            .borderRadius(4)
            .backgroundColor(it.color)
        }
        .width('100%')
        Row() {
          Text('已学')
            .fontSize(11)
            .fontColor(COLORS.textSecondary)
            .layoutWeight(1)
          Text(`${it.progress}%`)
            .fontSize(11)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.primary)
        }
        .width('100%')
      }
      .width('100%')
      .padding(12)
      .backgroundColor(COLORS.cardBg)
      .borderRadius(12)
    }, (it: CourseItem) => it.title)

pageCourse 是「冲浪课堂」页面，展示 5 门冲浪课程的进度信息。每张课程卡片包含三部分内容：标题行（课程名称 + 周期描述）、进度条和已学百分比行。进度条采用 Stack 叠加双 Row 的实现方式——底层 Row 为灰色轨道（COLORS.border 背景，100% 宽度），上层 Row 为彩色填充（it.color 背景，宽度为 `${it.progress}%`），高度均为 8 像素，圆角 4 像素。Stack 设置了 Alignment.Start 对齐，确保填充条从左侧起始。

进度条的颜色直接来源于数据项的 color 字段，每门课程拥有独特的颜色（蓝、橙、绿、红、灰），使课程列表在视觉上丰富多变。进度百分比在底部行右侧以粗体主色显示，左侧标注「已学」。这种将进度数值同时以视觉条和数字两种形式呈现的设计，既满足了快速扫视的需求，又提供了精确的数值信息。

页面底部同样有一个「退课」按钮，实现方式与 pageBoard 的「下架板型」按钮相同——Button + Text 叠加，使用负值 margin 定位文字。点击后调用 openDelB 方法，设置 delTarget 为 ‘course’ 并打开删除确认弹框。在 doDel 方法中，当 delTarget 为 ‘course’ 时，实际执行的是 postList.splice(0, 1)——这里复用了浪友动态列表作为课程动态的代理，虽然在数据语义上略有偏差，但在演示场景中有效地展示了删除确认的交互流程。

二十四、pageStudio 手作工坊页

@Builder
pageStudio() {
  Column({ space: 10 }) {
    Text('手作工坊')
      .fontSize(16)
      .fontWeight(FontWeight.Bold)
      .fontColor(COLORS.textPrimary)
      .width('100%')
    Column({ space: 6 }) {
      Row() {
        Text('碧波长板打磨')
          .fontSize(14)
          .fontWeight(FontWeight.Bold)
          .fontColor(COLORS.textPrimary)
          .layoutWeight(1)
        Text('🕘 明日 10:00')
          .fontSize(11)
          .fontColor(COLORS.warning)
      }
      .width('100%')
      Row({ space: 12 }) {
        Text('工位：A-3')
          .fontSize(11)
          .fontColor(COLORS.textSecondary)
        Text('时长：4 小时')
          .fontSize(11)
          .fontColor(COLORS.textSecondary)
      }
      .width('100%')
      Text('已进入打磨工序，需自备防护口罩')
        .fontSize(12)
        .fontColor(COLORS.primary)
    }
    .width('100%')
    .padding(12)
    .backgroundColor(COLORS.cardBg)
    .borderRadius(12)

pageStudio 是「手作工坊」页面，展示手作工坊的预约信息和设备资源。页面分为三大区块：预约任务卡片、工坊课程卡片和设备预约网格。第一张卡片展示「碧波长板打磨」预约任务，包含任务名称、预约时间（使用 warning 色高亮提示明日即将开始）、工位编号和时长信息。底部有一行操作提示「已进入打磨工序，需自备防护口罩」，使用主色蓝强调，提醒用户注意安全事项。

第二张卡片展示「环氧上漆班」课程信息，结构与第一张类似但时间标签使用提示色（COLORS.textHint）而非警告色，表示该课程时间尚远。描述文字「琥珀环氧配色教学，含 2 次返工打磨」使用次要文字色，信息密度高且专业性强。

    Column({ space: 10 }) {
      Row({ space: 10 }) {
        Column({ space: 6 }) {
          Text('📏')
            .fontSize(26)
          Text('压板台')
            .fontSize(14)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
          Text('3m · 液压')
            .fontSize(11)
            .fontColor(COLORS.textSecondary)
          Text('去预约')
            .fontSize(11)
            .fontColor(COLORS.primary)
            .margin({ top: 4 })
        }
        .layoutWeight(1)
        .alignItems(HorizontalAlign.Start)
        .padding(12)
        .backgroundColor(COLORS.cardBg)
        .borderRadius(12)

第三个区块是设备预约网格，采用 2x2 的双列布局，展示压板台、修边机、恒温烘房和试板水池四类工坊设备。每个设备卡片包含 Emoji 图标（26 号字）、设备名称（14 号粗体）、规格描述（11 号次要色）和「去预约」链接（11 号主色）。最后一个设备卡片的链接文字为「去试板」而非「去预约」，体现了不同设备的功能差异——试板水池用于成品测试而非预约使用。

这种设备预约网格的实现采用了与精选页板型双列相同的技巧：通过 Row 嵌套两个 layoutWeight(1) 的 Column 实现等宽双列。每个 Column 设置 alignItems(HorizontalAlign.Start) 使内容左对齐。整个 pageStudio 页面通过任务卡片、课程卡片和设备网格的组合，完整呈现了手作工坊的运营全貌——从预约任务到课程安排再到设备管理，形成了一个功能闭环。

二十五、pageCircle 浪友圈页与 pageGear 配件库页

@Builder
pageCircle() {
  Column({ space: 10 }) {
    Row() {
      Text('浪友圈')
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .fontColor(COLORS.textPrimary)
        .layoutWeight(1)
      Text('发浪语')
        .fontSize(12)
        .fontColor(COLORS.primary)
        .onClick(() => {
          this.openAdd();
        })
    }
    .width('100%')
    ForEach(this.postList, (it: PostItem) => {
      Row({ space: 10 }) {
        Text(it.avatar)
          .fontSize(26)
        Column({ space: 4 }) {
          Row() {
            Text(it.nick)
              .fontSize(14)
              .fontWeight(FontWeight.Bold)
              .fontColor(COLORS.textPrimary)
              .layoutWeight(1)
            Text(it.time)
              .fontSize(10)
              .fontColor(COLORS.textHint)
          }
          .width('100%')
          Text(it.text)
            .fontSize(13)
            .fontColor(COLORS.textSecondary)
          Text(`👍 ${it.likes} · 💬 回复`)
            .fontSize(11)
            .fontColor(COLORS.textHint)
        }
        .layoutWeight(1)
      }
      .width('100%')
      .padding(12)
      .backgroundColor(COLORS.cardBg)
      .borderRadius(12)
    }, (it: PostItem) => it.id.toString())
  }
  .width('100%')
}

pageCircle 是「浪友圈」社区页面，展示完整的浪友动态列表。与精选页中只展示前 3 条不同，pageCircle 通过 ForEach 遍历完整的 postList，展示所有动态。每条动态卡片的左侧是 Emoji 头像（26 号字，比精选页的 22 号更大），右侧 Column 包含昵称行（昵称+时间）、正文（13 号次要色，不限行数）和互动数据行（点赞数和回复提示）。互动数据格式为 👍 ${it.likes} · 💬 回复，同时展示点赞数和可回复的交互暗示。

页面顶部标题行右侧的「发浪语」链接点击后调用 openAdd 方法，与精选页中的入口一致。这种多入口设计确保了用户在任何浏览场景下都能方便地发布动态。pageCircle 与精选页的动态列表共享同一个 postList 数据源，当用户在 pageCircle 发布新动态后切换到精选页，精选页的前 3 条也会反映最新数据——这就是 @State 和 @Observed 装饰器驱动的响应式更新效果。

@Builder
pageGear() {
  Column({ space: 10 }) {
    Text('配件库')
      .fontSize(16)
      .fontWeight(FontWeight.Bold)
      .fontColor(COLORS.textPrimary)
      .width('100%')
    ForEach(GEAR_LIST, (it: GearItem, idx: number) => {
      if (idx % 2 === 0) {
        Row({ space: 10 }) {
          if (idx < GEAR_LIST.length) {
            Column({ space: 6 }) {
              Text(GEAR_LIST[idx].icon)
                .fontSize(26)
              Text(GEAR_LIST[idx].name)
                .fontSize(14)
                .fontWeight(FontWeight.Bold)
                .fontColor(COLORS.textPrimary)
              Text(GEAR_LIST[idx].desc)
                .fontSize(11)
                .fontColor(COLORS.textSecondary)
              Text('去购买')
                .fontSize(11)
                .fontColor(COLORS.primary)
                .margin({ top: 4 })
            }
            .layoutWeight(1)
            .alignItems(HorizontalAlign.Start)
            .padding(12)
            .backgroundColor(COLORS.cardBg)
            .borderRadius(12)
          }

pageGear 是「配件库」页面，采用与精选页板型网格和工坊设备网格相同的双列布局技巧。8 个配件项通过 idx % 2 === 0 的步进遍历，每行渲染两个 Column 卡片。每个配件卡片包含 Emoji 图标（26 号字）、配件名称（14 号粗体）、规格描述（11 号次要色）和「去购买」链接（11 号主色）。与 pageStudio 的设备网格相比，pageGear 的卡片结构完全一致，只是数据源和操作语义不同——一个是「去预约」，一个是「去购买」。这种布局模式的复用体现了 ArkUI @Builder 构建器的组合优势。

二十六、pageMine 我的页面

@Builder
pageMine() {
  Column({ space: 12 }) {
    Row({ space: 12 }) {
      Text('🐬')
        .fontSize(40)
      Column({ space: 4 }) {
        Text('冲浪手作人')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .fontColor(COLORS.textPrimary)
        Text('Lv.11 · 追浪 28 站 · 手作 15 板')
          .fontSize(11)
          .fontColor(COLORS.textSecondary)
      }
      .alignItems(HorizontalAlign.Start)
      .layoutWeight(1)
    }
    .width('100%')
    .padding(14)
    .backgroundColor(COLORS.cardBg)
    .borderRadius(14)
    Column({ space: 10 }) {
      Row() {
        Text('我的板型')
          .fontSize(14)
          .fontWeight(FontWeight.Bold)
          .fontColor(COLORS.textPrimary)
          .layoutWeight(1)
        Text(`${this.boardList.length} 块`)
          .fontSize(12)
          .fontColor(COLORS.primary)
      }
      .width('100%')
      ForEach(this.boardList.slice(0, 3), (it: BoardItem) => {
        Row() {
          Text(it.name)
            .fontSize(13)
            .fontColor(COLORS.textSecondary)
            .layoutWeight(1)
          Text(it.status)
            .fontSize(11)
            .fontColor(boardColor(it.status))
        }
        .width('100%')
      }, (it: BoardItem) => it.id.toString())
    }
    .width('100%')
    .padding(14)
    .backgroundColor(COLORS.cardBg)
    .borderRadius(14)

pageMine 是「我的」个人中心页面，展示用户信息和个人数据概览。页面顶部是用户信息卡片：左侧是 🐬（海豚）Emoji 头像（40 号大字），右侧 Column 包含用户名「冲浪手作人」（18 号粗体）和等级信息「Lv.11 · 追浪 28 站 · 手作 15 板」（11 号次要色）。等级信息以紧凑格式同时展示了用户等级、追浪站点数和手作板数，三维度勾勒出用户的冲浪资历。

第二张卡片是「我的板型」概览，标题行右侧显示板型总数（`${this.boardList.length} 块`，主色蓝），通过 boardList.slice(0, 3) 只展示前 3 块板型的简要信息（名称+状态色文字）。第三张卡片是「我的动态」概览，结构类似，展示动态总数和前 3 条动态的昵称与时间。两张概览卡片都使用了 slice(0, 3) 截取前 3 项，既提供了数据概览又不至于信息过载。

pageMine 的一个重要技术特点是其数据动态性。板型总数 `${this.boardList.length} 块` 和动态总数 `${this.postList.length} 条` 都是直接引用 @State 变量的 length 属性，当用户在板型工坊添加或下架板型、在浪友圈发布或删除动态时，pageMine 中的数字会自动更新。这种跨页面的数据联动是 @State 响应式机制的直接体现——多个 @Builder 方法引用同一个 @State 数组，任何一处修改都会触发所有依赖处的重新渲染。pageMine 作为个人中心，无需额外的数据同步逻辑，天然就是应用全局状态的「镜像」。

二十七、modalOverlay 遮罩层与弹窗体系

@Builder
modalOverlay() {
  Stack() {
    Column()
      .width('100%')
      .height('100%')
      .backgroundColor('#000000')
      .opacity(0.45)
      .onClick(() => {
        this.addOpen = false;
        this.editOpen = false;
        this.delOpen = false;
      })
  }
  .width('100%')
  .height('100%')
}

modalOverlay 是弹窗遮罩层的通用构建器，被三类弹框（新增、编辑、删除）共享复用。它由一个 Stack 容器和一个铺满全屏的 Column 组成，Column 设置了黑色背景（#000000）和 0.45 的透明度，形成半透明遮罩效果。这个透明度经过精心调校——既足够暗化背景内容以突出弹框主体，又不至于完全遮挡背景使用户失去上下文感知。

遮罩层的 onClick 回调同时将三个弹窗状态变量（addOpen、editOpen、delOpen）都置为 false，实现「点击遮罩关闭弹框」的交互。虽然同一时刻只有一个弹框处于打开状态，但一次性重置所有变量是一种防御性编程策略——即使因某种异常导致多个状态变量同时为 true，点击遮罩也能确保全部关闭。这种「全量重置」比「判断当前打开的是哪个再关闭」更简洁且不易出错。

modalOverlay 的复用设计体现了 @Builder 的核心价值——将通用的 UI 片段抽取为独立方法，在多处调用时保持一致的视觉和行为。三类弹框在 build 方法中都通过 this.modalOverlay() 调用同一构建器，确保了遮罩层的样式和行为完全统一。当后续需要调整遮罩透明度或添加过渡动画时，只需修改 modalOverlay 一处即可全局生效。

二十八、addModalBody 与 editModalBody 弹框构建器

@Builder
addModalBody() {
  Column({ space: 12 }) {
    Text('发布浪语')
      .fontSize(17)
      .fontWeight(FontWeight.Bold)
      .fontColor(COLORS.textPrimary)
    TextInput({ placeholder: '记录今天的冲浪见闻…', text: this.addTitle })
      .fontSize(13)
      .fontColor(COLORS.textPrimary)
      .backgroundColor(COLORS.bg)
      .borderRadius(8)
      .height(40)
      .onChange((v: string) => {
        this.addTitle = v;
      })
    TextArea({ placeholder: '补充细节：浪点、浪高、板型、手感…', text: this.addContent })
      .fontSize(13)
      .fontColor(COLORS.textPrimary)
      .backgroundColor(COLORS.bg)
      .borderRadius(8)
      .height(90)
      .onChange((v: string) => {
        this.addContent = v;
      })
    Row({ space: 10 }) {
      Button()
        .layoutWeight(1)
        .height(38)
        .backgroundColor(COLORS.bg)
        .borderRadius(8)
        .onClick(() => {
          this.addOpen = false;
        })
      Text('取消')
        .fontSize(13)
        .fontColor(COLORS.textSecondary)
        .margin({ left: -52 })
      Button()
        .layoutWeight(1)
        .height(38)
        .backgroundColor(COLORS.primary)
        .borderRadius(8)
        .onClick(() => {
          this.doAdd();
        })
      Text('发布')
        .fontSize(13)
        .fontWeight(FontWeight.Bold)
        .fontColor(COLORS.white)
        .margin({ left: -44 })
    }
    .width('100%')
  }
  .width('100%')
  .padding(16)
  .backgroundColor(COLORS.cardBg)
}

addModalBody 是「发布浪语」新增弹框的主体构建器。弹框内容以 Column 为容器，space 为 12，包含标题、标题输入框、内容文本域和操作按钮行四个部分。TextInput 用于输入浪语标题，placeholder 为「记录今天的冲浪见闻…」，初始文本绑定 this.addTitle，onChange 回调实时更新状态变量。TextArea 用于输入详细内容，placeholder 引导用户「补充细节：浪点、浪高、板型、手感…」，高度 90 像素提供足够的输入空间。

操作按钮行采用与下架/退课按钮相同的 Button + Text 叠加技巧。左侧「取消」按钮使用 bg 色背景（浅色），onClick 关闭弹框（addOpen = false）；右侧「发布」按钮使用 primary 主色蓝背景，onClick 调用 doAdd 方法执行发布逻辑。两个 Button 都设置了 layoutWeight(1) 等宽分配，height(38) 统一高度。叠加的 Text 通过负值 margin（left: -52 和 left: -44）居中定位到各自按钮内，文字样式通过 Text 组件而非 Button 的 fontColor 属性控制，实现了更精细的字体样式管理。

@Builder
editModalBody() {
  Column({ space: 12 }) {
    Text('编辑板型')
      .fontSize(17)
      .fontWeight(FontWeight.Bold)
      .fontColor(COLORS.textPrimary)
    TextInput({ placeholder: '板型名称', text: this.editName })
      .fontSize(13)
      .fontColor(COLORS.textPrimary)
      .backgroundColor(COLORS.bg)
      .borderRadius(8)
      .height(40)
      .onChange((v: string) => {
        this.editName = v;
      })
    TextInput({ placeholder: '板长（如 6\'0"）', text: this.editStyle })
      .fontSize(13)
      .fontColor(COLORS.textPrimary)
      .backgroundColor(COLORS.bg)
      .borderRadius(8)
      .height(40)
      .onChange((v: string) => {
        this.editStyle = v;
      })
    TextArea({ placeholder: '体积与工艺说明', text: this.editNote })
      .fontSize(13)
      .fontColor(COLORS.textPrimary)
      .backgroundColor(COLORS.bg)
      .borderRadius(8)
      .height(70)
      .onChange((v: string) => {
        this.editNote = v;
      })

editModalBody 是「编辑板型」弹框的主体构建器，结构与 addModalBody 高度相似但表单字段不同。它包含三个输入控件：板型名称（TextInput）、板长（TextInput，placeholder 示例为 6'0"）和体积与工艺说明（TextArea）。这三个输入框的初始文本分别绑定 editName、editStyle、editNote 三个状态变量，而这些变量在 openEdit 方法中已被填充为目标板型的当前数据，因此弹框打开时输入框是「预填充」状态，用户可以基于现有信息进行修改。

editModalBody 的操作按钮行与 addModalBody 结构完全一致——左侧「取消」关闭弹框，右侧「保存」调用 doEdit 方法。doEdit 方法使用 splice 替换目标索引的板型数据，实现就地更新。两个弹框构建器（addModalBody 和 editModalBody）的视觉风格统一（标题 17 号粗体、输入框 13 号 bg 背景 8 圆角、按钮 38 高度），操作模式一致（取消+确认的双按钮布局），降低了用户的学习成本。

二十九、delModalBody 删除确认弹框与 bottomBar 底部导航

@Builder
delModalBody() {
  Column({ space: 12 }) {
    Text(this.delTarget === 'board' ? '下架板型' : '退出冲浪课堂')
      .fontSize(17)
      .fontWeight(FontWeight.Bold)
      .fontColor(COLORS.textPrimary)
    Text(this.delTarget === 'board' ? '将下架工坊首块板型，确认执行？' : '将退出首门进行中的课程，确认执行？')
      .fontSize(13)
      .fontColor(COLORS.textSecondary)
    Row({ space: 10 }) {
      Button()
        .layoutWeight(1)
        .height(38)
        .backgroundColor(COLORS.bg)
        .borderRadius(8)
        .onClick(() => {
          this.delOpen = false;
        })
      Text('取消')
        .fontSize(13)
        .fontColor(COLORS.textSecondary)
        .margin({ left: -52 })
      Button()
        .layoutWeight(1)
        .height(38)
        .backgroundColor(COLORS.danger)
        .borderRadius(8)
        .onClick(() => {
          this.doDel();
        })
      Text('确认')
        .fontSize(13)
        .fontWeight(FontWeight.Bold)
        .fontColor(COLORS.white)
        .margin({ left: -44 })
    }
    .width('100%')
  }
  .width('100%')
  .padding(16)
  .backgroundColor(COLORS.cardBg)
}

delModalBody 是删除确认弹框的主体构建器，它通过 delTarget 变量的值动态切换标题和描述文字。当 delTarget 为 ‘board’ 时，标题显示「下架板型」，描述为「将下架工坊首块板型，确认执行？」；当 delTarget 为 ‘course’ 时，标题显示「退出冲浪课堂」，描述为「将退出首门进行中的课程，确认执行？」。这种基于状态变量的条件渲染使同一个弹框构建器能够服务于两种不同的删除场景，是组件复用的典范。

与新增和编辑弹框不同，删除弹框的确认按钮使用 danger 红色背景而非 primary 蓝色。这种颜色差异传达了操作的不可逆性——红色在交互设计中通常表示危险或破坏性操作，提示用户三思而后行。弹框结构简洁，只有标题、描述和双按钮行，没有输入控件，因为删除操作不需要用户输入数据。

@Builder
bottomBar() {
  Row() {
    ForEach(NAV_LIST, (it: NavItem, idx: number) => {
      Column({ space: 2 }) {
        Text(it.icon)
          .fontSize(20)
          .opacity(this.mainTab === idx ? 1 : 0.55)
        Text(it.label)
          .fontSize(10)
          .fontWeight(this.mainTab === idx ? FontWeight.Bold : FontWeight.Normal)
          .fontColor(this.mainTab === idx ? COLORS.primary : COLORS.textHint)
      }
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Center)
      .onClick(() => {
        this.mainTab = idx;
      })
    }, (it: NavItem) => it.label)
  }
  .width('100%')
  .height(56)
  .backgroundColor('#D8E9F3')
  .borderRadius({ topLeft: 16, topRight: 16 })
}

bottomBar 是底部导航栏构建器，通过 ForEach 渲染 NAV_LIST 的四个导航项。每个导航项是一个 Column，包含 Emoji 图标（20 号字）和文字标签（10 号字），通过 layoutWeight(1) 等宽分配。选中态和未选中态的视觉差异通过 opacity（1 vs 0.55）、fontWeight（Bold vs Normal）和 fontColor（primary vs textHint）三个维度的组合来体现，使当前 Tab 在视觉上突出但不刺眼。

导航栏整体高度 56 像素，背景色 #D8E9F3 是一种极淡的蓝灰色，与整体海洋色调协调。顶部圆角（borderRadius topLeft: 16, topRight: 16）使导航栏与上方内容区形成视觉分隔，同时保持了柔和的视觉风格。onClick 回调将 mainTab 赋值为当前点击的索引，触发 mainContent 中的条件分支切换页面内容。底部导航栏作为应用的主导航入口，在所有 Tab 页面中持续可见，确保了用户随时可以切换功能模块。

三十、mainContent 主内容区与 build 主布局

@Builder
mainContent() {
  Column() {
    this.header()
    if (this.mainTab === 0) {
      this.subNav()
      Scroll() {
        Column() {
          if (this.subTab === 0) {
            this.pageFeatured()
          } else if (this.subTab === 1) {
            this.pageBoard()
          } else if (this.subTab === 2) {
            this.pageSpot()
          } else if (this.subTab === 3) {
            this.pageCourse()
          } else if (this.subTab === 4) {
            this.pageStudio()
          } else if (this.subTab === 5) {
            this.pageCircle()
          } else {
            this.pageGear()
          }
        }
        .width('100%')
      }
      .scrollable(ScrollDirection.Vertical)
      .scrollBar(BarState.Off)
      .layoutWeight(1)
      .padding({ left: 14, right: 14, bottom: 20 })
    } else if (this.mainTab === 1) {
      Scroll() {
        Column() {
          this.pageBoard()
        }
        .width('100%')
      }
      .scrollable(ScrollDirection.Vertical)
      .scrollBar(BarState.Off)
      .layoutWeight(1)
      .padding({ left: 14, right: 14, bottom: 20 })

mainContent 是主内容区的构建器，它通过双层条件分支实现了「四主 Tab + 七内容 Tab」的完整导航逻辑。外层条件判断 mainTab：当 mainTab === 0（首页）时，先渲染 subNav 内容子 Tab 导航条，再通过内层条件分支根据 subTab 渲染对应的七个内容页之一（pageFeatured、pageBoard、pageSpot、pageCourse、pageStudio、pageCircle、pageGear）。当 mainTab === 1（板坊）时直接渲染 pageBoard，mainTab === 2（课堂）时渲染 pageCourse，mainTab === 3（我的）时渲染 pageMine。

每个 Tab 的内容都包裹在 Scroll 垂直滚动容器中，设置了 scrollable(ScrollDirection.Vertical)、scrollBar(BarState.Off) 隐藏滚动条、layoutWeight(1) 填充剩余空间、padding 左右 14 底部 20。这种统一的滚动容器配置确保了所有页面在内容超出屏幕时都能平滑滚动，且左右边距一致。mainContent 顶部统一调用 this.header()，使所有 Tab 页面共享相同的头部标题栏。

build() {
  Stack() {
    Column()
      .width('100%')
      .height('100%')
      .backgroundColor(COLORS.bg)
    this.fxLayer()
    Column() {
      this.mainContent()
      this.bottomBar()
    }
    .width('100%')
    .height('100%')
    if (this.addOpen) {
      Stack() {
        this.modalOverlay()
        Column() {
          this.addModalBody()
        }
        .width('88%')
        .constraintSize({ maxHeight: '80%' })
        .borderRadius(16)
        .zIndex(999)
      }
      .width('100%')
      .height('100%')
    }
    if (this.editOpen) {
      Stack() {
        this.modalOverlay()
        Column() {
          this.editModalBody()
        }
        .width('88%')
        .constraintSize({ maxHeight: '80%' })
        .borderRadius(16)
        .zIndex(999)
      }
      .width('100%')
      .height('100%')
    }
    if (this.delOpen) {
      Stack() {
        this.modalOverlay()
        Column() {
          this.delModalBody()
        }
        .width('88%')
        .constraintSize({ maxHeight: '80%' })
        .borderRadius(16)
        .zIndex(999)
      }
      .width('100%')
      .height('100%')
    }
  }
  .width('100%')
  .height('100%')
}

build 方法是整个应用的渲染入口，使用 Stack 作为根容器实现了多层叠加的视觉架构。从下到上依次是四层：第一层是背景色层（Column，COLORS.bg 背景色铺满全屏）；第二层是特效层（this.fxLayer()，渲染海浪波纹和泡沫粒子，hitTestBehavior 设为 None 不拦截点击）；第三层是业务层（Column 包含 mainContent 和 bottomBar，占据全屏）；第四层是弹窗层（三个条件渲染的 Stack，分别对应新增、编辑、删除弹框，仅在对应状态变量为 true 时渲染）。

弹窗层的每个 Stack 内部都包含 modalOverlay（遮罩）和弹框主体 Column。主体 Column 设置了 width(‘88%’)（占屏幕宽度的 88%，居中显示）、constraintSize({ maxHeight: ‘80%’ })（最大高度不超过屏幕的 80%，超出时内容可滚动）、borderRadius(16)（圆角）、zIndex(999)（确保层级最高，覆盖在所有内容之上）。这种「遮罩+主体」的双层弹窗结构是移动端应用的标准模式，通过 Stack 的层叠特性自然实现。

build 方法的 Stack 层叠架构是整个应用技术设计的集大成之处。背景层、特效层、业务层和弹窗层各司其职：背景层提供基础色调，特效层提供沉浸式动画但不干扰交互，业务层承载所有功能内容，弹窗层在需要时覆盖在最上方处理用户输入。四层通过 Stack 自然叠加，无需复杂的 z-index 管理或层级计算。当弹窗状态变量变化时，ArkUI 的条件渲染机制自动添加或移除弹窗层的 DOM 节点，实现了弹窗的平滑显隐。

Mermaid 流程图

技术对比表格

详细总结

从架构设计维度来看，浪语·冲浪板手作工坊采用了清晰的多层分离架构。最底层是数据模型层，使用 @Observed 装饰器定义了 PostItem、BoardItem、SpotItem、GearItem 四个可观察类，为响应式数据更新提供了基础设施。其上是静态数据层，以 const 数组形式集中管理所有预置数据集，作为组件状态的初始值注入。纯函数层封装了图表高度计算、动画坐标计算、状态色映射等无副作用逻辑，可独立测试和复用。组件层通过 @Builder 构建器将 UI 拆分为头部、导航、各内容页、弹窗、特效等独立模块，最终在 build 方法中通过 Stack 层叠组合。这种四层分离的设计使各层职责分明、耦合度低，任何一层的修改都不会波及其他层，为后续的功能扩展和维护奠定了坚实基础。

从状态管理维度来看，应用使用了 16 个 @State 状态变量，覆盖了导航、特效、弹窗、表单和数据列表五大类别。@State 装饰器确保了每个状态变量的变化都能精确触发依赖该变量的 UI 组件重新渲染，无需手动调用 setState 或 invalidate。@Observed 装饰的数据模型类与 @State 数组的配合，使得列表的增删改操作（unshift、splice）能够自动驱动 ForEach 的重新渲染。特别值得一提的是，多个 @Builder 方法引用同一个 @State 数组（如 postList 同时被 pageFeatured 和 pageCircle 引用，boardList 同时被 pageBoard 和 pageMine 引用），任何一处修改都会联动更新所有依赖处，实现了跨页面的数据一致性。

从性能优化维度来看，应用在多个层面进行了性能考量。特效层的 setInterval 选择了 90ms 而非 16ms（60fps）的更新频率，在保证视觉效果的前提下大幅降低了 CPU 和渲染压力。hitTestBehavior(HitTestMode.None) 的设置使特效层不参与事件分发，避免了全屏粒子元素带来的点击检测开销。条件渲染模式确保了未激活的 Tab 页面和未打开的弹窗不会产生任何渲染开销——ArkUI 的 if 分支在条件为 false 时完全不创建对应的组件树。ForEach 的键值函数为每个列表项提供了唯一标识，使得增删操作时框架能执行最小化的 diff，只更新变化的列表项而非整个列表。纯函数的使用避免了不必要的副作用和状态污染，每次调用都是独立的计算。

从交互设计维度来看，应用构建了一套完整的用户交互体系。底部四 Tab 导航提供了应用级的功能切换入口，首页内嵌的七内容 Tab 通过水平滚动条提供了细分的场景导航。三类弹框（新增、编辑、删除）通过统一的遮罩层和相似的主体结构，降低了用户的学习成本。删除确认弹框使用红色确认按钮传达操作的不可逆性，体现了对用户数据安全的尊重。表单弹框的「打开即清空」（新增）和「打开即回填」（编辑）两种模式，分别适应了创建和修改两种场景的交互需求。状态色映射函数将业务状态（制作中、出品、新手、高手等）编码为语义色（绿、橙、红），使用户能够通过颜色快速识别信息类别和安全等级。

从可扩展性维度来看，应用的架构为未来的功能扩展预留了充足空间。数据模型层的 @Observed 装饰使从静态数据到动态 API 数据的迁移无需修改模型定义。静态数据集集中管理的设计使得替换数据源只需修改一处常量定义。@Builder 构建器的模块化拆分使得新增内容页只需定义一个新的构建器方法并在 mainContent 的条件分支中添加对应分支即可。纯函数层的独立设计使得图表计算和动画逻辑可以被新的页面复用。颜色体系的集中管理使得主题切换或暗色模式支持只需替换 COLORS 常量的值。弹窗体系的通用设计使得新增其他类型的弹框（如设置弹框、分享弹框）只需新增一个 ModalBody 构建器和对应的状态变量。

安装DevEco Studio程序

选择目标安装目录：

设置环境变量，但是需要重启一下：

新建一个空白模板：

设置API为24的模板项目：

初始化项目，自动下载相关依赖：

完整代码：

// ============ 浪语·冲浪板手作工坊（882）============
// 场景：冲浪板手作 / 浪况预报 / 冲浪课堂 / 浪友圈
// 底部4主tab（首页/板坊/课堂/我的）+ 首页7内容tab
// 特效：海浪波纹 + 泡沫上浮（特效层位于底层，不遮挡点击）
// 弹框：新增(发浪语) / 编辑(编辑板型) / 删除(下架板型·退课)

interface ColorPalette {
  primary: string;
  primaryLight: string;
  primaryDark: string;
  accent: string;
  accentLight: string;
  bg: string;
  cardBg: string;
  textPrimary: string;
  textSecondary: string;
  textHint: string;
  border: string;
  success: string;
  warning: string;
  danger: string;
  white: string;
  foam: string;
}

const COLORS: ColorPalette = {
  primary: '#2E8FD0',
  primaryLight: '#6FB4E0',
  primaryDark: '#1B5F8E',
  accent: '#FFB25C',
  accentLight: '#FFF3E4',
  bg: '#EAF4F8',
  cardBg: '#FFFFFF',
  textPrimary: '#1E3A4E',
  textSecondary: '#5A7E93',
  textHint: '#9DBBCB',
  border: '#D6E8F2',
  success: '#4FBF85',
  warning: '#E8A84F',
  danger: '#E8605C',
  white: '#FFFFFF',
  foam: '#CFE9F5'
};

// ============ 浪友动态数据模型 ============
@Observed
export class PostItem {
  id: number = 0
  nick: string = ''
  avatar: string = ''
  text: string = ''
  time: string = ''
  likes: number = 0
  constructor(id: number, nick: string, avatar: string, text: string, time: string, likes: number) {
    this.id = id; this.nick = nick; this.avatar = avatar; this.text = text
    this.time = time; this.likes = likes
  }
}

// ============ 板型数据模型 ============
@Observed
export class BoardItem {
  id: number = 0
  name: string = ''
  length: string = ''
  volume: string = ''
  status: string = ''
  tag: string = ''
  constructor(id: number, name: string, length: string, volume: string, status: string, tag: string) {
    this.id = id; this.name = name; this.length = length; this.volume = volume
    this.status = status; this.tag = tag
  }
}

// ============ 浪点数据模型 ============
@Observed
export class SpotItem {
  id: number = 0
  name: string = ''
  wave: string = ''
  wind: string = ''
  level: string = ''
  constructor(id: number, name: string, wave: string, wind: string, level: string) {
    this.id = id; this.name = name; this.wave = wave; this.wind = wind
    this.level = level
  }
}

// ============ 板蜡与配件数据模型 ============
@Observed
export class GearItem {
  id: number = 0
  name: string = ''
  desc: string = ''
  icon: string = ''
  constructor(id: number, name: string, desc: string, icon: string) {
    this.id = id; this.name = name; this.desc = desc; this.icon = icon
  }
}

// ============ 图表与课程接口 ============
interface WaveChartItem {
  label: string;
  value: number;
}

interface StyleChartItem {
  label: string;
  value: number;
  color: string;
}

interface CourseItem {
  title: string;
  week: string;
  progress: number;
  color: string;
}

// ============ 顶层静态数据 ============
const POST_LIST: PostItem[] = [
  new PostItem(1, '浪尖', '🌊', '今早 6 点第一道浪，退潮期浪高 1.2m，起乘那一下太舒服了。', '15分钟前', 88),
  new PostItem(2, '板工', '🛠️', '手工打磨的短板终于出窑（抛光），红木纹路配琥珀环氧。', '40分钟前', 66),
  new PostItem(3, '赶浪人', '🏄', '周末连续追了 4 个浪点，最远开出去 120km，值了！', '1小时前', 59),
  new PostItem(4, '白沫', '🫧', '新手班今日 6 人全部成功站板，教练嗓子已哑。', '2小时前', 74),
  new PostItem(5, '潮汐', '🌙', '大潮日浪涌变大，岸边岩石区谨慎下水，安全第一。', '3小时前', 47),
  new PostItem(6, '长板客', '🏝️', '长板巡航太治愈，配一杯冰椰，海边发呆一下午。', '5小时前', 52),
  new PostItem(7, '鱼鳍', '🔱', '换了新尾鳍（模板 C），切浪转向顺滑度提升明显。', '6小时前', 33),
  new PostItem(8, '岸边人', '📷', '傍晚黄金光线下冲浪剪影合集更新，免费下载原图。', '昨天', 68)
];

const BOARD_LIST: BoardItem[] = [
  new BoardItem(1, '碧波长板', '9\'2"', '68L', '制作中', '巡航'),
  new BoardItem(2, '裂浪短板', '6\'0"', '28L', '出品', '竞技'),
  new BoardItem(3, '晨雾鱼板', '5\'8"', '32L', '出品', '鱼形'),
  new BoardItem(4, '远洋枪板', '7\'6"', '45L', '制作中', '追浪'),
  new BoardItem(5, '泡沫入门', '8\'0"', '75L', '出品', '教学'),
  new BoardItem(6, '双头冲浪', '6\'6"', '36L', '待上漆', '全能'),
  new BoardItem(7, '尾鳍定制', '6\'2"', '30L', '出品', '定制'),
  new BoardItem(8, '复古单鳍', '9\'0"', '58L', '评审', '复古')
];

const SPOT_LIST: SpotItem[] = [
  new SpotItem(1, '白沙滩', '1.2m', '东风 3 级', '新手'),
  new SpotItem(2, '礁石湾', '1.8m', '南风 4 级', '进阶'),
  new SpotItem(3, '灯塔浪', '2.4m', '东北风 5 级', '高手'),
  new SpotItem(4, '港湾口', '1.5m', '东南风 3 级', '中级'),
  new SpotItem(5, '长滩', '1.0m', '东风 2 级', '入门'),
  new SpotItem(6, '断浪角', '2.0m', '西风 4 级', '进阶')
];

const GEAR_LIST: GearItem[] = [
  new GearItem(1, '环氧树脂', '双组份 · 快干', '🧪'),
  new GearItem(2, '玻璃纤维布', '6oz · 平纹', '🕸️'),
  new GearItem(3, '板蜡', '热带 · 常温', '🕯️'),
  new GearItem(4, '尾鳍套装', 'FCS 标准', '🔱'),
  new GearItem(5, '脚绳', '7mm · 9ft', '🪢'),
  new GearItem(6, '砂纸', '240-800 目', '🧽'),
  new GearItem(7, '切割刀', '弧形刀片', '🔪'),
  new GearItem(8, '干湿磨机', '调速 3000rpm', '⚙️')
];

const WAVE_CHART: WaveChartItem[] = [
  { label: '周一', value: 0.8 },
  { label: '周二', value: 1.1 },
  { label: '周三', value: 0.9 },
  { label: '周四', value: 1.4 },
  { label: '周五', value: 1.8 },
  { label: '周六', value: 2.2 },
  { label: '周日', value: 1.6 }
];

const STYLE_CHART: StyleChartItem[] = [
  { label: '长板', value: 78, color: '#2E8FD0' },
  { label: '短板', value: 66, color: '#FFB25C' },
  { label: '鱼板', value: 52, color: '#4FBF85' },
  { label: '枪板', value: 41, color: '#E8605C' },
  { label: '复古', value: 28, color: '#9DBBCB' }
];

const COURSE_LIST: CourseItem[] = [
  { title: '冲浪入门课', week: '第 1-3 周', progress: 92, color: '#2E8FD0' },
  { title: '站板与划水', week: '第 2-4 周', progress: 71, color: '#FFB25C' },
  { title: '追浪与转向', week: '第 4-6 周', progress: 45, color: '#4FBF85' },
  { title: '板体打磨工艺', week: '第 5-8 周', progress: 26, color: '#E8605C' },
  { title: '环氧上漆实操', week: '第 7-9 周', progress: 10, color: '#9DBBCB' }
];

// ============ 导航配置 ============
interface NavItem {
  icon: string;
  label: string;
}

const NAV_LIST: NavItem[] = [
  { icon: '🌊', label: '首页' },
  { icon: '🛠️', label: '板坊' },
  { icon: '📚', label: '课堂' },
  { icon: '👤', label: '我的' }
];

const SUB_NAV_LIST: string[] = ['精选', '板型工坊', '浪点预报', '冲浪课堂', '手作工坊', '浪友圈', '配件库'];

// ============ 顶层纯函数 ============
function barH(v: number, max: number): number {
  return Math.round(120 * v / max);
}

function styleColor(v: number): string {
  if (v > 70) {
    return '#2E8FD0';
  } else if (v > 50) {
    return '#FFB25C';
  }
  return '#4FBF85';
}

function waveX(tick: number, i: number): number {
  return 30 + ((tick * 4 + i * 83) % 600);
}

function waveY(tick: number, i: number): number {
  return 80 + ((tick * 2 + i * 47) % 340);
}

function waveH(tick: number, i: number): number {
  return 4 + ((tick + i * 3) % 8);
}

function foamY(tick: number, i: number): number {
  return 420 - ((tick * 3 + i * 59) % 360);
}

function foamA(tick: number): number {
  return tick % 2 === 0 ? 0.8 : 0.3;
}

function boardColor(s: string): string {
  if (s === '出品' || s === '评审') {
    return '#4FBF85';
  } else if (s === '制作中' || s === '待上漆') {
    return '#E8A84F';
  }
  return '#E8605C';
}

function spotColor(s: string): string {
  if (s === '新手' || s === '入门') {
    return '#4FBF85';
  } else if (s === '中级' || s === '进阶') {
    return '#E8A84F';
  }
  return '#E8605C';
}

@Entry
@Component
struct PageWave {
  @State mainTab: number = 0
  @State subTab: number = 0
  @State tick: number = 0
  @State glow: number = 0
  @State addOpen: boolean = false
  @State editOpen: boolean = false
  @State delOpen: boolean = false
  @State editIdx: number = 0
  @State delTarget: string = 'board'
  @State editName: string = ''
  @State editStyle: string = ''
  @State editNote: string = ''
  @State addTitle: string = ''
  @State addContent: string = ''
  @State postList: PostItem[] = POST_LIST
  @State boardList: BoardItem[] = BOARD_LIST
  @State fxTimer: number = -1

  aboutToAppear(): void {
    this.fxTimer = setInterval(() => {
      this.tick = this.tick + 1;
      this.glow = (this.glow + 1) % 2;
    }, 90);
  }

  aboutToDisappear(): void {
    if (this.fxTimer > 0) {
      clearInterval(this.fxTimer);
      this.fxTimer = -1;
    }
  }

  openAdd(): void {
    this.addTitle = '';
    this.addContent = '';
    this.addOpen = true;
  }

  openEdit(index: number): void {
    if (index >= 0 && index < this.boardList.length) {
      this.editIdx = index;
      this.editName = this.boardList[index].name;
      this.editStyle = this.boardList[index].length;
      this.editNote = this.boardList[index].volume;
    }
    this.editOpen = true;
  }

  openDelA(): void {
    this.delTarget = 'board';
    this.delOpen = true;
  }

  openDelB(): void {
    this.delTarget = 'course';
    this.delOpen = true;
  }

  doAdd(): void {
    if (this.addTitle.length > 0) {
      this.postList.unshift(new PostItem(999, '我的浪语', '🌊', this.addTitle, '刚刚', 0));
    }
    this.addOpen = false;
  }

  doEdit(): void {
    if (this.editIdx >= 0 && this.editIdx < this.boardList.length) {
      this.boardList.splice(this.editIdx, 1, new BoardItem(this.boardList[this.editIdx].id, this.editName, this.editStyle, this.editNote, '制作中', '定制'));
    }
    this.editOpen = false;
  }

  doDel(): void {
    if (this.delTarget === 'board' && this.boardList.length > 0) {
      this.boardList.splice(0, 1);
    } else if (this.delTarget === 'course' && this.postList.length > 0) {
      this.postList.splice(0, 1);
    }
    this.delOpen = false;
  }

  @Builder
  fxLayer() {
    Stack({ alignContent: Alignment.TopStart }) {
      ForEach([0, 1, 2, 3, 4, 5, 6, 7], (i: number) => {
        Column()
          .width(waveH(this.tick, i) * 6)
          .height(3)
          .borderRadius(2)
          .backgroundColor('#FFFFFF')
          .opacity(0.7)
          .translate({ x: waveX(this.tick, i), y: waveY(this.tick, i) })
      }, (i: number) => i.toString())
      ForEach([0, 1, 2, 3, 4, 5, 6], (i: number) => {
        Column()
          .width(4)
          .height(4)
          .borderRadius(2)
          .backgroundColor(COLORS.foam)
          .opacity(foamA(this.tick))
          .translate({ x: 50 + i * 88, y: foamY(this.tick, i) })
      }, (i: number) => i.toString())
    }
    .width('100%')
    .height('100%')
    .hitTestBehavior(HitTestMode.None)
  }

  @Builder
  header() {
    Row() {
      Column() {
        Text('浪语板坊')
          .fontSize(21)
          .fontWeight(FontWeight.Bold)
          .fontColor(COLORS.textPrimary)
        Text('板型工坊 · 浪点预报 · 冲浪课堂')
          .fontSize(11)
          .fontColor(COLORS.textSecondary)
          .margin({ top: 2 })
      }
      .alignItems(HorizontalAlign.Start)
      .layoutWeight(1)
      Text('🌊')
        .fontSize(24)
      Text('🏄')
        .fontSize(22)
        .margin({ left: 10 })
    }
    .width('100%')
    .padding({ top: 8, bottom: 8 })
  }

  @Builder
  subNav() {
    Scroll() {
      Row({ space: 8 }) {
        ForEach(SUB_NAV_LIST, (item: string, idx: number) => {
          Text(item)
            .fontSize(13)
            .fontWeight(this.subTab === idx ? FontWeight.Bold : FontWeight.Normal)
            .fontColor(this.subTab === idx ? COLORS.white : COLORS.textSecondary)
            .backgroundColor(this.subTab === idx ? COLORS.primary : COLORS.cardBg)
            .padding({ left: 14, right: 14, top: 7, bottom: 7 })
            .borderRadius(16)
            .onClick(() => {
              this.subTab = idx;
            })
        }, (item: string) => item)
      }
      .width('100%')
    }
    .scrollable(ScrollDirection.Horizontal)
    .scrollBar(BarState.Off)
    .padding({ top: 4, bottom: 10 })
  }

  @Builder
  pageFeatured() {
    Column({ space: 12 }) {
      // 一周浪高柱状大卡
      Column() {
        Row() {
          Text('一周浪高预报')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
            .layoutWeight(1)
          Text('单位 米')
            .fontSize(10)
            .fontColor(COLORS.textHint)
        }
        .width('100%')
        Row({ space: 10 }) {
          ForEach(WAVE_CHART, (it: WaveChartItem) => {
            Column({ space: 4 }) {
              Column()
                .width(22)
                .height(barH(it.value, 2.4))
                .borderRadius(6)
                .backgroundColor(styleColor(it.value))
              Text(it.label)
                .fontSize(10)
                .fontColor(COLORS.textSecondary)
            }
            .layoutWeight(1)
            .alignItems(HorizontalAlign.Center)
          }, (it: WaveChartItem) => it.label + it.value.toString())
        }
        .width('100%')
        .alignItems(VerticalAlign.Bottom)
        .height(150)
        .margin({ top: 12 })
        Row({ space: 6 }) {
          Text('周末最佳浪高')
            .fontSize(11)
            .fontColor(COLORS.textSecondary)
          Text('2.2m')
            .fontSize(14)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.primary)
        }
        .width('100%')
        .margin({ top: 12 })
      }
      .width('100%')
      .padding(14)
      .backgroundColor(COLORS.cardBg)
      .borderRadius(14)

      // 板型占比
      Column() {
        Text('板型占比')
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .fontColor(COLORS.textPrimary)
          .width('100%')
        ForEach(STYLE_CHART, (it: StyleChartItem) => {
          Row({ space: 8 }) {
            Text(it.label)
              .fontSize(12)
              .fontColor(COLORS.textSecondary)
              .width(56)
            Stack({ alignContent: Alignment.Start }) {
              Row()
                .width('100%')
                .height(8)
                .borderRadius(4)
                .backgroundColor(COLORS.border)
              Row()
                .width(`${it.value}%`)
                .height(8)
                .borderRadius(4)
                .backgroundColor(it.color)
            }
            .layoutWeight(1)
            Text(`${it.value}%`)
              .fontSize(11)
              .fontWeight(FontWeight.Bold)
              .fontColor(COLORS.textPrimary)
              .width(44)
              .textAlign(TextAlign.End)
          }
          .width('100%')
          .margin({ top: 8 })
        }, (it: StyleChartItem) => it.label)
      }
      .width('100%')
      .padding(14)
      .backgroundColor(COLORS.cardBg)
      .borderRadius(14)

      // 板型工坊双列
      Column() {
        Row() {
          Text('工坊热门板型')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
            .layoutWeight(1)
          Text('查看全部')
            .fontSize(11)
            .fontColor(COLORS.primary)
        }
        .width('100%')
        .margin({ bottom: 10 })
        ForEach(this.boardList, (it: BoardItem, idx: number) => {
          if (idx % 2 === 0) {
            Row({ space: 10 }) {
              if (idx < this.boardList.length) {
                Column({ space: 6 }) {
                  Text(it.name)
                    .fontSize(15)
                    .fontWeight(FontWeight.Bold)
                    .fontColor(COLORS.textPrimary)
                  Text(`${it.length} · ${it.volume}`)
                    .fontSize(11)
                    .fontColor(COLORS.textSecondary)
                  Row({ space: 6 }) {
                    Text(it.status)
                      .fontSize(10)
                      .fontWeight(FontWeight.Bold)
                      .fontColor(boardColor(it.status))
                      .padding({ left: 6, right: 6, top: 2, bottom: 2 })
                      .backgroundColor(COLORS.bg)
                      .borderRadius(6)
                    Text(it.tag)
                      .fontSize(10)
                      .fontColor(COLORS.textHint)
                  }
                  .width('100%')
                }
                .layoutWeight(1)
                .padding(12)
                .backgroundColor(COLORS.cardBg)
                .borderRadius(12)
              }
              if (idx + 1 < this.boardList.length) {
                Column({ space: 6 }) {
                  Text(this.boardList[idx + 1].name)
                    .fontSize(15)
                    .fontWeight(FontWeight.Bold)
                    .fontColor(COLORS.textPrimary)
                  Text(`${this.boardList[idx + 1].length} · ${this.boardList[idx + 1].volume}`)
                    .fontSize(11)
                    .fontColor(COLORS.textSecondary)
                  Row({ space: 6 }) {
                    Text(this.boardList[idx + 1].status)
                      .fontSize(10)
                      .fontWeight(FontWeight.Bold)
                      .fontColor(boardColor(this.boardList[idx + 1].status))
                      .padding({ left: 6, right: 6, top: 2, bottom: 2 })
                      .backgroundColor(COLORS.bg)
                      .borderRadius(6)
                    Text(this.boardList[idx + 1].tag)
                      .fontSize(10)
                      .fontColor(COLORS.textHint)
                  }
                  .width('100%')
                }
                .layoutWeight(1)
                .padding(12)
                .backgroundColor(COLORS.cardBg)
                .borderRadius(12)
              }
            }
            .width('100%')
          }
        }, (it: BoardItem) => it.id.toString())
      }
      .width('100%')

      // 浪友动态
      Column({ space: 10 }) {
        Row() {
          Text('浪友动态')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
            .layoutWeight(1)
          Text('发浪语')
            .fontSize(12)
            .fontColor(COLORS.primary)
            .onClick(() => {
              this.openAdd();
            })
        }
        .width('100%')
        ForEach(this.postList.slice(0, 3), (it: PostItem) => {
          Row({ space: 10 }) {
            Text(it.avatar)
              .fontSize(22)
            Column({ space: 3 }) {
              Row() {
                Text(it.nick)
                  .fontSize(13)
                  .fontWeight(FontWeight.Bold)
                  .fontColor(COLORS.textPrimary)
                  .layoutWeight(1)
                Text(it.time)
                  .fontSize(10)
                  .fontColor(COLORS.textHint)
              }
              .width('100%')
              Text(it.text)
                .fontSize(12)
                .fontColor(COLORS.textSecondary)
                .maxLines(2)
                .textOverflow({ overflow: TextOverflow.Ellipsis })
              Row() {
                Text(`👍 ${it.likes}`)
                  .fontSize(11)
                  .fontColor(COLORS.textHint)
              }
              .width('100%')
            }
            .layoutWeight(1)
          }
          .width('100%')
          .padding(12)
          .backgroundColor(COLORS.cardBg)
          .borderRadius(12)
        }, (it: PostItem) => it.id.toString())
      }
      .width('100%')
    }
    .width('100%')
  }

  @Builder
  pageBoard() {
    Column({ space: 10 }) {
      Row() {
        Text('板型工坊')
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .fontColor(COLORS.textPrimary)
          .layoutWeight(1)
        Text('新建板型')
          .fontSize(12)
          .fontColor(COLORS.primary)
          .onClick(() => {
            this.openAdd();
          })
      }
      .width('100%')
      ForEach(this.boardList, (it: BoardItem, idx: number) => {
        Column({ space: 6 }) {
          Row() {
            Column()
              .width(4)
              .height(38)
              .borderRadius(2)
              .backgroundColor(it.status === '出品' ? COLORS.success : COLORS.warning)
            Column({ space: 4 }) {
              Row() {
                Text(it.name)
                  .fontSize(14)
                  .fontWeight(FontWeight.Bold)
                  .fontColor(COLORS.textPrimary)
                  .layoutWeight(1)
                Text(it.status)
                  .fontSize(10)
                  .fontWeight(FontWeight.Bold)
                  .fontColor(boardColor(it.status))
                  .padding({ left: 6, right: 6, top: 2, bottom: 2 })
                  .backgroundColor(COLORS.bg)
                  .borderRadius(6)
              }
              .width('100%')
              Row({ space: 8 }) {
                Text(`📏 ${it.length}`)
                  .fontSize(11)
                  .fontColor(COLORS.textSecondary)
                Text(`🫧 ${it.volume}`)
                  .fontSize(11)
                  .fontColor(COLORS.textSecondary)
              }
              .width('100%')
            }
            .layoutWeight(1)
            .alignItems(HorizontalAlign.Start)
          }
          .width('100%')
          Row({ space: 10 }) {
            Text('编辑')
              .fontSize(11)
              .fontColor(COLORS.primary)
              .onClick(() => {
                this.openEdit(idx);
              })
          }
          .width('100%')
          .justifyContent(FlexAlign.End)
        }
        .width('100%')
        .padding(12)
        .backgroundColor(COLORS.cardBg)
        .borderRadius(12)
      }, (it: BoardItem) => it.id.toString())
      Button()
        .width('100%')
        .height(42)
        .backgroundColor(COLORS.danger)
        .borderRadius(10)
        .opacity(0.9)
        .onClick(() => {
          this.openDelA();
        })
      Text('下架板型')
        .fontSize(14)
        .fontColor(COLORS.white)
        .margin({ left: -70, top: -32 })
    }
    .width('100%')
  }

  @Builder
  pageSpot() {
    Column({ space: 10 }) {
      Text('浪点预报')
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .fontColor(COLORS.textPrimary)
        .width('100%')
      ForEach(SPOT_LIST, (it: SpotItem) => {
        Column({ space: 6 }) {
          Row() {
            Text(it.name)
              .fontSize(14)
              .fontWeight(FontWeight.Bold)
              .fontColor(COLORS.textPrimary)
              .layoutWeight(1)
            Text(it.level)
              .fontSize(10)
              .fontWeight(FontWeight.Bold)
              .fontColor(spotColor(it.level))
              .padding({ left: 6, right: 6, top: 2, bottom: 2 })
              .backgroundColor(COLORS.bg)
              .borderRadius(6)
          }
          .width('100%')
          Row({ space: 10 }) {
            Text(`🌊 浪高 ${it.wave}`)
              .fontSize(12)
              .fontColor(COLORS.textSecondary)
            Text(`💨 风向 ${it.wind}`)
              .fontSize(12)
              .fontColor(COLORS.textSecondary)
          }
          .width('100%')
          Row({ space: 8 }) {
            Text('适合')
              .fontSize(11)
              .fontColor(COLORS.textHint)
            Text(it.level)
              .fontSize(11)
              .fontColor(COLORS.primary)
          }
          .width('100%')
        }
        .width('100%')
        .padding(12)
        .backgroundColor(COLORS.cardBg)
        .borderRadius(12)
      }, (it: SpotItem) => it.id.toString())
    }
    .width('100%')
  }

  @Builder
  pageCourse() {
    Column({ space: 10 }) {
      Text('冲浪课堂')
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .fontColor(COLORS.textPrimary)
        .width('100%')
      ForEach(COURSE_LIST, (it: CourseItem) => {
        Column({ space: 8 }) {
          Row() {
            Text(it.title)
              .fontSize(14)
              .fontWeight(FontWeight.Bold)
              .fontColor(COLORS.textPrimary)
              .layoutWeight(1)
            Text(it.week)
              .fontSize(11)
              .fontColor(COLORS.textHint)
          }
          .width('100%')
          Stack({ alignContent: Alignment.Start }) {
            Row()
              .width('100%')
              .height(8)
              .borderRadius(4)
              .backgroundColor(COLORS.border)
            Row()
              .width(`${it.progress}%`)
              .height(8)
              .borderRadius(4)
              .backgroundColor(it.color)
          }
          .width('100%')
          Row() {
            Text('已学')
              .fontSize(11)
              .fontColor(COLORS.textSecondary)
              .layoutWeight(1)
            Text(`${it.progress}%`)
              .fontSize(11)
              .fontWeight(FontWeight.Bold)
              .fontColor(COLORS.primary)
          }
          .width('100%')
        }
        .width('100%')
        .padding(12)
        .backgroundColor(COLORS.cardBg)
        .borderRadius(12)
      }, (it: CourseItem) => it.title)
      Button()
        .width('100%')
        .height(42)
        .backgroundColor(COLORS.danger)
        .borderRadius(10)
        .opacity(0.9)
        .onClick(() => {
          this.openDelB();
        })
      Text('退课')
        .fontSize(14)
        .fontColor(COLORS.white)
        .margin({ left: -28, top: -32 })
    }
    .width('100%')
  }

  @Builder
  pageStudio() {
    Column({ space: 10 }) {
      Text('手作工坊')
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .fontColor(COLORS.textPrimary)
        .width('100%')
      Column({ space: 6 }) {
        Row() {
          Text('碧波长板打磨')
            .fontSize(14)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
            .layoutWeight(1)
          Text('🕘 明日 10:00')
            .fontSize(11)
            .fontColor(COLORS.warning)
        }
        .width('100%')
        Row({ space: 12 }) {
          Text('工位：A-3')
            .fontSize(11)
            .fontColor(COLORS.textSecondary)
          Text('时长：4 小时')
            .fontSize(11)
            .fontColor(COLORS.textSecondary)
        }
        .width('100%')
        Text('已进入打磨工序，需自备防护口罩')
          .fontSize(12)
          .fontColor(COLORS.primary)
      }
      .width('100%')
      .padding(12)
      .backgroundColor(COLORS.cardBg)
      .borderRadius(12)
      Column({ space: 6 }) {
        Row() {
          Text('环氧上漆班')
            .fontSize(14)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
            .layoutWeight(1)
          Text('🧪 周六 14:00')
            .fontSize(11)
            .fontColor(COLORS.textHint)
        }
        .width('100%')
        Row({ space: 12 }) {
          Text('场地：漆房')
            .fontSize(11)
            .fontColor(COLORS.textSecondary)
          Text('人数：限 6 人')
            .fontSize(11)
            .fontColor(COLORS.textSecondary)
        }
        .width('100%')
        Text('琥珀环氧配色教学，含 2 次返工打磨')
          .fontSize(12)
          .fontColor(COLORS.textSecondary)
      }
      .width('100%')
      .padding(12)
      .backgroundColor(COLORS.cardBg)
      .borderRadius(12)
      Column({ space: 10 }) {
        Row({ space: 10 }) {
          Column({ space: 6 }) {
            Text('📏')
              .fontSize(26)
            Text('压板台')
              .fontSize(14)
              .fontWeight(FontWeight.Bold)
              .fontColor(COLORS.textPrimary)
            Text('3m · 液压')
              .fontSize(11)
              .fontColor(COLORS.textSecondary)
            Text('去预约')
              .fontSize(11)
              .fontColor(COLORS.primary)
              .margin({ top: 4 })
          }
          .layoutWeight(1)
          .alignItems(HorizontalAlign.Start)
          .padding(12)
          .backgroundColor(COLORS.cardBg)
          .borderRadius(12)
          Column({ space: 6 }) {
            Text('🪚')
              .fontSize(26)
            Text('修边机')
              .fontSize(14)
              .fontWeight(FontWeight.Bold)
              .fontColor(COLORS.textPrimary)
            Text('弧形导轨')
              .fontSize(11)
              .fontColor(COLORS.textSecondary)
            Text('去预约')
              .fontSize(11)
              .fontColor(COLORS.primary)
              .margin({ top: 4 })
          }
          .layoutWeight(1)
          .alignItems(HorizontalAlign.Start)
          .padding(12)
          .backgroundColor(COLORS.cardBg)
          .borderRadius(12)
        }
        .width('100%')
        Row({ space: 10 }) {
          Column({ space: 6 }) {
            Text('🌡️')
              .fontSize(26)
            Text('恒温烘房')
              .fontSize(14)
              .fontWeight(FontWeight.Bold)
              .fontColor(COLORS.textPrimary)
            Text('45°C 恒温')
              .fontSize(11)
              .fontColor(COLORS.textSecondary)
            Text('去预约')
              .fontSize(11)
              .fontColor(COLORS.primary)
              .margin({ top: 4 })
          }
          .layoutWeight(1)
          .alignItems(HorizontalAlign.Start)
          .padding(12)
          .backgroundColor(COLORS.cardBg)
          .borderRadius(12)
          Column({ space: 6 }) {
            Text('🏄')
              .fontSize(26)
            Text('试板水池')
              .fontSize(14)
              .fontWeight(FontWeight.Bold)
              .fontColor(COLORS.textPrimary)
            Text('人造浪 · 8m')
              .fontSize(11)
              .fontColor(COLORS.textSecondary)
            Text('去试板')
              .fontSize(11)
              .fontColor(COLORS.primary)
              .margin({ top: 4 })
          }
          .layoutWeight(1)
          .alignItems(HorizontalAlign.Start)
          .padding(12)
          .backgroundColor(COLORS.cardBg)
          .borderRadius(12)
        }
        .width('100%')
      }
      .width('100%')
    }
    .width('100%')
  }

  @Builder
  pageCircle() {
    Column({ space: 10 }) {
      Row() {
        Text('浪友圈')
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .fontColor(COLORS.textPrimary)
          .layoutWeight(1)
        Text('发浪语')
          .fontSize(12)
          .fontColor(COLORS.primary)
          .onClick(() => {
            this.openAdd();
          })
      }
      .width('100%')
      ForEach(this.postList, (it: PostItem) => {
        Row({ space: 10 }) {
          Text(it.avatar)
            .fontSize(26)
          Column({ space: 4 }) {
            Row() {
              Text(it.nick)
                .fontSize(14)
                .fontWeight(FontWeight.Bold)
                .fontColor(COLORS.textPrimary)
                .layoutWeight(1)
              Text(it.time)
                .fontSize(10)
                .fontColor(COLORS.textHint)
            }
            .width('100%')
            Text(it.text)
              .fontSize(13)
              .fontColor(COLORS.textSecondary)
            Text(`👍 ${it.likes} · 💬 回复`)
              .fontSize(11)
              .fontColor(COLORS.textHint)
          }
          .layoutWeight(1)
        }
        .width('100%')
        .padding(12)
        .backgroundColor(COLORS.cardBg)
        .borderRadius(12)
      }, (it: PostItem) => it.id.toString())
    }
    .width('100%')
  }

  @Builder
  pageGear() {
    Column({ space: 10 }) {
      Text('配件库')
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .fontColor(COLORS.textPrimary)
        .width('100%')
      ForEach(GEAR_LIST, (it: GearItem, idx: number) => {
        if (idx % 2 === 0) {
          Row({ space: 10 }) {
            if (idx < GEAR_LIST.length) {
              Column({ space: 6 }) {
                Text(GEAR_LIST[idx].icon)
                  .fontSize(26)
                Text(GEAR_LIST[idx].name)
                  .fontSize(14)
                  .fontWeight(FontWeight.Bold)
                  .fontColor(COLORS.textPrimary)
                Text(GEAR_LIST[idx].desc)
                  .fontSize(11)
                  .fontColor(COLORS.textSecondary)
                Text('去购买')
                  .fontSize(11)
                  .fontColor(COLORS.primary)
                  .margin({ top: 4 })
              }
              .layoutWeight(1)
              .alignItems(HorizontalAlign.Start)
              .padding(12)
              .backgroundColor(COLORS.cardBg)
              .borderRadius(12)
            }
            if (idx + 1 < GEAR_LIST.length) {
              Column({ space: 6 }) {
                Text(GEAR_LIST[idx + 1].icon)
                  .fontSize(26)
                Text(GEAR_LIST[idx + 1].name)
                  .fontSize(14)
                  .fontWeight(FontWeight.Bold)
                  .fontColor(COLORS.textPrimary)
                Text(GEAR_LIST[idx + 1].desc)
                  .fontSize(11)
                  .fontColor(COLORS.textSecondary)
                Text('去购买')
                  .fontSize(11)
                  .fontColor(COLORS.primary)
                  .margin({ top: 4 })
              }
              .layoutWeight(1)
              .alignItems(HorizontalAlign.Start)
              .padding(12)
              .backgroundColor(COLORS.cardBg)
              .borderRadius(12)
            }
          }
          .width('100%')
        }
      }, (it: GearItem) => it.id.toString())
    }
    .width('100%')
  }

  @Builder
  pageMine() {
    Column({ space: 12 }) {
      Row({ space: 12 }) {
        Text('🐬')
          .fontSize(40)
        Column({ space: 4 }) {
          Text('冲浪手作人')
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
          Text('Lv.11 · 追浪 28 站 · 手作 15 板')
            .fontSize(11)
            .fontColor(COLORS.textSecondary)
        }
        .alignItems(HorizontalAlign.Start)
        .layoutWeight(1)
      }
      .width('100%')
      .padding(14)
      .backgroundColor(COLORS.cardBg)
      .borderRadius(14)
      Column({ space: 10 }) {
        Row() {
          Text('我的板型')
            .fontSize(14)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
            .layoutWeight(1)
          Text(`${this.boardList.length} 块`)
            .fontSize(12)
            .fontColor(COLORS.primary)
        }
        .width('100%')
        ForEach(this.boardList.slice(0, 3), (it: BoardItem) => {
          Row() {
            Text(it.name)
              .fontSize(13)
              .fontColor(COLORS.textSecondary)
              .layoutWeight(1)
            Text(it.status)
              .fontSize(11)
              .fontColor(boardColor(it.status))
          }
          .width('100%')
        }, (it: BoardItem) => it.id.toString())
      }
      .width('100%')
      .padding(14)
      .backgroundColor(COLORS.cardBg)
      .borderRadius(14)
      Column({ space: 10 }) {
        Row() {
          Text('我的动态')
            .fontSize(14)
            .fontWeight(FontWeight.Bold)
            .fontColor(COLORS.textPrimary)
            .layoutWeight(1)
          Text(`${this.postList.length} 条`)
            .fontSize(12)
            .fontColor(COLORS.primary)
        }
        .width('100%')
        ForEach(this.postList.slice(0, 3), (it: PostItem) => {
          Row() {
            Text(it.nick)
              .fontSize(13)
              .fontColor(COLORS.textSecondary)
              .layoutWeight(1)
            Text(it.time)
              .fontSize(11)
              .fontColor(COLORS.textHint)
          }
          .width('100%')
        }, (it: PostItem) => it.id.toString())
      }
      .width('100%')
      .padding(14)
      .backgroundColor(COLORS.cardBg)
      .borderRadius(14)
    }
    .width('100%')
  }

  @Builder
  modalOverlay() {
    Stack() {
      Column()
        .width('100%')
        .height('100%')
        .backgroundColor('#000000')
        .opacity(0.45)
        .onClick(() => {
          this.addOpen = false;
          this.editOpen = false;
          this.delOpen = false;
        })
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  addModalBody() {
    Column({ space: 12 }) {
      Text('发布浪语')
        .fontSize(17)
        .fontWeight(FontWeight.Bold)
        .fontColor(COLORS.textPrimary)
      TextInput({ placeholder: '记录今天的冲浪见闻…', text: this.addTitle })
        .fontSize(13)
        .fontColor(COLORS.textPrimary)
        .backgroundColor(COLORS.bg)
        .borderRadius(8)
        .height(40)
        .onChange((v: string) => {
          this.addTitle = v;
        })
      TextArea({ placeholder: '补充细节：浪点、浪高、板型、手感…', text: this.addContent })
        .fontSize(13)
        .fontColor(COLORS.textPrimary)
        .backgroundColor(COLORS.bg)
        .borderRadius(8)
        .height(90)
        .onChange((v: string) => {
          this.addContent = v;
        })
      Row({ space: 10 }) {
        Button()
          .layoutWeight(1)
          .height(38)
          .backgroundColor(COLORS.bg)
          .borderRadius(8)
          .onClick(() => {
            this.addOpen = false;
          })
        Text('取消')
          .fontSize(13)
          .fontColor(COLORS.textSecondary)
          .margin({ left: -52 })
        Button()
          .layoutWeight(1)
          .height(38)
          .backgroundColor(COLORS.primary)
          .borderRadius(8)
          .onClick(() => {
            this.doAdd();
          })
        Text('发布')
          .fontSize(13)
          .fontWeight(FontWeight.Bold)
          .fontColor(COLORS.white)
          .margin({ left: -44 })
      }
      .width('100%')
    }
    .width('100%')
    .padding(16)
    .backgroundColor(COLORS.cardBg)
  }

  @Builder
  editModalBody() {
    Column({ space: 12 }) {
      Text('编辑板型')
        .fontSize(17)
        .fontWeight(FontWeight.Bold)
        .fontColor(COLORS.textPrimary)
      TextInput({ placeholder: '板型名称', text: this.editName })
        .fontSize(13)
        .fontColor(COLORS.textPrimary)
        .backgroundColor(COLORS.bg)
        .borderRadius(8)
        .height(40)
        .onChange((v: string) => {
          this.editName = v;
        })
      TextInput({ placeholder: '板长（如 6\'0"）', text: this.editStyle })
        .fontSize(13)
        .fontColor(COLORS.textPrimary)
        .backgroundColor(COLORS.bg)
        .borderRadius(8)
        .height(40)
        .onChange((v: string) => {
          this.editStyle = v;
        })
      TextArea({ placeholder: '体积与工艺说明', text: this.editNote })
        .fontSize(13)
        .fontColor(COLORS.textPrimary)
        .backgroundColor(COLORS.bg)
        .borderRadius(8)
        .height(70)
        .onChange((v: string) => {
          this.editNote = v;
        })
      Row({ space: 10 }) {
        Button()
          .layoutWeight(1)
          .height(38)
          .backgroundColor(COLORS.bg)
          .borderRadius(8)
          .onClick(() => {
            this.editOpen = false;
          })
        Text('取消')
          .fontSize(13)
          .fontColor(COLORS.textSecondary)
          .margin({ left: -52 })
        Button()
          .layoutWeight(1)
          .height(38)
          .backgroundColor(COLORS.primary)
          .borderRadius(8)
          .onClick(() => {
            this.doEdit();
          })
        Text('保存')
          .fontSize(13)
          .fontWeight(FontWeight.Bold)
          .fontColor(COLORS.white)
          .margin({ left: -44 })
      }
      .width('100%')
    }
    .width('100%')
    .padding(16)
    .backgroundColor(COLORS.cardBg)
  }

  @Builder
  delModalBody() {
    Column({ space: 12 }) {
      Text(this.delTarget === 'board' ? '下架板型' : '退出冲浪课堂')
        .fontSize(17)
        .fontWeight(FontWeight.Bold)
        .fontColor(COLORS.textPrimary)
      Text(this.delTarget === 'board' ? '将下架工坊首块板型，确认执行？' : '将退出首门进行中的课程，确认执行？')
        .fontSize(13)
        .fontColor(COLORS.textSecondary)
      Row({ space: 10 }) {
        Button()
          .layoutWeight(1)
          .height(38)
          .backgroundColor(COLORS.bg)
          .borderRadius(8)
          .onClick(() => {
            this.delOpen = false;
          })
        Text('取消')
          .fontSize(13)
          .fontColor(COLORS.textSecondary)
          .margin({ left: -52 })
        Button()
          .layoutWeight(1)
          .height(38)
          .backgroundColor(COLORS.danger)
          .borderRadius(8)
          .onClick(() => {
            this.doDel();
          })
        Text('确认')
          .fontSize(13)
          .fontWeight(FontWeight.Bold)
          .fontColor(COLORS.white)
          .margin({ left: -44 })
      }
      .width('100%')
    }
    .width('100%')
    .padding(16)
    .backgroundColor(COLORS.cardBg)
  }

  @Builder
  bottomBar() {
    Row() {
      ForEach(NAV_LIST, (it: NavItem, idx: number) => {
        Column({ space: 2 }) {
          Text(it.icon)
            .fontSize(20)
            .opacity(this.mainTab === idx ? 1 : 0.55)
          Text(it.label)
            .fontSize(10)
            .fontWeight(this.mainTab === idx ? FontWeight.Bold : FontWeight.Normal)
            .fontColor(this.mainTab === idx ? COLORS.primary : COLORS.textHint)
        }
        .layoutWeight(1)
        .alignItems(HorizontalAlign.Center)
        .onClick(() => {
          this.mainTab = idx;
        })
      }, (it: NavItem) => it.label)
    }
    .width('100%')
    .height(56)
    .backgroundColor('#D8E9F3')
    .borderRadius({ topLeft: 16, topRight: 16 })
  }

  @Builder
  mainContent() {
    Column() {
      this.header()
      if (this.mainTab === 0) {
        this.subNav()
        Scroll() {
          Column() {
            if (this.subTab === 0) {
              this.pageFeatured()
            } else if (this.subTab === 1) {
              this.pageBoard()
            } else if (this.subTab === 2) {
              this.pageSpot()
            } else if (this.subTab === 3) {
              this.pageCourse()
            } else if (this.subTab === 4) {
              this.pageStudio()
            } else if (this.subTab === 5) {
              this.pageCircle()
            } else {
              this.pageGear()
            }
          }
          .width('100%')
        }
        .scrollable(ScrollDirection.Vertical)
        .scrollBar(BarState.Off)
        .layoutWeight(1)
        .padding({ left: 14, right: 14, bottom: 20 })
      } else if (this.mainTab === 1) {
        Scroll() {
          Column() {
            this.pageBoard()
          }
          .width('100%')
        }
        .scrollable(ScrollDirection.Vertical)
        .scrollBar(BarState.Off)
        .layoutWeight(1)
        .padding({ left: 14, right: 14, bottom: 20 })
      } else if (this.mainTab === 2) {
        Scroll() {
          Column() {
            this.pageCourse()
          }
          .width('100%')
        }
        .scrollable(ScrollDirection.Vertical)
        .scrollBar(BarState.Off)
        .layoutWeight(1)
        .padding({ left: 14, right: 14, bottom: 20 })
      } else {
        Scroll() {
          Column() {
            this.pageMine()
          }
          .width('100%')
        }
        .scrollable(ScrollDirection.Vertical)
        .scrollBar(BarState.Off)
        .layoutWeight(1)
        .padding({ left: 14, right: 14, bottom: 20 })
      }
    }
    .width('100%')
    .height('100%')
  }

  build() {
    Stack() {
      Column()
        .width('100%')
        .height('100%')
        .backgroundColor(COLORS.bg)
      this.fxLayer()
      Column() {
        this.mainContent()
        this.bottomBar()
      }
      .width('100%')
      .height('100%')
      if (this.addOpen) {
        Stack() {
          this.modalOverlay()
          Column() {
            this.addModalBody()
          }
          .width('88%')
          .constraintSize({ maxHeight: '80%' })
          .borderRadius(16)
          .zIndex(999)
        }
        .width('100%')
        .height('100%')
      }
      if (this.editOpen) {
        Stack() {
          this.modalOverlay()
          Column() {
            this.editModalBody()
          }
          .width('88%')
          .constraintSize({ maxHeight: '80%' })
          .borderRadius(16)
          .zIndex(999)
        }
        .width('100%')
        .height('100%')
      }
      if (this.delOpen) {
        Stack() {
          this.modalOverlay()
          Column() {
            this.delModalBody()
          }
          .width('88%')
          .constraintSize({ maxHeight: '80%' })
          .borderRadius(16)
          .zIndex(999)
        }
        .width('100%')
        .height('100%')
      }
    }
    .width('100%')
    .height('100%')
  }
}