HarmonyKit | 鸿蒙新特性规范：10 个工具页 UI 一致性设计系统

HarmonyKit | 鸿蒙新特性规范：10 个工具页 UI 一致性设计系统

从混乱中提炼模式

当 HarmonyKit 只有 3 个工具时，每个页面的 UI 结构是"随手写的"。JSON 格式化页面的返回按钮是圆的，Base64 页面的返回按钮是文字链接，时间戳转换页面根本没有返回按钮——因为它还没有从主页解耦出来。

这种不一致在只有 3 个页面时还可以忍受。但当工具扩展到 10 个时，维护 10 种不同的 UI 模式变得不可持续。用户每次打开新工具都需要"重新学习"这个页面的操作逻辑——按钮在哪、输出在哪、怎么复制。

于是提炼出了一个统一的页面模板。这个模板不是凭空设计的——它是从 10 个工具页中提取出来的"最大公约数"。每个工具页面都遵循这个模板，差异只体现在输入控件的选择和操作按钮的布局上。

项目仓库：https://atomgit.com/VON-/harmony-kit

页面模板：五区模型

┌─────────────────────────────┐ │ [返回] 工具名称 │ ← 头部区 ├─────────────────────────────┤ │ │ │ [输入区域] │ ← 输入区 │ TextArea / TextInput │ │ │ │ [选项] [操作1] [操作2] │ ← 操作区 │ │ │ 输出 [复制] │ ← 输出标签 │ [输出区域] │ ← 输出区 │ TextArea (只读) │ │ │ └─────────────────────────────┘

五个区域的职责清晰：

