AI Vibe Coding | AI能力评估提示词参考

一、模型能力评估

评估 AI 编码能力时，最容易走偏的做法是看代码量、看语法是否漂亮、看能否跑通一个 Demo。Vibe Coding 的真实风险不在于模型写不出代码，而在于它写出的代码看起来对、实际上不能用。

二、十大评估维度

序号	维度	考察内容	典型负分信号
1	指令理解	是否读懂限定词、约束与否定条件	把「建议范围」当作硬约束；漏掉「不依赖任何外部库」
2	约束遵循	是否严格遵守技术约束	擅自引入 React；用「其余代码同上」偷懒
3	推理正确性	数学、算法与逻辑是否成立	最坏情况建模错误；差异算法退化为逐行比较
4	技术选型	是否选定合适且自洽的技术路径	SVG 内嵌 Canvas；用观察者模式驱动动画循环
5	视觉还原	设计规范能否落实为具体数值	只写「深色科技风」而硬编码颜色值
6	交互与状态	状态机与事件闭环是否完整	切换模式残留预览线；投喂后金鱼无法回到自由游动
7	工程完整度	代码是否完整、模块划分是否清晰	函数未实现；注释分区混乱；单文件冗长且无结构
8	数据与持久化	数据结构、序列化与状态恢复是否正确	GeoJSON 与本地存储的坐标顺序混用
9	健壮性与容错	边界、空态与异常分支是否覆盖	未配置密钥直接白屏；非法 JSON 直接抛异常
10	交付规范	是否遵循约定的输出结构	只给代码；只给思路不给实现

三、评分标准

采用 0 到 5 分制，每个维度独立打分，最后加权汇总。

分值	判定标准
5	一次通过，双击即用，表现超出预期
4	基本可用，仅需极轻微微调，例如调整配色与间距
3	主体正确，但需局部修补，例如补齐一个函数、修正一处逻辑
2	结构已经成型，但核心功能缺失或运行报错，需要较大返工
1	无法运行，或明显偏离需求
0	未理解需求，交付的是伪代码式的占位产物

加权建议：推理正确性 15%，指令理解 12%，约束遵循 12%，工程完整度 12%，交互与状态 12%，视觉还原 10%，技术选型 8%，数据与持久化 8%，健壮性 7%，交付规范 4%。

这里需要设定一条硬性红线：只要产物中出现省略代码、占位符、功能未实现、控制台报错或白屏中的任意一项，总体评级直接封顶为 2 分。这不是苛求，而是因为上述任何一项都直接否定了 Vibe Coding 的基本前提------交付者不必读代码就能用。一旦需要逐行阅读才能判断代码是否写完，成本就已经超过自己写。

四、六份试题的能力映射

试题	难度	类型	主要考察维度	核心判别点
鹈鹕测试	入门	极简生成	指令理解、技术选型、图形动画	一句话需求下能否自选合理方案；动画是否物理自洽
糖果取数	入门	纯推理	推理正确性	是否按最坏情况建模；答案是否为 21；推导是否严谨
金鱼池塘	入门	交互动画	交互与状态、动效实现	自然游动路径；投喂、觅食、复位的状态闭环是否完整
文本差异对比	进阶	经典前端	推理正确性、算法实现	差异算法选择、行级对齐、滚动同步、统计计数是否准确
点线面标绘	高阶	复杂工程	状态机、地理数据规范、视觉还原、持久化	单一模式状态机、遮罩挖洞、坐标顺序、CSS 变量化
轻量级API调试	高阶	复杂工程	HTTP 语义、精度处理、双主题体系	JSON 默认格式化、大整数精度、CORS 提示、持久化

五、分项评估要点

5.1 鹈鹕测试：考察自主设计能力

加分项。能明确选定 SVG 作为实现方案并说明取舍理由；车轮转动与车身位移在数学上同步，即位移与转角成正比；交代了帧率与循环方式；单文件双击可直接运行。

减分项。引入 Three.js 或 Canvas 等重型依赖；交付的是静态图而非动画；用 CSS 关键帧时把车轮与身体解耦，导致车轮空转而身体不位移。

追问点。问模型为什么选 SVG 而不是 Canvas。能答出图形元素数量少、需要缩放不失真、纯声明式即可实现这几条，说明它确实做了方案权衡，而不是随手默认。

5.2 糖果取数：考察最坏情况建模

加分项。明确识别出这是最坏情况问题而非期望值问题；采用「构造不满足条件的最大取数集合」反向建模；四类冲突组合逐一排除并取最大值，得到 21。

减分项。给出 27、29 这类数字；用平均值或概率思路作答；只给结论不给推导过程。

追问点。询问模型是否忽略了手感条件。

5.3 金鱼池塘：考察状态闭环

加分项。游动轨迹使用贝塞尔曲线或正弦波动而非直线；速度带有快慢变化与偶发停顿；尾部摆动具有独立相位；投喂包含抛物线下落、水花、停留渐隐的完整过程；抢食存在到达时差；进食结束后回到自由游动状态。

减分项。金鱼只会朝目标直线移动；饲料会自动消失；投喂之后金鱼状态无法复位；多个计时器叠加导致动画掉帧。

追问点。问模型窗口尺寸变化时池塘与金鱼如何自适应。合格答案应涉及坐标系换算与边界约束，而不是简单地对整个画布做缩放。

5.4 文本差异对比：考察算法严谨性

加分项。采用 LCS 或 Myers 算法而非逐行比较；两侧行号严格对齐；滚动双向同步；新增、删除、修改三种高亮区分正确；统计数字与实际高亮条目数一致。

减分项。用字符串包含判断来判定差异；只有「变了」与「没变」两态而无行级对齐；统计数字写死或与视图不一致。

追问点。问模型当整段文本都被替换时界面是否仍然可读。这道追问考察的是模型有没有考虑过最极端的差异形态，而不是只在中位数样例上做过验证。

5.5 点线面标绘：考察复杂工程掌控力

加分项。严格执行单一模式状态机，并在切换时通过统一入口清理上一模式的临时状态；省外遮罩采用外环挖洞而非图片裁剪；正确区分了 GeoJSON 使用经度在前、本地存储使用纬度在前这一顺序差异；所有颜色取值走 CSS 变量；渲染完成后通过边界计算定位到目标区域；模式条实时显示已添加顶点数；顶点数量不足时按钮正确置为禁用；代码按约定的分区注释组织。

