首页
/ Agent Zero WebUI 架构解析：Flask + Alpine.js 前端壳、Service Worker 离线缓存与组件化开发契约

Agent Zero WebUI 架构解析：Flask + Alpine.js 前端壳、Service Worker 离线缓存与组件化开发契约

2026-09-14 11:00:34作者：尤辰城Agatha
agent-zero
Agent Zero AI framework
项目地址：https://gitcode.com/GitHub_Trending/ag/agent-zero

导读

Agent Zero 的 WebUI 是一套由 Flask 提供服务、以 Alpine.js 为核心渲染引擎的现代前端壳，涵盖 splash.html 启动引导、index.html 主界面、safe.html 安全逃生通道、Service Worker 离线资产缓存、<x-component> 组件加载器与 <x-icon> 图标体系等完整链路。本文以 webui/AGENTS.md 为主干，结合仓库中 webui/js/AGENTS.md、webui/components/AGENTS.md、webui/css/AGENTS.md 三个子 DOX 及关键源码，系统讲解 WebUI 的目录职责、启动与缓存原理、前端开发契约与验证方式，帮助读者理解并参与 Agent Zero 前端开发。

WebUI 的定位与整体职责

根据 webui/AGENTS.md 的 Purpose 与 Ownership 说明，WebUI 目录在 Agent Zero 中承担如下职责：

  • 拥有由 Flask 提供服务的 Alpine.js WebUI 外壳：前端模块、组件、CSS、静态资源以及 vendored（第三方内嵌）浏览器库；
  • 保持 UI 与后端 API、WebSocket 状态、插件扩展点以及文档化的前端模式保持一致。

文件与目录的所有权划分

路径 职责
splash.html 自包含的缓存/引导文档，服务路径为 /
safe.html 自包含的 Service Worker 逃生舱，服务路径为 /safe
index.html、index.js、index.css 渲染主 UI 外壳，直接服务于 /index.html 与 /safe，并可通过 /ui/index 获取后原位安装到 /
components/ 自包含的 Alpine 组件与组件 store
js/ 共享前端模块、API 客户端、WebSocket 客户端、store、扩展加载器与工具代码
css/ 共享样式表模块
public/ 第一方静态图片/图标资产
vendor/ 第三方内嵌浏览器库

从 index.html 的主界面结构可以看出这套壳的运行形态：<body> 上直接挂载 x-data，页面由左侧栏（sidebar/left-sidebar.html）、右侧聊天面板（chat/top-section/chat-top.html、welcome/welcome-screen.html、chat/input/chat-bar.html）、右侧画布（canvas/right-canvas.html）、通知 Toast 栈（notifications/notification-toast-stack.html）等 <x-component> 拼装而成。

启动链路：splash → Service Worker → index 原位替换

WebUI 的冷启动设计非常独特：用户访问 / 时拿到的是一个体积很小的自包含 splash 文档，它负责并行拉取真正的应用文档与资产包、激活版本化 Service Worker，然后在当前文档中完成原位替换，全程不产生页面跳转。

splash 的并行预取与双超时兜底

splash.html 的引导脚本核心逻辑如下：

  1. 定义三个关键常量：APP_DOCUMENT_PATH = "/ui/index"、ACTIVATION_TIMEOUT_MS = 8000（Worker 激活/接管超时）、CACHE_TIMEOUT_MS = 10000（资产缓存准备超时）、FALLBACK_TIMEOUT_MS = 15000（整体回退超时）。
  2. 立即用 fetch(APP_DOCUMENT_PATH, { cache: "no-store", credentials: "same-origin" }) 发起应用文档请求，与 fetch("/ui/asset-bundle") 的 gzip 压缩资产包请求并行进行。
  3. 通过 navigator.serviceWorker.register("/sw.js?version=...") 安装版本化 Worker，等待其 activated 并接管页面（waitForController），再通过 MessageChannel 向 Worker 发送 preload-ui-bundle 消息，等待其在内存中构建好资产包（CACHE_TIMEOUT_MS 超时）。
  4. 全部就绪后（或任一环节超时失败后），执行 replaceWithApp()：把 splash 当前的 #startup-transition 覆盖层 markup 注入到应用 HTML 的 <body> 起始处，随后 document.open() + document.write() + document.close() 完成原位替换。

