文档

浏览器与预览

Mework 的侧边面板里有一个浏览器。你可以在里面浏览网页、在页面上标注或选取元素发给模型，也可以运行 .mework/launch.json 里配置的开发服务器。打开预览工具后，模型也能自己启动这些服务器并操作页面。

浏览器面板

点顶栏的 预览 按钮（地球图标），或按 ⌘B（Windows 上是 CtrlB）打开面板；这个快捷键叫 打开或关闭内置浏览器，可以在 设置 → 快捷键 里改。对话有多个工作区时，按钮会先问你在哪个工作区打开页面。关闭面板 只是把面板收起来，里面的页面照常运行。

页面

每个标签页就是一个页面，并且属于一个工作区：它的起始页列出这个工作区的开发服务器，服务器也在这个工作区所在的机器上运行。点 +（新建预览页面）再开一个页面。关闭标签页就彻底关掉这个页面。

每个标签页都有自己独立的浏览器配置：一开始是空的，和其他标签页不共享 cookie，标签页关闭或 Mework 退出时随之删除。想在不关标签页的情况下退出某个网站的登录，用 服务器与设置（工具栏最左边的地球图标）→ 清除浏览数据 → 清除此标签页的全部浏览数据。

页面跟随 Mework 的浅色或深色主题。模型用 preview_resize 指定了配色时，这个标签页刷新后仍保持该配色，直到你切换应用主题或重新打开面板。

地址栏

地址可以不写 http:// 或 https://。这时本机和内网地址（localhost、*.localhost、*.local、127.0.0.1，以及 192.168.1.5:3000 这样的局域网地址）走 http，其余一律走 https，包括 example.com:8080。带空格的文字，或者不含 . 和 : 的单个词，会变成 Google 搜索。

标注

标注 把当前页面定格成一张图，你可以在上面作画。添加到对话 把画好的图以 page-annotation.png 附到你的消息上。

选择元素

选择元素 让你在页面上点选一个元素。它会显示在输入框上方，同时附上它的截图。随消息一起，模型还会收到这个元素的标签名、class、文字、计算样式和 HTML，页面提供时还有它的 React 组件。

打开本地文件

服务器与设置 → 文件 → 打开文件 打开这台电脑上的文件，工作区在 SSH 机器上时也一样。支持 HTML、SVG、PNG、JPEG、GIF、WebP、AVIF 和 PDF，最大 64 MiB。

HTML 文件会连同旁边的文件一起加载：它所在文件夹及其下各级文件夹里的样式表、脚本、图片和字体，都像从网页服务器上那样加载；这台电脑上的其他文件都读不到。文件的标签页休眠了，或为节省内存被关掉了，回到它时仍打开同一个文件。

开发服务器与 launch.json

每个工作区在根目录的 .mework/launch.json 里列出自己的开发服务器。格式是 VS Code 风格的 launch 文件，允许注释和末尾逗号。

{
  "version": "0.0.1",
  "configurations": [
    {
      "name": "web",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev", "--", "--port", "5173"],
      "port": 5173,
      "autoPort": true
    },
    {
      "name": "storybook",
      "url": "http://localhost:6006"
    }
  ]
}

5173 端口被占用时，web 换到一个空闲端口，Mework 会改写它的 --port 参数。storybook 没有命令：Mework 什么都不启动，只打开一个已经在运行的服务器。

在面板起始页或 服务器与设置 菜单里点 运行 启动条目，停止服务器也在这里。

字段

字段 作用 默认值
name 面板里显示的名字，也是模型用的名字。不区分大小写。 取自最后一个参数或 url
runtimeExecutable 要运行的命令，比如 npm、node、python3。 —
runtimeArgs 跟在命令后面的参数。 []
program 一个脚本；没写 runtimeExecutable 时用 node 运行。 —
args 最后追加的参数。 []
cwd 命令的运行目录，相对于工作区根目录。 工作区根目录
env 在继承的环境变量之外再加的变量。这里写了 PATH 会替换继承来的。 {}
port 服务器监听的端口。 推断，见下文
autoPort 端口被占用时：true 换到空闲端口，false 直接拒绝。 不写：拒绝并询问你
url http 或 https。有命令时，页面打开这个地址而不是 http://localhost:<port>。本机地址的 url 不能带路径。 —