减分项。多模式并存导致预览线残留；遮罩层把整个地图一并盖住；坐标顺序写反；刷新后恢复数据时主键冲突；用打印日志代替实际实现。

追问点。问模型在绘制多边形的中途切换到其他模式时，上一模式的预览线会被如何处理。这是整套试题中最关键的状态机追问，也是区分「读过状态机设计」与「知道状态机设计」的试金石。

5.6 轻量级API调试：考察工程细节与降级能力

加分项。JSON 响应打开即为格式化、高亮且可逐层折叠的视图，而非压缩成一行；超过双精度整数范围的大整数不丢失精度，或提示用户查看原始文本；非法 JSON 在输入框下方内联报错而不弹窗打断；网络错误、超时与跨域失败分别给出明确的中文提示，跨域场景提示浏览器同源策略限制；支持快捷键发送；历史记录、收藏、环境变量与主题全部落盘持久化；亮暗两套主题的颜色全部来自 CSS 变量。

减分项。响应默认未做格式化；大整数被静默改写；所有错误一律使用弹窗；跨域错误显示英文原始信息；切换主题只改背景不改文字，导致可读性下降。

追问点。问模型如果响应体中含有二十位精度的编号字段该如何处理。优秀答案会区分展示层保留原始文本与解析层改用大整数类型两种处理，而不是笼统地回答一句「用 JSON.parse 就行」。

六、提示词原文

6.1 鹈鹕测试

创建一个HTML，内容是SVG绘制一个鹈鹕骑自行车的2D动画

6.2 求双味异形糖果最少取数

在一个黑色的袋子里放有三种口味的糖果，每种糖果有两种不同的形状（圆形和五角星形，不同的形状靠手感可以分辨）。现已知不同口味的糖和不同形状的数量统计如下表。参赛者需要在活动前决定摸出的糖果数目，那么，最少取出多少个糖果才能保证手中同时拥有不同形状的苹果味和桃子味的糖？（同时手中有圆形苹果味匹配五角星桃子味糖果，或者有圆形桃子味匹配五角星苹果味糖果都满足要求）
| 形状 | 苹果味 | 桃子味 | 西瓜味 |
| 圆形 | 7 | 9 | 8 |
| 五角星形 | 7 | 6 | 4 |

6.3 金鱼池塘交互

请创建一个单文件 HTML 页面，实现一个可交互的小池塘场景。具体要求如下：
1. 池塘与场景：绘制一个带渐变水面、岸边装饰和简单光影的池塘背景，整体风格清新可爱。
2. 金鱼系统：
- 支持在页面加载时或通过输入框自定义金鱼数量（建议范围 1--20 条）。
- 每条金鱼具有随机的颜色、大小、初始位置、游动速度和方向。
- 默认状态下金鱼在池塘内自由游动，运动轨迹应模拟自然游动效果：使用平滑的贝塞尔曲线或正弦波动路径，避免直线生硬移动；游动时尾部或身体有轻微摆动动画；速度有快慢变化，偶尔停顿再继续。
3. 投喂交互：
- 提供一个"投喂"按钮，点击后生成若干饲料颗粒。
- 鼠标点击池塘中任意位置时，饲料从水面落入该位置（带抛物线落入动画和水花效果）。
- 落水后饲料在该位置停留一段时间后逐渐消失。
4. 金鱼觅食行为：
- 饲料落入后，附近的金鱼会改变游动方向，自然地向饲料位置游动并"吃掉"饲料。
- 多条金鱼可能出现抢食行为，到达时间略有差异。
- 吃完饲料后金鱼恢复自由游动状态。
5. 视觉与体验：动画使用 CSS 或 Canvas 实现皆可，确保在浏览器中流畅运行，响应式布局适配不同窗口大小。

6.4 文本差异对比

请开发一个"文本内容差异对比"网页，使用纯 HTML、CSS 和 JavaScript 实现，不依赖任何外部库。具体要求如下：
1. 页面提供两个文本输入区域，用户可分别粘贴或输入原始文本和修改后的文本；
2. 支持点击"对比"按钮手动触发对比，或在输入时实时生成差异对比结果；
3. 采用左右分栏的逐行对照视图展示差异，两侧显示对齐的行号，滚动同步跟随，交互效果可参考 VSCode 的差异对比功能；
4. 使用不同颜色高亮显示新增（绿色）、删除（红色）和修改（黄色）的内容；
5. 页面顶部显示对比统计信息，包括总行数、新增行数、删除行数和修改行数；
6. 采用响应式布局，确保页面在桌面端和移动端均能正常显示。

6.5 点线面标绘

请你按照以下要求完成任务：

# 角色
你是一名资深前端工程师，精通 Leaflet 地图框架、原生 JavaScript 状态机设计与 Web 地图数据规范（GeoJSON / WMTS / localStorage 持久化），并具备成熟的深色科技风界面设计能力。

# 任务
请用单个 HTML 文件（HTML + CSS + 原生 JS，不依赖任何构建工具）实现一个「地图标绘工具」：基于 Leaflet + 天地图服务，支持在地图上绘制**点位 / 线段 / 多边形**三类图形，支持绘制、编辑顶点、整体移动、删除、列表联动定位、实时 GeoJSON 导出、localStorage 本地持久化，并以「浙江省范围高亮 + 省外深色遮罩」作为地理底图氛围。

# 技术约束
1. 输出为单个 `.html` 文件，双击即可在浏览器运行；第三方库一律走 CDN 并注明用途：
   - Leaflet 1.9.4（CSS + JS）：`https://unpkg.com/leaflet@1.9.4/dist/leaflet.css` 与 `https://unpkg.com/leaflet@1.9.4/dist/leaflet.js`
   - 字体：`https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap`
   - 图标：`https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css`
2. 不引入 Vue / React / jQuery / 构建工具；纯原生 JS，ES5 风格函数写法（`function` + `var`）以保证最大兼容性。
3. 代码按分区注释组织：`// ==== 存储键名 / 全局状态 / Token 管理 / 地图初始化 / 底图切换 / 遮罩渲染 / 模式管理 / 点位 / 线段 / 多边形 / GeoJSON 输出 / 数据持久化 / Toast / 启动`。
4. **不得省略任何代码**，不要出现 `// 其余代码同上` 之类的占位；所有函数需完整实现。
5. 所有颜色、圆角、阴影、间距必须走 `:root` CSS 变量，禁止在组件里硬编码颜色值。
6. 全局仅允许存在**一个**交互模式（`mode`），任何新操作必须先清理上一个模式的临时状态。