splash.html 的关键设计要点是"任何失败都不阻塞应用"：Worker、缓存、包、超时等失败都会回退到已启动的后端文档或普通后端资产请求（对应 sw.js 中 event.respondWith(...catch(() => fetch(event.request))) 的兜底语义），并在替换文档中继续保留 splash 覆盖层直至 index.html 接管淡出。

index 的覆盖层接管与图标字体预加载

index.html 携带与 splash 匹配的内联关键覆盖层样式 #startup-transition-critical（不重复静态覆盖层 markup），并实现：

  • 监听 webui-extensions-loaded 事件标记 applicationReady，随后通过 startup-transition-leaving 类触发 240ms 淡出并移除覆盖层；同时用 8 秒的 revealApplication(true) 作为有界失败超时，避免覆盖层永久卡住。
  • 在覆盖层就位后开始图标字体预加载：通过 document.fonts.load('24px "Material Symbols Outlined"') 加载本地 WOFF2 字体，成功后给根元素添加 material-icons-ready 类。该加载独立进行、不与应用启动包竞争，也不延迟应用展示。
  • 所有初始样式表均以 rel="preload" as="style" + onload 提升为非渲染阻塞（index.html 中 20 余个 preload 样式），唯一例外是防止连字（ligature）布局偏移的极小的图标守卫样式。

safe 模式：Service Worker 逃生通道

safe.html 必须保持完全自包含，其两阶段逻辑为：

  1. 第一阶段：加载即注销当前 origin 的全部 Service Worker（getRegistrations() + unregister()），随后带 __direct=1 参数跳转到 /safe；
  2. 第二阶段：直接渲染的 /safe 文档（对应 index.html 开头的守卫脚本）会防御性地再次注销 Worker，但不再初始化 Worker；同时仅将浏览器历史中 /safe 的内部 safe-mode 查询标记移除（history.replaceState），之后返回 / 可重新安装当前 Worker。

Service Worker 的缓存模型

sw.js 是同一 origin 下 HTML/CSS/JavaScript 缓存的唯一所有者，核心机制包括：

  • 版本化缓存名：CACHE_PREFIX = "agent-zero-ui-assets-" + 版本号（cacheName() 会对版本做 [^a-zA-Z0-9_-] 清洗并截断到 64 字符），activate 阶段 cleanupCaches() 删除所有旧版本缓存。
  • Bundle 内存命中优先：message 事件收到 preload-ui-bundle 后，立即把包内条目构建成 activeBundleEntries 内存 Map（bundleEntries() 只接受 [contentType, "text", content] 三元组形式的同源条目），fetch 事件可立即从内存返回；持久化则在后台异步完成，因此应用无需等待数百次 Cache Storage 写入即可渲染。
  • 持久化恢复：若内存 Map 为空，restorePersistedBundle() 会从缓存中读取标记为 /.agent-zero-cache/<name>/bundle 的 JSON 响应并恢复条目，同时校验版本号一致性。
  • 可缓存性判定：isCacheableRequest() 仅缓存同源 GET、无 Range 头、非导航请求，且路径不在 /、/login、/logout、/api/、/ws、/socket.io/、/mcp/、/a2a/ 白名单排除范围内，扩展名匹配 \.(?:css|html?|xhtml|m?js)$。
  • 运行时缓存上限：MAX_RUNTIME_CACHEABLE_TRANSFER_BYTES = 256 KiB，未知或运行时计算的文本 URL 走一次普通后端请求，仅当传输体积不超过 256 KiB 时按原生响应缓存；而包内可嵌入的文本正文上限为每个 512 KiB。Worker 不解析 import、不调用次级图端点、不做压缩。

组件体系： 加载器与 Alpine 集成

组件加载器 components.js

