mirror of
https://github.com/qingchencloud/clawpanel.git
synced 2026-05-07 04:52:53 +08:00
1421 lines
108 KiB
HTML
1421 lines
108 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 AI Agent 可视化管理面板 | 快速搭建、配置、监控你的 AI 智能体</title>
|
||
<meta name="description" content="ClawPanel 是 OpenClaw AI Agent 框架的可视化管理面板，基于 Tauri v2 构建的跨平台桌面应用。内置 AI 助手支持工具调用（终端执行、文件读写、目录浏览），让 AI 帮你诊断和修复 OpenClaw 配置。支持仪表盘监控、多模型配置（OpenAI/DeepSeek/Kimi/Anthropic）、实时 AI 聊天、记忆管理、Agent 管理、网关配置、服务管控、日志查看、内网穿透、系统诊断。一键安装 OpenClaw，快速搭建你的私有 AI Agent，开源免费，支持 Windows/macOS/Linux。">
|
||
<meta name="keywords" content="ClawPanel, OpenClaw, AI Agent, AI 智能体, 管理面板, 可视化管理, 快速搭建, 一键安装, 桌面应用, 跨平台, Tauri, Tauri v2, Rust, 开源, 免费, LLM, 大语言模型, 多模型, 模型配置, OpenAI, DeepSeek, Kimi, Anthropic, Claude, 实时聊天, AI 对话, 流式响应, 记忆管理, Agent 管理, 多 Agent, 网关配置, Gateway, 服务管理, 日志查看, 内网穿透, Cloudflare Tunnel, 系统诊断, WebSocket, 仪表盘, 监控, 配置管理, 私有部署, 本地部署, 自托管, AI 工具, AI 平台, 智能体平台, 人工智能, 深度学习, 自然语言处理, NLP, 模型调度, 模型切换, 备选模型, 开箱即用, 零代码, 低代码, admin panel, dashboard, open source AI, self-hosted AI, local AI, AI management">
|
||
<meta name="author" content="晴辰云 QingchenCloud">
|
||
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large">
|
||
<link rel="canonical" href="https://claw.qt.cool/">
|
||
<meta property="og:title" content="ClawPanel - OpenClaw AI Agent 可视化管理面板 | 快速搭建你的 AI 智能体">
|
||
<meta property="og:description" content="基于 Tauri v2 的跨平台桌面应用，为 OpenClaw AI Agent 提供可视化管理。内置 AI 助手支持工具调用，让 AI 帮你诊断修复配置。支持多模型配置、实时聊天、记忆管理等 10+ 功能模块。开源免费。">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://claw.qt.cool/">
|
||
<meta property="og:site_name" content="ClawPanel">
|
||
<meta property="og:locale" content="zh_CN">
|
||
<meta property="og:image" content="https://claw.qt.cool/00.png">
|
||
<meta property="og:image:width" content="1200">
|
||
<meta property="og:image:height" content="675">
|
||
<meta property="og:image:alt" content="ClawPanel AI 助手截图">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="ClawPanel - OpenClaw AI Agent 可视化管理面板">
|
||
<meta name="twitter:description" content="基于 Tauri v2 的跨平台桌面应用。多模型配置、实时 AI 聊天、Agent 管理、内网穿透，一站式管理你的 AI 智能体。">
|
||
<meta name="twitter:image" content="https://claw.qt.cool/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 AI Agent 可视化管理面板，基于 Tauri v2 的跨平台桌面应用。支持仪表盘监控、多模型配置、实时 AI 聊天、记忆管理、Agent 管理、网关配置、内网穿透等功能。",
|
||
"url": "https://claw.qt.cool/",
|
||
"downloadUrl": "https://github.com/qingchencloud/clawpanel/releases/latest",
|
||
"softwareVersion": "0.5.7",
|
||
"author": {
|
||
"@type": "Organization",
|
||
"name": "晴辰云 QingchenCloud",
|
||
"url": "https://qt.cool"
|
||
},
|
||
"license": "https://opensource.org/licenses/MIT",
|
||
"offers": {
|
||
"@type": "Offer",
|
||
"price": "0",
|
||
"priceCurrency": "CNY"
|
||
},
|
||
"screenshot": "https://claw.qt.cool/00.png",
|
||
"keywords": "OpenClaw, AI Agent, 管理面板, Tauri, 跨平台, 开源, 免费, LLM, 多模型"
|
||
}
|
||
</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);
|
||
}
|
||
|
||
/* ══════════════ 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; transition: background 0.3s, color 0.3s; }
|
||
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); }
|
||
.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(4,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(4,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 ══════════════ */
|
||
.community-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-bottom: 32px; }
|
||
.community-card { border-radius: 20px; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: blur(8px); padding: 40px 32px; text-align: center; transition: all 0.35s cubic-bezier(0.16,1,0.3,1); }
|
||
.community-card:hover { transform: translateY(-6px); border-color: var(--border-h); box-shadow: 0 16px 48px -12px rgba(99,102,241,0.18); }
|
||
.community-emoji { font-size: 48px; margin-bottom: 16px; display: block; }
|
||
.community-qr { width: 160px; height: 160px; border-radius: 12px; margin: 0 auto 16px; border: 1px solid var(--border); }
|
||
.community-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
|
||
.community-card .desc { font-size: 14px; color: var(--text-s); margin-bottom: 20px; }
|
||
.community-extra { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
|
||
.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; }
|
||
.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; }
|
||
|
||
/* ══════════════ 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 ══════════════ */
|
||
@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; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.hero-title { font-size: 2.5rem; }
|
||
.section-title { font-size: 1.75rem; }
|
||
.showcase-title { font-size: 1.5rem; }
|
||
.community-grid { grid-template-columns: 1fr; }
|
||
.hero-cta { flex-direction: column; align-items: center; }
|
||
.btn { width: 100%; max-width: 320px; justify-content: center; }
|
||
.footer-inner { flex-direction: column; gap: 16px; text-align: center; }
|
||
.footer-links { flex-wrap: wrap; justify-content: center; }
|
||
}
|
||
@media (max-width: 640px) {
|
||
.hero-title { font-size: 2rem; }
|
||
.section { padding: 64px 0; }
|
||
.gallery-grid { grid-template-columns: 1fr 1fr; }
|
||
.info-grid { grid-template-columns: 1fr 1fr; }
|
||
.stats-grid { grid-template-columns: 1fr 1fr; }
|
||
.stat-value { font-size: 1.5rem; }
|
||
}
|
||
</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">功能预览</a>
|
||
<a href="#tech" class="nav-link">架构</a>
|
||
<a href="#quickstart" class="nav-link">开始</a>
|
||
<a href="#deploy" class="nav-link">部署</a>
|
||
<a href="#docs" class="nav-link">文档</a>
|
||
<a href="#community" class="nav-link">社区</a>
|
||
<a href="#download" class="nav-link">下载</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel" target="_blank" rel="noopener" class="nav-link">GitHub</a>
|
||
<button id="theme-toggle" class="theme-btn" aria-label="切换主题">
|
||
<svg class="sun" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
|
||
<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>
|
||
</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="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">功能预览</a>
|
||
<a href="#tech" class="mobile-menu-link mobile-link">架构</a>
|
||
<a href="#quickstart" class="mobile-menu-link mobile-link">开始</a>
|
||
<a href="#deploy" class="mobile-menu-link mobile-link">部署</a>
|
||
<a href="#docs" class="mobile-menu-link mobile-link">文档</a>
|
||
<a href="#community" class="mobile-menu-link mobile-link">社区</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> 🤖 内置 AI 助手 — 一键安装、配置、诊断、修复 OpenClaw</div>
|
||
<h1 class="reveal hero-title"><span class="gradient-text shimmer">AI 助手</span>驱动的<br>OpenClaw 管理面板</h1>
|
||
<p class="reveal hero-subtitle">内置智能 AI 助手，帮你<strong>一键安装 OpenClaw</strong>、自动诊断配置、排查问题、修复错误。<br>8 大工具 + 4 种模式 + 交互式问答，从新手到老手都能轻松上手。</p>
|
||
<div class="reveal hero-cta">
|
||
<a href="#download" class="btn btn-primary">
|
||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M12 15V3m0 12l-4-4m4 4l4-4M2 17l.621 2.485A2 2 0 004.561 21h14.878a2 2 0 001.94-1.515L22 17"/></svg>
|
||
下载最新版
|
||
</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>
|
||
源代码
|
||
</a>
|
||
</div>
|
||
<div class="reveal hero-image-wrap" data-delay="300">
|
||
<img src="./00.png" alt="ClawPanel AI 助手" 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">功能模块</div></div>
|
||
<div class="reveal stat-card"><div class="stat-value c-purple">Tauri v2</div><div class="stat-label">桌面框架</div></div>
|
||
<div class="reveal stat-card"><div class="stat-value c-cyan">3</div><div class="stat-label">跨平台支持</div></div>
|
||
<div class="reveal stat-card"><div class="stat-value c-emerald">MIT</div><div class="stat-label">开源协议</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Video Demo ══════════════ -->
|
||
<section class="section" style="padding-top:48px">
|
||
<div class="grid-bg"></div>
|
||
<div class="container" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<div class="reveal video-demo-badge">
|
||
<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||
50 秒快速了解
|
||
</div>
|
||
<h2 class="reveal section-title">产品 <span class="gradient-text">演示视频</span></h2>
|
||
<p class="reveal section-desc">从仪表盘到记忆管理，一个视频看完所有核心功能</p>
|
||
</div>
|
||
<div class="reveal video-demo-wrap">
|
||
<div class="video-demo-frame">
|
||
<div class="video-play-overlay" id="videoOverlay" onclick="playDemoVideo()">
|
||
<div class="play-btn">
|
||
<svg viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||
</div>
|
||
</div>
|
||
<video id="demoVideo" poster="./video-cover.png" preload="metadata" playsinline controls onclick="toggleDemoVideo()">
|
||
<source src="./promo-web.mp4" type="video/mp4">
|
||
</video>
|
||
</div>
|
||
<div class="video-demo-glow"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ 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">强大的 <span class="gradient-text">功能矩阵</span></h2>
|
||
<p class="reveal section-desc">一个面板，管理 OpenClaw 的方方面面</p>
|
||
</div>
|
||
|
||
<!-- 🔥 AI 助手（工具调用） -->
|
||
<div class="showcase-row">
|
||
<div class="reveal screenshot-frame img-first" onclick="openLightbox('./00.png')"><img src="./00.png" alt="AI 助手 — 8 大技能卡片" loading="lazy"></div>
|
||
<div>
|
||
<div class="reveal showcase-tag" style="color:#f43f5e;background:rgba(244,63,94,0.1)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/><path d="M18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z"/></svg> 🔥 核心亮点</div>
|
||
<h3 class="reveal showcase-title">内置 AI 助手 — 帮你管理 OpenClaw</h3>
|
||
<p class="reveal showcase-desc">不只是聊天——AI 助手能<strong>一键安装 OpenClaw</strong>、自动读取配置、浏览目录、执行命令，帮你诊断问题、修复错误。8 大技能卡片一键触发，新手也能轻松管理。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> 一键安装 & 升级 OpenClaw</li>
|
||
<li><span class="check">✓</span> 终端执行 & 文件读写 & 目录浏览</li>
|
||
<li><span class="check">✓</span> 4 种模式（聊天/规划/执行/无限）</li>
|
||
<li><span class="check">✓</span> 危险操作二次确认，安全可控</li>
|
||
<li><span class="check">✓</span> 独立模型配置，兼容任意 OpenAI 格式 API</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI 助手实战：工具调用 -->
|
||
<div class="showcase-row">
|
||
<div>
|
||
<div class="reveal showcase-tag" style="color:#f43f5e;background:rgba(244,63,94,0.1)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg> AI 实战</div>
|
||
<h3 class="reveal showcase-title">AI 自动调用工具诊断问题</h3>
|
||
<p class="reveal showcase-desc">点击「检查配置」技能卡片，AI 自动执行：获取系统信息 → 列出目录 → 读取 openclaw.json → 读取 models.json → 生成健康检查报告。全程可视化，每步工具调用的参数和结果一目了然。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> 实时工具调用可视化（参数 + 结果 + 状态）</li>
|
||
<li><span class="check">✓</span> AI 自动编排多步骤诊断流程</li>
|
||
<li><span class="check">✓</span> 生成结构化健康检查报告</li>
|
||
<li><span class="check">✓</span> 发现问题自动给出修复建议</li>
|
||
</ul>
|
||
</div>
|
||
<div class="reveal screenshot-frame" onclick="openLightbox('./11.png')"><img src="./11.png" alt="AI 助手工具调用实战" loading="lazy"></div>
|
||
</div>
|
||
|
||
<!-- AI 助手设置 -->
|
||
<div class="showcase-row">
|
||
<div class="reveal screenshot-frame img-first" onclick="openLightbox('./12.png')"><img src="./12.png" alt="AI 助手设置" loading="lazy"></div>
|
||
<div>
|
||
<div class="reveal showcase-tag" style="color:#f43f5e;background:rgba(244,63,94,0.1)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg> 灵活配置</div>
|
||
<h3 class="reveal showcase-title">独立模型配置，开箱即用</h3>
|
||
<p class="reveal showcase-desc">AI 助手使用独立的模型配置，不依赖 OpenClaw Gateway。填入任意兼容 OpenAI 格式的 API（DeepSeek、Kimi、通义千问等），即可开始使用。自动兼容 Chat Completions 和 Responses 两种 API 格式。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> 支持所有 OpenAI 兼容 API</li>
|
||
<li><span class="check">✓</span> 模型配置、工具权限、助手人设三合一</li>
|
||
<li><span class="check">✓</span> 一键测试连通性 & 自动拉取模型列表</li>
|
||
<li><span class="check">✓</span> 无需安装 OpenClaw 也能使用 AI 助手</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI 图片识别 -->
|
||
<div class="showcase-row">
|
||
<div>
|
||
<div class="reveal showcase-tag" style="color:#f43f5e;background:rgba(244,63,94,0.1)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg> 多模态</div>
|
||
<h3 class="reveal showcase-title">图片识别 — AI 一眼看懂</h3>
|
||
<p class="reveal showcase-desc">直接粘贴截图或拖拽图片到对话框，AI 自动识别图片内容并给出详细分析。支持截图、照片、文档图片等多种格式，真正的多模态交互体验。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> Ctrl+V 粘贴截图直接发送</li>
|
||
<li><span class="check">✓</span> 拖拽图片文件到对话框</li>
|
||
<li><span class="check">✓</span> AI 自动识别并分析图片内容</li>
|
||
<li><span class="check">✓</span> 图文混排 · 多模态对话</li>
|
||
</ul>
|
||
</div>
|
||
<div class="reveal screenshot-frame" onclick="openLightbox('./13.png')"><img src="./13.png" alt="AI 图片识别" loading="lazy"></div>
|
||
</div>
|
||
|
||
<!-- 实时聊天 -->
|
||
<div class="showcase-row">
|
||
<div>
|
||
<div class="reveal showcase-tag c-indigo" style="background:var(--accent-10)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> 核心功能</div>
|
||
<h3 class="reveal showcase-title">实时 AI 对话</h3>
|
||
<p class="reveal showcase-desc">WebSocket 直连 Gateway，流式响应实时显示。支持图片附件、多模态交互、Markdown 渲染、会话管理与快捷指令。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> 流式传输，逐字显示</li>
|
||
<li><span class="check">✓</span> 多会话管理与历史记录</li>
|
||
<li><span class="check">✓</span> 图片拖拽上传 & 灯箱预览</li>
|
||
<li><span class="check">✓</span> / 快捷指令系统</li>
|
||
</ul>
|
||
</div>
|
||
<div class="reveal screenshot-frame" onclick="openLightbox('./02.png')"><img src="./02.png" alt="实时聊天" loading="lazy"></div>
|
||
</div>
|
||
|
||
<!-- 模型配置 -->
|
||
<div class="showcase-row">
|
||
<div>
|
||
<div class="reveal showcase-tag" style="color:#a855f7;background:rgba(168,85,247,0.1)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg> 配置中心</div>
|
||
<h3 class="reveal showcase-title">多模型灵活调配</h3>
|
||
<p class="reveal showcase-desc">支持 OpenAI、DeepSeek、Kimi 等多家服务商。可视化管理模型列表，一键设为主模型，自动备选切换。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> 多 Provider 统一管理</li>
|
||
<li><span class="check">✓</span> 批量连通性测试</li>
|
||
<li><span class="check">✓</span> 主模型 + 备选自动切换</li>
|
||
<li><span class="check">✓</span> 拖拽排序 & 实时保存</li>
|
||
</ul>
|
||
</div>
|
||
<div class="reveal screenshot-frame" onclick="openLightbox('./05.png')"><img src="./05.png" alt="模型配置" loading="lazy"></div>
|
||
</div>
|
||
|
||
<!-- 记忆文件 -->
|
||
<div class="showcase-row">
|
||
<div class="reveal screenshot-frame img-first" onclick="openLightbox('./08.png')"><img src="./08.png" alt="记忆文件" loading="lazy"></div>
|
||
<div>
|
||
<div class="reveal showcase-tag" style="color:#22d3ee;background:rgba(34,211,238,0.1)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/></svg> 数据管理</div>
|
||
<h3 class="reveal showcase-title">让 Agent 拥有记忆</h3>
|
||
<p class="reveal showcase-desc">在线编辑 Agent 核心配置文件（AGENTS.md、SOUL.md 等），管理工作记忆和记忆归档。支持 ZIP 一键打包导出。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> 核心文件在线编辑</li>
|
||
<li><span class="check">✓</span> 工作记忆 & 记忆归档</li>
|
||
<li><span class="check">✓</span> 多 Agent 记忆隔离</li>
|
||
<li><span class="check">✓</span> ZIP 打包下载</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Gateway -->
|
||
<div class="showcase-row">
|
||
<div>
|
||
<div class="reveal showcase-tag" style="color:#10b981;background:rgba(16,185,129,0.1)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg> 网关管控</div>
|
||
<h3 class="reveal showcase-title">安全访问，可视化配置</h3>
|
||
<p class="reveal showcase-desc">Gateway 端口、绑定范围、运行模式、Token / 密码认证方式，卡片式选项直观配置，即改即生效。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> 本地 / 局域网模式切换</li>
|
||
<li><span class="check">✓</span> Token & 密码双认证模式</li>
|
||
<li><span class="check">✓</span> Tailscale Funnel 支持</li>
|
||
<li><span class="check">✓</span> 高级选项按需展开</li>
|
||
</ul>
|
||
</div>
|
||
<div class="reveal screenshot-frame" onclick="openLightbox('./07.png')"><img src="./07.png" alt="Gateway 配置" loading="lazy"></div>
|
||
</div>
|
||
|
||
<!-- Agent 管理 -->
|
||
<div class="showcase-row">
|
||
<div class="reveal screenshot-frame img-first" onclick="openLightbox('./06.png')"><img src="./06.png" alt="Agent 管理" loading="lazy"></div>
|
||
<div>
|
||
<div class="reveal showcase-tag" style="color:#f97316;background:rgba(249,115,22,0.1)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="10" x="3" y="11" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" x2="8" y1="16" y2="16"/><line x1="16" x2="16" y1="16" y2="16"/></svg> 智能体</div>
|
||
<h3 class="reveal showcase-title">多 Agent 协作管理</h3>
|
||
<p class="reveal showcase-desc">创建和管理多个 AI Agent，配置各自的身份、模型和独立工作区。支持备份、编辑与一键切换。</p>
|
||
<ul class="reveal showcase-list">
|
||
<li><span class="check">✓</span> 多 Agent 独立工作区</li>
|
||
<li><span class="check">✓</span> 身份与模型单独配置</li>
|
||
<li><span class="check">✓</span> Agent 配置备份</li>
|
||
<li><span class="check">✓</span> 默认 Agent 快速切换</li>
|
||
</ul>
|
||
</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">还有 <span class="gradient-text">更多</span></h2>
|
||
<p class="reveal section-desc">运维、监控、诊断，面面俱到</p>
|
||
</div>
|
||
<div class="gallery-grid">
|
||
<div class="reveal gallery-card" onclick="openLightbox('./03.png')"><img src="./03.png" alt="服务管理" loading="lazy"><div class="gallery-label"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg> 服务管理</div></div>
|
||
<div class="reveal gallery-card" onclick="openLightbox('./04.png')"><img src="./04.png" alt="日志查看" loading="lazy"><div class="gallery-label"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M15 2H9a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/></svg> 日志查看</div></div>
|
||
<div class="reveal gallery-card" onclick="openLightbox('./09.png')"><img src="./09.png" alt="扩展工具" loading="lazy"><div class="gallery-label"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/></svg> 扩展工具</div></div>
|
||
<div class="reveal gallery-card" onclick="openLightbox('./10.png')"><img src="./10.png" alt="系统诊断" loading="lazy"><div class="gallery-label"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg> 系统诊断</div></div>
|
||
</div>
|
||
<div class="info-grid">
|
||
<div class="reveal info-card"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></div><h4>服务管理</h4><p>启停控制、版本检测、一键升级、配置备份与恢复</p></div>
|
||
<div class="reveal info-card"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M15 2H9a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/></svg></div><h4>日志查看</h4><p>多日志源实时查看、关键字搜索、自动滚动跟踪</p></div>
|
||
<div class="reveal info-card"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/></svg></div><h4>扩展工具</h4><p>cftunnel 内网穿透、ClawApp 移动客户端管理</p></div>
|
||
<div class="reveal info-card"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></div><h4>系统诊断</h4><p>全面健康检测、WebSocket 测试、一键修复配对</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ 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"><span class="gradient-text">技术架构</span></h2>
|
||
<p class="reveal section-desc">精挑细选的技术栈，追求极致性能与开发体验</p>
|
||
</div>
|
||
<div class="reveal arch-gif-wrap">
|
||
<img src="./architecture.gif" alt="ClawPanel 生态架构动画" loading="lazy">
|
||
</div>
|
||
<div class="tech-grid" id="tech-grid">
|
||
<div class="reveal tech-card">
|
||
<div class="tech-header"><div class="tech-icon" style="background:rgba(99,102,241,0.1)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 7h.01"/><path d="M17 7h.01"/><path d="M7 17h.01"/><path d="M17 17h.01"/></svg></div><div><div class="tech-name">Rust + Tauri v2</div><div class="tech-sub">后端运行时</div></div></div>
|
||
<div class="tech-desc">原生编译，内存安全，跨平台打包。通过 IPC 与前端高效通信，Shell Plugin 执行本地命令。</div>
|
||
</div>
|
||
<div class="reveal tech-card">
|
||
<div class="tech-header"><div class="tech-icon" style="background:rgba(234,179,8,0.1)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#eab308" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg></div><div><div class="tech-name">Vanilla JS + Vite</div><div class="tech-sub">前端架构</div></div></div>
|
||
<div class="tech-desc">零框架依赖，SPA 路由，组件化设计。Vite 极速 HMR，支持浏览器 mock 模式独立调试。</div>
|
||
</div>
|
||
<div class="reveal tech-card">
|
||
<div class="tech-header"><div class="tech-icon" style="background:rgba(34,211,238,0.1)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22d3ee" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg></div><div><div class="tech-name">WebSocket + RPC</div><div class="tech-sub">实时通信</div></div></div>
|
||
<div class="tech-desc">WsClient 管理 WebSocket 连接、心跳保活与自动重连。RPC 请求-响应 + 事件订阅双模式。</div>
|
||
</div>
|
||
<div class="reveal tech-card">
|
||
<div class="tech-header"><div class="tech-icon" style="background:rgba(168,85,247,0.1)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#a855f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r=".5" fill="#a855f7"/><circle cx="17.5" cy="10.5" r=".5" fill="#a855f7"/><circle cx="8.5" cy="7.5" r=".5" fill="#a855f7"/><circle cx="6.5" cy="12.5" r=".5" fill="#a855f7"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg></div><div><div class="tech-name">CSS Variables</div><div class="tech-sub">主题系统</div></div></div>
|
||
<div class="tech-desc">暗色 / 亮色主题无闪烁切换，玻璃拟态 UI 风格，CSS 自定义属性实现全局样式管理。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ 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"><span class="gradient-text">快速开始</span></h2>
|
||
<p class="reveal section-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"># 克隆仓库</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"># macOS / Linux — 启动完整 Tauri 桌面应用</div>
|
||
<div class="t-cmd">./scripts/dev.sh</div>
|
||
<br>
|
||
<div class="t-comment"># Windows — 启动完整 Tauri 桌面应用</div>
|
||
<div class="t-cmd">npm run tauri dev</div>
|
||
<br>
|
||
<div class="t-comment"># 仅前端调试（浏览器 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">服务器 <span class="gradient-text">部署指南</span></h2>
|
||
<p class="reveal section-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">Linux 一键部署</h3>
|
||
<p class="deploy-desc">支持 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"># 一键部署 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>
|
||
完整教程
|
||
</a>
|
||
<span style="color:var(--text-muted);font-size:12px;line-height:32px">Node.js · OpenClaw · systemd/PM2 · Nginx 反代 · 防火墙</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">Docker 部署</h3>
|
||
<p class="deploy-desc">容器化隔离，支持 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"># 一条命令启动 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>
|
||
完整教程
|
||
</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>
|
||
部署完成后，访问 <code style="background:var(--surface);padding:2px 8px;border-radius:4px;font-size:13px">http://服务器IP:1420</code> 即可通过浏览器管理 OpenClaw，功能与桌面版一致。
|
||
</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"><span class="gradient-text">文档中心</span></h2>
|
||
<p class="reveal section-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">🖥️</div>
|
||
<div>
|
||
<h3>Linux 部署指南</h3>
|
||
<p>在 Linux 服务器上部署 ClawPanel Web 版，通过浏览器远程管理 OpenClaw</p>
|
||
<div class="doc-tags">
|
||
<span class="doc-tag">一键部署</span>
|
||
<span class="doc-tag">systemd</span>
|
||
<span class="doc-tag">PM2</span>
|
||
<span class="doc-tag">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>Docker 部署指南</h3>
|
||
<p>用 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">Gateway 联动</span>
|
||
<span class="doc-tag">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>项目主页 README</h3>
|
||
<p>完整的项目介绍，包含安装方式、功能特性、技术架构、源码构建、常见问题</p>
|
||
<div class="doc-tags">
|
||
<span class="doc-tag">安装指南</span>
|
||
<span class="doc-tag">功能介绍</span>
|
||
<span class="doc-tag">源码构建</span>
|
||
<span class="doc-tag">常见问题</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>更新日志</h3>
|
||
<p>每个版本的新增功能、Bug 修复和改进记录</p>
|
||
<div class="doc-tags">
|
||
<span class="doc-tag">新功能</span>
|
||
<span class="doc-tag">Bug 修复</span>
|
||
<span class="doc-tag">版本记录</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">在 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"><span class="gradient-text">生态项目</span></h2>
|
||
<p class="reveal section-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>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>跨平台移动聊天客户端，随时随地与 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>Cloudflare Tunnel 内网穿透工具，一键暴露本地服务</p></div>
|
||
<span class="eco-arrow">→</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Download ══════════════ -->
|
||
<section id="download" class="section cta-section">
|
||
<div class="orb orb-2" style="top:auto;bottom:-100px"></div>
|
||
<div class="container-sm" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<div class="reveal download-version"><span class="pulse"></span> v0.5.7 最新版</div>
|
||
<h2 class="reveal section-title"><span class="gradient-text">下载安装</span></h2>
|
||
<p class="reveal section-desc">选择你的操作系统，一键下载安装</p>
|
||
</div>
|
||
<div class="download-grid">
|
||
<div class="reveal download-card">
|
||
<span class="download-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z"/><path d="M10 2c1 .5 2 2 2 5"/></svg></span>
|
||
<h3>macOS</h3>
|
||
<p class="dl-desc">支持 Apple Silicon 和 Intel 芯片</p>
|
||
<div class="dl-links">
|
||
<a class="dl-link" href="https://github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.5.7_aarch64.dmg" target="_blank" rel="noopener">
|
||
Apple Silicon (M1/M2/M3/M4)
|
||
<span class="dl-format">.dmg</span>
|
||
</a>
|
||
<a class="dl-link" href="https://github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.5.7_x64.dmg" target="_blank" rel="noopener">
|
||
Intel 芯片
|
||
<span class="dl-format">.dmg</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="reveal download-card">
|
||
<span class="download-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/><path d="m6 8 4 4-4 4"/><path d="M12 16h4"/></svg></span>
|
||
<h3>Windows</h3>
|
||
<p class="dl-desc">支持 Windows 10 及以上版本</p>
|
||
<div class="dl-links">
|
||
<a class="dl-link" href="https://github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.5.7_x64-setup.exe" target="_blank" rel="noopener">
|
||
安装程序
|
||
<span class="dl-format">.exe</span>
|
||
</a>
|
||
<a class="dl-link" href="https://github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.5.7_x64_en-US.msi" target="_blank" rel="noopener">
|
||
MSI 安装包
|
||
<span class="dl-format">.msi</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="reveal download-card">
|
||
<span class="download-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 17 2 2 4-4"/><path d="M12 13h8"/><path d="M12 17h8"/><path d="M12 21h8"/><path d="M3 7V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2"/><path d="M3 11v2a2 2 0 0 0 2 2h1"/><path d="M21 11v2a2 2 0 0 1-2 2h-1"/></svg></span>
|
||
<h3>Linux</h3>
|
||
<p class="dl-desc">支持主流 Linux 发行版</p>
|
||
<div class="dl-links">
|
||
<a class="dl-link" href="https://github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.5.7_amd64.AppImage" target="_blank" rel="noopener">
|
||
通用版
|
||
<span class="dl-format">.AppImage</span>
|
||
</a>
|
||
<a class="dl-link" href="https://github.com/qingchencloud/clawpanel/releases/latest/download/ClawPanel_0.5.7_amd64.deb" target="_blank" rel="noopener">
|
||
Debian / Ubuntu
|
||
<span class="dl-format">.deb</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal download-note" style="text-align:center">
|
||
<p>查看 <a href="https://github.com/qingchencloud/clawpanel/releases" target="_blank" rel="noopener">所有版本</a> · 需要帮助？阅读 <a href="https://github.com/qingchencloud/clawpanel#readme" target="_blank" rel="noopener">安装文档</a></p>
|
||
<p style="margin-top:12px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:-2px;opacity:0.7"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg> 国内网络下载慢？加入 <a href="https://qt.cool/c/OpenClaw" target="_blank" rel="noopener">QQ 群</a> 或 <a href="https://qt.cool/c/OpenClawWx" target="_blank" rel="noopener">微信群</a> 获取安装包直传</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Community ══════════════ -->
|
||
<section id="community" class="section">
|
||
<div class="orb orb-1" style="top:auto;bottom:-200px;left:auto;right:-100px"></div>
|
||
<div class="container" style="position:relative;z-index:10">
|
||
<div class="section-header">
|
||
<h2 class="reveal section-title"><span class="gradient-text">社区交流</span></h2>
|
||
<p class="reveal section-desc">加入社区，交流使用心得、反馈问题、获取最新动态</p>
|
||
</div>
|
||
<div class="community-grid">
|
||
<div class="reveal community-card">
|
||
<img class="community-qr" src="./qr-qq.png" alt="QQ 群二维码">
|
||
<h3>QQ 交流群</h3>
|
||
<p class="desc">扫码或点击链接加入 OpenClaw 用户群，与开发者和用户实时交流</p>
|
||
<a href="https://qt.cool/c/OpenClaw" target="_blank" rel="noopener" class="btn btn-sm btn-outline">加入 QQ 群</a>
|
||
</div>
|
||
<div class="reveal community-card">
|
||
<img class="community-qr" src="./qr-wechat.png" alt="微信群二维码">
|
||
<h3>微信交流群</h3>
|
||
<p class="desc">加入微信群，获取最新版本通知和使用技巧分享</p>
|
||
<a href="https://qt.cool/c/OpenClawWx" target="_blank" rel="noopener" class="btn btn-sm btn-outline">加入微信群</a>
|
||
</div>
|
||
</div>
|
||
<div class="community-extra">
|
||
<a href="https://discord.gg/U9AttmsNHh" target="_blank" rel="noopener" class="reveal community-link">
|
||
<svg viewBox="0 0 24 24" fill="currentColor"><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>
|
||
Discord
|
||
</a>
|
||
<a href="https://yb.tencent.com/gp/i/LsvIw7mdR7Lb" target="_blank" rel="noopener" class="reveal community-link">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 12l2 2 4-4"/></svg>
|
||
元宝派
|
||
</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/discussions" target="_blank" rel="noopener" class="reveal community-link">
|
||
<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>
|
||
GitHub Discussions
|
||
</a>
|
||
<a href="https://github.com/qingchencloud/clawpanel/issues/new" target="_blank" rel="noopener" class="reveal community-link">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
|
||
反馈 Issue
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Sponsors ══════════════ -->
|
||
<section class="section" id="sponsors">
|
||
<div class="container">
|
||
<h2 class="reveal section-title"><span class="gradient-text">赞助商</span></h2>
|
||
<p class="reveal section-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">慈云数据</div>
|
||
<div class="sponsor-slogan">香港直连 2H2G 仅 99 元/年</div>
|
||
<div class="sponsor-desc">
|
||
慈云数据服务团队于 2020 年成立，专注于基础云计算、游戏云、主题站长等业务。
|
||
售前售后服务 24 小时在线值班，强力保证为客户提供优质稳定的网络资源与机房服务。
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════ Footer ══════════════ -->
|
||
<footer class="footer">
|
||
<div class="footer-inner">
|
||
<div class="footer-logo">
|
||
<img src="./logo.png" alt="Logo">
|
||
<span>ClawPanel © 2025</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">QQ 群</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">晴辰云</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');
|
||
h.classList.toggle('dark');
|
||
localStorage.setItem('clawpanel-theme', isDark ? 'light' : 'dark');
|
||
}
|
||
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);
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|