# 视觉设计规范（重点，必须严格执行）

## 1. 主题：深色科技风（薄荷绿主色 + 天蓝辅色）
在 `:root` 中定义以下 CSS 变量，命名与取值尽量贴近：

背景层级（去纯黑，靠色阶拉开层次）：
- `--bg:#0c0e14`（页面底色）、`--bg2:#131722`（侧栏/顶栏）、`--bg3:#1a1f2e`（卡片）、`--bg4:#242a3d`（控件底）、`--bg-hover:#2c3346`（hover）

文字层级：`--fg:#e8ecf5`（主文）、`--fg2:#9aa3b8`（次要）、`--fg3:#6b7591`（弱化/标签）

主色（薄荷绿）：`--accent:#34d399`、`--accent-strong:#10b981`、`--accent-dim:rgba(52,211,153,.12)`、`--accent-glow:rgba(52,211,153,.30)`、`--accent-ring:rgba(52,211,153,.35)`

辅色（天蓝）：`--blue:#60a5fa`、`--blue-dim:rgba(96,165,250,.14)`、`--blue-ring:rgba(96,165,250,.35)`

警示/危险：`--warn:#fbbf24`（+`--warn-dim`/`--warn-ring`）、`--danger:#f87171`（+`--danger-dim`/`--danger-ring`）

描边与形状：`--border:#262d3f`、`--border-soft:#1f2533`、`--radius:10px`、`--radius-sm:6px`、`--radius-lg:14px`
阴影：`--shadow-sm:0 1px 2px rgba(0,0,0,.25)`、`--shadow-md:0 4px 12px rgba(0,0,0,.30)`、`--shadow-lg:0 12px 36px rgba(0,0,0,.45)`
间距刻度：`--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;`（所有 padding/gap 必须落在这套刻度上）

## 2. 字体与排版
- 正文：`'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`；开启 `font-feature-settings:"tnum" 1` 与 `-webkit-font-smoothing:antialiased`。
- 坐标 / 数字 / 代码区统一等宽：`'JetBrains Mono','SF Mono',Menlo,Consolas,monospace`。
- 字号阶梯：10 / 10.5 / 11 / 11.5 / 12 / 12.5 / 13 / 14 / 15 / 17px；标题字重 600，列表项名 500。
- 区块标签（`.sb-label`、`.list-title`）：`10.5px` + `font-weight:600` + `text-transform:uppercase` + `letter-spacing:1.6px` + 颜色 `--fg3`，并用 `::before` 画一根 `3px × 11px` 的主色竖条（`border-radius:2px`）作为前缀。
- 全局细滚动条：`::-webkit-scrollbar` 宽 6px，滑块 `--border`，hover 转 `--bg-hover`。

## 3. 布局骨架
```
body (flex column, height 100vh, overflow hidden)
├── header  高度 56px，flex-shrink 0，底部 1px 边框，背景 180deg 渐变 var(--bg2)→rgba(19,23,34,.92)
│            左：34×34 圆角 9px 的渐变 LOGO（主色→天蓝）+ 标题 15px/600 + 副标题 11.5px(--fg2)
│            右（margin-left:auto）：Esc 提示胶囊（kbd 样式）+ 34×34 图标按钮（Token 设置）
└── main  (flex row, flex 1)
    ├── aside.sidebar  宽 340px 固定，右侧 1px 边框，flex column
    │   ├── 区块「标绘工具」：2 列按钮网格，gap 8px
    │   ├── 区块（flex:1, overflow hidden）→ .list-scroll 内含 3 个列表分组（点位/线段/多边形）
    │   └── 区块「GeoJSON 数据」：flex-shrink 0，max-height 220px，顶部渐变遮罩
    └── div.map-wrap  (flex 1, position relative)
        └── #map + 模式条 + 加载条 + 底图切换 + 坐标显示 + 未配置 Token 占位层
```
响应式：`@media(max-width:768px)` 侧栏收窄至 280px、顶栏 padding 改 14px、副标题隐藏。

## 4. 组件细节（尺寸必须还原）

**工具按钮 `.tool-btn`**：flex 居中，`gap 7px`，`padding 10px`，`--bg3` 底 + 1px `--border` + `--radius`，字号 12.5px/500；图标 13px。
- hover：边框转 `--accent-ring`、底转 `--bg-hover`、图标 `scale(1.08)`；
- `.active`：边框 `--accent`、底为 `--accent-dim` 渐变、文字与图标转 `--accent`、外发光 `0 0 0 1px var(--accent-ring), 0 6px 18px var(--accent-glow)`；
- `.danger-btn`（取消）常态字色 `--danger`，hover 转 danger 变体；
- `.warn-btn`（完成）常态字色 `--warn`，`.active` 时实心 `--warn→#f59e0b` 渐变底、深色字；
- `:disabled` → `opacity:.35` + `pointer-events:none`；
- `.full` → `grid-column:1/-1`。

**列表项 `.p-item`**：卡片式，`--bg3→rgba(26,31,46,.7)` 渐变底，1px 边框，`--radius`，`padding 10px 12px`，`margin-bottom 6px`，flex 居中 `gap 10px`，`overflow hidden`。
- 左侧 `::before` 2px 竖条（透明 → 选中时 `--accent`）；
- hover：底色转 `--bg-hover` 并 `translateX(2px)`；
- `.selected`：边框 `--accent-ring`、底色转 `--accent-dim` 渐变 + `inset 0 0 0 1px var(--accent-ring)`；
- `.p-item-icon` 28×28、`--radius-sm`(7px) 圆角，按类型上色：点位=绿渐变+accent 环，线段=蓝，多边形=黄；
- `.p-item-name` 12.5px/500，超长省略号；`.p-item-coord` 10.5px 等宽 `--fg3`；
- `.act-btn` 26×26 透明底圆形按钮，图标 10.5px，hover 放大 1.08 并染主色；`.del` hover 染危险色；`.moving` 常亮主色。

