技术前言

在鸿蒙生态持续演进的过程中，ArkUI 声明式开发框架凭借其简洁的语法、高效的渲染性能和丰富的组件库，已经成为 HarmonyOS 应用开发的核心基石。ArkUI 采用 ArkTS 作为开发语言，在 TypeScript 的基础上融入了声明式 UI 范式、状态管理装饰器（@State、@Observed、@Link 等）以及 Builder 函数机制，让开发者能够以近乎自然语言的方式描述界面结构。对于内容型、工具型应用而言，ArkUI 的组件化思想能够极大地提升代码的可维护性和复用性，尤其是在多 Tab、多弹窗、多数据列表的复杂页面中，分层构建的思路能够让代码结构清晰可控。

ArkWeb 作为 HarmonyOS 系统级 Web 浏览能力的封装，远不止是一个简单的 WebView 组件。它提供了从页面加载、JavaScript 交互到文件下载的全链路控制能力。其中，WebDownloadDelegate 下载代理机制是 ArkWeb 生态中极为重要的一环——它允许应用拦截网页内触发的下载行为，自定义下载路径、监听下载进度、处理下载失败，并在下载完成后获取完整的文件信息。在以往的版本中，开发者只能通过 getSuggestedFileName、getTotalBytes、getPercentComplete 等接口获取文件名、文件大小和进度等基础信息，对于下载来源的追溯能力相对有限。

HarmonyOS 6.1.1 版本为 WebDownloadDelegate 的 onDownloadFinish 回调带来了两项关键的新接口：getOriginalUrl 和 getReferrerUrl。前者返回下载资源的原始 URL 地址（即文件直链地址），后者返回触发该下载的引用页面 URL 地址。这一双 URL 溯源能力看似只是增加了两个字符串返回值，实则在版权授权、合规审计、用户行为分析等场景中具有革命性的意义。以字体授权行业为例，每一份字体文件的下载都对应着一份授权协议，能够准确记录"用户从哪个详情页点击了下载按钮"以及"实际下载的是哪个版本的字体文件包"，意味着授权链条上的每一个环节都有据可查。

Canvas 2D 绘图 API 是 ArkUI 框架中另一项强大的可视化能力。开发者可以通过 CanvasRenderingContext2D 对象在画布上绘制任意的图形、文字和图像，实现系统组件无法满足的定制化图表需求。雷达图（又称蜘蛛图、极坐标图）是一种常用于多维度评估的数据可视化形式，在字体设计领域，一款字体的商业价值往往需要从商用授权、字形美感、字重丰富度、语言覆盖、性价比等多个维度进行综合评判，五维雷达图恰好能够直观地呈现这种多维度评估结果。配合呼吸动画效果，雷达图不仅具备信息展示功能，还能提升页面的视觉层次感和交互体验。

字体设计与正版字体授权是一个看似小众但商业价值极高的垂直行业。随着国内版权意识的不断提升，企业和设计师对正版字体的需求日益增长，但市场上也存在着字体来源混乱、授权链条不透明、盗版字体难以溯源等痛点。一款优秀的字体资源平台应用，不仅需要提供丰富的字体库供用户浏览和筛选，更需要建立可信的授权溯源机制，确保每一份下载的字体文件都能够追溯到其合法的授权来源。从技术角度看，这需要 Web 浏览能力、下载管理能力、数据可视化能力和用户系统的深度整合。

本文将以一款字体资源平台应用为载体，深入剖析 HarmonyOS ArkUI 框架下，如何将 ArkWeb 的双 URL 溯源能力、Canvas 雷达图绘制能力与多 Tab 页面架构有机结合，构建一个兼具视觉美感和技术深度的正版字体授权应用。我们将从颜色系统设计、数据模型定义、状态管理策略、下载代理实现、Canvas 绘图原理、Builder 函数分层等多个维度展开，力求呈现一个完整而详尽的技术实现全景。

整体架构

2.1 应用架构流程图

2.2 架构设计思路

该应用采用经典的分层架构思想，将页面入口、状态管理、业务逻辑和视图构建清晰分离。入口层负责生命周期的管控，在页面出现时完成下载代理的注册和呼吸动画定时器的启动，在页面销毁时清理定时器资源，避免内存泄漏。状态管理层集中管理所有响应式数据，包括 UI 状态标志、列表数据、Canvas 上下文和 ArkWeb 控制器。业务逻辑层封装了下载代理配置、雷达图绘制、网页加载、主动下载触发以及记录的增删改查等核心功能。视图层则通过一系列 Builder 函数将界面拆分为可独立维护的模块，每个 Builder 函数负责一个局部区域的渲染。

这种分层设计的优势在于：当需要修改某个视觉模块时，只需调整对应的 Builder 函数，不会影响业务逻辑；当需要新增一种数据操作时，只需在业务逻辑层添加方法，再通过状态驱动视图更新。数据层以常量和 Mock 数据的形式独立存在，便于后续替换为真实的网络请求数据源。

逐段代码分析

3.1 颜色系统设计

3.1.1 色板接口与常量定义

/** 主题色板接口：集中声明页面所有颜色字段（宣纸白+朱砂红+石墨黑浅色系） */
interface ColorPalette {
  bg: string;
  card: string;
  chip: string;
  title: string;
  sub: string;
  text3: string;
  red: string;
  redD: string;
  orange: string;
  gold: string;
  green: string;
  line: string;
  tabOn: string;
  mask: string;
  codeBg: string;
  codeFg: string;
  codeKey: string;
  codeRef: string;
}

/** 浅色主题色板常量（字体集 · 宣纸白 + 朱砂红 + 石墨黑） */
const COLORS: ColorPalette = {
  bg: '#FBFAF6',
  card: '#FFFFFF',
  chip: '#F2EFE7',
  title: '#2B2B2B',
  sub: '#5C5C56',
  text3: '#989892',
  red: '#D9432F',
  redD: '#A93321',
  orange: '#E8825F',
  gold: '#B07D2B',
  green: '#4E7B57',
  line: '#E9E4D8',
  tabOn: '#D9432F',
  mask: 'rgba(43,43,43,0.42)',
  codeBg: '#2B2B2B',
  codeFg: '#D8D3C7',
  codeKey: '#F2A08F',
  codeRef: '#DDBB77'
};

颜色系统是整个应用视觉风格的基石。代码首先通过 ColorPalette 接口定义了色板的完整字段契约，包含了背景色、卡片色、Chip 背景色、三级文字色、主题红及其深色变体、橙色、金色、绿色、分割线色、Tab 选中色、遮罩色以及代码高亮相关的背景和文字色。这一共 18 个颜色字段，覆盖了页面中可能出现的所有颜色使用场景。

将颜色定义为接口 + 常量的模式，而非在各处硬编码十六进制值，带来了多重好处。首先，它确保了颜色使用的一致性——所有组件都从同一个 COLORS 常量中取值，不会出现不同地方使用略有差异的红色的情况。其次，它让主题切换变得极为容易，如果未来需要增加深色模式，只需新增一份符合 ColorPalette 接口的深色色板常量，再通过状态变量切换引用即可。第三，接口的存在起到了文档作用，新接手的开发者可以通过接口一目了然地知道项目中有哪些颜色可用，而不必在代码中到处搜索。

具体到配色方案，这款应用采用了"宣纸白 + 朱砂红 + 石墨黑"的新中式浅色主题。背景色 #FBFAF6 是略带暖黄的米白色，如同宣纸的底色，营造出温润雅致的氛围。主色调朱砂红 #D9432F 源自传统朱砂颜料，既醒目又不失沉稳，用于品牌标识、选中状态、重要按钮和强调文字。石墨黑 #2B2B2B 则替代了纯黑作为标题文字色，在白色背景上对比度充足但不刺眼。辅助色中的金色 #B07D2B 用于引用页 URL 溯源标识，绿色 #4E7B57 用于下降趋势和下载完成状态，形成了完整的语义化配色体系。

值得注意的是，代码中还专门为代码预览区域设计了独立的配色方案——codeBg 深石墨背景配合 codeKey 浅红关键字和 codeRef 金色引用色，与整体浅色背景形成对比，同时保持了朱砂红和金色的主题元素呼应，确保代码块既突出又不破坏整体视觉风格。

3.2 常量定义与数据契约

3.2.1 Tab 元数据与分类标签

/** Tab 元数据接口：底部导航图标 + 标签 */
interface TabMeta {
  icon: string;
  label: string;
}

/** 底部导航 Tab 常量列表（4 Tab 单排） */
const TAB_LIST: TabMeta[] = [
  { icon: '🔤', label: '字体' },
  { icon: '🌐', label: '网页' },
  { icon: '⬇', label: '下载' },
  { icon: '👤', label: '我的' }
];

/** 头部横滑风格 chips 文案（字体风格分类） */
const CATE_TAGS: string[] = ['精选', '宋体', '黑体', '楷体', '手写', '像素', '哥特', '圆体'];

底部导航是应用的核心骨架。代码通过 TabMeta 接口定义了每个 Tab 的数据结构——一个 emoji 图标和一个文字标签，然后用 TAB_LIST 数组声明了四个 Tab：字体、网页、下载、我的。这种数据驱动的导航设计模式非常优雅：Tab 的数量、顺序和文案完全由数据决定，底部导航的 Builder 函数只需要通过 ForEach 遍历数组即可渲染。如果产品经理要求调整 Tab 顺序或新增 Tab，开发者只需修改常量数组，而无需触碰渲染逻辑。

CATE_TAGS 常量定义了头部横滑分类 chips 的八个字体风格标签：精选、宋体、黑体、楷体、手写、像素、哥特、圆体。这八个分类覆盖了中文字体的主要风格流派，既有经典的宋黑楷圆四大类，也有手写、像素、哥特等特色风格，能够满足不同用户的浏览偏好。同样采用数据驱动的模式，分类 chips 的渲染也只需要一次 ForEach 遍历。

3.2.2 今日精选字体与快捷站点

/** 今日精选字体接口（精选卡内用大号字直接展示字体名效果） */
interface FontRec {
  glyph: string;   // 字样展示字（如"永"，直观呈现字形风格）
  name: string;    // 字体名
  style: string;   // 风格分类
  weights: string; // 字重数量文本
  license: string; // 授权方式文本
}

/** 今日精选字体 Mock 数据（3 条） */
const TODAY_RECS: FontRec[] = [
  { glyph: '永', name: '云鹤宋', style: '宋体', weights: '7 字重', license: '个人免费 · 商用 ¥299' },
  { glyph: '墨', name: '墨渊黑', style: '黑体', weights: '5 字重', license: '商用 ¥599 起' },
  { glyph: '书', name: '栖霞楷书', style: '楷体', weights: '3 字重', license: '全场景免费商用' }
];

FontRec 接口定义了今日精选字体的数据结构，其中 glyph 字段的设计颇具巧思——它不是字体的缩略图，而是一个用该字体风格展示的代表性汉字（如"永"、“墨”、“书”）。在实际产品中，这个字段可以配合 Web Font 技术动态加载对应字体文件，让用户在精选卡上就能直观感受到字体的字形风格。在当前的 Mock 实现中，虽然使用的是系统默认字体，但这个字段的存在为后续的真实字体展示预留了扩展空间。

name、style、weights、license 四个字段分别对应字体名、风格分类、字重数量和授权方式，构成了用户快速了解一款字体所需的核心信息。授权方式字段直接展示了价格信息（如"商用 ¥299"、“免费商用”），这对于字体授权平台而言是至关重要的转化信息。

