前往 /service/single。顶部工具栏分为三个区。

• 左侧 — 历史 · 指南 · 应用标题 · 保存 (💾)
• 中央 — 模板下拉菜单(11 个选项)
• 右侧 — 共享列表 · 共享 · 复制 · 运行 ▶ · 部署 📦

主体包含四个编辑器标签(prompt · html · scss · vuejs)和右侧的实时预览。

两种起步方式:

1. 现成模板 — 下拉菜单中 11 个选项:电商 · 实时股价图 · 收藏仪表盘 · SaaS 定价 · 自助点单菜单 · 餐厅预约 · YouTube 创作中心 · 产品详情 · 聊天应用 · 活动倒计时 · 管理仪表盘。选一个即刻填满全部四个标签。
2. 从 AI 提示开始 — 在 prompt 标签描述你想要的(如「带 3 个分类标签的咖啡菜单页」),再用 AI 按钮自动生成 HTML/SCSS/Vue 标签。

切换标签编辑各层。

• prompt — 用于 AI 重新生成的描述。编辑 + 重新生成会刷新代码。
• html — 结构与文字。行号 + Ctrl+F 搜索。
• scss — 颜色、字体、间距。多数模板在文件顶部定义主题变量。
• vuejs — 数据和交互。使用 data() { return { ... } }、methods: { ... }、mounted()。

点击工具栏右侧的 运行 ▶,页面会在预览面板实时渲染。编辑后再次点击即可刷新。

左上角的 历史 按钮可查看近期保存版本。某一行的 → 载入 图标可还原到该状态 — 是编辑出错时的安全网。

把成果发出去有两种方式:

• 部署 📦 — 工具栏最右的按钮。连接 Railway 账户后,部署进度弹窗会运行;1–3 分钟内你的页面就会在免费域名上线。
• 共享 — 工具栏上的共享图标。添加标题/描述/标签发布到社区;其他用户可以 fork 你的作品(这是模板共享,不是线上部署)。

从菜单打开 服务 > 项目。布局:

• 左侧栏 — 蓝色的 [+ 新建项目] / [+ 新建团队] 按钮,加上「最近」「公开解决方案」「我的项目」「团队」板块。
• 顶部面包屑 — 在列表 ↔ 详情 ↔ 程序 ↔ 部署 视图之间切换。
• 主体 — 展示每个项目的域名徽标、DB 类型、程序/路由数量的卡片。

点击 [+ 新建项目] → 向导弹窗。

1. 步骤 1 — 功能卡片和流程图。
2. 步骤 2 — 配置
   • 域名 (必填) — 你现有的一个域名
   • 数据集 (必填) — 本项目要用的 DB
   • 项目名称 / 描述
   • 团队分配(复选框)
3. 底部的 [保存] — 只有在同时选了域名和数据集后才可用。

程序 是项目里的一张页面或一个功能单元。在创建表单里填好基本信息,然后直接进入代码编辑器,用 Blade + SCSS + Vue 一屏搞定。

1) 新建程序

项目详情工具栏有 [+ 新建程序] 和 [+ 新建路由]。点击新建程序打开一个表单弹窗。

• 程序名(如 home、admin_dashboard)
• 描述 — 一句话说明这张界面/这个功能是什么
• 类型 — frontend(HTML/CSS/JS)/ backend(PHP)
• 路由 — 选已有路由,或用别名 + URL 路径 + HTTP 方法行内新建一个

2) 打开代码编辑器与画面布局

点击程序行上的 图标切到编辑器视图。画面分三块。

• 顶部面包屑 + 工具栏 — 当前程序名、保存状态指示器、工具按钮组在同一行。
• 左侧栏 — 同项目其他程序的列表。每项都有 (Code)和 (Builder)的快捷图标,用来在视图间跳转。
• 中央 3 栏编辑器 — 三块 CodeMirror 6 面板(HTML / CSS / JavaScript)并排排列。点击面板会以 focused 高亮,编辑器主题自动跟随你的 Dark/Light 设置。

3) 每个标签真正装的是什么

• HTML — 纯 HTML + Blade 指令(@if、@foreach)和 @{{ ... }} 输出。服务端变量、条件和循环直接在模板中表达。
• CSS — SCSS 语法(嵌套、& 引用、变量、mixin)直接使用。部署时自动编译。
• JavaScript — Vue 3 Options API 形式(data / computed / methods / mounted)。运行时会自动拾取并绑定到 HTML 列的模板上。

标准 CodeMirror 快捷键按预期工作:Ctrl+F 编辑器内搜索、Ctrl+Z 撤销、Ctrl+/ 注释、自动闭合括号/标签、软换行。

4) 编辑状态与保存循环

只要改动一个字符,顶栏立刻出现 未保存,告诉你有未保存的变更。点 [ 保存],三个标签一次发送;成功会短暂显示 已保存。

每次保存会把三栏写入程序主体,同时把那一刻记录为一条 revision。保存 = 自动版本快照 — 以后随时回滚到任何一条。

5) Deploy on Save — 每次保存都直达线上

把保存旁边的 [Deploy on Save] 开关打到 ON,每次保存会把变更 自动部署 到项目的目标(如主服务器)。推送后会短暂出现「N 项已部署」的徽标,这样不需要额外点 Deploy 按钮 —「编辑 → 线上」的循环自己闭合。开关是按项目记忆的,打开一次就保留。

6) 顶部工具组一眼看

• 数据库 — 打开 数据集绑定 弹窗。取个变量名、选表、设 WHERE/LIMIT/ORDER,查询结果就用该变量名自动注入到程序里。
• Builder — 切到同程序的基于块的编辑视图。代码视图和 Builder 视图共享同一产物。
• Code Search — 项目级搜索与替换面板(见下方 7)。
• Revisions — 带 diff 面板的 revision 历史(见下方 8)。
• 扩展指南 — 讲解如何通过 VSCode 扩展在本地编辑并部署同一项目的弹窗。

7) 项目级搜索与替换

在上方输入关键字,按 Enter 或 按钮。范围标签给两个选择 — Project(当前项目的所有程序)或 Revisions(包含过去快照)。

• 结果显示 类型徽标(HTML / CSS / JS)、程序 ID、程序名和命中数。
• 类型过滤标签 All / HTML / CSS / JS 可把结果收窄到单列,每个标签带命中数。
• 点击程序名旁的箭头,直接跳进那程序的编辑器。
• 在行上点 [Show More] 会在右侧展开 上下文面板,显示每条命中周围的代码。

Replace 位于第二行。选一个范围(All / HTML / CSS / JS),填入搜索和替换词,按 — 会出现「将在 N 个文件中变更」的确认,按 Yes 后项目级替换一次性跑完。

8) Revisions · 历史与回滚

每次保存都会在此添加一条快照。面板一打开就自动在右侧做 最新 revision ↔ 当前编辑 的 diff。

• 左:revision 列表(分页)。每行有三个动作图标:
  • Revert — 用这条 revision 覆盖编辑器(未保存改动会丢)。
  • 与当前 Diff — 这条 revision ↔ 编辑器里此刻的内容。
  • 与上一条 Diff — 这条 revision ↔ 紧邻它前面的那条。
• 右:带 HTML / CSS / JS 标签的 并排 diff。真正变了的标签会被自动选中。

9) 作者真实的操作顺序

1. 从程序行的 图标打开编辑器。
2. 按需要在 HTML(Blade) → CSS(SCSS) → JS(Vue) 标签里写。
3. 要数据就按 Database;要跨程序查找就 Code Search;要对照历史就 Revisions。
4. 按 [保存],等到「已保存」。如果 Deploy on Save 是 ON,部署也会同时发出。
5. 哪里出问题了,就从 Revisions 面板回到合适的快照。
6. 要跨多个程序做重命名,就用 Code Search → Replace 一次确认搞定。

在详情视图的可折叠路由板块或者通过 [+ 新建路由] 注册路由。

• alias — 内部标识符(如 home、api_orders)
• URL 路径 — 公开路径(如 /home、/api/orders)
• HTTP 方法 — GET / POST / PUT / DELETE / ANY

在程序表单的路由选择器里把路由连到程序 — 访客命中那 URL 时就会触发程序。

点击项目列表卡片上的 🚀(火箭)图标 打开部署弹窗。

1. 选择 部署模式:integrate(复用已有 Docker)· rebuild · new
2. 点击 [开始部署] → 9 步管道运行(完成一步变绿):
   ① 打包 → ② DB 准备 → ③ 数据准备 → ④ 服务器传输 → ⑤ Docker 构建 → ⑥ Docker 部署 → ⑦ 域名连接 → ⑧ 安装完成 → ⑨ 服务稳定
3. 结束后,域名 URL 上线,即刻可达。

在程序行上通过 图标打开 Code Builder。顶部有八个步骤标签(DB · List · Detail · Search · Hook · Style · Code · Menu);大多数程序从左到右走一遍就能完成。

整体流程一览

• [1] DB
  选表
  选字段
  WHERE · ORDER
• [2] List
  放置字段
  分组 · 排序
  五种布局
• [3] Detail · Search
  塑造表单
  选择组件
  insert / update 拆分
• [4] Hook · Code
  注入钩子
  [Builder] 生成代码
  复用代码片段
• [5] Menu
  4 级树
  [menu:code]
  公共 include

DB 标签详情 — 如果连接掉了,会先看到「DB 未连接」横幅与重连指南。连接正常时,面板会这样展开:

• #list(可编辑) — 一张主表。从下拉菜单中选择并按 [Select]。你将对这张表的行做编辑 / 删除 / 插入。
• #list2(只读) — 用于联表的副表(如拉标签或名称)。
• #list3、#list4 … — 点击侧边的 添加更多表。
• 三个字段选择器 — 从同一份列清单里分别多选「List 用字段」「Detail 用字段」「Search 用字段」。每个旁边的复选框一键切换全选/清空。
• DB Search Option — WHERE、ORDER BY、LIMIT 三行,外加可选 Raw Query。它们成为列表的默认查询过滤。
• 底部 [Update] 保存步骤,[Reset] 重来。

DB 标签里选中的「List 用字段」会作为候选出现在左侧。本标签定义 列表画面的样子和每列的行为。

先选一种布局(共五种),下方选项会据此自动调整。

• datatable — 内建排序和分页的表格。
• table — 每列可切换排序的普通表格。
• grid — 卡片网格。
• modal — 直接把行当作模态框打开的列表。
• slots — 嵌进 layout frame 的槽位。

添加项(字段列) — 点击左侧 [+ Add Item] 打开候选下拉。选已有字段,或用 + new 添加一个虚拟字段(用于计算或组合)。

• 每行:header_value(显示标签)· header_text(说明)· width · mutator(字段级自定义代码)· sortable · linkable · use_opt(选项值)· (显示/隐藏切换)。
• ↑↓ 排序, 删除, 魔杖用于 AI 辅助生成代码。

分组 — 右上角的 [Create Group] 把所选字段打成 1–5 个组。点 … 把项目分配到对应组。

• 在分组模式下,[Toggle Panel] 会切到 组编辑面板。这里逐组填写 组名(内部标识)、组头(画面上显示的标题)和 布局(组内各列的排布)。面板顶部的 组显示方式 决定多个组如何呈现 — tabs、并排盒子 或 单行输入组。

底部的 [Update] 保存步骤。

Detail 标签 定义的是你点击列表里一行时打开的 详情 / 编辑弹窗(modal)。布局几乎和 List 标签一样;关键差别是 每个字段要选一个输入组件。

• Component 下拉 — 每个字段选择输入类型:text · textarea · select · checkbox · radio · date · datetime · file · editor · hidden …
• opt_name / opt_value — 组件特定的附加选项(select 的选项列表、file 的允许扩展名、date 的格式 …)。
• insert / update 三角图标 — 切换该字段是出现在新增表单、编辑表单,还是两者都有。如 id / created_at 通常只在编辑时出现。
• required (+/-) 开关 — 必填标记。
• layout — 单元格摆放 / 宽度(1/2、1/3、整行 …)。
• 在顶部工具栏选择 主键列(唯一标识一行的列)和 详情页键(打开详情页时附在 URL 上的列)。

Search 标签 共享同一个编辑器。差别在于:

• Match mode — 输入值如何与数据库匹配:contains(部分匹配)· equals(精确匹配)· one-of(与逗号列表对照)· full-text(在长文本中做词查找)等等。
• 组件按搜索 UX 选 — 自由文本输入、下拉过滤等。

搜索输入会被自动放到列表上方;提交时与 DB 标签里设的 WHERE 以 AND 合并。

到这里步骤 1–3 已经把画面「材料」填好了。接下来加上 更细的行为、权限和自定义逻辑,再生成代码。

Hook 标签 — 展示生成后的 HTML 与 JavaScript 脚手架的小示意图,以及一组 hook point(徽标)用于注入自定义代码。

• 上方的迷你 HTML / JavaScript 骨架 — <?php ... ?>、<style>、<body>、模态、data / computed / mounted / methods 的位置都标出来了,可以准确看到你的 hook 最终落在哪里。
• 用 展开任意 hook 行即可打开其编辑器。双击进入 宽模式。
• 编辑器内右键 → Save Snippet / Load Snippet。把常用逻辑(登录检查、权限守卫、上传预处理 …)用一个 ident 存下来,再在别的程序里复用。

Style 标签 — 本程序的 CSS / SCSS 编辑器。打开 css_integrate 会与项目全局 CSS bundle 合并;打开 Backend Code 可以再附一段 PHP 片段。

Code 标签 · 真正生成 — 这里按 [Builder]。

• 两个 CodeMirror 编辑器 — 左 Blade 模板,右 Vue Script。它们预览由步骤 1–3 和你的 hook 输入组合出来的代码。
• Session Condition、四格 — Add / Delete / Read / Detail。每格接一个会话谓词(如 user_level>=3),守住对应 CRUD 操作。
• 特性开关网格 — 开启可复用特性(CSV / Excel 导出、多选删除、排序持久化 …)并设置所需参数。
• 底部的 [Builder] 按钮把全部组装成 Blade + Vue Script,直接写进 程序的真实代码。之后交给常规的代码编辑器 — 编辑、保存、部署照旧。

当你有了多个程序,就需要一个 共享导航。Menu 标签是一个向导,构建 最多 4 层深的菜单树,并通过一行短代码把它丢到任何地方。

菜单组 — 项目内装一份菜单定义的命名空间。

• 从下拉选已有组,或输入新的组代码(字母数字 + 下划线,2–9 字)并按 [Create Menu Group]。

4 层树编辑器 — 选好组左侧出现 Depth 0 表。向下钻一行,它右边打开下一层;最多四列依次排开(Depth 0 → Depth 3)。

  Depth 0 ┐
          ├─ Depth 1 ┐
          │          ├─ Depth 2 ┐
          │          │          └─ Depth 3   ← 最多 4 层
          └─ Depth 1'
           ...

• 每层表都有自己的 [+ Add Menu] 按钮 — 弹窗让你填名称、URL 别名、可选的会话条件。
• 每行: 编辑、 删除、箭头重排。
• 点每行末尾的勾形按钮,可在右侧一列钻进 该 项的子项。

用短代码注入 — 树做好了就把它放到实际页面。在一个公共 include 区域(layout frame、header / sidebar 的 partial)只需一行:

<?php echo get_menus_by_code($project_id, 'group_code', 'nav nav-menu', 'role="navigation"'); ?>

渲染时 get_menus_by_code() 帮手会读 project_menu 表,组装出最多 4 层深的 <ul>/<li>。带 session_condition 的菜单行,只有当用户会话满足条件时才显示。URL 与当前页匹配的项会自动获得 active 类。

前往 /layout/page。

• 左侧栏 — [+ 新建页面] 按钮 + 最近 / 共享 / 我的页面 板块。
• 顶部工具栏 — 搜索(字段 + 关键字)、Block/Frame/Page 切换标签、网格/列表切换、每页行数 (20/50/100)。
• 主体 — 含标题、说明、frame、已/未部署指示的页面卡片。

点击页面卡片或网格图标打开 全屏构建器。它有三块区域。

• 左面板 — 上:Frame 缩略条(选响应式模板);中:Frame 画布(iframe + 槽位覆盖);下:Block 缩略条(可拖动的块)。
• 中面板 — Data sampler(Architecture / Data 标签),用于 API 绑定。
• 右面板 — 部署 + AI 辅助。

选完 Frame 后,iframe 上会出现透明的拖放槽。从 Block 缩略条拖一个块,槽位会变蓝高亮 — 松手即可把块装到那个槽。

装好的槽会变成「已填充」;再次点击该槽可更换。同一个块能填多个槽,一个页面可以自由混用不同块。

在中面板的 Architecture 标签 中,把每个块的示例数据键与真实 API 响应键进行配对。

1. 每张块卡左栏显示该块期望的示例键树。
2. 中间的 ⚡(闪电)开关 打开 API 绑定模式。
3. 右侧选择在数据库服务中构建的端点 → 该 API 的响应键树展开。
4. 点击配对 示例键与 API 键 — 画出映射线,并在底部的 "Pair Map" 中作为 sample_key → api_key 出现。

Data 标签显示原始 JSON 响应,便于调试。

用右面板进行部署。

• Expose parameters — 要在 URL 中公开的查询 / 路径参数列表。每行有启用复选框、名称、来源(query/path)、默认值。[Add] 扩展列表。
• Deploy URL — 输入如 /my-page 的 slug,预览会实时更新。
• [Deploy] — 显示进度条与步骤标签;完成后即在域名上上线。
• 下方的 Deploy history 累积过去的 URL,可以回访。

从菜单打开 显示 > 幻灯片。左侧栏有 [+ 注册幻灯片] 按钮和「社区幻灯片」过滤器;主体是网格/列表视图。

每张卡片显示标题、场景数、总播放时长和部署状态。

点击 [+ 注册幻灯片]。

1. 步骤 1 — 介绍:卡片 + 流程图(Remote → 上传 → 幻灯片 → 浏览器),解释 URI 映射、通道、67 种切换和时间轴控制。
2. 步骤 2 — 注册:输入标题 + 描述 → [保存] → 进入详情编辑器。

中央的 时间轴面板 定义播放。

• 总时长 — 滑块,10–3600 秒。
• 场景数 — 区间滑块;每场景时长自动计算。
• 切换 — 从 67 种目录中选(fade、slide、cube、page flip 等)。
• 用 [保存] 按钮确认。

参数化游标(Page Sequencer) 通过改变一个参数,从一张 Layout 页面自动生成 N 个场景。

• 参数名(如 month)、算法(by_range / by_comma / by_json)、值(如 1-12 步长 1)。
• 结果:按月 1 场景,自动生成 12 个场景。

显示通道(仅 MAX) — 把同一幻灯片以不同的组合广播到不同显示器。

• 通道名(如「A 类」「B 类」) + 多选包含哪些幻灯。
• 开启「使用查询参数」可将通道以 ?keyword=value 的方式映射到 URL。

右侧的 部署面板(se-deploy) 发布节目。

1. 输入 URL 路径(如 /menu-signage)+ 从下拉菜单选择 域名。
2. 点击 [部署幻灯片] — 进度条、"Deploying..." 与 "部署完成" 消息。
3. 部署历史卡会记录域名 / 路径 / 时间戳。

让每台显示器的浏览器以全屏指向该 URL — 完成。

从菜单打开 数据 > 解析器。左侧栏有 [+ 新建解析器规则],以及最近 / 公开 / 我的规则 板块;主体是网格/列表视图。

每张卡片都有 (运行)· (项目测试)· (计划 — MAX)· (编辑)· (复制)· (删除)图标。

[+ 新建解析器规则] 打开一个 3 步向导。这个向导只注册 规则基本信息(名称、描述、目标数据集) — 真正的抓取 URL、选择器、字段映射在向导结束后自动打开的 解析器设置界面 里填。

1. 步骤 1 — 概述:「什么是解析器规则?」介绍 + 并排四张功能卡(数据提取、高级网页抓取、字段映射、可复用性)和「Parser Pipeline」图,一眼展示四种支持的流向(解析器规则 → DB / → 宏 → DB / → 调度器 → DB / → API 端点 → 服务启动)。按 [下一步]。
2. 步骤 2 — 数据库连接:点一张 数据集卡片(显示 db_type 徽标、表名、域名)选择抓取行的落点。若没有注册过数据集,只会显示「Go to Dataset」链接。按 [下一步] 会自动跑 3 步部署(「代理连接 → 解析引擎部署 → 部署完成」),把解析引擎配到所选 docker 代理上。
3. 步骤 3 — 创建规则:填规则名和可选描述,按 [Create Rule]。基本信息(名称、描述、数据集、share 标记)被保存,向导关闭,新建规则的设置界面自动打开。

到这里向导就结束了。在 解析器设置界面 填目标 URL、HTTP 选项、Loop Splitter、XPath/JSON 选择器、字段映射(见 ▶︎ 步骤 3 · 目标 URL 与提取选择器),在「测试」标签里验证结果并保存 — 这时解析器才真的 可以运行。

顶部的步骤条跟踪进度;[返回] 回到上一步(部署中禁用)。向导弹窗只能通过右上角 [x] 关闭。

(解析器规则编辑界面的目标 URL、Loop Splitter、XPath/JSON 选择器、后处理函数,以及用 AI 提示自动注册规则的说明。下面的详细文字部分仍为英文,后续再本地化。)

Enter the Target URL at the top of the editor and combine three techniques to extract rows.

• Loop Splitter (3 inputs — primary + 2 secondary) — string patterns that chop HTML into repeated units.
• XPath selectors — up to 3 levels, extracting fields inside each unit. The selector should point at a node set (array), not a leaf value — if the actual data sits at //h3/a/text(), enter just //h3/a so the result comes out as an array.
• JSON selectors — for JSON APIs, dot/bracket paths. Same idea: point at the array path. If the data has a shape like data.items[0].title, enter data.items as the selector so the item array is produced.
• Post-processing functions — chain trim(@p), replace(...), regex(...), strtoupper(@p), slice(), remove() per column.

The fastest path is to feed a slice of the source (via the Loop Splitter) into the AI Prompt and let the AI response auto-register the rule. Hand-tuning selectors one by one is much slower — especially when the page structure is non-trivial.

Auto-register with an AI prompt (recommended)

Instead of hand-filling selectors, hand the sample to an AI and apply the completed rule it returns.

1. Prerequisite — enter the Target URL and run the extract test once from the "Test" tab so a response body exists. That body is injected into the prompt automatically.
2. Click the highlighted "AI Prompt" button (wand icon) at the top of the test result panel. A prompt is auto-built in the editor area just below it, picking the right language for the document out of 8 supported (Korean · English · Japanese · Chinese · Russian · German · French · Spanish) and the right document type (HTML / JSON / XML).
3. Click inside the editor panel → Ctrl+A → Ctrl+C to copy everything.
4. Paste into an AI such as ChatGPT / Claude / Gemini and run → the AI returns a rule JSON.
5. Copy the response, then click the "Import Pattern" button (import icon) in the same panel — a paste-in textarea opens. Paste and click [Apply Pattern].
6. Loop splitter, selectors, unique key, and every column are mapped into the right slots of the rule automatically; the editor switches to the "fields" tab so you can check the result immediately. A summary toast like "Pattern applied: N fields" appears at the bottom.

If the AI response isn't valid, you'll see an "Invalid JSON" toast and your existing values stay untouched — safe to retry.

卡片上的 (试管)图标 或编辑器的 「测试」标签 会打开测试弹窗。

• 顶部栏:「N 条 / M 列」
• 导出:CSV · XLSX · JSON · HTML
• 网格:Row# + 自动识别的列标题
• 单元格 hover → 「Copy」按钮

调选择器、测试、再调、再测 — 循环直到输出对为止。

(从规则列表卡片的 ▶(播放)图标打开的「执行(Run)弹窗」的用法 — 三栏(URL 列表 / 计划和执行 / 结果反馈)的界面、URI·Fuzzer·预览·执行方式·实时反馈每一步、能得到的效果。以下详情部分仍为英文。)

Clicking the (Play) icon on a rule card opens the Run modal — the single screen where you decide where to hit, with what parameter combinations, how to run, and where to store results, then launch and monitor in place.

• [1] URI
  Target address
  {param} tokens
  path · query
• [2] Fuzzer
  Parameter mix
  1-N · A,B · DB
  combine / pair
• [3] Preview
  Expand URLs
  Fill left panel
  Verify count
• [4] Run · Save
  Runtime / Schedule
  DB / CSV / JSON
  Items per run
• [5] Start
  Flow checks
  [Start] enables
  Pause anytime
• [6] Feedback
  Progress · stats
  Per-URL log
  Macro chain

Interface at a glance — 3-panel layout

• Left panel · URL list — shows the preview URLs generated from the center panel, numbered. While a run is in progress the current row is highlighted and finished rows show a check, so you can see progress at a glance. Each row has a button to test-parse that single URL in isolation, and a at the top-right loads past run configurations for reuse.
• Center panel · Plan & Execute — the main body: define URI, fuzzer parameters, run/save mode, then launch from the flow diagram's [Start] button.
• Right panel · Result feedback — two tabs. "Results" shows live statistics and log during a run; "Parse Test" shows the cell-level preview when you click on the left.

Step-by-step

1. URI input — first card in the center panel. Two example styles — path-token (/category/{param}/list) and query-string (?param={param}) — are pinned to the header as clickable hint badges. Names inside the curly braces {...} must match the parameter names defined in the next card so substitution works.
2. Fuzzer parameters — the card that builds the list of values injected into each {...}. A top toggle picks one of two modes:
   • Combination — cartesian product of every parameter's values. E.g. {page}=1..10 × {cat}=A,B → 20 URLs.
   • Paired — zip-style: the n-th value of every parameter together. All lists must have the same length.
   For each parameter pick a name and a generator — 1-N (range with step), A,B (comma list), DB (pull from a dataset column with optional WHERE/ORDER/LIMIT), [,] (JSON array), or \n (newline list). adds another parameter.
3. URL preview — the [URL preview] button at the bottom of the card expands the URI + parameter combinations into real URLs listed in the left panel. The count shows in the header badge, so you can immediately verify the expected size (e.g. range 10 × categories 2 = 20).
4. Run mode & Save mode — the third card.
   • Run: Runtime (one-off) / Schedule (periodic, MAX plan). Schedule reveals start-time and interval (minutes) inputs inline.
   • Items per run: Page / PK.
   • Save: DB (dataset, or a custom external DB via host/user/password/database), CSV, JSON, or SQL. DB mode also surfaces table (collection) name and a DBMS badge so you can confirm the destination visually.
5. Visual flow guide & Start — below the cards, a small flow diagram chains URI → Parameter → Preview → Save → [Start] → Macro. Each node lights up with a green check as its input is filled. Once required nodes are valid the [Start] button at the top-right activates. (If you pin a macro on the trailing node, it runs automatically right after the scrape.)
6. Live feedback while running — the moment you press Start, the top progress bar fills up (parsed / total) and the right-panel "Results" tab updates in real time.
   • Stat cards: Total · Passed · Failed · Remaining — the red "Failed" card only appears when a failure actually happens.
   • Log view: one line per URL as it's processed, latest highlighted, each showing time · URL · +rows added; failed URLs carry an badge.
   • Pause / Resume: the Start button switches to [Pause] during a run — stop at any time safely.
   • File-save modes (CSV/JSON/SQL): the Output textarea below fills with the generated file body; a button grabs it immediately.

What this run screen buys you

• Plan, run and observe in one screen — no tab hopping. Tweak the URI, parameter list, or save target and immediately re-run. The configure → run → verify loop is as tight as it gets.
• A fuzzer that scales — generate tens of thousands of URLs without writing one by hand. Ranges, comma lists, DB columns, JSON arrays, newline lists — category × page × date combinations are ready in seconds.
• DB-backed parameters (by_db_field) read a key table column and iterate detail pages on top of it — the classic "list → detail" two-stage crawl works end-to-end without spreadsheets or glue scripts.
• Transparent live feedback — per-URL checkmarks, streaming log, and success/fail counters make it easy to spot exactly where things stalled. Rerun a failed row on its own via to isolate the cause.
• Resource-friendly architecture — the actual HTTP and parsing runs on your docker agent, not the QuickStart server. Large crawls don't affect the service's bandwidth.
• Macro chaining — attach a macro to run right after the scrape for notifications, aggregation, or post-processing, turning collect → clean → notify into a single action.

(计划执行(仅 MAX)的卡片构成、5 步流程图、在数据库编辑器中验证结果、与宏链接的提示等。以下详情部分仍为英文。)

Scheduled runs are a hands-off mode: the docker agent executes the rule on a fixed interval on its own, even while the screen is closed. Rows flow straight into the dataset (DB), so to actually see the results you open the target table in the Database editor.

• [1] Schedule setup
  Start time
  Interval (min)
  Active toggle
• [2] Agent sync
  [Save] pushes
  config to the
  docker agent
• [3] Auto periodic run
  Agent runs alone
  QuickStart idle
  Background task
• [4] DB accumulation
  Rows INSERT into
  dataset table
  Dup keys skipped
• [5] Check in Database editor
  Data > Database
  Open the table
  Query with WHERE/ORDER

The (clock) icon on a card opens the schedule modal (FREE/PRO plans show a "Max" ribbon).

• Start time (hour 0–23, minute 0–59)
• Interval (minutes)
• Active toggle
• Run mode: Single URL / URL list (batch)

[Save] persists to QuickStart and auto-syncs to the selected docker agent. The agent is what actually runs the schedule — QuickStart never sits in the traffic path.