webui/js/components.js 拥有 <x-component> 加载、组件缓存、模块注入、嵌套组件处理与 globalThis.xAttrs 能力，其加载管线为：

  1. importComponent(path, targetElement) 以目标元素为 key 建立 importLocks 互斥锁，防止同一组件被并发重复加载；
  2. 路径解析：以 / 开头视为绝对路径，否则默认补 components/ 前缀（对应 webui/AGENTS.md 中"路径在未加前缀时在 webui/components/ 下解析"的契约）；
  3. 组件 HTML 经 componentCache 缓存后，用 DOMParser 解析为独立 document；
  4. 收集 style, script, link[rel='stylesheet'] 资产节点与 body 内容节点，<script type="module"> 通过动态 import() 加载，且每个组件实例都必须等待缓存的模块加载 promise 完成后再把 markup 追加进 DOM——这样 Alpine 绑定只在导入的 store 存在后才会求值（webui/js/AGENTS.md 中 Local Contracts 的明确要求）；
  5. 组件的 style、script、样式表链接等资产只处理一次，即使组件把 scoped <style> 放在 <body> 内也适用。

组件 HTML 的结构契约

webui/components/AGENTS.md 规定组件 HTML 的标准形态：

  • 模块导入放在组件 <head> 中，type="module" 脚本必须在 Alpine 求值绑定之前导入 store；
  • 渲染内容放在组件 <body> 中；
  • 依赖 store 的内容必须用 x-data + <template x-if="$store.name"> 门控，且被门控的 <template> 必须只包含一个根元素；
  • 组件专属样式放在组件 <style> 块内，只有真正复用的基础样式才进入共享 CSS；
  • 生命周期使用 x-create（每次挂载）与 x-destroy（清理），禁止在 x-init 中调用长生命周期 store 的 init()；store 的 init() 必须幂等，并在注册全局监听器、定时器或一次性数据时加守卫；
  • 轮询指令 x-every-second / x-every-minute / x-every-hour 仅在组件挂载期间使用；
  • 文件命名规范：组件 feature-name.html，store 用 feature-store.js 或 feature-name-store.js。

组件 store 与 AlpineStore

前端 store 统一通过 js/AlpineStore.js 的 createStore(name, model) 创建。其关键契约是"在 Alpine 启动前后都必须可用"：启动前先代理到原始 model，Alpine 启动后代理到 Alpine store。saveState() / loadState() 不得持久化函数，并支持 include/exclude 过滤以排除瞬态字段。

组件代码中读取 store 的标准方式是模板里的 $store.name 与 JavaScript 中的直接模块导入，避免在组件代码里使用 window.Alpine.store() 查找。

模态框体系：单一共享栈

模态框是 WebUI 交互密度最高的基础设施，由 js/modals.js 与 css/modals.css 共同拥有，契约要点如下：

  • API：openModal(path) 返回一个 promise，该 promise 在该模态框 DOM 节点被移除时 resolve；非法路径在模态框内显示错误而非 reject。closeModal() 无参关闭栈顶模态框，closeModal(path) 关闭栈中任意位置的该路径，缺失路径为 no-op。同一路径可多次打开形成多个栈条目，不做去重。
  • DOM 结构：.modal > .modal-inner > .modal-header、.modal-scroll（内含 .modal-bd）、.modal-footer-slot；data-modal-footer 内容会从模态框 body 中搬移到 .modal-footer-slot，固定页脚位于滚动区之外。
  • 交互语义：Escape、关闭按钮、z-index、backdrop 均遵循"栈顶优先"；点击外部关闭要求 mousedown 与 mouseup 都发生在外层 .modal 容器上；scrollModal(id) 在顶层模态框的 .modal-scroll 内滚动。
  • 尺寸：.modal-inner 居中，width: 90%、max-width: 960px、max-height: 90vh，高模态框体在 .modal-scroll 内滚动。
  • 浮动模态：.modal-floating 保持全屏壳指针穿透（pointer-transparent）而 .modal-inner 指针活跃，仅用于非阻塞工具面板；.modal-no-backdrop 只抑制 backdrop，不产生点击穿透的浮动行为。破坏性确认、设置、认证、导入导出等必需工作流禁止使用 .modal-floating。
  • 按钮语义：正面操作 btn btn-ok，关闭/负面操作 btn btn-cancel；模态框页脚动作顺序为正面操作在前、关闭/负面操作在后；紧凑文本操作用 .text-button。

从 webui/js/AGENTS.md 的工作指引看，还有两条重要的工程约束：若在关闭处理器中打开新模态框，需用 requestAnimationFrame 调度以避免栈移除竞争；共享模态框层必须保持在移动端右侧画布导轨之上，使阻塞式模态框在小屏上仍具有权威性。

图标体系：原生 自定义元素