/** 快捷站点常量（网页 Tab 横滑入口，真实可访问的字库/设计站点） */
const QUICK_SITES: string[] = [
  'https://fonts.google.com',
  'https://www.dafont.com',
  'https://fonts.adobe.com',
  'https://www.myfonts.com'
];

QUICK_SITES 常量列出了四个国际知名的字体网站作为快捷入口。这些站点均为真实可访问的字库平台，用户点击即可在应用内置的 Web 组件中加载浏览。这一设计将应用定位为"字体资源聚合平台"——不仅提供自家字库的浏览和下载，还允许用户通过内置浏览器访问第三方字库网站，并统一管理所有来源的字体下载记录。

3.2.3 雷达图维度数据

/** 雷达图维度标签（热门字体五维评估） */
const RADAR_LABELS: string[] = ['商用授权', '字形美感', '字重丰富', '语言覆盖', '性价比'];

/** 雷达图维度得分（0~1，映射到五边形顶点半径比例） */
const RADAR_VALUES: number[] = [0.92, 0.88, 0.75, 0.85, 0.7];

/** 雷达图中心综合评分文本 */
const RADAR_SCORE: string = '82';

雷达图数据由三个常量组成：维度标签数组、维度得分数组和综合评分文本。五个维度——商用授权、字形美感、字重丰富、语言覆盖、性价比——从法律合规、视觉设计、功能完备、适用范围和价格成本五个角度对字体进行全方位评估，构建了一个相对完整的字体价值评估模型。

得分采用 0 到 1 的小数形式存储，对应雷达图上从中心到顶点的半径比例。例如 0.92 表示该维度得分达到了满分的 92%。这种归一化的存储方式有两个优势：一是在绘制雷达图时可以直接乘以最大半径计算坐标，无需额外的数值转换；二是便于后续调整维度数量或评分标准，只需保持 0-1 的取值范围即可。综合评分 82 分则是五个维度得分的加权汇总结果，以整数形式展示在雷达图中心，让用户一眼就能获取整体评价。

3.3 辅助函数工具集

/** 榜单趋势颜色映射：上升朱砂红 / 下降松绿 / 持平弱化 */
function trendColor(t: string): string {
  if (t === 'up') { return COLORS.red; }
  if (t === 'down') { return COLORS.green; }
  return COLORS.text3;
}

/** 榜单趋势图标文案：上升 / 下降 / 持平 */
function trendIcon(t: string): string {
  if (t === 'up') { return '↑ 上升'; }
  if (t === 'down') { return '↓ 下降'; }
  if (t === 'down') { return '↓ 下降'; }
  return '— 持平';
}

/** 站点 URL 转展示域名（去掉协议前缀，地址栏/快捷站点卡用） */
function siteHost(url: string): string {
  const head = 'https://';
  if (url.startsWith(head)) {
    return url.slice(head.length);
  }
  return url;
}

辅助函数虽然代码量不大，但体现了代码的复用性设计思想。trendColor 和 trendIcon 是一对配套函数，分别根据趋势字符串（‘up’/‘down’/‘flat’）返回对应的颜色值和图标文案。在热门字体榜的渲染中，每条记录都需要展示趋势状态，如果不封装为函数，就需要在模板中重复编写条件判断逻辑。将其抽离为纯函数后，调用处只需 trendColor(s.trend) 和 trendIcon(s.trend) 即可，代码简洁且便于统一维护。

颜色映射的设计也有讲究：上升趋势使用朱砂红（正面、醒目），下降趋势使用松绿（中性、平和），持平趋势使用弱化的第三级文字色（不吸引注意力）。这与股票市场"红涨绿跌"的配色习惯一致，符合中文用户的视觉认知。

siteHost 函数用于从完整 URL 中提取域名部分，去掉 https:// 协议前缀。在地址栏和快捷站点卡片中，展示完整的协议前缀会占用宝贵的横向空间且增加视觉噪音，只显示域名部分更加简洁美观。函数采用 startsWith 前缀判断加 slice 截取的实现方式，时间复杂度为 O(n)，对于 URL 这种长度有限的字符串来说性能完全足够。

3.4 数据模型层

3.4.1 字体榜单与字库厂商模型

/** 字体榜单条目（字体 Tab 大编号热门字体榜） */
@Observed export class FontItem {
  rank: string;     // 名次字符串
  name: string;     // 字体名
  foundry: string;  // 所属字库厂商
  weights: string;  // 字重数量文本
  price: string;    // 商用授权价文本
  trend: string;    // 趋势：'up' / 'down' / 'flat'

  constructor(rank: string, name: string, foundry: string, weights: string, price: string, trend: string) {
    this.rank = rank;
    this.name = name;
    this.foundry = foundry;
    this.weights = weights;
    this.price = price;
    this.trend = trend;
  }
}

FontItem 类是热门字体榜的数据模型，使用 @Observed 装饰器标记为可观察对象。这意味着当类实例的属性发生变化时，ArkUI 框架能够自动检测到变化并触发相关视图的更新。六个字段分别对应名次、字体名、字库厂商、字重数量、商用授权价和趋势，完整覆盖了一条榜单记录所需的全部信息。

rank 字段使用字符串类型而非数字类型，这是一个有意的设计选择。虽然当前 Mock 数据中的名次都是数字字符串（‘1’、'2’等），但使用字符串类型为未来的扩展预留了空间——比如某些特殊名次可能需要展示为"TOP"、"NEW"等文字标识，字符串类型能够灵活应对。

/** 字库厂商条目（字体 Tab 厂商横滑卡） */
@Observed export class FoundryItem {
  name: string;   // 厂商名
  tag: string;    // 一句话定位
  count: string;  // 在售字体数
  hot: string;    // 招牌字体

  constructor(name: string, tag: string, count: string, hot: string) {
    this.name = name;
    this.tag = tag;
    this.count = count;
    this.hot = hot;
  }
}

FoundryItem 类描述字库厂商信息，包含厂商名、一句话定位、在售字体数和招牌字体四个字段。厂商横滑卡的设计灵感来源于电商平台的品牌馆，让用户不仅可以按字体浏览，还可以按字库厂商发现新字体。tag 字段的一句话定位（如"老牌宋楷世家"、“新锐黑体实验室”）能够快速传递厂商的品牌调性，帮助用户建立认知。

3.4.2 下载记录模型（双 URL 溯源核心）

/** 下载记录条目（下载 Tab 双 URL 溯源卡：ArkWeb 6.1.1 特性数据载体） */
@Observed export class DownloadRecord {
  fileName: string;     // 字体文件名（ttf/otf/zip）
  fileSize: string;     // 大小文本
  finishTime: string;   // 完成时间
  originalUrl: string;  // ★ getOriginalUrl() 结果：下载项原始 URL
  referrerUrl: string;  // ★ getReferrerUrl() 结果：引用页 URL
  note: string;         // 用户备注（可编辑）

  constructor(fileName: string, fileSize: string, finishTime: string,
    originalUrl: string, referrerUrl: string, note: string) {
    this.fileName = fileName;
    this.fileSize = fileSize;
    this.finishTime = finishTime;
    this.originalUrl = originalUrl;
    this.referrerUrl = referrerUrl;
    this.note = note;
  }
}

DownloadRecord 是整个应用中最为核心的数据模型，它承载了 ArkWeb 6.1.1 双 URL 溯源特性的数据展示。除了常规的文件名、文件大小和完成时间外，最关键的是 originalUrl 和 referrerUrl 两个字段，分别对应下载完成回调中的 getOriginalUrl() 和 getReferrerUrl() 返回值。

这两个 URL 的组合构成了完整的下载溯源链条：originalUrl 告诉你"下载的是什么文件"——即字体文件的直链地址，可以精确到具体的版本号和文件格式；referrerUrl 告诉你"从哪个页面下载的"——即字体的详情页或列表页地址，可以追溯到用户是在哪个授权页面触发的下载。对于字体授权平台来说，这意味着每一份下载的字体文件都有了完整的"出生证明"，当出现版权纠纷时，可以通过这两个 URL 还原用户的下载路径，验证授权的合法性。

note 字段允许用户为每条下载记录添加自定义备注，进一步增强了溯源的灵活性——用户可以标记"官网直链"、“限时五折”、"搜索下载"等上下文信息，使得下载记录不仅是一个冰冷的技术数据，更是一个有上下文的个人资产档案。

3.4.3 用户统计模型

/** 我的页功能清单条目 */
@Observed export class UserStat {
  icon: string;    // 功能图标
  label: string;   // 功能名
  value: string;   // 状态/数值文本
  arrow: boolean;  // 是否显示右箭头

  constructor(icon: string, label: string, value: string, arrow: boolean) {
    this.icon = icon;
    this.label = label;
    this.value = value;
    this.arrow = arrow;
  }
}

UserStat 类是"我的"页面功能清单的数据模型，每条记录包含图标、功能名、状态/数值文本和是否显示右箭头四个字段。这种通用的列表项模型可以灵活地表示各种设置项和统计项，从收藏字体数量、已购授权份数到版权合规检测状态，都可以用同一种数据结构统一渲染。arrow 字段的设计考虑了扩展性——并非所有清单项都需要可点击跳转，通过布尔值控制右箭头的显示，可以清晰地传达"可进入"与"仅展示"的区别。

3.5 组件主体与状态管理

3.5.1 状态变量全景

@Entry
@Component
struct Page1127 {
  /** 当前选中 Tab 索引 */
  @State currentTab: number = 0;
  /** 呼吸动画开关（每秒翻转，联动雷达图与胶囊） */
  @State breath: boolean = false;
  /** 呼吸动画定时器句柄 */
  @State timer: number = -1;
  /** 头部风格 chips 选中索引 */
  @State cateIdx: number = 0;
  /** 新建下载任务弹窗开关 */
  @State addModal: boolean = false;
  /** 编辑备注弹窗开关 */
  @State editModal: boolean = false;
  /** 删除记录确认弹窗开关 */
  @State delModal: boolean = false;
  /** 当前编辑的记录索引 */
  @State editIdx: number = 0;
  /** 当前删除的记录索引 */
  @State delIdx: number = 0;
  /** 热门字体榜数据 */
  @State fontList: Array<FontItem> = FONT_LIST;
  /** 字库厂商横滑数据 */
  @State foundryList: Array<FoundryItem> = FOUNDRY_LIST;
  /** 下载记录列表数据 */
  @State downloadRecords: Array<DownloadRecord> = DOWNLOAD_RECORDS;
  /** 我的页功能清单数据 */
  @State statList: Array<UserStat> = STAT_LIST;
  /** 新建表单：字体文件下载链接 */
  @State formUrl: string = '';
  /** 新建表单：文件备注 */
  @State formNote: string = '';
  /** 编辑表单：记录备注 */
  @State editNote: string = '';

组件的状态变量可以分为几大类：导航状态（currentTab、cateIdx）、动画状态（breath、timer）、弹窗状态（addModal、editModal、delModal、editIdx、delIdx）、列表数据（fontList、foundryList、downloadRecords、statList）和表单数据（formUrl、formNote、editNote）。所有状态变量都使用 @State 装饰器声明，确保状态变化时视图能够响应式更新。

弹窗状态的设计模式值得关注：三个弹窗各有一个布尔开关变量，再加上 editIdx 和 delIdx 两个索引变量记录当前操作的目标记录。这种"开关 + 索引"的模式是处理列表项弹窗的经典方案——当用户点击某条记录的"编辑"按钮时，先设置 editIdx 为当前索引并回填数据，再将 editModal 设为 true 打开弹窗；保存时根据 editIdx 定位到具体的记录进行修改。