头部区：返回导航 + 页面标题。所有工具页使用相同的头部样式——32px 圆形返回按钮 + 18px Medium 字重的标题。`

输入区：用户输入数据的地方。根据工具类型不同，输入区有四种形态：

• 单行 TextInput（时间戳、进制、颜色值）
• 多行 TextArea（JSON、Base64、URL、正则表达式、哈希文本、文本统计）
• 双输入区（时间戳转换的"戳→日期"和"日期→戳"两个面板）
• 带前置符号的输入（颜色 HEX 输入前面有#号）

操作区：按钮和选项的组合。有五种布局模式：

• 单按钮（文本统计：实时反馈，按钮不是必须的）
• 双按钮（Base64：编码 | 解码）
• 按钮组 + 选项（JSON：2空格 | 4空格 | 格式化 | 压缩）
• 选项组 + 按钮（正则：g | i | m + 匹配按钮）
• 双向面板（时间戳：每个面板有独立的按钮）

输出标签：Text('输出')+CopyButton。这个标签行的存在有两个目的：一是告诉用户"这是结果区域"，二是提供一个复制入口。复制按钮是每个工具页输出区的标配——因为"复制结果到剪贴板"是最高频的后续操作。

输出区：只读的 TextArea 展示处理结果。高度根据预期输出长度调整——哈希结果 100vp（哈希值很短），JSON 格式化结果 200vp（格式化后的 JSON 通常较长）。错误信息如果存在，用红色文本展示在操作区和输出区之间。

输入控件的四种形态

单行 TextInput

适用工具：时间戳转换、颜色转换（HEX 输入和 RGB 输入）、进制转换。

单行输入的特点是可以设置type属性来匹配键盘类型：

TextInput({text:this.tsInput,placeholder:'输入 Unix 时间戳（秒）'}).type(InputType.Number).fontFamily('monospace').backgroundColor('#ffffff').borderRadius(8).padding(12)

时间戳输入使用InputType.Number唤起数字键盘，避免用户输入字母。等宽字体确保数字对齐清晰。

多行 TextArea

适用工具：JSON 格式化、Base64 编解码、URL 编解码、正则测试器、哈希计算、文本统计。

多行输入的高度根据工具的典型输入长度设置：

• JSON 格式化：160vp（JSON 字符串通常较长）
• Base64/URL：140-150vp（编码输入通常短）
• 正则测试文本：120vp（测试文本有长有短，取中值）
• 文本统计：180vp（最长——用户可能粘贴大段文本）

双输入区

时间戳转换是唯一使用双输入面板的工具。页面分为上下两个独立的"输入→操作→输出"流程：

• 上半部分：时间戳 → 日期时间
• 下半部分：日期时间 → 时间戳

两个面板之间用Divider()分割。

带前置符号的输入

颜色转换的 HEX 输入前有一个#符号：

Row(){Text('#').fontSize(14).fontFamily('monospace').fontColor('#666');TextInput({text:hexInput.replace('#',''),placeholder:'007aff'}).layoutWeight(1)}

用户只需要输入007aff，系统自动在展示结果时加上#。这减少了用户的输入工作量，也避免了用户输入错误格式（如#007aff变成##007aff）。

操作按钮的五种布局

单按钮模式

文本统计工具没有独立的操作按钮——统计是随着输入实时更新的。这是唯一不需要"执行"按钮的工具。

双按钮模式

Base64 和 URL 编解码使用两个并排按钮：

Row(){Button('编码').backgroundColor('#007aff')// 主操作：蓝色Button('解码').backgroundColor('#34c759')// 辅操作：绿色}

颜色语义让用户无需文字即可区分主次操作。

按钮组 + 选项模式

JSON 格式化在操作区左侧放置选项按钮（2空格/4空格），右侧放置操作按钮（格式化/压缩）。选项按钮使用是否选中状态的高亮——选中时蓝色背景白色文字，未选时灰色背景暗色文字。

选项组 + 按钮模式

正则测试器在操作区左侧放置标志位选择（g/i/m），右侧放置匹配按钮。标志位按钮是独立的 toggle——可以同时激活多个。哈希计算在左侧放置算法选择（MD5/SHA1/SHA256），右侧放置计算按钮。算法选择是互斥的——只能选一个。

双向面板模式

时间戳转换有两个独立的面板，每个面板有自己的"转换"按钮。这种设计避免了"模式切换"——用户不需要在"时间戳→日期"和"日期→时间戳"之间切换，两个操作同时可见。

输出区域的三要素

每个工具页的输出区域都包含：

1. 标签行：Row() { Text('结果').fontSize(13).fontColor('#666'); Blank(); CopyButton({ text: output }); }

2. 结果展示：TextArea({ text: this.output }).fontSize(13).fontFamily('monospace')。只读——用户只能复制不能编辑。

3. 错误提示：if (errorMsg) { Text(errorMsg).fontSize(12).fontColor('#ff3b30') }。错误信息在操作区和输出区之间展示，位置固定，用户知道该去哪里看错误。

颜色语义的统一化

10 个工具页共享同一套颜色语义：

颜色	色值	语义	使用场景
蓝色	#007aff	主操作	格式化、编码、转换、匹配、计算
绿色	#34c759	辅助操作/成功	压缩、解码
橙色	#ff9500	变更操作	另一种解码模式
红色	#ff3b30	错误/警告	错误提示文字
灰色	#666/#999	元信息	标签、描述、占位符

用户在新工具页看到蓝色按钮时，不需要思考就知道"这是主要操作"。看到红色文字时，立刻知道"这是错误信息"。颜色的稳定语义减少了学习成本。

页面模板的局限性

统一的模板虽然保证了 10 个工具页的一致性，但也带来了一个问题：工具页的"个性化"空间被压缩了。如果一个工具需要完全不同的交互模式（比如需要两个输出区、或需要图表展示、或需要拖拽操作），这个模板就不适用了。

对于首版的 10 个工具来说，统一的模板是利大于弊的选择。未来如果有新工具需要跳出模板——比如二维码生成需要一个 Canvas 区域——这时不是"修改模板"，而是创建一个新的页面类型。

项目仓库：https://atomgit.com/VON-/harmony-kit