Garden Compose Demo https://garden-compose-demo.pages.dev 用已发布 hd-garden 演示 Garden Compose 的布局与示意图能力。 zh-CN Sun, 08 Nov 2026 16:00:00 GMT 四种机制的直观区别 https://garden-compose-demo.pages.dev/blog/compose-demo/four-mechanisms/ https://garden-compose-demo.pages.dev/blog/compose-demo/four-mechanisms/ Sun, 08 Nov 2026 16:00:00 GMT composedemocryptography 这是 Garden Compose Demo 的示例文章。第一张图用 sandbox（按 iframe 内容宽切 2×2/单列，节点用 HTML 字号）；第二张用原生布局加安全 HTML 局部块。都经 hd-garden 渲染。

（网页中可交互：四种机制的直观区别）

四种密码学机制的直观区别。列数按 sandbox iframe 内容宽切换，不按外层窗口猜测。 · 在网页中交互

同一条消息，经过四种处理

原生 grid / card，标题行与代码框用安全 HTML 局部组合（标题左、图标右；浅灰代码底；算法标签灰色小字）。

同一条消息，经过四种处理

Hello World

原始消息

编码

Base64

SGVsbG8gV29ybGQ=

任何人都能解码

哈希

SHA-256（截断展示）

a591a6d40bf42040...

生成固定长度摘要

加密

AES-GCM（示意）

8f 32 a1 0c 7b ...

需要密钥才能解密

签名

Ed25519（示意）

b2 4d 77 1e 9a ...

用公钥验证签名

图中的加密结果和签名结果仅用于示意；实际输出取决于密钥、算法参数等。

完整哈希（未截断，便于核对）：a591a6d40bf420404a011733cfb7b190d62c65bf0bcda32b57b277d9ad9f146e。

实现说明：图 1 列切换基于 sandbox iframe 内容宽度（ResizeObserver，阈值约 560px）；流程图改为 HTML 节点 + CSS 虚线，手机端保持 rem 字号。图 2 标题行用安全 HTML space-between；算法标签 tone="muted"；代码框浅灰底深字。标题行用 row + spacer + 真实 icon；算法标签 tone="muted"；代码框为安全 HTML 浅灰底。

]]>