  // --- Canvas 状态（字体 Tab 热门字体五维评估雷达图） ---
  /** 雷达图 Canvas 就绪标志 */
  @State canvasReady: boolean = false;
  /** 雷达图 Canvas 上下文（private，不用 @State） */
  private radarCtx: CanvasRenderingContext2D = new CanvasRenderingContext2D(new RenderingContextSettings(true));

  // --- ArkWeb 状态（6.1.1 特性：双 URL 溯源） ---
  /** Web 控制器（加载页面 + 绑定下载代理 + 主动发起下载） */
  private webController: webview.WebviewController = new webview.WebviewController();
  /** 下载代理（四个回调：开始前/进行中/失败/完成） */
  private downloadDelegate: webview.WebDownloadDelegate = new webview.WebDownloadDelegate();
  /** 地址栏输入值（敲字不等于加载） */
  @State urlInput: string = QUICK_SITES[0];
  /** Web 组件实际加载值（点"前往"后才更新） */
  @State webUrl: string = QUICK_SITES[0];
  /** 当前下载文件名 */
  @State dlName: string = '';
  /** 当前下载进度（0~100） */
  @State dlPercent: number = 0;
  /** 下载状态文案 */
  @State dlState: string = '空闲';

Canvas 和 ArkWeb 相关的状态有一个重要的设计细节：radarCtx 和 webController、downloadDelegate 都被声明为 private 且不使用 @State 装饰器。这是因为这些对象是复杂的控制器实例，它们的内部状态变化不需要（也不应该）触发 UI 的整体重新渲染。Canvas 的就绪状态通过 canvasReady 标志位单独管理，只有当 Canvas 组件初始化完成并触发 onReady 回调后，才允许执行绘制操作。

ArkWeb 的状态设计中，urlInput 和 webUrl 的分离是一个精妙的细节。urlInput 是地址栏中用户输入的实时值，用户每敲一个字都会更新；而 webUrl 是 Web 组件实际加载的 URL，只有在用户点击"前往"按钮后才会更新。这种"输入值与加载值分离"的模式避免了用户输入过程中 Web 组件频繁重新加载的问题，提升了性能和用户体验。

3.5.2 下载代理注册（核心特性）

  /** 注册下载代理：四回调齐全，完成回调中调用 6.1.1 新增双接口 */
  setupDownloadDelegate() {
    // 下载开始前：必须调用 start() 提供沙箱路径，否则任务停在 PENDING
    this.downloadDelegate.onBeforeDownload((item: webview.WebDownloadItem) => {
      const hostCtx = this.getUIContext().getHostContext();
      const dir = hostCtx ? hostCtx.filesDir : '';
      item.start(dir + '/' + item.getSuggestedFileName());
    });

setupDownloadDelegate 方法是 ArkWeb 下载功能的初始化入口，它配置了下载代理的四个生命周期回调。第一个回调 onBeforeDownload 在下载开始前触发，是整个下载流程的"守门员"——必须在此回调中调用 item.start() 并传入文件保存路径，否则下载任务会一直停留在 PENDING 状态而不会真正开始。

获取保存路径的方式体现了 HarmonyOS 的沙箱机制：通过 this.getUIContext().getHostContext() 获取应用的宿主上下文，再从中取出 filesDir 作为文件保存目录。这是应用私有的文件目录，符合 HarmonyOS 的安全沙箱设计规范。文件名则使用 item.getSuggestedFileName() 获取下载项建议的文件名，通常是从 URL 的最后一段或 Content-Disposition 响应头中解析而来。

    // 下载进行中：刷新进度条与状态文案
    this.downloadDelegate.onDownloadUpdated((item: webview.WebDownloadItem) => {
      this.dlPercent = item.getPercentComplete();
      this.dlState = '正在下载 ' + item.getPercentComplete() + '%';
    });
    // 下载失败：置失败文案（进度清零）
    this.downloadDelegate.onDownloadFailed((item: webview.WebDownloadItem) => {
      this.dlState = '下载失败 · ' + item.getGuid();
      this.dlPercent = 0;
    });

onDownloadUpdated 回调在下载过程中持续触发，用于实时更新进度条和状态文案。item.getPercentComplete() 返回一个 0 到 100 的整数，表示当前下载进度百分比。这是一个高频回调，每次进度更新都会触发状态变化和视图刷新，因此回调中的逻辑应保持轻量，避免执行耗时操作。

onDownloadFailed 回调处理下载失败的情况，将状态文案设为失败信息并附带下载任务的 GUID（全局唯一标识符），同时将进度清零。GUID 的展示对于调试和问题排查很有帮助——用户可以提供这个唯一标识给技术支持，便于定位具体的失败任务。

    // 下载完成：★ 6.1.1 新特性——getOriginalUrl + getReferrerUrl 双溯源
    this.downloadDelegate.onDownloadFinish((item: webview.WebDownloadItem) => {
      const originalUrl: string = item.getOriginalUrl();   // 原始 URL 地址
      const referrerUrl: string = item.getReferrerUrl();   // 引用页 URL 地址
      this.downloadRecords.unshift(new DownloadRecord(
        item.getSuggestedFileName(), Math.round(item.getTotalBytes() / 1048576) + ' MB',
        '刚刚', originalUrl, referrerUrl, '本次会话下载'));
      this.dlState = '下载完成';
      this.dlPercent = 100;
    });

onDownloadFinish 是整个下载代理中最核心的回调，也是 HarmonyOS 6.1.1 新特性的集中体现。下载完成时，通过 item.getOriginalUrl() 获取下载资源的原始 URL，通过 item.getReferrerUrl() 获取引用页面的 URL，然后将这两个 URL 连同文件名、文件大小等信息一起封装为 DownloadRecord 对象，插入到下载记录列表的最前面。

unshift 方法将新记录插入数组开头，确保最新下载的记录显示在列表顶部，符合用户的认知习惯。文件大小通过 item.getTotalBytes() / 1048576 从字节转换为 MB（1048576 = 1024 × 1024），并使用 Math.round 四舍五入为整数。备注字段默认填充"本次会话下载"，用户后续可以通过编辑功能修改为更有意义的描述。

    // 绑定到 controller：网页内触发的下载才会进入上述回调（try-catch 消除抛错告警）
    try {
      this.webController.setDownloadDelegate(this.downloadDelegate);
    } catch (error) {
      console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
    }
  }

配置好四个回调后，需要通过 webController.setDownloadDelegate() 将下载代理绑定到 Web 控制器上。这一步操作被包裹在 try-catch 中，以处理可能抛出的 BusinessError 异常。使用 BusinessError 类型进行错误处理是 HarmonyOS API 的标准模式——错误对象包含 code 和 message 两个字段，分别表示错误码和错误信息，便于开发者定位和处理问题。

3.5.3 网页加载与主动下载

  /** 地址栏"前往"：校验协议前缀（无 http(s):// 时自动补 https://）再加载 */
  loadUrl() {
    let url = this.urlInput.trim();
    if (url === '') {
      return;
    }
    if (!url.startsWith('https://') && !url.startsWith('http://')) {
      url = 'https://' + url;
    }
    this.urlInput = url;
    this.webUrl = url;
  }

loadUrl 方法处理地址栏的"前往"操作。它首先对输入的 URL 进行去空格和非空校验，然后检查是否包含协议前缀。如果用户输入的是类似 fonts.google.com 这样的裸域名，方法会自动在前面补上 https:// 协议前缀，确保 Web 组件能够正确加载。这种人性化的容错处理在浏览器类应用中非常常见，能够降低用户的使用门槛。

更新 webUrl 后，Web 组件会自动检测到 src 的变化并加载新的页面。这就是 ArkUI 声明式框架的魅力——开发者不需要手动调用 loadUrl 方法来控制 Web 组件，只需要改变状态变量，视图就会自动响应。

  /** 应用侧主动发起下载（无需网页内点击，try-catch 包裹 BusinessError） */
  triggerDownload(url: string) {
    try {
      this.dlName = url.slice(url.lastIndexOf('/') + 1);
      this.dlPercent = 0;
      this.dlState = '已发起下载请求';
      this.webController.startDownload(url);
    } catch (error) {
      this.dlState = '发起失败 ' + (error as BusinessError).code;
    }
  }

triggerDownload 方法实现了应用侧主动发起下载的能力，无需用户在网页内点击下载链接。它通过 webController.startDownload(url) 直接触发一个下载任务，然后同样会走 WebDownloadDelegate 的四个回调流程。这意味着无论是网页内点击触发的下载，还是应用侧主动发起的下载，最终都会被统一的下载代理处理，记录到同一个下载列表中，并保留完整的双 URL 溯源信息。

文件名通过 url.slice(url.lastIndexOf('/') + 1) 从 URL 的最后一段路径中提取。初始化进度为 0，状态设为"已发起下载请求"，为用户提供即时的操作反馈。整个方法用 try-catch 包裹，捕获 BusinessError 类型的异常并在状态文案中展示错误码。

3.5.4 Canvas 雷达图绘制