${workspaceFolder} 和 ${workspaceRoot} 在命令、参数和 cwd 里会替换成工作区根目录。VS Code 的调试配置、既没有命令也没有 url 的条目、字段类型写错的条目都会被跳过。

端口

请总是写上 port。不写时 Mework 依次从 localhost 的 url、env 里的 PORT、参数里的端口选项推断：--port 5173 或 -p 5173（写成一个参数或拆成两个参数都行），以及 --port=5173 或 -p=5173。都没有时用 3000。

服务器的环境里总会把 PORT 设成最终选定的端口。端口已被占用时：

  • autoPort: true 换一个空闲端口，并改写参数里的 --port N、-p N、--port=N、-p=N。用其他方式指定端口的服务器必须读取 PORT。
  • autoPort: false 拒绝启动，并说明是谁占着这个端口。
  • 不写 autoPort 时也拒绝启动，模型会来问你这个端口是否要紧，比如是否用于 OAuth 回调。

启动与停止

  • 启动后 3 秒内退出的服务器算启动失败。面板显示错误，附 复制错误日志 和 重试，对话的模型也会得知这次失败，你可以让它去修配置。
  • 停止服务器会同时关掉它的页面；服务器自己崩溃时页面保留，并显示 重启。
  • 从面板启动的服务器归这个对话所有，所以对话的模型看得到，也能停掉。
  • Mework 退出或崩溃时，所有本机服务器以及它们启动的进程都会随之结束。
  • 在 macOS 上，即使 Mework 是从访达打开的，命令也能用到你登录 shell 的 PATH。

服务器与设置 → 显示开发服务器日志 在页面下方停靠一个抽屉，显示这个页面所在工作区里第一个运行中的服务器的最新输出。

模型能做什么

在 对话设置 → 工具 的 预览 分组里打开预览工具（见对话设置），每个工具的说明见工具列表。preview_start、preview_stop、preview_list 只要任何一个其他预览工具开着就开着。

每个对话里模型只操作一个页面：为这个对话打开的第一个页面，或 preview_start 打开的那个。你用 + 加的标签页归你，预览工具不会碰。preview_start 不会弹出面板，页面以标签页的形式等着你去看。模型操作页面时，面板上会出现 停止页面操作。

模型找元素时可以用 CSS 选择器，也可以直接用 preview_snapshot 给这个元素标出的 uid。preview_upload_image 把图片放进页面已经打开的文件选择框；没有打开的，就放进页面上的第一个文件输入框。

模型页面上的 alert、confirm 或 prompt 对话框会等模型用 preview_dialog 回答。你自己在用的页面上，对话框由你看到并回答。

在 手动 和 允许编辑 级别下，除了 preview_list、preview_logs、preview_snapshot、preview_inspect 和 preview_resize，预览工具都会先询问；完全访问 下都不询问（见安全级别）。只有 preview_start 和 preview_stop 可以选 总是允许。preview_screenshot 和 preview_upload_image 只提供给能接收图片的模型。

你正在用这个页面时

如果模型需要页面时你正在自己使用这个对话的页面，面板会显示模型在请求页面、想用哪个工具，你点一下就能交还给它。页面登录着某个网站时，Mework 会先请你批准模型接管这个网站的页面。批准在页面跳到另一个源之前一直有效，任何安全级别和钩子都不能替你回答。

远程机器

工作区在 SSH 机器上时，launch.json 在那台机器上读取，服务器也在那里运行。页面在你的电脑上显示，但连接都从远程机器发出，所以该工作区任何页面里的 localhost 和主机名都在那台机器上解析。连接断开时，服务器在那里最多继续运行 2 小时，连接恢复后页面和服务器接着工作。

WSL 里的工作区没有预览。

限制

  • 每个工作区文件夹最多同时运行 5 个开发服务器，所有对话合计。
  • 通常最多 3 个页面保持活跃，其余进入休眠。超过 8 个页面时，最早休眠的会被关掉，回到它们时连同 cookie 重新加载。

在 GitHub 上编辑本页