mirror of
https://github.com/qingchencloud/clawpanel.git
synced 2026-05-07 06:12:58 +08:00
36eaa64bf4
- 修复 #212 AI 消息气泡空白 - 修复 #215 HTTPS 下 WebSocket Mixed Content - 修复 #219 多实例版本检测错误 - 修复引擎切换后仪表盘无限加载 - 修复热更新假更新循环（macOS/Linux） - CI release 构建前自动同步版本号
1870 lines
151 KiB
HTML
1870 lines
151 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" class="dark">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ClawPanel - OpenClaw & Hermes Agent 多引擎 AI 管理面板 | 快速搭建、配置、监控你的 AI 智能体</title>
|
||
<meta name="description" content="ClawPanel 是支持多 AI Agent 框架的可视化管理面板，目前支持 OpenClaw 和 Hermes Agent 双引擎。基于 Tauri v2 构建的跨平台桌面应用。内置晴辰助手（AI Assistant）支持工具调用（终端执行、文件读写、目录浏览），让 AI 帮你诊断和修复配置。支持仪表盘监控、多模型配置（OpenAI/DeepSeek/Kimi/Anthropic）、晴辰云 AI 接口一键接入、Hermes Agent 对话、消息渠道管理、内置 QQ 机器人、实时 AI 聊天、记忆管理、Agent 管理、网关配置、服务管控、日志查看、内网穿透、系统诊断。开源免费，支持 Windows/macOS/Linux，支持 11 种语言。">
|
||
<meta name="keywords" content="ClawPanel, OpenClaw, Hermes Agent, AI Agent, AI 智能体, 多引擎, 管理面板, 可视化管理, 快速搭建, 一键安装, 桌面应用, 跨平台, Tauri, Tauri v2, Rust, 开源, 免费, LLM, 大语言模型, 多模型, 模型配置, OpenAI, DeepSeek, Kimi, Anthropic, Claude, 晴辰云, 晴辰云 AI 接口, QingchenCloud, 晴辰助手, AI Assistant, 消息渠道, QQ 机器人, Telegram, Discord, 实时聊天, AI 对话, 流式响应, 记忆管理, Agent 管理, 多 Agent, 网关配置, Gateway, 服务管理, 日志查看, 内网穿透, Cloudflare Tunnel, 系统诊断, WebSocket, 仪表盘, 监控, 配置管理, 私有部署, 本地部署, 自托管, AI 工具, AI 平台, 智能体平台, 人工智能, 深度学习, 自然语言处理, NLP, 模型调度, 模型切换, 备选模型, 开箱即用, 零代码, 低代码, admin panel, dashboard, open source AI, self-hosted AI, local AI, AI management, Docker 部署, 开发板, 树莓派, ARM, i18n, 多语言">
|
||
<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 & Hermes Agent 多引擎 AI 管理面板 | 快速搭建你的 AI 智能体">
|
||
<meta property="og:description" content="基于 Tauri v2 的跨平台桌面应用，支持 OpenClaw 和 Hermes Agent 双引擎 AI 管理。内置晴辰助手支持工具调用，晴辰云 AI 接口一键接入，消息渠道管理与内置 QQ 机器人。开源免费，支持 11 种语言。">
|
||
<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/00.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 & Hermes Agent 多引擎 AI 管理面板">
|
||
<meta name="twitter:description" content="基于 Tauri v2 的跨平台桌面应用。支持 OpenClaw & Hermes Agent 双引擎，内置晴辰助手与晴辰云 AI 接口，消息渠道管理、QQ 机器人、多模型配置与实时 AI 聊天。开源免费。">
|
||
<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">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "SoftwareApplication",
|
||
"name": "ClawPanel",
|
||
"applicationCategory": "DeveloperApplication",
|
||
"operatingSystem": "Windows, macOS, Linux",
|
||
"description": "支持 OpenClaw 和 Hermes Agent 双引擎的多 AI Agent 可视化管理面板，基于 Tauri v2 的跨平台桌面应用。内置晴辰助手支持工具调用，晴辰云 AI 接口一键接入。支持仪表盘监控、多模型配置、Hermes Agent 对话、消息渠道管理、内置 QQ 机器人、实时 AI 聊天、记忆管理、Agent 管理、网关配置、内网穿透等功能。支持 11 种语言。",
|
||
"url": "https://claw.qt.cool/",
|
||
"downloadUrl": "https://github.com/qingchencloud/clawpanel/releases/latest",
|
||
"softwareVersion": "0.13.3",
|
||
"author": {
|
||
"@type": "Organization",
|
||
"name": "晴辰云 QingchenCloud",
|
||
"url": "https://qt.cool"
|
||
},
|
||
"license": "https://www.gnu.org/licenses/agpl-3.0.html",
|
||
"offers": {
|
||
"@type": "Offer",
|
||
"price": "0",
|
||
"priceCurrency": "CNY"
|
||
},
|
||
"screenshot": "https://claw.qt.cool/00.png",
|
||
"keywords": "OpenClaw, Hermes Agent, AI Agent, 多引擎, 管理面板, Tauri, 跨平台, 开源, 免费, LLM, 多模型, 晴辰云, 晴辰助手, Discord"
|
||
}
|
||
</script>
|
||
<style>
|
||
/* ══════════════ Theme Variables ══════════════ */
|
||
:root {
|
||
--bg: #ffffff; --bg-s: #f9fafb; --bg-card: rgba(255,255,255,0.8); --bg-card-s: rgba(255,255,255,0.6);
|
||
--text: #111827; --text-s: #6b7280; --text-t: #9ca3af;
|
||
--border: rgba(0,0,0,0.08); --border-h: rgba(99,102,241,0.3);
|
||
--accent: #6366f1; --accent-h: #4f46e5; --accent-10: rgba(99,102,241,0.1); --accent-5: rgba(99,102,241,0.05);
|
||
--nav-bg: rgba(255,255,255,0.82); --card-shadow: 0 4px 24px -6px rgba(0,0,0,0.07);
|
||
}
|
||
html.dark {
|
||
--bg: #0a0a0f; --bg-s: #111118; --bg-card: rgba(255,255,255,0.025); --bg-card-s: rgba(255,255,255,0.03);
|
||
--text: #f3f4f6; --text-s: #9ca3af; --text-t: #6b7280;
|
||
--border: rgba(255,255,255,0.06); --border-h: rgba(129,140,248,0.4);
|
||
--accent: #818cf8; --accent-h: #6366f1; --accent-10: rgba(129,140,248,0.1); --accent-5: rgba(129,140,248,0.05);
|
||
--nav-bg: rgba(10,10,15,0.82); --card-shadow: 0 4px 24px -6px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
/* ══════════════ Theme Transition (View Transitions API) ══════════════ */
|
||
::view-transition-old(root),
|
||
::view-transition-new(root) {
|
||
animation: none;
|
||
mix-blend-mode: normal;
|
||
}
|
||
::view-transition-new(root) {
|
||
z-index: 1;
|
||
animation: themeReveal 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||
}
|
||
::view-transition-old(root) {
|
||
z-index: 0;
|
||
}
|
||
@keyframes themeReveal {
|
||
from { clip-path: circle(0% at var(--reveal-x, 0%) var(--reveal-y, 100%)); }
|
||
to { clip-path: circle(150% at var(--reveal-x, 0%) var(--reveal-y, 100%)); }
|
||
}
|
||
|
||
/* ══════════════ Reset & Base ══════════════ */
|
||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html { scroll-behavior: auto; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.6; }
|
||
a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } .screenshot-frame img, .gallery-card img, .hero-image-wrap img, .arch-gif-wrap img { aspect-ratio: 16/10; object-fit: cover; background: var(--bg-s); }
|
||
button { font: inherit; cursor: pointer; border: none; background: none; } ul { list-style: none; }
|
||
.mono { font-family: 'SF Mono', 'Fira Code', Consolas, monospace; }
|
||
|
||
/* ══════════════ Layout ══════════════ */
|
||
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
|
||
.container-sm { max-width: 900px; margin: 0 auto; padding: 0 20px; }
|
||
.section { position: relative; padding: 96px 0; overflow: hidden; scroll-margin-top: 120px; }
|
||
.section-header { text-align: center; margin-bottom: 64px; }
|
||
.section-title { font-size: 2rem; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 12px; }
|
||
.section-desc { color: var(--text-s); max-width: 480px; margin: 0 auto; }
|
||
|
||
/* ══════════════ Nav ══════════════ */
|
||
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid var(--border); }
|
||
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 64px; display: flex; align-items: center; justify-content: space-between; }
|
||
.nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
|
||
.nav-logo img { width: 32px; height: 32px; border-radius: 8px; }
|
||
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; }
|
||
.nav-link { color: var(--text-s); transition: color 0.2s; } .nav-link:hover { color: var(--text); }
|
||
.nav-actions { display: none; align-items: center; gap: 4px; }
|
||
.theme-btn { padding: 8px; border-radius: 8px; color: var(--text-s); transition: background 0.2s; }
|
||
.theme-btn:hover { background: var(--accent-5); }
|
||
.lang-btn { padding: 4px 10px; border-radius: 8px; color: var(--text-s); transition: all 0.2s; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; }
|
||
.lang-btn:hover { background: var(--accent-5); color: var(--accent); }
|
||
.theme-btn svg { width: 16px; height: 16px; display: block; }
|
||
html.dark .sun { display: block; } html.dark .moon { display: none; }
|
||
html:not(.dark) .sun { display: none; } html:not(.dark) .moon { display: block; }
|
||
.hamburger { padding: 8px; border-radius: 8px; color: var(--text-s); } .hamburger svg { width: 20px; height: 20px; display: block; }
|
||
.mobile-menu { display: block; position: absolute; top: 64px; left: 0; right: 0; background: var(--nav-bg); backdrop-filter: blur(24px); border-bottom: 1px solid var(--border); transform: translateY(-110%); opacity: 0; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.25s; pointer-events: none; }
|
||
.mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
|
||
.mobile-menu-inner { padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
|
||
.mobile-menu-link { padding: 10px 0; color: var(--text-s); font-size: 16px; font-weight: 500; display: block; }
|
||
|
||
/* ══════════════ Buttons ══════════════ */
|
||
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 32px; border-radius: 12px; font-weight: 600; font-size: 15px; transition: all 0.25s; }
|
||
.btn-primary { background: var(--accent); color: #fff; position: relative; z-index: 0; }
|
||
.btn-primary:hover { background: var(--accent-h); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(99,102,241,0.35); }
|
||
.btn-magnetic { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
|
||
.btn-primary::before { content:''; position: absolute; inset: -2px; border-radius: inherit; background: conic-gradient(from var(--angle,0deg), #6366f1, #a855f7, #22d3ee, #6366f1); z-index: -2; animation: spin 3s linear infinite; }
|
||
.btn-primary::after { content:''; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); z-index: -1; }
|
||
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
|
||
@keyframes spin { to { --angle: 360deg; } }
|
||
.btn-outline { border: 1px solid var(--border); background: var(--bg-card); color: var(--text); }
|
||
.btn-outline:hover { border-color: var(--border-h); background: var(--bg-s); }
|
||
.btn svg { width: 18px; height: 18px; }
|
||
.btn-sm { padding: 10px 20px; font-size: 13px; border-radius: 10px; }
|
||
|
||
/* ══════════════ 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; 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%; } }
|
||
|
||
/* ══════════════ Aurora ══════════════ */
|
||
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
|
||
.aurora-band { position: absolute; width: 150%; height: 60%; filter: blur(80px); opacity: 0.12; border-radius: 50%; }
|
||
html:not(.dark) .aurora-band { opacity: 0.06; }
|
||
.aurora-1 { background: linear-gradient(135deg, #6366f1, #a855f7); top: -30%; left: -25%; animation: aur1 12s ease-in-out infinite alternate; }
|
||
.aurora-2 { background: linear-gradient(225deg, #22d3ee, #6366f1); top: -20%; right: -30%; animation: aur2 15s ease-in-out infinite alternate; }
|
||
.aurora-3 { background: linear-gradient(180deg, #a855f7, #ec4899); bottom: -40%; left: 10%; animation: aur3 10s ease-in-out infinite alternate; }
|
||
@keyframes aur1 { 0% { transform: translate(0,0) rotate(0deg) scale(1); } 100% { transform: translate(60px,40px) rotate(15deg) scale(1.1); } }
|
||
@keyframes aur2 { 0% { transform: translate(0,0) rotate(0deg) scale(1); } 100% { transform: translate(-50px,30px) rotate(-10deg) scale(1.15); } }
|
||
@keyframes aur3 { 0% { transform: translate(0,0) rotate(0deg) scale(1); } 100% { transform: translate(30px,-20px) rotate(8deg) scale(0.9); } }
|
||
|
||
/* ══════════════ Noise Texture ══════════════ */
|
||
.noise { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.025; mix-blend-mode: overlay; }
|
||
.noise::before { content:''; position: absolute; inset: -50%; width: 200%; height: 200%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
|
||
html:not(.dark) .noise { opacity: 0.015; }
|
||
|
||
/* ══════════════ Scroll Progress ══════════════ */
|
||
.scroll-progress { position: absolute; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, #6366f1, #a855f7, #22d3ee); width: 0%; transition: none; }
|
||
|
||
/* ══════════════ Background Effects ══════════════ */
|
||
.grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent); }
|
||
html.dark .grid-bg { background-image: linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px); }
|
||
.orb { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; will-change: transform; }
|
||
.orb-1 { width: 600px; height: 600px; background: rgba(99,102,241,0.12); top: -200px; left: -100px; animation: oF1 20s ease-in-out infinite; }
|
||
.orb-2 { width: 500px; height: 500px; background: rgba(168,85,247,0.08); top: -100px; right: -150px; animation: oF2 25s ease-in-out infinite; }
|
||
.orb-3 { width: 400px; height: 400px; background: rgba(34,211,238,0.06); bottom: -100px; left: 30%; animation: oF3 18s ease-in-out infinite; }
|
||
@keyframes oF1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,30px); } }
|
||
@keyframes oF2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px,40px); } }
|
||
@keyframes oF3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(20px,-25px); } }
|
||
html:not(.dark) .orb-1 { background: rgba(99,102,241,0.06); }
|
||
html:not(.dark) .orb-2 { background: rgba(168,85,247,0.04); }
|
||
html:not(.dark) .orb-3 { background: rgba(34,211,238,0.03); }
|
||
|
||
/* ══════════════ Particles ══════════════ */
|
||
.particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
|
||
.particle { position: absolute; width: 2px; height: 2px; background: var(--accent); border-radius: 50%; opacity: 0; animation: pRise linear infinite; }
|
||
@keyframes pRise { 0% { opacity:0; transform: translateY(100vh) scale(0); } 10% { opacity:0.5; } 90% { opacity:0.15; } 100% { opacity:0; transform: translateY(-20vh) scale(1); } }
|
||
|
||
/* ══════════════ Hero ══════════════ */
|
||
.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding-top: 64px; position: relative; overflow: hidden; }
|
||
.hero-inner { position: relative; z-index: 10; max-width: 1200px; margin: 0 auto; padding: 48px 20px 96px; text-align: center; }
|
||
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 99px; border: 1px solid rgba(99,102,241,0.2); background: var(--accent-5); font-size: 14px; color: var(--accent); margin-bottom: 32px; }
|
||
.hero-badge .pulse { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: pulse 2s ease-in-out infinite; }
|
||
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
|
||
.hero-title { font-size: 3.75rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1.08; margin-bottom: 24px; }
|
||
.hero-subtitle { font-size: 1.1rem; color: var(--text-s); max-width: 600px; margin: 0 auto 40px; line-height: 1.7; }
|
||
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
|
||
.hero-image-wrap { perspective: 1200px; max-width: 1100px; margin: 64px auto 0; padding: 0 16px; position: relative; }
|
||
.hero-image-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: -1; animation: borderSpin 4s linear infinite; opacity: 0.6; }
|
||
.hero-image-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: -1; animation: borderSpin 4s linear infinite; filter: blur(20px); opacity: 0.4; }
|
||
@property --border-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
|
||
@keyframes borderSpin { to { --border-angle: 360deg; } }
|
||
.hero-image-wrap img { transform: rotateX(4deg) scale(0.98); border-radius: 16px; box-shadow: 0 20px 60px -15px rgba(99,102,241,0.25); transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), box-shadow 0.6s; cursor: zoom-in; width: 100%; position: relative; z-index: 1; }
|
||
.hero-image-wrap:hover img { transform: rotateX(0deg) scale(1); box-shadow: 0 30px 80px -15px rgba(99,102,241,0.35); }
|
||
.hero-glow { position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); width: 80%; height: 120px; background: radial-gradient(ellipse, rgba(99,102,241,0.15), transparent 70%); filter: blur(40px); pointer-events: none; }
|
||
html:not(.dark) .hero-glow { background: radial-gradient(ellipse, rgba(99,102,241,0.08), transparent 70%); }
|
||
|
||
/* ══════════════ Stats ══════════════ */
|
||
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
|
||
.stat-card { border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card-s); backdrop-filter: blur(8px); padding: 24px; text-align: center; }
|
||
.stat-value { font-size: 2rem; font-weight: 900; letter-spacing: -0.02em; }
|
||
.stat-label { font-size: 14px; color: var(--text-s); margin-top: 8px; }
|
||
.c-indigo { color: #6366f1; } .c-purple { color: #a855f7; } .c-cyan { color: #22d3ee; } .c-emerald { color: #10b981; }
|
||
.c-green { color: #22c55e; } .c-orange { color: #f97316; }
|
||
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
|
||
.float-a { animation: float 6s ease-in-out infinite; } .float-b { animation: float 6s ease-in-out 2s infinite; }
|
||
|
||
/* ══════════════ Showcase ══════════════ */
|
||
.showcase-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 112px; }
|
||
.showcase-row:last-child { margin-bottom: 0; }
|
||
.showcase-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 99px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 16px; }
|
||
.showcase-title { font-size: 1.75rem; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 16px; }
|
||
.showcase-desc { color: var(--text-s); line-height: 1.7; margin-bottom: 16px; }
|
||
.showcase-list { display: flex; flex-direction: column; gap: 8px; }
|
||
.showcase-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-s); }
|
||
.check { color: #22c55e; flex-shrink: 0; font-weight: 700; }
|
||
.screenshot-frame { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--card-shadow); transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s; cursor: zoom-in; position: relative; }
|
||
.screenshot-frame:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 20px 60px -10px rgba(99,102,241,0.2); }
|
||
.screenshot-frame::after { content:''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(99,102,241,0.08), transparent 50%); opacity: 0; transition: opacity 0.5s; pointer-events: none; }
|
||
.screenshot-frame:hover::after { opacity: 1; }
|
||
.screenshot-frame img { width: 100%; display: block; }
|
||
|
||
/* ══════════════ Gallery ══════════════ */
|
||
.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 24px; }
|
||
.gallery-card { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--card-shadow); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s, border-color 0.4s; cursor: zoom-in; position: relative; }
|
||
.gallery-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 40px -8px rgba(99,102,241,0.2); border-color: var(--border-h); }
|
||
.gallery-card img { width: 100%; display: block; }
|
||
.gallery-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 12px; background: linear-gradient(transparent, rgba(0,0,0,0.65)); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity 0.3s; }
|
||
.gallery-card:hover .gallery-label { opacity: 1; }
|
||
.info-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
|
||
.info-card { border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: blur(8px); padding: 20px; }
|
||
.info-card .ic { font-size: 18px; margin-bottom: 8px; }
|
||
.info-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
|
||
.info-card p { font-size: 12px; color: var(--text-s); line-height: 1.5; }
|
||
|
||
/* ══════════════ Tech ══════════════ */
|
||
.tech-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
|
||
.tech-card { border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: blur(8px); padding: 24px; transition: transform 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; }
|
||
.tech-card:hover { box-shadow: 0 12px 40px -10px rgba(99,102,241,0.12); }
|
||
.tilt-card { transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); transform-style: preserve-3d; }
|
||
.tech-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; }
|
||
.tech-card:hover::before { opacity: 1; }
|
||
.tech-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
|
||
.tech-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
|
||
.tech-name { font-size: 14px; font-weight: 700; }
|
||
.tech-sub { font-size: 12px; color: var(--text-s); }
|
||
.tech-desc { font-size: 14px; color: var(--text-s); }
|
||
|
||
/* ══════════════ Marquee ══════════════ */
|
||
.marquee-wrap { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 16px 0; }
|
||
.marquee-track { display: flex; width: max-content; animation: mScroll 30s linear infinite; }
|
||
.marquee-track:hover { animation-play-state: paused; }
|
||
.marquee-item { padding: 0 28px; font-size: 14px; color: var(--text-t); white-space: nowrap; }
|
||
.marquee-dot { color: var(--accent); }
|
||
@keyframes mScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
|
||
|
||
/* ══════════════ Terminal ══════════════ */
|
||
.terminal { border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: blur(8px); overflow: hidden; }
|
||
.terminal-bar { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
|
||
.td { width: 12px; height: 12px; border-radius: 50%; } .td-r { background: rgba(239,68,68,0.8); } .td-y { background: rgba(234,179,8,0.8); } .td-g { background: rgba(34,197,94,0.8); }
|
||
.terminal-title { margin-left: 12px; font-size: 12px; color: var(--text-t); }
|
||
.terminal-body { padding: 20px; font-size: 14px; line-height: 2.2; overflow-x: auto; }
|
||
.t-comment { color: var(--text-t); }
|
||
.t-cmd { color: var(--text-s); } .t-cmd::before { content: '$ '; color: var(--accent); }
|
||
|
||
/* ══════════════ Deploy Guides ══════════════ */
|
||
.deploy-grid { display: flex; flex-direction: column; gap: 24px; }
|
||
.deploy-card { border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: blur(8px); padding: 28px; transition: all 0.3s; }
|
||
.deploy-card:hover { border-color: var(--border-h); }
|
||
.deploy-card-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
|
||
.deploy-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||
.deploy-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
|
||
.deploy-desc { font-size: 14px; color: var(--text-s); }
|
||
|
||
/* ══════════════ Docs Center ══════════════ */
|
||
.docs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
|
||
.doc-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; display: flex; gap: 16px; align-items: flex-start; backdrop-filter: blur(12px); transition: all 0.3s; cursor: pointer; position: relative; overflow: hidden; }
|
||
.doc-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(99,102,241,0.06), transparent 60%); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
|
||
.doc-card:hover::before { opacity: 1; }
|
||
.doc-card:hover { border-color: var(--border-h); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(99,102,241,0.08); }
|
||
.doc-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
|
||
.doc-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
|
||
.doc-card p { color: var(--text-s); font-size: 13px; margin-bottom: 8px; }
|
||
.doc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
|
||
.doc-tag { padding: 2px 8px; background: rgba(255,255,255,0.06); border-radius: 4px; font-size: 11px; color: var(--text-t); }
|
||
@media (max-width: 640px) { .docs-grid { grid-template-columns: 1fr; } }
|
||
|
||
/* Markdown Reader Modal */
|
||
.md-reader { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); display: none; justify-content: center; align-items: flex-start; padding: 40px 20px; overflow-y: auto; }
|
||
.md-reader.active { display: flex; }
|
||
.md-reader-inner { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; max-width: 820px; width: 100%; position: relative; }
|
||
.md-reader-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); border-radius: 16px 16px 0 0; z-index: 1; }
|
||
.md-reader-header h3 { font-size: 16px; font-weight: 700; }
|
||
.md-reader-header a { color: var(--text-s); font-size: 13px; margin-right: 16px; }
|
||
.md-reader-header a:hover { color: var(--accent); }
|
||
.md-reader-close { background: none; border: none; color: var(--text-s); cursor: pointer; padding: 4px; border-radius: 8px; transition: all 0.2s; }
|
||
.md-reader-close:hover { background: var(--surface); color: var(--text); }
|
||
.md-reader-body { padding: 32px; line-height: 1.8; font-size: 15px; }
|
||
.md-reader-body h1 { font-size: 24px; font-weight: 800; margin: 32px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
|
||
.md-reader-body h2 { font-size: 20px; font-weight: 700; margin: 28px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
|
||
.md-reader-body h3 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; }
|
||
.md-reader-body p { margin-bottom: 12px; }
|
||
.md-reader-body ul, .md-reader-body ol { margin-bottom: 12px; padding-left: 24px; }
|
||
.md-reader-body li { margin-bottom: 4px; }
|
||
.md-reader-body code { background: var(--surface); padding: 2px 6px; border-radius: 4px; font-size: 13px; font-family: 'JetBrains Mono', 'Fira Code', monospace; }
|
||
.md-reader-body pre { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; overflow-x: auto; margin-bottom: 16px; }
|
||
.md-reader-body pre code { background: none; padding: 0; font-size: 13px; }
|
||
.md-reader-body table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 14px; }
|
||
.md-reader-body th, .md-reader-body td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
|
||
.md-reader-body th { background: var(--surface); font-weight: 600; }
|
||
.md-reader-body blockquote { border-left: 3px solid var(--accent); padding: 8px 16px; margin: 12px 0; color: var(--text-s); background: var(--surface); border-radius: 0 8px 8px 0; }
|
||
.md-reader-body a { color: var(--accent); text-decoration: none; }
|
||
.md-reader-body a:hover { text-decoration: underline; }
|
||
.md-reader-body hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
|
||
.md-loading { text-align: center; padding: 60px; color: var(--text-t); }
|
||
|
||
/* ══════════════ Ecosystem ══════════════ */
|
||
.eco-list { display: flex; flex-direction: column; gap: 16px; }
|
||
.eco-card { display: flex; align-items: center; justify-content: space-between; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: blur(8px); padding: 24px; transition: all 0.3s; }
|
||
.eco-card:hover { transform: translateY(-2px); border-color: var(--border-h); }
|
||
.eco-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; transition: color 0.2s; }
|
||
.eco-card:hover h3 { color: var(--accent); }
|
||
.eco-card p { font-size: 14px; color: var(--text-s); }
|
||
.eco-arrow { color: var(--text-t); transition: all 0.3s; font-size: 18px; }
|
||
.eco-card:hover .eco-arrow { color: var(--accent); transform: translateX(4px); }
|
||
|
||
/* ══════════════ Community Banner ══════════════ */
|
||
.community-banner { position: relative; padding: 72px 0; overflow: hidden; scroll-margin-top: 120px; background: linear-gradient(135deg, rgba(99,102,241,0.03) 0%, rgba(168,85,247,0.05) 50%, rgba(34,211,238,0.03) 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
||
html.dark .community-banner { background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(168,85,247,0.08) 50%, rgba(34,211,238,0.05) 100%); }
|
||
.community-banner-inner { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
|
||
.community-banner-text h2 { font-size: 2rem; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 16px; }
|
||
.community-banner-text p { color: var(--text-s); font-size: 15px; line-height: 1.9; max-width: 420px; margin-bottom: 24px; }
|
||
.community-banner-links { display: flex; flex-wrap: wrap; gap: 10px; }
|
||
.community-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); transition: all 0.25s; text-decoration: none; }
|
||
.community-link:hover { border-color: var(--border-h); color: var(--accent); background: var(--accent-5); transform: translateY(-2px); }
|
||
.community-link svg { width: 18px; height: 18px; }
|
||
.community-qr-row { display: flex; gap: 20px; }
|
||
.community-qr-card { text-align: center; padding: 20px 24px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: blur(8px); transition: all 0.3s cubic-bezier(0.16,1,0.3,1); }
|
||
.community-qr-card:hover { transform: translateY(-4px); border-color: var(--border-h); box-shadow: 0 12px 32px -8px rgba(99,102,241,0.15); }
|
||
.community-qr-card img { width: 128px; height: 128px; border-radius: 10px; margin-bottom: 12px; display: block; border: 1px solid var(--border); }
|
||
.community-qr-card span { display: block; font-weight: 700; font-size: 15px; margin-bottom: 10px; }
|
||
.community-qr-card a { display: inline-block; padding: 6px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--accent); border: 1px solid rgba(99,102,241,0.3); transition: all 0.2s; text-decoration: none; }
|
||
.community-qr-card a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
|
||
|
||
/* ══════════════ CTA ══════════════ */
|
||
.cta-section { text-align: center; }
|
||
.cta-buttons { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
|
||
|
||
/* ══════════════ Sponsors ══════════════ */
|
||
.sponsor-card { max-width: 600px; margin: 40px auto; padding: 32px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; text-align: center; transition: all 0.3s; }
|
||
.sponsor-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15); border-color: var(--primary); }
|
||
.sponsor-link { display: block; color: inherit; text-decoration: none; }
|
||
.sponsor-badge { display: inline-block; padding: 8px 20px; background: linear-gradient(135deg, #FF6B35, #FF8C42); color: white; border-radius: 20px; font-weight: 600; font-size: 18px; margin-bottom: 12px; }
|
||
.sponsor-slogan { font-size: 16px; font-weight: 500; color: var(--text-s); margin-bottom: 16px; }
|
||
.sponsor-desc { font-size: 14px; color: var(--text-t); line-height: 1.6; }
|
||
|
||
/* ══════════════ Footer ══════════════ */
|
||
.footer { border-top: 1px solid var(--border); padding: 40px 0; }
|
||
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--text-t); }
|
||
.footer-logo { display: flex; align-items: center; gap: 8px; }
|
||
.footer-logo img { width: 20px; height: 20px; border-radius: 4px; opacity: 0.5; }
|
||
.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; }
|
||
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 0 80px rgba(99,102,241,0.2); animation: lbIn 0.3s ease-out; }
|
||
@keyframes lbIn { from { opacity:0; transform: scale(0.95); } to { opacity:1; transform: scale(1); } }
|
||
.lb-close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
|
||
.lb-close:hover { background: rgba(255,255,255,0.2); }
|
||
|
||
/* ══════════════ Scroll Reveal ══════════════ */
|
||
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
|
||
.reveal.revealed { opacity: 1; transform: translateY(0); }
|
||
|
||
/* ══════════════ Responsive ══════════════ */
|
||
|
||
/* ── Tablet ── */
|
||
@media (max-width: 1024px) {
|
||
.showcase-row { grid-template-columns: 1fr; gap: 32px; }
|
||
.showcase-row .img-first { order: -1; }
|
||
.gallery-grid, .info-grid { grid-template-columns: repeat(2,1fr); }
|
||
.stats-grid { grid-template-columns: repeat(2,1fr); }
|
||
.tech-grid { grid-template-columns: 1fr; }
|
||
.nav-links { display: none; }
|
||
.nav-actions { display: flex; }
|
||
.mobile-menu { display: block; }
|
||
}
|
||
|
||
/* ── Small Tablet / Large Phone ── */
|
||
@media (max-width: 768px) {
|
||
.section { padding: 72px 0; }
|
||
.section-header { margin-bottom: 40px; }
|
||
.hero-title { font-size: 2.5rem; }
|
||
.hero-subtitle { font-size: 1rem; }
|
||
.hero-badge { font-size: 12px; padding: 5px 12px; }
|
||
.section-title { font-size: 1.75rem; }
|
||
.showcase-title { font-size: 1.5rem; }
|
||
.showcase-row { margin-bottom: 72px; }
|
||
|
||
.community-banner { padding: 56px 0; }
|
||
.community-banner-inner { grid-template-columns: 1fr; gap: 32px; }
|
||
.community-banner-text { text-align: center; }
|
||
.community-banner-text h2 { text-align: center; }
|
||
.community-banner-text p { margin-left: auto; margin-right: auto; }
|
||
.community-banner-links { justify-content: center; }
|
||
.community-qr-row { justify-content: center; flex-wrap: wrap; }
|
||
.community-qr-card img { width: 108px; height: 108px; }
|
||
.community-qr-card { padding: 16px 18px; }
|
||
|
||
.hero-cta { flex-direction: column; align-items: center; }
|
||
.btn { width: 100%; max-width: 320px; justify-content: center; }
|
||
|
||
.deploy-card { padding: 20px; }
|
||
.deploy-title { font-size: 16px; }
|
||
.deploy-card-header { gap: 12px; }
|
||
|
||
.eco-card { flex-direction: column; gap: 8px; align-items: flex-start; }
|
||
.eco-arrow { display: none; }
|
||
|
||
.doc-card { flex-direction: column; gap: 12px; }
|
||
.doc-icon { width: 36px; height: 36px; font-size: 1.1rem; }
|
||
|
||
.terminal-body { font-size: 12px; line-height: 2; }
|
||
.t-cmd { word-break: break-all; }
|
||
|
||
.video-demo-wrap { padding: 0 8px; }
|
||
.play-btn { width: 60px; height: 60px; }
|
||
.play-btn svg { width: 24px; height: 24px; }
|
||
|
||
.sponsor-card { padding: 24px 16px; margin: 24px auto; }
|
||
|
||
.footer-inner { flex-direction: column; gap: 16px; text-align: center; }
|
||
.footer-links { flex-wrap: wrap; justify-content: center; }
|
||
|
||
.md-reader { padding: 16px 8px; }
|
||
.md-reader-body { padding: 20px; font-size: 14px; }
|
||
.md-reader-header { padding: 12px 16px; }
|
||
.md-reader-body h1 { font-size: 20px; }
|
||
.md-reader-body h2 { font-size: 17px; }
|
||
|
||
.lightbox { padding: 16px; }
|
||
}
|
||
|
||
/* ── Phone ── */
|
||
@media (max-width: 640px) {
|
||
.section { padding: 56px 0; }
|
||
.section-header { margin-bottom: 28px; }
|
||
.hero-title { font-size: 2rem; }
|
||
.hero-subtitle { font-size: 0.95rem; margin-bottom: 32px; }
|
||
.hero-image-wrap { margin-top: 40px; }
|
||
.gallery-grid { grid-template-columns: 1fr 1fr; }
|
||
.info-grid { grid-template-columns: 1fr 1fr; }
|
||
.stats-grid { grid-template-columns: 1fr 1fr; }
|
||
.stat-card { padding: 16px; }
|
||
.stat-value { font-size: 1.5rem; }
|
||
.showcase-row { margin-bottom: 56px; gap: 24px; }
|
||
.showcase-desc { font-size: 14px; }
|
||
.showcase-list li { font-size: 13px; }
|
||
|
||
.community-banner { padding: 40px 0; }
|
||
.community-banner-text h2 { font-size: 1.5rem; }
|
||
.community-banner-text p { font-size: 14px; line-height: 1.7; }
|
||
.community-link { padding: 8px 14px; font-size: 13px; }
|
||
.community-qr-card img { width: 96px; height: 96px; }
|
||
}
|
||
|
||
/* ── Small Phone ── */
|
||
@media (max-width: 480px) {
|
||
.container { padding: 0 16px; }
|
||
.container-sm { padding: 0 16px; }
|
||
.section { padding: 48px 0; }
|
||
.hero-title { font-size: 1.75rem; }
|
||
.hero-badge { font-size: 11px; padding: 4px 10px; gap: 6px; }
|
||
.hero-inner { padding: 32px 16px 64px; }
|
||
.section-title { font-size: 1.4rem; }
|
||
.showcase-title { font-size: 1.25rem; }
|
||
|
||
.gallery-grid { grid-template-columns: 1fr; }
|
||
.info-grid { grid-template-columns: 1fr; }
|
||
|
||
.community-banner-links { gap: 8px; }
|
||
.community-link { padding: 8px 12px; font-size: 12px; gap: 6px; }
|
||
.community-qr-row { flex-direction: column; align-items: center; gap: 16px; }
|
||
.community-qr-card { width: 100%; max-width: 200px; }
|
||
.community-qr-card img { width: 120px; height: 120px; margin-left: auto; margin-right: auto; }
|
||
|
||
.download-card { padding: 20px 16px; }
|
||
.download-card h3 { font-size: 16px; }
|
||
.deploy-card { padding: 16px; }
|
||
.deploy-icon { width: 40px; height: 40px; }
|
||
.deploy-title { font-size: 15px; }
|
||
|
||
.terminal-body { font-size: 11px; padding: 14px; line-height: 1.8; white-space: pre-wrap; word-break: break-all; }
|
||
|
||
.md-reader-body { padding: 16px; }
|
||
|
||
.sponsor-badge { font-size: 15px; padding: 6px 16px; }
|
||
.sponsor-slogan { font-size: 14px; }
|
||
.sponsor-desc { font-size: 13px; }
|
||
|
||
.footer { padding: 24px 0; }
|
||
.footer-inner { font-size: 12px; }
|
||
}
|
||
</style>
|
||
<script>
|
||
(function(){
|
||
var s = localStorage.getItem('clawpanel-theme');
|
||
if (s === 'light') document.documentElement.classList.remove('dark');
|
||
else if (s === 'dark') document.documentElement.classList.add('dark');
|
||
else if (!window.matchMedia('(prefers-color-scheme: dark)').matches) document.documentElement.classList.remove('dark');
|
||
})()
|
||
</script>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ══════════════ Nav ══════════════ -->
|
||
<nav class="nav">
|
||
<div class="scroll-progress" id="scroll-progress"></div>
|
||
<div class="nav-inner">
|
||
<a href="#" class="nav-logo"><img src="./logo.png" alt="Logo">ClawPanel</a>
|
||
<div class="nav-links">
|
||
<a href="#features" class="nav-link" data-i18n="nav.features">功能预览</a>
|
||
<a href="#tech" class="nav-link" data-i18n="nav.tech">架构</a>
|
||
<a href="#quickstart" class="nav-link" data-i18n="nav.quickstart">开始</a>
|
||
<a href="#deploy" class="nav-link" data-i18n="nav.deploy">部署</a>
|
||
<a href="#docs" class="nav-link" data-i18n="nav.docs">文档</a>
|
||
<a href="#community" class="nav-link" data-i18n="nav.community">社区</a>
|
||
<a href="#ai-plan" class="nav-link" data-i18n="nav.activity">活动</a>
|
||
<a href="#download" class="nav-link" data-i18n="nav.download">下载</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>
|
||
<svg class="moon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
|
||
</button>
|
||
<button id="lang-toggle" class="lang-btn" aria-label="Language">EN</button>
|
||
</div>
|
||
<div class="nav-actions">
|
||
<button id="theme-toggle-mobile" 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>
|
||
<svg class="moon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
|
||
</button>
|
||
<button id="lang-toggle-mobile" class="lang-btn" aria-label="Language">EN</button>
|
||
<button id="hamburger" class="hamburger" aria-label="菜单">
|
||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div id="mobile-menu" class="mobile-menu">
|
||
<div class="mobile-menu-inner">
|
||
<a href="#features" class="mobile-menu-link mobile-link" data-i18n="nav.features">功能预览</a>
|
||
<a href="#tech" class="mobile-menu-link mobile-link" data-i18n="nav.tech">架构</a>
|
||
<a href="#quickstart" class="mobile-menu-link mobile-link" data-i18n="nav.quickstart">开始</a>
|
||
<a href="#deploy" class="mobile-menu-link mobile-link" data-i18n="nav.deploy">部署</a>
|
||
<a href="#docs" class="mobile-menu-link mobile-link" data-i18n="nav.docs">文档</a>
|
||
<a href="#community" class="mobile-menu-link mobile-link" data-i18n="nav.community">社区</a>
|
||
<a href="#ai-plan" class="mobile-menu-link mobile-link" data-i18n="nav.activity">活动</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel" target="_blank" rel="noopener" class="mobile-menu-link">GitHub ↗</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- ══════════════ Hero ══════════════ -->
|
||
<section class="hero" id="hero">
|
||
<div class="aurora">
|
||
<div class="aurora-band aurora-1"></div>
|
||
<div class="aurora-band aurora-2"></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="hero-inner">
|
||
<div class="reveal hero-badge"><span class="pulse"></span> <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 x="3" y="11" width="18" height="10" rx="2"/><circle cx="9" cy="16" r="1"/><circle cx="15" cy="16" r="1"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg> <span data-i18n="hero.badge">内置 AI 助手 — 支持 OpenClaw & Hermes Agent 双引擎管理</span></div>
|
||
<h1 class="reveal hero-title" data-i18n="hero.title"><span class="gradient-text shimmer">AI 助手</span>驱动的<br>多引擎 AI 管理面板</h1>
|
||
<p class="reveal hero-subtitle" data-i18n="hero.sub">支持 <strong>OpenClaw</strong> 和 <strong>Hermes Agent</strong> 双引擎，内置智能 AI 助手帮你一键安装、自动诊断配置、排查问题、修复错误。<br>内置 Hermes Agent 对话、消息渠道管理、QQ 机器人，并支持 Telegram、Discord 等外部渠道。</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>
|
||
<span data-i18n="hero.dl">下载最新版</span>
|
||
</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel" target="_blank" rel="noopener" class="btn btn-outline btn-magnetic">
|
||
<svg viewBox="0 0 24 24" fill="currentColor"><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>
|
||
<span data-i18n="hero.src">源代码</span>
|
||
</a>
|
||
</div>
|
||
<div class="reveal hero-image-wrap" data-delay="300">
|
||
<img src="./01.png" alt="ClawPanel AI 助手 — 8 大技能卡片" onclick="openLightbox(this.src)" loading="eager">
|
||
<div class="hero-glow"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Stats ══════════════ -->
|
||
<section class="section" style="padding-top:48px;padding-bottom:48px">
|
||
<div class="grid-bg"></div>
|
||
<div class="container" style="position:relative;z-index:10">
|
||
<div class="stats-grid">
|
||
<div class="reveal stat-card"><div class="stat-value c-indigo counter" data-target="10">0</div><div class="stat-label" data-i18n="stat.1">功能模块</div></div>
|
||
<div class="reveal stat-card"><div class="stat-value c-purple">Tauri v2</div><div class="stat-label" data-i18n="stat.2">桌面框架</div></div>
|
||
<div class="reveal stat-card"><div class="stat-value c-cyan">3</div><div class="stat-label" data-i18n="stat.3">跨平台支持</div></div>
|
||
<div class="reveal stat-card"><div class="stat-value c-emerald">AGPL-3.0</div><div class="stat-label" data-i18n="stat.4">开源协议</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Community ══════════════ -->
|
||
<section id="community" class="community-banner">
|
||
<div class="container" style="position:relative;z-index:10">
|
||
<div class="community-banner-inner">
|
||
<div class="community-banner-text">
|
||
<h2 class="reveal" data-i18n="comm.title"><span class="gradient-text">加入社区</span></h2>
|
||
<p class="reveal" data-i18n="comm.desc">这里聚集了一群对 AI Agent 充满热情的开发者和玩家。<br>交流使用技巧、分享落地经验、反馈问题、第一时间获取新版本动态。</p>
|
||
<div class="reveal community-banner-links">
|
||
<a href="https://discord.gg/U9AttmsNHh" target="_blank" rel="noopener" class="community-link">
|
||
<svg viewBox="0 0 24 24" fill="currentColor" style="width:16px;height:16px"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03z"/></svg>
|
||
<span data-i18n="comm.discord">Discord</span>
|
||
</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/discussions" target="_blank" rel="noopener" class="community-link">
|
||
<svg viewBox="0 0 24 24" fill="currentColor" style="width:16px;height:16px"><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>
|
||
<span data-i18n="comm.discuss">Discussions</span>
|
||
</a>
|
||
<a href="https://yb.tencent.com/gp/i/IIGXzcMcdh84" target="_blank" rel="noopener" class="community-link">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px"><circle cx="12" cy="12" r="10"/><path d="M8 12l2 2 4-4"/></svg>
|
||
<span data-i18n="comm.yuanbao">元宝派</span>
|
||
</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/issues/new" target="_blank" rel="noopener" class="community-link">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
|
||
<span data-i18n="comm.issue">反馈 Issue</span>
|
||
</a>
|
||
<a href="https://qt.cool/c/feishu" target="_blank" rel="noopener" class="community-link">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px"><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>
|
||
<span data-i18n="comm.feishu">飞书群</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="community-qr-row">
|
||
<div class="reveal community-qr-card">
|
||
<img src="./qr-qq.png" alt="QQ 群二维码">
|
||
<span data-i18n="qr.qq">QQ 群</span>
|
||
<a href="https://qt.cool/c/OpenClaw" target="_blank" rel="noopener" data-i18n="qr.join">扫码加入</a>
|
||
</div>
|
||
<div class="reveal community-qr-card">
|
||
<img src="./qr-wechat.png" alt="微信群二维码">
|
||
<span data-i18n="qr.wx">微信群</span>
|
||
<a href="https://qt.cool/c/OpenClawWx" target="_blank" rel="noopener" data-i18n="qr.join">扫码加入</a>
|
||
</div>
|
||
<div class="reveal community-qr-card">
|
||
<img src="./qr-dy.png" alt="抖音群二维码">
|
||
<span data-i18n="qr.dy">抖音群</span>
|
||
<a href="https://qt.cool/c/OpenClawDY" target="_blank" rel="noopener" data-i18n="qr.join">扫码加入</a>
|
||
</div>
|
||
<div class="reveal community-qr-card">
|
||
<img src="https://qt.cool/c/feishu/qr.png" alt="飞书群二维码">
|
||
<span data-i18n="qr.fs">飞书群</span>
|
||
<a href="https://qt.cool/c/feishu" target="_blank" rel="noopener" data-i18n="qr.join">扫码加入</a>
|
||
</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>
|
||
<span data-i18n="video.badge">50 秒快速了解</span>
|
||
</div>
|
||
<h2 class="reveal section-title" data-i18n="video.title">产品 <span class="gradient-text">演示视频</span></h2>
|
||
<p class="reveal section-desc" data-i18n="video.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="./video-cover.png?v=0.7.0" preload="metadata" playsinline controls onclick="toggleDemoVideo()">
|
||
<source src="./promo-web.mp4?v=0.7.0" type="video/mp4">
|
||
</video>
|
||
</div>
|
||
<div class="video-demo-glow"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Features Showcase ══════════════ -->
|
||
<section id="features" class="section">
|
||
<div class="orb orb-3"></div>
|
||
<div class="container" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<h2 class="reveal section-title" data-i18n="feat.title">强大的 <span class="gradient-text">功能矩阵</span></h2>
|
||
<p class="reveal section-desc" data-i18n="feat.desc">一个面板，管理 OpenClaw & Hermes Agent 双引擎</p>
|
||
</div>
|
||
|
||
<!-- 仪表盘 -->
|
||
<div class="showcase-row">
|
||
<div class="reveal screenshot-frame img-first" onclick="openLightbox('./00.png')"><img src="./00.png" alt="ClawPanel 仪表盘" 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"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg> <span data-i18n="feat.tag.overview">全景概览</span></div>
|
||
<h3 class="reveal showcase-title" data-i18n="sc1.title">仪表盘 — 运行状态一目了然</h3>
|
||
<p class="reveal showcase-desc" data-i18n="sc1.desc">Gateway 运行状态、版本信息、Agent 数量、模型池总览，搭配内网穿透状态、基础服务监控和实时日志流。一屏掌握 OpenClaw 所有运行指标。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> <span data-i18n="sc1.l1">Gateway / 隧道 / 服务实时状态卡片</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc1.l2">配置版本标识 & 最近备份时间</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc1.l3">并行推理队列 & 工作区文件隔离</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc1.l4">重启 / 检查更新 / 创建备份快捷操作</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI 助手设置 — 模型配置 + 晴辰云 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="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> <span data-i18n="feat.tag.ready">开箱即用</span></div>
|
||
<h3 class="reveal showcase-title" data-i18n="sc2.title">晴辰云 AI 接口 — 签到领额度</h3>
|
||
<p class="reveal showcase-desc" data-i18n="sc2.desc">内置<strong>捴辰云 AI 接口</strong>，每日签到可领取测试额度，邀请好友可获得更多。选择模型、一键接入，快速开始使用。也支持接入任意 OpenAI 兼容 API。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> <span data-i18n="sc2.l1">晴辰云接口一键接入</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc2.l2">GPT-5 全系列模型可选</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc2.l3">兼容 Chat Completions & Responses API</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc2.l4">独立配置，无需安装 OpenClaw</span></li>
|
||
</ul>
|
||
</div>
|
||
<div class="reveal screenshot-frame" onclick="openLightbox('./02.png')"><img src="./02.png" alt="AI 助手设置 — 晴辰云 AI 接口一键接入" loading="lazy"></div>
|
||
</div>
|
||
|
||
<!-- AI 助手人设 — Agent 灵魂 -->
|
||
<div class="showcase-row">
|
||
<div class="reveal screenshot-frame img-first" onclick="openLightbox('./05.png')"><img src="./05.png" alt="AI 助手人设 — Agent 灵魂加载" 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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> <span data-i18n="feat.tag.soul">借尸还魂</span></div>
|
||
<h3 class="reveal showcase-title" data-i18n="sc3.title">继承 Agent 人格与记忆</h3>
|
||
<p class="reveal showcase-desc" data-i18n="sc3.desc">从 OpenClaw Agent 加载完整灵魂——SOUL.md（人格）、IDENTITY.md（身份）、USER.md（用户偏好）、AGENTS.md（行为规则）、TOOLS.md（工具）一键注入。让 AI 助手拥有你 Agent 的全部能力。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> <span data-i18n="sc3.l1">一键加载 Agent 灵魂（5/6 核心文件）</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc3.l2">多 Agent 灵魂自由切换</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc3.l3">保留 ClawPanel 工具调用能力</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc3.l4">工具权限细粒度控制</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 实时聊天 -->
|
||
<div class="showcase-row">
|
||
<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> <span data-i18n="feat.tag.core">核心功能</span></div>
|
||
<h3 class="reveal showcase-title" data-i18n="sc4.title">实时聊天 — 多模型流式对话</h3>
|
||
<p class="reveal showcase-desc" data-i18n="sc4.desc">WebSocket 直连 Gateway，流式响应逐字显示。自动列出所有已配置模型（含晴辰云 AI 接口），支持图片附件、Markdown 渲染和快捷指令。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> <span data-i18n="sc4.l1">多 Provider 模型自动聚合</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc4.l2">多会话管理与历史记录</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc4.l3">图片拖拽 & 多模态对话</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc4.l4">/ 快捷指令系统</span></li>
|
||
</ul>
|
||
</div>
|
||
<div class="reveal screenshot-frame" onclick="openLightbox('./07.png')"><img src="./07.png" alt="实时聊天" loading="lazy"></div>
|
||
</div>
|
||
|
||
<!-- 模型配置 -->
|
||
<div class="showcase-row">
|
||
<div class="reveal screenshot-frame img-first" onclick="openLightbox('./09.png')"><img src="./09.png" alt="模型配置" loading="lazy"></div>
|
||
<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> <span data-i18n="feat.tag.config">配置中心</span></div>
|
||
<h3 class="reveal showcase-title" data-i18n="sc5.title">多服务商统一管理</h3>
|
||
<p class="reveal showcase-desc" data-i18n="sc5.desc">OpenAI、晴辰云 AI、DeepSeek、Kimi 等多家服务商统一管理。内置晴辰云 AI 接口一键添加全部模型。可视化主模型 + 备选自动切换，批量测试连通性。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> <span data-i18n="sc5.l1">晴辰云接口一键添加全部模型</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc5.l2">批量连通性测试 & 延迟检测</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc5.l3">主模型 + 备选自动切换</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc5.l4">拖拽排序 & 实时保存</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 记忆文件 -->
|
||
<div class="showcase-row">
|
||
<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> <span data-i18n="feat.tag.data">数据管理</span></div>
|
||
<h3 class="reveal showcase-title" data-i18n="sc6.title">让 Agent 拥有记忆</h3>
|
||
<p class="reveal showcase-desc" data-i18n="sc6.desc">在线编辑 Agent 工作记忆、浏览记忆归档、管理核心配置文件（SOUL.md、AGENTS.md 等）。支持 ZIP 一键打包导出，多 Agent 记忆完全隔离。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> <span data-i18n="sc6.l1">工作记忆 & 记忆归档 & 核心文件</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc6.l2">在线编辑 & 实时预览</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc6.l3">多 Agent 记忆隔离</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc6.l4">ZIP 打包下载</span></li>
|
||
</ul>
|
||
</div>
|
||
<div class="reveal screenshot-frame" onclick="openLightbox('./13.png')"><img src="./13.png" alt="记忆文件" loading="lazy"></div>
|
||
</div>
|
||
|
||
<!-- Gateway 安全认证 -->
|
||
<div class="showcase-row">
|
||
<div class="reveal screenshot-frame img-first" onclick="openLightbox('./11.png')"><img src="./11.png" alt="Gateway 安全认证与工具权限" loading="lazy"></div>
|
||
<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"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> <span data-i18n="feat.tag.security">安全防护</span></div>
|
||
<h3 class="reveal showcase-title" data-i18n="sc7.title">安全认证 + 工具权限管控</h3>
|
||
<p class="reveal showcase-desc" data-i18n="sc7.desc">Token 密钥 / 密码认证双模式，卡片式直观选择。Agent 工具调用权限三档可调（完整 / 受限 / 禁用），会话可见性细粒度控制。安全与灵活兼得。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> <span data-i18n="sc7.l1">Token & 密码双认证模式</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc7.l2">Agent 工具权限三档管控</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc7.l3">会话可见性控制</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc7.l4">改完自动重启生效</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Agent 管理 -->
|
||
<div class="showcase-row">
|
||
<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> <span data-i18n="feat.tag.agent">智能体</span></div>
|
||
<h3 class="reveal showcase-title" data-i18n="sc8.title">多 Agent 协作管理</h3>
|
||
<p class="reveal showcase-desc" data-i18n="sc8.desc">创建和管理多个 AI Agent，各自配置名称、模型和独立工作区。支持备份、编辑与默认 Agent 快速切换。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> <span data-i18n="sc8.l1">多 Agent 独立工作区</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc8.l2">身份与模型单独配置</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc8.l3">Agent 配置备份 & 编辑</span></li>
|
||
<li><span class="check">✓</span> <span data-i18n="sc8.l4">默认 Agent 快速切换</span></li>
|
||
</ul>
|
||
</div>
|
||
<div class="reveal screenshot-frame" onclick="openLightbox('./10.png')"><img src="./10.png" alt="Agent 管理" loading="lazy"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ More Features ══════════════ -->
|
||
<section class="section">
|
||
<div class="grid-bg"></div>
|
||
<div class="container" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<h2 class="reveal section-title" data-i18n="more.title">还有 <span class="gradient-text">更多</span></h2>
|
||
<p class="reveal section-desc" data-i18n="more.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"><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> <span data-i18n="gl.svc">服务管理</span></div></div>
|
||
<div class="reveal gallery-card" onclick="openLightbox('./06.png')"><img src="./06.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="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg> <span data-i18n="gl.kb">知识库</span></div></div>
|
||
<div class="reveal gallery-card" onclick="openLightbox('./12.png')"><img src="./12.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"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> <span data-i18n="gl.sec">安全设置</span></div></div>
|
||
<div class="reveal gallery-card" onclick="openLightbox('./14.png')"><img src="./14.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> <span data-i18n="gl.ext">扩展工具</span></div></div>
|
||
<div class="reveal gallery-card" onclick="openLightbox('./15.png')"><img src="./15.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> <span data-i18n="gl.diag">系统诊断</span></div></div>
|
||
<div class="reveal gallery-card" onclick="openLightbox('./16.png')"><img src="./16.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"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg> <span data-i18n="gl.about">关于</span></div></div>
|
||
</div>
|
||
<div class="info-grid">
|
||
<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 data-i18n="ic.svc.t">服务管理</h4><p data-i18n="ic.svc.d">启停控制、版本检测、一键升级、npm 源切换、配置备份与恢复</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="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg></div><h4 data-i18n="ic.kb.t">知识库</h4><p data-i18n="ic.kb.d">自定义知识注入 AI 助手，Markdown 格式，对话时自动激活</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"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div><h4 data-i18n="ic.sec.t">安全设置</h4><p data-i18n="ic.sec.d">访问密码保护、无视风险模式切换、面板访问安全管控</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 data-i18n="ic.ext.t">扩展工具</h4><p data-i18n="ic.ext.d">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 data-i18n="ic.diag.t">系统诊断</h4><p data-i18n="ic.diag.d">全面健康检测、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"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></div><h4 data-i18n="ic.about.t">关于</h4><p data-i18n="ic.about.d">版本信息、社群入口（QQ / 微信 / 抖音）、相关项目链接</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Tech ══════════════ -->
|
||
<section id="tech" class="section">
|
||
<div class="grid-bg"></div>
|
||
<div class="container-sm" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<h2 class="reveal section-title" data-i18n="tech.title"><span class="gradient-text">技术架构</span></h2>
|
||
<p class="reveal section-desc" data-i18n="tech.desc">精挑细选的技术栈，追求极致性能与开发体验</p>
|
||
</div>
|
||
<div class="reveal arch-gif-wrap">
|
||
<img src="./quick-stats.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)"><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" data-i18n="tech1.name">Rust + Tauri v2</div><div class="tech-sub" data-i18n="tech1.sub">后端运行时</div></div></div>
|
||
<div class="tech-desc" data-i18n="tech1.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)"><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" data-i18n="tech2.name">Vanilla JS + Vite</div><div class="tech-sub" data-i18n="tech2.sub">前端架构</div></div></div>
|
||
<div class="tech-desc" data-i18n="tech2.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)"><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" data-i18n="tech3.name">WebSocket + RPC</div><div class="tech-sub" data-i18n="tech3.sub">实时通信</div></div></div>
|
||
<div class="tech-desc" data-i18n="tech3.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)"><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" data-i18n="tech4.name">CSS Variables</div><div class="tech-sub" data-i18n="tech4.sub">主题系统</div></div></div>
|
||
<div class="tech-desc" data-i18n="tech4.desc">暗色 / 亮色主题无闪烁切换，玻璃拟态 UI 风格，CSS 自定义属性实现全局样式管理。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Quickstart ══════════════ -->
|
||
<section id="quickstart" class="section">
|
||
<div class="container-sm" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<h2 class="reveal section-title" data-i18n="qs.title"><span class="gradient-text">快速开始</span></h2>
|
||
<p class="reveal section-desc" data-i18n="qs.desc">几条命令，开箱即用</p>
|
||
</div>
|
||
<div class="reveal terminal">
|
||
<div class="terminal-bar">
|
||
<span class="td td-r"></span><span class="td td-y"></span><span class="td td-g"></span>
|
||
<span class="terminal-title mono">Terminal</span>
|
||
</div>
|
||
<div class="terminal-body mono">
|
||
<div class="t-comment" data-i18n="qs.c1"># 克隆仓库</div>
|
||
<div class="t-cmd">git clone https://github.com/qingchencloud/clawpanel.git</div>
|
||
<div class="t-cmd">cd clawpanel && npm install</div>
|
||
<br>
|
||
<div class="t-comment" data-i18n="qs.c2"># macOS / Linux — 启动完整 Tauri 桌面应用</div>
|
||
<div class="t-cmd">./scripts/dev.sh</div>
|
||
<br>
|
||
<div class="t-comment" data-i18n="qs.c3"># Windows — 启动完整 Tauri 桌面应用</div>
|
||
<div class="t-cmd">npm run tauri dev</div>
|
||
<br>
|
||
<div class="t-comment" data-i18n="qs.c4"># 仅前端调试（浏览器 mock 模式）</div>
|
||
<div class="t-cmd">npm run dev</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Deploy Guides ══════════════ -->
|
||
<section id="deploy" class="section">
|
||
<div class="grid-bg"></div>
|
||
<div class="container-sm" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<h2 class="reveal section-title" data-i18n="dep.title">服务器 <span class="gradient-text">部署指南</span></h2>
|
||
<p class="reveal section-desc" data-i18n="dep.desc">没有桌面环境？在 Linux 或 Docker 上部署 ClawPanel Web 版，浏览器即可管理 OpenClaw</p>
|
||
</div>
|
||
<div class="deploy-grid">
|
||
<!-- Linux -->
|
||
<div class="reveal deploy-card">
|
||
<div class="deploy-card-header">
|
||
<div class="deploy-icon" style="background:rgba(234,179,8,0.1)">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#eab308" stroke-width="2" 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>
|
||
</div>
|
||
<div>
|
||
<h3 class="deploy-title" data-i18n="dep.linux.t">Linux 一键部署</h3>
|
||
<p class="deploy-desc" data-i18n="dep.linux.d">支持 Ubuntu、Debian、CentOS、Fedora、Alpine 等主流发行版</p>
|
||
</div>
|
||
</div>
|
||
<div class="terminal" style="margin:0">
|
||
<div class="terminal-bar">
|
||
<span class="td td-r"></span><span class="td td-y"></span><span class="td td-g"></span>
|
||
<span class="terminal-title mono">bash</span>
|
||
</div>
|
||
<div class="terminal-body mono" style="padding:16px 20px;font-size:13px">
|
||
<div class="t-comment" data-i18n="dep.linux.c"># 一键部署 ClawPanel Web + OpenClaw + systemd 自启</div>
|
||
<div class="t-cmd">curl -fsSL https://raw.githubusercontent.com/qingchencloud/clawpanel/main/scripts/linux-deploy.sh | bash</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:16px;display:flex;gap:12px;flex-wrap:wrap">
|
||
<a href="https://github.com/qingchencloud/clawpanel/blob/main/docs/linux-deploy.md" target="_blank" rel="noopener" class="btn btn-sm btn-outline" style="font-size:13px;padding:6px 16px">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
|
||
<span data-i18n="dep.linux.btn">完整教程</span>
|
||
</a>
|
||
<span style="color:var(--text-muted);font-size:12px;line-height:32px">Node.js · OpenClaw · systemd/PM2 · Nginx · Firewall</span>
|
||
</div>
|
||
</div>
|
||
<!-- Docker -->
|
||
<div class="reveal deploy-card">
|
||
<div class="deploy-card-header">
|
||
<div class="deploy-icon" style="background:rgba(34,211,238,0.1)">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#22d3ee" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12.5c-.5-1-2-2-4-2-1 0-2 .5-2.5 1"/><rect x="1" y="8" width="4" height="4" rx=".5"/><rect x="6" y="8" width="4" height="4" rx=".5"/><rect x="11" y="8" width="4" height="4" rx=".5"/><rect x="6" y="3" width="4" height="4" rx=".5"/><rect x="11" y="3" width="4" height="4" rx=".5"/><rect x="16" y="8" width="4" height="4" rx=".5"/><path d="M2 16c0 2 2 4 10 4s10-2 10-4"/></svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="deploy-title" data-i18n="dep.docker.t">Docker 部署</h3>
|
||
<p class="deploy-desc" data-i18n="dep.docker.d">容器化隔离，支持 Compose 编排、自定义镜像、Nginx 反代</p>
|
||
</div>
|
||
</div>
|
||
<div class="terminal" style="margin:0">
|
||
<div class="terminal-bar">
|
||
<span class="td td-r"></span><span class="td td-y"></span><span class="td td-g"></span>
|
||
<span class="terminal-title mono">bash</span>
|
||
</div>
|
||
<div class="terminal-body mono" style="padding:16px 20px;font-size:13px">
|
||
<div class="t-comment" data-i18n="dep.docker.c"># 一条命令启动 ClawPanel Web</div>
|
||
<div class="t-cmd">docker run -d --name clawpanel -p 1420:1420 \</div>
|
||
<div class="t-cmd" style="padding-left:1em">-v clawpanel-data:/root/.openclaw node:22-slim \</div>
|
||
<div class="t-cmd" style="padding-left:1em">sh -c "apt-get update && apt-get install -y git && ..."</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:16px;display:flex;gap:12px;flex-wrap:wrap">
|
||
<a href="https://github.com/qingchencloud/clawpanel/blob/main/docs/docker-deploy.md" target="_blank" rel="noopener" class="btn btn-sm btn-outline" style="font-size:13px;padding:6px 16px">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
|
||
<span data-i18n="dep.docker.btn">完整教程</span>
|
||
</a>
|
||
<span style="color:var(--text-muted);font-size:12px;line-height:32px">Compose · Dockerfile · Gateway · Nginx</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal" style="text-align:center;margin-top:32px">
|
||
<p style="color:var(--text-muted);font-size:14px">
|
||
<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>
|
||
<span data-i18n="dep.note">部署完成后，访问 <code style="background:var(--surface);padding:2px 8px;border-radius:4px;font-size:13px">http://服务器IP:1420</code> 即可通过浏览器管理 OpenClaw，功能与桌面版一致。</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Docs Center ══════════════ -->
|
||
<section id="docs" class="section">
|
||
<div class="grid-bg"></div>
|
||
<div class="container-sm" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<h2 class="reveal section-title" data-i18n="docs.title"><span class="gradient-text">文档中心</span></h2>
|
||
<p class="reveal section-desc" data-i18n="docs.desc">遇到问题？这里有你需要的一切</p>
|
||
</div>
|
||
<div class="docs-grid">
|
||
<div class="reveal doc-card" onclick="openDoc('linux-deploy.md','Linux 服务器部署指南')">
|
||
<div class="doc-icon" style="background:rgba(234,179,8,0.12);color:#eab308"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></div>
|
||
<div>
|
||
<h3 data-i18n="doc1.t">Linux 部署指南</h3>
|
||
<p data-i18n="doc1.d">在 Linux 服务器上部署 ClawPanel Web 版，通过浏览器远程管理 OpenClaw</p>
|
||
<div class="doc-tags">
|
||
<span class="doc-tag" data-i18n="doc1.t1">一键部署</span>
|
||
<span class="doc-tag">systemd</span>
|
||
<span class="doc-tag">PM2</span>
|
||
<span class="doc-tag" data-i18n="doc1.t4">Nginx 反代</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal doc-card" onclick="openDoc('docker-deploy.md','Docker 部署指南')">
|
||
<div class="doc-icon" style="background:rgba(34,211,238,0.12);color:#22d3ee">🐳</div>
|
||
<div>
|
||
<h3 data-i18n="doc2.t">Docker 部署指南</h3>
|
||
<p data-i18n="doc2.d">用 Docker 部署 ClawPanel Web 版，支持 Compose 编排、自定义镜像、Gateway 联动</p>
|
||
<div class="doc-tags">
|
||
<span class="doc-tag">Docker Compose</span>
|
||
<span class="doc-tag">Dockerfile</span>
|
||
<span class="doc-tag" data-i18n="doc2.t3">Gateway 联动</span>
|
||
<span class="doc-tag" data-i18n="doc2.t4">Nginx 反代</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal doc-card" onclick="openDoc('../README.md','ClawPanel 项目主页')">
|
||
<div class="doc-icon" style="background:rgba(99,102,241,0.12);color:#6366f1">📖</div>
|
||
<div>
|
||
<h3 data-i18n="doc3.t">项目主页 README</h3>
|
||
<p data-i18n="doc3.d">完整的项目介绍，包含安装方式、功能特性、技术架构、源码构建、常见问题</p>
|
||
<div class="doc-tags">
|
||
<span class="doc-tag" data-i18n="doc3.t1">安装指南</span>
|
||
<span class="doc-tag" data-i18n="doc3.t2">功能介绍</span>
|
||
<span class="doc-tag" data-i18n="doc3.t3">源码构建</span>
|
||
<span class="doc-tag" data-i18n="doc3.t4">常见问题</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal doc-card" onclick="openDoc('../CHANGELOG.md','更新日志')">
|
||
<div class="doc-icon" style="background:rgba(168,85,247,0.12);color:#a855f7">📋</div>
|
||
<div>
|
||
<h3 data-i18n="doc4.t">更新日志</h3>
|
||
<p data-i18n="doc4.d">每个版本的新增功能、Bug 修复和改进记录</p>
|
||
<div class="doc-tags">
|
||
<span class="doc-tag" data-i18n="doc4.t1">新功能</span>
|
||
<span class="doc-tag" data-i18n="doc4.t2">Bug 修复</span>
|
||
<span class="doc-tag" data-i18n="doc4.t3">版本记录</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Markdown Reader Modal -->
|
||
<div class="md-reader" id="mdReader" onclick="if(event.target===this)closeDoc()">
|
||
<div class="md-reader-inner">
|
||
<div class="md-reader-header">
|
||
<h3 id="mdTitle"></h3>
|
||
<div style="display:flex;align-items:center;gap:8px">
|
||
<a id="mdGithubLink" href="#" target="_blank" rel="noopener" data-i18n="md.github">在 GitHub 上查看</a>
|
||
<button class="md-reader-close" onclick="closeDoc()">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="md-reader-body" id="mdContent"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════ Ecosystem ══════════════ -->
|
||
<section id="projects" class="section">
|
||
<div class="grid-bg"></div>
|
||
<div class="container-sm" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<h2 class="reveal section-title" data-i18n="eco.title"><span class="gradient-text">生态项目</span></h2>
|
||
<p class="reveal section-desc" data-i18n="eco.desc">ClawPanel 是 OpenClaw 生态的一部分</p>
|
||
</div>
|
||
<div class="eco-list">
|
||
<a href="https://github.com/1186258278/OpenClawChineseTranslation" target="_blank" rel="noopener" class="reveal eco-card">
|
||
<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 data-i18n="eco1.d">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><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 data-i18n="eco2.d">跨平台移动聊天客户端，随时随地与 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><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 data-i18n="eco3.d">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> <span id="dl-badge" data-i18n="dl.badge">v0.13.3 最新版</span></div>
|
||
<h2 class="reveal section-title" data-i18n="dl.title"><span class="gradient-text">下载安装</span></h2>
|
||
<p class="reveal section-desc" data-i18n="dl.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" data-i18n="dl.mac.d">支持 Apple Silicon 和 Intel 芯片</p>
|
||
<div class="dl-links">
|
||
<a class="dl-link" href="https://claw.qt.cool/proxy/dl/github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.13.3_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://claw.qt.cool/proxy/dl/github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.13.3_x64.dmg" target="_blank" rel="noopener">
|
||
<span data-i18n="dl.mac.intel">Intel 芯片</span>
|
||
<span class="dl-format">.dmg</span>
|
||
</a>
|
||
</div>
|
||
<div style="margin-top:16px;padding:12px;border-radius:10px;background:rgba(234,179,8,0.08);border:1px solid rgba(234,179,8,0.15);text-align:left">
|
||
<p style="font-size:12px;color:var(--text-s);margin-bottom:6px"><strong style="color:#eab308" data-i18n="dl.mac.warn">⚠️ 首次打开提示“已损坏”或“无法验证”？</strong></p>
|
||
<p style="font-size:12px;color:var(--text-s);margin-bottom:8px" data-i18n="dl.mac.step1">① 先将 ClawPanel <strong>拖入「应用程序」文件夹</strong>，然后打开终端执行：</p>
|
||
<code style="display:block;font-size:11px;padding:8px 10px;border-radius:6px;background:rgba(0,0,0,0.15);color:var(--accent);word-break:break-all;cursor:pointer" onclick="navigator.clipboard.writeText('sudo xattr -rd com.apple.quarantine /Applications/ClawPanel.app');this.textContent='✅ 已复制！';setTimeout(()=>this.textContent='sudo xattr -rd com.apple.quarantine /Applications/ClawPanel.app',1500)">sudo xattr -rd com.apple.quarantine /Applications/ClawPanel.app</code>
|
||
<p style="font-size:11px;color:var(--text-t);margin-top:6px" data-i18n="dl.mac.step2">② 或前往 <strong>系统设置 → 隐私与安全性</strong>，找到 ClawPanel 点击「仍要打开」</p>
|
||
<p style="font-size:11px;color:var(--text-t);margin-top:4px" data-i18n="dl.mac.step3">提示 No such file？说明没拖入应用程序，改用：<code style="font-size:10px;color:var(--accent);cursor:pointer" onclick="navigator.clipboard.writeText('sudo xattr -rd com.apple.quarantine ~/Downloads/ClawPanel.app');this.textContent='✅ 已复制';setTimeout(()=>this.textContent='sudo xattr -rd com.apple.quarantine ~/Downloads/ClawPanel.app',1500)">sudo xattr -rd com.apple.quarantine ~/Downloads/ClawPanel.app</code></p>
|
||
</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" data-i18n="dl.win.d">支持 Windows 10 及以上版本</p>
|
||
<div class="dl-links">
|
||
<a class="dl-link" href="https://claw.qt.cool/proxy/dl/github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.13.3_x64-setup.exe" target="_blank" rel="noopener">
|
||
<span data-i18n="dl.win.exe">安装程序</span>
|
||
<span class="dl-format">.exe</span>
|
||
</a>
|
||
<a class="dl-link" href="https://claw.qt.cool/proxy/dl/github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.13.3_x64-setup-full.exe" target="_blank" rel="noopener">
|
||
<span data-i18n="dl.win.full">完整包（含 WebView2）</span>
|
||
<span class="dl-format">.exe</span>
|
||
</a>
|
||
<a class="dl-link" href="https://claw.qt.cool/proxy/dl/github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.13.3_x64_en-US.msi" target="_blank" rel="noopener">
|
||
<span data-i18n="dl.win.msi">MSI 安装包</span>
|
||
<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" data-i18n="dl.linux.d">支持主流 Linux 发行版</p>
|
||
<div class="dl-links">
|
||
<a class="dl-link" href="https://claw.qt.cool/proxy/dl/github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.13.3_amd64.AppImage" target="_blank" rel="noopener">
|
||
<span data-i18n="dl.linux.ai">通用版</span>
|
||
<span class="dl-format">.AppImage</span>
|
||
</a>
|
||
<a class="dl-link" href="https://claw.qt.cool/proxy/dl/github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.13.3_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 data-i18n="dl.note1">查看 <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" data-i18n="dl.note2"><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>
|
||
|
||
<!-- ══════════════ 晴辰云 AI 接口 ══════════════ -->
|
||
<section id="ai-plan" class="section" style="padding-top:64px;padding-bottom:64px">
|
||
<div class="grid-bg"></div>
|
||
<div class="container" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<h2 class="reveal section-title"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-6px;margin-right:4px;color:var(--accent)"><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> <span class="gradient-text" data-i18n="ai.name">晴辰云 AI 接口</span></h2>
|
||
<p class="reveal section-desc" data-i18n="ai.desc">内部技术测试平台，签到领额度，邀请得更多</p>
|
||
</div>
|
||
<div class="reveal" style="max-width:800px;margin:0 auto;border-radius:20px;background:linear-gradient(135deg,#0f0c29 0%,#302b63 50%,#24243e 100%);color:#fff;position:relative;overflow:hidden;box-shadow:0 8px 40px rgba(48,43,99,0.3)">
|
||
<div style="position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,0.15) 0%,transparent 70%);pointer-events:none"></div>
|
||
<div style="position:absolute;bottom:-40px;left:-40px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,0.1) 0%,transparent 70%);pointer-events:none"></div>
|
||
<div style="padding:40px 48px;position:relative">
|
||
<div style="font-size:15px;color:rgba(255,255,255,0.8);line-height:1.9;margin-bottom:24px">
|
||
<p style="margin-bottom:12px" data-i18n="ai.p1">晴辰云 AI 接口是面向部分用户开放的<strong style="color:#a78bfa">内部技术测试平台</strong>。每日签到可领取测试额度，邀请好友可获得更多。</p>
|
||
<p style="margin-bottom:12px" data-i18n="ai.p2">兼容 OpenAI <code style="background:rgba(255,255,255,0.1);padding:2px 6px;border-radius:4px;font-size:13px">/v1/chat/completions</code> 和 <code style="background:rgba(255,255,255,0.1);padding:2px 6px;border-radius:4px;font-size:13px">/v1/responses</code> 接口，可无缝对接 OpenClaw。</p>
|
||
<p data-i18n="ai.p3">在 ClawPanel 内置助手设置中，选择模型 → 点击「测试」→「一键接入」即可开始使用。如需独立密钥，可前往活动站签到领取。</p>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px">
|
||
<div style="background:rgba(255,255,255,0.06);border-radius:12px;padding:16px;text-align:center;border:1px solid rgba(255,255,255,0.08)">
|
||
<div style="margin-bottom:6px"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 12l2 2 4-4"/></svg></div>
|
||
<div style="font-weight:700;font-size:14px;margin-bottom:4px" data-i18n="ai.c1.t">签到领额度</div>
|
||
<div style="font-size:12px;color:rgba(255,255,255,0.5)" data-i18n="ai.c1.d">每日签到 + 邀请好友</div>
|
||
</div>
|
||
<div style="background:rgba(255,255,255,0.06);border-radius:12px;padding:16px;text-align:center;border:1px solid rgba(255,255,255,0.08)">
|
||
<div style="margin-bottom:6px"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||
<div style="font-weight:700;font-size:14px;margin-bottom:4px" data-i18n="ai.c2.t">OpenAI 兼容</div>
|
||
<div style="font-size:12px;color:rgba(255,255,255,0.5)" data-i18n="ai.c2.d">无缝对接 OpenClaw</div>
|
||
</div>
|
||
<div style="background:rgba(255,255,255,0.06);border-radius:12px;padding:16px;text-align:center;border:1px solid rgba(255,255,255,0.08)">
|
||
<div style="margin-bottom:6px"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m21 2-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0 3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg></div>
|
||
<div style="font-weight:700;font-size:14px;margin-bottom:4px" data-i18n="ai.c3.t">独立密钥</div>
|
||
<div style="font-size:12px;color:rgba(255,255,255,0.5)" data-i18n="ai.c3.d">签到即可免费领取</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:20px">
|
||
<a href="https://gpt.qt.cool/checkin" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border-radius:12px;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;font-weight:600;font-size:14px;text-decoration:none;box-shadow:0 4px 16px rgba(99,102,241,0.4);transition:transform 0.2s"><svg width="16" height="16" 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="M8 12l2 2 4-4"/></svg> <span data-i18n="ai.btn1">签到领额度</span></a>
|
||
<a href="https://gpt.qt.cool/user" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border-radius:12px;border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:14px;font-weight:500;text-decoration:none;transition:all 0.2s"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg> <span data-i18n="ai.btn2">用量查询</span></a>
|
||
<a href="https://gpt.qt.cool/" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border-radius:12px;border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:14px;font-weight:500;text-decoration:none;transition:all 0.2s"><svg width="16" height="16" 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="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg> <span data-i18n="ai.btn3">晴辰云 AI</span></a>
|
||
</div>
|
||
<div style="font-size:12px;color:rgba(255,255,255,0.4);line-height:1.7;border-top:1px solid rgba(255,255,255,0.08);padding-top:16px">
|
||
<p data-i18n="ai.warn">⚠️ 本平台仅提供技术测试，禁止用于违法违规、绕过安全机制等用途。模型/接口以实际页面展示为准，可能灰度或版本切换。请妥善保管 API Key，具体规则以平台最新公告为准。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Sponsors ══════════════ -->
|
||
<section class="section" id="sponsors">
|
||
<div class="container">
|
||
<h2 class="reveal section-title" data-i18n="sp.title"><span class="gradient-text">赞助商</span></h2>
|
||
<p class="reveal section-desc" data-i18n="sp.desc">感谢以下赞助商对 ClawPanel 项目的支持</p>
|
||
<div class="reveal sponsor-card">
|
||
<a href="https://www.ciyundata.com/cart/goods.htm?id=267" target="_blank" rel="noopener" class="sponsor-link">
|
||
<div class="sponsor-badge" data-i18n="sp.name">慈云数据</div>
|
||
<div class="sponsor-slogan" data-i18n="sp.slogan">香港直连 2H2G 仅 99 元/年</div>
|
||
<div class="sponsor-desc" data-i18n="sp.info">
|
||
慈云数据服务团队于 2020 年成立，专注于基础云计算、游戏云、主题站长等业务。
|
||
售前售后服务 24 小时在线值班，强力保证为客户提供优质稳定的网络资源与机房服务。
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Star History ══════════════ -->
|
||
<section class="section" style="padding:48px 0">
|
||
<div class="container-sm" style="position:relative;z-index:10;text-align:center">
|
||
<h2 class="reveal section-title" data-i18n="star.title"><span class="gradient-text">Star 趋势</span></h2>
|
||
<p class="reveal section-desc" style="margin-bottom:32px" data-i18n="star.desc">感谢每一位 Star，你们是我们持续前进的动力</p>
|
||
<div class="reveal" style="border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--card-shadow)">
|
||
<a href="https://star-history.com/#qingchencloud/clawpanel&1186258278/OpenClawChineseTranslation&Date" target="_blank" rel="noopener">
|
||
<picture>
|
||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=qingchencloud/clawpanel,1186258278/OpenClawChineseTranslation&type=Date&theme=dark">
|
||
<img src="https://api.star-history.com/svg?repos=qingchencloud/clawpanel,1186258278/OpenClawChineseTranslation&type=Date" alt="Star History Chart" style="width:100%;display:block;background:#fff">
|
||
</picture>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Footer ══════════════ -->
|
||
<footer class="footer">
|
||
<div class="footer-inner">
|
||
<div class="footer-logo">
|
||
<img src="./logo.png" alt="Logo">
|
||
<span>ClawPanel © 2026</span>
|
||
</div>
|
||
<div class="footer-links">
|
||
<a href="https://github.com/qingchencloud/clawpanel" class="footer-link">GitHub</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/issues" class="footer-link">Issues</a>
|
||
<a href="https://qt.cool/c/OpenClaw" target="_blank" rel="noopener" class="footer-link" data-i18n="ft.qq">QQ 群</a>
|
||
<a href="https://qt.cool/c/feishu" target="_blank" rel="noopener" class="footer-link" data-i18n="ft.fs">飞书群</a>
|
||
<a href="https://discord.gg/U9AttmsNHh" target="_blank" rel="noopener" class="footer-link">Discord</a>
|
||
<a href="https://qt.cool" target="_blank" rel="noopener" class="footer-link" data-i18n="ft.qc">晴辰云</a>
|
||
</div>
|
||
<div class="footer-links" style="margin-top:8px;font-size:12px;gap:12px">
|
||
<span style="color:var(--text-t)">🌐</span>
|
||
<a href="https://github.com/qingchencloud/clawpanel/blob/main/README.md" class="footer-link">中文</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/blob/main/README.en.md" class="footer-link">English</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/blob/main/README.ja.md" class="footer-link">日本語</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/blob/main/README.ko.md" class="footer-link">한국어</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/blob/main/README.zh-TW.md" class="footer-link">繁體中文</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/blob/main/README.vi.md" class="footer-link">Tiếng Việt</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/blob/main/README.es.md" class="footer-link">Español</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/blob/main/README.pt.md" class="footer-link">Português</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/blob/main/README.ru.md" class="footer-link">Русский</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/blob/main/README.fr.md" class="footer-link">Français</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/blob/main/README.de.md" class="footer-link">Deutsch</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- ══════════════ Lightbox ══════════════ -->
|
||
<div class="lightbox" id="lightbox" onclick="closeLightbox(event)">
|
||
<button class="lb-close" onclick="closeLightbox(event)">×</button>
|
||
<img id="lb-img" src="" alt="预览">
|
||
</div>
|
||
|
||
<!-- ══════════════ JavaScript ══════════════ -->
|
||
<script>
|
||
/* ── Lightbox ── */
|
||
function openLightbox(src) {
|
||
document.getElementById('lb-img').src = src;
|
||
document.getElementById('lightbox').classList.add('active');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
function closeLightbox(e) {
|
||
if (e && e.target.tagName === 'IMG') return;
|
||
document.getElementById('lightbox').classList.remove('active');
|
||
document.body.style.overflow = '';
|
||
}
|
||
document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeLightbox(); });
|
||
|
||
/* ── Theme ── */
|
||
function toggleTheme() {
|
||
var h = document.documentElement;
|
||
var isDark = h.classList.contains('dark');
|
||
var toDark = !isDark;
|
||
// Light→Dark: bottom-left; Dark→Light: top-right
|
||
h.style.setProperty('--reveal-x', toDark ? '0%' : '100%');
|
||
h.style.setProperty('--reveal-y', toDark ? '100%' : '0%');
|
||
var switchFn = function() {
|
||
h.classList.toggle('dark');
|
||
localStorage.setItem('clawpanel-theme', toDark ? 'dark' : 'light');
|
||
};
|
||
if (document.startViewTransition) {
|
||
document.startViewTransition(switchFn);
|
||
} else {
|
||
switchFn();
|
||
}
|
||
}
|
||
document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
|
||
document.getElementById('theme-toggle-mobile').addEventListener('click', toggleTheme);
|
||
|
||
/* ── Mobile Menu ── */
|
||
var menu = document.getElementById('mobile-menu');
|
||
document.getElementById('hamburger').addEventListener('click', function() {
|
||
menu.classList.toggle('open');
|
||
});
|
||
document.querySelectorAll('.mobile-link').forEach(function(a) {
|
||
a.addEventListener('click', function() { menu.classList.remove('open'); });
|
||
});
|
||
|
||
/* ── Scroll Reveal ── */
|
||
var revealObs = new IntersectionObserver(function(entries) {
|
||
entries.forEach(function(e) {
|
||
if (e.isIntersecting) {
|
||
var delay = parseInt(e.target.dataset.delay) || 0;
|
||
setTimeout(function() { e.target.classList.add('revealed'); }, delay);
|
||
revealObs.unobserve(e.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
|
||
document.querySelectorAll('.reveal').forEach(function(el, i) {
|
||
if (!el.dataset.delay) {
|
||
var parent = el.closest('.showcase-row, .stats-grid, .gallery-grid, .info-grid, .community-grid, .community-extra, .eco-list');
|
||
if (parent) {
|
||
var siblings = parent.querySelectorAll('.reveal');
|
||
for (var j = 0; j < siblings.length; j++) {
|
||
if (siblings[j] === el) { el.dataset.delay = j * 80; break; }
|
||
}
|
||
}
|
||
}
|
||
revealObs.observe(el);
|
||
});
|
||
|
||
/* ── Counters ── */
|
||
var counterObs = new IntersectionObserver(function(entries) {
|
||
entries.forEach(function(e) {
|
||
if (!e.isIntersecting) return;
|
||
var el = e.target, target = parseInt(el.dataset.target), suffix = el.dataset.suffix || '';
|
||
var start = performance.now(), duration = 1500;
|
||
function tick(now) {
|
||
var p = Math.min((now - start) / duration, 1);
|
||
var ease = 1 - Math.pow(1 - p, 4);
|
||
el.textContent = Math.round(target * ease) + suffix;
|
||
if (p < 1) requestAnimationFrame(tick);
|
||
}
|
||
requestAnimationFrame(tick);
|
||
counterObs.unobserve(el);
|
||
});
|
||
}, { threshold: 0.5 });
|
||
document.querySelectorAll('.counter').forEach(function(el) { counterObs.observe(el); });
|
||
|
||
/* ── Tech Card Spotlight ── */
|
||
document.getElementById('tech-grid').addEventListener('mousemove', function(e) {
|
||
var cards = this.querySelectorAll('.tech-card');
|
||
cards.forEach(function(card) {
|
||
var r = card.getBoundingClientRect();
|
||
card.style.setProperty('--mx', (e.clientX - r.left) + 'px');
|
||
card.style.setProperty('--my', (e.clientY - r.top) + 'px');
|
||
});
|
||
});
|
||
|
||
|
||
/* ── Scroll Progress Bar ── */
|
||
var progressBar = document.getElementById('scroll-progress');
|
||
window.addEventListener('scroll', function() {
|
||
var h = document.documentElement.scrollHeight - window.innerHeight;
|
||
var p = h > 0 ? (window.scrollY / h) * 100 : 0;
|
||
progressBar.style.width = p + '%';
|
||
}, { passive: true });
|
||
|
||
/* ── Mouse Parallax on Orbs ── */
|
||
var orb1 = document.getElementById('orb1');
|
||
var orb2 = document.getElementById('orb2');
|
||
var heroEl = document.getElementById('hero');
|
||
heroEl.addEventListener('mousemove', function(e) {
|
||
var cx = (e.clientX / window.innerWidth - 0.5) * 2;
|
||
var cy = (e.clientY / window.innerHeight - 0.5) * 2;
|
||
orb1.style.transform = 'translate(' + (cx * 30) + 'px,' + (cy * 20) + 'px)';
|
||
orb2.style.transform = 'translate(' + (cx * -25) + 'px,' + (cy * -15) + 'px)';
|
||
});
|
||
heroEl.addEventListener('mouseleave', function() {
|
||
orb1.style.transform = ''; orb2.style.transform = '';
|
||
});
|
||
|
||
/* ── Magnetic Buttons ── */
|
||
document.querySelectorAll('.btn-magnetic').forEach(function(btn) {
|
||
btn.addEventListener('mousemove', function(e) {
|
||
var r = btn.getBoundingClientRect();
|
||
var dx = e.clientX - (r.left + r.width / 2);
|
||
var dy = e.clientY - (r.top + r.height / 2);
|
||
btn.style.transform = 'translate(' + (dx * 0.15) + 'px,' + (dy * 0.15) + 'px)';
|
||
});
|
||
btn.addEventListener('mouseleave', function() {
|
||
btn.style.transform = '';
|
||
});
|
||
});
|
||
|
||
/* ── Video Demo Controls ── */
|
||
function playDemoVideo() {
|
||
var v = document.getElementById('demoVideo');
|
||
var o = document.getElementById('videoOverlay');
|
||
var p = v.play();
|
||
if (p !== undefined) { p.catch(function() {}); }
|
||
o.classList.add('hidden');
|
||
}
|
||
function toggleDemoVideo() {
|
||
var v = document.getElementById('demoVideo');
|
||
var o = document.getElementById('videoOverlay');
|
||
if (v.paused) {
|
||
var p = v.play();
|
||
if (p !== undefined) { p.catch(function() {}); }
|
||
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, .doc-card').forEach(function(card) {
|
||
card.classList.add('tilt-card');
|
||
card.addEventListener('mousemove', function(e) {
|
||
var r = card.getBoundingClientRect();
|
||
var x = (e.clientX - r.left) / r.width - 0.5;
|
||
var y = (e.clientY - r.top) / r.height - 0.5;
|
||
card.style.transform = 'perspective(600px) rotateY(' + (x * 8) + 'deg) rotateX(' + (-y * 8) + 'deg) scale(1.02)';
|
||
});
|
||
card.addEventListener('mouseleave', function() {
|
||
card.style.transform = '';
|
||
});
|
||
});
|
||
/* ── Doc Card Spotlight ── */
|
||
document.querySelectorAll('.doc-card').forEach(function(card) {
|
||
card.addEventListener('mousemove', function(e) {
|
||
var r = card.getBoundingClientRect();
|
||
card.style.setProperty('--mouse-x', ((e.clientX - r.left) / r.width * 100) + '%');
|
||
card.style.setProperty('--mouse-y', ((e.clientY - r.top) / r.height * 100) + '%');
|
||
});
|
||
});
|
||
|
||
/* ── Markdown Reader ── */
|
||
var GITHUB_RAW = 'https://raw.githubusercontent.com/qingchencloud/clawpanel/main/';
|
||
var GITHUB_BLOB = 'https://github.com/qingchencloud/clawpanel/blob/main/';
|
||
var docCache = {};
|
||
var markedLoaded = false;
|
||
|
||
function loadMarked(cb) {
|
||
if (markedLoaded) return cb();
|
||
var s = document.createElement('script');
|
||
s.src = 'https://cdn.jsdelivr.net/npm/marked@15/marked.min.js';
|
||
s.onload = function() { markedLoaded = true; cb(); };
|
||
s.onerror = function() { cb(true); };
|
||
document.head.appendChild(s);
|
||
}
|
||
|
||
function openDoc(file, title) {
|
||
var reader = document.getElementById('mdReader');
|
||
var content = document.getElementById('mdContent');
|
||
var titleEl = document.getElementById('mdTitle');
|
||
var ghLink = document.getElementById('mdGithubLink');
|
||
|
||
titleEl.textContent = title;
|
||
var blobPath = file.replace(/^\.\.\//g, '');
|
||
if (!blobPath.startsWith('docs/') && blobPath !== 'README.md' && blobPath !== 'CHANGELOG.md') blobPath = 'docs/' + blobPath;
|
||
ghLink.href = GITHUB_BLOB + blobPath;
|
||
reader.classList.add('active');
|
||
document.body.style.overflow = 'hidden';
|
||
|
||
if (docCache[file]) {
|
||
renderDoc(docCache[file], content);
|
||
return;
|
||
}
|
||
|
||
content.innerHTML = '<div class="md-loading">加载中...</div>';
|
||
|
||
loadMarked(function(err) {
|
||
if (err) {
|
||
content.innerHTML = '<div class="md-loading">marked.js 加载失败，<a href="' + ghLink.href + '" target="_blank">在 GitHub 上查看</a></div>';
|
||
return;
|
||
}
|
||
var rawPath = file.startsWith('../') ? file.replace('../', '') : 'docs/' + file;
|
||
fetch(GITHUB_RAW + rawPath)
|
||
.then(function(res) { if (!res.ok) throw new Error(res.status); return res.text(); })
|
||
.then(function(md) {
|
||
docCache[file] = md;
|
||
renderDoc(md, content);
|
||
})
|
||
.catch(function() {
|
||
content.innerHTML = '<div class="md-loading">文档加载失败，<a href="' + ghLink.href + '" target="_blank">在 GitHub 上查看原文</a></div>';
|
||
});
|
||
});
|
||
}
|
||
|
||
function renderDoc(md, container) {
|
||
container.innerHTML = marked.parse(md);
|
||
container.querySelectorAll('a').forEach(function(a) {
|
||
var href = a.getAttribute('href');
|
||
if (!href) return;
|
||
if (href.charAt(0) === '#') {
|
||
a.onclick = function(e) {
|
||
e.preventDefault();
|
||
var target = container.querySelector('[id="' + href.substring(1) + '"]');
|
||
if (target) target.scrollIntoView({ behavior: 'smooth' });
|
||
};
|
||
} else if (!href.startsWith('http')) {
|
||
a.href = GITHUB_BLOB + 'docs/' + href;
|
||
a.target = '_blank';
|
||
}
|
||
});
|
||
container.scrollTop = 0;
|
||
document.getElementById('mdReader').scrollTop = 0;
|
||
}
|
||
|
||
function closeDoc() {
|
||
document.getElementById('mdReader').classList.remove('active');
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape') closeDoc();
|
||
});
|
||
|
||
/* ── Robust Anchor Scroll (handles lazy-loaded image layout shift) ── */
|
||
function smoothScrollTo(target) {
|
||
if (!target) return;
|
||
var lastTop = -1;
|
||
function doScroll() {
|
||
var top = target.getBoundingClientRect().top + window.scrollY - 120;
|
||
window.scrollTo({ top: top, behavior: 'smooth' });
|
||
return top;
|
||
}
|
||
lastTop = doScroll();
|
||
// Re-check position after images may have loaded and shifted layout
|
||
var retries = [300, 600, 1200];
|
||
retries.forEach(function(delay) {
|
||
setTimeout(function() {
|
||
var newTop = target.getBoundingClientRect().top + window.scrollY - 120;
|
||
if (Math.abs(newTop - window.scrollY) > 30) {
|
||
doScroll();
|
||
}
|
||
}, delay);
|
||
});
|
||
}
|
||
// Intercept all anchor link clicks
|
||
document.querySelectorAll('a[href^="#"]').forEach(function(link) {
|
||
link.addEventListener('click', function(e) {
|
||
var hash = this.getAttribute('href');
|
||
if (!hash || hash === '#') return;
|
||
e.preventDefault();
|
||
var target = document.querySelector(hash);
|
||
if (target) {
|
||
smoothScrollTo(target);
|
||
history.pushState(null, '', hash);
|
||
}
|
||
});
|
||
});
|
||
// Fix anchor position on initial page load with hash
|
||
window.addEventListener('load', function() {
|
||
if (window.location.hash) {
|
||
var target = document.querySelector(window.location.hash);
|
||
if (target) setTimeout(function() { smoothScrollTo(target); }, 100);
|
||
}
|
||
});
|
||
|
||
/* ── i18n ── */
|
||
var _lang = localStorage.getItem('clawpanel-lang') || (navigator.language && navigator.language.startsWith('en') ? 'en' : 'zh');
|
||
var _origTexts = {};
|
||
var _en = {
|
||
'nav.features':'Features','nav.tech':'Architecture','nav.quickstart':'Quick Start',
|
||
'nav.deploy':'Deploy','nav.docs':'Docs','nav.community':'Community',
|
||
'nav.activity':'Activity','nav.download':'Download',
|
||
'hero.badge':'Built-in AI Assistant — Supporting OpenClaw & Hermes Agent Dual-Engine Management',
|
||
'hero.title':'<span class="gradient-text shimmer">AI Assistant</span>-Powered<br>Multi-Engine AI Management Panel',
|
||
'hero.sub':'Supports <strong>OpenClaw</strong> and <strong>Hermes Agent</strong> dual engines with built-in AI assistant for one-click install, auto-diagnosis, troubleshooting & error fixing.<br>Built-in Hermes Agent chat, messaging channels, QQ bot, plus Telegram, Discord & more.',
|
||
'hero.dl':'Download Latest','hero.src':'Source Code',
|
||
'stat.1':'Modules','stat.2':'Desktop Framework','stat.3':'Cross-Platform','stat.4':'License',
|
||
'comm.title':'<span class="gradient-text">Join Community</span>',
|
||
'comm.desc':'A community of developers and enthusiasts passionate about AI Agents.<br>Share tips, exchange experiences, report issues, and get the latest updates first.',
|
||
'comm.discord':'Discord','comm.discuss':'Discussions','comm.yuanbao':'Yuanbao Pai',
|
||
'comm.issue':'Report Issue','comm.feishu':'Feishu Group',
|
||
'qr.qq':'QQ Group','qr.wx':'WeChat Group','qr.dy':'Douyin Group','qr.fs':'Feishu Group',
|
||
'qr.join':'Scan to Join',
|
||
'video.badge':'50-Second Overview',
|
||
'video.title':'Product <span class="gradient-text">Demo Video</span>',
|
||
'video.desc':'From dashboard to memory management, see all core features in one video',
|
||
'feat.title':'Powerful <span class="gradient-text">Feature Matrix</span>',
|
||
'feat.desc':'One panel to manage OpenClaw & Hermes Agent',
|
||
'feat.tag.overview':'Full Overview','feat.tag.ready':'Ready to Use','feat.tag.soul':'Soul Transfer',
|
||
'feat.tag.core':'Core Feature','feat.tag.config':'Config Center','feat.tag.data':'Data Management',
|
||
'feat.tag.security':'Security','feat.tag.agent':'Smart Agent',
|
||
'sc1.title':'Dashboard — Status at a Glance',
|
||
'sc1.desc':'Gateway status, version info, Agent count, model pool overview, plus tunnel status, service monitoring and real-time log stream. All OpenClaw metrics on one screen.',
|
||
'sc1.l1':'Gateway / Tunnel / Service real-time status cards',
|
||
'sc1.l2':'Config version ID & last backup time',
|
||
'sc1.l3':'Parallel inference queue & workspace isolation',
|
||
'sc1.l4':'Restart / Check update / Create backup shortcuts',
|
||
'sc2.title':'Qingchen Cloud AI API — Sign in for Quota',
|
||
'sc2.desc':'Built-in <strong>Qingchen Cloud AI API</strong>, sign in daily for test quota, invite friends for more. Select model, one-click access. Also supports any OpenAI-compatible API.',
|
||
'sc2.l1':'Qingchen Cloud API one-click access',
|
||
'sc2.l2':'Full GPT-5 series models available',
|
||
'sc2.l3':'Compatible with Chat Completions & Responses API',
|
||
'sc2.l4':'Independent config, no OpenClaw installation needed',
|
||
'sc3.title':'Inherit Agent Personality & Memory',
|
||
'sc3.desc':'Load complete soul from OpenClaw Agent — SOUL.md (personality), IDENTITY.md (identity), USER.md (preferences), AGENTS.md (rules), TOOLS.md (tools) with one click. Give your AI assistant all your Agent\'s capabilities.',
|
||
'sc3.l1':'One-click Agent soul loading (5/6 core files)',
|
||
'sc3.l2':'Free switching between multiple Agent souls',
|
||
'sc3.l3':'Retain ClawPanel tool-calling capability',
|
||
'sc3.l4':'Fine-grained tool permission control',
|
||
'sc4.title':'Real-time Chat — Multi-model Streaming',
|
||
'sc4.desc':'WebSocket direct to Gateway, streaming response character by character. Auto-lists all configured models (including Qingchen Cloud AI), supports image attachments, Markdown rendering and slash commands.',
|
||
'sc4.l1':'Multi-provider model auto-aggregation',
|
||
'sc4.l2':'Multi-session management & history',
|
||
'sc4.l3':'Image drag & drop & multimodal chat',
|
||
'sc4.l4':'/ Slash command system',
|
||
'sc5.title':'Multi-Provider Unified Management',
|
||
'sc5.desc':'OpenAI, Qingchen Cloud AI, DeepSeek, Kimi and more — unified management. Built-in Qingchen Cloud API one-click add all models. Visual primary + fallback auto-switch, batch connectivity test.',
|
||
'sc5.l1':'Qingchen Cloud API one-click add all models',
|
||
'sc5.l2':'Batch connectivity test & latency detection',
|
||
'sc5.l3':'Primary model + fallback auto-switch',
|
||
'sc5.l4':'Drag-and-drop sorting & real-time save',
|
||
'sc6.title':'Give Agent Memory',
|
||
'sc6.desc':'Edit Agent working memory online, browse memory archives, manage core config files (SOUL.md, AGENTS.md, etc.). ZIP one-click export, multi-Agent memory fully isolated.',
|
||
'sc6.l1':'Working memory & archives & core files',
|
||
'sc6.l2':'Online editing & live preview',
|
||
'sc6.l3':'Multi-Agent memory isolation',
|
||
'sc6.l4':'ZIP download package',
|
||
'sc7.title':'Security Auth + Tool Permission Control',
|
||
'sc7.desc':'Token / Password dual auth modes, card-style intuitive selection. Agent tool permissions 3-tier adjustable (Full / Limited / Disabled), session visibility fine-grained control. Security and flexibility combined.',
|
||
'sc7.l1':'Token & Password dual auth modes',
|
||
'sc7.l2':'Agent tool permissions 3-tier control',
|
||
'sc7.l3':'Session visibility control',
|
||
'sc7.l4':'Auto-restart on config change',
|
||
'sc8.title':'Multi-Agent Collaboration Management',
|
||
'sc8.desc':'Create and manage multiple AI Agents, each with its own name, model and independent workspace. Supports backup, editing and default Agent quick switching.',
|
||
'sc8.l1':'Multi-Agent independent workspaces',
|
||
'sc8.l2':'Identity & model individual config',
|
||
'sc8.l3':'Agent config backup & editing',
|
||
'sc8.l4':'Default Agent quick switch',
|
||
'more.title':'And <span class="gradient-text">More</span>',
|
||
'more.desc':'Operations, monitoring, diagnostics — everything covered',
|
||
'gl.svc':'Service Mgmt','gl.kb':'Knowledge Base','gl.sec':'Security','gl.ext':'Extensions','gl.diag':'Diagnostics','gl.about':'About',
|
||
'ic.svc.t':'Service Management','ic.svc.d':'Start/stop control, version detection, one-click upgrade, npm source switch, config backup & restore',
|
||
'ic.kb.t':'Knowledge Base','ic.kb.d':'Custom knowledge injection for AI assistant, Markdown format, auto-activated during chat',
|
||
'ic.sec.t':'Security Settings','ic.sec.d':'Access password protection, ignore-risk mode toggle, panel access security control',
|
||
'ic.ext.t':'Extensions','ic.ext.d':'cftunnel tunnel, ClawApp mobile client one-click install',
|
||
'ic.diag.t':'System Diagnostics','ic.diag.d':'Comprehensive health check, WebSocket test, network logs, one-click pairing fix',
|
||
'ic.about.t':'About','ic.about.d':'Version info, community links (QQ / WeChat / Douyin), related project links',
|
||
'tech.title':'<span class="gradient-text">Technical Architecture</span>',
|
||
'tech.desc':'Carefully selected tech stack, pursuing ultimate performance and developer experience',
|
||
'tech1.name':'Rust + Tauri v2','tech1.sub':'Backend Runtime',
|
||
'tech1.desc':'Native compilation, memory-safe, cross-platform packaging. Efficient IPC with frontend, Shell Plugin for local commands.',
|
||
'tech2.name':'Vanilla JS + Vite','tech2.sub':'Frontend Architecture',
|
||
'tech2.desc':'Zero framework dependency, SPA routing, component design. Vite ultra-fast HMR, browser mock mode for independent debugging.',
|
||
'tech3.name':'WebSocket + RPC','tech3.sub':'Real-time Communication',
|
||
'tech3.desc':'WsClient manages WebSocket connections, heartbeat keep-alive and auto-reconnect. RPC request-response + event subscription dual mode.',
|
||
'tech4.name':'CSS Variables','tech4.sub':'Theme System',
|
||
'tech4.desc':'Dark / Light theme flicker-free switch, glassmorphism UI style, CSS custom properties for global style management.',
|
||
'qs.title':'<span class="gradient-text">Quick Start</span>',
|
||
'qs.desc':'A few commands, ready to go',
|
||
'qs.c1':'# Clone repository','qs.c2':'# macOS / Linux — Start full Tauri desktop app',
|
||
'qs.c3':'# Windows — Start full Tauri desktop app','qs.c4':'# Frontend only (browser mock mode)',
|
||
'dep.title':'Server <span class="gradient-text">Deploy Guide</span>',
|
||
'dep.desc':'No desktop environment? Deploy ClawPanel Web on Linux or Docker, manage OpenClaw from your browser',
|
||
'dep.linux.t':'Linux One-Click Deploy',
|
||
'dep.linux.d':'Supports Ubuntu, Debian, CentOS, Fedora, Alpine and more',
|
||
'dep.linux.c':'# One-click deploy ClawPanel Web + OpenClaw + systemd autostart',
|
||
'dep.linux.btn':'Full Tutorial',
|
||
'dep.docker.t':'Docker Deploy',
|
||
'dep.docker.d':'Container isolation, supports Compose orchestration, custom images, Nginx reverse proxy',
|
||
'dep.docker.c':'# One command to start ClawPanel Web',
|
||
'dep.docker.btn':'Full Tutorial',
|
||
'dep.note':'After deployment, visit <code style="background:var(--surface);padding:2px 8px;border-radius:4px;font-size:13px">http://SERVER_IP:1420</code> to manage OpenClaw from your browser, with all desktop features.',
|
||
'docs.title':'<span class="gradient-text">Documentation</span>',
|
||
'docs.desc':'Having issues? Everything you need is here',
|
||
'doc1.t':'Linux Deploy Guide','doc1.d':'Deploy ClawPanel Web on Linux server, manage OpenClaw remotely via browser',
|
||
'doc1.t1':'One-Click Deploy','doc1.t4':'Nginx Proxy',
|
||
'doc2.t':'Docker Deploy Guide','doc2.d':'Deploy ClawPanel Web with Docker, supports Compose, custom images, Gateway integration',
|
||
'doc2.t3':'Gateway Integration','doc2.t4':'Nginx Proxy',
|
||
'doc3.t':'Project README','doc3.d':'Complete project intro, installation, features, architecture, source build, FAQ',
|
||
'doc3.t1':'Install Guide','doc3.t2':'Features','doc3.t3':'Source Build','doc3.t4':'FAQ',
|
||
'doc4.t':'Changelog','doc4.d':'New features, bug fixes and improvements for each version',
|
||
'doc4.t1':'New Features','doc4.t2':'Bug Fixes','doc4.t3':'Version History',
|
||
'eco.title':'<span class="gradient-text">Ecosystem</span>',
|
||
'eco.desc':'ClawPanel supports the OpenClaw & Hermes Agent ecosystems',
|
||
'eco1.d':'AI Agent Framework — ClawPanel\'s core management target',
|
||
'eco2.d':'Cross-platform mobile chat client, talk to AI Agent anywhere',
|
||
'eco3.d':'Cloudflare Tunnel tool, expose local services with one click',
|
||
'dl.badge':'Latest',
|
||
'dl.title':'<span class="gradient-text">Download</span>',
|
||
'dl.desc':'Choose your OS, one-click download and install',
|
||
'dl.mac.d':'Supports Apple Silicon and Intel chips',
|
||
'dl.mac.intel':'Intel Chip',
|
||
'dl.mac.warn':'⚠️ First launch shows "damaged" or "cannot verify"?',
|
||
'dl.mac.step1':'① First drag ClawPanel into the <strong>Applications folder</strong>, then run in Terminal:',
|
||
'dl.mac.step2':'② Or go to <strong>System Settings → Privacy & Security</strong>, find ClawPanel and click "Open Anyway"',
|
||
'dl.mac.step3':'Getting "No such file"? Not in Applications — use: <code style="font-size:10px;color:var(--accent);cursor:pointer" onclick="navigator.clipboard.writeText(\'sudo xattr -rd com.apple.quarantine ~/Downloads/ClawPanel.app\');this.textContent=\'✅ Copied\';setTimeout(()=>this.textContent=\'sudo xattr -rd com.apple.quarantine ~/Downloads/ClawPanel.app\',1500)">sudo xattr -rd com.apple.quarantine ~/Downloads/ClawPanel.app</code>',
|
||
'dl.win.d':'Supports Windows 10 and above',
|
||
'dl.win.exe':'Installer','dl.win.full':'Full (with WebView2)','dl.win.msi':'MSI Package',
|
||
'dl.linux.d':'Supports major Linux distributions',
|
||
'dl.linux.ai':'Universal',
|
||
'dl.note1':'View <a href="https://github.com/qingchencloud/clawpanel/releases" target="_blank" rel="noopener">All Releases</a> · Need help? Read the <a href="https://github.com/qingchencloud/clawpanel#readme" target="_blank" rel="noopener">Installation Docs</a>',
|
||
'dl.note2':'<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> Slow download in China? Join <a href="https://qt.cool/c/OpenClaw" target="_blank" rel="noopener">QQ Group</a> or <a href="https://qt.cool/c/OpenClawWx" target="_blank" rel="noopener">WeChat Group</a> for direct file transfer',
|
||
'ai.name':'Qingchen Cloud AI API',
|
||
'ai.desc':'Internal technical testing platform, sign in for quota, invite for more',
|
||
'ai.p1':'Qingchen Cloud AI API is an <strong style="color:#a78bfa">internal technical testing platform</strong> open to select users. Sign in daily for test quota, invite friends for more.',
|
||
'ai.p2':'Compatible with OpenAI <code style="background:rgba(255,255,255,0.1);padding:2px 6px;border-radius:4px;font-size:13px">/v1/chat/completions</code> and <code style="background:rgba(255,255,255,0.1);padding:2px 6px;border-radius:4px;font-size:13px">/v1/responses</code> APIs, seamless OpenClaw integration.',
|
||
'ai.p3':'In ClawPanel assistant settings, select model → click "Test" → "One-click Access" to start. For independent API keys, sign in at the activity site.',
|
||
'ai.c1.t':'Sign-in Quota','ai.c1.d':'Daily sign-in + invite friends',
|
||
'ai.c2.t':'OpenAI Compatible','ai.c2.d':'Seamless OpenClaw integration',
|
||
'ai.c3.t':'Independent Key','ai.c3.d':'Free with sign-in',
|
||
'ai.btn1':'Sign in for Quota','ai.btn2':'Usage Query','ai.btn3':'Qingchen Cloud AI',
|
||
'ai.warn':'⚠️ This platform is for technical testing only. Prohibited for illegal, non-compliant, or security-bypassing use. Models/APIs subject to actual page display. Please keep your API Key secure.',
|
||
'sp.title':'<span class="gradient-text">Sponsors</span>',
|
||
'sp.desc':'Thanks to the following sponsors for supporting the ClawPanel project',
|
||
'sp.name':'Ciyun Data','sp.slogan':'HK Direct 2H2G only 99 CNY/year',
|
||
'sp.info':'Ciyun Data Service Team est. 2020, focused on cloud computing, game cloud, and webmaster services. 24/7 pre-sales and after-sales support.',
|
||
'star.title':'<span class="gradient-text">Star History</span>',
|
||
'star.desc':'Thanks to every Star, you are the driving force behind our progress',
|
||
'ft.qq':'QQ Group','ft.fs':'Feishu Group','ft.qc':'Qingchen Cloud',
|
||
'md.loading':'Loading...','md.fail':'Failed to load',
|
||
'md.github':'View on GitHub','md.raw':'View raw on GitHub'
|
||
};
|
||
function _initI18n() {
|
||
document.querySelectorAll('[data-i18n]').forEach(function(el) {
|
||
var k = el.getAttribute('data-i18n');
|
||
if (!_origTexts[k]) _origTexts[k] = el.innerHTML;
|
||
});
|
||
_applyLang();
|
||
_updateLangBtns();
|
||
}
|
||
function _applyLang() {
|
||
document.querySelectorAll('[data-i18n]').forEach(function(el) {
|
||
var k = el.getAttribute('data-i18n');
|
||
if (!_origTexts[k]) _origTexts[k] = el.innerHTML;
|
||
if (_lang === 'en' && _en[k]) el.innerHTML = _en[k];
|
||
else if (_origTexts[k]) el.innerHTML = _origTexts[k];
|
||
});
|
||
document.documentElement.lang = _lang === 'en' ? 'en' : 'zh-CN';
|
||
}
|
||
function _updateLangBtns() {
|
||
var d = document.getElementById('lang-toggle');
|
||
var m = document.getElementById('lang-toggle-mobile');
|
||
if (d) d.textContent = _lang === 'zh' ? 'EN' : '中';
|
||
if (m) m.textContent = _lang === 'zh' ? 'EN' : '中';
|
||
}
|
||
function _toggleLang() {
|
||
_lang = _lang === 'zh' ? 'en' : 'zh';
|
||
localStorage.setItem('clawpanel-lang', _lang);
|
||
_applyLang();
|
||
_updateLangBtns();
|
||
}
|
||
document.getElementById('lang-toggle').addEventListener('click', _toggleLang);
|
||
document.getElementById('lang-toggle-mobile').addEventListener('click', _toggleLang);
|
||
|
||
/* ── Dynamic Download Links from latest.json ── */
|
||
(function() {
|
||
var BASE = 'https://claw.qt.cool/update/latest.json';
|
||
fetch(BASE).then(function(r) { return r.json(); }).then(function(d) {
|
||
var ver = d.version;
|
||
if (!ver) return;
|
||
// 更新版本徽章
|
||
var badge = document.getElementById('dl-badge');
|
||
if (badge) {
|
||
var suffix = _lang === 'en' ? ' Latest' : ' 最新版';
|
||
badge.textContent = 'v' + ver + suffix;
|
||
_origTexts['dl.badge'] = 'v' + ver + ' 最新版';
|
||
_en['dl.badge'] = 'v' + ver + ' Latest';
|
||
}
|
||
// 更新 JSON-LD 版本
|
||
// 更新所有下载链接：替换旧版本号为新版本号
|
||
document.querySelectorAll('#download .dl-link').forEach(function(a) {
|
||
var href = a.getAttribute('href');
|
||
if (!href) return;
|
||
// 替换 URL 中的版本号模式 ClawPanel_X.Y.Z_
|
||
var updated = href.replace(/ClawPanel_[\d.]+_/g, 'ClawPanel_' + ver + '_');
|
||
a.setAttribute('href', updated);
|
||
});
|
||
}).catch(function() { /* 静默失败，保留硬编码链接作为兜底 */ });
|
||
})();
|
||
|
||
/* ── Init i18n ── */
|
||
_initI18n();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|