  /** 绘制热门字体五维评估雷达图（三层同心网格+轴线+朱砂红数据多边形+标签+节点+得分榜） */
  drawRadarChart() {
    const ctx = this.radarCtx;
    const cx = 110;
    const cy = 100;
    const r = 66 * (this.breath ? 1.04 : 0.96);
    const n = RADAR_LABELS.length;
    ctx.clearRect(0, 0, 340, 200);

drawRadarChart 是 Canvas 绘图的主函数，负责绘制完整的五维评估雷达图。函数开头定义了几个关键的几何参数：cx 和 cy 是雷达图的圆心坐标（110, 100），r 是雷达图的最大半径，n 是维度数量（即 5）。半径 r 的值会根据 breath 状态在 66 × 0.96 和 66 × 1.04 之间切换，这就是呼吸动画的实现原理——通过定时器每秒翻转 breath 的值，然后重绘雷达图时半径随之微变，营造出缓慢"呼吸"的视觉效果。

绘图前先调用 ctx.clearRect(0, 0, 340, 200) 清空整个画布区域，这是 Canvas 动画的标准做法——每一帧都需要先清除再重绘，否则上一帧的内容会残留下来。

    // 三层同心网格（正五边形，由内向外逐层放大）
    for (let layer = 1; layer <= 3; layer++) {
      const lr = r * layer / 3;
      ctx.beginPath();
      for (let i = 0; i < n; i++) {
        const angle = -Math.PI / 2 + (i / n) * Math.PI * 2;
        const x = cx + Math.cos(angle) * lr;
        const y = cy + Math.sin(angle) * lr;
        if (i === 0) { ctx.moveTo(x, y); } else { ctx.lineTo(x, y); }
      }
      ctx.closePath();
      ctx.strokeStyle = COLORS.line;
      ctx.lineWidth = 1;
      ctx.stroke();
    }

第一段循环绘制三层同心的正五边形网格。每一层的半径为 r * layer / 3，即第一层为 r/3、第二层为 2r/3、第三层为 r。每个顶点的角度计算采用极坐标公式：起始角度为 -Math.PI / 2（即正上方，因为 Canvas 的 Y 轴向下，所以 -π/2 对应 12 点钟方向），然后均匀分布 n 个点，每个点之间的夹角为 Math.PI * 2 / n。

通过 cos(angle) * lr 和 sin(angle) * lr 计算出每个顶点相对于圆心的偏移量，再加上圆心坐标得到绝对坐标。第一个顶点使用 moveTo 移动到起始位置，后续顶点用 lineTo 连线，最后 closePath() 闭合路径，设置描边样式后调用 stroke() 绘制。三层网格使用 COLORS.line 浅米色作为描边色，与整体浅色主题协调。

    // 五条轴线（圆心指向各维顶点）
    for (let i = 0; i < n; i++) {
      const angle = -Math.PI / 2 + (i / n) * Math.PI * 2;
      ctx.beginPath();
      ctx.moveTo(cx, cy);
      ctx.lineTo(cx + Math.cos(angle) * r, cy + Math.sin(angle) * r);
      ctx.strokeStyle = COLORS.line;
      ctx.lineWidth = 1;
      ctx.stroke();
    }

第二段循环绘制从圆心指向五个顶点的轴线。每条轴线从圆心 (cx, cy) 出发，延伸到最外层网格的对应顶点。轴线同样使用 COLORS.line 颜色，与网格线保持一致，共同构成雷达图的坐标参考系。

    // 数据多边形（半透明朱砂红填充 + 朱砂红描边）
    ctx.beginPath();
    for (let i = 0; i < n; i++) {
      const angle = -Math.PI / 2 + (i / n) * Math.PI * 2;
      const x = cx + Math.cos(angle) * r * RADAR_VALUES[i];
      const y = cy + Math.sin(angle) * r * RADAR_VALUES[i];
      if (i === 0) { ctx.moveTo(x, y); } else { ctx.lineTo(x, y); }
    }
    ctx.closePath();
    ctx.fillStyle = COLORS.red;
    ctx.globalAlpha = 0.28;
    ctx.fill();
    ctx.globalAlpha = 1;
    ctx.strokeStyle = COLORS.red;
    ctx.lineWidth = 2;
    ctx.stroke();

第三段绘制数据多边形，这是雷达图的核心信息载体。每个数据点的坐标计算方式与网格顶点类似，但半径需要乘以对应的维度得分 RADAR_VALUES[i]——得分越高，点离圆心越远。绘制完成后，先使用 globalAlpha = 0.28 的半透明朱砂红填充，然后恢复不透明度，使用 2px 粗的朱砂红描边。

半透明填充的设计有两个好处：一是视觉上更加柔和，不会因为实心填充而显得过于沉重；二是当数据多边形与网格线重叠时，网格线仍然可以透过填充层被看到，保持坐标参考的可读性。

    // 数值节点（白心底 + 朱砂红描边圆点）
    for (let i = 0; i < n; i++) {
      const angle = -Math.PI / 2 + (i / n) * Math.PI * 2;
      const x = cx + Math.cos(angle) * r * RADAR_VALUES[i];
      const y = cy + Math.sin(angle) * r * RADAR_VALUES[i];
      ctx.beginPath();
      ctx.arc(x, y, 4, 0, Math.PI * 2);
      ctx.fillStyle = COLORS.card;
      ctx.fill();
      ctx.strokeStyle = COLORS.red;
      ctx.lineWidth = 1.5;
      ctx.stroke();
    }

第四段在每个数据点的位置绘制一个小圆点，作为数值节点的视觉标记。圆点采用"白心底 + 朱砂红描边"的样式，半径为 4 像素。白色填充来自 COLORS.card（即卡片背景的纯白色），与半透明的红色填充形成鲜明对比，让每个数据点都清晰可见。1.5px 的描边宽度介于网格线（1px）和数据多边形描边（2px）之间，保持了视觉层次的递进。

    // 维度标签（沿外圈均匀分布）
    ctx.font = '10px sans-serif';
    ctx.textAlign = 'center';
    ctx.fillStyle = COLORS.sub;
    for (let i = 0; i < n; i++) {
      const angle = -Math.PI / 2 + (i / n) * Math.PI * 2;
      const x = cx + Math.cos(angle) * (r + 15);
      const y = cy + Math.sin(angle) * (r + 15) + 3;
      ctx.fillText(RADAR_LABELS[i], x, y);
    }

第五段绘制五个维度的文字标签，沿雷达图外圈均匀分布。标签的位置在半径 r + 15 的圆周上，比最外层网格多 15 像素的间距，避免与网格和数据点重叠。Y 坐标额外增加 3 像素是为了垂直居中微调——因为文字的基线默认在 y 坐标处，适当下移可以让视觉中心与计算位置更吻合。标签使用 10px 的 sans-serif 字体，颜色为 COLORS.sub 次级文字色，保持低调但清晰可读。

    // 雷达中心综合评分
    ctx.fillStyle = COLORS.title;
    ctx.font = 'bold 15px sans-serif';
    ctx.fillText(RADAR_SCORE, cx, cy - 1);
    ctx.fillStyle = COLORS.text3;
    ctx.font = '9px sans-serif';
    ctx.fillText('综合评分', cx, cy + 14);

第六段在雷达图的正中心绘制综合评分。上方是 15px 粗体的评分数字 RADAR_SCORE（即 “82”），下方是 9px 的"综合评分"说明文字。一粗一细、一大一小的对比，形成了清晰的视觉层级。评分数字向上偏移 1 像素、说明文字向下偏移 14 像素，确保两行文字在中心区域对称分布。

    // 右侧五维得分榜（色块 + 维度名 + 分值）
    ctx.textAlign = 'left';
    for (let i = 0; i < n; i++) {
      const ly = 28 + i * 34;
      ctx.fillStyle = COLORS.red;
      ctx.fillRect(232, ly, 8, 8);
      ctx.fillStyle = COLORS.sub;
      ctx.font = '10px sans-serif';
      ctx.fillText(RADAR_LABELS[i], 246, ly + 8);
      ctx.fillStyle = COLORS.title;
      ctx.font = 'bold 11px sans-serif';
      ctx.fillText(Math.round(RADAR_VALUES[i] * 100) + '', 300, ly + 8);
    }
  }

最后一段在雷达图的右侧绘制五维得分榜，以列表形式展示每个维度的具体分数。每行包含一个 8×8 的朱砂红色块、维度名称和分值数字。分值通过 Math.round(RADAR_VALUES[i] * 100) 将 0-1 的小数转换为百分制整数。这种"雷达图 + 得分榜"的双视图设计，既提供了直观的图形化概览，又保留了精确的数值信息，满足了不同用户的阅读偏好。

3.5.5 记录管理与生命周期

  /** 打开编辑备注弹窗（回填当前记录备注） */
  openEditRecord(idx: number) {
    this.editIdx = idx;
    this.editNote = this.downloadRecords[idx].note;
    this.editModal = true;
  }

  /** 保存新建下载任务（空 URL 兜底默认演示链接，触发 startDownload） */
  saveDownload() {
    const url = this.formUrl === '' ? 'https://dl.yantian-fonts.cn/yunhe/YunHeSong_v2.4_Family_20260825.zip' : this.formUrl;
    this.triggerDownload(url);
    this.formUrl = '';
    this.formNote = '';
    this.addModal = false;
  }

openEditRecord 方法处理编辑记录的入口逻辑：先记录当前操作的索引，再将该记录的备注回填到编辑表单中，最后打开编辑弹窗。这种"先回填再打开"的顺序确保了弹窗打开时表单中已经有了原始数据，用户可以直接在原有基础上修改。

saveDownload 方法处理新建下载任务的提交。它有一个容错设计：如果用户没有输入 URL 就点击了"开始下载"，会使用一个默认的演示链接作为兜底，确保功能演示的流畅性。然后调用 triggerDownload 发起下载，清空表单数据并关闭弹窗。

  /** 保存编辑备注（整体刷新数组引用以刷新列表） */
  updateRecord() {
    if (this.editIdx >= 0 && this.editIdx < this.downloadRecords.length) {
      if (this.editNote !== '') {
        this.downloadRecords[this.editIdx].note = this.editNote;
      }
      this.downloadRecords = this.downloadRecords.slice();
    }
    this.editModal = false;
  }

  /** 删除下载记录（确认弹窗回调） */
  delRecord() {
    if (this.delIdx >= 0 && this.delIdx < this.downloadRecords.length) {
      this.downloadRecords.splice(this.delIdx, 1);
    }
    this.delModal = false;
  }

updateRecord 方法中有一个值得注意的细节：修改完 note 属性后，执行了 this.downloadRecords = this.downloadRecords.slice()。这是因为 @Observed 装饰器虽然能检测到类属性的变化，但在某些情况下，直接修改数组元素的属性可能无法触发 ForEach 的重新渲染。通过 slice() 方法创建一个新的数组副本并赋值给状态变量，可以确保数组引用发生变化，从而触发完整的列表刷新。这是 ArkUI 开发中的一种常见"强制刷新"技巧。

delRecord 方法使用 splice 从数组中移除指定索引的元素。splice 会直接修改原数组并改变其长度，ArkUI 框架能够检测到数组长度的变化从而更新视图。两个方法都先进行了边界检查，确保索引在有效范围内，避免数组越界错误。

  /** 生命周期：绑定下载代理 + 启动呼吸动画定时器（联动 Canvas 重绘） */
  aboutToAppear() {
    this.setupDownloadDelegate();
    this.timer = setInterval(() => {
      this.breath = !this.breath;
      if (this.canvasReady) {
        this.drawRadarChart();
      }
    }, 1000);
  }

  /** 生命周期：销毁时清理定时器 */
  aboutToDisappear() {
    clearInterval(this.timer);
  }

aboutToAppear 和 aboutToDisappear 是 ArkUI 组件的两个生命周期钩子。aboutToAppear 在组件即将出现时调用，这里做了两件事：一是调用 setupDownloadDelegate() 注册下载代理，确保 Web 组件加载完成后能够立即处理下载事件；二是启动一个每秒触发的定时器，用于驱动呼吸动画。

定时器的回调函数每秒翻转一次 breath 的布尔值，如果 Canvas 已经就绪（canvasReady 为 true），就调用 drawRadarChart() 重绘雷达图。由于 r 半径会根据 breath 的值在 0.96r 和 1.04r 之间切换，每次重绘雷达图都会有微小的大小变化，从而产生呼吸效果。

aboutToDisappear 在组件销毁时调用，负责清理定时器资源。这是一个非常重要的最佳实践——如果不在销毁时清理定时器，定时器会持续运行并持有组件的引用，导致内存泄漏。在单页应用中，页面切换频繁，定时器泄漏的累积效应会严重影响性能。

3.5.6 主构建函数