Verify results in the "Database editor"

Because scheduled runs are headless, the way to check the output is to open the target dataset directly and inspect the rows that piled up.

1. Open Data > Database from the left menu.
2. Click the dataset card that the parser rule is linked to — this opens the Database editor.
3. Pick the target table from the left table list (e.g. items, products, etc.).
4. Use WHERE / ORDER BY at the top to bring recent rows to the top (ORDER BY created_at DESC, ORDER BY id DESC) and inspect what the last scheduled run added.
5. A quick row count (COUNT) or a date-range filter is enough to sanity-check trend — if the count grows each interval, the schedule is healthy.

The run log itself is shown as a table in the Run modal's right-panel "Results" tab when schedule mode is active, but for content verification of the actual harvested data, the Database editor is always the source of truth.

从菜单打开 数据 > 宏。左侧栏有「最近」「社区」「我的宏」板块;主体是网格/列表视图。顶部工具栏支持按名称或描述搜索。

点击侧边栏的 [+ 新建宏] 按钮,会立刻打开创建向导。

[+ 新建宏] 打开一个 4 步向导。它同时覆盖注册宏的基本信息和 准备其运行服务器。

1. 步骤 1 — 宏简介:「宏是什么?」简介 + 四张功能卡(管道链、适配器模式、输入 → 输出、代码生成)和一张展示四种拓扑的流程图(DB 查询、链式、解析器、调度器)。无需输入 — 按 [下一步]。
2. 步骤 2 — 连接方式:准备宏真正运行的地方。两个选项:
   • 部署新宏服务器 — 连接你的 Railway 账户(粘入 token),然后选语言 · 框架 · 核心栈 · 可选附加组件(MongoDB / FFmpeg / Puppeteer / WebSocket 等) · DB 凭据。点击 [部署服务器] 运行一个 6 步管道(Receive → Decrypt → Docker build → Deploying → Network → Verify),你的账户就拥有一个专用的宏运行时。
   • 连接现有宏服务器 — 如果你已有一台跑宏代码的服务器,填入其连接信息即可挂上去。
   服务器准备好后向导会自动进入下一步。
3. 步骤 3 — 选择类型:从 24 种宏类型 中选一个(ETL 管道 · 批量 API · 数据迁移 · CSV/Excel 导入 等)。与类型对应的起步代码(带输入参数、循环骨架和输出结构) 自动生成 作为下一步的起点。
4. 步骤 4 — 注册:输入宏名(如「每晚 DB 同步」、「批量翻译」)和简短描述,按 [创建]。宏被保存,向导关闭,详情视图(代码编辑器)自动打开。

顶部的步骤条跟踪进度;[返回] 回到上一步(部署运行时禁用)。向导只能通过右上角 [x] 按钮关闭。

向导一关闭就打开一个 3 窗格编辑器:左边是 输入字段定义,中间是带 PHP / Node.js / Python 标签的 代码编辑器,右边是 AI Prompt 面板。编辑器已经预填了你在第 3 步选的宏类型的 脚手架,所以通常只改要紧的部分。

• [1] 接收 run_data
  input_data
  conn_string
  table_name · user_id
• [2] 输入规范化
  数组 → 对象
  类型转换
  默认值
• [3] 核心逻辑
  API · DB
  文件 · shell
  数据变换
• [4] 组装结果
  success 标志
  data / json
  download_links
• [5] Return
  匹配向导选择的
  输出类型
• [6] AI Prompt
  右侧面板
  选场景
  AI → 粘贴代码

你自动收到的变量 — run_data

你的函数总是接受一个名为 run_data 的参数。服务器在运行前把它填好,至少包含以下键:

• run_data.input_data — 用户在 Quick Test 或调度器里填的值。它先以 { item_name, item_value, item_type } 的数组 出现,所以每个宏的第一件事就是把它翻成普通的 key/value 对象。
• run_data.conn_string — 你在向导里选的数据集的 DB 连接字符串(服务器侧已 AES 解密)。面向 DB 的宏直接用。
• run_data.table_name、run_data.file_name — 来自向导的目标表 / 文件名。
• run_data.user_id、run_data.app_id — 调用者和宏 ID,方便做日志和权限检查。
• run_data.save_type、run_data.app_type — 向导中选的保存模式和宏类型。用于分支。

推荐的编码范式

这是即便是业余开发者也可以原样照抄的最小骨架。保留你在向导里设的函数名(如 macro_run) — 服务器就用这个名字来调用。

Node.js 示例 — 从真实的 _sample/code39.js 提炼:

async function macro_run(run_data) {
    // ── 1) 规范化输入 — 数组或对象都接受 ──
    const raw = run_data.input_data || {};
    const params = {};
    if (Array.isArray(raw)) {
        raw.forEach(f => { params[f.item_name] = f.item_value; });
    } else {
        Object.assign(params, raw);
    }

    // ── 2) 默认值 · 类型转换 ──
    const output_format = params.output_format || 'svg';
    const style         = params.style || 'default';
    const max_items     = Number(params.max_items || 10);

    // ── 3) 核心逻辑 ──
    try {
        // ... API 调用、DB 查询、文件转换等
        const results = [ /* 收集的结果 */ ];

        // ── 4) 组装结果 & return(成功) ──
        return {
            success: true,
            data: results,                        // 数组渲染为表格
            message: results.length + ' 条已处理',
        };
    } catch (e) {
        // ── 4') 失败用同样形状 ──
        return { success: false, error: e.message, data: [] };
    }
}

PHP / Python 同样形状 — 函数接受 run_data,返回 ['success' => true, 'data' => [...]] / {'success': True, 'data': [...]}。在左侧 Input 窗格定义好字段后,按中间窗格头部的 脚手架按钮,工具会生成一套已把你声明的字段逐个解包的语言专属骨架。

return 的形状应匹配向导里选的输出类型

返回的协议对每个宏都一样,但 你填哪些字段,取决于第 3 步里选的输出形式。Quick Test 结果面板会根据这些字段决定如何渲染。

• success: true/false (必填 · 所有宏通用)
• data: [{...}, {...}] — 输出类型为 「表 / grid」 时。面板会自动识别列并渲染成 表格。
• json: {...} — 输出类型为 「JSON / 原文」 时。在 JSON 查看器中渲染(textarea + 复制按钮)。
• download_links: [{ url, name, size }] — 输出类型为 「文件下载」 时。渲染为下载按钮列表。
• message(成功)/ error(失败) — 文本块(<pre>)。可以和上面任意一种一起使用。

可以同时填多个字段 — 例如用 data 展示表,同时通过 download_links 附带一份 CSV(真实的 code39.js 一次性返回 data + download_links + message)。

从 AI 获取代码 — 右侧窗格

当逻辑变复杂或者外部库你不太熟时,去右侧的 「AI Prompt」 窗格寻求帮助。

1. 先在 左侧 Input 窗格 定义需要的输入字段(名称、类型、描述)。这份定义会自动烘焙进提示。
2. 点击右侧窗格顶部的 场景徽章(针对你宏类型定制的示例 — 如「抓取某个 URL 并 INSERT 进 DB」「表 A → 表 B 迁移」),对应的场景模板会 自动填入提示 textarea。
3. 在 textarea 里加入具体要求(哪个 URL、哪些列、哪些边界情况要处理等)。
4. 点击头部的 复制按钮 复制整段提示,粘进 ChatGPT / Claude / Gemini 并运行。
5. 把 AI 的代码粘进 中间编辑器,按 保存。
6. 跳到第 4 步(Quick Test)迭代。

把脚手架按钮()与 AI Prompt 结合,实际需要写的代码就缩减到 核心逻辑的寥寥几行。

切换到左侧窗格顶部的 Quick Test 标签(🧪 烧瓶图标)。Quick Test 会通过你在第 2 步准备的宏服务器来运行代码。

1. 按行填写输入参数。
2. 点击 [运行] → 「运行中…」旋转器。
3. 结果展示方式取决于返回形状:
   • data → 表格
   • json → JSON 查看器
   • download_links → 下载按钮列表
   • message/error → <pre> 文本块

Stdout 和 stderr 实时流到下方终端窗格 — 对调试非常方便。

Quick Test 表现不错之后,把宏交给一个计划做无人值守执行。在详情视图的 计划板块,只需要两个值。

• 开始时间(偏移) — HH:MM 格式(如 00:00 = 午夜,03:30 = 凌晨 3:30)。这是周期计划的锚点。
• 间隔 N(分钟) — 宏从开始时间起 每 N 分钟 运行一次。5 表示每 5 分钟,60 表示每小时,1440 表示每天一次。
• 启用开关 — 暂停或恢复,配置不丢。

例:开始时间 00:00 + 间隔 5 → 从午夜起每 5 分钟一次(00:00、00:05、00:10…)。开始时间 09:00 + 间隔 1440 → 每天早上 9 点一次。

保存后,宏服务器会按这个节奏自己运行本宏。QuickStart 只发信号 — 真正的执行和流量都在宏服务器上。(没有 cron 表达式 — 调度器只用开始时间 + 间隔。)

从菜单打开 数据 > 数据库。左侧栏有蓝色的 [+ 新建数据集] 按钮以及最近 / 公开 / 我的 / 团队 板块;主体是网格/列表视图卡片。

每张卡片的四个图标:▶(DB 编辑器)· 表格(单元格编辑器)· (API 设置)· 复制/删除。

[+ 新建数据集] → 向导弹窗。

1. 步骤 1 — 三种连接方式:部署新 DB(Railway)· 连接现有 DB · 本地文件(JSON/CSV/Excel)。DB 类型下拉(MySQL 3306 · MariaDB 3306 · PostgreSQL 5432 · MongoDB 27017) · 主机 · 端口 · DB · 用户 · 密码 → [测试连接] 验证凭据能到达数据库。
2. 步骤 2 — 连接成功后,选择一张表,它的字段会展开。
3. 步骤 3 — 注册数据集:名称 · 说明 · 表 · PK · 列(* 或逗号分隔) · WHERE · LIMIT · ORDER BY · 共享。右侧面板的 [测试查询] 预览结果;然后 [保存]。

点击数据集卡的 ▶(播放)图标 打开全屏编辑器,它包含三个面板。

• 左 — 标签(Tables/Views/Procedures/Functions)、表结构检视器、命令图标(复制 CREATE · Drop · Update · Insert · Delete · Join · Reverse · Refresh)。
• 中 — 多标签 SQL 编辑器。▶ 运行 或 F5/F9。可导出为 TSV/CSV/JSON/SQL,或通过「发送到宏」直接交给宏。
• 右 — 可单元格编辑的结果网格。

点击卡片上的 API 设置按钮(插头图标)打开 API 设置弹窗。

1. 基本:命名空间(必填,URL 尾)· 表 · JOIN 表 · 分页变量(默认 page) · 每页(50) · 缓存(0–1440 分钟)。
2. [自动生成] → 组装 JSON 形态(main_container → main_fields → item_container → item_fields → detail)。每个字段是一对「JSON 键 → SQL 变量」。
3. [保存] → [部署] 激活端点。

端点会上线在 GET https://happycat.apidealder.net/endpoint/{namespace}。用弹窗的 ACL 板块 对其加固。

• API Key(自动生成按钮 · header/param 投递 · 头名 X-API-KEY)
• IP 白名单 — 通配符 / CIDR
• Referer 限制 — 允许的域名
• 速率限制 — 每分钟最大请求

例:curl -H "X-API-KEY: ..." https://happycat.apidealder.net/endpoint/menu_list

远程管理分为四个区域。点击前先确认去哪里看。

• 左侧服务器列表 — 正在管理的每个域名,旁边有个小的状态圆点。需要更多空间时可以把这个面板折叠为只有图标。
• 中央文件区 — 所选服务器的文件浏览器。顶部工具栏含路径栏、排序按钮和终端切换;下方的文件夹内容会随着逐层进入向右展开成列。
• 底部操作栏 — 上传 · 新建文件夹 · 新建文件 · 下载 · 删除。只有选中文件或文件夹后按钮才会亮起。
• 终端面板 — 需要时会从底部滑出的控制台。用顶部工具栏中的终端图标显示/隐藏。

在左侧列表中点击一个域名。域名旁边的小圆点告诉你当前状态:

• 绿点 — 在线。文件列表立即打开。
• 灰点 — 离线。容器可能处于休眠,或网络可能被阻塞。
• 白点 — 仍在检查,或状态未知。

如果列表为空,会看到「先部署一台服务器」提示,以及跳转到 Single File、项目、数据库部署界面的快捷按钮。

中央区是 列式浏览器 — 每点击一个文件夹就会在右侧展开成新的一列。同时最多显示 4 列;更深的路径会自动折叠最左侧的列。

• 路径栏 — 房屋图标跳回根目录 (/),上面每个以斜杠分隔的段都可点击直接跳到对应位置。
• 路径输入 — 输入完整路径如 /var/www/html/storage/logs 按 Enter,无需层层点击即可直达。
• 排序按钮 — 名称 · 大小 · 修改时间。再次按同一按钮可切换升/降序。
• 选择 — 单击选中一项,Shift+点击选择一段范围,Ctrl/⌘+点击逐个添加或移除。选中多项后,操作栏右上角出现「已选 N 项」徽标。

单击文件选中。再点一次即可打开 — 根据文件类型自动弹出对应右侧视图。

• 文本/代码文件 → 中央打开带语法高亮的编辑器。HTML、PHP、Vue、CSS/SCSS、JavaScript/TypeScript、JSON 等会自动识别。
• 图片(PNG · JPG · GIF · SVG · WebP · BMP · ICO) → 在预览查看器中打开便于肉眼确认。
• 二进制/可执行文件 会触发「无法编辑二进制文件」提示,不会打开。
• 编辑器右上角的 [保存] 按钮会把改动即时推到服务器 — 无需重新部署。Esc 或 [取消] 不保存关闭。
• 编辑器只能打开 10 MB 以内 的文件;更大的文件会提示「文件过大」。

把底部操作栏和终端面板结合起来,才真正能干活。

• 上传压缩包 — 拖入或点击选择 .zip · .tar · .tar.gz · .tgz 文件。会显示压缩包内容预览;点 Start Upload 后,以 1 MB 分块发送并显示进度条,完成时自动刷新当前文件夹。
• 上传文件 — 一次选择一或多个文件,原样上传到当前文件夹(不解压)。
• 新建文件夹 / 新建文件 — 会提示输入名称。仅允许字母、数字、点、连字符和下划线。
• 下载 — 文件按原样下载;选中文件夹会自动打包为单个 ZIP。
• 删除 — 会确认一次;若选中多项,将一次性处理全部。
• 移动 / 复制 — 把文件拖到文件夹上会弹出确认对话框。或按 Ctrl+X/Ctrl+C 暂存所选,然后到另一个文件夹按 Ctrl+V,同样会弹出确认对话框粘贴。
• 终端 — 顶部工具栏的终端图标会让底部面板滑上来,并连接到所选服务器的 shell。输入命令按 Enter — stdout 白色、stderr 红色显示。↑/↓ 重用历史命令,当前工作目录会被跟踪,所以 cd some/path 之后下一个命令就会在那里执行。

