docs: 社区板块重设计 — 提升到首屏第二位,新增抖音群二维码

This commit is contained in:
晴天
2026-03-09 04:14:28 +08:00
parent cad00ea924
commit 9ed3bd31f7
3 changed files with 93 additions and 89 deletions

View File

@@ -37,6 +37,31 @@ ClawPanel 是 [OpenClaw](https://github.com/1186258278/OpenClawChineseTranslatio
> 🌐 **官网**: [claw.qt.cool](https://claw.qt.cool/)  |  📦 **下载**: [GitHub Releases](https://github.com/qingchencloud/clawpanel/releases/latest)
## 社区交流
<p align="center">
<img src="docs/qr-qq.png" width="140" alt="QQ 群">
&nbsp;&nbsp;&nbsp;&nbsp;
<img src="docs/qr-wechat.png" width="140" alt="微信群">
&nbsp;&nbsp;&nbsp;&nbsp;
<img src="docs/qr-dy.png" width="140" alt="抖音群">
</p>
<p align="center">
<a href="https://qt.cool/c/OpenClaw"><strong>QQ 群</strong></a>
&nbsp;·&nbsp;
<a href="https://qt.cool/c/OpenClawWx"><strong>微信群</strong></a>
&nbsp;·&nbsp;
<a href="https://qt.cool/c/OpenClawDY"><strong>抖音群</strong></a>
&nbsp;·&nbsp;
<a href="https://discord.gg/U9AttmsNHh"><strong>Discord</strong></a>
&nbsp;·&nbsp;
<a href="https://yb.tencent.com/gp/i/LsvIw7mdR7Lb"><strong>元宝派</strong></a>
&nbsp;·&nbsp;
<a href="https://github.com/qingchencloud/clawpanel/discussions"><strong>Discussions</strong></a>
</p>
> 💡 一群对 AI Agent 充满热情的开发者和玩家,欢迎加入交流。
## 下载安装
前往 [Releases](https://github.com/qingchencloud/clawpanel/releases/latest) 页面下载最新版本,根据你的系统选择对应安装包:
@@ -455,35 +480,6 @@ npm install -g @qingchencloud/openclaw-zh --registry https://registry.npmmirror.
</tr>
</table>
## 社区交流
加入社区,交流使用心得、反馈问题、获取最新动态。
<p align="center">
<img src="docs/qr-qq.png" width="180" alt="QQ 群二维码">
&nbsp;&nbsp;&nbsp;&nbsp;
<img src="docs/qr-wechat.png" width="180" alt="微信群二维码">
&nbsp;&nbsp;&nbsp;&nbsp;
<img src="docs/qr-dy.png" width="180" alt="抖音群二维码">
</p>
<p align="center">
<strong>QQ 交流群</strong>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<strong>微信交流群</strong>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<strong>抖音交流群</strong>
</p>
| 渠道 | 链接 |
|------|------|
| QQ 群 | [点击加入](https://qt.cool/c/OpenClaw) |
| 微信群 | [点击加入](https://qt.cool/c/OpenClawWx) |
| 抖音群 | [点击加入](https://qt.cool/c/OpenClawDY) |
| Discord | [加入 Discord](https://discord.gg/U9AttmsNHh) |
| 元宝派 | [加入元宝派](https://yb.tencent.com/gp/i/LsvIw7mdR7Lb) |
| GitHub Discussions | [参与讨论](https://github.com/qingchencloud/clawpanel/discussions) |
| 反馈 Issue | [提交 Issue](https://github.com/qingchencloud/clawpanel/issues/new) |
## 贡献
欢迎提交 Issue 和 Pull Request。贡献流程详见 [CONTRIBUTING.md](CONTRIBUTING.md)。

View File

@@ -309,18 +309,23 @@
.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 Banner ══════════════ */
.community-banner { position: relative; padding: 72px 0; overflow: hidden; scroll-margin-top: 120px; background: linear-gradient(135deg, rgba(99,102,241,0.03) 0%, rgba(168,85,247,0.05) 50%, rgba(34,211,238,0.03) 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
html.dark .community-banner { background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(168,85,247,0.08) 50%, rgba(34,211,238,0.05) 100%); }
.community-banner-inner { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.community-banner-text h2 { font-size: 2rem; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 16px; }
.community-banner-text p { color: var(--text-s); font-size: 15px; line-height: 1.9; max-width: 420px; margin-bottom: 24px; }
.community-banner-links { display: flex; flex-wrap: wrap; gap: 10px; }
.community-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); transition: all 0.25s; text-decoration: none; }
.community-link:hover { border-color: var(--border-h); color: var(--accent); background: var(--accent-5); transform: translateY(-2px); }
.community-link svg { width: 18px; height: 18px; }
.community-qr-row { display: flex; gap: 20px; }
.community-qr-card { text-align: center; padding: 20px 24px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: blur(8px); transition: all 0.3s cubic-bezier(0.16,1,0.3,1); }
.community-qr-card:hover { transform: translateY(-4px); border-color: var(--border-h); box-shadow: 0 12px 32px -8px rgba(99,102,241,0.15); }
.community-qr-card img { width: 128px; height: 128px; border-radius: 10px; margin-bottom: 12px; display: block; border: 1px solid var(--border); }
.community-qr-card span { display: block; font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.community-qr-card a { display: inline-block; padding: 6px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--accent); border: 1px solid rgba(99,102,241,0.3); transition: all 0.2s; text-decoration: none; }
.community-qr-card a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* ══════════════ CTA ══════════════ */
.cta-section { text-align: center; }
@@ -414,7 +419,12 @@
.hero-title { font-size: 2.5rem; }
.section-title { font-size: 1.75rem; }
.showcase-title { font-size: 1.5rem; }
.community-grid { grid-template-columns: 1fr; }
.community-banner-inner { grid-template-columns: 1fr; }
.community-banner-text { text-align: center; }
.community-banner-text h2 { text-align: center; }
.community-banner-text p { margin-left: auto; margin-right: auto; }
.community-banner-links { justify-content: center; }
.community-qr-row { justify-content: center; flex-wrap: wrap; }
.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; }
@@ -527,6 +537,53 @@
</div>
</section>
<!-- ══════════════ Community ══════════════ -->
<section id="community" class="community-banner">
<div class="container" style="position:relative;z-index:10">
<div class="community-banner-inner">
<div class="community-banner-text">
<h2 class="reveal"><span class="gradient-text">加入社区</span></h2>
<p class="reveal">这里聚集了一群对 AI Agent 充满热情的开发者和玩家。<br>交流使用技巧、分享落地经验、反馈问题、第一时间获取新版本动态。</p>
<div class="reveal community-banner-links">
<a href="https://discord.gg/U9AttmsNHh" target="_blank" rel="noopener" class="community-link">
<svg viewBox="0 0 24 24" fill="currentColor" style="width:16px;height:16px"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03z"/></svg>
Discord
</a>
<a href="https://github.com/qingchencloud/clawpanel/discussions" target="_blank" rel="noopener" class="community-link">
<svg viewBox="0 0 24 24" fill="currentColor" style="width:16px;height:16px"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
Discussions
</a>
<a href="https://yb.tencent.com/gp/i/LsvIw7mdR7Lb" target="_blank" rel="noopener" class="community-link">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px"><circle cx="12" cy="12" r="10"/><path d="M8 12l2 2 4-4"/></svg>
元宝派
</a>
<a href="https://github.com/qingchencloud/clawpanel/issues/new" target="_blank" rel="noopener" class="community-link">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
反馈 Issue
</a>
</div>
</div>
<div class="community-qr-row">
<div class="reveal community-qr-card">
<img src="./qr-qq.png" alt="QQ 群二维码">
<span>QQ 群</span>
<a href="https://qt.cool/c/OpenClaw" target="_blank" rel="noopener">扫码加入</a>
</div>
<div class="reveal community-qr-card">
<img src="./qr-wechat.png" alt="微信群二维码">
<span>微信群</span>
<a href="https://qt.cool/c/OpenClawWx" target="_blank" rel="noopener">扫码加入</a>
</div>
<div class="reveal community-qr-card">
<img src="./qr-dy.png" alt="抖音群二维码">
<span>抖音群</span>
<a href="https://qt.cool/c/OpenClawDY" target="_blank" rel="noopener">扫码加入</a>
</div>
</div>
</div>
</div>
</section>
<!-- ══════════════ Video Demo ══════════════ -->
<section class="section" style="padding-top:48px">
<div class="grid-bg"></div>
@@ -1037,55 +1094,6 @@
</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" style="grid-template-columns:repeat(3,1fr)">
<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 class="reveal community-card">
<img class="community-qr" src="https://qt.cool/c/OpenClawDY/qr.png" alt="抖音群二维码" style="object-fit:contain;background:#fff">
<h3>抖音交流群</h3>
<p class="desc">关注抖音账号,观看教程视频和最新动态</p>
<a href="https://qt.cool/c/OpenClawDY" 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>
<!-- ══════════════ 公益 AI 接口计划 ══════════════ -->
<section id="ai-plan" class="section" style="padding-top:64px;padding-bottom:64px">
<div class="grid-bg"></div>

BIN
docs/qr-dy.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB