feat: 新增 AI 助手页面 + 图片识别功能 + 更新宣传素材

- 新增 AI 助手页面 (assistant.js/assistant.css/assistant.rs)
- 新增图片识别截图 (13.png) 并加入官网和 README
- 更新宣传视频 (promo-web.mp4) 含 AI 助手+工具调用+图片识别场景
- 更新视频封面 (video-cover.png/video-cover-light.png) 突出 AI 助手
- 更新 AI 助手演示 GIF (ai-assistant-demo.gif) 作为 README 首图
- 更新功能矩阵 GIF (feature-showcase.gif) AI 助手为 star 卡片
- 官网新增图片识别 showcase 区块
- README 新增图片识别特性和截图
- 视频封面改用专业设计版本
- 演示视频时长 badge 更新为 50 秒

docs/index.html

@@ -4,25 +4,25 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>ClawPanel - OpenClaw AI Agent 可视化管理面板 | 快速搭建、配置、监控你的 AI 智能体</title>
-  <meta name="description" content="ClawPanel 是 OpenClaw AI Agent 框架的可视化管理面板，基于 Tauri v2 构建的跨平台桌面应用。支持仪表盘监控、多模型配置（OpenAI/DeepSeek/Kimi/Anthropic）、实时 AI 聊天、记忆管理、Agent 管理、网关配置、服务管控、日志查看、内网穿透、系统诊断。一键安装 OpenClaw，快速搭建你的私有 AI Agent，开源免费，支持 Windows/macOS/Linux。">
+  <meta name="description" content="ClawPanel 是 OpenClaw AI Agent 框架的可视化管理面板，基于 Tauri v2 构建的跨平台桌面应用。内置 AI 助手支持工具调用（终端执行、文件读写、目录浏览），让 AI 帮你诊断和修复 OpenClaw 配置。支持仪表盘监控、多模型配置（OpenAI/DeepSeek/Kimi/Anthropic）、实时 AI 聊天、记忆管理、Agent 管理、网关配置、服务管控、日志查看、内网穿透、系统诊断。一键安装 OpenClaw，快速搭建你的私有 AI Agent，开源免费，支持 Windows/macOS/Linux。">
   <meta name="keywords" content="ClawPanel, OpenClaw, AI Agent, AI 智能体, 管理面板, 可视化管理, 快速搭建, 一键安装, 桌面应用, 跨平台, Tauri, Tauri v2, Rust, 开源, 免费, LLM, 大语言模型, 多模型, 模型配置, OpenAI, DeepSeek, Kimi, Anthropic, Claude, 实时聊天, AI 对话, 流式响应, 记忆管理, Agent 管理, 多 Agent, 网关配置, Gateway, 服务管理, 日志查看, 内网穿透, Cloudflare Tunnel, 系统诊断, WebSocket, 仪表盘, 监控, 配置管理, 私有部署, 本地部署, 自托管, AI 工具, AI 平台, 智能体平台, 人工智能, 深度学习, 自然语言处理, NLP, 模型调度, 模型切换, 备选模型, 开箱即用, 零代码, 低代码, admin panel, dashboard, open source AI, self-hosted AI, local AI, AI management">
   <meta name="author" content="晴辰云 QingchenCloud">
   <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large">
   <link rel="canonical" href="https://claw.qt.cool/">
   <meta property="og:title" content="ClawPanel - OpenClaw AI Agent 可视化管理面板 | 快速搭建你的 AI 智能体">
-  <meta property="og:description" content="基于 Tauri v2 的跨平台桌面应用，为 OpenClaw AI Agent 提供可视化管理。支持多模型配置、实时 AI 聊天、记忆管理、内网穿透等 10+ 功能模块。一键安装，开源免费。">
+  <meta property="og:description" content="基于 Tauri v2 的跨平台桌面应用，为 OpenClaw AI Agent 提供可视化管理。内置 AI 助手支持工具调用，让 AI 帮你诊断修复配置。支持多模型配置、实时聊天、记忆管理等 10+ 功能模块。开源免费。">
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://claw.qt.cool/">
   <meta property="og:site_name" content="ClawPanel">
   <meta property="og:locale" content="zh_CN">
-  <meta property="og:image" content="https://claw.qt.cool/01.png">
+  <meta property="og:image" content="https://claw.qt.cool/00.png">
   <meta property="og:image:width" content="1200">
   <meta property="og:image:height" content="675">
-  <meta property="og:image:alt" content="ClawPanel 仪表盘截图">
+  <meta property="og:image:alt" content="ClawPanel AI 助手截图">
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="ClawPanel - OpenClaw AI Agent 可视化管理面板">
   <meta name="twitter:description" content="基于 Tauri v2 的跨平台桌面应用。多模型配置、实时 AI 聊天、Agent 管理、内网穿透，一站式管理你的 AI 智能体。">
