官网四页评审优化（P0 清单落地）

评审方式：落地页/pricing/license/docs 四页全页截图 + 视觉评审，按优先级修复：
- 落地页信息密度：为什么选 8→6 卡（握手头并入六协议卡、文档分享并入功能区）；
  功能区 12→9 卡（删历史重放/系统代理/文档快照三弱卡），g3 三行节奏
- pricing 文案：私有化「（标价）」重复消除（¥8,000/年起、支持买断、成交灵活）；
  年/永久 toggle 描边加粗+光晕提升视觉权重
- license：30 天试用 chip 加粗+光晕强调；hero 下新增快捷锚（怎么买/换机断网/查看定价）
  并为对应区块补 id
- docs 首页（=产品介绍）：顶部新增「新手从这读起」五步引导（界面导览→首请求→Mock→测试→授权）
- 重建后核验：6 卖点卡/9 功能卡/标价 0/锚点 2/引导 1，五页零断链

homepage/content/01-intro.md

@@ -1,3 +1,5 @@
+> ** 🚀 新手从这读起**：先看[《界面导览》](/docs/interface)认识工作台 → 用示例集合发第一个请求（[《HTTP 请求》](/docs/http)）→ 需要造数据看[《Mock 数据》](/docs/mock)、需要回归看[《自动化测试》](/docs/testing) → 商用前了解[《授权与激活》](/docs/license)。
+
 OpsxAPI 是一款**本地优先**的专业接口工作台，面向运维与开发，把 HTTP、GraphQL、WebSocket、SSE、Socket.IO、MQTT 六种协议的调试放进同一个窗口。
 
 无需注册、无需联网同步，数据全部保存在本地浏览器（localStorage），导出备份随时带走。

homepage/dist/docs/index.html

@@ -113,6 +113,9 @@
     <h1 class="page-title">产品介绍</h1>
     <div class="page-meta">更新于 2026-09-17</div>
     <article class="md">
+<blockquote>
+<p>** 🚀 新手从这读起**：先看<a href="/docs/interface">《界面导览》</a>认识工作台 → 用示例集合发第一个请求（<a href="/docs/http">《HTTP 请求》</a>）→ 需要造数据看<a href="/docs/mock">《Mock 数据》</a>、需要回归看<a href="/docs/testing">《自动化测试》</a> → 商用前了解<a href="/docs/license">《授权与激活》</a>。</p>
+</blockquote>
 <p>OpsxAPI 是一款<strong>本地优先</strong>的专业接口工作台，面向运维与开发，把 HTTP、GraphQL、WebSocket、SSE、Socket.IO、MQTT 六种协议的调试放进同一个窗口。</p>
 <p>无需注册、无需联网同步，数据全部保存在本地浏览器（localStorage），导出备份随时带走。</p>
 <h2 id="sec-1">功能总览</h2>

homepage/dist/docs/intro/index.html

@@ -113,6 +113,9 @@
     <h1 class="page-title">产品介绍</h1>
     <div class="page-meta">更新于 2026-09-17</div>
     <article class="md">
+<blockquote>
+<p>** 🚀 新手从这读起**：先看<a href="/docs/interface">《界面导览》</a>认识工作台 → 用示例集合发第一个请求（<a href="/docs/http">《HTTP 请求》</a>）→ 需要造数据看<a href="/docs/mock">《Mock 数据》</a>、需要回归看<a href="/docs/testing">《自动化测试》</a> → 商用前了解<a href="/docs/license">《授权与激活》</a>。</p>
+</blockquote>
 <p>OpsxAPI 是一款<strong>本地优先</strong>的专业接口工作台，面向运维与开发，把 HTTP、GraphQL、WebSocket、SSE、Socket.IO、MQTT 六种协议的调试放进同一个窗口。</p>
 <p>无需注册、无需联网同步，数据全部保存在本地浏览器（localStorage），导出备份随时带走。</p>
 <h2 id="sec-1">功能总览</h2>

homepage/dist/docs/search-data.json