  /** 页面主构建：Stack 包裹主内容与三层弹窗 */
  build() {
    Stack() {
      Column() {
        this.headerMain()
        Divider().strokeWidth(1).color(COLORS.line)
        Scroll() {
          Column() {
            if (this.currentTab === 0) {
              this.tabFont()
            } else if (this.currentTab === 1) {
              this.tabWeb()
            } else if (this.currentTab === 2) {
              this.tabDownload()
            } else {
              this.tabMine()
            }
          }
          .padding({ left: 14, right: 14, top: 12, bottom: 12 })
        }
        .layoutWeight(1)
        .scrollBar(BarState.Off)
        this.tabBar()
      }
      .width('100%')
      .height('100%')

主构建函数采用 Stack 布局作为根容器，将主内容区域和弹窗层叠在一起。主内容区域是一个 Column，从上到下依次是头部（headerMain）、分割线、可滚动内容区（Scroll）和底部导航（tabBar）。

内容区使用 Scroll 包裹，确保内容超出屏幕时可以滚动浏览。.scrollBar(BarState.Off) 隐藏了滚动条，让界面更加简洁。Scroll 内部通过 if-else 条件渲染根据 currentTab 的值选择显示对应的 Tab 内容。这种条件渲染的方式意味着每次切换 Tab 时，旧 Tab 的组件会被销毁，新 Tab 的组件会被创建。对于内容较重的 Tab（如包含 Web 组件的网页 Tab），这种方式可能会导致切换时重新加载，但好处是内存占用较低，且各 Tab 之间的状态完全隔离。

      if (this.addModal) {
        this.panelAdd(() => {
          this.addModal = false;
        })
      }
      if (this.editModal) {
        this.panelEdit(() => {
          this.editModal = false;
        })
      }
      if (this.delModal) {
        this.panelDel(() => {
          this.delModal = false;
        })
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor(COLORS.bg)
  }

弹窗部分使用三个 if 条件分别控制新建、编辑和删除三个弹窗的显示。每个弹窗组件都接收一个 onClose 回调函数，用于关闭弹窗（将对应的开关变量设为 false）。由于弹窗位于 Stack 的后面层级，它们会浮在主内容的上方，配合半透明遮罩形成模态对话框的效果。

3.6 Builder 函数群——头部与字体 Tab

3.6.1 头部组件

  /** 头部：朱砂红渐变 Banner（品牌slogan+本周新上架数）+ 搜索条 + 风格 chips */
  @Builder
  headerMain() {
    Column({ space: 12 }) {
      // 朱砂红渐变 Banner
      Column({ space: 6 }) {
        Row() {
          Text('🖋 字体集').fontSize(17).fontColor('#FFFFFF').fontWeight(FontWeight.Bold)
          Column().layoutWeight(1)
          Text('本周新上架 26 款').fontSize(9).fontColor('rgba(255,255,255,0.8)')
        }
        .width('100%')
        Text('正版字体授权 · 让每个字都有出处').fontSize(11).fontColor('rgba(255,255,255,0.95)')
        Text('已入驻字库厂商 46 家 · 字重家族 2300+').fontSize(9).fontColor('rgba(255,255,255,0.66)')
      }
      .width('100%')
      .padding(14)
      .borderRadius(14)
      .linearGradient({ angle: 120, colors: [[COLORS.redD, 0], [COLORS.red, 0.6], [COLORS.orange, 1]] })

headerMain 是头部组件，由三部分组成：朱砂红渐变 Banner、搜索条和风格 chips。Banner 区域采用 linearGradient 线性渐变背景，从 120 度角的深朱砂红（COLORS.redD）过渡到朱砂红（COLORS.red）再到橙色（COLORS.orange），形成温暖而有层次感的视觉效果。

Banner 内容采用三行布局：第一行是品牌名"字体集"和本周新上架数量；第二行是品牌 slogan"正版字体授权 · 让每个字都有出处"；第三行是平台数据统计。文字使用不同的透明度等级来区分信息层级——主标题 100% 不透明，slogan 95%，数据统计 66%。这种透明度递减的方式比使用不同灰度值更加统一，因为所有文字的色相保持一致，只是明度不同。

      // 搜索条 + 新建下载按钮
      Row({ space: 8 }) {
        Row({ space: 6 }) {
          Text('🔍').fontSize(12)
          Text('搜索字体 / 粘贴字体文件链接').fontSize(10).fontColor(COLORS.text3)
        }
        .layoutWeight(1).height(34).padding({ left: 10, right: 10 })
        .backgroundColor(COLORS.chip).borderRadius(17)
        .onClick(() => {
          this.currentTab = 1;
        })
        Text('+ 新建下载').fontSize(10).fontColor('#FFFFFF')
          .padding({ left: 12, right: 12, top: 9, bottom: 9 })
          .backgroundColor(COLORS.red).borderRadius(17)
          .onClick(() => {
            this.addModal = true;
          })
      }
      .width('100%')

搜索条区域是一个有趣的设计：它不是真正的 TextInput 输入框，而是一个用 Row 模拟的搜索入口。点击后会跳转到"网页"Tab，暗示用户可以在网页 Tab 中搜索字体或粘贴下载链接。这种设计将搜索功能与 Web 浏览能力深度整合，因为应用的核心价值之一就是聚合第三方字库网站的资源。

右侧的"+ 新建下载"按钮使用朱砂红实底填充，是头部最醒目的行动号召（CTA）按钮。点击后打开新建下载任务弹窗，用户可以直接输入字体文件的 URL 发起下载。搜索条和按钮都使用 17px 的圆角（高度 34px 的一半），形成完全的胶囊形状，视觉上圆润柔和。

      // 风格 chips 横滑
      Scroll() {
        Row({ space: 8 }) {
          ForEach(CATE_TAGS, (tag: string, idx: number) => {
            Text(tag).fontSize(10)
              .fontColor(this.cateIdx === idx ? '#FFFFFF' : COLORS.sub)
              .backgroundColor(this.cateIdx === idx ? COLORS.red : COLORS.chip)
              .padding({ left: 12, right: 12, top: 6, bottom: 6 })
              .borderRadius(13)
              .onClick(() => {
                this.cateIdx = idx;
              })
          }, (tag: string) => tag)
        }
      }
      .scrollable(ScrollDirection.Horizontal)
      .scrollBar(BarState.Off)
      .width('100%')
    }
    .width('100%')
    .padding({ left: 14, right: 14, top: 12, bottom: 10 })
    .backgroundColor(COLORS.bg)
  }

风格 chips 区域使用横向滚动的 Scroll 包裹 Row，内部通过 ForEach 遍历 CATE_TAGS 数组渲染 8 个分类标签。选中状态（this.cateIdx === idx）通过文字变白、背景变朱砂红来体现；未选中状态则是深色文字配浅色背景。点击某个 chip 会更新 cateIdx 的值，触发选中状态的切换。

ForEach 的第三个参数 (tag: string) => tag 是键生成函数，它告诉 ArkUI 框架如何唯一标识列表中的每一项。这里直接使用标签文本作为键，因为每个分类标签都是唯一的。正确的键生成函数对于列表的高效渲染和动画效果至关重要。

3.6.2 字体 Tab 整体结构

  /** 字体 Tab（业务主Tab）：今日精选字体卡 + 热门字体榜 + 字库厂商横滑 + Canvas 雷达图 */
  @Builder
  tabFont() {
    Column({ space: 12 }) {
      this.recBanner()
      this.rankCard()
      // 字库厂商横滑卡...
      this.chartCard()
    }
    .width('100%')
  }

字体 Tab 是应用的主 Tab，由四个卡片模块垂直排列组成：今日精选（recBanner）、热门字体榜（rankCard）、入驻字库厂商横滑和五维评估雷达图（chartCard）。每个模块都被封装为独立的 Builder 函数，保持了代码的模块化和可读性。12px 的间距让卡片之间有清晰的呼吸感。

3.6.3 今日精选卡片

  /** 今日精选字体卡（3 条：大号字直接展示字体名效果 + 字重数 + 授权方式） */
  @Builder
  recBanner() {
    Column({ space: 10 }) {
      Row() {
        Text('🔥 今日精选').fontSize(13).fontColor(COLORS.title).fontWeight(FontWeight.Bold)
        Column().layoutWeight(1)
        Text('每天 10:00 更新').fontSize(9).fontColor(COLORS.text3)
      }
      .width('100%')

      ForEach(TODAY_RECS, (rec: FontRec) => {
        Row({ space: 10 }) {
          Text(rec.glyph).fontSize(20).fontColor(COLORS.red)
            .width(42).height(42).textAlign(TextAlign.Center)
            .borderRadius(10).backgroundColor(COLORS.chip)
          Column({ space: 3 }) {
            Text(rec.name).fontSize(18).fontColor(COLORS.title).fontWeight(FontWeight.Bold)
            Text(rec.style + ' · ' + rec.weights + ' · ' + rec.license).fontSize(9).fontColor(COLORS.sub)
              .maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
          }
          .layoutWeight(1).alignItems(HorizontalAlign.Start)
          Text('授权').fontSize(10).fontColor(COLORS.red)
            .padding({ left: 12, right: 12, top: 6, bottom: 6 })
            .borderRadius(12)
            .border({ width: 1, color: COLORS.red })
            .onClick(() => {
              this.currentTab = 1;
            })
        }
        .width('100%')
        .padding(11)
        .borderRadius(11)
        .backgroundColor(COLORS.chip)
      }, (rec: FontRec) => rec.name)
    }
    .width('100%').padding(14).backgroundColor(COLORS.card).borderRadius(12)
    .border({ width: 1, color: COLORS.line })
  }

今日精选卡片展示三款推荐字体，每条记录的左侧是一个 42×42 的方形字样展示区，中间是字体名和副标题，右侧是"授权"按钮。字样展示区使用 20px 的朱砂红大字，直观呈现该字体的代表字（如"永"、“墨”、“书”）。在实际产品中，这里会加载真实的字体文件来展示字形效果，让用户一眼就能感受到字体风格。

副标题用点号分隔三个信息：风格分类、字重数量和授权方式。.maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis }) 确保文字过长时以省略号结尾，不会撑破布局。右侧的"授权"按钮使用描边样式（红色边框 + 红色文字 + 透明背景），视觉权重低于填充按钮，避免与顶部的主 CTA 竞争注意力。点击后跳转到网页 Tab，暗示用户可以在网页中查看详细授权信息并下载字体。

3.6.4 热门字体榜

  /** 大编号热门字体榜（8 条：名次 + 字体 + 厂商 + 字重 + 商用授权价 + 趋势） */
  @Builder
  rankCard() {
    Column({ space: 10 }) {
      Row() {
        Text('🏆 热门字体榜').fontSize(13).fontColor(COLORS.title).fontWeight(FontWeight.Bold)
        Column().layoutWeight(1)
        Text('按商用授权量').fontSize(9).fontColor(COLORS.text3)
      }
      .width('100%')

      ForEach(this.fontList, (s: FontItem, idx: number) => {
        Row({ space: 10 }) {
          Text(s.rank).fontSize(20).fontWeight(FontWeight.Bold)
            .fontColor(idx < 3 ? COLORS.red : COLORS.text3)
            .width(30)
          Column({ space: 3 }) {
            Text(s.name).fontSize(13).fontColor(COLORS.title).fontWeight(FontWeight.Bold)
            Text(s.foundry + ' · ' + s.weights).fontSize(9).fontColor(COLORS.sub)
          }
          .layoutWeight(1).alignItems(HorizontalAlign.Start)
          Column({ space: 2 }) {
            Text(s.price).fontSize(9).fontColor(COLORS.red)
            Text(trendIcon(s.trend)).fontSize(9).fontColor(trendColor(s.trend))
          }
          .alignItems(HorizontalAlign.End)
        }
        .width('100%')
        .padding({ top: 8, bottom: 8 })
        .borderRadius(10)
        .backgroundColor(idx % 2 === 0 ? COLORS.chip : COLORS.card)
      }, (s: FontItem) => s.rank)
    }
    .width('100%').padding(14).backgroundColor(COLORS.card).borderRadius(12)
    .border({ width: 1, color: COLORS.line })
  }

热门字体榜是字体 Tab 的核心内容，展示 8 款热门字体的排名。每条记录从左到右依次是名次编号、字体信息（名称 + 厂商/字重）和价格趋势信息。名次编号使用 20px 的粗体字，前三名使用朱砂红高亮，后五名使用灰色，形成了清晰的"领奖台"视觉效果。

奇偶行使用不同的背景色（偶数行 COLORS.chip 浅米色，奇数行 COLORS.card 白色），这是列表设计中的经典"斑马纹"模式，帮助用户在长列表中区分行与行之间的边界。价格使用朱砂红色突出显示，趋势图标和颜色通过前面定义的 trendIcon 和 trendColor 辅助函数动态获取，确保了状态展示的一致性。

3.6.5 字库厂商横滑卡