登录后,从顶部导航或仪表盘打开 服务 → Single File。界面分为顶部工具栏和主体:

• 顶部工具栏 — 左侧:历史 · 指南 · 标题输入 · 保存 (💾)。中央:模板下拉菜单。右侧:共享 · 运行 ▶ · 部署 📦。
• 中央编辑器 — 顶部 4 个标签页:prompt · html · scss · vuejs。点击切换。
• 右侧预览面板 — 按运行后渲染。

打开 工具栏中央的模板下拉菜单,选择 "Restaurant Booking System"。顺序如下:

1. 下拉菜单值一变化,所选模板即自动应用。
2. 四个标签页(prompt · html · scss · vuejs)都会自动填充预构建代码以及用于重新生成的 AI 提示词。
3. 当前标签默认切换为 prompt — 这段文本就是你请求重新生成时 AI 使用的内容。
4. 点击工具栏上的 运行 ▶,右侧预览会渲染出三列的预约界面(日历 / 时间槽 / 预约表单)。

注意:此模板是让店主管理日期、时间槽和餐桌可用性的 运营界面,而不是简单的面向访客的菜单着陆页。

此模板在两个层面进行定制:无需写代码的 设置弹窗 和 直接改代码。入口是渲染页面右上、主题切换 (☀/🌙) 旁边的 ⚙ 设置 图标。

A. 设置弹窗 — 只调数据,不写代码

1. 点击 ⚙ → 全屏遮罩中央打开一个弹窗(4 个标签页)。
2. Time Ranges — 用数字输入调整早 / 午 / 晚的开始与结束时间。顶部的可视化条实时反映带色的段。若开始==结束,该段显示「(未启用)」。
3. Time Slots — 选择步长 (10 / 30 / 60 / 120 分钟),然后在网格中逐个切换各槽的启用/停用。顶部显示启用/停用数量。
4. Tables — 行内重命名 + 删除的列表,以及底部用于添加桌位的输入。此列表驱动预约表单中的「桌位」下拉。
5. Holidays — 周期性休息日(周日〜周六,7 个切换按钮)+ 特定节假日(日期输入 + 原因文本,添加/删除列表)。原因只在设置中显示,不会出现在公开界面。

B. 代码改动 — 店名、主题等

• html 标签 — 用你的店名替换页头标题字符串 "레스토랑 예약"。使用 Ctrl+F 定位。
• vuejs 标签 — mounted() 包含模拟数据生成(D+1 约 10%、D+2 约 5%、D+3 约 2% 的随机预约 + 韩语姓名数组)。实际使用时清空此段或替换为服务器 API 调用。节假日通过 https://date.nager.at/api/v3/PublicHolidays/{year}/KR 获取,需要时把 KR 换成其他国家代码即可。
• scss 标签 — 主题使用 CSS 自定义属性 而非 SCSS 变量。定义在 .reservation(亮)/ .reservation.dark(暗)之下:--primary(品牌色)、--bg(页面背景)、--card-bg、--text / --text-sub、--border、--holiday(节假日红)、--closed-bg(店休琥珀)、--occ-bg / --occ-border(仍有空位的时间槽)。只改这些,整体外观就一致地变化。

编辑完后:保存 (💾) → 运行 ▶ 刷新。未保存的标签会显示一个小点 (●)。

现在 自己试着预约一次,把自己当作顾客。这正是上线后员工或访客会做的操作。按这个顺序在预览中进行:

1. 在日历上选日期(左侧) — 点击今天及以后的任意一天。红色是节假日,琥珀色是你设的特定休息日,灰色是常规休息日 — 这些无法点击。已有预约的日期角上会显示「+2」这样的小数字,方便一眼看到预约量。
2. 选时间(中央) — 选好日期后,可用时间以圆形按钮显示。按钮上的「2/5」表示「共 5 张桌,已预约 2」。浅色 = 空位充足,深色 = 差不多满了,划掉 = 全满无法点击。
3. 查看已有预约 — 点击时间按钮,下方会展开该时段的现有预约列表(客人姓名、桌号、人数)。用于防止重复预约。
4. 填写表单(右侧) — 所选日期和时间会作为摘要出现在顶部。从上到下依次填写:
   • 客人姓名
   • 电话:只输入数字,会自动格式化为「010-1234-5678」
   • 桌位:该时段已被预订的桌位会 自动隐藏,避免误操作导致重复预订
   • 人数:1 到 20 人
   • 备注:特别要求(生日、无障碍等)
5. 点击 [预约] 按钮 — 如果姓名为空,会弹出警告。否则弹出「预约完成」确认,日历上的「+N」和时间按钮上的「N/M」立即 +1。表单自动清空,准备下一次预约。
6. 尝试浅色和深色主题 — 点击右上角的 ☀/🌙 图标。你的店可能在明亮白天或昏暗夜晚使用,确保两种模式下都可读。

要查看手机与平板视图,用鼠标把浏览器窗口拖窄即可。屏幕变窄时,3 列自动重排为 2 列,最后叠成 1 列。由于员工常用平板、顾客常用手机,要确保窄屏下文字和按钮仍然足够大易于点击。

部署使用托管服务商 Railway。首次点击 Deploy 按钮时,会出现「连接 Railway 账户」弹窗。顺序如下:

1. 点击 Log in with Railway → 在新标签页中打开 Railway 登录页。
2. 还没有 Railway 账户?在那个页面免费注册(邮箱或 GitHub)。
3. 在「QuickStart 请求部署权限」界面,点击 Authorize。
4. 返回到 QuickStart,并出现「已连接」提示。

这一步只做一次,之后的部署会跳过。

账户连接好之后,再次点击 Deploy。进度弹窗开启,依次进行 8 个阶段 — 每个完成后变绿。

1. Pack — 把代码打包。
2. Upload — 将包发送到 Railway。
3. Install — 安装所需依赖库。
4. Build — 编译 SCSS 并打包 Vue。
5. Migrate — 把静态文件放到 Web 服务器的位置。
6. Start — 启动容器。
7. Health — 验证网站确实能响应。
8. Complete — 完成并分配 URL。

通常 1–3 分钟。展开弹窗底部的 显示日志 可以实时观察。

部署完成后,弹窗底部会出现 打开域名 按钮。点击后,自动分配的免费域名(例如 happycat.apidealder.net)会在新标签页打开。把这个 URL 分享给任何人。

稍后若要绑定自己的域名(例如 myname.com),进入仪表盘的 设置 → 域名管理,注册自定义域名,并把显示的 DNS 记录添加到你的 DNS 提供商。

从顶部导航或仪表盘点击 服务 → 数据库 打开数据库页面。界面分为左侧栏和中央主体。

• 左侧栏 — 顶部是蓝色的 [+ 新建数据集] 按钮,下面是「最近」「公开数据集」「我的数据集」「团队」板块。
• 中央主体 — 顶部工具栏有搜索框(名称 / 表 / URI)、网格⇄列表视图切换、每页行数选择器(20/50/100)。下方以卡片形式显示现有数据集。
• 每张卡片上的 4 个图标 — ▶(播放)打开数据库编辑器 · 表格图标打开单元格编辑器 · API 设置按钮(插头图标)打开 API 设置 · 加上复制/删除。双击卡片名即可行内改名。

点击左侧栏的 [+ 新建数据集],中央会打开一个 3 步向导弹窗。流程:

1. 步骤 0 — 概述:关于数据集及其能力的说明卡片。点 Next 继续。
2. 步骤 1 — 连接方式:在三种大选项中选一种。
   • 部署新数据库 — 在 Railway 上配置一个全新的 DB 容器。
   • 连接现有数据库(最常见) — 连接你已有的 DB。
   • 本地文件 — 以 JSON / CSV / Excel 作为数据集上传。
3. 选择「连接现有数据库」时:
   • DB 类型 下拉 — MySQL(默认端口 3306)· MariaDB(3306)· PostgreSQL(5432)· MongoDB(27017)。选择后默认端口自动填入。
   • 主机 · 端口 · 数据库名 · 用户 · 密码
4. 点击底部的 [测试连接] — 成功后向导自动进入步骤 2;失败时在下方显示红色错误。

连接成功后,向导自动继续两步。

步骤 2 — 选表

• DB 中的表以行的方式列出(名称 · 图标 · 行数 · 备注)。
• 点击某张表,右侧面板展开显示其 字段列表。

步骤 3 — 注册数据集(在这里完成「数据集」元数据)

• 左 — 注册表单:
  • 数据集名称 (必填) — 如「菜单列表」
  • 数据集描述
  • 目标表 下拉 (必填)
  • 主键字段 — 如存在 id 则自动选中。
  • 包含列 — *(全部)或逗号分隔 id,name,price
  • WHERE — 如 stock_flag = 1
  • LIMIT — 如 0,100(偏移 0,100 行)
  • ORDER BY — 如 created_at DESC
  • 共享复选框 — 对其他用户只读公开。
• 右 — 查询测试:点击 [测试查询] 使用当前设置运行实际 SQL,显示结果行数、列数与实时预览。根据需要调节左侧条件直至满足。
• 点击 [保存] → 向导关闭 → 主界面出现一张新的数据集卡片。

点击数据集卡片上的 ▶(播放)图标,数据库编辑器 以全屏遮罩方式打开。它有三个面板。

• 左 — 对象浏览器:顶部标签(Tables / Views / Procedures / Functions)。点任意表在下方检视器中查看列 · 类型 · 备注。列表上的命令条涵盖复制 CREATE 脚本、Drop、Update、Insert、Delete、Join、Reverse、Refresh。
• 中央 — SQL 编辑器:用标签页管理多条查询。双击标签可改名。工具栏有 ▶ 运行按钮 以及 F5 / F9 快捷键。结果可导出为 TSV / CSV / JSON / SQL,或直接通过「发送到宏」交给宏。
• 右 — 结果网格:上一次查询的结果行,支持单元格级别编辑。

用这一步确认 你将要公开的数据是否真的符合期望。不符合就先在这里改好。

现在把这个数据集作为 REST API 公开。在数据集卡片上点击 API 设置按钮(插头图标)打开 API 设置弹窗。

1. 基本信息
   • 命名空间 (必填) — 会成为 URL 尾部。menu_list 产生 /endpoint/menu_list。
   • 表 — 目标表(由数据集自动填入)
   • JOIN 表 — 需要连表时的可选第二张表
   • 分页变量 — 分页查询参数名(默认 page)
   • 每页 — 默认 50
   • 缓存时间 — 0–1440 分钟
2. 自动生成响应:点击 [自动生成],按 main_container → main_fields → item_container → item_fields →(可选)detail 组装 JSON 形态。每个字段是「JSON 键 → SQL 变量」一对(如 name → $customer_name)。也可手动增删字段。
3. 访问控制(ACL) — 详见下方。
4. 点击 [保存] 保存 API 定义。
5. 点击 [部署] 运行部署管道 — 显示进度条,完成后端点上线。

部署完成后,端点在(绑定自定义域名后)公开可用:

• GET https://happycat.apidealder.net/endpoint/menu_list
• GET https://happycat.apidealder.net/endpoint/menu_list?page=2
• GET https://happycat.apidealder.net/endpoint/menu_list/csv — CSV 下载

API Key 鉴权(API 弹窗内的 ACL 部分):

• API Key — 点击 [自动生成] 获得 UUID 形式的随机 key。
• 投递方式 — header 或 param。
• 头名 如 X-API-KEY / 参数名 如 api_key。

调用示例

通过头:

curl -H "X-API-KEY: your-secret-key" https://happycat.apidealder.net/endpoint/menu_list

通过查询参数:

curl "https://happycat.apidealder.net/endpoint/menu_list?api_key=your-secret-key"

浏览器 fetch:

const res = await fetch('https://happycat.apidealder.net/endpoint/menu_list', { headers: { 'X-API-KEY': 'your-secret-key' } });
const data = await res.json();

额外防护(都在 ACL 部分):

• IP 白名单 — 通配符(192.168.1.*)与 CIDR(10.0.0.0/24)。
• Referer 限制 — 允许的域名列表。
• 速率限制 — 每分钟最大请求数。

从顶部导航或仪表盘点击 服务 → 数据采集 打开解析器规则列表界面。布局与数据库页面一致。

• 左侧栏 — 顶部是蓝色的 [+ 新建解析器规则] 按钮,下面是「最近」「公开规则」「我的规则」(带用户过滤)。
• 中央主体 — 顶部工具栏有搜索、网格/列表切换、分页。下方是你已有规则的卡片(或表格行)。
• 卡片上的图标 — ⚗️(试管)项目测试 · ⏱(时钟)计划(若套餐不含则显示「Max」徽带)· 编辑 · 复制 · 删除。卡片显示规则名、测试页、说明和创建日期。

点击左侧栏的 [+ 新建解析器规则] → 打开 3 步向导。

1. 步骤 1 — 概述:四张信息卡(抽取 / 爬取 / 字段映射 / 复用)以及一张管道示意图(解析器规则 → 数据库 / 宏 / 调度器 / API)。不需要输入,仅供理解。
2. 步骤 2 — 数据库连接:从卡片列表中选择一个 数据集 作为抓取结果的落点。每张卡片显示数据集名、DB 类型、表和域名。选中后按 [下一步],一个「连接代理 → 部署解析引擎 → 部署完成」的 3 阶段自动流程会把解析引擎安装到所选 docker 代理上。
3. 步骤 3 — 注册规则:
   • 规则名称 (必填) — 如「Naver 新闻 IT 频道」
   • 描述 — 一句话概括采集内容
   • 点击 [创建规则],向导关闭并直接进入解析器设置界面。

规则编辑器打开时,顶部有一个 目标 URL 字段。输入要抓取的页面(如 https://news.example.com/it),然后配置抽取。解析器结合三种方式。

• Loop Splitter(3 个输入 — 主 + 2 个辅) — 把 HTML 切成重复单元的字符串模式。例如用 <li class="article"> 的一部分作分隔符,每篇文章就是一个项目。
• XPath 选择器(最多 3 层) — 从每个重复单元内用 XPath 抽出标题 / URL / 图片。选择器应指向 节点集(数组),所以若值在 //h3/a/text() 处,只需输入 //h3/a。
• JSON 选择器(3 层) — 如果页面返回 JSON,用点 / 方括号记法指向数组路径。形状像 data.items[0].title,就输入 data.items 让项目数组生成。
• 函数后处理 —「function」列对每个抽出的值应用:
  • trim(@p) — 去空白(@p 为当前值)
  • replace(old,new) / regex(pattern,replacement)
  • 直接 PHP 调用如 strtoupper(@p)
  • 内置辅助:get_data() · slice() · remove() · map()

最快路径不是手打选择器,而是把 Loop Splitter 切出的源文本喂给 AI 提示,让 AI 响应自动注册规则。下一步骤 4 正是这一点。

与其手打几十个选择器,不如 把样本交给 AI 并把它返回的完整规则直接应用。对初学者这是推荐路径。

前置条件 — 必须先在步骤 3 输入目标 URL,并在编辑器的 「测试」标签 中 至少跑过一次抽取测试,让响应正文存在。这段正文会自动拼入提示。

A. 组装并复制提示

1. 在测试结果面板上方点击高亮的 🪄 「AI 提示」按钮(魔杖图标)。
2. 文档类型(HTML / JSON / XML)会自动识别,正文被抽出并组装成提示。
3. 按钮正下方的代码编辑器面板被填入 markdown 格式的提示,内容包括:
   • 任务介绍段落
   • HTML/JSON 源样本
   • 目标定义 — 重复分隔符、详情 URL 字段、唯一键,以及各列的标签、变量名、类型、切分规则、后处理函数
   • 一个样例 JSON,并明确 「除 JSON 外不要输出任何文字」 的指令
4. 提示 多语言感知(8 种:韩/英/日/中/俄/德/法/西) — 韩文文档产出韩文标签、中文文档产出中文标签,以此类推。
5. 面板内点击 → Ctrl+A → Ctrl+C 复制全部。

B. 粘贴进你选择的 AI 并运行

1. 粘贴到 ChatGPT / Claude / Gemini 并发送。
2. AI 会以规则 JSON 返回。
3. 复制响应(或只复制 JSON 部分)。

C. 粘贴响应自动填入规则字段

1. 回到同一面板,点击 📥 「导入模式」按钮(导入图标) — 会打开一个带有期望格式提示的粘贴文本框。
2. 粘贴 JSON,然后点击 [应用模式]。
3. 重复分隔符、选择器、唯一键、详情 URL 字段会自动映射到规则顶部;每个列(标签、变量名、类型、切分规则、后处理函数)都会一次性填入字段列表。变量名重名会自动改名以防冲突。
4. 编辑器自动切到「fields」标签,便于立即验证;下方会出现一条「模式已应用:N 个字段」的摘要提示。

选择器大致到位后,验证它们真的抽出你想要的内容。两个入口:

• 规则卡片上的 ⚗️ 图标
• 或者规则编辑器顶部的 「测试」标签

项目测试弹窗 打开后,内容包括:

1. 顶部状态栏 —「N 项 / M 列」摘要。如果 N 是 0,说明 Loop Splitter 错了 — 先修这里。
2. 导出按钮 — CSV · XLSX · JSON · HTML,方便把样本分享给团队。
3. 结果网格 — 行号 + 由第一个项目自动推导的列标题,每个抽出项一行。
4. 单元格 hover — 悬停时出现「复制」按钮,把值抓到剪贴板。

若结果不对,关闭弹窗,调整选择器/函数,再测 — 这个循环占解析器工作的约 70%。

测试干净之后,在编辑器的 「保存」板块 中确认保存设置。

• 保存类型 下拉 — 设为「Database」(如果你在向导中选了数据集,已自动设置)。
• 目标表 / 集合名 — 行的落点。如果不存在,首次运行时由代理创建,以你测试中识别到的列结构。
• DB 模式 —数据集(联动) / 自定义。自定义允许你直接填主机 · 用户 · 密码 · 数据库(当你要把数据写到向导 DB 之外的另一个 DB 时有用)。

运行时发生什么

1. 运行规则(测试里的「持久化」按钮,或下一步骤的计划),docker 代理访问目标 URL。
2. 项目被抽取:Loop Splitter → XPath/JSON 选择器 → 函数处理。
3. 抽出项被插入到目标表。重复项(按 URL 哈希或你指定的键判定)会自动跳过或更新。
4. 由于此表与 步骤 5 的数据集卡片 共用同一个 DB,你之前构建的 API 端点 /endpoint/... 现在就提供最新数据。

最后一步让它自动跑起来。点击规则卡片上的 ⏱(时钟)图标 打开计划弹窗。此功能仅限 MAX — 其他套餐图标上会显示「Max」徽带。

1. 计划字段:
   • 开始时间 — 时(0–23) + 分(0–59)。如 03:30 AM。
   • 间隔(分钟) — 60 = 每小时,1440 = 每天一次。
   • 激活 — 开关。关闭保留配置但暂停运行。
   • 运行模式 —单 URL 模式(一个目标 URL)或 批处理模式(按每行一个 URL 列表遍历)。
2. 点击 [保存] — 计划记录到 QuickStart,同时 自动同步到所选 docker 代理,真正跑它的是代理。
3. 之后代理按你的间隔触发规则,把行灌进数据集。QuickStart 只负责信号 — 它不出现在流量路径上,所以没有带宽开销。

与宏串联(可选) — 在编辑器的流程图中用 「选择宏」下拉 选一个宏,抓取结束后立即执行它。例如:把新抓的商品价格和昨天比较,跌幅大于 N% 就发 Slack 告警。

从生产 DB (B) 直接推到分析 DB (C) 看似简单,但现实中字段名不一致、混着个人信息、时区也不同,总会需要一个中间清洗的地方。QuickStart 的数据集 (A) 就是这个角色。

• B (外部源) — 在线的商城或 ERP 等原始系统。一动就影响业务,所以只读。
• A (我的数据集 · Docker) — 从 B 拉到的数据的暂存工位。重命名字段、替换 URL、剔除无用列、添加聚合列都在这里做。
• C (外部目标) — 接 BI 仪表板的分析库、合作方库等目的地。只有 A 里整理好的干净数据才流向 C。

这种结构的好处:

1. B 和 C 即便引擎不同 (MySQL ↔ PostgreSQL 等),A 做中介就不是问题。
2. 数据留在 A,C 被清空也能从 A 重推,回滚容易。
3. 可以在 A 里反复验证变换,直到满意再推向 C。

先创建用于接收 B 数据的自己的数据集 (A)。

1. 顶部导航 → 数据 → 数据库,打开列表页。
2. 右上 [+ 新建数据集],填写:
   • 名称 — 例: replication_staging
   • DB 类型 — MySQL 或 PostgreSQL。与 B 对齐变换最少。
   • 主机 — 默认使用 Docker agent 自带的 DB (自动填入)。
   • 数据库名 — 例: my_staging
3. [保存]后列表出现新行,旁边是 🔌 连接测试 · 编辑 · 迁移 · 导出 等图标。
4. 先点 🔌 确认出现 "连接成功",成功了才能继续。

这个数据集 A 就是后续 B 来的数据和发往 C 的数据的中间缓冲区。

在列表里刚建好的 A 行,点击 迁移图标,出现三栏大弹窗。

• 左 Deck A — 已自动绑定刚建好的数据集 (replication_staging),当前表和字段立刻可见。
• 中央工具栏 — 方向指示 (A → B / B → A)、[反转]按钮,以及动作列表 (⚡ hard_sync, 🔄 soft_sync, ➕ append …)。
• 右 Deck B — 输入远端 DB 连接信息的表单。

默认方向 A → B (把自己数据集往外送),但我们现在要从 B 拉取,所以点中央的 [反转] 改成 B → A。Deck B 的徽标变成 "source"、Deck A 变成 "target"。

然后在 Deck B 填入外部生产库 (B) 的连接信息:

1. 主机 — 如 origin.acme.com 或 10.0.1.23
2. DB 类型 — MYSQL · POSTGRESQL · MONGODB · ELASTICSEARCH
3. 数据库名 — 如 sales_db
4. 账号/密码 — 强烈推荐只读账号。只给 SELECT 权限就没法误操作 B。
5. [连接测试] → 出现 "连接成功" 并自动加载远端表列表。

连接成功后 Deck B 显示远端表列表,右上出现 [下一步] 按钮。点它后 Deck B 从 "连接信息" 切到 "选表" 视图。

1. 选表 — 用复选框挑要拉的表。[全部表]一键全选。初次只挑 orders · customers · products 三张安全得多。
2. 条件 (可选) — Deck B 底部的 WHERE 填 created_at > '2026-01-01' 之类过滤。LIMIT 填 0, 1000 只取 1000 行样本。初跑务必加 LIMIT。
3. 查看字段 (可选) — 表旁的 图标打开列清单,取消勾选不想拷贝的列 (如 password_hash, national_id) 即可排除。
4. 执行 ⚡ hard_sync — 中央工具栏点 [hard_sync] (闪电图标),"对 {count} 张表执行 hard_sync?" 确认后 A 侧依 DROP → CREATE → INSERT 顺序重建。进度条显示当前/总表数与行级进度。
5. 完成后底部日志出现 "Success",Deck A 的表列表刷新,新表出现。

hard_sync 之外的选项:

• 🔄 soft_sync — 按主键仅对 A 的行做 UPDATE/INSERT/DELETE,A 中已有但不在源集合里的记录不会被删除。用于定期同步。
• ➕ append — 只插入 A 中还没有的 id。适合增量抓取。
• 🔀 merge — 只插入与 A 的 id 不冲突的行。

B 的原始数据已进 A,但直接送 C 多半会出事。在 A 整理有两条路。

① 迁移弹窗里的替换功能 — 中央工具栏下方 "替换设置" 批量换字符串。比如 B 图片 URL 是 https://cdn-old.acme.com/ 而 C 需要 https://cdn.acme.com/:

1. 选 [文本] (或 [正则]) 模式
2. 左框填 https://cdn-old.acme.com/
3. 右框填 https://cdn.acme.com/
4. 下次 hard_sync / soft_sync 时传输过程中自动替换后再落入 A (或第 6 步的 C),原始不动。

② 在 SQL 编辑器直接处理 — 回到数据集列表,点 A 行的 编辑图标运行 SQL。

• ALTER TABLE orders DROP COLUMN password_hash; — 去掉敏感列
• UPDATE orders SET created_kst = CONVERT_TZ(created_at, 'UTC', 'Asia/Seoul'); — 时区转换
• CREATE TABLE orders_summary AS SELECT product_id, COUNT(*) cnt, SUM(amount) total FROM orders GROUP BY product_id; — 建聚合表

变换完,编辑器里用 SELECT * FROM orders_summary LIMIT 20; 核对结果后再进第 6 步。

把 A 里整理好的数据推向外部目标 (C)。回到数据集列表点 A 行的 ,重开迁移弹窗。

1. 确认方向 — 中央工具栏应显示 A → B,此时 UI 上的 B 位置就是我们的 C。若仍停留在第 3 步的 B → A,点 [反转] 翻过来。
2. Deck B (实为 C) 填目标连接 — 主机 warehouse.acme.com、DB 类型 POSTGRESQL、库名 reporting,账号要用具 INSERT/UPDATE 权限的写账号。[连接测试] → 成功。
3. 在 Deck A 勾要推的表 — 如 orders_summary · products · customers_clean 等 A 中已整理的表。
4. 选动作 — 按场景:
   • C 是首次搭建,用 ⚡ hard_sync,结构一起复制,C 中没有的表会自动创建。
   • C 已有数据且是定期同步,用 🔄 soft_sync,以 A 为基准对 C 做 UPDATE/INSERT/DELETE。
   • C 只做累积,用 ➕ append,只把 A 新增的 id 追加进 C。
5. 执行 — 确认后看进度条。网络抖动时会自动分块传,中断了再跑会接着继续。

手工跑通的管线包进宏就能定期执行。服务 → 宏 新建一个宏,在代码里调用迁移操作。

• 宏体大致是 fetch('/dataset/api/mig_run', { method: 'POST', body: JSON.stringify({ dataset_id: 123, action: 'soft_sync', deck_b: {host, db_name, user, password}, sel_tables: ['orders'] }) }) 这样调用迁移 API。(精确参数最稳的办法是先手动点一次按钮,从网络面板把请求拷过来。)
• 在宏的 调度 标签指定 cron。例: 每天凌晨 3 点 0 3 * * *。
• B → A 和 A → C各自独立成一个宏,一边失败不会拖死另一边。B → A 成功后触发 A → C 的顺序,用第一个宏结果的 success 决定是否调第二个。

验证清单:

1. 在 C 跑 SELECT COUNT(*) FROM orders 与 A、B 比对行数。
2. 任取一个近期 id,在 B·A·C 三处比对同列取值是否一致。
3. 故意往 B 插一行,观察 5~10 分钟后能否到达 A 再到 C。未到达就翻宏执行日志和迁移结果日志。

这些场景,粘贴一次完胜手写 SQL。

• 市场同事用 Excel 整理好的 500 条优惠码 要落到业务 DB。
• 设计师在 Google 表格里给的 商品名·价格·分类 要一次性上传。
• 合作方给的 CSV 会员列表 需要原样 import。
• 想给 AI 向导提前放 100 行已经做好的例子 备用。

单元格编辑器就是 Excel 式的 行×列网格,Excel 里 Ctrl+C 复制一段范围,到编辑器里某个单元格 Ctrl+V,就会自动识别制表符或逗号并按行展开。没有字段映射 UI,直接从起始单元格从左往右依次填入。

顶部导航 → 数据 → 数据库。自己的数据集列表以卡片或列表形式展示。

1. 找到要落数据的 你拥有的数据集(user_id 是你)。公开数据集只读,不可编辑。
2. 在该行右侧图标堆里点 单元格编辑器(表格单元格图标)。一个大弹窗铺满屏幕。
3. 布局: 左侧 选项面板(表选择·页步·排序·搜索·替换),中间 网格,右侧 工具栏(保存·增/删行·Undo/Redo·复制·CSV/SQL 导出·✨ AI 向导)。
4. 在左侧表下拉里挑 目标表,其已有行就加载到网格。空表就空着。

粘贴前一定确认 Excel 列序 = 表列序,否则值会落到完全错误的列上。

• 表头核对 — 网格首行显示列名与类型。Excel 从第 1 列起就要按这个顺序排好。
• 主键(PK)核对 — 表头有 🔑 的列是主键。id 是 auto_increment 时,Excel 里复制时要把 id 列空着,INSERT 时 DB 会自动赋值。
• NOT NULL 列核对 — 表头标红的列不能为空,Excel 那边一定要填。
• 列多/少 — Excel 比表列多,多出的右边会被忽略;少了,右侧单元格留空。

结构对不上,可以在左侧选项面板的 生成网格(X × Y)重画,或回到 Excel 调整列序再复制。

核心操作。在 Excel/表格里选中 不含 id 列 的范围,Ctrl+C。回到编辑器:

1. 在网格里点 起始单元格。一般选左起第一列、现有最后一行下方一行,这样新行落在数据末尾,不动老行。
2. Ctrl+V。编辑器自动判别 制表符(Excel 默认)或 逗号(CSV 原文),按行列铺展。
3. 网格自动扩展,新行用 浅色背景 标记,表示「还没保存的新行」。
4. 可再选其他起始单元格继续粘另一段。

手动指定分隔符 — 左选项的 分隔符 下拉有 制表符 · 逗号 · 安全逗号(保留引号)。CSV 里引号包住的字段含逗号时,选 安全逗号,引号内容保留为一个单元格。

粘完后 先目视扫一眼。编辑器用三种颜色区分状态。

• 浅色背景行 — 刚粘的「新行」,保存时 INSERT。
• 单元格角上黄点 — 已有行里 值变过的单元格,保存时 UPDATE。
• 灰掉的行 — 待删除行。底部状态栏有「🗑 保存时将删除 X 条」和 [恢复] 按钮。

常用编辑动作:

• 双击单元格直接改内容。
• 右工具栏 / — 光标处加空行 / 删当前行。
• Ctrl+Z · Ctrl+Y — 撤销/重做(最近 50 步)。
• 查找替换 — 左面板,文本或正则,网格全范围一次性替换。

底部显示 ✏ X 行 Y 单元格被改 计数。跟预期不一致就先修好再保存。

校对完就保存。右工具栏的 保存 或 Ctrl+S。编辑器自动处理:

• 新行(浅色) → INSERT INTO 表名 (col1, col2, ...) VALUES (...)。auto_increment 主键由 DB 分配。
• 有改动的已有行 → UPDATE 表名 SET col=val WHERE id=...,只含变动列。
• 待删除行 → DELETE FROM 表名 WHERE id=...。

成功后底部弹 「已保存 X 条」Toast,新行浅色回归普通色,原本空的 id 单元格被 DB 赋值。这些行已与原有行无差别,是 正常数据。

失败时 — 备注面板显示错误,通常是 NOT NULL 为空、类型不匹配、unique 键冲突。修该行后再保存即可。

as if to be 是一种 模式学习式的指令方式:「已经完成的结果(想要值)长这样的话,现状(现有值)也按同样的逻辑变换成这样」。不用把规则用语言写出来,给 AI 看规则的结果示例,它自会从中归纳规则并推广到剩下的行。

单元格编辑器为此提供两个 标记(色 1·色 2)。

• 标记 1(想要值·默认青色) — 标示正确示例 的单元格。
• 标记 2(现有值·默认橙色) — 标示AI 需要填 的还是原始状态的单元格。

为什么强:

1. 不用自然语言描述规则,示例替你说话。
2. 对语言难以表达的细腻规则(语气、口吻、调性保持)也照样适用。
3. 一个提示词处理 几百个单元格,一条条问 AI 的搬砖没了。
4. 加/改示例就能立竿见影地提升质量,调参回环按秒计。

在单元格编辑器打开数据的状态下,先搭好下面的结构。

1. 输入列 — AI 要读的原文。例: zh_text、product_desc、address_raw。
2. 输出列 — AI 要填的空列。例: en_text、summary、city。没有就先 SQL 编辑器里 ALTER TABLE ... ADD COLUMN en_text TEXT;。
3. 种子示例 2~5 行 — 输出列 手工填好。三个好例子决定了 500 行的质量。

挑好示例的窍门:

• 多样性 — 短、长、特殊用例都来一点。示例太像,AI 就在边缘情况上翻车。
• 难度分散 — 简单 1 个、中等 1 个、棘手 1 个。
• 结果形式要明确 — 换行、大小写、敬语与否等风格要在示例里显出来,AI 才学得到。

在右面板的 标记色板 点 第 1 个色块(青色·想要值) 让它激活,被选中的色块边框高亮。

1. 把第 2 步手填的输出列示例单元格(比如 3 个)挨个点一次,单元格变 青色背景,表示已被标为「想要值」。
2. 标记是切换式,同一单元格再点一次就取消,标错时方便。
3. 拖选多个单元格后再点色块,可一次批量标。

把标签改成任务名 — 色块旁边的标签(默认「想要值」)点 铅笔就能改。翻译就叫 「英文翻译」,摘要就叫 「一行摘要」,分类就叫 「类别」。第 5 步生成提示词时这个标签会直接进去,AI 会更准确地理解任务。

现在激活色板里的 第 2 个色块(橙色·现有值)。

1. 把还是空、或原始状态的输出列单元格在网格上 拖选一片。比如 en_text 列从第 4 行到末行。
2. 点一下橙色色块,所选单元格全部变成 橙色背景,表示 AI 要处理的单元格。
3. 输入列(zh_text)不用标,AI 会自动读同一行的输入列。
4. 这个标签也能改,比如 「翻成英文」、「变短」、「标类别」 这种一个词的指令。

一切就绪时网格上会出现 青色单元格(正确示例)+ 橙色单元格(待填) 并排。这就是「as if to be」的典型形态。

点击右工具栏的 ✨ AI 向导。编辑器读取标记信息,组装一份 结构化提示词,自动 复制到剪贴板。底部会弹「AI 提示词已复制」。

复制下来的提示词大致结构(具体内容根据标签和示例不同):

1. 系统消息 — "You are a data transformation assistant"
2. 任务说明 — 基于标签。例如 "Transform each 'Current Value' cell according to the pattern shown in 'Desired Value' examples."
3. 示例单元格清单 — 被青色标记的单元格的 (行, 列, 值),AI 在这里学模式。
4. 待处理单元格清单 — 被橙色标记的单元格的 (行, 列, 原始输入值)。
5. 输出格式约束 — 只返回 JSON 数组 [{"pos":"行,列","return_txt":"变换后的值"}, ...]。

中止条件 — 青、橙一个都没标就会弹「没有标记」警告。回到第 3、4 步先标。

把剪贴板里的提示词 Ctrl+V 进 Claude · ChatGPT · Gemini 等 AI 对话框发送。AI 解析完会用 一个 JSON 数组 回。

1. 从 AI 回复里 拖选 纯 JSON 部分,Ctrl+C。前后有说明文字没关系,只取 JSON 数组。
2. 回到单元格编辑器,在右面板下方的 Memo 文本区 Ctrl+V。Memo 可视为 AI 结果专属的入口。
3. 目视确认粘的是不是合法 JSON。形状 [{"pos":"3,5","return_txt":"Translated"},{"pos":"4,5","return_txt":"Another"}, ...]。

AI 喜欢多嘴的情况 — 会在前面加「Here is the JSON you asked for:」之类。只取 [ 开头、] 结尾的 JSON 数组。第 7 步的「应用」只解析纯 JSON。

Memo 里贴好 JSON,点右工具栏的 📥 应用结果。编辑器解析 JSON,按每条的 pos(行,列)把 return_txt 写进对应单元格。成功会弹 「已应用 X 个单元格」。

• 被写入的单元格会带 修改标记(黄点),还没入库。
• 某条不满意,Ctrl+Z 能撤,但会把整批 AI 结果都撤销。通常 只对问题单元格手改 更快。
• 满意就 Ctrl+S 保存,走第一节第 6 步同样的 UPDATE 路径。

循环 / 分批策略:

1. 第一批不急着全应用,先看 10 个样本 的质量。走偏就回第 3、4 步调示例和标签再生成提示。
2. 满意了翻页,标下一批,重复第 5、6、7 步。
3. 整体做完,加个 翻译日志 / 分类日志 这样的元数据列,记录每批用的示例,将来风格一变再重跑很方便。

用具体场景来跟好理解。咖啡馆「Sodam」的店主想在门口的平板上挂一个电子菜单牌。从零做太慢,直接拿方案市场的menupan 改成自己店里的样子,要快得多。

30~45 分钟内要完成的:

• logo — 把默认 menupan logo 替换成「Sodam」logo
• 菜单项目 — 删掉示例(美式 4500 韩元等),换成自家实际菜单
• 配色 / 字体 — 默认蓝调换成温暖米色 + 深棕色,正文字体换成可读性好的韩文字体
• 上线域名 — 在 menu.sodam.kr 这种自己的域名上发布

为什么是 fork?

1. 布局、DB schema、后台都已就绪——从零做的时间省 90%。
2. fork 出来的副本运行在你的账号、你的域名、你的 DB下;原方案不动,改的只有你这份。
3. 之后 menupan 上游有更新也跟你这份无关,你的定制保留。

顶部导航 社区 → 方案市场(或 /solution)。卡片式方案画廊。

1. 顶部筛选(全部 / Project / Macro / Community / Direct)选 Project,或者搜索 menupan / 电子菜单 找卡片。
2. 点卡片打开详情页,会看到预览、功能说明、所需资源(域名/DB)。
3. 详情页点 Fork 为新项目。fork 弹窗打开。
4. 填:
   • 选域名 — 从你已有的域名选,如 menu.sodam.kr。没有就先在另一标签页 设置 → 域名 申请一个免费子域名(~.apidealder.net)再回来。
   • 选数据集 — 菜单数据要存哪个 DB。新建或选你已有的。
   • 项目名 / 描述 — 例如名字 sodam_menu、描述「咖啡 Sodam 门店电子菜单」。
   • 「自动部署」开关 — 打开就在 fork 完后立刻自动跑一次部署。第一次建议开。
5. 点 [执行 Fork]。30 秒到 2 分钟后弹完成 toast。侧边栏 我的项目 上面会出现新行,工作区也自动打开。

分两步:(a) 用 远程管理 把新 logo 文件上传到服务器;(b) 在 程序编辑器 里把旧 logo URL 改成新 URL。

(a) 远程管理上传新 logo

1. 顶部导航 服务 → 远程管理。在左侧服务器列表点你 fork 的项目域名(menu.sodam.kr),圆点要是绿色才正常。
2. 中间区域路径切到 /public/assets(在路径栏直接打字 + Enter 最快)。
3. 底部 [上传文件] 选自家咖啡馆 logo(sodam_logo.png)上传。单文件不用压缩上传。
4. 上传后,浏览器直接访问 https://menu.sodam.kr/assets/sodam_logo.png,200 OK 能看到图片就 OK。

(b) 在程序编辑器里换 logo URL

1. 回工作区,点项目的 程序。看到组成菜单牌的程序列表(一般 main、menu_list 这些)。
2. 双击 logo 出现的程序(通常是 main)打开编辑器。
3. 右上角 查找替换(Ctrl+H)搜原 logo URL,一般是 /assets/menupan_logo.png 之类。
4. 查找填 menupan_logo.png,替换填 sodam_logo.png,全部替换。HTML 和 CSS 一起换。
5. Ctrl+S 保存,右侧预览看自己 logo 是否出现。

menupan 自带后台页面给店员增删改菜单用。两条路,强烈建议走后台。

(推荐)走后台页面

1. 访问公开域名下 https://menu.sodam.kr/admin(或 menupan 设置的后台路径)登录。fork 完后默认管理员账户写在方案详情页的 README 里。
2. 左菜单 菜单管理。分类(咖啡 · 甜点 · 非咖啡)和品项(美式 · 拿铁 · …)以表格/卡片展示。
3. 把示例项目全删掉,自家实际菜单一条条加:
   • 名称(美式) · 价格(4500) · 描述(...) · 分类(咖啡) · 图片(远程管理里上传的图片 URL)
4. 编辑、排序、上下架开关这种日常运营动作都在这里完成。这一屏店员也能用。

(替代)直接在 DB 修改

• 后台搞不动的精细批量(比如咖啡品类一次性涨 500),走 数据 → 数据库 → fork 时新建的 dataset → 单元格编辑器。
• 选 menu_item 直接改,或在 SQL 编辑器里跑 UPDATE menu_item SET price = price + 500 WHERE category='咖啡';。(单元格编辑器用法见实战 → 单元格编辑器粘贴入库)
• 注意:动了后台没认的列,或破坏 PK/FK,后台可能就失灵。所以日常编辑还是后台。

动代码之前先在浏览器里直接改值,找到自己满意的颜色。改动是临时的,刷新就没,放心试。

1. Chrome 打开线上菜单(https://menu.sodam.kr),按 F12 开发者工具。或者右键 → 检查(Inspect)。
2. 开发者工具左上 箭头+方框图标(元素选择器),点页面上要换色的区块(顶栏、菜单卡背景)。右边 Styles 面板就出现作用其上的 CSS 规则。
3. 把鼠标移到颜色值(background-color: #2563eb;)上会看到小色块。点一下打开取色器,拖动或直接打 hex 改色。
4. 字体一样:点 font-family: ...; 改成新字体名('Pretendard', 'Noto Sans KR', sans-serif)。
5. 找到满意的组合,把当时的 hex 和字体名记下。下一步给 AI 看或第 7 步落进代码用。

实用小技巧:

• 多元素同时比对 — 改了顶栏色后正文不搭,就两个色一起调。
• Computed 选项卡 — 显示真正生效的最终值(包含继承)。值反常时溯源很有用。
• :hover 强制开 — Styles 面板上方 :hov 按钮可强制 :hover·:focus,鼠标悬停时的色也能预览。

第 5 步手挑出来的颜色还差点意思,或者想问「这家咖啡馆还有什么基调更搭」时,请 AI 推荐能瞬间给出 5~10 个候选。给 Claude/ChatGPT 类似下面的 prompt:

我在做咖啡馆「Sodam」的门店电子菜单牌。
概念是「温暖、安静的韩式咖啡馆」,
空间是木色装修 + 暖黄灯光。

现在的配色:
- 顶栏背景: #2563eb (蓝)
- 正文背景: #ffffff
- 文字:     #1f2937
- 强调:     #2563eb

请推荐 5 套更契合这种概念的配色。
每套给顶栏 / 正文背景 / 正文文字 / 强调 4 个 hex,
再附一句简短说明感觉。

字体也推荐 3 个韩文可读性好、契合这种氛围的
Google Fonts 或免费韩文字体。

AI 大致会这样回:

• 方案 1(温暖米色 · 深棕) — 顶栏 #6b4423、正文背景 #f5ecd9、文字 #3c2415、强调 #c97a4a · 与木色装修 + 暖黄灯光自然融合
• 方案 2(现代极简) — …
• …

验证候选的顺序:

1. 回到第 5 步的 F12 Inspect,把每个 hex 一个个粘上去试,挑最满意的一套。
2. 比着比着可能发现「顶栏用方案 1、强调用方案 3」这种混搭也不错,记下。
3. 字体上 https://fonts.google.com 搜 AI 推荐的名字,看实际字形适不适合菜单。

把 F12 + AI 选定的色和字体写进真实代码。这一步做完,刷新也保留,别人看也是一样。

1. 工作区 → 项目 → 程序,双击设计相关程序(通常是 main 或 theme)打开代码编辑器。
2. 切到右上的 SCSS(或 CSS)选项卡。颜色变量通常集中在文件最上面($primary-color、$bg-color 等)。
3. 把 F12 选好的 hex 填到这些变量:
   $header-bg: #6b4423;
$body-bg: #f5ecd9;
$text-main: #3c2415;
$accent: #c97a4a;
4. 韩文字体在 SCSS 最上方加一行 @import url('https://fonts.googleapis.com/css2?family=Pretendard&display=swap');,把 body 的 font-family 改成 'Pretendard', sans-serif。
5. Ctrl+S 保存,底部预览看是否立即生效。

两种发布方式

• 方式 A — 手动部署(默认):工作区上方 🚀 部署(Deploy) 按钮,1~2 分钟构建+发送,完成后 menu.sodam.kr 就是新设计。第一次最稳。
• 方式 B — 保存时自动部署(推荐: 快速迭代):打开工作区上方的 「保存时自动部署」 开关,以后每次 Ctrl+S 都自动部署。色、字体、菜单频繁调整、想线上立刻看效果时尤其好用。营业时间记得关(避免顾客看到闪烁)。

部署完用手机和平板打开 https://menu.sodam.kr 做最终核对。门口平板挂上这个 URL,顾客看到的就是它。

不用从头写 fetch() 再画 v-for。有这么一种套路:把已经做好的设计部件(块)装进框架的插槽,再轻轻挂上数据集,页面就完成了。本指南就是把这一圈从头走到尾。

再来一次比喻:在空的相框(框架)里塞已经设计好的照片(块),把相册(数据集)接上,相册里的字会印到照片上;把相框挂上墙,就是部署。

今天要做的页面 — 「我家店的商品列表」。上面页头、中间 10 个商品卡(数据集真实数据)、下面页脚,简单一屏。

• 再进一步:像行情、新闻、排行这样把 8~10 张数据集表同时绑到 list / list3 ... list10 这些变量上,整页都用 JSON 结构画出来——这种大案例也存在。本指南只是它的第一针,简化为 单变量(list) + 单数据集(products)。
• 为什么这样好 — 设计师只看块的外观,数据负责人只管数据集,页面负责人只在程序构建器里对插槽。角色干净分离;数据变了不影响设计,设计变了不影响数据。

先把要流进插槽的真实数据放好。先做屏再回头处理空数据,根本验证不了任何东西。数据先,屏后,这是定式。

1. 顶部导航 数据 → 数据库。没有自己的数据集就 [+ 新建数据集]。例如名字 shop,MySQL/PostgreSQL。
2. 在该数据集的 SQL 编辑器建表:
   CREATE TABLE products (id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(100), price INT, image_url TEXT);
3. 用同一数据集的 单元格编辑器 打开 products,填 5~10 行。从 Excel 整理好的表 Ctrl+V 一下就进来(详见实战 → 单元格编辑器粘贴入库)。
4. SQL 抽查一下:SELECT * FROM products LIMIT 3;。第 6 步把这个数据集挂到 list 变量上。

必备列 — 块设计要用什么就放什么。name · price · image_url 就够。多了无害,但起步简单一点更好查问题。

接下来做要装进插槽的块。顶部导航 设计 → 块(或 /layout/block)进块库。右上 [+ 新建块]。

1. 名称 — 取个好认的,比如 product_card_list。
2. HTML 区 贴卡片网格。关键:变量名定为 list:
   <div class="card-grid">
  <div class="card" v-for="item in list" :key="item.id">
    <img :src="item.image_url">
    <div class="name">@{{ item.name }}</div>
    <div class="price">@{{ item.price }}元</div>
  </div>
</div>
3. CSS/SCSS 区 一点基础网格:
   .card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { padding:14px; border:1px solid #eee; border-radius:8px; }
4. sample_data — 预览用假数据,用 JSON,键是 list:
   { "list": [
  {"id":1,"name":"样品 A","price":1000,"image_url":"/assets/sample.jpg"},
  {"id":2,"name":"样品 B","price":2000,"image_url":"/assets/sample.jpg"}
] }
5. 保存。块构建器的预览面板会按 sample_data 自动渲染两张卡。这一步预览能不能出来,是核心验证。出不来,先确认 HTML 里的 list 变量名跟 sample_data 的 list 键是不是同一个。

开始做页面(程序)。服务 → 项目 → [我的项目] → + 新建程序,或者打开已有程序进 程序构建器(编码构建器)。两个名字其实是同一个工具,8 个步骤标签。

1. 8 标签 — db · list · detail · search · hook · style · code · menu。点第二个 list(列表)。
2. 布局模式切换 — list 标签上方有 「字段 / 插槽」 两个模式。默认「字段」(类表格)。我们要装设计块,切到 「插槽」。界面变成插槽配置 3 步 UI:
   • 1) 选框架 — 用什么样的相框(几个槽、怎么排)。
   • 2) 配插槽 — 每个槽装什么块、数据变量怎么对。
   • 3) 代码预览 — 系统拼出来的代码看一下。
3. 「框架 / 插槽」听着抽象,就想成「拿了一个 3 排相框,要塞 3 张照片进去」。第 5 步选框架。

插槽模式界面 1) 选框架 下拉里挑一个简单的,通常 「3-row(上/中/下)」 就行。框架选好按 [应用],2) 配插槽 自动生成 slot 1、slot 2、slot 3 行。