@@ -1 +1 @@
-[{"Slug":"intro","Title":"产品介绍","Group":"开始使用","Text":"OpsxAPI 是一款 本地优先 的专业接口工作台，面向运维与开发，把 HTTP、GraphQL、WebSocket、SSE、Socket.IO、MQTT 六种协议的调试放进同一个窗口。 无需注册、无需联网同步，数据全部保存在本地浏览器（localStorage），导出备份随时带走。 功能总览 能力 说明 六种协议 HTTP / GraphQL / WebSocket / SSE / Socket.IO / MQTT 集合管理 目录树、搜索、右键菜单、拖拽移动、多标签页 多环境变量 、 全局替换，一键切换环境 数据导入 OpenAPI/Swagger、Postman、Apifox、Apipost、cURL、HAR、Insomnia、Hoppscotch、Markdown 等 数据导出 OpenAPI 3.0、Postman v2.1、Markdown 文档、全量备份 代码生成 cURL / JavaScript fetch / Python requests / Go net/http 代理能力 本地代理绕开 CORS；WebSocket 隧道支持自定义握手 Header 双端形态 浏览器（Web）与桌面端共用同一套界面 支持的协议与场景 协议 典型场景 特色 HTTP / REST 调试 REST 接口、运维平台 API 7 种方法、6 种请求体、3 种鉴权 GraphQL 查询网关、中台接口 Query + Variables 独立编辑 WebSocket 实时推送、行情、IM 自定义握手 Header（经本地隧道） SSE AI 流式输出、监控事件流 直连失败自动切代理、断点续传 Socket.IO Node 实时应用 事件监听、emit 参数、path/auth 配置 MQTT IoT 设备、消息总线 通配符订阅、QoS、自动重连 为什么选 OpsxAPI 数据主权 ：所有集合、环境、历史保存在本机，不经过任何第三方服务器。 开箱即用 ：安装即用、零配置；首次打开自带覆盖全部协议的示例集合。 工程友好 ：导入自动建目录、路径参数自动转变量；导出即标准 OpenAPI，可回流 Apifox / Swagger 生态。 轻量克制 ：一个 Go 二进制 + 一份前端，资源占用小，内网可部署。 提示 ：想快速感受？直接看下一章《界面导览》，认识各区域后再动手。"},{"Slug":"interface","Title":"界面导览","Group":"开始使用","Text":"OpsxAPI 主界面由「活动栏 + 顶栏 + 侧栏 + 标签页 + 编辑区」组成： 活动栏（最左窄栏） 元素 作用 空间徽标（顶部） 切换 本地空间 / 我的空间 / 团队空间；云端空间显示同步状态点 接口 / 历史 / 测试 / 文档 / Mock 主导航：接口工作台、请求历史、自动化测试、接口文档、Mock 管理 授权徽章 试用倒计时或已授权状态，点击进入 设置 → 授权 设置 / 账号 设置中心；账号菜单（团队管理、立即同步、退出登录） 顶栏 元素 作用 ＋ 新建 六种协议请求 / 目录（默认建在第一个集合） 导入 / 导出 数据导入（十种格式）与导出对话框 环境选择器 切换当前环境（变量与前置 URL 随之生效），可直达环境管理 左侧栏（接口 历史 分段） 接口 ：集合树 — 点击请求在标签页打开，目录展开 / 折叠； 右键 新建 / 重命名 / 复制 / 导出 / 删除； 拖拽 移动（支持跨集合）；顶部搜索实时过滤。 历史 ：最近请求自动归档（状态码 / 耗时），点击回跳对应接口，支持一键清空。 标签页栏 同时打开多个接口，中键或 × 关闭；右键支持「关闭其他 / 关闭全部」。正在连接中的实时协议标签会显示呼吸圆点。 请求编辑区（上半部分） 按协议呈现不同编辑器： 协议 标签页 HTTP Params · Body · Headers · Cookies · Auth · 说明 GraphQL Query · Variables · Headers · Auth WebSocket 消息 · 握手配置 · 说明 SSE 事件流 · 连接配置 · 说明 Socket.IO 事件 · 连接配置 · 说明 MQTT 消息 · Broker / 订阅 · 发布 · 说明 响应区（下半部分） HTTP / GraphQL ：响应体（Pretty JSON 高亮）、Raw、响应头，右上角状态 / 耗时 / 大小 / 复制。 实时协议 ：分色消息日志（接收 · 绿、发送 · 蓝、系统 · 灰、错误 · 红），顶部实时统计收发条数与连接时长。"},{"Slug":"http","Title":"发送 HTTP 请求","Group":"请求调试","Text":"发送请求 1. 选择方法（GET / POST / PUT / PATCH / DELETE / HEAD / OPTIONS）。 2. 输入 URL，支持 形式的变量（见《环境与变量》）。 3. 点击 发送 ，或直接在 URL 输入框按 Enter 。 请求默认经本地代理（ ）发出，天然绕开浏览器 CORS 限制。 Params（查询参数） 键值对编辑器，每行可勾选启用 / 停用、填写说明。URL 中已有的查询串会被拆分到表格里，两边双向同步。 Body（请求体） 模式 适用场景 none GET 等无体请求 JSON REST 接口（默认自动补 ，带格式化按钮） XML / Text / HTML 原始报文 x www form urlencoded 表单提交 form data multipart 文本字段（文件上传请用代码生成的 cURL） Headers / Cookies Headers：键值对，支持 ； 、 由 Auth / CoLine truncated
+[{"Slug":"intro","Title":"产品介绍","Group":"开始使用","Text":"🚀 新手从这读起 ：先看 认识工作台 → 用示例集合发第一个请求（ ）→ 需要造数据看 、需要回归看 → 商用前了解 。 OpsxAPI 是一款 本地优先 的专业接口工作台，面向运维与开发，把 HTTP、GraphQL、WebSocket、SSE、Socket.IO、MQTT 六种协议的调试放进同一个窗口。 无需注册、无需联网同步，数据全部保存在本地浏览器（localStorage），导出备份随时带走。 功能总览 能力 说明 六种协议 HTTP / GraphQL / WebSocket / SSE / Socket.IO / MQTT 集合管理 目录树、搜索、右键菜单、拖拽移动、多标签页 多环境变量 、 全局替换，一键切换环境 数据导入 OpenAPI/Swagger、Postman、Apifox、Apipost、cURL、HAR、Insomnia、Hoppscotch、Markdown 等 数据导出 OpenAPI 3.0、Postman v2.1、Markdown 文档、全量备份 代码生成 cURL / JavaScript fetch / Python requests / Go net/http 代理能力 本地代理绕开 CORS；WebSocket 隧道支持自定义握手 Header 双端形态 浏览器（Web）与桌面端共用同一套界面 支持的协议与场景 协议 典型场景 特色 HTTP / REST 调试 REST 接口、运维平台 API 7 种方法、6 种请求体、3 种鉴权 GraphQL 查询网关、中台接口 Query + Variables 独立编辑 WebSocket 实时推送、行情、IM 自定义握手 Header（经本地隧道） SSE AI 流式输出、监控事件流 直连失败自动切代理、断点续传 Socket.IO Node 实时应用 事件监听、emit 参数、path/auth 配置 MQTT IoT 设备、消息总线 通配符订阅、QoS、自动重连 为什么选 OpsxAPI 数据主权 ：所有集合、环境、历史保存在本机，不经过任何第三方服务器。 开箱即用 ：安装即用、零配置；首次打开自带覆盖全部协议的示例集合。 工程友好 ：导入自动建目录、路径参数自动转变量；导出即标准 OpenAPI，可回流 Apifox / Swagger 生态。 轻量克制 ：一个 Go 二进制 + 一份前端，资源占用小，内网可部署。 提示 ：想快速感受？直接看下一章《界面导览》，认识各区域后再动手。"},{"Slug":"interface","Title":"界面导览","Group":"开始使用","Text":"OpsxAPI 主界面由「活动栏 + 顶栏 + 侧栏 + 标签页 + 编辑区」组成： 活动栏（最左窄栏） 元素 作用 空间徽标（顶部） 切换 本地空间 / 我的空间 / 团队空间；云端空间显示同步状态点 接口 / 历史 / 测试 / 文档 / Mock 主导航：接口工作台、请求历史、自动化测试、接口文档、Mock 管理 授权徽章 试用倒计时或已授权状态，点击进入 设置 → 授权 设置 / 账号 设置中心；账号菜单（团队管理、立即同步、退出登录） 顶栏 元素 作用 ＋ 新建 六种协议请求 / 目录（默认建在第一个集合） 导入 / 导出 数据导入（十种格式）与导出对话框 环境选择器 切换当前环境（变量与前置 URL 随之生效），可直达环境管理 左侧栏（接口 历史 分段） 接口 ：集合树 — 点击请求在标签页打开，目录展开 / 折叠； 右键 新建 / 重命名 / 复制 / 导出 / 删除； 拖拽 移动（支持跨集合）；顶部搜索实时过滤。 历史 ：最近请求自动归档（状态码 / 耗时），点击回跳对应接口，支持一键清空。 标签页栏 同时打开多个接口，中键或 × 关闭；右键支持「关闭其他 / 关闭全部」。正在连接中的实时协议标签会显示呼吸圆点。 请求编辑区（上半部分） 按协议呈现不同编辑器： 协议 标签页 HTTP Params · Body · Headers · Cookies · Auth · 说明 GraphQL Query · Variables · Headers · Auth WebSocket 消息 · 握手配置 · 说明 SSE 事件流 · 连接配置 · 说明 Socket.IO 事件 · 连接配置 · 说明 MQTT 消息 · Broker / 订阅 · 发布 · 说明 响应区（下半部分） HTTP / GraphQL ：响应体（Pretty JSON 高亮）、Raw、响应头，右上角状态 / 耗时 / 大小 / 复制。 实时协议 ：分色消息日志（接收 · 绿、发送 · 蓝、系统 · 灰、错误 · 红），顶部实时统计收发条数与连接时长。"},{"Slug":"http","Title":"发送 HTTP 请求","Group":"请求调试","Text":"发送请求 1. 选择方法（GET / POST / PUT / PATCH / DELETE / HEAD / OPTIONS）。 2. 输入 URL，支持 形式的变量（见《环境与变量》）。 3. 点击 发送 ，或直接在 URL 输入框按 Enter 。 请求默认经本地代理（ ）发出，天然绕开浏览器 CORS 限制。 Params（查询参数） 键值对编辑器，每行可勾选启用 / 停用、填写说明。URL 中已有的查询串会被拆分到表格里，两边双向同步。 Body（请求体） 模式 适用场景 none GET 等无体请求 JSON REST 接口（默认自动补 ，带格式化按钮） XML / Text / HTML 原始报文 x www form urlencodeLine truncated

homepage/dist/index.html

@@ -132,12 +132,7 @@
       <div class="card">
         <div class="card-icon"><svg class="i-lg"><use href="#i-arrow-left-right"/></svg></div>
         <h3>六协议一个窗口</h3>
-        <p>HTTP / GraphQL / WebSocket / SSE / Socket.IO / MQTT 统一工作台，实时消息分色日志。</p>
+        <p>HTTP / GraphQL / WS / SSE / Socket.IO / MQTT 统一调试；WS 隧道带自定义握手头，CORS 不再是障碍。</p>
-      </div>
-      <div class="card">
-        <div class="card-icon"><svg class="i-lg"><use href="#i-plug-zap"/></svg></div>
-        <h3>浏览器也能带握手头</h3>
-        <p>内置 WebSocket 隧道与流式代理，突破浏览器 CORS 与 Header 限制，调试网关级接口。</p>
       </div>
       <div class="card">
         <div class="card-icon"><svg class="i-lg"><use href="#i-package"/></svg></div>
@@ -159,11 +154,6 @@
         <h3>智能 Mock 双引擎</h3>
         <p>61 条字段名智能规则 + @表达式逐请求生成；发布到本机服务带令牌地址、Bearer 验证与限流。</p>
       </div>
-      <div class="card">
-        <div class="card-icon"><svg class="i-lg"><use href="#i-book-open"/></svg></div>
-        <h3>内网文档分享</h3>
-        <p>从集合一键发布只读快照到随机令牌链接，自动剔除鉴权与机密字段，可随时撤销。</p>
-      </div>
     </div>
   </div>
 </section>
@@ -183,9 +173,9 @@
       <div class="card row"><div class="card-icon"><svg class="i-lg"><use href="#i-list-checks"/></svg></div><div><h3>自动化测试</h3><p>多步骤编排、10 种断言、JSONPath、变量提取传参、Cron 定时与运行日志。</p></div></div>
       <div class="card row"><div class="card-icon"><svg class="i-lg"><use href="#i-bot"/></svg></div><div><h3>AI 场景用例</h3><p>集合接口清单喂给大模型，自动编排业务依赖、补默认断言与变量提取。</p></div></div>
       <div class="card row"><div class="card-icon"><svg class="i-lg"><use href="#i-flask"/></svg></div><div><h3>智能 Mock</h3><p>字段名智能匹配 + @cname/@integer 等表达式；一键用响应创建 Mock，延迟可模拟。</p></div></div>
-      <div class="card row"><div class="card-icon"><svg class="i-lg"><use href="#i-clock"/></svg></div><div><h3>历史与重放</h3><p>最近请求自动归档（状态码 / 耗时），点一下即按原参数重放。</p></div></div>
+      
-      <div class="card row"><div class="card-icon"><svg class="i-lg"><use href="#i-shield-check"/></svg></div><div><h3>系统代理</h3><p>桌面端自动读环境变量代理，支持自定义代理、绕过列表与代理认证。</p></div></div>
+      
-      <div class="card row"><div class="card-icon"><svg class="i-lg"><use href="#i-globe"/></svg></div><div><h3>文档快照分享</h3><p>只读链接发同事，鉴权机密自动过滤；Mock 地址与文档同页展示。</p></div></div>
+      
     </div>
   </div>
 </section>

homepage/dist/license.html

@@ -12,7 +12,7 @@
 .lic-hero{padding:72px 0 30px;text-align:center;}
 .lic-hero h1{font-size:clamp(28px,4.5vw,42px);margin:12px 0 10px;}
 .lic-hero .lead{max-width:780px;margin:0 auto;font-size:15px;line-height:1.9;opacity:.75;}
-.lic-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;border:1px solid var(--blue,#2563eb);color:var(--blue,#2563eb);font-size:13px;font-weight:600;}
+.lic-chip{font-weight:800;letter-spacing:.02em;box-shadow:0 0 0 4px color-mix(in srgb, var(--blue,#2563eb) 12%, transparent);display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;border:1px solid var(--blue,#2563eb);color:var(--blue,#2563eb);font-size:13px;font-weight:600;}
 .lic-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;margin:22px 0 0;}
 @media (max-width:720px){.lic-steps{grid-template-columns:1fr;}}
 .lic-step{position:relative;border:1px solid var(--border);border-radius:calc(var(--radius,14px) + 2px);padding:22px 18px 18px;background:var(--bg);}
@@ -63,7 +63,15 @@
   <p class="lead">一次说清四件事：怎么买、授权码怎么交付、程序里怎么激活、换机与断网怎么办。授权绑定设备而非账号，全流程不需要注册。</p>
 </section>
 
-<section class="section">
+<section class="section" style="padding-top:0">
+  <div class="wrap" style="text-align:center">
+    <a class="btn btn-primary" href="#steps" style="margin:0 6px">怎么买</a>
+    <a class="btn btn-ghost" href="#license-faq" style="margin:0 6px">换机 / 断网怎么办</a>
+    <a class="btn btn-ghost" href="/pricing" style="margin:0 6px">查看定价 ↗</a>
+  </div>
+</section>
+
+<section class="section" id="steps">
   <div class="wrap">
     <h2 class="sec-title">交付与激活：四步</h2>
     <p class="sec-sub">从下单到激活通常当天完成，最短几分钟。</p>
@@ -144,7 +152,7 @@
   </div>
 </section>
 
-<section class="section alt">
+<section class="section alt" id="license-faq">
   <div class="wrap">
     <h2 class="sec-title">授权常见问题</h2>
     <div class="lic-faq">

homepage/dist/license/index.html

@@ -12,7 +12,7 @@
 .lic-hero{padding:72px 0 30px;text-align:center;}
 .lic-hero h1{font-size:clamp(28px,4.5vw,42px);margin:12px 0 10px;}
 .lic-hero .lead{max-width:780px;margin:0 auto;font-size:15px;line-height:1.9;opacity:.75;}
-.lic-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;border:1px solid var(--blue,#2563eb);color:var(--blue,#2563eb);font-size:13px;font-weight:600;}
+.lic-chip{font-weight:800;letter-spacing:.02em;box-shadow:0 0 0 4px color-mix(in srgb, var(--blue,#2563eb) 12%, transparent);display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;border:1px solid var(--blue,#2563eb);color:var(--blue,#2563eb);font-size:13px;font-weight:600;}
 .lic-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;margin:22px 0 0;}
 @media (max-width:720px){.lic-steps{grid-template-columns:1fr;}}
 .lic-step{position:relative;border:1px solid var(--border);border-radius:calc(var(--radius,14px) + 2px);padding:22px 18px 18px;background:var(--bg);}
@@ -63,7 +63,15 @@
   <p class="lead">一次说清四件事：怎么买、授权码怎么交付、程序里怎么激活、换机与断网怎么办。授权绑定设备而非账号，全流程不需要注册。</p>
 </section>
 
-<section class="section">
+<section class="section" style="padding-top:0">
+  <div class="wrap" style="text-align:center">
+    <a class="btn btn-primary" href="#steps" style="margin:0 6px">怎么买</a>
+    <a class="btn btn-ghost" href="#license-faq" style="margin:0 6px">换机 / 断网怎么办</a>
+    <a class="btn btn-ghost" href="/pricing" style="margin:0 6px">查看定价 ↗</a>
+  </div>
+</section>
+
+<section class="section" id="steps">
   <div class="wrap">
     <h2 class="sec-title">交付与激活：四步</h2>
     <p class="sec-sub">从下单到激活通常当天完成，最短几分钟。</p>
@@ -144,7 +152,7 @@
   </div>
 </section>
 
-<section class="section alt">
+<section class="section alt" id="license-faq">
   <div class="wrap">
     <h2 class="sec-title">授权常见问题</h2>
     <div class="lic-faq">

homepage/dist/pricing.html

@@ -12,7 +12,7 @@
 .trial-hero h1{font-size:clamp(22px,3vw,30px);margin:8px 0 0;}
 .trial-hero .lead{max-width:720px;margin:0 auto;opacity:.75;line-height:1.8;}
 .trial-strip{display:inline-flex;gap:8px;align-items:center;padding:7px 16px;border-radius:999px;border:1px solid var(--accent,#2563eb);color:var(--accent,#2563eb);font-size:13px;font-weight:600;}
-.toggle{display:inline-flex;border:1px solid var(--border,#d8dee9);border-radius:999px;padding:3px;gap:2px;margin:14px auto 0;}
+.toggle{display:inline-flex;border:1.5px solid color-mix(in srgb, var(--accent,#2563eb) 45%, var(--border,#d8dee9));border-radius:999px;padding:3px;gap:2px;margin:12px auto 0;box-shadow:0 1px 4px rgba(37,99,235,.08);}
 .toggle button{border:0;background:transparent;padding:6px 18px;border-radius:999px;font-size:13px;font-weight:600;color:inherit;opacity:.65;cursor:pointer;}
 .toggle button.on{background:var(--accent,#2563eb);color:#fff;opacity:1;}
 .price-num b{font-size:34px;}
@@ -112,7 +112,7 @@
         <div class="price-card enterprise">
           <div class="plan-tag dark">私有化 · 不限席位</div>
           <div class="plan">企业私有化版</div>
-          <div class="price price-num"><b>¥8,000</b><span>/ 年 · 标价</span></div>
+          <div class="price price-num"><b>¥8,000</b><span>/ 年 起</span></div>
           <div class="plan-sub">或 ¥30,000 一次性买断 · 单法人不限席位</div>
           <ul>
             <li>整机 / 内网部署，数据不出企业</li>
@@ -125,7 +125,7 @@
         </div>
       </div>
     <p class="lead" style="max-width:720px;margin:14px auto 0;opacity:.75;line-height:1.8;text-align:center">OpsxAPI 对个人非商业用途永久免费；在工作中商用需要授权。授权绑定设备而非账号，支持在线激活与完全离线激活两种方式。</p>
-    <p class="deal-note" style="text-align:center">支付后当场发放授权码（LIC-），粘贴到「设置 → 授权」即完成激活——整个流程无需注册账号；许可证一机一码绑定设备，每年可免费换绑 2 次。<br>标价透明，成交灵活：早鸟 / 教育 / 多年预付可议价，常见成交区间见 <a href="/#pricing">首页定价区</a>。</p>
+    <p class="deal-note" style="text-align:center">支付后当场发放授权码（LIC-），粘贴到「设置 → 授权」即完成激活——整个流程无需注册账号；许可证一机一码绑定设备，每年可免费换绑 2 次。<br>成交灵活：早鸟 / 教育 / 多年预付可议价，常见成交区间见 <a href="/#pricing">首页定价区</a>。</p>
   </div>
 </section>
 

homepage/dist/pricing/index.html

@@ -12,7 +12,7 @@
 .trial-hero h1{font-size:clamp(22px,3vw,30px);margin:8px 0 0;}
 .trial-hero .lead{max-width:720px;margin:0 auto;opacity:.75;line-height:1.8;}
 .trial-strip{display:inline-flex;gap:8px;align-items:center;padding:7px 16px;border-radius:999px;border:1px solid var(--accent,#2563eb);color:var(--accent,#2563eb);font-size:13px;font-weight:600;}
-.toggle{display:inline-flex;border:1px solid var(--border,#d8dee9);border-radius:999px;padding:3px;gap:2px;margin:14px auto 0;}
+.toggle{display:inline-flex;border:1.5px solid color-mix(in srgb, var(--accent,#2563eb) 45%, var(--border,#d8dee9));border-radius:999px;padding:3px;gap:2px;margin:12px auto 0;box-shadow:0 1px 4px rgba(37,99,235,.08);}
 .toggle button{border:0;background:transparent;padding:6px 18px;border-radius:999px;font-size:13px;font-weight:600;color:inherit;opacity:.65;cursor:pointer;}
 .toggle button.on{background:var(--accent,#2563eb);color:#fff;opacity:1;}
 .price-num b{font-size:34px;}
@@ -112,7 +112,7 @@
         <div class="price-card enterprise">
           <div class="plan-tag dark">私有化 · 不限席位</div>
           <div class="plan">企业私有化版</div>
-          <div class="price price-num"><b>¥8,000</b><span>/ 年 · 标价</span></div>
+          <div class="price price-num"><b>¥8,000</b><span>/ 年 起</span></div>
           <div class="plan-sub">或 ¥30,000 一次性买断 · 单法人不限席位</div>
           <ul>
             <li>整机 / 内网部署，数据不出企业</li>
@@ -125,7 +125,7 @@
         </div>
       </div>
     <p class="lead" style="max-width:720px;margin:14px auto 0;opacity:.75;line-height:1.8;text-align:center">OpsxAPI 对个人非商业用途永久免费；在工作中商用需要授权。授权绑定设备而非账号，支持在线激活与完全离线激活两种方式。</p>
-    <p class="deal-note" style="text-align:center">支付后当场发放授权码（LIC-），粘贴到「设置 → 授权」即完成激活——整个流程无需注册账号；许可证一机一码绑定设备，每年可免费换绑 2 次。<br>标价透明，成交灵活：早鸟 / 教育 / 多年预付可议价，常见成交区间见 <a href="/#pricing">首页定价区</a>。</p>
+    <p class="deal-note" style="text-align:center">支付后当场发放授权码（LIC-），粘贴到「设置 → 授权」即完成激活——整个流程无需注册账号；许可证一机一码绑定设备，每年可免费换绑 2 次。<br>成交灵活：早鸟 / 教育 / 多年预付可议价，常见成交区间见 <a href="/#pricing">首页定价区</a>。</p>
   </div>
 </section>
 

homepage/index.html

@@ -132,12 +132,7 @@
       <div class="card">
         <div class="card-icon"><svg class="i-lg"><use href="#i-arrow-left-right"/></svg></div>
         <h3>六协议一个窗口</h3>
-        <p>HTTP / GraphQL / WebSocket / SSE / Socket.IO / MQTT 统一工作台，实时消息分色日志。</p>
+        <p>HTTP / GraphQL / WS / SSE / Socket.IO / MQTT 统一调试；WS 隧道带自定义握手头，CORS 不再是障碍。</p>
-      </div>
-      <div class="card">
-        <div class="card-icon"><svg class="i-lg"><use href="#i-plug-zap"/></svg></div>
-        <h3>浏览器也能带握手头</h3>
-        <p>内置 WebSocket 隧道与流式代理，突破浏览器 CORS 与 Header 限制，调试网关级接口。</p>
       </div>
       <div class="card">
         <div class="card-icon"><svg class="i-lg"><use href="#i-package"/></svg></div>
@@ -159,11 +154,6 @@
         <h3>智能 Mock 双引擎</h3>
         <p>61 条字段名智能规则 + @表达式逐请求生成；发布到本机服务带令牌地址、Bearer 验证与限流。</p>
       </div>
-      <div class="card">
-        <div class="card-icon"><svg class="i-lg"><use href="#i-book-open"/></svg></div>
-        <h3>内网文档分享</h3>
-        <p>从集合一键发布只读快照到随机令牌链接，自动剔除鉴权与机密字段，可随时撤销。</p>
-      </div>
     </div>
   </div>
 </section>
@@ -183,9 +173,9 @@
       <div class="card row"><div class="card-icon"><svg class="i-lg"><use href="#i-list-checks"/></svg></div><div><h3>自动化测试</h3><p>多步骤编排、10 种断言、JSONPath、变量提取传参、Cron 定时与运行日志。</p></div></div>
       <div class="card row"><div class="card-icon"><svg class="i-lg"><use href="#i-bot"/></svg></div><div><h3>AI 场景用例</h3><p>集合接口清单喂给大模型，自动编排业务依赖、补默认断言与变量提取。</p></div></div>
       <div class="card row"><div class="card-icon"><svg class="i-lg"><use href="#i-flask"/></svg></div><div><h3>智能 Mock</h3><p>字段名智能匹配 + @cname/@integer 等表达式；一键用响应创建 Mock，延迟可模拟。</p></div></div>
-      <div class="card row"><div class="card-icon"><svg class="i-lg"><use href="#i-clock"/></svg></div><div><h3>历史与重放</h3><p>最近请求自动归档（状态码 / 耗时），点一下即按原参数重放。</p></div></div>
+      
-      <div class="card row"><div class="card-icon"><svg class="i-lg"><use href="#i-shield-check"/></svg></div><div><h3>系统代理</h3><p>桌面端自动读环境变量代理，支持自定义代理、绕过列表与代理认证。</p></div></div>
+      
-      <div class="card row"><div class="card-icon"><svg class="i-lg"><use href="#i-globe"/></svg></div><div><h3>文档快照分享</h3><p>只读链接发同事，鉴权机密自动过滤；Mock 地址与文档同页展示。</p></div></div>
+      
     </div>
   </div>
 </section>

homepage/license.html

@@ -12,7 +12,7 @@
 .lic-hero{padding:72px 0 30px;text-align:center;}
 .lic-hero h1{font-size:clamp(28px,4.5vw,42px);margin:12px 0 10px;}
 .lic-hero .lead{max-width:780px;margin:0 auto;font-size:15px;line-height:1.9;opacity:.75;}
-.lic-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;border:1px solid var(--blue,#2563eb);color:var(--blue,#2563eb);font-size:13px;font-weight:600;}
+.lic-chip{font-weight:800;letter-spacing:.02em;box-shadow:0 0 0 4px color-mix(in srgb, var(--blue,#2563eb) 12%, transparent);display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;border:1px solid var(--blue,#2563eb);color:var(--blue,#2563eb);font-size:13px;font-weight:600;}
 .lic-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;margin:22px 0 0;}
 @media (max-width:720px){.lic-steps{grid-template-columns:1fr;}}
 .lic-step{position:relative;border:1px solid var(--border);border-radius:calc(var(--radius,14px) + 2px);padding:22px 18px 18px;background:var(--bg);}
@@ -63,7 +63,15 @@
   <p class="lead">一次说清四件事：怎么买、授权码怎么交付、程序里怎么激活、换机与断网怎么办。授权绑定设备而非账号，全流程不需要注册。</p>
 </section>
 
-<section class="section">
+<section class="section" style="padding-top:0">
+  <div class="wrap" style="text-align:center">
+    <a class="btn btn-primary" href="#steps" style="margin:0 6px">怎么买</a>
+    <a class="btn btn-ghost" href="#license-faq" style="margin:0 6px">换机 / 断网怎么办</a>
+    <a class="btn btn-ghost" href="/pricing" style="margin:0 6px">查看定价 ↗</a>
+  </div>
+</section>
+
+<section class="section" id="steps">
   <div class="wrap">
     <h2 class="sec-title">交付与激活：四步</h2>
     <p class="sec-sub">从下单到激活通常当天完成，最短几分钟。</p>
@@ -144,7 +152,7 @@
   </div>
 </section>
 
-<section class="section alt">
+<section class="section alt" id="license-faq">
   <div class="wrap">
     <h2 class="sec-title">授权常见问题</h2>
     <div class="lic-faq">

homepage/pricing.html

@@ -12,7 +12,7 @@
 .trial-hero h1{font-size:clamp(22px,3vw,30px);margin:8px 0 0;}
 .trial-hero .lead{max-width:720px;margin:0 auto;opacity:.75;line-height:1.8;}
 .trial-strip{display:inline-flex;gap:8px;align-items:center;padding:7px 16px;border-radius:999px;border:1px solid var(--accent,#2563eb);color:var(--accent,#2563eb);font-size:13px;font-weight:600;}
-.toggle{display:inline-flex;border:1px solid var(--border,#d8dee9);border-radius:999px;padding:3px;gap:2px;margin:14px auto 0;}
+.toggle{display:inline-flex;border:1.5px solid color-mix(in srgb, var(--accent,#2563eb) 45%, var(--border,#d8dee9));border-radius:999px;padding:3px;gap:2px;margin:12px auto 0;box-shadow:0 1px 4px rgba(37,99,235,.08);}
 .toggle button{border:0;background:transparent;padding:6px 18px;border-radius:999px;font-size:13px;font-weight:600;color:inherit;opacity:.65;cursor:pointer;}
 .toggle button.on{background:var(--accent,#2563eb);color:#fff;opacity:1;}
 .price-num b{font-size:34px;}
@@ -112,7 +112,7 @@
         <div class="price-card enterprise">
           <div class="plan-tag dark">私有化 · 不限席位</div>
           <div class="plan">企业私有化版</div>
-          <div class="price price-num"><b>¥8,000</b><span>/ 年 · 标价</span></div>
+          <div class="price price-num"><b>¥8,000</b><span>/ 年 起</span></div>
           <div class="plan-sub">或 ¥30,000 一次性买断 · 单法人不限席位</div>
           <ul>
             <li>整机 / 内网部署，数据不出企业</li>
@@ -125,7 +125,7 @@
         </div>
       </div>
     <p class="lead" style="max-width:720px;margin:14px auto 0;opacity:.75;line-height:1.8;text-align:center">OpsxAPI 对个人非商业用途永久免费；在工作中商用需要授权。授权绑定设备而非账号，支持在线激活与完全离线激活两种方式。</p>
-    <p class="deal-note" style="text-align:center">支付后当场发放授权码（LIC-），粘贴到「设置 → 授权」即完成激活——整个流程无需注册账号；许可证一机一码绑定设备，每年可免费换绑 2 次。<br>标价透明，成交灵活：早鸟 / 教育 / 多年预付可议价，常见成交区间见 <a href="/#pricing">首页定价区</a>。</p>
+    <p class="deal-note" style="text-align:center">支付后当场发放授权码（LIC-），粘贴到「设置 → 授权」即完成激活——整个流程无需注册账号；许可证一机一码绑定设备，每年可免费换绑 2 次。<br>成交灵活：早鸟 / 教育 / 多年预付可议价，常见成交区间见 <a href="/#pricing">首页定价区</a>。</p>
   </div>
 </section>