      // 字库厂商横滑卡（FoundryItem：方正/汉仪风格虚拟厂商）
      Column({ space: 10 }) {
        Row() {
          Text('🏛 入驻字库厂商').fontSize(13).fontColor(COLORS.title).fontWeight(FontWeight.Bold)
          Column().layoutWeight(1)
          Text('共 46 家').fontSize(9).fontColor(COLORS.text3)
        }
        .width('100%')

        Scroll() {
          Row({ space: 10 }) {
            ForEach(this.foundryList, (f: FoundryItem) => {
              Column({ space: 5 }) {
                Text(f.name).fontSize(12).fontColor(COLORS.title).fontWeight(FontWeight.Bold)
                Text(f.tag).fontSize(9).fontColor(COLORS.sub)
                  .maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
                Row({ space: 4 }) {
                  Text(f.count).fontSize(9).fontColor(COLORS.red).fontWeight(FontWeight.Bold)
                  Text('招牌 ' + f.hot).fontSize(9).fontColor(COLORS.text3)
                    .maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
                }
                .width('100%')
              }
              .width(120)
              .padding(11)
              .borderRadius(11)
              .backgroundColor(COLORS.chip)
              .alignItems(HorizontalAlign.Start)
            }, (f: FoundryItem) => f.name)
          }
        }
        .scrollable(ScrollDirection.Horizontal)
        .scrollBar(BarState.Off)
        .width('100%')
      }
      .width('100%').padding(14).backgroundColor(COLORS.card).borderRadius(12)
      .border({ width: 1, color: COLORS.line })

字库厂商横滑卡采用横向滚动的卡片列表形式，每张卡片固定宽度 120px，展示厂商名、一句话定位、在售字体数和招牌字体。在售字体数使用朱砂红粗体突出，作为厂商实力的量化指标。招牌字体使用弱化的第三级文字色，作为用户进一步探索的入口提示。

横向滚动的交互模式在移动端非常常见，它在有限的屏幕宽度内展示了更多内容，同时保持了页面的纵向节奏。.scrollBar(BarState.Off) 隐藏滚动条，让界面更加干净。

3.6.6 Canvas 雷达图卡片

  /** 图表卡：Canvas 热门字体五维评估雷达图（呼吸动画联动重绘） */
  @Builder
  chartCard() {
    Column({ space: 10 }) {
      Row() {
        Text('📊 五维评估雷达').fontSize(13).fontColor(COLORS.title).fontWeight(FontWeight.Bold)
        Column().layoutWeight(1)
        Text('云鹤宋 · Canvas').fontSize(9).fontColor(COLORS.text3)
      }
      .width('100%')

      Canvas(this.radarCtx)
        .width('100%')
        .height(200)
        .onReady(() => {
          this.canvasReady = true;
          this.drawRadarChart();
        })

      Row() {
        Text('商用授权与字形美感双高').fontSize(9).fontColor(COLORS.sub)
        Column().layoutWeight(1)
        Text('综合 82 分').fontSize(9).fontColor(COLORS.red)
      }
      .width('100%')
    }
    .width('100%').padding(14).backgroundColor(COLORS.card).borderRadius(12)
    .border({ width: 1, color: COLORS.line })
  }

雷达图卡片是字体 Tab 的视觉亮点。Canvas 组件接收一个 CanvasRenderingContext2D 上下文对象作为参数，设置宽度为 100%、高度为 200px。onReady 回调在 Canvas 初始化完成后触发，此时将 canvasReady 标志设为 true 并调用 drawRadarChart() 执行首次绘制。

由于呼吸动画定时器已经在 aboutToAppear 中启动，且定时器回调中检查了 canvasReady 标志，所以 Canvas 一旦就绪就会立即加入动画循环。每秒一次的重绘频率对于雷达图这种简单图形来说性能开销极低，但带来的视觉品质提升却非常明显——微妙的大小变化让静态的数据图表"活"了起来。

卡片底部的总结文案指出了这款字体的核心优势（“商用授权与字形美感双高”），右侧再次强调综合评分。这种"图 + 文"的双重表达，既满足了喜欢看图的用户，也照顾了偏好文字描述的用户。

3.7 Builder 函数群——网页 Tab 与下载 Tab

3.7.1 网页 Tab

  /** 网页 Tab：地址栏 + 快捷字库站点 + Web 组件 + 主动下载（ArkWeb 特性页） */
  @Builder
  tabWeb() {
    Column({ space: 10 }) {
      // 地址栏：输入 + 前往（urlInput/webUrl 双状态分离）
      Row({ space: 8 }) {
        TextInput({ text: this.urlInput, placeholder: '输入字库网址，如 fonts.google.com' })
          .layoutWeight(1).height(38).fontSize(11).fontColor(COLORS.title)
          .backgroundColor(COLORS.chip).borderRadius(10)
          .onChange((value: string) => {
            this.urlInput = value;
          })
        Text('前往').fontSize(11).fontColor('#FFFFFF')
          .padding({ left: 14, right: 14, top: 10, bottom: 10 })
          .backgroundColor(COLORS.red).borderRadius(10)
          .onClick(() => {
            this.loadUrl();
          })
      }
      .width('100%')

网页 Tab 是 ArkWeb 能力的主要展示区域，从上到下依次是地址栏、快捷站点横滑、Web 组件和主动下载演示区。地址栏由一个 TextInput 输入框和一个"前往"按钮组成。输入框的内容双向绑定到 urlInput 状态变量，用户的每次输入都会实时更新，但不会立即触发 Web 组件的加载——只有点击"前往"按钮后，loadUrl() 方法才会将 urlInput 的值同步到 webUrl，进而触发 Web 组件的页面加载。

这种"输入值与加载值分离"的设计模式有两个重要优势：一是避免了输入过程中 Web 组件频繁重新加载，提升了性能；二是允许用户在输入过程中看到建议或历史记录，完成输入后再统一提交，符合标准浏览器的交互模式。

      // 快捷站点横滑（点击即加载）
      Scroll() {
        Row({ space: 8 }) {
          ForEach(QUICK_SITES, (site: string) => {
            Row({ space: 5 }) {
              Text('🔗').fontSize(10)
              Text(siteHost(site)).fontSize(9)
                .fontColor(this.webUrl === site ? '#FFFFFF' : COLORS.sub)
                .backgroundColor(this.webUrl === site ? COLORS.red : COLORS.chip)
                .maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
            }
            .padding({ left: 10, right: 10, top: 6, bottom: 6 })
            .backgroundColor(this.webUrl === site ? COLORS.red : COLORS.chip)
            .borderRadius(12)
            .onClick(() => {
              this.urlInput = site;
              this.webUrl = site;
            })
          }, (site: string) => site)
        }
      }
      .scrollable(ScrollDirection.Horizontal)
      .scrollBar(BarState.Off)
      .width('100%')

快捷站点横滑条提供了四个常用字库网站的快速入口，点击即可加载。选中状态通过 this.webUrl === site 判断，选中的站点标签使用朱砂红背景配白色文字，未选中的使用浅米色背景配深色文字。点击快捷站点时，同时更新 urlInput 和 webUrl 两个变量——前者让地址栏同步显示当前网址，后者触发 Web 组件加载新页面。

siteHost 辅助函数在这里被调用来去掉 URL 的 https:// 前缀，只显示域名部分，节省了横向空间。

      // Web 组件本体：网页内点击字体下载链接自动进入 delegate 回调
      Web({ src: this.webUrl, controller: this.webController })
        .layoutWeight(1)
        .width('100%')
        .borderRadius(10)
        .backgroundColor(COLORS.chip)

Web 组件是网页 Tab 的核心，使用 this.webUrl 作为加载源，this.webController 作为控制器。.layoutWeight(1) 让它占据地址栏和主动下载区之间的所有剩余空间。圆角 10px 和浅米色背景让 Web 组件与整体设计风格融合，而不是一个突兀的矩形框。

由于在 aboutToAppear 中已经通过 setupDownloadDelegate() 注册了下载代理，用户在 Web 组件中浏览网页时点击任何下载链接，都会触发 WebDownloadDelegate 的四个回调，下载进度和完成记录会实时同步到下载 Tab 中。

      // 主动下载演示行（应用侧 startDownload 触发）
      Column({ space: 8 }) {
        Row() {
          Text('🧪 应用侧主动下载演示').fontSize(12).fontColor(COLORS.title).fontWeight(FontWeight.Bold)
          Column().layoutWeight(1)
          Text(this.dlState).fontSize(9).fontColor(this.dlState === '下载完成' ? COLORS.green : COLORS.red)
        }
        .width('100%')
        Row({ space: 10 }) {
          Text('下载云鹤宋家族包').fontSize(10).fontColor('#FFFFFF')
            .layoutWeight(1).textAlign(TextAlign.Center)
            .padding({ top: 9, bottom: 9 }).backgroundColor(COLORS.red).borderRadius(9)
            .onClick(() => {
              this.triggerDownload('https://dl.yantian-fonts.cn/yunhe/YunHeSong_v2.4_Family_20260825.zip');
            })
          Text('下载墨渊黑 900').fontSize(10).fontColor(COLORS.red)
            .layoutWeight(1).textAlign(TextAlign.Center)
            .padding({ top: 9, bottom: 9 })
            .borderRadius(9).border({ width: 1, color: COLORS.red })
            .onClick(() => {
              this.triggerDownload('https://cdn.yunzhang.design/moyuan/MoYuanHei_Weight900.otf');
            })
        }
        .width('100%')
        Text('提示：网页内点击字体下载链接同样会触发 WebDownloadDelegate 四回调').fontSize(8).fontColor(COLORS.text3)
      }
      .width('100%').padding(12).backgroundColor(COLORS.card).borderRadius(12)
      .border({ width: 1, color: COLORS.line })
    }
    .width('100%')
    .height('100%')
  }

主动下载演示区提供了两个下载按钮，展示了应用侧主动触发下载的能力。第一个按钮使用填充样式（主按钮），第二个使用描边样式（次按钮），形成了明确的主次关系。点击按钮会调用 triggerDownload 方法，通过 webController.startDownload() 直接发起下载请求。

状态文案的颜色根据下载状态动态变化：下载完成时使用绿色（成功态），其他状态使用朱砂红（进行中/失败）。底部的提示文字明确告知用户，无论是网页内点击下载还是应用侧主动下载，都会经过统一的 WebDownloadDelegate 处理流程，确保下载溯源的完整性。

3.7.2 下载 Tab——进行中任务与代码预览