-  <meta name="twitter:image" content="https://claw.qt.cool/01.png">
+  <meta name="twitter:image" content="https://claw.qt.cool/00.png">
   <link rel="icon" href="./logo.png" type="image/png">
   <script type="application/ld+json">
   {
@@ -46,7 +46,7 @@
       "price": "0",
       "priceCurrency": "CNY"
     },
-    "screenshot": "https://claw.qt.cool/01.png",
+    "screenshot": "https://claw.qt.cool/00.png",
     "keywords": "OpenClaw, AI Agent, 管理面板, Tauri, 跨平台, 开源, 免费, LLM, 多模型"
   }
   </script>
@@ -484,9 +484,9 @@
     <div class="orb orb-1" id="orb1"></div>
     <div class="orb orb-2" id="orb2"></div>
     <div class="hero-inner">
-      <div class="reveal hero-badge"><span class="pulse"></span> v0.4.4 已发布 — Gateway 守护、配置同步、流式超时</div>
-      <h1 class="reveal hero-title">管理你的 <span class="gradient-text shimmer">AI Agent</span><br>从未如此直观</h1>
-      <p class="reveal hero-subtitle">ClawPanel 是 <strong>OpenClaw</strong> 的可视化管理面板，基于 Tauri v2 构建。<br>仪表盘、模型配置、实时聊天、记忆管理 — 一站式掌控。</p>
+      <div class="reveal hero-badge"><span class="pulse"></span> 🤖 内置 AI 助手 — 一键安装、配置、诊断、修复 OpenClaw</div>
+      <h1 class="reveal hero-title"><span class="gradient-text shimmer">AI 助手</span>驱动的<br>OpenClaw 管理面板</h1>
+      <p class="reveal hero-subtitle">内置智能 AI 助手，帮你<strong>一键安装 OpenClaw</strong>、自动诊断配置、排查问题、修复错误。<br>8 大工具 + 4 种模式 + 交互式问答，从新手到老手都能轻松上手。</p>
       <div class="reveal hero-cta">
         <a href="#download" class="btn btn-primary">
           <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M12 15V3m0 12l-4-4m4 4l4-4M2 17l.621 2.485A2 2 0 004.561 21h14.878a2 2 0 001.94-1.515L22 17"/></svg>
@@ -498,7 +498,7 @@
         </a>
       </div>
       <div class="reveal hero-image-wrap" data-delay="300">
-        <img src="./01.png" alt="ClawPanel 仪表盘" onclick="openLightbox(this.src)" loading="eager">
+        <img src="./00.png" alt="ClawPanel AI 助手" onclick="openLightbox(this.src)" loading="eager">
         <div class="hero-glow"></div>
       </div>
     </div>
@@ -536,7 +536,7 @@
               <svg viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg>
             </div>
           </div>
-          <video id="demoVideo" poster="./01.png" preload="metadata" playsinline controls onclick="toggleDemoVideo()">
+          <video id="demoVideo" poster="./video-cover.png" preload="metadata" playsinline controls onclick="toggleDemoVideo()">
             <source src="./promo-web.mp4" type="video/mp4">
           </video>
         </div>
@@ -554,9 +554,73 @@
         <p class="reveal section-desc">一个面板，管理 OpenClaw 的方方面面</p>
       </div>
 
