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时间戳、进制、颜色值多行 TextAreaJSON、Base64、URL、正则表达式、哈希文本、文本统计双输入区时间戳转换的戳→日期和日期→戳两个面板带前置符号的输入颜色 HEX 输入前面有#号操作区按钮和选项的组合。有五种布局模式单按钮文本统计实时反馈按钮不是必须的双按钮Base64编码 | 解码按钮组 选项JSON2空格 | 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 格式化160vpJSON 字符串通常较长Base64/URL140-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右侧放置计算按钮。算法选择是互斥的——只能选一个。双向面板模式时间戳转换有两个独立的面板每个面板有自己的转换按钮。这种设计避免了模式切换——用户不需要在时间戳→日期和日期→时间戳之间切换两个操作同时可见。输出区域的三要素每个工具页的输出区域都包含标签行Row() { Text(结果).fontSize(13).fontColor(#666); Blank(); CopyButton({ text: output }); }结果展示TextArea({ text: this.output }).fontSize(13).fontFamily(monospace)。只读——用户只能复制不能编辑。错误提示if (errorMsg) { Text(errorMsg).fontSize(12).fontColor(#ff3b30) }。错误信息在操作区和输出区之间展示位置固定用户知道该去哪里看错误。颜色语义的统一化10 个工具页共享同一套颜色语义颜色色值语义使用场景蓝色#007aff主操作格式化、编码、转换、匹配、计算绿色#34c759辅助操作/成功压缩、解码橙色#ff9500变更操作另一种解码模式红色#ff3b30错误/警告错误提示文字灰色#666/#999元信息标签、描述、占位符用户在新工具页看到蓝色按钮时不需要思考就知道这是主要操作。看到红色文字时立刻知道这是错误信息。颜色的稳定语义减少了学习成本。页面模板的局限性统一的模板虽然保证了 10 个工具页的一致性但也带来了一个问题工具页的个性化空间被压缩了。如果一个工具需要完全不同的交互模式比如需要两个输出区、或需要图表展示、或需要拖拽操作这个模板就不适用了。对于首版的 10 个工具来说统一的模板是利大于弊的选择。未来如果有新工具需要跳出模板——比如二维码生成需要一个 Canvas 区域——这时不是修改模板而是创建一个新的页面类型。项目仓库https://atomgit.com/VON-/harmony-kit