  /** 下载 Tab：进行中任务卡 + 完成记录双 URL 溯源列表 + 代码预览卡 */
  @Builder
  tabDownload() {
    Column({ space: 12 }) {
      // 进行中任务卡（进度条 + 状态）
      Column({ space: 10 }) {
        Row() {
          Text('⬇ 字体下载任务').fontSize(13).fontColor(COLORS.title).fontWeight(FontWeight.Bold)
          Column().layoutWeight(1)
          Text(this.dlState).fontSize(9).fontColor(COLORS.red)
        }
        .width('100%')
        Text(this.dlName === '' ? '暂无进行中任务（可在网页 Tab 触发）' : this.dlName)
          .fontSize(10).fontColor(COLORS.sub)
          .maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
        Progress({ value: this.dlPercent, total: 100, type: ProgressType.Linear })
          .width('100%').height(6)
          .color(COLORS.red).backgroundColor(COLORS.chip)
        Row() {
          Text('进度 ' + this.dlPercent + '%').fontSize(9).fontColor(COLORS.sub)
          Column().layoutWeight(1)
          Text('保存至沙箱 filesDir').fontSize(9).fontColor(COLORS.text3)
        }
        .width('100%')
      }
      .width('100%').padding(14).backgroundColor(COLORS.card).borderRadius(12)
      .border({ width: 1, color: COLORS.line })

下载 Tab 由三个模块组成：进行中任务卡、代码预览卡和历史下载记录列表。进行中任务卡展示当前下载的文件名、进度条和状态信息。进度条使用 ArkUI 内置的 Progress 组件，类型为 ProgressType.Linear（线性进度条），高度仅 6px，显得精致而不笨重。进度条的已完成部分使用朱砂红，背景部分使用浅米色，与整体主题一致。

文件名使用了空状态处理：如果 dlName 为空，显示提示文案"暂无进行中任务（可在网页 Tab 触发）"，引导用户去网页 Tab 触发下载。这种空状态设计避免了页面出现空白区域，同时起到了功能引导的作用。

      // onDownloadFinish 代码预览卡（体现 6.1.1 新增双接口）
      Column({ space: 6 }) {
        Text('⌨️ onDownloadFinish 回调（HarmonyOS 6.1.1 新增）').fontSize(12)
          .fontColor(COLORS.title).fontWeight(FontWeight.Bold)
        Column({ space: 4 }) {
          Text('this.downloadDelegate.onDownloadFinish(').fontSize(9).fontFamily('monospace').fontColor(COLORS.codeFg)
          Text('  (item: webview.WebDownloadItem) => {').fontSize(9).fontFamily('monospace').fontColor(COLORS.codeFg)
          Text('    const original = item.getOriginalUrl();').fontSize(9).fontFamily('monospace').fontColor(COLORS.codeKey)
          Text('    const referrer = item.getReferrerUrl();').fontSize(9).fontFamily('monospace').fontColor(COLORS.codeRef)
          Text('  });').fontSize(9).fontFamily('monospace').fontColor(COLORS.codeFg)
        }
        .width('100%').padding(10).borderRadius(8).backgroundColor(COLORS.codeBg)
        Text('原始 URL 追踪字体文件直链来源，引用页 URL 记录授权详情页出处').fontSize(8).fontColor(COLORS.text3)
      }
      .width('100%').padding(14).backgroundColor(COLORS.card).borderRadius(12)
      .border({ width: 1, color: COLORS.line })

代码预览卡是下载 Tab 的亮点设计。它不是使用真正的代码高亮组件，而是通过多个 Text 组件手动模拟代码的语法高亮效果。每一行代码都是一个独立的 Text 组件，使用 monospace 等宽字体确保代码对齐。不同类型的代码元素使用不同的颜色：普通代码使用 COLORS.codeFg 浅米色，getOriginalUrl() 关键字使用 COLORS.codeKey 浅红色，getReferrerUrl() 引用使用 COLORS.codeRef 金色。

这种手动模拟代码高亮的方式虽然在维护性上不如真正的代码高亮组件，但在 ArkUI 的声明式框架下，它是一种轻量且可控的实现方式，特别适合展示小段的示例代码。代码块下方的说明文字简明扼要地解释了双 URL 的作用，帮助开发者快速理解新特性的价值。

3.7.3 下载 Tab——历史记录双 URL 溯源

      // 已完成记录列表（每条含双 URL 溯源信息）
      Column({ space: 10 }) {
        Row() {
          Text('🗂 历史下载记录').fontSize(13).fontColor(COLORS.title).fontWeight(FontWeight.Bold)
          Column().layoutWeight(1)
          Text(this.downloadRecords.length + ' 条').fontSize(9).fontColor(COLORS.text3)
        }
        .width('100%')

        ForEach(this.downloadRecords, (rec: DownloadRecord, idx: number) => {
          Column({ space: 6 }) {
            Row({ space: 8 }) {
              Text('🔤').fontSize(14)
              Column({ space: 2 }) {
                Text(rec.fileName).fontSize(11).fontColor(COLORS.title).fontWeight(FontWeight.Bold)
                  .maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
                Text(rec.fileSize + ' · ' + rec.finishTime + ' · ' + rec.note).fontSize(9).fontColor(COLORS.sub)
                  .maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
              }
              .layoutWeight(1).alignItems(HorizontalAlign.Start)
              Text('改').fontSize(9).fontColor(COLORS.sub)
                .padding({ left: 8, right: 8, top: 4, bottom: 4 })
                .backgroundColor(COLORS.chip).borderRadius(8)
                .onClick(() => {
                  this.openEditRecord(idx);
                })
              Text('删').fontSize(9).fontColor(COLORS.red)
                .padding({ left: 8, right: 8, top: 4, bottom: 4 })
                .backgroundColor(COLORS.chip).borderRadius(8)
                .onClick(() => {
                  this.delIdx = idx;
                  this.delModal = true;
                })
            }
            .width('100%')

历史下载记录列表是双 URL 溯源能力的主要展示区域。每条记录分为三行：第一行是文件名、元信息和操作按钮，第二行是原始 URL，第三行是引用页 URL。操作按钮包括"改"和"删"两个，分别对应编辑备注和删除记录的功能。

按钮使用了"文字 + 浅底色"的极简设计风格，没有使用图标。这种设计在紧凑的列表行中更加节省空间，同时保持了操作的可发现性。"改"按钮使用次级文字色，"删"按钮使用朱砂红色——删除是不可逆操作，用红色提醒用户谨慎操作。

            // ★ 原始 URL 溯源行（getOriginalUrl 结果）
            Row({ space: 6 }) {
              Text('🔗').fontSize(9)
              Text(rec.originalUrl).fontSize(8).fontFamily('monospace').fontColor(COLORS.red)
                .layoutWeight(1).maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
            }
            .width('100%')

            // ★ 引用页 URL 溯源行（getReferrerUrl 结果）
            Row({ space: 6 }) {
              Text('📄').fontSize(9)
              Text(rec.referrerUrl).fontSize(8).fontFamily('monospace').fontColor(COLORS.gold)
                .layoutWeight(1).maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
            }
            .width('100%')
          }
          .width('100%').padding(11).borderRadius(11).backgroundColor(COLORS.chip)
        }, (rec: DownloadRecord) => rec.fileName)
      }
      .width('100%').padding(14).backgroundColor(COLORS.card).borderRadius(12)
      .border({ width: 1, color: COLORS.line })
    }
    .width('100%')
  }

双 URL 溯源行是每条下载记录的核心信息。原始 URL（originalUrl）使用链接图标 🔗 和朱砂红色，表示这是文件的直链地址；引用页 URL（referrerUrl）使用文档图标 📄 和金色，表示这是来源页面地址。两种不同的图标和颜色形成了清晰的语义区分，用户一眼就能分辨出哪个是文件地址、哪个是页面地址。

URL 使用 8px 的等宽字体（fontFamily('monospace')）显示，这是因为等宽字体在显示长字符串时更易于阅读和对齐。.maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis }) 确保超长的 URL 不会破坏布局，而是以省略号结尾。用户虽然无法在列表中看到完整的 URL，但颜色和图标的语义化设计已经传达了"这里有一个可追溯的来源地址"的信息。

3.8 Builder 函数群——我的 Tab 与底部导航

3.8.1 我的 Tab

  /** 我的 Tab：字体收藏家渐变大卡 + 收藏统计行 + 功能清单行 */
  @Builder
  tabMine() {
    Column({ space: 12 }) {
      // 收藏家渐变大卡
      Column({ space: 8 }) {
        Row({ space: 12 }) {
          Text('🖋').fontSize(34)
          Column({ space: 4 }) {
            Text('字体收藏家 · 阿砚').fontSize(15).fontColor('#FFFFFF').fontWeight(FontWeight.Bold)
            Text('金卡会员 · 已购商用授权 12 份').fontSize(9).fontColor('rgba(255,255,255,0.85)')
          }
          .layoutWeight(1).alignItems(HorizontalAlign.Start)
          Text('藏家 Lv.6').fontSize(10).fontColor('#FFFFFF')
            .padding({ left: 10, right: 10, top: 5, bottom: 5 })
            .borderRadius(10).backgroundColor('rgba(255,255,255,0.25)')
        }
        .width('100%')

"我的"Tab 顶部是一张渐变大卡，展示用户的个人信息和会员等级。卡片使用与头部 Banner 相同的朱砂红渐变配色，形成品牌视觉的一致性。用户信息区域包含头像 emoji、用户名、会员等级和已购授权数量。等级标签"藏家 Lv.6"使用半透明白色背景（rgba(255,255,255,0.25)），在渐变背景上显得通透而有层次。

“字体收藏家"这个用户身份定位很有创意——它不是普通的"用户"或"会员”，而是将使用字体的人定位为"收藏家"，既贴合字体平台的产品属性，又能给用户带来身份认同和情感连接。

        Row({ space: 8 }) {
          Column({ space: 2 }) {
            Text('186').fontSize(15).fontColor('#FFFFFF').fontWeight(FontWeight.Bold)
            Text('累计下载').fontSize(8).fontColor('rgba(255,255,255,0.75)')
          }
          .layoutWeight(1)
          Column({ space: 2 }) {
            Text('27').fontSize(15).fontColor('#FFFFFF').fontWeight(FontWeight.Bold)
            Text('本月记录').fontSize(8).fontColor('rgba(255,255,255,0.75)')
          }
          .layoutWeight(1)
          Column({ space: 2 }) {
            Text('128').fontSize(15).fontColor('#FFFFFF').fontWeight(FontWeight.Bold)
            Text('收藏字体').fontSize(8).fontColor('rgba(255,255,255,0.75)')
          }
          .layoutWeight(1)
          Column({ space: 2 }) {
            Text('12').fontSize(15).fontColor('#FFFFFF').fontWeight(FontWeight.Bold)
            Text('已购授权').fontSize(8).fontColor('rgba(255,255,255,0.75)')
          }
          .layoutWeight(1)
        }
        .width('100%')
      }
      .width('100%').padding(16).borderRadius(14)
      .linearGradient({ angle: 135, colors: [[COLORS.redD, 0], [COLORS.red, 0.55], [COLORS.orange, 1]] })

大卡底部是四个数据统计项，横向四等分排列：累计下载、本月记录、收藏字体和已购授权。每个数据项都是"大号数字 + 小号标签"的经典统计卡片格式。数字使用粗体白色，标签使用 75% 透明度的白色，形成清晰的视觉层级。

这四个数据从不同维度量化了用户在平台上的活跃度和投入度：累计下载体现总量，本月记录体现近期活跃，收藏字体体现兴趣广度，已购授权体现付费深度。对于用户来说，这些数据既是个人收藏成果的展示，也是激励继续探索的动力。

      // 功能清单行
      Column({ space: 0 }) {
        ForEach(this.statList, (st: UserStat) => {
          Row({ space: 10 }) {
            Text(st.icon).fontSize(15)
            Text(st.label).fontSize(11).fontColor(COLORS.title)
              .layoutWeight(1)
            Text(st.value).fontSize(9).fontColor(COLORS.text3)
            if (st.arrow) {
              Text('›').fontSize(14).fontColor(COLORS.text3)
            }
          }
          .width('100%')
          .padding({ top: 11, bottom: 11 })
          .border({ width: { bottom: 1 }, color: COLORS.line })
          .onClick(() => {
            if (st.label === '下载历史') {
              this.currentTab = 2;
            }
            if (st.label === '收藏字体') {
              this.currentTab = 0;
            }
          })
        }, (st: UserStat) => st.label)
      }
      .width('100%').padding({ left: 14, right: 14 }).backgroundColor(COLORS.card).borderRadius(12)
      .border({ width: 1, color: COLORS.line })

      Text('字体集 v6.1.1 · ArkWeb 双 URL 授权溯源版').fontSize(8).fontColor(COLORS.text3)
    }
    .width('100%')
  }

功能清单位于大卡下方，是一个标准的设置列表样式。每行从左到右依次是图标、功能名、状态/数值和右箭头。分割线只显示在每行的底部（border({ width: { bottom: 1 } })），最后一行也不例外——这种统一的分割线风格简洁利落。

点击事件做了部分实现：点击"下载历史"跳转到下载 Tab，点击"收藏字体"跳转到字体 Tab。这是一种"设置列表跳转到对应功能页"的常见交互模式。其他清单项虽然没有实现跳转逻辑，但右箭头的存在暗示了它们都是可点击的，为后续功能扩展预留了交互入口。

页面最底部的版本号"字体集 v6.1.1 · ArkWeb 双 URL 授权溯源版"既是版本标识，也是产品核心价值的浓缩表达——版本号对应 HarmonyOS 6.1.1，副标题点明了双 URL 授权溯源这一核心特性。

3.8.2 底部导航

  /** 底部导航：4 Tab 单排（选中朱砂红高亮 + 图标放大） */
  @Builder
  tabBar() {
    Row() {
      ForEach(TAB_LIST, (t: TabMeta, idx: number) => {
        Column({ space: 3 }) {
          Text(t.icon).fontSize(this.currentTab === idx ? 20 : 17)
            .opacity(this.currentTab === idx ? 1 : 0.65)
          Text(t.label).fontSize(9)
            .fontColor(this.currentTab === idx ? COLORS.tabOn : COLORS.text3)
            .fontWeight(this.currentTab === idx ? FontWeight.Bold : FontWeight.Normal)
        }
        .layoutWeight(1).alignItems(HorizontalAlign.Center)
        .padding({ top: 7, bottom: 7 })
        .onClick(() => {
          this.currentTab = idx;
        })
      }, (t: TabMeta) => t.label)
    }
    .width('100%')
    .backgroundColor(COLORS.card)
    .border({ width: { top: 1 }, color: COLORS.line })
  }

底部导航栏是典型的四 Tab 单排布局，通过 ForEach 遍历 TAB_LIST 数组生成。每个 Tab 由图标和文字组成，选中状态和未选中状态有三重视觉差异：图标大小（20px vs 17px）、图标透明度（1 vs 0.65）和文字颜色/字重（朱砂红粗体 vs 灰色常规）。这三重差异组合在一起，形成了足够明显的选中反馈。

使用 .layoutWeight(1) 让四个 Tab 等分底部宽度，每个 Tab 的图标和文字都居中对齐。顶部有一条 1px 的分割线与内容区隔开。点击 Tab 时更新 currentTab 的值，主内容区会根据这个值切换显示对应的 Tab 内容。

3.9 Builder 函数群——弹窗系统

3.9.1 弹窗遮罩与新建下载弹窗

  /** 弹窗全屏遮罩（点击遮罩关闭弹窗） */
  @Builder
  modalOverlay(onClose: () => void) {
    Stack() {
      Column().width('100%').height('100%').backgroundColor(COLORS.mask)
    }
    .width('100%')
    .height('100%')
    .alignContent(Alignment.Center)
    .onClick(() => onClose())
  }

modalOverlay 是弹窗系统的基础组件——一个全屏的半透明遮罩。它使用 COLORS.mask（rgba(43,43,43,0.42)，即 42% 不透明度的石墨黑）作为背景色，既能遮挡背后的主内容以突出弹窗，又不会完全遮挡导致用户失去上下文感。

遮罩本身绑定了点击事件，点击遮罩区域会触发 onClose 回调关闭弹窗。这是模态对话框的标准交互模式——点击弹窗外的区域即可关闭，降低了用户的操作成本。

  /** 新建字体下载任务弹窗面板（字体文件链接 + 备注） */
  @Builder
  panelAdd(onClose: () => void) {
    Stack() {
      this.modalOverlay(onClose)
      Column({ space: 12 }) {
        Text('新建字体下载').fontSize(15).fontColor(COLORS.title).fontWeight(FontWeight.Bold)

        Column({ space: 6 }) {
          Text('字体文件链接').fontSize(9).fontColor(COLORS.sub)
          TextInput({ text: this.formUrl, placeholder: 'https://dl.yantian-fonts.cn/yunhe/...' })
            .fontSize(11).fontColor(COLORS.title)
            .backgroundColor(COLORS.chip).borderRadius(8)
            .onChange((value: string) => {
              this.formUrl = value;
            })
        }
        .width('100%').alignItems(HorizontalAlign.Start)

        Column({ space: 6 }) {
          Text('备注（可选）').fontSize(9).fontColor(COLORS.sub)
          TextInput({ text: this.formNote, placeholder: '如：官网直链 / 榜单推荐' })
            .fontSize(11).fontColor(COLORS.title)
            .backgroundColor(COLORS.chip).borderRadius(8)
            .onChange((value: string) => {
              this.formNote = value;
            })
        }
        .width('100%').alignItems(HorizontalAlign.Start)

        Text('发起后经 startDownload 触发，完成回调记录双 URL').fontSize(8).fontColor(COLORS.text3)

        Row({ space: 10 }) {
          Text('取消').fontSize(12).fontColor(COLORS.sub)
            .layoutWeight(1).textAlign(TextAlign.Center)
            .padding({ top: 9, bottom: 9 }).backgroundColor(COLORS.chip).borderRadius(9)
            .onClick(() => onClose())
          Text('开始下载').fontSize(12).fontColor('#FFFFFF').fontWeight(FontWeight.Bold)
            .layoutWeight(1).textAlign(TextAlign.Center)
            .padding({ top: 9, bottom: 9 }).backgroundColor(COLORS.red).borderRadius(9)
            .onClick(() => {
              this.saveDownload();
            })
        }
        .width('100%')
      }
      .width('78%').padding(16).backgroundColor(COLORS.card).borderRadius(14)
    }
    .width('100%')
    .height('100%')
    .alignContent(Alignment.Center)
  }

panelAdd 是新建下载任务的弹窗面板。它在 Stack 中叠放了遮罩层和内容面板，内容面板宽度为屏幕的 78%，居中显示。弹窗包含两个输入字段：字体文件链接和备注，以及取消和开始下载两个按钮。

表单字段采用"标签在上、输入框在下"的垂直排列方式，标签使用小号次级文字色，输入框使用浅米色背景和圆角，与整体设计语言保持一致。提示文字"发起后经 startDownload 触发，完成回调记录双 URL"解释了下载的技术路径，让了解技术的用户对数据流向有清晰的预期。

底部按钮采用左右等分的双按钮布局：取消按钮为浅底灰字（次级操作），开始下载按钮为红底白字（主操作）。这种主次分明的按钮设计引导用户做出正确的操作选择。

3.9.2 编辑备注与删除确认弹窗

  /** 编辑备注弹窗面板（回填当前记录备注） */
  @Builder
  panelEdit(onClose: () => void) {
    Stack() {
      this.modalOverlay(onClose)
      Column({ space: 12 }) {
        Text('编辑下载备注').fontSize(15).fontColor(COLORS.title).fontWeight(FontWeight.Bold)

        Column({ space: 6 }) {
          Text('记录备注').fontSize(9).fontColor(COLORS.sub)
          TextInput({ text: this.editNote, placeholder: '如：官网直链 / 限时五折' })
            .fontSize(11).fontColor(COLORS.title)
            .backgroundColor(COLORS.chip).borderRadius(8)
            .onChange((value: string) => {
              this.editNote = value;
            })
        }
        .width('100%').alignItems(HorizontalAlign.Start)

        Row({ space: 10 }) {
          Text('取消').fontSize(12).fontColor(COLORS.sub)
            .layoutWeight(1).textAlign(TextAlign.Center)
            .padding({ top: 9, bottom: 9 }).backgroundColor(COLORS.chip).borderRadius(9)
            .onClick(() => onClose())
          Text('保存').fontSize(12).fontColor('#FFFFFF').fontWeight(FontWeight.Bold)
            .layoutWeight(1).textAlign(TextAlign.Center)
            .padding({ top: 9, bottom: 9 }).backgroundColor(COLORS.red).borderRadius(9)
            .onClick(() => {
              this.updateRecord();
            })
        }
        .width('100%')
      }
      .width('78%').padding(16).backgroundColor(COLORS.card).borderRadius(14)
    }
    .width('100%')
    .height('100%')
    .alignContent(Alignment.Center)
  }

panelEdit 编辑备注弹窗的结构与新建弹窗类似，但只包含一个备注输入字段。打开弹窗时，openEditRecord 方法会将当前记录的备注回填到 editNote 中，用户可以在原有基础上修改。保存时调用 updateRecord 方法更新记录。

弹窗系统采用了统一的设计语言：相同的宽度比例（78%）、相同的内边距（16px）、相同的圆角（14px）、相同的按钮样式和布局。这种一致性让用户在不同弹窗之间切换时不会产生认知负担，提升了整体的使用体验。

  /** 删除记录确认弹窗面板 */
  @Builder
  panelDel(onClose: () => void) {
    Stack() {
      this.modalOverlay(onClose)
      Column({ space: 14 }) {
        Text('🗑').fontSize(30)
        Text('删除这条下载记录？').fontSize(14).fontColor(COLORS.title).fontWeight(FontWeight.Bold)
        Text('仅移除记录，不影响已保存到沙箱的字体文件').fontSize(9).fontColor(COLORS.text3)
        Row({ space: 10 }) {
          Text('取消').fontSize(12).fontColor(COLORS.sub)
            .layoutWeight(1).textAlign(TextAlign.Center)
            .padding({ top: 9, bottom: 9 }).backgroundColor(COLORS.chip).borderRadius(9)
            .onClick(() => onClose())
          Text('删除').fontSize(12).fontColor('#FFFFFF').fontWeight(FontWeight.Bold)
            .layoutWeight(1).textAlign(TextAlign.Center)
            .padding({ top: 9, bottom: 9 }).backgroundColor(COLORS.red).borderRadius(9)
            .onClick(() => {
              this.delRecord();
            })
        }
        .width('100%')
      }
      .width('72%').padding(18).backgroundColor(COLORS.card).borderRadius(14)
    }
    .width('100%')
    .height('100%')
    .alignContent(Alignment.Center)
  }
}