mirror of
https://github.com/qingchencloud/clawpanel.git
synced 2026-05-11 18:10:41 +08:00
v0.4.0: Gateway 进程守护、配置自愈、双配置同步、流式超时、模型删除安全切换
This commit is contained in:
晴天
BIN
docs/architecture.gif
Normal file
BIN
docs/architecture.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 923 KiB |
BIN
docs/feature-showcase.gif
Normal file
BIN
docs/feature-showcase.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 MiB |
288
docs/index.html
288
docs/index.html
@@ -8,21 +8,21 @@
|
||||
<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://qingchencloud.github.io/clawpanel/">
|
||||
<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:type" content="website">
|
||||
<meta property="og:url" content="https://qingchencloud.github.io/clawpanel/">
|
||||
<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://qingchencloud.github.io/clawpanel/01.png">
|
||||
<meta property="og:image" content="https://claw.qt.cool/01.png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="675">
|
||||
<meta property="og:image:alt" content="ClawPanel 仪表盘截图">
|
||||
<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://qingchencloud.github.io/clawpanel/01.png">
|
||||
<meta name="twitter:image" content="https://claw.qt.cool/01.png">
|
||||
<link rel="icon" href="./logo.png" type="image/png">
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
@@ -32,7 +32,7 @@
|
||||
"applicationCategory": "DeveloperApplication",
|
||||
"operatingSystem": "Windows, macOS, Linux",
|
||||
"description": "OpenClaw AI Agent 可视化管理面板，基于 Tauri v2 的跨平台桌面应用。支持仪表盘监控、多模型配置、实时 AI 聊天、记忆管理、Agent 管理、网关配置、内网穿透等功能。",
|
||||
"url": "https://qingchencloud.github.io/clawpanel/",
|
||||
"url": "https://claw.qt.cool/",
|
||||
"downloadUrl": "https://github.com/qingchencloud/clawpanel/releases/latest",
|
||||
"softwareVersion": "0.3.0",
|
||||
"author": {
|
||||
@@ -46,7 +46,7 @@
|
||||
"price": "0",
|
||||
"priceCurrency": "CNY"
|
||||
},
|
||||
"screenshot": "https://qingchencloud.github.io/clawpanel/01.png",
|
||||
"screenshot": "https://claw.qt.cool/01.png",
|
||||
"keywords": "OpenClaw, AI Agent, 管理面板, Tauri, 跨平台, 开源, 免费, LLM, 多模型"
|
||||
}
|
||||
</script>
|
||||
@@ -119,7 +119,7 @@
|
||||
/* ══════════════ Gradient Text ══════════════ */
|
||||
.gradient-text { background: linear-gradient(135deg, #6366f1, #a855f7, #22d3ee, #6366f1); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradShift 6s ease-in-out infinite; position: relative; }
|
||||
@keyframes gradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
|
||||
.shimmer { position: relative; overflow: hidden; display: inline-block; }
|
||||
.shimmer { position: relative; overflow: hidden; display: inline-block; vertical-align: baseline; }
|
||||
.shimmer::after { content:''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); animation: shimmer 3s ease-in-out infinite; }
|
||||
@keyframes shimmer { 0% { left: -100%; } 100% { left: 200%; } }
|
||||
|
||||
@@ -283,6 +283,51 @@
|
||||
.footer-links { display: flex; gap: 24px; }
|
||||
.footer-link { color: var(--text-t); transition: color 0.2s; } .footer-link:hover { color: var(--text-s); }
|
||||
|
||||
/* ══════════════ Video Demo Section ══════════════ */
|
||||
.video-demo-wrap { max-width: 960px; margin: 0 auto; position: relative; padding: 0 16px; }
|
||||
.video-demo-wrap::before { content:''; position: absolute; inset: -2px; border-radius: 18px; background: conic-gradient(from var(--border-angle,0deg), #6366f1, #a855f7, #22d3ee, #10b981, #6366f1); z-index: 0; animation: borderSpin 4s linear infinite; opacity: 0.5; }
|
||||
.video-demo-wrap::after { content:''; position: absolute; inset: -2px; border-radius: 18px; background: conic-gradient(from var(--border-angle,0deg), #6366f1, #a855f7, #22d3ee, #10b981, #6366f1); z-index: 0; animation: borderSpin 4s linear infinite; filter: blur(20px); opacity: 0.3; }
|
||||
.video-demo-frame { border-radius: 16px; overflow: hidden; position: relative; background: #000; z-index: 1; box-shadow: 0 20px 60px -15px rgba(99,102,241,0.2); transition: box-shadow 0.5s; }
|
||||
.video-demo-wrap:hover .video-demo-frame { box-shadow: 0 30px 80px -15px rgba(99,102,241,0.35); }
|
||||
.video-demo-frame video { width: 100%; display: block; }
|
||||
.video-play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); cursor: pointer; transition: background 0.3s; z-index: 2; }
|
||||
.video-play-overlay:hover { background: rgba(0,0,0,0.15); }
|
||||
.video-play-overlay.hidden { display: none; }
|
||||
.play-btn { width: 80px; height: 80px; border-radius: 50%; background: rgba(99,102,241,0.3); backdrop-filter: blur(12px); border: 2px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; transition: transform 0.3s, background 0.3s, box-shadow 0.3s; box-shadow: 0 8px 32px rgba(99,102,241,0.3); }
|
||||
.play-btn:hover { transform: scale(1.12); background: rgba(99,102,241,0.5); box-shadow: 0 12px 40px rgba(99,102,241,0.5); }
|
||||
.play-btn svg { width: 32px; height: 32px; fill: #fff; margin-left: 4px; }
|
||||
.video-demo-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 99px; font-size: 13px; color: var(--accent); background: var(--accent-5); border: 1px solid rgba(99,102,241,0.15); margin-bottom: 16px; white-space: nowrap; }
|
||||
.video-demo-badge svg { width: 14px; height: 14px; flex-shrink: 0; }
|
||||
.video-demo-glow { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); width: 70%; height: 80px; background: radial-gradient(ellipse, rgba(99,102,241,0.12), transparent 70%); filter: blur(30px); pointer-events: none; z-index: 0; }
|
||||
html:not(.dark) .video-demo-glow { background: radial-gradient(ellipse, rgba(99,102,241,0.06), transparent 70%); }
|
||||
|
||||
/* ══════════════ Download Section ══════════════ */
|
||||
.download-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 32px; }
|
||||
.download-card { border-radius: 20px; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: blur(8px); padding: 32px 24px; text-align: center; transition: all 0.35s cubic-bezier(0.16,1,0.3,1); position: relative; overflow: hidden; }
|
||||
.download-card:hover { transform: translateY(-6px); border-color: var(--border-h); box-shadow: 0 16px 48px -12px rgba(99,102,241,0.18); }
|
||||
.download-card::before { content:''; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(99,102,241,0.06), transparent 60%); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
|
||||
.download-card:hover::before { opacity: 1; }
|
||||
.download-icon { font-size: 40px; margin-bottom: 16px; display: block; }
|
||||
.download-card h3 { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
|
||||
.download-card .dl-desc { font-size: 13px; color: var(--text-s); margin-bottom: 20px; }
|
||||
.dl-links { display: flex; flex-direction: column; gap: 8px; }
|
||||
.dl-link { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card-s); font-size: 13px; font-weight: 600; color: var(--text); transition: all 0.25s; text-decoration: none; }
|
||||
.dl-link:hover { border-color: var(--border-h); background: var(--accent-5); color: var(--accent); }
|
||||
.dl-link .dl-format { font-size: 11px; color: var(--text-t); font-weight: 400; }
|
||||
.dl-link:hover .dl-format { color: var(--accent); opacity: 0.7; }
|
||||
.dl-link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.4; transition: opacity 0.2s; }
|
||||
.dl-link:hover svg { opacity: 1; color: var(--accent); }
|
||||
.download-version { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 99px; font-size: 14px; font-weight: 600; color: var(--accent); background: var(--accent-5); border: 1px solid rgba(99,102,241,0.15); margin-bottom: 16px; }
|
||||
.download-version .pulse { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: pulse 2s ease-in-out infinite; }
|
||||
.download-note { font-size: 13px; color: var(--text-t); margin-top: 24px; }
|
||||
.download-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
|
||||
@media (max-width: 768px) { .download-grid { grid-template-columns: 1fr; } }
|
||||
|
||||
/* ══════════════ Architecture GIF ══════════════ */
|
||||
.arch-gif-wrap { max-width: 700px; margin: 0 auto 40px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--card-shadow); transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
|
||||
.arch-gif-wrap:hover { transform: translateY(-4px); }
|
||||
.arch-gif-wrap img { width: 100%; display: block; }
|
||||
|
||||
/* ══════════════ Lightbox ══════════════ */
|
||||
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.92); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; cursor: zoom-out; padding: 24px; }
|
||||
.lightbox.active { display: flex; }
|
||||
@@ -337,7 +382,6 @@
|
||||
<body>
|
||||
|
||||
<!-- ══════════════ Nav ══════════════ -->
|
||||
<div class="noise"></div>
|
||||
<nav class="nav">
|
||||
<div class="scroll-progress" id="scroll-progress"></div>
|
||||
<div class="nav-inner">
|
||||
@@ -347,6 +391,7 @@
|
||||
<a href="#tech" class="nav-link">架构</a>
|
||||
<a href="#quickstart" class="nav-link">开始</a>
|
||||
<a href="#community" class="nav-link">社区</a>
|
||||
<a href="#download" class="nav-link">下载</a>
|
||||
<a href="https://github.com/qingchencloud/clawpanel" target="_blank" rel="noopener" class="nav-link">GitHub</a>
|
||||
<button id="theme-toggle" class="theme-btn" aria-label="切换主题">
|
||||
<svg class="sun" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
|
||||
@@ -379,18 +424,16 @@
|
||||
<div class="aurora">
|
||||
<div class="aurora-band aurora-1"></div>
|
||||
<div class="aurora-band aurora-2"></div>
|
||||
<div class="aurora-band aurora-3"></div>
|
||||
</div>
|
||||
<div class="grid-bg"></div>
|
||||
<div class="orb orb-1" id="orb1"></div>
|
||||
<div class="orb orb-2" id="orb2"></div>
|
||||
<div class="particles" id="particles"></div>
|
||||
<div class="hero-inner">
|
||||
<div class="reveal hero-badge"><span class="pulse"></span> v0.3.0 已发布 — 社区交流 & 高级视觉特效</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-cta">
|
||||
<a href="https://github.com/qingchencloud/clawpanel/releases/latest" target="_blank" rel="noopener" class="btn btn-primary">
|
||||
<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>
|
||||
下载最新版
|
||||
</a>
|
||||
@@ -411,10 +454,38 @@
|
||||
<div class="grid-bg"></div>
|
||||
<div class="container" style="position:relative;z-index:10">
|
||||
<div class="stats-grid">
|
||||
<div class="reveal stat-card float-a"><div class="stat-value c-indigo counter" data-target="10">0</div><div class="stat-label">功能模块</div></div>
|
||||
<div class="reveal stat-card float-b"><div class="stat-value c-purple">Tauri v2</div><div class="stat-label">桌面框架</div></div>
|
||||
<div class="reveal stat-card float-a"><div class="stat-value c-cyan">Vanilla JS</div><div class="stat-label">前端框架</div></div>
|
||||
<div class="reveal stat-card float-b"><div class="stat-value c-emerald counter" data-target="100" data-suffix="%">0</div><div class="stat-label">开源免费</div></div>
|
||||
<div class="reveal stat-card"><div class="stat-value c-indigo counter" data-target="10">0</div><div class="stat-label">功能模块</div></div>
|
||||
<div class="reveal stat-card"><div class="stat-value c-purple">Tauri v2</div><div class="stat-label">桌面框架</div></div>
|
||||
<div class="reveal stat-card"><div class="stat-value c-cyan">3</div><div class="stat-label">跨平台支持</div></div>
|
||||
<div class="reveal stat-card"><div class="stat-value c-emerald">MIT</div><div class="stat-label">开源协议</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ══════════════ Video Demo ══════════════ -->
|
||||
<section class="section" style="padding-top:48px">
|
||||
<div class="grid-bg"></div>
|
||||
<div class="container" style="position:relative;z-index:10">
|
||||
<div class="section-header">
|
||||
<div class="reveal video-demo-badge">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||||
38 秒快速了解
|
||||
</div>
|
||||
<h2 class="reveal section-title">产品 <span class="gradient-text">演示视频</span></h2>
|
||||
<p class="reveal section-desc">从仪表盘到记忆管理，一个视频看完所有核心功能</p>
|
||||
</div>
|
||||
<div class="reveal video-demo-wrap">
|
||||
<div class="video-demo-frame">
|
||||
<div class="video-play-overlay" id="videoOverlay" onclick="playDemoVideo()">
|
||||
<div class="play-btn">
|
||||
<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()">
|
||||
<source src="./promo-web.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<div class="video-demo-glow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -424,7 +495,7 @@
|
||||
<div class="orb orb-3"></div>
|
||||
<div class="container" style="position:relative;z-index:10">
|
||||
<div class="section-header">
|
||||
<h2 class="reveal section-title">强大的 <span class="gradient-text shimmer">功能矩阵</span></h2>
|
||||
<h2 class="reveal section-title">强大的 <span class="gradient-text">功能矩阵</span></h2>
|
||||
<p class="reveal section-desc">一个面板，管理 OpenClaw 的方方面面</p>
|
||||
</div>
|
||||
|
||||
@@ -432,7 +503,7 @@
|
||||
<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)">💬 核心功能</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>
|
||||
<p class="reveal showcase-desc">WebSocket 直连 Gateway，流式响应实时显示。支持图片附件、多模态交互、Markdown 渲染、会话管理与快捷指令。</p>
|
||||
<ul class="reveal showcase-list">
|
||||
@@ -447,7 +518,7 @@
|
||||
<!-- 模型配置 -->
|
||||
<div class="showcase-row">
|
||||
<div>
|
||||
<div class="reveal showcase-tag" style="color:#a855f7;background:rgba(168,85,247,0.1)">🧠 配置中心</div>
|
||||
<div class="reveal showcase-tag" style="color:#a855f7;background:rgba(168,85,247,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">支持 OpenAI、DeepSeek、Kimi 等多家服务商。可视化管理模型列表，一键设为主模型，自动备选切换。</p>
|
||||
<ul class="reveal showcase-list">
|
||||
@@ -464,7 +535,7 @@
|
||||
<div class="showcase-row">
|
||||
<div class="reveal screenshot-frame img-first" onclick="openLightbox('./08.png')"><img src="./08.png" alt="记忆文件" loading="lazy"></div>
|
||||
<div>
|
||||
<div class="reveal showcase-tag" style="color:#22d3ee;background:rgba(34,211,238,0.1)">🗂️ 数据管理</div>
|
||||
<div class="reveal showcase-tag" style="color:#22d3ee;background:rgba(34,211,238,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="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/></svg> 数据管理</div>
|
||||
<h3 class="reveal showcase-title">让 Agent 拥有记忆</h3>
|
||||
<p class="reveal showcase-desc">在线编辑 Agent 核心配置文件（AGENTS.md、SOUL.md 等），管理工作记忆和记忆归档。支持 ZIP 一键打包导出。</p>
|
||||
<ul class="reveal showcase-list">
|
||||
@@ -479,7 +550,7 @@
|
||||
<!-- Gateway -->
|
||||
<div class="showcase-row">
|
||||
<div>
|
||||
<div class="reveal showcase-tag" style="color:#10b981;background:rgba(16,185,129,0.1)">🌐 网关管控</div>
|
||||
<div class="reveal showcase-tag" style="color:#10b981;background:rgba(16,185,129,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"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg> 网关管控</div>
|
||||
<h3 class="reveal showcase-title">安全访问，可视化配置</h3>
|
||||
<p class="reveal showcase-desc">Gateway 端口、绑定范围、运行模式、Token / 密码认证方式，卡片式选项直观配置，即改即生效。</p>
|
||||
<ul class="reveal showcase-list">
|
||||
@@ -496,7 +567,7 @@
|
||||
<div class="showcase-row">
|
||||
<div class="reveal screenshot-frame img-first" onclick="openLightbox('./06.png')"><img src="./06.png" alt="Agent 管理" loading="lazy"></div>
|
||||
<div>
|
||||
<div class="reveal showcase-tag" style="color:#f97316;background:rgba(249,115,22,0.1)">🤖 智能体</div>
|
||||
<div class="reveal showcase-tag" style="color:#f97316;background:rgba(249,115,22,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="10" x="3" y="11" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" x2="8" y1="16" y2="16"/><line x1="16" x2="16" y1="16" y2="16"/></svg> 智能体</div>
|
||||
<h3 class="reveal showcase-title">多 Agent 协作管理</h3>
|
||||
<p class="reveal showcase-desc">创建和管理多个 AI Agent，配置各自的身份、模型和独立工作区。支持备份、编辑与一键切换。</p>
|
||||
<ul class="reveal showcase-list">
|
||||
@@ -519,16 +590,16 @@
|
||||
<p class="reveal section-desc">运维、监控、诊断，面面俱到</p>
|
||||
</div>
|
||||
<div class="gallery-grid">
|
||||
<div class="reveal gallery-card" onclick="openLightbox('./03.png')"><img src="./03.png" alt="服务管理" loading="lazy"><div class="gallery-label">⚙️ 服务管理</div></div>
|
||||
<div class="reveal gallery-card" onclick="openLightbox('./04.png')"><img src="./04.png" alt="日志查看" loading="lazy"><div class="gallery-label">📋 日志查看</div></div>
|
||||
<div class="reveal gallery-card" onclick="openLightbox('./09.png')"><img src="./09.png" alt="扩展工具" loading="lazy"><div class="gallery-label">🔌 扩展工具</div></div>
|
||||
<div class="reveal gallery-card" onclick="openLightbox('./10.png')"><img src="./10.png" alt="系统诊断" loading="lazy"><div class="gallery-label">🔍 系统诊断</div></div>
|
||||
<div class="reveal gallery-card" onclick="openLightbox('./03.png')"><img src="./03.png" alt="服务管理" loading="lazy"><div class="gallery-label"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><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></div>
|
||||
<div class="reveal gallery-card" onclick="openLightbox('./04.png')"><img src="./04.png" alt="日志查看" loading="lazy"><div class="gallery-label"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M15 2H9a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/></svg> 日志查看</div></div>
|
||||
<div class="reveal gallery-card" onclick="openLightbox('./09.png')"><img src="./09.png" alt="扩展工具" loading="lazy"><div class="gallery-label"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/></svg> 扩展工具</div></div>
|
||||
<div class="reveal gallery-card" onclick="openLightbox('./10.png')"><img src="./10.png" alt="系统诊断" loading="lazy"><div class="gallery-label"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg> 系统诊断</div></div>
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="reveal info-card"><div class="ic">⚙️</div><h4>服务管理</h4><p>启停控制、版本检测、一键升级、配置备份与恢复</p></div>
|
||||
<div class="reveal info-card"><div class="ic">📋</div><h4>日志查看</h4><p>多日志源实时查看、关键字搜索、自动滚动跟踪</p></div>
|
||||
<div class="reveal info-card"><div class="ic">🔌</div><h4>扩展工具</h4><p>cftunnel 内网穿透、ClawApp 移动客户端管理</p></div>
|
||||
<div class="reveal info-card"><div class="ic">🔍</div><h4>系统诊断</h4><p>全面健康检测、WebSocket 测试、一键修复配对</p></div>
|
||||
<div class="reveal info-card"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" 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><h4>服务管理</h4><p>启停控制、版本检测、一键升级、配置备份与恢复</p></div>
|
||||
<div class="reveal info-card"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M15 2H9a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/></svg></div><h4>日志查看</h4><p>多日志源实时查看、关键字搜索、自动滚动跟踪</p></div>
|
||||
<div class="reveal info-card"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/></svg></div><h4>扩展工具</h4><p>cftunnel 内网穿透、ClawApp 移动客户端管理</p></div>
|
||||
<div class="reveal info-card"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></div><h4>系统诊断</h4><p>全面健康检测、WebSocket 测试、一键修复配对</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -541,57 +612,30 @@
|
||||
<h2 class="reveal section-title"><span class="gradient-text">技术架构</span></h2>
|
||||
<p class="reveal section-desc">精挑细选的技术栈，追求极致性能与开发体验</p>
|
||||
</div>
|
||||
<div class="reveal arch-gif-wrap">
|
||||
<img src="./architecture.gif" alt="ClawPanel 生态架构动画" loading="lazy">
|
||||
</div>
|
||||
<div class="tech-grid" id="tech-grid">
|
||||
<div class="reveal tech-card">
|
||||
<div class="tech-header"><div class="tech-icon" style="background:rgba(99,102,241,0.1)">🦀</div><div><div class="tech-name">Rust + Tauri v2</div><div class="tech-sub">后端运行时</div></div></div>
|
||||
<div class="tech-header"><div class="tech-icon" style="background:rgba(99,102,241,0.1)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 7h.01"/><path d="M17 7h.01"/><path d="M7 17h.01"/><path d="M17 17h.01"/></svg></div><div><div class="tech-name">Rust + Tauri v2</div><div class="tech-sub">后端运行时</div></div></div>
|
||||
<div class="tech-desc">原生编译，内存安全，跨平台打包。通过 IPC 与前端高效通信，Shell Plugin 执行本地命令。</div>
|
||||
</div>
|
||||
<div class="reveal tech-card">
|
||||
<div class="tech-header"><div class="tech-icon" style="background:rgba(234,179,8,0.1)">⚡</div><div><div class="tech-name">Vanilla JS + Vite</div><div class="tech-sub">前端架构</div></div></div>
|
||||
<div class="tech-header"><div class="tech-icon" style="background:rgba(234,179,8,0.1)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#eab308" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg></div><div><div class="tech-name">Vanilla JS + Vite</div><div class="tech-sub">前端架构</div></div></div>
|
||||
<div class="tech-desc">零框架依赖，SPA 路由，组件化设计。Vite 极速 HMR，支持浏览器 mock 模式独立调试。</div>
|
||||
</div>
|
||||
<div class="reveal tech-card">
|
||||
<div class="tech-header"><div class="tech-icon" style="background:rgba(34,211,238,0.1)">🔌</div><div><div class="tech-name">WebSocket + RPC</div><div class="tech-sub">实时通信</div></div></div>
|
||||
<div class="tech-header"><div class="tech-icon" style="background:rgba(34,211,238,0.1)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22d3ee" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg></div><div><div class="tech-name">WebSocket + RPC</div><div class="tech-sub">实时通信</div></div></div>
|
||||
<div class="tech-desc">WsClient 管理 WebSocket 连接、心跳保活与自动重连。RPC 请求-响应 + 事件订阅双模式。</div>
|
||||
</div>
|
||||
<div class="reveal tech-card">
|
||||
<div class="tech-header"><div class="tech-icon" style="background:rgba(168,85,247,0.1)">🎨</div><div><div class="tech-name">CSS Variables</div><div class="tech-sub">主题系统</div></div></div>
|
||||
<div class="tech-header"><div class="tech-icon" style="background:rgba(168,85,247,0.1)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#a855f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r=".5" fill="#a855f7"/><circle cx="17.5" cy="10.5" r=".5" fill="#a855f7"/><circle cx="8.5" cy="7.5" r=".5" fill="#a855f7"/><circle cx="6.5" cy="12.5" r=".5" fill="#a855f7"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg></div><div><div class="tech-name">CSS Variables</div><div class="tech-sub">主题系统</div></div></div>
|
||||
<div class="tech-desc">暗色 / 亮色主题无闪烁切换，玻璃拟态 UI 风格，CSS 自定义属性实现全局样式管理。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ══════════════ Marquee ══════════════ -->
|
||||
<div class="marquee-wrap">
|
||||
<div class="marquee-track">
|
||||
<span class="marquee-item">Rust</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">Tauri v2</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">Vanilla JS</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">Vite</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">WebSocket</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">CSS Variables</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">IPC Bridge</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">Ed25519</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">Shell Plugin</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">SPA Router</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">Glassmorphism</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">Cross-Platform</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">Rust</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">Tauri v2</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">Vanilla JS</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">Vite</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">WebSocket</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">CSS Variables</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">IPC Bridge</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">Ed25519</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">Shell Plugin</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">SPA Router</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">Glassmorphism</span><span class="marquee-item marquee-dot">·</span>
|
||||
<span class="marquee-item">Cross-Platform</span><span class="marquee-item marquee-dot">·</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══════════════ Quickstart ══════════════ -->
|
||||
<section id="quickstart" class="section">
|
||||
<div class="container-sm" style="position:relative;z-index:10">
|
||||
@@ -632,21 +676,84 @@
|
||||
</div>
|
||||
<div class="eco-list">
|
||||
<a href="https://github.com/1186258278/OpenClawChineseTranslation" target="_blank" rel="noopener" class="reveal eco-card">
|
||||
<div><h3>🧠 OpenClaw</h3><p>AI Agent 框架 — ClawPanel 的核心管理目标</p></div>
|
||||
<div><h3><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M17.599 6.5a3 3 0 0 0 .399-1.375"/><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"/><path d="M3.477 10.896a4 4 0 0 1 .585-.396"/><path d="M19.938 10.5a4 4 0 0 1 .585.396"/><path d="M6 18a4 4 0 0 1-1.967-.516"/><path d="M19.967 17.484A4 4 0 0 1 18 18"/></svg> OpenClaw</h3><p>AI Agent 框架 — ClawPanel 的核心管理目标</p></div>
|
||||
<span class="eco-arrow">→</span>
|
||||
</a>
|
||||
<a href="https://github.com/qingchencloud/clawapp" target="_blank" rel="noopener" class="reveal eco-card">
|
||||
<div><h3>📱 ClawApp</h3><p>跨平台移动聊天客户端，随时随地与 AI Agent 对话</p></div>
|
||||
<div><h3><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg> ClawApp</h3><p>跨平台移动聊天客户端，随时随地与 AI Agent 对话</p></div>
|
||||
<span class="eco-arrow">→</span>
|
||||
</a>
|
||||
<a href="https://github.com/qingchencloud/cftunnel" target="_blank" rel="noopener" class="reveal eco-card">
|
||||
<div><h3>🔗 cftunnel</h3><p>Cloudflare Tunnel 内网穿透工具，一键暴露本地服务</p></div>
|
||||
<div><h3><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg> cftunnel</h3><p>Cloudflare Tunnel 内网穿透工具，一键暴露本地服务</p></div>
|
||||
<span class="eco-arrow">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ══════════════ Download ══════════════ -->
|
||||
<section id="download" class="section cta-section">
|
||||
<div class="orb orb-2" style="top:auto;bottom:-100px"></div>
|
||||
<div class="container-sm" style="position:relative;z-index:10">
|
||||
<div class="section-header">
|
||||
<div class="reveal download-version"><span class="pulse"></span> v0.3.0 最新版</div>
|
||||
<h2 class="reveal section-title"><span class="gradient-text">下载安装</span></h2>
|
||||
<p class="reveal section-desc">选择你的操作系统，一键下载安装</p>
|
||||
</div>
|
||||
<div class="download-grid">
|
||||
<div class="reveal download-card">
|
||||
<span class="download-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z"/><path d="M10 2c1 .5 2 2 2 5"/></svg></span>
|
||||
<h3>macOS</h3>
|
||||
<p class="dl-desc">支持 Apple Silicon 和 Intel 芯片</p>
|
||||
<div class="dl-links">
|
||||
<a class="dl-link" href="https://github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.3.0_aarch64.dmg" target="_blank" rel="noopener">
|
||||
Apple Silicon (M1/M2/M3/M4)
|
||||
<span class="dl-format">.dmg</span>
|
||||
</a>
|
||||
<a class="dl-link" href="https://github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.3.0_x64.dmg" target="_blank" rel="noopener">
|
||||
Intel 芯片
|
||||
<span class="dl-format">.dmg</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reveal download-card">
|
||||
<span class="download-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/><path d="m6 8 4 4-4 4"/><path d="M12 16h4"/></svg></span>
|
||||
<h3>Windows</h3>
|
||||
<p class="dl-desc">支持 Windows 10 及以上版本</p>
|
||||
<div class="dl-links">
|
||||
<a class="dl-link" href="https://github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.3.0_x64-setup.exe" target="_blank" rel="noopener">
|
||||
安装程序
|
||||
<span class="dl-format">.exe</span>
|
||||
</a>
|
||||
<a class="dl-link" href="https://github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.3.0_x64_en-US.msi" target="_blank" rel="noopener">
|
||||
MSI 安装包
|
||||
<span class="dl-format">.msi</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reveal download-card">
|
||||
<span class="download-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 17 2 2 4-4"/><path d="M12 13h8"/><path d="M12 17h8"/><path d="M12 21h8"/><path d="M3 7V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2"/><path d="M3 11v2a2 2 0 0 0 2 2h1"/><path d="M21 11v2a2 2 0 0 1-2 2h-1"/></svg></span>
|
||||
<h3>Linux</h3>
|
||||
<p class="dl-desc">支持主流 Linux 发行版</p>
|
||||
<div class="dl-links">
|
||||
<a class="dl-link" href="https://github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.3.0_amd64.AppImage" target="_blank" rel="noopener">
|
||||
通用版
|
||||
<span class="dl-format">.AppImage</span>
|
||||
</a>
|
||||
<a class="dl-link" href="https://github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.3.0_amd64.deb" target="_blank" rel="noopener">
|
||||
Debian / Ubuntu
|
||||
<span class="dl-format">.deb</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reveal download-note" style="text-align:center">
|
||||
<p>查看 <a href="https://github.com/qingchencloud/clawpanel/releases" target="_blank" rel="noopener">所有版本</a> · 需要帮助？阅读 <a href="https://github.com/qingchencloud/clawpanel#readme" target="_blank" rel="noopener">安装文档</a></p>
|
||||
<p style="margin-top:12px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px;opacity:0.7"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg> 国内网络下载慢？加入 <a href="https://qt.cool/c/OpenClaw" target="_blank" rel="noopener">QQ 群</a> 或 <a href="https://qt.cool/c/OpenClawWx" target="_blank" rel="noopener">微信群</a> 获取安装包直传</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ══════════════ Community ══════════════ -->
|
||||
<section id="community" class="section">
|
||||
<div class="orb orb-1" style="top:auto;bottom:-200px;left:auto;right:-100px"></div>
|
||||
@@ -690,25 +797,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ══════════════ CTA ══════════════ -->
|
||||
<section class="section cta-section">
|
||||
<div class="orb orb-2" style="top:auto;bottom:-100px"></div>
|
||||
<div class="container" style="position:relative;z-index:10">
|
||||
<h2 class="reveal section-title" style="font-size:2.5rem">准备好了吗？</h2>
|
||||
<p class="reveal section-desc" style="margin-bottom:40px">下载 ClawPanel，开始管理你的 AI Agent</p>
|
||||
<div class="reveal cta-buttons">
|
||||
<a href="https://github.com/qingchencloud/clawpanel/releases/latest" target="_blank" rel="noopener" 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>
|
||||
立即下载
|
||||
</a>
|
||||
<a href="https://github.com/qingchencloud/clawpanel" target="_blank" rel="noopener" class="btn btn-outline">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" style="width:18px;height:18px"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
|
||||
Star on GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ══════════════ Footer ══════════════ -->
|
||||
<footer class="footer">
|
||||
<div class="footer-inner">
|
||||
@@ -817,19 +905,6 @@
|
||||
});
|
||||
});
|
||||
|
||||
/* ── Particles ── */
|
||||
(function() {
|
||||
var c = document.getElementById('particles');
|
||||
for (var i = 0; i < 30; i++) {
|
||||
var p = document.createElement('span');
|
||||
p.className = 'particle';
|
||||
p.style.left = Math.random() * 100 + '%';
|
||||
p.style.animationDuration = (8 + Math.random() * 12) + 's';
|
||||
p.style.animationDelay = (Math.random() * 10) + 's';
|
||||
p.style.width = p.style.height = (1 + Math.random() * 2) + 'px';
|
||||
c.appendChild(p);
|
||||
}
|
||||
})();
|
||||
|
||||
/* ── Scroll Progress Bar ── */
|
||||
var progressBar = document.getElementById('scroll-progress');
|
||||
@@ -866,6 +941,23 @@
|
||||
});
|
||||
});
|
||||
|
||||
/* ── Video Demo Controls ── */
|
||||
function playDemoVideo() {
|
||||
var v = document.getElementById('demoVideo');
|
||||
var o = document.getElementById('videoOverlay');
|
||||
v.play();
|
||||
o.classList.add('hidden');
|
||||
}
|
||||
function toggleDemoVideo() {
|
||||
var v = document.getElementById('demoVideo');
|
||||
var o = document.getElementById('videoOverlay');
|
||||
if (v.paused) { v.play(); o.classList.add('hidden'); }
|
||||
else { v.pause(); o.classList.remove('hidden'); }
|
||||
}
|
||||
document.getElementById('demoVideo').addEventListener('ended', function() {
|
||||
document.getElementById('videoOverlay').classList.remove('hidden');
|
||||
});
|
||||
|
||||
/* ── 3D Tilt on Tech & Gallery Cards ── */
|
||||
document.querySelectorAll('.tech-card, .gallery-card, .eco-card').forEach(function(card) {
|
||||
card.classList.add('tilt-card');
|
||||
|
||||
BIN
docs/quick-stats.gif
Normal file
BIN
docs/quick-stats.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 967 KiB |
BIN
docs/terminal-demo.gif
Normal file
BIN
docs/terminal-demo.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 MiB |
Reference in New Issue
Block a user