webui/js/icons.js 拥有原生 <x-icon> 元素，它取代了旧的 material-symbols-outlined 连字 span 写法，是第一方 WebUI 与打包插件必须使用的图标创作 API：

  • 写法：静态图标 <x-icon name="lowercase_snake_case"></x-icon>（如 index.html 中的 vertical_align_top、keyboard_arrow_up 等）；Alpine 驱动的动态图标用 :name="expression"。禁止在元素内部放置连字文本，也禁止新增 .material-symbols-outlined span。
  • 实现：ICON_NAME_PATTERN = /^<a href="https://link.gitcode.com/i/217d7c970adc5798a70d88a7016afab9" target="_blank">a-z0-9][a-z0-9_]*$/ 校验名称；connectedCallback 中为兼容旧选择器自动追加 material-symbols-outlined 类，并在无 aria 属性时默认 aria-hidden="true"；渲染时把名称作为连字文本写入 textContent（[icons.js）。
  • 字体策略：使用单一本地 WOFF2 字体（vendor/google/google-icons.woff2，见 index.html 的 preload），而不是每个图标一次 SVG 请求；共享 vendor CSS 把 <x-icon> 与旧连字 span 约束在裁剪的 1:1 em 方块中，并在安装的应用文档解析完成、确认图标字体就绪前保持透明。
  • 兼容性：getIconName / setIconName 帮助函数同时读写第一方自定义元素与旧版插件连字 span；.material-symbols-outlined / .material-icons-outlined span 仍受支持，但不再是第一方创作 API。动态创建图标使用 document.createElement("x-icon") 并赋值 .name。

API 客户端与 CSRF/认证一致性

webui/js/api.js 是所有 HTTP 调用的统一入口，目的是让 CSRF 与认证行为保持一致：

  • callJsonApi(endpoint, data) 用于 JSON 进 JSON 出的流程：自动序列化、credentials: "same-origin"，并沿 json_api_call_before → fetchApi → json_api_call_after 的扩展链执行，出错时走 json_api_call_error 扩展钩子（api.js）；
  • fetchApi() 用于仍需要 CSRF 处理的原始 fetch，必须持续添加 CSRF 头、重试 403 CSRF 刷新路径、必要时重定向到 /login；
  • 前端代码不得绕过 WebSocket 的 origin/auth/CSRF 假设（webui/AGENTS.md Local Contracts）。

消息渲染、聊天窗口与虚拟化历史

js/messages.js 负责原生消息/流程步骤渲染、安全的 Markdown 与 HTML 转换以及 KaTeX 分隔符处理；js/message-window.js 拥有有界、尾优先（tail-first）的原始日志窗口。核心契约包括：

  • 从后端日志 no 0 开始的完整消息快照必须在渲染前替换当前消息 DOM；增量快照则持续 patch 已有消息；
  • 长历史以原始日志数据缓存，但只渲染连续的尾优先 DOM 窗口：初始基础视图含 1 个 60 条目的页，分页后基础窗口包含两个对齐页，只丢弃任一方向的远端页；可见边界扩展到完整逻辑流程组，流程组单元分类必须包含插件支持的步骤（如 code_exe），超大组使用独立的 50 步增量窗口；
  • 分页必须保留可见锚点并在滚动边界处按用户意图触发，使用被动加载指示器而非带计数的控件；
  • 历史窗口重建必须取消挂起的自动滚动效果、在屏外 staging 区渲染，再原子地把完整布局内容交换进活动滚动器并恢复锚点；
  • 消息窗口缓存身份必须区分共享后端 ID 的不同日志类型（root-agent GEN 与 response 记录刻意共用同一 ID 且都必须能在回放中存活）；
  • 上下切换、日志 GUID 重置、完整日志快照必须同时重置消息 DOM 与消息窗口缓存状态；上下文切换立即清空过期历史，但将聊天加载 splash 延迟 300ms，使快速加载不闪烁；
  • 长主代理响应仅在聊天回放期间默认折叠，长用户消息在实时发送与回放中都折叠，两者共用折叠行为，但用户附件保持在裁剪目标之外；
  • 折叠控件仅在可测量的消息体超过 15em 预览时出现，隐藏或零宽度聊天几何视为不确定状态。

前端扩展加载

webui/js/extensions.js 拥有前端扩展加载能力。渲染后的 index 提供完整的 runtimeInfo.webuiExtensions 清单（见 index.html 中 webuiExtensions: {{webui_extension_manifest}} 的模板注入），扩展加载器必须从中解析 HTML 与 JavaScript 扩展路径，无需每个扩展点启动时调用 API；当清单不可用时保留 /api/load_webui_extensions 作为兼容回退。

  • HTML 扩展：把发现的 HTML 文件转成 <x-component> 标签加载；
  • JavaScript 扩展：必须导出默认函数；
  • 扩展加载器暴露 initialHtmlExtensionsLoaded 并发出 webui-extensions-loaded 事件——该事件恰好是 index.html 中覆盖层淡出的就绪信号；
  • 传输级预加载必须保持在 components.js、extensions.js、initFw.js 之外，缓存命中走它们各自的普通异步请求；
  • 扩展点名称与加载器缓存 key 必须对插件保持稳定；confirm_dialog_after_render、get_tool_message_handler 等前端扩展钩子必须保留可变上下文契约。

安全与隐私约束

WebUI 前端开发有一组不容逾越的红线（webui/js/AGENTS.md Local Contracts）：

  • 不得在 localStorage、控制台日志、URL 或 WebSocket 负载中暴露 secrets；
  • 必须对用户/模型提供的 HTML 与 Markdown 进行消毒或安全渲染；
  • 标准 TeX 分隔符转换必须在 Markdown 解析前进行，且不得触碰行内或围栏代码；thought-card 数学渲染保持在 agent 消息处理器本地，而不是给通用流程步骤或键值渲染增加数学标志；
  • 基线主页与登录页必须从同源 vendored 或第一方资产加载脚本、样式、字体与图片，保证无互联网访问时仍可用。

开发工作流与验证方式

webui/AGENTS.md 的 Work Guidance 与 Verification 给出了明确的开发纪律：

  • 放置原则：组件专属 markup 与样式放 components/；可复用前端基础设施放 js/；共享视觉原语放 css/；样式从 index.css 的 CSS 变量（--color-*、--spacing-*、--font-size-*、--transition-speed）中取色、间距、字号与过渡，保持 UI 文本与控件风格一致。
  • 反馈渠道：用户可见的成功/警告/错误反馈优先走应用已有的 notification 流程；API 负载变更必须与后端 handler 和测试协调。
  • 验证：可运行目标 WebUI/前端测试时先跑测试；行为无法被测试覆盖时，用 python run_ui.py 手动冒烟测试可见 UI 变更；实质性 UI 变更还需验证桌面与移动端布局。对消息数学改动，需同时冒烟测试响应 Markdown 与 agent 思考卡片的行内/展示型 TeX。对模态框基础设施改动，需验证重复路径可堆叠、缺失路径可关闭、Escape 只关闭栈顶、点击外部要求 mousedown/mouseup 均在覆盖层容器上。

小结

Agent Zero 的 WebUI 是一套把"可靠启动"与"模块化开发"结合得相当紧密的前端工程：splash 原位替换 + 版本化 Service Worker 双通道缓存解决了离线可用与秒开体验，<x-component> + store 门控 + 单一模态框栈解决了大型 Alpine 应用的复杂度控制，而 AGENTS.md 分层 DOX（根 webui/AGENTS.md 与 webui/js/AGENTS.md、webui/components/AGENTS.md、webui/css/AGENTS.md）为维护者与 Agent 提供了可执行的前端契约。开发者可沿着 components/（UI 特性区）→ js/（共享基础设施）→ css/（视觉原语）的路径定位代码，并遵循本文梳理的加载、缓存、模态框、图标与扩展契约参与后续开发。

agent-zero
Agent Zero AI framework
项目地址：https://gitcode.com/GitHub_Trending/ag/agent-zero
登录后查看全文

相关内容推荐

1 Agent Zero 的 Web UI 服务运行时：深入解析 `helpers/ui_server.py` 的 Flask/ASGI 架构与安全路由设计2 Agent Zero 工程契约体系解析：以 AGENTS.md 为核心的分层 DOX 文档架构3 Agent Zero 后端 API 与 WebUI 开发实战：从 ApiHandler 契约到前端扩展模式4 Agent Zero 框架扩展开发完全指南：从 a0-development 技能到源码级实践5 Agent Zero WebUI 字体本地化实践：Rubik 与 Roboto Mono 可变字体的同源托管、离线保障与合规管理6 Agent Zero WebUI 静态资源治理指南：public 目录的 DOX 契约、所有权边界与前端引用规范7 Agent Zero WebUI 中的 Ace 编辑器最小子集：`webui/vendor/_ace` 的资产构成、维护契约与集成实践8 Agent Zero WebUI 资产打包机制全解析：基于 ui_bundler.py 的版本化离线缓存实现9 Agent Zero WebUI 设置组件架构与开发契约解析：从 settings 外壳到 MCP/Skills 扫描器的模块划分与本地契约10 Agent Zero WebUI Vendor 目录治理指南：前端第三方库的本地化托管、升级与验证规范
热门项目推荐
相关项目推荐

热门内容推荐

1 编程实践项目探索指南：从零构建技术能力体系2 技术解构式学习：从0到1构建你的编程知识体系3 构建自己的技术世界：build-your-own-x项目的实践探索指南4 解锁编程技能的实践之旅：从零构建你的技术世界5 技术实践探索：从零开始构建核心系统的实践指南6 亲手锻造技术引擎：从0到1构建核心系统的实践指南

最新内容推荐

EIP-7503 零知识虫洞（Zero-Knowledge Wormholes）：为以太坊原生隐私引入的秘密燃烧与再铸造机制Quickwit 缓存架构缺口分析：Parquet 元数据缓存（GAP-007）与多层缓存演进路径SpeechBrain 实战：使用 DNS 嘈杂语音合成器离线生成大规模语音增强训练数据为五种 LoRA 任务定制 Gradio 演示界面：huggingface-lora-space-builder 任务基线 UI 模式实战指南Hindsight Retain 深度解析：如何把对话与文档转化为可检索的结构化记忆Mealie AI 集成完全指南：AI Provider 配置、Import with AI 与提示词定制Bytebot 自托管 AI 桌面 Agent 完全指南：让大模型拥有一台属于自己的电脑Axolotl 集成 Cut Cross Entropy 指南：用低显存交叉熵损失优化大词表模型微调WTF Solidity 链上威胁分析工具全解：交易调试、函数签名解析与反编译实战zstd 在 Linux 内核中的集成与升级全流程：基于 contrib/linux-kernel 的自动化转换指南

项目优选

收起
kernelkernel
deepin linux kernel
C
34
18
ops-transformerops-transformer
本项目是CANN提供的transformer类大模型算子库，实现网络在NPU上加速计算。
C++
1.21 K
2.81 K
ops-nnops-nn
本项目是CANN提供的神经网络类计算算子库，实现网络在NPU上加速计算。
C++
945
1.86 K
docsdocs
暂无描述
Markdown
906
5.84 K
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
537
607
pytorchpytorch
作为 Ascend for PyTorch 社区的核心组件，TorchNPU 是昇腾专为 PyTorch 打造的深度学习适配插件，使 PyTorch 框架能够直接调用昇腾 NPU，为开发者提供昇腾 AI 处理器的超强算力。
Python
864
1.36 K
jiuwenswarmjiuwenswarm
JiuwenSwarm 是一款基于openJiuwen开发的智能AI Agent，它能够将大语言模型的强大能力，通过你日常使用的各类通讯应用，直接延伸至你的指尖。
Python
4.28 K
1.03 K
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
1.39 K
1.48 K
AscendNPU-IRAscendNPU-IR
AscendNPU-IR是基于MLIR（Multi-Level Intermediate Representation）构建的，面向昇腾亲和算子编译时使用的中间表示，提供昇腾完备表达能力，通过编译优化提升昇腾AI处理器计算效率，支持通过生态框架使能昇腾AI处理器与深度调优
C++
550
401
flutter_flutterflutter_flutter
本仓库是 Flutter SDK 与 Flutter Engine 的 OpenHarmony 适配版本，由 CPF-Flutter 团队维护。开发者可使用熟悉的 Flutter 技术栈开发 OpenHarmony 应用，3.35.7 及以后的适配版本可基于本仓库源码构建支持 OpenHarmony 的 Flutter Engine。
Dart
1.19 K
347