1. 插槽 2(中间)的 选块 下拉里选第 3 步做的 product_card_list。下拉项一般写成 id - 名称 - 作者。
2. 选完瞬间,这个插槽区域就用块的 sample_data 预览 出现 2 张卡片(样品)。看到就说明装对了。
3. 插槽 1(上)和插槽 3(下)同样可以塞预先做好的页头/页脚块,空着也行。第一遍只填插槽 2 也够。
4. 每个插槽行旁边有 data_placer (源选择器) 和 data_selector (目标选择器) 输入框,先 都留 list。第 6 步细讲。
5. 到这一步,插槽里有块,但还在用 样品数据。下一步接真实数据集。

本指南最重要的一步。让块里的 list 变量被真实的 products 表数据填满。

两个变量到底是什么:

• data_placer (源选择器) — 块里写的变量名原样。我们的块是 v-for="item in list",所以这里是 list。
• data_selector (目标选择器) — 整张页面里管这数据叫的名字。一页里有两份卡片列表的话,list 会撞名,得映射成 product_list·review_list。只有一份就维持 list 也行。

简化起见,本指南两边都设 list。

接真实数据集 — 在程序构建器顶部(或侧栏)的 「数据变量 / data_vars」 区。空的就 + 添加 一行。

1. 变量名:list(要跟第 5 步的 data_selector 一致)。
2. 数据集:下拉选第 2 步的 shop。
3. 表:products。
4. WHERE(可选):空就全部。例如 price > 0。
5. LIMIT(可选):0, 20 取前 20 行。
6. ORDER BY(可选):id desc 倒序。
7. 保存。