**空状态 `.empty-hint`**：虚线边框（`1px dashed var(--border)`）、`--radius`、`rgba(26,31,46,.3)` 底、居中、`--fg3`、11.5px、行高 1.7；顶部一个 22px 透明感图标，下方一句引导文案。

**GeoJSON 面板**：标题同列表标题样式；输出框 `.geo-out` 等宽 10.5px、字色 `--accent`、`--bg` 底、1px 边框、`--radius`、`padding 10px 12px`、`white-space:pre-wrap`、`word-break:break-all`、`line-height:1.65`、`min-height:54px`、`flex:1`、`overflow-y:auto`；
- `.copy-btn` 通栏，主色实心渐变（`--accent→--accent-strong`）、深色字 `#0c0e14`、加粗、发光；
- `.clear-btn` 通栏描边按钮，hover 转危险色。

**地图浮层**（均 `position:absolute`，`z-index:800`，`backdrop-filter:blur(10~12px)`）：
- **模式条 `.mode-bar`**：`top:14px; left:50%; translateX(-50%)`，胶囊 `border-radius:22px`，`padding 7px 18px`，字色 `--accent`，边框 `--accent-ring`，左端一个 7px 主色圆点做 `blink` 呼吸动画（1.4s），出现时 `slideDown` 入场动画（.35s，cubic-bezier(.2,.7,.2,1)）；
- **加载条 `.loading-bar`**：样式同上但用 `--warn` 色系与文字；
- **底图切换 `.basemap-swap`**：`bottom:30px; right:14px`，竖排两个 36×36 按钮（`--radius` 9px），`.active` 态主色描边 + 发光；
- **坐标显示 `.coord-display`**：`bottom:30px; left:14px`，等宽 10.5px，深色半透明玻璃底 + 1px 边框 + 9px 圆角。

**地图标记**（全部用 `L.divIcon` 自绘，不用默认图标）：
- 点位 `.mk-pin`：30×30，`border-radius:50% 50% 50% 0` + `rotate(-45deg)` 形成水滴，主色渐变 + 2.5px 白色描边 + 投影；`::after` 为 9px 白色圆点；移动中 `.moving-pin` 转琥珀渐变并 `pulse` 动画；
- 顶点手柄 `.vtx-handle`：13×13 圆形，主色渐变 + 2px 白描边 + 光环阴影，`cursor:grab`，hover `scale(1.18)`；容器 `background:none!important;border:none!important`。

**Leaflet 控件暗色化**（必须覆写）：Popup 内容容器 `background:var(--bg3)`、1px `--border`、10px 圆角、`padding:0`，内容区 `margin:12px 14px`，tip 同步改色，关闭按钮 18px `--fg2`；Popup 内自定义 `.pop-title` 13px/600、`.pop-coord` 等宽 11px `--accent`、`.pop-btn` 6px 圆角小按钮（`.move` 琥珀底深字、`.del` 危险底白字）；缩放控件 `border:none`、按钮 34×34、`background:rgba(26,31,46,.92)`、1px 边框、10px 圆角，hover 染主色。

**Toast `.toast-box`**：`position:fixed; top:72px; right:18px`，竖向 flex、gap 8px、`pointer-events:none`；单条 toast 为半透明深色玻璃卡片（10px 16px 内边距、10px 圆角、10px 阴影），左侧 3px 色条区分类型：`ok`→主色、`err`→危险色、`inf`→警告色，图标分别为 `fa-check-circle` / `fa-exclamation-circle` / `fa-info-circle`；入场 `tIn`（右侧滑入 .3s），2.6s 后淡出移除。

**模态框 `.modal-overlay`**：`inset:0` 全屏、`rgba(8,10,16,.72)` + `blur(6px)` 背景、`fadeIn` 入场；`.modal-card` 宽 440px（`max-width:92vw`）、`padding 30px 34px`、14px 圆角、`--shadow-lg`、`modalIn` 上浮缩放入场；标题 17px/600，正文 12.5px `--fg2` 行高 1.65；输入框全宽、`padding 11px 14px`、深底 + 1px 边框、等宽 13px、focus 时边框转主色 + `box-shadow 0 0 0 3px var(--accent-dim)`；底部按钮区，主按钮为主色渐变实心，另有 `.btn-danger`（危险渐变）与 `.btn-cancel`（描边）两种修饰。

# 功能需求

## 1. 天地图 Token 管理（首屏流程）
- localStorage 键 `tianditu_token` 保存 Token。
- 页面加载时若有 Token → 隐藏弹窗并直接初始化地图；若无 Token → 弹出「天地图 Token 设置」模态框，同时地图区覆盖一层占位层（`position:absolute; inset:0; z-index:900`，居中地球图标 + 文案「请先配置天地图 Token」）。
- 弹窗内容：标题带钥匙图标；说明文案内嵌「天地图控制台」链接 `https://console.tianditu.gov.cn/api/key`（`target="_blank"`）；输入框 placeholder「请粘贴您的天地图 Token...」；底部「确认并加载地图」主按钮 + 右侧「前往注册 →」链接；输入框下方有 `.modal-status` 状态行（成功 `--accent`，失败 `--danger`）。
- Token 为空时在状态行给出「Token 不能为空」并阻断。
- 顶栏钥匙图标按钮可随时再次打开该弹窗；已有地图时改 Token → 重建瓦片图层并提示「Token 已更新」。

## 2. 底图与瓦片
天地图 WMTS 瓦片，`subdomains: ['0','1','2','3','4','5','6','7']`，`maxZoom: 18`，四层分别创建：
- 影像底图 `img_w`（LAYER=img）+ 影像注记 `cia_w`（LAYER=cia）
- 矢量底图 `vec_w`（LAYER=vec）+ 矢量注记 `cva_w`（LAYER=cva）

统一模板：`https://t{s}.tianditu.gov.cn/{layer}_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER={layer}&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk={token}`

- 初始为影像底图；右下角按钮可在「影像 / 矢量」间切换，切换时移除旧的两个图层、添加新的一对，并同步 `.active` 高亮与图标（卫星 / 地图）。
- 地图初始化参数：`center:[29.85, 120.6]`、`zoom:8`、`doubleClickZoom:false`、`zoomControl:false`、`attributionControl:false`；缩放控件手动 `L.control.zoom({position:'topright'})` 添加。

## 3. 浙江省边界遮罩与高亮（特色功能）
- 数据源：`https://geo.datav.aliyun.com/areas_v3/bound/330000_full.json`（阿里云 DataV 行政区划 GeoJSON，浙江省含各区县 Feature）。
- 缓存：成功拉取后写入 localStorage 键 `zj_border_geojson`；下次启动优先读缓存，解析失败则清除缓存重新拉取。加载期间显示顶部加载条「正在加载浙江省边界数据...」，成功提示「浙江省边界数据加载完成」，缓存命中提示「浙江省边界已从缓存加载」，失败提示「浙江省边界数据加载失败，请检查网络后刷新」并 `console.error`。
- 渲染原理（必须按此实现）：创建一个覆盖全球的大矩形外环 `[[-90,-180],[90,-180],[90,180],[-90,180]]`，把浙江省所有区县的外环作为「洞」挖进去 ------ 即 `L.polygon([outerRing].concat(allHoles))`。这样省外被遮罩盖住、省内透亮。
  - 遮罩层样式：`color:'rgba(0,214,143,0.30)'`、`weight:1.2`、`fillColor:'#080a10'`、`fillOpacity:0.7`、`interactive:false`；
  - 省内高亮层：`L.geoJSON` 填充 `#00d68f`、透明度 0.04、无描边；
  - 省界线层：`L.geoJSON` 描边 `rgba(0,214,143,0.25)`、`weight:1.2`、无填充。
- 三层统一放入专用 pane：`map.createPane('maskPane')`、`zIndex = 390`（瓦片之上、overlay 之下）、`pointerEvents='none'`；并用 `L.layerGroup()` 统一管理。
- 坐标转换：GeoJSON 为 `[lng, lat]`，Leaflet 为 `[lat, lng]`，提取外环时必须互换；需兼容 `Polygon` / `MultiPolygon` / `GeometryCollection` 三种 geometry 结构。
- 渲染完成后 `map.fitBounds(bounds, {padding:[20,20], maxZoom:9})` 定位到浙江省范围。

## 4. 模式状态机（核心）
全局单一 `mode`，取值：`'none' | 'addMarker' | 'addPolyline' | 'addPolygon' | 'moveMarker' | 'editPolygon' | 'movePolygon' | 'editPolyline' | 'movePolyline'`。
- `setMode(m)`：先执行 `cleanupMode()` 清理上一模式的所有临时状态（撤销绘制中的折点/预览线/橡皮筋/手柄、关闭拖拽、解绑事件、恢复 `map.dragging.enable()`），再赋值并刷新 UI。
- 处于绘制类模式时，地图容器光标变为 `crosshair`；其他模式恢复默认。
- 模式条文案随模式变化，且绘制中实时显示已添加的折点/顶点数量：
  - addMarker →「点击地图添加点位」
  - addPolyline →「点击地图添加线段折点（已添加 N 个）」
  - addPolygon →「点击地图添加多边形顶点（已添加 N 个）」
  - moveMarker →「拖拽标记移动点位位置，完成后点击「完成移动」」
  - editPolygon →「拖拽绿色手柄编辑多边形顶点」
  - movePolygon →「拖拽多边形整体移动」
  - editPolyline →「拖拽绿色手柄编辑线段折点」
  - movePolyline →「拖拽线段整体移动」
- 「完成操作」按钮仅在绘制/编辑/移动类模式下显示（`addMarker` 模式下不显示），按钮文案与禁用状态随模式切换：
  - addPolygon →「完成绘制」，顶点数 < 3 时禁用；
  - addPolyline →「完成绘制」，折点数 < 2 时禁用；
  - moveMarker →「完成移动」；editPolygon / editPolyline →「完成编辑」；movePolygon / movePolyline →「完成移动」。
- 「取消操作」按钮在 `mode !== 'none'` 时显示。`Esc` 键全局触发「取消当前操作」。
- 三个「添加」按钮在 `mode !== 'none'` 时禁用（避免模式冲突）。
- 点击同一「添加」按钮两次 = 切换退出该模式。

## 5. 点位（Point）
- 添加：进入 `addMarker` 模式后单击地图 → 在该位置创建 marker（`L.divIcon` 水滴标记，`iconSize:[28,28]`、`iconAnchor:[14,28]`、`popupAnchor:[0,-30]`），默认命名「点位 N」（N 为自增 id），写入 `points` 数组，刷新列表 + GeoJSON + 持久化，并 Toast「已添加 点位 N」。
- 点击 marker 打开 Popup：标题（名称）+ 坐标（等宽 11px 主色，`lat.toFixed(6), lng.toFixed(6)`）+ 两个按钮：「移动位置」（琥珀）、「删除」（危险）。处于任意非 `none` 模式时不弹 Popup。
- 移动：`startMovePoint(id)` → 进入 `moveMarker` 模式、关闭 Popup、开启 marker 拖拽（`dragging.enable()`）、图标切换为 `.moving-pin`（琥珀 + 脉冲）、绑定 `drag`/`dragend` 事件；拖拽过程中实时刷新列表项里的坐标文本（通过 `id="pt-coord-{id}"` 定位 DOM），`dragend` 时更新 GeoJSON 并持久化。
  - 「完成移动」→ 关闭拖拽、还原图标、解绑事件、退出模式，Toast「点位移动完成」。
  - 「取消移动」→ **从 localStorage 中读取该点位上次保存的坐标并复位**，关闭拖拽、还原图标、退出模式，Toast「已取消移动，位置已恢复」。
- 删除：`removePoint(id)` → 关闭 Popup、移除图层、移出数组、刷新 UI 与持久化，Toast「已移除」。
- 列表定位：`flyToPoint(id)` → `map.flyTo(latlng, max(currentZoom, 14), {duration:0.6})` 并打开 Popup。

## 6. 线段（LineString）
- 绘制：`addPolyline` 模式下单击地图逐点添加折点；每点生成一个不可交互的顶点手柄（`.vtx-handle`，13×13）放入编辑图层；折点数 ≥ 2 时显示预览线（`#00d68f`、`weight:2`、`dashArray:'6,4'`、`opacity:.8`）；鼠标移动时从最后一个折点到光标绘制橡皮筋预览线（`weight:1.5`、`dashArray:'4,4'`、`opacity:.5`）。「完成绘制」后生成正式线段（**`#4dabf7`、`weight:3`、`opacity:.95`**，命名「线段 N」）。
- 编辑折点：列表项的「编辑折点」按钮进入 `editPolyline` 模式 → 线段变主色 `#00d68f`，每个折点生成可拖拽手柄（14×14，`zIndexOffset:1000`）放入编辑图层；拖拽时实时 `setLatLngs` 更新线段；`dragend` 更新 GeoJSON 并持久化。退出编辑时线段恢复 `#4dabf7`。
- 整体移动：列表项的「移动」按钮进入 `movePolyline` 模式 → 线段变 `#00d68f`、`weight:4`，绑定图层 `mousedown` + 地图 `mousemove`/`mouseup`；按下时记录起点，移动时按 `dLat/dLng` 增量整体平移所有折点坐标；`mouseup` 结束并持久化。此模式下必须 `map.dragging.disable()`，退出时恢复 `enable()` 并解绑事件。
- 列表项显示「N 个折点」；点击列表项 → 计算折点的 min/max 经纬度构成 `L.latLngBounds`，有效则 `flyToBounds(bounds,{padding:[40,40],duration:.6})`，无效（退化）则 `flyTo` 到中心并放大到 ≥14 级。
- 点击线段弹 Popup：标题 + 「N 个折点」。

## 7. 多边形（Polygon）
- 绘制：`addPolygon` 模式下单击地图逐点添加顶点（同样带顶点手柄）；折点数 ≥ 2 显示虚线预览线；≥ 3 时额外显示预览多边形（`#00d68f`、`weight:1`、`fillOpacity:.08`）；同样支持橡皮筋预览。「完成绘制」后生成正式多边形（**`#f5a623`、`weight:2`、`fillColor:'#f5a623'`、`fillOpacity:.15`**、命名「多边形 N」）；顶点不足 3 个时给出错误 Toast「多边形至少需要 3 个顶点」。
- 编辑顶点：列表项「编辑顶点」按钮进入 `editPolygon` 模式 → 多边形变 `#00d68f`（`weight:1`→`fillOpacity:.12`），每个顶点生成可拖拽手柄；拖拽实时更新 `setLatLngs`；退出恢复原样式。
- 整体移动：列表项「移动」按钮进入 `movePolygon` 模式 → 多边形变 `#00d68f`、`weight:3`、`fillOpacity:.18`，`mousedown` + 地图 `mousemove`/`mouseup` 按增量整体平移**外环**所有坐标；移动期间 `map.dragging.disable()`。
- 列表项显示「N 个顶点」；点击列表项 → `flyToBounds(layer.getBounds(), {padding:[40,40],duration:.6})`。
- 点击多边形弹 Popup：标题 + 「N 个顶点」。
- 线段与多边形均设 `bubblingMouseEvents:false`。

## 8. 侧边栏三个列表
- 分组标题：点位列表 / 线段列表 / 多边形列表，各带一个计数徽章（`.list-count`，主色底；多边形用 `.warn` 琥珀底）。
- 每个列表项结构：类型图标块（绿/蓝/黄）+ 名称 + 副信息（点位显示坐标、线段显示折点数、多边形显示顶点数）+ 右侧操作按钮组。
  - 点位：移动（`fa-arrows-alt`）、删除（`fa-trash-alt`）；
  - 线段：编辑折点（`fa-edit`）、移动、删除；
  - 多边形：编辑顶点（`fa-edit`）、移动、删除。
- 操作按钮必须 `event.stopPropagation()`，避免触发列表项的地图定位。
- 列表为空时显示各自的 `.empty-hint` 引导文案。
- 处于该对象的编辑/移动模式时，列表项高亮为 `.selected`，对应操作按钮进入 `.moving` 态。

## 9. GeoJSON 实时输出
- 侧栏底部面板持续展示当前所有标绘内容的 GeoJSON，`JSON.stringify(obj, null, 2)` 缩进 2 空格。
- 结构为 `FeatureCollection`；`features` 顺序：**先点位、再线段、最后多边形**。
- 每个 Feature 的 `properties` 为 `{ id: <数字id>, name: <名称> }`。
- 点位 geometry：`{type:'Point', coordinates:[lng, lat]}`，坐标用 `parseFloat(x.toFixed(6))` 保留 6 位小数。
- 线段 geometry：`{type:'LineString', coordinates:[[lng,lat],...]}`，同样 6 位小数。
- 多边形 geometry：取图层自带的 `toGeoJSON()` 结果，再覆盖 `properties`。
- 无数据时显示 `{"type":"FeatureCollection","features":[]}`。
- 「复制 GeoJSON」按钮：优先 `navigator.clipboard.writeText`，失败降级为隐藏 textarea + `document.execCommand('copy')`，成功 Toast「GeoJSON 已复制到剪贴板」。

## 10. 本地持久化
- 主数据键：`map_plot_data`，在每次新增/编辑/移动/删除后写入，内容结构：
  ```json
  {
    "points":    [{"id":1,"name":"点位 1","lat":29.85,"lng":120.6}],
    "polylines":[{"id":1,"name":"线段 1","coords":[[lat,lng],[lat,lng]]}],
    "polygons": [{"id":1,"name":"多边形 1","coords":[[lat,lng],[lat,lng]]}],
    "nextPId":2,"nextLId":2,"nextGId":2,"base":"img"
  }
  ```
  注意本地存储的坐标顺序是 `[lat, lng]`，与导出的 GeoJSON（`[lng,lat]`）相反。
- 启动时读取并恢复：还原三个 `nextXId` 计数器；按序重建点位、线段、多边形图层（保持原 id 与名称，id ≥ 计数器时计数器前移）；恢复上次使用的底图类型；最后统一刷新三个列表与 GeoJSON 面板。
- 恢复点位时不要重复弹 Toast（与「用户主动新增」区分）。
- JSON 解析异常时 `console.error` 且不崩溃。

## 11. 清除全部数据
- 底部「清除全部数据」按钮 → 弹出确认模态框（标题「操作确认」带警示图标，文案「确定要清除全部标绘数据吗？此操作不可恢复。」，按钮「确认清除」危险红 / 「取消」描边）→ 确认后移除全部图层、清空三个数组、计数器复位为 1、刷新 UI 与持久化、Toast「已清除全部数据」。
- 若当前正处于某个操作模式，先执行「取消当前操作」再进入确认流程。

