diff --git a/README.md b/README.md
index 062b49c..79b8b19 100644
--- a/README.md
+++ b/README.md
@@ -70,7 +70,60 @@ ClawPanel 是 [OpenClaw](https://github.com/openclaw/openclaw) AI Agent 框架
## 功能截图
-> 截图待补充 — 欢迎提交 PR 补充各页面截图
+
+ 
+
+仪表盘 — 系统运行概览，服务状态一目了然
+
+
+ 
+
+实时聊天 — WebSocket 流式对话，支持 Markdown 渲染与多会话管理
+
+
+ 
+
+模型配置 — 多服务商管理，主模型+备选自动切换
+
+
+ 
+
+记忆文件 — 在线编辑 Agent 核心配置与工作记忆
+
+
+查看更多截图
+
+
+ 
+
+Agent 管理 — 多 Agent 创建、身份配置与工作区管理
+
+
+ 
+
+Gateway 配置 — 端口、访问权限、认证方式可视化配置
+
+
+ 
+
+服务管理 — 启停控制、版本检测、一键升级、配置备份
+
+
+ 
+
+日志查看 — 多日志源实时查看与关键词搜索
+
+
+ 
+
+扩展工具 — cftunnel 内网穿透、ClawApp 移动客户端管理
+
+
+ 
+
+系统诊断 — 全面健康检测与一键修复
+
+
## 技术架构
diff --git a/docs/02.png b/docs/02.png
new file mode 100644
index 0000000..78b6508
Binary files /dev/null and b/docs/02.png differ
diff --git a/docs/03.png b/docs/03.png
new file mode 100644
index 0000000..ef1292e
Binary files /dev/null and b/docs/03.png differ
diff --git a/docs/04.png b/docs/04.png
new file mode 100644
index 0000000..d2e3de2
Binary files /dev/null and b/docs/04.png differ
diff --git a/docs/05.png b/docs/05.png
new file mode 100644
index 0000000..4bd9a98
Binary files /dev/null and b/docs/05.png differ
diff --git a/docs/06.png b/docs/06.png
new file mode 100644
index 0000000..c2cbeb4
Binary files /dev/null and b/docs/06.png differ
diff --git a/docs/07.png b/docs/07.png
new file mode 100644
index 0000000..5387235
Binary files /dev/null and b/docs/07.png differ
diff --git a/docs/08.png b/docs/08.png
new file mode 100644
index 0000000..cac22c4
Binary files /dev/null and b/docs/08.png differ
diff --git a/docs/09.png b/docs/09.png
new file mode 100644
index 0000000..9996e3a
Binary files /dev/null and b/docs/09.png differ
diff --git a/docs/10.png b/docs/10.png
new file mode 100644
index 0000000..be153e0
Binary files /dev/null and b/docs/10.png differ
diff --git a/docs/index.html b/docs/index.html
index a46b1af..9c28bde 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -231,6 +231,165 @@
/* ── 无闪烁主题切换 ── */
html { transition: background-color 0.3s, color 0.3s; }
+
+ /* ── Hero 大图透视 ── */
+ .hero-image-wrap {
+ perspective: 1200px;
+ max-width: 1100px;
+ margin: 0 auto;
+ }
+ .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),
+ 0 0 0 1px rgba(99,102,241,0.08);
+ transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s;
+ cursor: zoom-in;
+ }
+ .hero-image-wrap:hover img {
+ transform: rotateX(0deg) scale(1);
+ box-shadow:
+ 0 30px 80px -15px rgba(99,102,241,0.35),
+ 0 0 0 1px rgba(99,102,241,0.15);
+ }
+ .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%);
+ }
+
+ /* ── 功能展示截图 ── */
+ .screenshot-frame {
+ border-radius: 12px;
+ overflow: hidden;
+ border: 1px solid rgba(99,102,241,0.1);
+ box-shadow: 0 8px 40px -10px rgba(0,0,0,0.15);
+ transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s;
+ cursor: zoom-in;
+ }
+ .dark .screenshot-frame {
+ border-color: rgba(255,255,255,0.06);
+ box-shadow: 0 8px 40px -10px rgba(0,0,0,0.4);
+ }
+ .screenshot-frame:hover {
+ transform: translateY(-6px);
+ box-shadow: 0 20px 60px -10px rgba(99,102,241,0.2);
+ }
+ .screenshot-frame img {
+ width: 100%;
+ display: block;
+ }
+
+ /* ── 小图网格 ── */
+ .gallery-card {
+ border-radius: 12px;
+ overflow: hidden;
+ border: 1px solid rgba(99,102,241,0.08);
+ box-shadow: 0 4px 20px -5px rgba(0,0,0,0.1);
+ 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;
+ }
+ .dark .gallery-card {
+ border-color: rgba(255,255,255,0.06);
+ box-shadow: 0 4px 20px -5px rgba(0,0,0,0.3);
+ }
+ .gallery-card:hover {
+ transform: translateY(-4px) scale(1.02);
+ box-shadow: 0 12px 40px -8px rgba(99,102,241,0.2);
+ border-color: rgba(99,102,241,0.3);
+ }
+ .gallery-card img {
+ width: 100%;
+ display: block;
+ }
+ .gallery-card .gallery-label {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 8px 12px;
+ background: linear-gradient(transparent, rgba(0,0,0,0.6));
+ color: #fff;
+ font-size: 13px;
+ font-weight: 600;
+ opacity: 0;
+ transition: opacity 0.3s;
+ }
+ .gallery-card:hover .gallery-label {
+ opacity: 1;
+ }
+
+ /* ── 灯箱 ── */
+ .lightbox-overlay {
+ 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-overlay.active {
+ display: flex;
+ }
+ .lightbox-overlay img {
+ max-width: 100%;
+ max-height: 100%;
+ border-radius: 12px;
+ box-shadow: 0 0 80px rgba(99,102,241,0.2);
+ animation: lbFadeIn 0.3s ease-out;
+ }
+ @keyframes lbFadeIn {
+ from { opacity: 0; transform: scale(0.95); }
+ to { opacity: 1; transform: scale(1); }
+ }
+ .lightbox-close {
+ position: absolute;
+ top: 20px;
+ right: 24px;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: rgba(255,255,255,0.1);
+ border: none;
+ color: #fff;
+ font-size: 20px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background 0.2s;
+ }
+ .lightbox-close:hover {
+ background: rgba(255,255,255,0.2);
+ }
+
+ /* ── 功能标签 ── */
+ .feature-tag {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 4px 12px;
+ border-radius: 99px;
+ font-size: 12px;
+ font-weight: 600;
+ letter-spacing: 0.5px;
+ text-transform: uppercase;
+ }