系统内部会形成 一份 JSON(看不到但概念上是):

{"var_name":"list","dataset":{"id":42,"table_name":"products","str_limit":"0, 20","str_order":"id desc"}}

这份 JSON 就是后端渲染器取数的依据,运行时会跑 SELECT * FROM products ORDER BY id desc LIMIT 20,把结果灌进 list,接着块的 v-for 就跑起来了。

都搞完后切到程序构建器的 3) 代码预览(或 code 步骤标签),让系统把结果代码合起来。

1. 点 生成代码(同步),系统自动拼:
   • 框架 HTML 骨架 + <[slot-1]>·<[slot-2]>·… 处插入各槽块的 HTML。
   • 块里的 list → 第 5 步的 data_selector(本次还是 list)。
   • data_vars 的变量定义加进页面初始化。
2. 看下输出。v-for="item in list" 还在,页面顶部出现 list = await fetch('/api/...') 或 server-side 注入的代码,就 OK。
3. Ctrl+S 或 保存。预览面板里应该流出 products 表的真实数据卡片。看到 5~10 张(数据集真实条数)而不是 sample_data 那 2 张,就对了。
4. 最后工作区 🚀 部署(或开「保存时自动部署」),线上确认。

JSON 结构等于前端的原因 — 这一刻,页面所有动作就汇成 3 份 JSON。

• slot_info — 哪一框架 + 哪个槽装了哪个块。
• data_vars — 每个变量挂的是哪个数据集、表、条件。
• ui_info — 额外 UI 选项(本次基本是空)。

不用手写代码,只要调这 3 份 JSON 页面就重画。后续换个数据集、换个块,一张页能很快变形。开始只有一屏,但这套熟了之后会发生「做 10 屏的时间接近做 1 屏」的奇妙现象。

对简单网站来说,https://site.com/search?q=hello 这种 GET URL 一行就够了。但实战中遇到的网站,一半以上没那么简单。

• 登录后才能看到的检索结果 —— 没有会话 Cookie 就只能拿到空白页或登录页。
• POST + JSON 包体 —— 检索词不在 URL 上,藏在请求包体里:{"q":"hello","page":1,"size":20}。
• CSRF / Bearer 令牌 —— 每次请求都要带额外头一起发,否则什么都不返回。
• X-Requested-With · Referer · User-Agent —— 缺这些 AJAX 标识头时,服务器经常故意返回空响应。

这时一条条手抄头部既费时又容易出错。最快的路就是 把浏览器实际发出的请求复制成一行 cURL 命令,只把行间会变的部分抽成变量,其余原样保留。

本节要做的 —— 准备一份装着 N 个关键词的数据集(例如 keyword_list),然后调用网站搜索 API N 次,把响应整齐地堆进另一份数据集(例如 search_results)。

在 Chrome(或 Edge)中打开目标站点,像平常那样执行一次检索。

1. 按 F12 打开开发者工具,切到顶部的 Network 标签。
2. 执行检索后,请求列表会出现一堆。我们要的那条通常名字里含 search、list、query、api,响应是 JSON。
3. 点击该条,在右侧 Response 标签确认正文确实是想要的数据。
4. 对该条 右键 → Copy → Copy as cURL (bash)。即使在 Windows,bash 格式的引号兼容性最好。

剪贴板里现在是一行 curl 'https://...' -H 'Cookie: ...' -H 'Authorization: ...' --data-raw '{...}' 这样的命令。看起来很长,但 URL · Cookie · 全部头部 · 包体都包含在里面。

不要把 cURL 直接贴进解析器。先必须在 Postman(或 Insomnia / Bruno)里 把同样的请求成功发一次。这一步过不了,解析器规则也过不了。

1. 打开 Postman → 左上 Import → Raw text 标签。
2. 把剪贴板的 cURL 一行 Ctrl+V 粘上,点 Continue → Import。
3. 所有头和包体自动填好的新请求标签会打开。点右上 Send。
4. 状态 200 且正文与浏览器一致就成功。出现 401/403/302 或正文为空,按下面的清单排查。

• Cookie 过期 —— 最常见。回浏览器确认仍处于登录状态,然后重新 F12 → Copy as cURL。
• 头部漏转 —— Postman 自动转换偶尔会丢 1–2 个头。把浏览器 Network 的 Headers 面板和 Postman 的 Headers 标签对照,逐行检查。
• Referer / Origin —— 部分站点缺这两个就返回空。浏览器在发的话,加上同样的内容。

对照能跑通的 Postman 请求,把 下一次调用会变化的位置标记出来。常见候选:

• POST 包体里的检索词 —— "q":"hello" → "q":"${query}"
• 页码 / 偏移 —— "page":1 → "page":${page}(数字不带引号)
• 分类 / 过滤 —— "cat":"food" → "cat":"${category}"
• 日期范围 —— "from":"2026-04-01" → "from":"${date_from}"
• URL 路径变量 —— /api/user/12345 → /api/user/${user_id}

关键是 变量名要与你将要建的数据集列名完全相同。如果列名打算用 query · page · category,那 cURL 里也要写 ${query} · ${page} · ${category}。同名才能在下一步免去手动映射,自动接通。

命名规则 —— 解析器识别 ${名称} 模式。请只用英文字母、数字和下划线,不要空格、中文或特殊符号。

解析器会逐行读取数据集,把每行喂进 cURL 的变量位置。所以这一步要把想调用的 N 个输入组合先准备成数据集。

1. 左侧菜单 数据 > 数据集 → 右上 + 新建数据集。
2. 名字用 keyword_list 之类好记的。添加列名时,与步骤 4 标记的变量名完全一致 —— 例如 query (varchar) · page (int) · category (varchar)。
3. 添加行有两种方式 —— (a) 在 UI 里一行一行手填,(b) 在 Excel/表格里整理好,在 Cell Editor 中 粘贴 → 入库(参考单元格粘贴指南)。
4. 初次别贪多,只放 3–5 行 就进入下一步。从 100 行开始,出一次错就是 100 个错调用。

顺手把 响应存储用数据集也提前建好更稳妥。例如 search_results 表,列为 query, rank, title, url, snippet。步骤 6 要在哪里写入响应时会用到它。

到了这一步,在解析器中创建新规则,把准备好的 cURL 和数据集连接起来。

1. 左侧菜单 数据 > 解析器 → 右上 + 新规则。
2. 测试页面(基础 URL)输入框 —— 把 cURL 起首部分的端点原样填进来,例如 https://example.com/api/search。如果 URL 本身含变量,用同样的写法 ${user_id}。
3. cURL 输入框 —— 把步骤 4 已经做好变量标记的整行 cURL Ctrl+V 进去。解析器会自动拆分方法/头/Cookie/包体,并发现 ${...} 模式作为变量候选注册。
4. 选择输入数据集 —— 选步骤 5 建好的 keyword_list。变量名一致就自动映射,不一致旁边会出现映射下拉。
5. 选择响应写入数据集 —— 选 search_results。在 JSON path 输入框里指定响应 JSON 中哪条路径(例如 data.items[*])展开成一行。
6. 保存后规则就注册了。还没运行。

有两种运行模式。

• ① 直接输入 1 次试运行 —— 在规则页 ▶ 运行 旁的 变量输入 区直接填 query="北京 火锅", page=1,只调一次。响应正文预览和抽取出的结果行同屏显示。一直反复用这个模式,直到响应结构确认完。
• ② 数据集循环运行 —— 把变量输入面板切到 「从数据集取」 → 选步骤 5 的 keyword_list → 运行。进度条从 0/N 涨到 N/N,响应一行行落进 search_results。

运行中盯紧的指标 —— 错误行数(空响应、401、5xx)、响应正文样本、已写入行数。一两行失败正常,但失败率超过 50% 就立刻中止,回头检查 cURL。

定时执行 —— 规则详情的 定时 标签里可以挂每天/每小时/任意时刻自动执行。摆好关键词列表,每天新结果自动堆积,这样一个简单的工作流就完工了。

上传前,先把设计师给的文件打包成一个 zip 压缩包。打包方式直接决定服务器上解压后的路径,请遵守以下规则。