## 12. 启动流程
页面脚本底部用 IIFE 启动：读取 Token → 有则隐藏弹窗并 `initMap(token)`；无则显示 Token 弹窗。`initMap` 内完成：隐藏占位层 → 创建地图 → 添加缩放控件 → 创建瓦片图层并加入影像两层 → 创建 `maskPane`（zIndex 390、pointerEvents none）与浙江图层组 → 创建 `drawnItems`、`editLayer` 两个 `L.featureGroup()` → 绑定地图事件 → 加载浙江边界 → 加载本地数据 → 刷新 UI。

地图事件绑定：
- `mousemove`：实时更新左下角坐标显示（`lat.toFixed(6)+', '+lng.toFixed(6)`）；若处于多边形/线段绘制且已有折点，同步更新橡皮筋预览；
- `click`：按当前模式分发到「加点位 / 加多边形顶点 / 加线段折点」。

# 交付格式
1. 先输出 5 行以内的实现思路概述（说明模式状态机、图层组织、遮罩挖洞原理、持久化策略）。
2. 再输出完整代码（**一个 html 代码块**，包含全部 CSS 与 JS）。
3. 最后输出「已知限制」与「可扩展方向」各 3 条。

# 验收标准
1. 双击 HTML 文件即可打开；未配置 Token 时弹出 Token 设置框且地图区显示占位提示，填入有效 Token 后地图正常加载天地图影像瓦片，并能切换到矢量底图。
2. 地图加载后自动显示「浙江省范围高亮 + 省外深色遮罩」，鼠标悬停遮罩区不产生任何交互干扰；遮罩数据被缓存到 localStorage，刷新后二次加载更快且给出「已从缓存加载」提示。
3. 「添加点位」→ 地图单击 → 出现绿色水滴标记，侧栏点位列表新增一条并显示 6 位小数坐标，GeoJSON 面板同步出现一个 Point Feature。
4. 「添加线段」→ 连续单击 ≥2 点 → 出现蓝色实线，侧栏显示「N 个折点」，GeoJSON 出现 LineString。
5. 「添加多边形」→ 连续单击 ≥3 点 → 出现橙色半透明多边形，侧栏显示「N 个顶点」，GeoJSON 出现 Polygon。
6. 绘制过程中：屏幕顶部出现模式提示条并实时显示「已添加 N 个」，鼠标与最后一个折点之间有虚线橡皮筋预览；折点不足时「完成绘制」按钮为禁用态。
7. 点位可从侧栏或 Popup 进入「移动位置」：图标变琥珀色并可拖拽，列表坐标实时跟随；「取消操作」后位置精确回退到拖拽前的位置；「完成移动」后位置保留。
8. 多边形/线段均可用绿色手柄拖拽单个顶点，手柄拖拽时图形实时变形；可用「移动」按钮整体平移图形，拖拽过程中地图自身平移被禁用、退出后恢复。
9. 侧栏点击任一列表项，地图平滑飞行定位到对应图形（点位放大到 ≥14 级，线段/多边形按包围盒定位）。
10. GeoJSON 面板内容与地图图形实时一致，`features` 顺序为点位→线段→多边形，坐标顺序为 `[lng, lat]`，保留 6 位小数；「复制 GeoJSON」可将内容写入剪贴板。
11. 刷新页面后所有点位、线段、多边形、当前底图类型全部自动恢复，id 继续自增不冲突。
12. 「清除全部数据」需二次确认，确认后地图与列表清空、计数归零。
13. 整体视觉为深色科技风：底色 `#0c0e14` 体系、主色薄荷绿 `#34d399`、辅色天蓝 `#60a5fa`，层级靠色阶与 1px 边框表达，浮层用玻璃态 + 轻投影；所有颜色均来自 CSS 变量。
14. 浏览器控制台无 JS 报错；Esc 键可随时退出当前操作；所有按钮在无数据/状态不满足时正确禁用而非报错。

6.6 轻量级API调试

请你按照以下要求完成任务：

# 角色
你是一名资深前端工程师兼 UI 设计师，精通原生 JavaScript、HTTP 协议，并具备成熟的产品视觉设计能力（擅长排版层级、留白节奏、色彩体系与微交互）。

# 任务
请用单个 HTML 文件（HTML + CSS + 原生 JS，不依赖任何构建工具）实现一个「轻量级 API 调试工具」，交互体验对标 Postman 的核心功能，视觉上遵循下述「护眼绿 + 设计美学」规范。

# 技术约束
1. 输出为单个 .html 文件，双击即可在浏览器运行，禁止引用需要构建的依赖；如需第三方库使用 CDN 引入并注明用途。
2. 使用 fetch API 发起请求，用 AbortController 实现「取消请求」与超时控制。
3. 代码结构清晰：按「设计 Token / 状态管理 / 请求构建 / UI 渲染 / 事件绑定」分区，关键逻辑写中文注释。
4. 不得省略代码，不要出现 "// 其余代码同上" 之类的占位。

# 视觉设计规范（重点，必须严格执行）

## 1. 主题：护眼绿（Eye-Comfort Green）
所有颜色统一走 CSS 变量，禁止在组件里硬编码颜色值。默认提供亮色与暗色两套 Token：

亮色（默认）：
- 页面背景：`#E9F5E9`（低饱和浅绿，避免纯白刺眼）
- 卡片/面板背景：`#F6FBF6`
- 输入框背景：`#FFFFFF`（仅输入区用白，形成焦点）
- 边框/分割线：`#CFE6D2`
- 主色（Primary）：`#3F8F5B`，hover 态 `#357A4D`，active 态 `#2C6640`
- 主色浅底（选中/高亮行）：`#D8EDDD`
- 正文文字：`#26372B`，次要文字：`#5E7266`，禁用文字：`#9AAFA0`
- 代码区背景：`#F1F8F2`

暗色：
- 页面背景：`#1A241C`
- 卡片/面板背景：`#212D24`
- 边框：`#33443A`
- 主色：`#6FBF8B`，主色浅底：`#2B3D31`
- 正文文字：`#DCE9DF`，次要文字：`#93A89A`