+      <!-- 🔥 AI 助手（工具调用） -->
+      <div class="showcase-row">
+        <div class="reveal screenshot-frame img-first" onclick="openLightbox('./00.png')"><img src="./00.png" alt="AI 助手 — 8 大技能卡片" loading="lazy"></div>
+        <div>
+          <div class="reveal showcase-tag" style="color:#f43f5e;background:rgba(244,63,94,0.1)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/><path d="M18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z"/></svg> 🔥 核心亮点</div>
+          <h3 class="reveal showcase-title">内置 AI 助手 — 帮你管理 OpenClaw</h3>
+          <p class="reveal showcase-desc">不只是聊天——AI 助手能<strong>一键安装 OpenClaw</strong>、自动读取配置、浏览目录、执行命令，帮你诊断问题、修复错误。8 大技能卡片一键触发，新手也能轻松管理。</p>
+          <ul class="reveal showcase-list">
+            <li><span class="check">✓</span> 一键安装 &amp; 升级 OpenClaw</li>
+            <li><span class="check">✓</span> 终端执行 &amp; 文件读写 &amp; 目录浏览</li>
+            <li><span class="check">✓</span> 4 种模式（聊天/规划/执行/无限）</li>
+            <li><span class="check">✓</span> 危险操作二次确认，安全可控</li>
+            <li><span class="check">✓</span> 独立模型配置，兼容任意 OpenAI 格式 API</li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- AI 助手实战：工具调用 -->
+      <div class="showcase-row">
+        <div>
+          <div class="reveal showcase-tag" style="color:#f43f5e;background:rgba(244,63,94,0.1)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg> AI 实战</div>
+          <h3 class="reveal showcase-title">AI 自动调用工具诊断问题</h3>
+          <p class="reveal showcase-desc">点击「检查配置」技能卡片，AI 自动执行：获取系统信息 → 列出目录 → 读取 openclaw.json → 读取 models.json → 生成健康检查报告。全程可视化，每步工具调用的参数和结果一目了然。</p>
+          <ul class="reveal showcase-list">
+            <li><span class="check">✓</span> 实时工具调用可视化（参数 + 结果 + 状态）</li>
+            <li><span class="check">✓</span> AI 自动编排多步骤诊断流程</li>
+            <li><span class="check">✓</span> 生成结构化健康检查报告</li>
+            <li><span class="check">✓</span> 发现问题自动给出修复建议</li>
+          </ul>
+        </div>
+        <div class="reveal screenshot-frame" onclick="openLightbox('./11.png')"><img src="./11.png" alt="AI 助手工具调用实战" loading="lazy"></div>
+      </div>
+
+      <!-- AI 助手设置 -->
+      <div class="showcase-row">
+        <div class="reveal screenshot-frame img-first" onclick="openLightbox('./12.png')"><img src="./12.png" alt="AI 助手设置" loading="lazy"></div>
+        <div>
+          <div class="reveal showcase-tag" style="color:#f43f5e;background:rgba(244,63,94,0.1)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg> 灵活配置</div>
+          <h3 class="reveal showcase-title">独立模型配置，开箱即用</h3>
+          <p class="reveal showcase-desc">AI 助手使用独立的模型配置，不依赖 OpenClaw Gateway。填入任意兼容 OpenAI 格式的 API（DeepSeek、Kimi、通义千问等），即可开始使用。自动兼容 Chat Completions 和 Responses 两种 API 格式。</p>
+          <ul class="reveal showcase-list">
+            <li><span class="check">✓</span> 支持所有 OpenAI 兼容 API</li>
+            <li><span class="check">✓</span> 模型配置、工具权限、助手人设三合一</li>
+            <li><span class="check">✓</span> 一键测试连通性 &amp; 自动拉取模型列表</li>
+            <li><span class="check">✓</span> 无需安装 OpenClaw 也能使用 AI 助手</li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- AI 图片识别 -->
+      <div class="showcase-row">
+        <div>
+          <div class="reveal showcase-tag" style="color:#f43f5e;background:rgba(244,63,94,0.1)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg> 多模态</div>
+          <h3 class="reveal showcase-title">图片识别 — AI 一眼看懂</h3>
+          <p class="reveal showcase-desc">直接粘贴截图或拖拽图片到对话框，AI 自动识别图片内容并给出详细分析。支持截图、照片、文档图片等多种格式，真正的多模态交互体验。</p>
+          <ul class="reveal showcase-list">
+            <li><span class="check">✓</span> Ctrl+V 粘贴截图直接发送</li>
+            <li><span class="check">✓</span> 拖拽图片文件到对话框</li>
+            <li><span class="check">✓</span> AI 自动识别并分析图片内容</li>
+            <li><span class="check">✓</span> 图文混排 · 多模态对话</li>
+          </ul>
+        </div>
+        <div class="reveal screenshot-frame" onclick="openLightbox('./13.png')"><img src="./13.png" alt="AI 图片识别" loading="lazy"></div>
+      </div>
+
       <!-- 实时聊天 -->
       <div class="showcase-row">
-        <div class="reveal screenshot-frame img-first" onclick="openLightbox('./02.png')"><img src="./02.png" alt="实时聊天" loading="lazy"></div>
         <div>
           <div class="reveal showcase-tag c-indigo" style="background:var(--accent-10)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> 核心功能</div>
           <h3 class="reveal showcase-title">实时 AI 对话</h3>
@@ -568,6 +632,7 @@
             <li><span class="check">✓</span> / 快捷指令系统</li>
           </ul>
         </div>
+        <div class="reveal screenshot-frame" onclick="openLightbox('./02.png')"><img src="./02.png" alt="实时聊天" loading="lazy"></div>
       </div>
 
       <!-- 模型配置 -->