• 必须用一个顶层文件夹包起来 — 例:把图片和 css 放进 design_assets/ 文件夹,再把这个文件夹本身压成 zip。解压后会看到 /上传位置/design_assets/logo.png,保留一层文件夹名。
• 文件名和文件夹名只用英文、数字、连字符(-)、下划线(_) — 含中文或空格容易破坏 URL 引用。例:主页 Banner.png ❌ → main-banner.png ✅
• 支持格式 — .zip · .tar · .tar.gz · .tgz。一般 .zip 就够了。Windows 右键文件夹 → "压缩为 ZIP 文件";macOS 在 Finder 里右键 → "压缩"。
• 结构示例 —
  design_assets/
 ├─ images/logo.png
 ├─ images/hero.jpg
 ├─ fonts/pretendard.woff2
 └─ css/theme.css

从顶部导航或仪表盘进入服务 → 远程管理。左边是服务器列表侧栏,中间是四列的文件浏览器,底部是操作栏。

1. 在左边服务器列表里,点要上传到的域名(例如 myshop.apidealder.net)。域名前的小圆点显示当前状态。
   • 绿色圆点 — 正常,点击后立即打开文件列表。
   • 灰色圆点 — 离线。容器已停止或尚未部署。
   • 白色圆点 — 正在检查状态。
2. 如果列表为空,会看到"请先部署一台服务器"的提示。先去部署一次单文件或项目,然后再回来。
3. 选中服务器后,中间区域会展开根目录(/),看到真实的文件树。

素材要通过浏览器的 URL 加载,所以必须放在可以通过 Web 访问的"公开文件夹"下。基于单文件的服务器,一般推荐 public/assets。

• 路径栏 — 中间区域顶部的房子图标一键回到根目录;斜杠分隔的每一段都可以点,直接跳到对应位置。
• 直接输入路径 — 旁边的输入框,直接输入 /public/assets 后按 Enter,不用一层一层点进去,一步到位。
• 如果 assets 文件夹不存在 — 用底部操作栏的 [新建文件夹] 按钮建一个 assets 再进去。名字只能用英文、数字、点(.)、连字符(-)、下划线(_)。
• 移动后确认路径栏显示的是 /public/assets。这是压缩包的解压位置,放错地方就得删除重来。

路径已切到 /public/assets(或你选的任意公开文件夹)之后,点底部操作栏的 [上传压缩包] 按钮(云朵上箭头图标)。上传模态框分 3 个阶段展开。

1. 拖放区 — 把 zip 文件拖进虚线框,或点击打开文件选择对话框。支持 .zip · .tar · .tar.gz · .tgz。
2. 预览 — 模态框会画出压缩包内的文件夹/文件树,顶部显示文件名、大小、解压目标(/public/assets)。这里要目视确认外层包装是否符合预期、有没有意外混进 macOS 的 .DS_Store 之类隐藏文件。选错的话,点右上角 [x] 换文件。
3. 发送 — 点 [发送],文件会被按 1MB 切片传输,实时显示进度。网络不稳也能续传,几百 MB 的大文件也能稳定上传。
4. 传输完成后服务器自动解压,当前文件夹刷新,就能看到刚上传的 design_assets 文件夹(或 images/fonts/css 等子文件夹)。同时还会弹出完成提示。

只想上传几个零散文件?可以用旁边的 [上传文件] 按钮多选文件,直接复制到当前文件夹,不会解压。

上传的文件可以直接用已部署域名的 URL 访问。比如传到 myshop.apidealder.net 的 /public/assets/design_assets/images/logo.png,浏览器访问 https://myshop.apidealder.net/assets/design_assets/images/logo.png 就能打开。(public 是 Web 根目录,URL 里会被省略。)

接着打开单文件编辑器(服务 → 单文件),引用刚上传的素材。

• 在 HTML 标签页里插入图片 —
  <img src="/assets/design_assets/images/logo.png" alt="logo">
<img src="/assets/design_assets/images/hero.jpg">
• 在 SCSS 标签页里引用背景和字体 —
  .hero { background: url("/assets/design_assets/images/hero.jpg") center/cover; }
@font-face { font-family: 'Pretendard'; src: url("/assets/design_assets/fonts/pretendard.woff2") format('woff2'); }
• 关键规则 — 路径必须用以斜杠(/)开头的绝对路径。相对路径(../assets/...)在预览和线上可能不一致,不推荐。
• 想整体引入外部 CSS 就在 SCSS 标签页最上方加 @import url("/assets/design_assets/css/theme.css");。

引用写好后,点单文件编辑器右上的 [Run ▶] 先看预览。预览没问题再点 [Deploy 📦] 发到线上域名。

1. Run 预览 — 编辑器右侧面板实时渲染结果。确认图片能显示、字体已应用、CSS 没坏。
2. Deploy — 部署按钮会分阶段显示进度,一般 1～2 分钟就完成。完成后结果框里会出现域名链接。
3. 到线上域名确认 — 点链接在新标签里打开,或直接访问 https://域名/。建议用强制刷新(Ctrl+F5 或 Cmd+Shift+R)跳过缓存。
4. 图片不显示时,回到远程管理再核对路径。文件夹结构和预期不符的话,直接删掉那个文件夹,从第 4 步重新上传,比手动改路径快得多。

表面症状类似,真正原因千差万别。只要符合以下任一种情况,直接看服务器端的日志就是最短的路。

• 500 / 502 / 504 这类服务器错误 — 浏览器只会显示"发生了错误",真正原因只留在服务器日志里。
• 一片空白的白屏 — 多半是 PHP 致命错误把输出掐断了。日志里十有八九会有 Fatal Error 或 Parse Error。
• API 返回 400/422 但原因含糊 — 到底是哪条校验规则被触发,都记在控制器日志里。
• 后台任务(队列、调度、宏)"看似在跑却没结果" — 静默失败时,只有日志里有蛛丝马迹。

主要的日志文件:

• storage/logs/laravel.log — PHP/Laravel 的主日志。最常看。
• storage/logs/laravel-YYYY-MM-DD.log — 按天切分时会出现。
• storage/logs/worker.log 以及宏执行日志等,按功能分文件的情况。

浏览器里进入服务 → 远程管理。

1. 在左侧服务器列表里点出问题的域名。绿色圆点说明容器可达。灰色/白色说明容器在睡,等 1～2 分钟再点一次。
2. 点中间顶部工具栏的终端图标(▷_)。底部会升起终端面板。再点一次同一图标就收起。
3. 面板顶部显示当前工作目录(例如 /var/www/html),输入框光标闪动。这个光标直接连到所选服务器的 shell,敲的命令就在那台服务器上执行。
4. 先确认当前位置:
   pwd
ls
   通常会落在项目根目录(/var/www/html)。

Laravel 项目的日志都写到 storage/logs 目录。终端里切过去。

• cd storage/logs — 相对当前目录的跳转。已经在 /var/www/html 的话一行就够。
• cd /var/www/html/storage/logs — 绝对路径,无论当前在哪都能到。
• pwd — 确认当前位置是不是 /var/www/html/storage/logs。

当前工作目录终端会记住,一次 cd 之后,后续命令都按这个目录执行,不用再写路径。

另一种方法:先在文件浏览器里导航到 /storage/logs,再打开终端,路径会自动跟上。嫌敲路径麻烦时很方便。

进到目录后,先看有哪些文件、哪些最近有更新,再打开对应文件的内容。

• ls -lhrt — 按修改时间升序列出,底部就是最新的,一眼看出当前在写哪个文件。-h 显示人类可读的大小(KB/MB)。
• cat laravel.log — 整体输出。只适合小文件,几 MB 以上会淹没终端。
• tail -n 100 laravel.log — 最后 100 行,最快看到最近的错误。数字可以按需调。
• tail -f laravel.log — 实时追踪,新写入的行会立刻出现。在浏览器里复现 bug,日志就直接流到眼前。Ctrl+C 停止。
• head -n 50 laravel.log — 前 50 行,看文件顶部的启动类日志时用。
• wc -l laravel.log — 看总行数。如果有几十万行,直接跳去用 grep。

文件很长时,tail 不够用。grep 能只挑出含有指定字符串的行,是日志调试的核心工具。

• grep -i error laravel.log — 所有含 "error" 的行;-i 忽略大小写,"Error"、"ERROR"、"error" 全命中。
• grep -in "fatal\|exception" laravel.log — 含 "fatal" 或 "exception" 的行,带行号(-n)。多个关键字用 \| 做 OR。
• grep -A 5 -B 2 "SQLSTATE" laravel.log — 找含 SQLSTATE 的行,同时打印前 2 行(-B 2)、后 5 行(-A 5)的上下文。想顺便看异常的调用栈时最好用。
• grep "2026-04-25 15:4" laravel.log — 限定某个时间段(15:40 这段)。配合第 1 步记下的时间窗,范围一下就小了。
• grep -c "production.ERROR" laravel.log — 只计数。回答"这个错误出现多频繁"。
• tail -f laravel.log | grep -i error — 实时追踪 + 过滤,只有含 error 的行才会在终端里显示。

常用排查流程 — 先 grep -i error 看整体 → 挑一条显眼的消息,用 grep -A 10 "那条消息" 看上下文 → 把里面出现的文件路径和行号记下来。

grep 捞出来的错误行通常会带文件路径和行号(如 /var/www/html/app/Services/Order.php:127),按这个信息直接去改最快。

1. 收起终端,在文件浏览器的路径输入框粘贴 /var/www/html/app/Services 然后 Enter。
2. 双击目标文件打开带语法高亮的代码编辑器。按行号改好,点 [保存],服务器立即生效(不用重新部署)。
3. 再次展开终端,用 tail -f /var/www/html/storage/logs/laravel.log 开实时追踪,然后在浏览器里重现一次问题动作。
4. 看看同样的错误还会不会冒出来;不出就用 Ctrl+C 停掉 tail,完工。如果出了新错误,回第 5 步继续缩小范围。

临时加详细日志的方法 — 在可疑代码处加一行 \Log::info('[debug] ' . json_encode($variable)); 保存 → 重现 → grep "[debug]" laravel.log 直接看值 → 弄清原因后把这行 Log::info() 删除,这样最安全。

现场开发团队几乎都遵循这个流程。改动小、每段都验证。一次性丢到生产,就是一次性出事。

• 本地很快 —— 保存→刷新一秒。最先确认改动是否符合意图的地方。
• Stage的域名、数据库、流量形态接近生产。是抓「我电脑上能跑、服务器上不行」类问题的最后一道网。
• 生产是真实用户能看到的地方。在这里第一次发现问题,马上变成投诉。

今天我们把这三段从头到尾走一遍。具体的开发动作通过在 VS Code 中用自然语言找 Claude 或 Codex 帮忙完成。人的角色不再是逐行敲代码,而是把意图说清楚、验证结果、决定能不能往下推。

工具熟练度越高,后面的活越快。这一步只需要5 分钟一次性投入。

1. 在 QuickStart 网页打开自己项目的下载包,解压后用 VS Code [File > Open Folder]。
2. 底部QUICKSTART面板会自动出现,通过 .env 中的 fingerprint 直接连服务器,不需要登录表单。
3. UTIL 标签底部点 [🚀 SMART SETUP],会自动跑 composer dump-autoload → npm install → vite build。完成后 vite dev 和 PHP 内置服务器同时在跑。

这时浏览器打开 http://localhost:<port>,自己的项目原样可用。这就是起跑线。

两条路,通常一起用。

• ① VS Code 聊天面板 + MCP —— 给 Claude(或 Cursor、Copilot Chat、Codex CLI)接上 MCP 服务器,然后在聊天里写 「在 users 表加一个 phone 列,注册表单也多一行」 这样的自然语言。AI 自己写 SQL、改 blade/vue/scss、跑构建,一条龙。
• ② UTIL 标签的 AI 按钮 —— 选中代码后点 UTIL → AI 组里的 [CODE REVIEW] · [REFACTOR] · [EXPLAIN] · [i18n TS],会生成包含项目上下文的提示词。把它整段贴给 Claude/Codex,质量会上一个台阶。

请求写得好的关键 —— 把「做什么、放在哪、什么形式」三件事说清楚。例:「在 /admin/users 页面把 phone 列放到 email 正后面,空值时显示 \"-\"。」这样 AI 不会瞎走。

AI 一保存,vite dev 立刻热重载浏览器。.blade.php、.scss、.vue、.js 几乎都是保存即生效;PHP 后端的改动 php artisan serve 也直接接住。

1. 用浏览器看实际界面 —— 位置对不对、行为对不对、形态对不对。
2. 顺手扫一眼 F12 控制台,有没有红色报错。控制台干净再往下走。
3. UTIL → SYSTEM → [CLEAN CACHE] 清一次 Laravel 缓存,view/route 改动会更干净生效。

不对就再短句让 AI 改 —— 「刚刚那个 phone 列,挪到邮编上面」 —— 然后再刷新。状态好的时候,这个循环 1 分钟一圈是常速。

本地过了就推到 stage。

1. 切到底部的 QS DEPLOY 标签。
2. 左侧栏 Source = L(Local),Destination = stage 勾上。
3. 对每个节点点一下 [CONNECT] 和 [TEST CONFIG],确认真的连得上。出红点就回去查那个节点的 .env(host/port/DB 账号)。
4. 点中间的 [SRC → DST]。瞄一眼右侧的 [Save on Deploy] 是否 ON —— 开着的话部署前会自动保存所有打开的文件。
5. 日志区会实时打印 代码 + 资产(图片/构建产物) + 数据库结构与数据一并流向 stage 的过程。

完成后用浏览器打开 stage 域名,不只看代码改动,还要确认新加的 phone 列有没有进入 stage 的数据库。

Stage 是生产的镜子。仅域名不同,代码和数据库就是要上生产的样子。

• 用真实的 stage 域名访问,自己再用一遍。本地看不出的缓存、CDN、会话问题往往在这里现形。
• 把链接发给别人过一眼。你写的人看不到的,别人一眼就看到。
• QS DEPLOY 的 [DIFF] 比对 stage ↔ 本地的差异。有差异说明有人手动改过 stage —— 上生产前先理干净。
• [BROWSER] 直接打开 stage 服务器上的实际文件树,可疑的文件可以现场翻。

抓到回归了 —— 回本地让 AI 再改 → 步骤 4 → 通过再回步骤 5。在这里多走一圈的代价比一次生产事故便宜得多。

Stage 通过就到最后。生产部署的操作和步骤 5 一样,区别在于真实用户立刻就能看到。

1. QS DEPLOY 选 Source = stage(或同代码的 L),Destination = main(生产节点)。
2. 再确认一次 [Save on Deploy] 是 ON。平时一直开着是更稳的默认。
3. 点 [SRC → DST]。盯日志直到结束 —— 出现 5xx 或红字立刻中止。
4. 结束后打开生产域名,把新功能再走一遍,顺便把没动过的核心流程(登录、结账等)也走一下,确保还在工作。
5. 有问题就用 [SWITCH] 把 Source/Destination 互换,把上一份 stage 的状态推回生产 —— 这就是快速回滚的路径。

到这里就完成一整圈 —— VS Code → Claude/Codex(MCP) → 本地 → Stage → 生产。以后的改动只是把同一条路再走一次,而且会越走越快。