语义色（状态码/提示），需与绿色基调协调，避免高饱和刺眼：
- 成功 2xx：`#4C9A6A`；信息 3xx：`#5C8FA8`；警告 4xx：`#C08A3E`；错误 5xx：`#B65C52`

## 2. 设计美学要求
- **字体**：正文用系统 UI 字体栈；URL 输入框、参数值、代码/响应区统一使用等宽字体（`ui-monospace, "JetBrains Mono", Consolas, monospace`）；字号阶梯 12/13/14/16px，行高 1.5--1.6。
- **间距体系**：以 4px 为基准的 8 档间距（4/8/12/16/24/32/40/48），组件内边距与区块间距必须落在这套刻度上，保持呼吸感。
- **布局**：三栏结构------左侧功能栏（历史/收藏/环境）+ 中间请求区 + 右侧响应区；左右栏使用 1px 细边框而非重阴影分割；<900px 自动堆叠为上下结构。
- **圆角与层次**：卡片 10px、按钮 8px、输入框 8px、标签 6px；层次主要靠「背景色差 + 1px 边框」表达，阴影仅用于浮层（下拉、Toast），用极轻的 `0 4px 16px rgba(38,55,43,.08)`。
- **状态反馈**：hover 提亮/描边、focus 用 2px 主色 outline（带 offset，保证键盘可见）、禁用态降透明度；过渡统一 `transition: all .18s ease`，不做夸张动画。
- **细节质感**：Tab 选中项使用底部 2px 主色条 + 文字变色；参数表格斑马纹用极淡绿；空状态配简洁 SVG 线性插画（手写内联 SVG，不引外部图片）+ 一句引导文案；Loading 用主色细线条 spinner 或骨架屏。
- **克制动效**：仅保留 hover/focus/面板切换的淡入（`opacity + translateY(4px)`，≤200ms），不出现弹跳与旋转炫技动画。

# 功能需求

## 1. 请求区
- 请求方法下拉框：仅 **GET / POST / PUT / DELETE** 四种，用不同的语义色小标签区分（GET 绿、POST 蓝绿、PUT 琥珀、DELETE 砖红，均取低饱和值）。
- URL 输入框，支持 `{{变量名}}` 语法，发送前用环境变量替换。
- 「发送」按钮（快捷键 Ctrl/Cmd + Enter，主色实心）与「取消」按钮（请求中替换发送按钮，显示为描边样式）。
- 超时时间设置（默认 30s）。

## 2. 请求配置 Tab（每个 Tab 显示已填条数角标）
- **Params**：key/value 表格，支持启用/禁用勾选、批量编辑（URL 粘贴自动解析 query）、增行、删行、拖拽排序、值留空自动忽略。
- **Headers**：同上，提供常用 Header 快捷添加（Content-Type、Authorization、Accept 等）。
- **Body**：单选 none / form-data / x-www-form-urlencoded / raw / binary；
  - raw 下可选 JSON / XML / Text / HTML；
  - **当类型为 JSON 时：输入框内容在失焦（blur）后自动格式化；切换到 raw-JSON 时若已有合法 JSON 内容也立即格式化；默认即以格式化（2 空格缩进、换行）形式展示，而非压缩成一行；**
  - 提供「格式化 JSON」按钮与「压缩」按钮；JSON 非法时不格式化，在输入框下方给出红色内联错误提示（含出错位置），不弹窗打断。
- **Auth**：None / Bearer Token / Basic Auth / API Key（Header 或 Query）。

## 3. 响应区
- 顶部信息条：HTTP 状态码（按上述语义色）、耗时(ms)、响应体大小、响应时间，用等宽字体排版对齐。
- **Body Tab：JSON 响应默认即以格式化视图展示**------自动 `JSON.parse` 后按 2 空格缩进美化，带语法高亮（键/字符串/数字/布尔/null 分色，配色需与护眼绿主题协调）与逐层折叠/展开（默认展开 2 层）；同时提供「Raw」切换查看原始未格式化文本。
- **JSON 格式化实现要求**：优先解析并重新序列化；对超大整数（超过 `2^53`）避免精度丢失------检测到超长数字时保留原始文本片段，或提示「存在大整数，建议查看 Raw」。
- 其他 Tab：Headers、Cookie（如可读）。
- 操作：复制响应体、下载为文件、搜索响应内容。
- 错误态：网络错误、超时、CORS 失败分别给出明确中文提示，CORS 场景提示「浏览器同源策略限制，请使用后端代理或开启 CORS 响应头」。
- 响应体不是合法 JSON 时，降级为纯文本展示并标注「非 JSON，已按文本显示」，不得报错或白屏。
- 请求进行中显示 Loading 骨架/动画。

## 4. 辅助功能
- **历史记录**：localStorage 持久化最近 50 条请求，点击可回填。
- **收藏/集合**：可命名保存请求，左侧栏展示、支持删除与重命名。
- **环境变量**：可新增多套环境，维护 key-value，支持在 URL/Header/Body 中用 `{{key}}` 引用。
- **主题**：护眼绿亮色 / 护眼绿暗色切换，默认跟随系统偏好，选择结果持久化。

# 交付格式
1. 先输出 5 行以内的实现思路概述（含配色 Token 规划）。
2. 再输出完整代码（一个 html 代码块）。
3. 最后输出「已知限制」与「可扩展方向」各 3 条。

# 验收标准
- 用 GET 请求 https://jsonplaceholder.typicode.com/posts/1 能正确展示状态码 200，且响应 JSON **打开即为格式化后的高亮折叠视图**，不是一行压缩文本。
- 用 POST + raw JSON 能正确携带 body 与 Content-Type；粘贴一段压缩 JSON 后失焦即自动格式化为缩进结构。
- 方法下拉框只有 GET / POST / PUT / DELETE 四项，颜色可区分。
- 页面整体为低饱和护眼绿基调，亮/暗两种模式均不刺眼，且所有颜色来自 CSS 变量。
- 关闭网络或填错域名时，错误提示清晰不崩溃。
- 刷新页面后历史记录、收藏、主题、环境变量均保留。

七、写在最后

Vibe Coding 把写代码的成本降到了很低，同时把判断代码是否合格的负担推给了使用者。评估提示词的意义正在于此：它把这份负担前置成一份可执行的验收清单，让模型的表现可以被量化、被比较、被复现。