1 line
150 KiB
JSON
1 line
150 KiB
JSON
{"repo": "achengbusiness/happycapy-openclaw-feishubot-guide", "files": {"index.html": {"ee662b17adb03f41a4b14f32457eddd4a59760fa": {"t": 1785747364.8125973, "n": 32204, "h": "5cbf1fda617ba8bd", "c": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Feishu Bot Guide - HappyCapy + OpenClaw</title>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;600&family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --bg-color: #f8f5f0;\n --bg-secondary: #ffffff;\n --text-color: #2d2d2d;\n --text-secondary: #5a5a5a;\n --accent-color: #e07c5a;\n --border-color: #e5e0d8;\n --code-bg: #f0ebe3;\n --success-color: #4caf50;\n --warning-color: #ff9800;\n --info-color: #2196f3;\n }\n * { margin: 0; padding: 0; box-sizing: border-box; }\n html { scroll-behavior: smooth; }\n body { font-family: 'Noto Sans SC', 'Inter', sans-serif; background: var(--bg-color); color: var(--text-color); line-height: 1.8; font-size: 16px; }\n body.en { font-family: 'Inter', sans-serif; }\n .lang-toggle { position: fixed; top: 80px; right: 24px; z-index: 1001; display: flex; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }\n .lang-btn { padding: 8px 16px; border: none; background: transparent; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text-secondary); transition: all 0.2s; }\n .lang-btn.active { background: var(--text-color); color: white; }\n .lang-btn:hover:not(.active) { background: var(--code-bg); }\n .zh { display: block; } .en { display: none; }\n body.en .zh { display: none; } body.en .en { display: block; }\n span.zh, span.en, a.zh, a.en { display: inline; }\n body.en span.zh, body.en a.zh { display: none; }\n body:not(.en) span.en, body:not(.en) a.en { display: none; }\n .navbar { position: fixed; top: 0; left: 0; right: 0; background: var(--bg-color); border-bottom: 1px solid var(--border-color); z-index: 1000; padding: 0 24px; }\n .navbar-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; height: 64px; }\n .logo { display: flex; align-items: center; gap: 8px; font-family: 'Noto Serif SC', serif; font-size: 20px; font-weight: 600; color: var(--text-color); text-decoration: none; }\n .logo svg { width: 32px; height: 32px; }\n .nav-links { display: flex; gap: 32px; align-items: center; }\n .nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 14px; transition: color 0.2s; }\n .nav-links a:hover { color: var(--text-color); }\n .btn-primary { background: var(--text-color); color: white; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.2s; }\n .btn-primary:hover { background: #1a1a1a; transform: translateY(-1px); }\n .hero { padding: 140px 24px 80px; text-align: center; background: linear-gradient(180deg, var(--bg-color) 0%, #fff 100%); }\n .hero-content { max-width: 800px; margin: 0 auto; }\n .hero h1 { font-family: 'Noto Serif SC', serif; font-size: 48px; font-weight: 700; line-height: 1.3; margin-bottom: 24px; }\n body.en .hero h1 { font-family: 'Inter', serif; }\n .hero h1 .highlight { color: var(--accent-color); font-style: italic; }\n .hero-subtitle { font-size: 20px; color: var(--text-secondary); margin-bottom: 40px; line-height: 1.6; }\n .hero-features { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; margin-bottom: 40px; }\n .hero-feature { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 15px; }\n .hero-feature svg { color: var(--success-color); }\n .hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }\n .btn-large { padding: 16px 32px; font-size: 16px; border-radius: 12px; }\n .btn-secondary { background: transparent; color: var(--text-color); border: 2px solid var(--border-color); padding: 14px 30px; border-radius: 12px; text-decoration: none; font-size: 16px; font-weight: 500; transition: all 0.2s; }\n .btn-secondary:hover { border-color: var(--text-color); background: var(--bg-secondary); }\n .info-banner { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 24px 32px; max-width: 700px; margin: 0 auto 40px; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 24px; }\n .info-item { text-align: center; }\n .info-item .label { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }\n .info-item .value { font-weight: 600; font-size: 15px; }\n .main-content { max-width: 900px; margin: 0 auto; padding: 0 24px 80px; }\n .toc { background: var(--bg-secondary); border-radius: 16px; padding: 32px; margin-bottom: 60px; border: 1px solid var(--border-color); }\n .toc h2 { font-family: 'Noto Serif SC', serif; font-size: 24px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); }\n body.en .toc h2 { font-family: 'Inter', serif; }\n .toc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }\n .toc-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 8px; text-decoration: none; color: var(--text-color); transition: all 0.2s; }\n .toc-item:hover { background: var(--code-bg); }\n .toc-num { background: var(--accent-color); color: white; width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }\n .toc-text { font-size: 15px; }\n .quick-links { background: linear-gradient(135deg, #2d2d2d 0%, #3d3d3d 100%); border-radius: 16px; padding: 32px; margin-bottom: 60px; color: white; }\n .quick-links h3 { font-family: 'Noto Serif SC', serif; font-size: 20px; margin-bottom: 20px; }\n body.en .quick-links h3 { font-family: 'Inter', serif; }\n .quick-links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }\n .quick-link { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: rgba(255,255,255,0.1); border-radius: 8px; text-decoration: none; color: white; font-size: 14px; transition: all 0.2s; }\n .quick-link:hover { background: rgba(255,255,255,0.2); }\n .quick-link svg { flex-shrink: 0; opacity: 0.7; }\n .section { margin-bottom: 60px; }\n .section-header { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 2px solid var(--accent-color); }\n .section-num { background: var(--accent-color); color: white; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }\n .section h2 { font-family: 'Noto Serif SC', serif; font-size: 28px; font-weight: 600; }\n body.en .section h2 { font-family: 'Inter', serif; }\n .section h3 { font-family: 'Noto Serif SC', serif; font-size: 22px; font-weight: 600; margin: 40px 0 20px; color: var(--text-color); }\n body.en .section h3 { font-family: 'Inter', serif; }\n .section h4 { font-size: 18px; font-weight: 600; margin: 24px 0 16px; color: var(--text-color); }\n .section p { margin-bottom: 16px; color: var(--text-secondary); }\n .section ul, .section ol { margin-bottom: 20px; padding-left: 24px; }\n .section li { margin-bottom: 10px; color: var(--text-secondary); }\n .section li strong { color: var(--text-color); }\n .callout { border-radius: 12px; padding: 20px 24px; margin: 24px 0; border-left: 4px solid; }\n .callout-info { background: #e3f2fd; border-color: var(--info-color); }\n .callout-warning { background: #fff3e0; border-color: var(--warning-color); }\n .callout-success { background: #e8f5e9; border-color: var(--success-color); }\n .callout-important { background: #fce4ec; border-color: var(--accent-color); }\n .callout-title { font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }\n .callout p { margin: 0; color: var(--text-color); }\n .code-block { position: relative; margin: 20px 0; }\n .copy-btn { position: absolute; top: 12px; right: 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 6px; padding: 6px 12px; font-size: 12px; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s; opacity: 0; z-index: 10; }\n .code-block:hover .copy-btn { opacity: 1; }\n .copy-btn:hover { background: var(--text-color); color: white; border-color: var(--text-color); }\n .copy-btn.copied { background: var(--success-color); color: white; border-color: var(--success-color); }\n .copy-btn svg { width: 14px; height: 14px; }\n pre { background: var(--code-bg); border-radius: 12px; padding: 20px 24px; padding-right: 100px; overflow-x: auto; margin: 20px 0; border: 1px solid var(--border-color); }\n code { font-family: 'SF Mono', 'Monaco', 'Fira Code', monospace; font-size: 14px; line-height: 1.6; }\n p code, li code { background: var(--code-bg); padding: 2px 8px; border-radius: 4px; font-size: 14px; }\n .table-wrapper { overflow-x: auto; margin: 20px 0; }\n table { width: 100%; border-collapse: collapse; background: var(--bg-secondary); border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); }\n th { background: var(--code-bg); padding: 14px 16px; text-align: left; font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--border-color); }\n td { padding: 14px 16px; border-bottom: 1px solid var(--border-color); font-size: 14px; }\n tr:last-child td { border-bottom: none; }\n tr:hover { background: var(--code-bg); }\n .step-card { background: var(--bg-secondary); border-radius: 12px; padding: 24px; margin: 20px 0; border: 1px solid var(--border-color); }\n .step-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }\n .step-num { background: var(--text-color); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }\n .step-title { font-weight: 600; font-size: 16px; }\n .chat-example { background: var(--bg-secondary); border-radius: 12px; padding: 24px; margin: 20px 0; border: 1px solid var(--border-color); }\n .chat-message { display: flex; gap: 12px; margin-bottom: 16px; }\n .chat-message:last-child { margin-bottom: 0; }\n .chat-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }\n .chat-avatar.user { background: var(--info-color); color: white; }\n .chat-avatar.bot { background: var(--accent-color); color: white; }\n .chat-content { background: var(--code-bg); border-radius: 12px; padding: 12px 16px; max-width: 80%; }\n .chat-content.bot { background: linear-gradient(135deg, #fef3e8 0%, #fde8dc 100%); }\n .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 30px 0; }\n .feature-card { background: var(--bg-secondary); border-radius: 12px; padding: 24px; border: 1px solid var(--border-color); transition: all 0.2s; }\n .feature-card:hover { border-color: var(--accent-color); transform: translateY(-2px); }\n .feature-icon { width: 48px; height: 48px; background: var(--code-bg); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 24px; }\n .feature-card h4 { margin: 0 0 8px; font-size: 17px; }\n .feature-card p { margin: 0; font-size: 14px; }\n .footer { background: var(--bg-secondary); border-top: 1px solid var(--border-color); padding: 60px 24px; }\n .footer-inner { max-width: 1200px; margin: 0 auto; text-align: center; }\n .footer-bottom { max-width: 1200px; margin: 20px auto 0; text-align: center; color: var(--text-secondary); font-size: 13px; }\n @media (max-width: 768px) {\n .lang-toggle { top: 70px; right: 16px; }\n .navbar-inner { height: 56px; }\n .nav-links { display: none; }\n .hero { padding: 100px 20px 60px; }\n .hero h1 { font-size: 32px; }\n .hero-subtitle { font-size: 16px; }\n .hero-features { flex-direction: column; gap: 12px; }\n .info-banner { padding: 20px; }\n .toc { padding: 24px; }\n .section h2 { font-size: 24px; }\n .copy-btn { opacity: 1; }\n pre { padding-right: 24px; padding-top: 50px; }\n .copy-btn { top: 8px; right: 8px; }\n }\n .scroll-top { position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; background: var(--text-color); color: white; border: none; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s; z-index: 100; }\n .scroll-top.visible { opacity: 1; visibility: visible; }\n .scroll-top:hover { background: var(--accent-color); transform: translateY(-2px); }\n </style>\n</head>\n<body>\n <div class=\"lang-toggle\">\n <button class=\"lang-btn active\" onclick=\"setLang('zh')\">中文</button>\n <button class=\"lang-btn\" onclick=\"setLang('en')\">EN</button>\n </div>\n\n <nav class=\"navbar\">\n <div class=\"navbar-inner\">\n <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\" class=\"logo\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\"/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"/><circle cx=\"9\" cy=\"9\" r=\"1\" fill=\"currentColor\"/><circle cx=\"15\" cy=\"9\" r=\"1\" fill=\"currentColor\"/></svg>\n happycapy\n </a>\n <div class=\"nav-links\">\n <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\">Skill Store</a>\n <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\">Pricing</a>\n <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\" class=\"btn-primary\">Try happycapy</a>\n </div>\n </div>\n </nav>\n\n <section class=\"hero\">\n <div class=\"hero-content\">\n <h1><span class=\"zh\">轻松打造你的<br>飞书 <span class=\"highlight\">AI</span> 助手</span><span class=\"en\">Build Your Feishu<br><span class=\"highlight\">AI</span> Assistant</span></h1>\n <p class=\"hero-subtitle\">\n <span class=\"zh\">借助 HappyCapy 的强大能力,你可以在 <strong>10分钟内</strong> 部署一个属于自己的飞书AI机器人!<br><span style=\"color: var(--accent-color)\">OpenClaw</span> alternative. No setup. No security risks.</span>\n <span class=\"en\">With HappyCapy's powerful capabilities, deploy your own Feishu AI bot in just <strong>10 minutes</strong>!<br><span style=\"color: var(--accent-color)\">OpenClaw</span> alternative. No setup. No security risks.</span>\n </p>\n <div class=\"hero-features\">\n <div class=\"hero-feature\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg><span class=\"zh\">智能对话</span><span class=\"en\">Smart Chat</span></div>\n <div class=\"hero-feature\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg><span class=\"zh\">群聊总结</span><span class=\"en\">Chat Summary</span></div>\n <div class=\"hero-feature\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg><span class=\"zh\">定时提醒</span><span class=\"en\">Reminders</span></div>\n <div class=\"hero-feature\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg><span class=\"zh\">联网搜索</span><span class=\"en\">Web Search</span></div>\n </div>\n <div class=\"info-banner\">\n <div class=\"info-item\"><div class=\"label\"><span class=\"zh\">适用人群</span><span class=\"en\">Target Users</span></div><div class=\"value\"><span class=\"zh\">飞书用户 / 团队</span><span class=\"en\">Feishu Users / Teams</span></div></div>\n <div class=\"info-item\"><div class=\"label\"><span class=\"zh\">完成时间</span><span class=\"en\">Time Required</span></div><div class=\"value\">10-15 min</div></div>\n <div class=\"info-item\"><div class=\"label\"><span class=\"zh\">技术要求</span><span class=\"en\">Tech Level</span></div><div class=\"value\"><span class=\"zh\">零基础即可</span><span class=\"en\">No coding required</span></div></div>\n </div>\n <div class=\"hero-buttons\">\n <a href=\"#chapter-2\" class=\"btn-primary btn-large\"><span class=\"zh\">开始部署</span><span class=\"en\">Get Started</span></a>\n <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\" class=\"btn-secondary\"><span class=\"zh\">了解 HappyCapy</span><span class=\"en\">About HappyCapy</span></a>\n </div>\n </div>\n </section>\n\n <main class=\"main-content\">\n <div class=\"toc\">\n <h2><span class=\"zh\">目录导航</span><span class=\"en\">Table of Contents</span></h2>\n <div class=\"toc-grid\">\n <a href=\"#chapter-1\" class=\"toc-item\"><span class=\"toc-num\">1</span><span class=\"toc-text\"><span class=\"zh\">准备工作</span><span class=\"en\">Prerequisites</span></span></a>\n <a href=\"#chapter-2\" class=\"toc-item\"><span class=\"toc-num\">2</span><span class=\"toc-text\"><span class=\"zh\">与 HappyCapy 协作</span><span class=\"en\">Work with HappyCapy</span></span></a>\n <a href=\"#chapter-4\" class=\"toc-item\"><span class=\"toc-num\">4</span><span class=\"toc-text\"><span class=\"zh\">AI 服务配置</span><span class=\"en\">AI Service Config</span></span></a>\n <a href=\"#chapter-6\" class=\"toc-item\"><span class=\"toc-num\">6</span><span class=\"toc-text\"><span class=\"zh\">飞书后台配置</span><span class=\"en\">Feishu Setup</span></span></a>\n </div>\n </div>\n\n <div class=\"quick-links\">\n <h3><span class=\"zh\">重要链接速查</span><span class=\"en\">Quick Links</span></h3>\n <div class=\"quick-links-grid\">\n <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\" class=\"quick-link\" target=\"_blank\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"/></svg><span class=\"zh\">HappyCapy 官网</span><span class=\"en\">HappyCapy</span></a>\n <a href=\"https://open.feishu.cn\" class=\"quick-link\" target=\"_blank\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><path d=\"M8 21h8\"/><path d=\"M12 17v4\"/></svg><span class=\"zh\">飞书开放平台</span><span class=\"en\">Feishu Platform</span></a>\n <a href=\"https://console.anthropic.com\" class=\"quick-link\" target=\"_blank\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2L2 7l10 5 10-5-10-5z\"/><path d=\"M2 17l10 5 10-5\"/></svg>Claude API</a>\n <a href=\"https://platform.deepseek.com\" class=\"quick-link\" target=\"_blank\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"M21 21l-4.35-4.35\"/></svg>Deepseek</a>\n </div>\n </div>\n\n <section class=\"section\" id=\"chapter-1\">\n <div class=\"section-header\"><span class=\"section-num\">1</span><h2><span class=\"zh\">准备工作</span><span class=\"en\">Prerequisites</span></h2></div>\n <h3><span class=\"zh\">1.1 你需要准备什么?</span><span class=\"en\">1.1 What You Need</span></h3>\n <div class=\"zh\"><p>在开始之前,请确保你有:</p><ul><li><strong>飞书账号</strong> - 有权限创建企业应用</li><li><strong>HappyCapy账号</strong> - <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\">官网注册</a></li><li><strong>15分钟时间</strong></li><li><strong>第三方AI API Key</strong></li></ul></div>\n <div class=\"en\"><p>Before you start, make sure you have:</p><ul><li><strong>Feishu Account</strong> - With permission to create enterprise apps</li><li><strong>HappyCapy Account</strong> - <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\">Sign up here</a></li><li><strong>15 minutes</strong></li><li><strong>Third-party AI API Key</strong></li></ul></div>\n <h3><span class=\"zh\">1.2 不需要准备的</span><span class=\"en\">1.2 What You DON'T Need</span></h3>\n <div class=\"feature-grid\">\n <div class=\"feature-card\"><div class=\"feature-icon\">💻</div><h4><span class=\"zh\">编程经验</span><span class=\"en\">Coding Experience</span></h4><p><span class=\"zh\">Capy 帮你写代码</span><span class=\"en\">Capy writes code for you</span></p></div>\n <div class=\"feature-card\"><div class=\"feature-icon\">🖥️</div><h4><span class=\"zh\">服务器</span><span class=\"en\">Server</span></h4><p><span class=\"zh\">HappyCapy 沙箱已准备好</span><span class=\"en\">HappyCapy sandbox is ready</span></p></div>\n <div class=\"feature-card\"><div class=\"feature-icon\">⚙️</div><h4><span class=\"zh\">复杂配置</span><span class=\"en\">Complex Setup</span></h4><p><span class=\"zh\">我们一步步指导</span><span class=\"en\">We guide you step by step</span></p></div>\n </div>\n </section>\n\n <section class=\"section\" id=\"chapter-2\">\n <div class=\"section-header\"><span class=\"section-num\">2</span><h2><span class=\"zh\">与 HappyCapy 协作</span><span class=\"en\">Work with HappyCapy</span></h2></div>\n <div class=\"callout callout-success\"><div class=\"callout-title\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/><polyline points=\"22 4 12 14.01 9 11.01\"/></svg><span class=\"zh\">最重要的一步!</span><span class=\"en\">Most important step!</span></div><p><span class=\"zh\">你不需要自己写代码,Capy 会帮你生成。</span><span class=\"en\">You don't need to write code - Capy generates it for you.</span></p></div>\n <h3><span class=\"zh\">2.1 打开 HappyCapy</span><span class=\"en\">2.1 Open HappyCapy</span></h3>\n <div class=\"step-card\"><div class=\"step-header\"><span class=\"step-num\">1</span><span class=\"step-title\"><span class=\"zh\">登录 HappyCapy</span><span class=\"en\">Login to HappyCapy</span></span></div><p><span class=\"zh\">访问 <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\">happycapy.ai</a></span><span class=\"en\">Visit <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\">happycapy.ai</a></span></p></div>\n <h3><span class=\"zh\">2.2 请求生成项目</span><span class=\"en\">2.2 Request Project</span></h3>\n <div class=\"zh\"><pre><code>你好,Capy!请帮我创建一个飞书机器人项目,功能包括:\n1. 智能对话\n2. 群聊总结\n3. 支持@机器人</code></pre></div>\n <div class=\"en\"><pre><code>Hi Capy! Please create a Feishu bot project with:\n1. Smart conversations\n2. Group chat summarization\n3. @mention support</code></pre></div>\n </section>\n\n <section class=\"section\" id=\"chapter-4\">\n <div class=\"section-header\"><span class=\"section-num\">4</span><h2><span class=\"zh\">AI 服务配置</span><span class=\"en\">AI Service Config</span></h2></div>\n <h3><span class=\"zh\">4.1 支持的 AI 服务</span><span class=\"en\">4.1 Supported AI Providers</span></h3>\n <div class=\"table-wrapper\"><table><thead><tr><th><span class=\"zh\">服务商</span><span class=\"en\">Provider</span></th><th><span class=\"zh\">特点</span><span class=\"en\">Features</span></th><th><span class=\"zh\">推荐</span><span class=\"en\">Best For</span></th></tr></thead><tbody>\n <tr><td><strong>Claude</strong></td><td><span class=\"zh\">高质量、安全</span><span class=\"en\">High quality, safe</span></td><td><span class=\"zh\">企业级</span><span class=\"en\">Enterprise</span></td></tr>\n <tr><td><strong>Gemini</strong></td><td><span class=\"zh\">快速、免费额度高</span><span class=\"en\">Fast, generous free tier</span></td><td><span class=\"zh\">日常对话</span><span class=\"en\">Daily chat</span></td></tr>\n <tr><td><strong>Deepseek</strong></td><td><span class=\"zh\">性价比高</span><span class=\"en\">Cost-effective</span></td><td><span class=\"zh\">高频调用</span><span class=\"en\">High frequency</span></td></tr>\n </tbody></table></div>\n <h3><span class=\"zh\">配置示例</span><span class=\"en\">Config Example</span></h3>\n <pre><code>OPENAI_API_KEY=sk-xxxxxxxxxxxx\nOPENAI_BASE_URL=https://api.deepseek.com\nOPENAI_MODEL=deepseek-chat\nBOT_NAME=My Feishu Bot\nPORT=4000</code></pre>\n </section>\n\n <section class=\"section\" id=\"chapter-6\">\n <div class=\"section-header\"><span class=\"section-num\">6</span><h2><span class=\"zh\">飞书后台配置</span><span class=\"en\">Feishu Setup</span></h2></div>\n <div class=\"callout callout-important\"><div class=\"callout-title\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/></svg><span class=\"zh\">关键步骤</span><span class=\"en\">Critical Step</span></div><p><span class=\"zh\">配置错误会导致机器人无法接收消息。</span><span class=\"en\">Wrong config = bot won't receive messages.</span></p></div>\n <div class=\"step-card\"><div class=\"step-header\"><span class=\"step-num\">1</span><span class=\"step-title\"><span class=\"zh\">访问飞书开放平台</span><span class=\"en\">Visit Feishu Platform</span></span></div><p><a href=\"https://open.feishu.cn\" target=\"_blank\">open.feishu.cn</a></p></div>\n <h4>Webhook URL</h4>\n <pre><code>https://4000-xxxxxx-preview.happycapy.ai/webhook/event</code></pre>\n </section>\n\n <section class=\"section\" style=\"text-align: center; padding: 60px 0;\">\n <div style=\"font-size: 64px; margin-bottom: 24px;\">🎉</div>\n <h2 style=\"font-family: 'Noto Serif SC', serif; font-size: 32px; margin-bottom: 16px;\"><span class=\"zh\">恭喜你!</span><span class=\"en\">Congratulations!</span></h2>\n <p style=\"font-size: 18px; color: var(--text-secondary); margin-bottom: 32px;\"><span class=\"zh\">你已经拥有了一个功能完整的飞书AI机器人!</span><span class=\"en\">You now have a fully functional Feishu AI bot!</span></p>\n <div class=\"hero-buttons\"><a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\" class=\"btn-primary btn-large\"><span class=\"zh\">开始使用 HappyCapy</span><span class=\"en\">Start Using HappyCapy</span></a></div>\n </section>\n </main>\n\n <footer class=\"footer\">\n <div class=\"footer-inner\"><a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\" class=\"logo\" style=\"display: inline-flex;\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" width=\"28\" height=\"28\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"/><circle cx=\"9\" cy=\"9\" r=\"1\" fill=\"currentColor\"/><circle cx=\"15\" cy=\"9\" r=\"1\" fill=\"currentColor\"/></svg>happycapy</a><p style=\"margin-top: 16px; color: var(--text-secondary);\">Building agent-native computer.</p></div>\n <div class=\"footer-bottom\"><p>© 2026 HAPPYCAPY. All rights reserved.</p><p style=\"margin-top: 8px;\"><span class=\"zh\">作者:阿成</span><span class=\"en\">Author: Acheng</span> (<a href=\"https://github.com/AchengBusiness\" style=\"color: var(--accent-color);\">@AchengBusiness</a>)</p></div>\n </footer>\n\n <button class=\"scroll-top\" onclick=\"window.scrollTo({top: 0, behavior: 'smooth'})\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"18 15 12 9 6 15\"></polyline></svg></button>\n\n <script>\n function setLang(lang) {\n const body = document.body;\n const buttons = document.querySelectorAll('.lang-btn');\n if (lang === 'en') {\n body.classList.add('en');\n buttons[0].classList.remove('active');\n buttons[1].classList.add('active');\n localStorage.setItem('lang', 'en');\n } else {\n body.classList.remove('en');\n buttons[0].classList.add('active');\n buttons[1].classList.remove('active');\n localStorage.setItem('lang', 'zh');\n }\n }\n document.addEventListener('DOMContentLoaded', () => {\n if (localStorage.getItem('lang') === 'en') setLang('en');\n });\n window.addEventListener('scroll', () => {\n const btn = document.querySelector('.scroll-top');\n btn.classList.toggle('visible', window.scrollY > 500);\n });\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n });\n });\n document.addEventListener('DOMContentLoaded', () => {\n const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"/></svg>`;\n const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"/></svg>`;\n document.querySelectorAll('pre').forEach(pre => {\n if (pre.parentElement.classList.contains('code-block')) return;\n const wrapper = document.createElement('div');\n wrapper.className = 'code-block';\n const copyBtn = document.createElement('button');\n copyBtn.className = 'copy-btn';\n copyBtn.innerHTML = copyIcon + '<span>Copy</span>';\n copyBtn.addEventListener('click', async () => {\n const code = pre.querySelector('code') ? pre.querySelector('code').textContent : pre.textContent;\n try {\n await navigator.clipboard.writeText(code);\n copyBtn.innerHTML = checkIcon + '<span>Copied!</span>';\n copyBtn.classList.add('copied');\n setTimeout(() => { copyBtn.innerHTML = copyIcon + '<span>Copy</span>'; copyBtn.classList.remove('copied'); }, 2000);\n } catch (err) {\n const ta = document.createElement('textarea');\n ta.value = code;\n ta.style.cssText = 'position:fixed;left:-9999px';\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n document.body.removeChild(ta);\n copyBtn.innerHTML = checkIcon + '<span>Copied!</span>';\n copyBtn.classList.add('copied');\n setTimeout(() => { copyBtn.innerHTML = copyIcon + '<span>Copy</span>'; copyBtn.classList.remove('copied'); }, 2000);\n }\n });\n pre.parentNode.insertBefore(wrapper, pre);\n wrapper.appendChild(pre);\n wrapper.appendChild(copyBtn);\n });\n });\n </script>\n</body>\n</html>\n"}, "6d2d0ead23fd35b01e06d9bd337ff402d8510084": {"t": 1785772823.4179482, "n": 53428, "h": "ba16e9fb9b366b92", "c": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>飞书机器人快速入门 - HappyCapy + OpenClaw</title>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --bg-color: #f8f5f0;\n --bg-secondary: #ffffff;\n --text-color: #2d2d2d;\n --text-secondary: #5a5a5a;\n --accent-color: #e07c5a;\n --accent-hover: #c96a4a;\n --border-color: #e5e0d8;\n --code-bg: #f0ebe3;\n --success-color: #4caf50;\n --warning-color: #ff9800;\n --info-color: #2196f3;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n scroll-behavior: smooth;\n }\n\n body {\n font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;\n background-color: var(--bg-color);\n color: var(--text-color);\n line-height: 1.8;\n font-size: 16px;\n }\n\n /* Navigation */\n .navbar {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n background: var(--bg-color);\n border-bottom: 1px solid var(--border-color);\n z-index: 1000;\n padding: 0 24px;\n }\n\n .navbar-inner {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n height: 64px;\n }\n\n .logo {\n display: flex;\n align-items: center;\n gap: 8px;\n font-family: 'Noto Serif SC', serif;\n font-size: 20px;\n font-weight: 600;\n color: var(--text-color);\n text-decoration: none;\n }\n\n .logo svg {\n width: 32px;\n height: 32px;\n }\n\n .nav-links {\n display: flex;\n gap: 32px;\n align-items: center;\n }\n\n .nav-links a {\n color: var(--text-secondary);\n text-decoration: none;\n font-size: 14px;\n transition: color 0.2s;\n }\n\n .nav-links a:hover {\n color: var(--text-color);\n }\n\n .btn-primary {\n background: var(--text-color);\n color: white;\n padding: 10px 20px;\n border-radius: 8px;\n text-decoration: none;\n font-size: 14px;\n font-weight: 500;\n transition: all 0.2s;\n }\n\n .btn-primary:hover {\n background: #1a1a1a;\n transform: translateY(-1px);\n }\n\n /* Hero Section */\n .hero {\n padding: 140px 24px 80px;\n text-align: center;\n background: linear-gradient(180deg, var(--bg-color) 0%, #fff 100%);\n }\n\n .hero-content {\n max-width: 800px;\n margin: 0 auto;\n }\n\n .hero h1 {\n font-family: 'Noto Serif SC', serif;\n font-size: 48px;\n font-weight: 700;\n line-height: 1.3;\n margin-bottom: 24px;\n }\n\n .hero h1 .highlight {\n color: var(--accent-color);\n font-style: italic;\n }\n\n .hero-subtitle {\n font-size: 20px;\n color: var(--text-secondary);\n margin-bottom: 40px;\n line-height: 1.6;\n }\n\n .hero-features {\n display: flex;\n justify-content: center;\n gap: 32px;\n flex-wrap: wrap;\n margin-bottom: 40px;\n }\n\n .hero-feature {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--text-secondary);\n font-size: 15px;\n }\n\n .hero-feature svg {\n color: var(--success-color);\n }\n\n .hero-buttons {\n display: flex;\n gap: 16px;\n justify-content: center;\n flex-wrap: wrap;\n }\n\n .btn-large {\n padding: 16px 32px;\n font-size: 16px;\n border-radius: 12px;\n }\n\n .btn-secondary {\n background: transparent;\n color: var(--text-color);\n border: 2px solid var(--border-color);\n padding: 14px 30px;\n border-radius: 12px;\n text-decoration: none;\n font-size: 16px;\n font-weight: 500;\n transition: all 0.2s;\n }\n\n .btn-secondary:hover {\n border-color: var(--text-color);\n background: var(--bg-secondary);\n }\n\n /* Info Banner */\n .info-banner {\n background: var(--bg-secondary);\n border: 1px solid var(--border-color);\n border-radius: 12px;\n padding: 24px 32px;\n max-width: 700px;\n margin: 0 auto 40px;\n display: flex;\n justify-content: space-around;\n flex-wrap: wrap;\n gap: 24px;\n }\n\n .info-item {\n text-align: center;\n }\n\n .info-item .label {\n font-size: 13px;\n color: var(--text-secondary);\n margin-bottom: 4px;\n }\n\n .info-item .value {\n font-weight: 600;\n font-size: 15px;\n }\n\n /* Main Content */\n .main-content {\n max-width: 900px;\n margin: 0 auto;\n padding: 0 24px 80px;\n }\n\n /* Table of Contents */\n .toc {\n background: var(--bg-secondary);\n border-radius: 16px;\n padding: 32px;\n margin-bottom: 60px;\n border: 1px solid var(--border-color);\n }\n\n .toc h2 {\n font-family: 'Noto Serif SC', serif;\n font-size: 24px;\n margin-bottom: 24px;\n padding-bottom: 16px;\n border-bottom: 1px solid var(--border-color);\n }\n\n .toc-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 12px;\n }\n\n .toc-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n border-radius: 8px;\n text-decoration: none;\n color: var(--text-color);\n transition: all 0.2s;\n }\n\n .toc-item:hover {\n background: var(--code-bg);\n }\n\n .toc-num {\n background: var(--accent-color);\n color: white;\n width: 28px;\n height: 28px;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 13px;\n font-weight: 600;\n flex-shrink: 0;\n }\n\n .toc-text {\n font-size: 15px;\n }\n\n /* Quick Links */\n .quick-links {\n background: linear-gradient(135deg, #2d2d2d 0%, #3d3d3d 100%);\n border-radius: 16px;\n padding: 32px;\n margin-bottom: 60px;\n color: white;\n }\n\n .quick-links h3 {\n font-family: 'Noto Serif SC', serif;\n font-size: 20px;\n margin-bottom: 20px;\n }\n\n .quick-links-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n }\n\n .quick-link {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n background: rgba(255,255,255,0.1);\n border-radius: 8px;\n text-decoration: none;\n color: white;\n font-size: 14px;\n transition: all 0.2s;\n }\n\n .quick-link:hover {\n background: rgba(255,255,255,0.2);\n }\n\n .quick-link svg {\n flex-shrink: 0;\n opacity: 0.7;\n }\n\n /* Section Styles */\n .section {\n margin-bottom: 60px;\n }\n\n .section-header {\n display: flex;\n align-items: center;\n gap: 16px;\n margin-bottom: 32px;\n padding-bottom: 16px;\n border-bottom: 2px solid var(--accent-color);\n }\n\n .section-num {\n background: var(--accent-color);\n color: white;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n font-weight: 700;\n }\n\n .section h2 {\n font-family: 'Noto Serif SC', serif;\n font-size: 28px;\n font-weight: 600;\n }\n\n .section h3 {\n font-family: 'Noto Serif SC', serif;\n font-size: 22px;\n font-weight: 600;\n margin: 40px 0 20px;\n color: var(--text-color);\n }\n\n .section h4 {\n font-size: 18px;\n font-weight: 600;\n margin: 24px 0 16px;\n color: var(--text-color);\n }\n\n .section p {\n margin-bottom: 16px;\n color: var(--text-secondary);\n }\n\n .section ul, .section ol {\n margin-bottom: 20px;\n padding-left: 24px;\n }\n\n .section li {\n margin-bottom: 10px;\n color: var(--text-secondary);\n }\n\n .section li strong {\n color: var(--text-color);\n }\n\n /* Callout Boxes */\n .callout {\n border-radius: 12px;\n padding: 20px 24px;\n margin: 24px 0;\n border-left: 4px solid;\n }\n\n .callout-info {\n background: #e3f2fd;\n border-color: var(--info-color);\n }\n\n .callout-warning {\n background: #fff3e0;\n border-color: var(--warning-color);\n }\n\n .callout-success {\n background: #e8f5e9;\n border-color: var(--success-color);\n }\n\n .callout-important {\n background: #fce4ec;\n border-color: var(--accent-color);\n }\n\n .callout-title {\n font-weight: 600;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .callout p {\n margin: 0;\n color: var(--text-color);\n }\n\n /* Code Blocks */\n .code-block {\n position: relative;\n margin: 20px 0;\n }\n\n .code-block pre {\n margin: 0;\n padding-top: 20px;\n }\n\n .code-block pre {\n margin: 0;\n }\n\n .copy-btn {\n position: absolute;\n top: 12px;\n right: 12px;\n background: var(--bg-secondary);\n border: 1px solid var(--border-color);\n border-radius: 6px;\n padding: 6px 12px;\n font-size: 12px;\n color: var(--text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: all 0.2s;\n opacity: 0;\n z-index: 10;\n }\n\n .code-block:hover .copy-btn {\n opacity: 1;\n }\n\n .copy-btn:hover {\n background: var(--text-color);\n color: white;\n border-color: var(--text-color);\n }\n\n .copy-btn.copied {\n background: var(--success-color);\n color: white;\n border-color: var(--success-color);\n }\n\n .copy-btn svg {\n width: 14px;\n height: 14px;\n }\n\n pre {\n background: var(--code-bg);\n border-radius: 12px;\n padding: 20px 24px;\n padding-right: 100px;\n overflow-x: auto;\n margin: 20px 0;\n border: 1px solid var(--border-color);\n }\n\n code {\n font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;\n font-size: 14px;\n line-height: 1.6;\n }\n\n p code, li code {\n background: var(--code-bg);\n padding: 2px 8px;\n border-radius: 4px;\n font-size: 14px;\n }\n\n /* Tables */\n .table-wrapper {\n overflow-x: auto;\n margin: 20px 0;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n background: var(--bg-secondary);\n border-radius: 12px;\n overflow: hidden;\n border: 1px solid var(--border-color);\n }\n\n th {\n background: var(--code-bg);\n padding: 14px 16px;\n text-align: left;\n font-weight: 600;\n font-size: 14px;\n border-bottom: 1px solid var(--border-color);\n }\n\n td {\n padding: 14px 16px;\n border-bottom: 1px solid var(--border-color);\n font-size: 14px;\n }\n\n tr:last-child td {\n border-bottom: none;\n }\n\n tr:hover {\n background: var(--code-bg);\n }\n\n /* Step Cards */\n .step-card {\n background: var(--bg-secondary);\n border-radius: 12px;\n padding: 24px;\n margin: 20px 0;\n border: 1px solid var(--border-color);\n }\n\n .step-header {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 16px;\n }\n\n .step-num {\n background: var(--text-color);\n color: white;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: 600;\n }\n\n .step-title {\n font-weight: 600;\n font-size: 16px;\n }\n\n /* Chat Example */\n .chat-example {\n background: var(--bg-secondary);\n border-radius: 12px;\n padding: 24px;\n margin: 20px 0;\n border: 1px solid var(--border-color);\n }\n\n .chat-message {\n display: flex;\n gap: 12px;\n margin-bottom: 16px;\n }\n\n .chat-message:last-child {\n margin-bottom: 0;\n }\n\n .chat-avatar {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n flex-shrink: 0;\n }\n\n .chat-avatar.user {\n background: var(--info-color);\n color: white;\n }\n\n .chat-avatar.bot {\n background: var(--accent-color);\n color: white;\n }\n\n .chat-content {\n background: var(--code-bg);\n border-radius: 12px;\n padding: 12px 16px;\n max-width: 80%;\n }\n\n .chat-content.bot {\n background: linear-gradient(135deg, #fef3e8 0%, #fde8dc 100%);\n }\n\n /* Feature Grid */\n .feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 20px;\n margin: 30px 0;\n }\n\n .feature-card {\n background: var(--bg-secondary);\n border-radius: 12px;\n padding: 24px;\n border: 1px solid var(--border-color);\n transition: all 0.2s;\n }\n\n .feature-card:hover {\n border-color: var(--accent-color);\n transform: translateY(-2px);\n }\n\n .feature-icon {\n width: 48px;\n height: 48px;\n background: var(--code-bg);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n font-size: 24px;\n }\n\n .feature-card h4 {\n margin: 0 0 8px;\n font-size: 17px;\n }\n\n .feature-card p {\n margin: 0;\n font-size: 14px;\n }\n\n /* Footer */\n .footer {\n background: var(--bg-secondary);\n border-top: 1px solid var(--border-color);\n padding: 60px 24px;\n }\n\n .footer-inner {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 2fr 1fr 1fr 1fr;\n gap: 60px;\n }\n\n .footer-brand {\n font-family: 'Noto Serif SC', serif;\n }\n\n .footer-brand .logo {\n margin-bottom: 16px;\n }\n\n .footer-brand p {\n color: var(--text-secondary);\n font-size: 14px;\n margin-bottom: 20px;\n }\n\n .social-links {\n display: flex;\n gap: 12px;\n }\n\n .social-links a {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n background: var(--code-bg);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-secondary);\n transition: all 0.2s;\n }\n\n .social-links a:hover {\n background: var(--text-color);\n color: white;\n }\n\n .footer-section h4 {\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 16px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .footer-section a {\n display: block;\n color: var(--text-secondary);\n text-decoration: none;\n font-size: 14px;\n margin-bottom: 10px;\n transition: color 0.2s;\n }\n\n .footer-section a:hover {\n color: var(--accent-color);\n }\n\n .footer-bottom {\n max-width: 1200px;\n margin: 40px auto 0;\n padding-top: 24px;\n border-top: 1px solid var(--border-color);\n text-align: center;\n color: var(--text-secondary);\n font-size: 13px;\n }\n\n /* Responsive */\n @media (max-width: 768px) {\n .navbar-inner {\n height: 56px;\n }\n\n .nav-links {\n display: none;\n }\n\n .hero {\n padding: 100px 20px 60px;\n }\n\n .hero h1 {\n font-size: 32px;\n }\n\n .hero-subtitle {\n font-size: 16px;\n }\n\n .hero-features {\n flex-direction: column;\n gap: 12px;\n }\n\n .info-banner {\n padding: 20px;\n }\n\n .toc {\n padding: 24px;\n }\n\n .section h2 {\n font-size: 24px;\n }\n\n .footer-inner {\n grid-template-columns: 1fr;\n gap: 40px;\n }\n\n /* Always show copy button on mobile */\n .copy-btn {\n opacity: 1;\n }\n\n pre {\n padding-right: 24px;\n padding-top: 50px;\n }\n\n .copy-btn {\n top: 8px;\n right: 8px;\n }\n }\n\n /* Scroll to top */\n .scroll-top {\n position: fixed;\n bottom: 24px;\n right: 24px;\n width: 48px;\n height: 48px;\n background: var(--text-color);\n color: white;\n border: none;\n border-radius: 12px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s;\n z-index: 100;\n }\n\n .scroll-top.visible {\n opacity: 1;\n visibility: visible;\n }\n\n .scroll-top:hover {\n background: var(--accent-color);\n transform: translateY(-2px);\n }\n </style>\n</head>\n<body>\n <!-- Navigation -->\n <nav class=\"navbar\">\n <div class=\"navbar-inner\">\n <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\" class=\"logo\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\"/>\n <path d=\"M8 14s1.5 2 4 2 4-2 4-2\"/>\n <circle cx=\"9\" cy=\"9\" r=\"1\" fill=\"currentColor\"/>\n <circle cx=\"15\" cy=\"9\" r=\"1\" fill=\"currentColor\"/>\n </svg>\n happycapy\n </a>\n <div class=\"nav-links\">\n <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\">Skill Store</a>\n <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\">Pricing</a>\n <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\" class=\"btn-primary\">Try happycapy</a>\n </div>\n </div>\n </nav>\n\n <!-- Hero Section -->\n <section class=\"hero\">\n <div class=\"hero-content\">\n <h1>轻松打造你的<br>飞书 <span class=\"highlight\">AI</span> 助手</h1>\n <p class=\"hero-subtitle\">\n 借助 HappyCapy 的强大能力,你可以在 <strong>10分钟内</strong> 部署一个属于自己的飞书AI机器人!<br>\n <span style=\"color: var(--accent-color)\">OpenClaw</span> alternative. No setup. No security risks.\n </p>\n\n <div class=\"hero-features\">\n <div class=\"hero-feature\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n 智能对话\n </div>\n <div class=\"hero-feature\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n 群聊总结\n </div>\n <div class=\"hero-feature\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n 定时提醒\n </div>\n <div class=\"hero-feature\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n 联网搜索\n </div>\n </div>\n\n <div class=\"info-banner\">\n <div class=\"info-item\">\n <div class=\"label\">适用人群</div>\n <div class=\"value\">飞书用户 / 团队</div>\n </div>\n <div class=\"info-item\">\n <div class=\"label\">完成时间</div>\n <div class=\"value\">10-15 分钟</div>\n </div>\n <div class=\"info-item\">\n <div class=\"label\">技术要求</div>\n <div class=\"value\">零基础即可</div>\n </div>\n </div>\n\n <div class=\"hero-buttons\">\n <a href=\"#chapter-2\" class=\"btn-primary btn-large\">开始部署</a>\n <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\" class=\"btn-secondary\">了解 HappyCapy</a>\n </div>\n </div>\n </section>\n\n <!-- Main Content -->\n <main class=\"main-content\">\n <!-- Table of Contents -->\n <div class=\"toc\">\n <h2>目录导航</h2>\n <div class=\"toc-grid\">\n <a href=\"#chapter-1\" class=\"toc-item\">\n <span class=\"toc-num\">1</span>\n <span class=\"toc-text\">准备工作</span>\n </a>\n <a href=\"#chapter-2\" class=\"toc-item\">\n <span class=\"toc-num\">2</span>\n <span class=\"toc-text\">与 HappyCapy 协作生成代码</span>\n </a>\n <a href=\"#chapter-3\" class=\"toc-item\">\n <span class=\"toc-num\">3</span>\n <span class=\"toc-text\">机器人配置规划</span>\n </a>\n <a href=\"#chapter-4\" class=\"toc-item\">\n <span class=\"toc-num\">4</span>\n <span class=\"toc-text\">AI 服务配置</span>\n </a>\n <a href=\"#chapter-5\" class=\"toc-item\">\n <span class=\"toc-num\">5</span>\n <span class=\"toc-text\">沙箱环境部署</span>\n </a>\n <a href=\"#chapter-6\" class=\"toc-item\">\n <span class=\"toc-num\">6</span>\n <span class=\"toc-text\">飞书后台配置</span>\n </a>\n <a href=\"#chapter-7\" class=\"toc-item\">\n <span class=\"toc-num\">7</span>\n <span class=\"toc-text\">如何与机器人对话</span>\n </a>\n <a href=\"#chapter-8\" class=\"toc-item\">\n <span class=\"toc-num\">8</span>\n <span class=\"toc-text\">如何总结群聊消息</span>\n </a>\n <a href=\"#chapter-9\" class=\"toc-item\">\n <span class=\"toc-num\">9</span>\n <span class=\"toc-text\">常见问题排查</span>\n </a>\n </div>\n </div>\n\n <!-- Quick Links -->\n <div class=\"quick-links\">\n <h3>重要链接速查</h3>\n <div class=\"quick-links-grid\">\n <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\" class=\"quick-link\" target=\"_blank\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <path d=\"M8 14s1.5 2 4 2 4-2 4-2\"/>\n </svg>\n HappyCapy 官网\n </a>\n <a href=\"https://open.feishu.cn\" class=\"quick-link\" target=\"_blank\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/>\n <path d=\"M8 21h8\"/>\n <path d=\"M12 17v4\"/>\n </svg>\n 飞书开放平台\n </a>\n <a href=\"https://console.anthropic.com\" class=\"quick-link\" target=\"_blank\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M12 2L2 7l10 5 10-5-10-5z\"/>\n <path d=\"M2 17l10 5 10-5\"/>\n <path d=\"M2 12l10 5 10-5\"/>\n </svg>\n Claude API 控制台\n </a>\n <a href=\"https://platform.deepseek.com\" class=\"quick-link\" target=\"_blank\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n <path d=\"M21 21l-4.35-4.35\"/>\n </svg>\n Deepseek 平台\n </a>\n </div>\n </div>\n\n <!-- Chapter 1 -->\n <section class=\"section\" id=\"chapter-1\">\n <div class=\"section-header\">\n <span class=\"section-num\">1</span>\n <h2>准备工作</h2>\n </div>\n\n <h3>1.1 你需要准备什么?</h3>\n <p>在开始之前,请确保你有:</p>\n <ul>\n <li><strong>飞书账号</strong> - 有权限创建企业应用(管理员或开发者)</li>\n <li><strong>HappyCapy账号</strong> - 如果还没有,请访问 <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\" target=\"_blank\">官网注册</a></li>\n <li><strong>15分钟时间</strong> - 跟着教程一步步来</li>\n <li><strong>第三方AI服务API Key</strong> - 用于接入AI能力(详见第4章)</li>\n </ul>\n\n <h3>1.2 暂时不需要准备的</h3>\n <div class=\"feature-grid\">\n <div class=\"feature-card\">\n <div class=\"feature-icon\">💻</div>\n <h4>编程经验</h4>\n <p>Capy 会帮你写代码,你只需要描述需求</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">🖥️</div>\n <h4>服务器</h4>\n <p>HappyCapy 沙箱已经为你准备好了</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">⚙️</div>\n <h4>复杂的配置</h4>\n <p>我们会一步步指导你完成</p>\n </div>\n </div>\n\n <h3>1.3 需要从飞书获取的凭证(稍后获取)</h3>\n <p><strong>飞书应用凭证</strong>(第6章会教你获取):</p>\n <ul>\n <li>App ID(格式:<code>cli_xxxxxxxxxxxx</code>)</li>\n <li>App Secret(一长串密钥)</li>\n </ul>\n\n <div class=\"callout callout-important\">\n <div class=\"callout-title\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <path d=\"M12 16v-4\"/>\n <path d=\"M12 8h.01\"/>\n </svg>\n 重要说明\n </div>\n <p>HappyCapy 内置的 AI 服务不支持直接接入飞书机器人,你需要使用第三方 AI 服务提供商的 API。支持的服务包括:Claude (Anthropic)、Gemini (Google)、Deepseek、通义千问 (阿里云) 等。</p>\n </div>\n </section>\n\n <!-- Chapter 2 -->\n <section class=\"section\" id=\"chapter-2\">\n <div class=\"section-header\">\n <span class=\"section-num\">2</span>\n <h2>与 HappyCapy 协作生成代码</h2>\n </div>\n\n <div class=\"callout callout-success\">\n <div class=\"callout-title\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/>\n <polyline points=\"22 4 12 14.01 9 11.01\"/>\n </svg>\n 这是最重要的一步!\n </div>\n <p>你不需要自己写代码,Capy 会帮你生成所有文件。</p>\n </div>\n\n <h3>2.1 打开 HappyCapy 对话界面</h3>\n <div class=\"step-card\">\n <div class=\"step-header\">\n <span class=\"step-num\">1</span>\n <span class=\"step-title\">登录 HappyCapy</span>\n </div>\n <p>访问 <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\" target=\"_blank\">happycapy.ai</a> 并登录你的账号</p>\n </div>\n <div class=\"step-card\">\n <div class=\"step-header\">\n <span class=\"step-num\">2</span>\n <span class=\"step-title\">开始新对话</span>\n </div>\n <p>点击「新对话」或选择现有对话,你会看到一个类似 ChatGPT 的对话框</p>\n </div>\n\n <h3>2.2 请求 Capy 生成项目结构</h3>\n <h4>你应该这样说:</h4>\n <pre><code>你好,Capy!我想在HappyCapy沙箱中部署一个飞书机器人,功能要求:\n1. 能够智能对话(使用AI回复消息)\n2. 能够总结群聊消息\n3. 支持在群聊中@机器人\n\n请帮我:\n1. 创建项目目录结构\n2. 生成 package.json 文件\n3. 创建基础的 .env 配置文件模板</code></pre>\n\n <h4>Capy 会回复:</h4>\n <div class=\"chat-example\">\n <div class=\"chat-message\">\n <div class=\"chat-avatar bot\">C</div>\n <div class=\"chat-content bot\">\n <p>好的!我来帮你创建飞书机器人项目。</p>\n <p style=\"margin-top: 12px;\">✅ 已创建项目文件夹<br>\n ✅ 生成 package.json 依赖配置<br>\n ✅ 创建 .env 环境变量模板</p>\n </div>\n </div>\n </div>\n\n <h3>2.3 请求生成核心代码文件</h3>\n <h4>你应该这样说:</h4>\n <pre><code>很好!现在请帮我生成三个核心代码文件:\n\n1. **server.js** - 主服务器文件\n - 需要监听 4000 端口\n - 接收飞书的 webhook 消息\n - 处理消息事件并调用AI回复\n\n2. **feishu.js** - 飞书API封装\n - 包含 token 管理\n - 发送消息功能\n - 获取群聊历史消息\n\n3. **agent.js** - AI对话处理\n - 集成第三方AI API\n - 处理用户消息并生成回复\n\n请为我创建这三个文件,代码要简洁、有注释。</code></pre>\n\n <h3>2.6 暴露公网端口</h3>\n <h4>你应该这样说:</h4>\n <pre><code>服务器启动成功了!现在我需要:\n1. 暴露 4000 端口到公网(使用 /app/export-port.sh)\n2. 获取公网访问地址\n3. 告诉我这个地址,我需要在飞书后台配置</code></pre>\n\n <div class=\"callout callout-warning\">\n <div class=\"callout-title\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/>\n <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/>\n <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n </svg>\n 重要\n </div>\n <p>请复制并保存公网地址!格式类似:<code>https://4000-xxxxxx-preview.happycapy.ai</code><br>你在配置飞书时会用到。</p>\n </div>\n\n <h3>2.9 HappyCapy 协作快速参考</h3>\n <div class=\"table-wrapper\">\n <table>\n <thead>\n <tr>\n <th>你想做什么</th>\n <th>对 Capy 说</th>\n <th>Capy 会做</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>创建项目</td>\n <td>\"创建飞书机器人项目,包含对话和总结功能\"</td>\n <td>生成项目结构、所有代码文件</td>\n </tr>\n <tr>\n <td>配置环境</td>\n <td>\"帮我配置.env文件,我的凭证是:[粘贴凭证]\"</td>\n <td>填写配置文件</td>\n </tr>\n <tr>\n <td>启动服务</td>\n <td>\"安装依赖并启动服务器\"</td>\n <td>执行 npm install 和 npm start</td>\n </tr>\n <tr>\n <td>暴露端口</td>\n <td>\"暴露4000端口到公网\"</td>\n <td>执行 export-port 并返回 URL</td>\n </tr>\n <tr>\n <td>解决报错</td>\n <td>\"报错了:[粘贴错误],请帮我修复\"</td>\n <td>分析错误并给出解决方案</td>\n </tr>\n </tbody>\n </table>\n </div>\n </section>\n\n <!-- Chapter 4 -->\n <section class=\"section\" id=\"chapter-4\">\n <div class=\"section-header\">\n <span class=\"section-num\">4</span>\n <h2>AI 服务配置</h2>\n </div>\n\n <h3>4.1 支持的 AI 服务提供商</h3>\n <div class=\"table-wrapper\">\n <table>\n <thead>\n <tr>\n <th>服务商</th>\n <th>特点</th>\n <th>推荐场景</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><strong>Claude (Anthropic)</strong></td>\n <td>对话质量高、安全可控</td>\n <td>企业级应用、高质量对话</td>\n </tr>\n <tr>\n <td><strong>Gemini (Google)</strong></td>\n <td>速度快、免费额度高</td>\n <td>日常对话、成本敏感场景</td>\n </tr>\n <tr>\n <td><strong>Deepseek</strong></td>\n <td>性价比高、国内访问快</td>\n <td>国内用户、高频调用</td>\n </tr>\n <tr>\n <td><strong>通义千问 (阿里云)</strong></td>\n <td>中文理解优秀、合规安全</td>\n <td>中文场景、国内企业</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <h3>4.2 Claude (Anthropic) API 配置</h3>\n <h4>获取 API Key</h4>\n <ol>\n <li>访问 <a href=\"https://console.anthropic.com\" target=\"_blank\">Anthropic Console</a></li>\n <li>登录或注册账号</li>\n <li>进入「Settings」→「API Keys」</li>\n <li>点击「Create Key」创建新的 API Key</li>\n <li>复制生成的 Key(格式:<code>sk-ant-api03-xxxxxxxxx...</code>)</li>\n </ol>\n\n <h4>.env 配置示例</h4>\n <pre><code># ===== Claude/Anthropic API 配置 =====\n\n# API Key(必需)\nCLAUDE_API_KEY=sk-ant-api03-xxxxxxxxxxxx\n\n# 模型名称(必需)\n# 可选:claude-opus-4-6 / claude-sonnet-4-5 / claude-haiku-3-5\nCLAUDE_MODEL=claude-sonnet-4-5\n\n# ===== 通用配置 =====\nBOT_NAME=我的飞书AI助手\nPORT=4000</code></pre>\n\n <h3>4.4 Deepseek API 配置</h3>\n <h4>.env 配置示例</h4>\n <pre><code># ===== Deepseek API 配置 =====\n# 注意:Deepseek 兼容 OpenAI API 格式\n\n# API Key(必填)\nOPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxx\n\n# API Base URL(必填,固定值)\nOPENAI_BASE_URL=https://api.deepseek.com\n\n# 模型名称(必填)\nOPENAI_MODEL=deepseek-chat\n\n# ===== 通用配置 =====\nBOT_NAME=我的飞书助手\nPORT=4000</code></pre>\n </section>\n\n <!-- Chapter 6 -->\n <section class=\"section\" id=\"chapter-6\">\n <div class=\"section-header\">\n <span class=\"section-num\">6</span>\n <h2>飞书后台配置</h2>\n </div>\n\n <div class=\"callout callout-info\">\n <div class=\"callout-title\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <path d=\"M12 16v-4\"/>\n <path d=\"M12 8h.01\"/>\n </svg>\n 开始之前\n </div>\n <p>请确保:服务器已经启动、已获取公网地址、公网地址可以正常访问</p>\n </div>\n\n <h3>6.1 创建飞书应用</h3>\n <div class=\"step-card\">\n <div class=\"step-header\">\n <span class=\"step-num\">1</span>\n <span class=\"step-title\">访问飞书开放平台</span>\n </div>\n <p>打开 <a href=\"https://open.feishu.cn\" target=\"_blank\">open.feishu.cn</a>,使用飞书账号登录,点击「开发者后台」</p>\n </div>\n <div class=\"step-card\">\n <div class=\"step-header\">\n <span class=\"step-num\">2</span>\n <span class=\"step-title\">创建企业自建应用</span>\n </div>\n <p>点击「创建企业自建应用」,填写应用名称、描述、图标</p>\n </div>\n <div class=\"step-card\">\n <div class=\"step-header\">\n <span class=\"step-num\">3</span>\n <span class=\"step-title\">获取应用凭证</span>\n </div>\n <p>在「凭证与基础信息」中获取 App ID 和 App Secret</p>\n </div>\n\n <h3>6.3 配置事件订阅(关键步骤!)</h3>\n <div class=\"callout callout-important\">\n <div class=\"callout-title\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/>\n <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/>\n <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n </svg>\n 这是最关键的一步!\n </div>\n <p>配置错误会导致机器人收不到消息。</p>\n </div>\n\n <h4>填写请求地址</h4>\n <pre><code>https://4000-xxxxxx-preview.happycapy.ai/webhook/event</code></pre>\n <p>将 <code>4000-xxxxxx-preview.happycapy.ai</code> 替换为你的真实公网地址</p>\n\n <h4>订阅事件类型</h4>\n <p>搜索并添加:<code>im.message.receive_v1</code></p>\n </section>\n\n <!-- Chapter 7 -->\n <section class=\"section\" id=\"chapter-7\">\n <div class=\"section-header\">\n <span class=\"section-num\">7</span>\n <h2>如何与机器人对话</h2>\n </div>\n\n <h3>7.1 添加机器人</h3>\n <ol>\n <li>打开飞书客户端</li>\n <li>点击左上角「+」按钮</li>\n <li>选择「添加机器人」</li>\n <li>搜索你的机器人名称</li>\n <li>点击「添加」</li>\n </ol>\n\n <h3>7.2 对话示例</h3>\n <div class=\"chat-example\">\n <div class=\"chat-message\">\n <div class=\"chat-avatar user\">你</div>\n <div class=\"chat-content\">你好</div>\n </div>\n <div class=\"chat-message\">\n <div class=\"chat-avatar bot\">🤖</div>\n <div class=\"chat-content bot\">\n 你好!我是你的AI助手,有什么可以帮到你吗?<br><br>\n 我可以帮你:<br>\n • 智能对话 - 回答问题、提供建议<br>\n • 群聊总结 - 梳理会议要点<br>\n • 联网搜索 - 获取最新信息\n </div>\n </div>\n </div>\n\n <h3>7.3 在群聊中使用</h3>\n <p>在群聊中,需要 @ 机器人才能触发回复:</p>\n <pre><code>@我的AI助手 帮我总结一下今天的讨论</code></pre>\n </section>\n\n <!-- Chapter 8 -->\n <section class=\"section\" id=\"chapter-8\">\n <div class=\"section-header\">\n <span class=\"section-num\">8</span>\n <h2>如何总结群聊消息</h2>\n </div>\n\n <div class=\"callout callout-success\">\n <div class=\"callout-title\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/>\n </svg>\n 最实用的功能\n </div>\n <p>可以快速梳理群聊讨论,节省阅读时间!</p>\n </div>\n\n <h3>8.1 基础总结</h3>\n <pre><code>@我的AI助手 总结今天的讨论</code></pre>\n\n <h3>8.2 指定时间范围</h3>\n <div class=\"table-wrapper\">\n <table>\n <thead>\n <tr>\n <th>你说</th>\n <th>时间范围</th>\n </tr>\n </thead>\n <tbody>\n <tr><td>\"总结最近1小时\"</td><td>最近1小时的消息</td></tr>\n <tr><td>\"总结今天\"</td><td>今天00:00至现在</td></tr>\n <tr><td>\"总结昨天\"</td><td>昨天全天</td></tr>\n <tr><td>\"总结本周\"</td><td>本周一至今</td></tr>\n </tbody>\n </table>\n </div>\n </section>\n\n <!-- Success Section -->\n <section class=\"section\" style=\"text-align: center; padding: 60px 0;\">\n <div style=\"font-size: 64px; margin-bottom: 24px;\">🎉</div>\n <h2 style=\"font-family: 'Noto Serif SC', serif; font-size: 32px; margin-bottom: 16px;\">恭喜你!</h2>\n <p style=\"font-size: 18px; color: var(--text-secondary); margin-bottom: 32px;\">\n 如果你完成了以上所有步骤,现在你已经拥有了一个功能完整的飞书AI机器人!\n </p>\n <div class=\"hero-buttons\" style=\"margin-bottom: 40px;\">\n <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\" class=\"btn-primary btn-large\">开始使用 HappyCapy</a>\n </div>\n <div class=\"feature-grid\" style=\"text-align: left;\">\n <div class=\"feature-card\">\n <div class=\"feature-icon\">💬</div>\n <h4>智能对话</h4>\n <p>与机器人自然交流,获取即时回答</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">📝</div>\n <h4>群聊总结</h4>\n <p>快速梳理群聊要点,不错过重要信息</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">🔍</div>\n <h4>联网搜索</h4>\n <p>实时获取最新信息和资讯</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">📄</div>\n <h4>生成文档</h4>\n <p>自动创建飞书云文档</p>\n </div>\n </div>\n </section>\n </main>\n\n <!-- Footer -->\n <footer class=\"footer\">\n <div class=\"footer-inner\">\n <div class=\"footer-brand\">\n <a href=\"https://happycapy.ai/signup?invite_ref=aGHAUcHN\" class=\"logo\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" width=\"28\" height=\"28\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <path d=\"M8 14s1.5 2 4 2 4-2 4-2\"/>\n <circle cx=\"9\" cy=\"9\" r=\"1\" fill=\"currentColor\"/>\n <circle cx=\"15\" cy=\"9\" r=\"1\" fill=\"currentColor\"/>\n </svg>\n happycapy\n </a>\n <p>Building agent-native computer.</p>\n <div class=\"social-links\">\n <a href=\"#\" aria-label=\"Twitter\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"/>\n </svg>\n </a>\n <a href=\"#\" aria-label=\"Discord\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z\"/>\n </svg>\n </a>\n <a href=\"#\" aria-label=\"YouTube\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\"/>\n </svg>\n </a>\n </div>\n </div>\n <div class=\"footer-section\">\n <h4>Community</h4>\n <a href=\"#\">Discord</a>\n <a href=\"#\">Affiliates</a>\n </div>\n <div class=\"footer-section\">\n <h4>Legal</h4>\n <a href=\"#\">Privacy Policy</a>\n <a href=\"#\">Terms of Service</a>\n <a href=\"#\">AI Terms</a>\n </div>\n <div class=\"footer-section\">\n <h4>Resources</h4>\n <a href=\"https://open.feishu.cn/document\" target=\"_blank\">飞书开发文档</a>\n <a href=\"https://docs.anthropic.com\" target=\"_blank\">Claude API 文档</a>\n <a href=\"https://platform.deepseek.com\" target=\"_blank\">Deepseek 文档</a>\n </div>\n </div>\n <div class=\"footer-bottom\">\n <p>© 2026 HAPPYCAPY. All rights reserved.</p>\n <p style=\"margin-top: 8px;\">文档作者:阿成 (<a href=\"https://github.com/AchengBusiness\" style=\"color: var(--accent-color);\">@AchengBusiness</a>)</p>\n </div>\n </footer>\n\n <!-- Scroll to Top Button -->\n <button class=\"scroll-top\" onclick=\"window.scrollTo({top: 0, behavior: 'smooth'})\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"18 15 12 9 6 15\"></polyline>\n </svg>\n </button>\n\n <script>\n // Show/hide scroll to top button\n window.addEventListener('scroll', () => {\n const scrollTop = document.querySelector('.scroll-top');\n if (window.scrollY > 500) {\n scrollTop.classList.add('visible');\n } else {\n scrollTop.classList.remove('visible');\n }\n });\n\n // Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n\n // Add copy buttons to all code blocks\n document.addEventListener('DOMContentLoaded', () => {\n const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path></svg>`;\n const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg>`;\n\n document.querySelectorAll('pre').forEach(pre => {\n // Skip if already wrapped\n if (pre.parentElement.classList.contains('code-block')) return;\n\n // Create wrapper\n const wrapper = document.createElement('div');\n wrapper.className = 'code-block';\n\n // Create copy button\n const copyBtn = document.createElement('button');\n copyBtn.className = 'copy-btn';\n copyBtn.innerHTML = copyIcon + '<span>复制</span>';\n\n // Copy functionality\n copyBtn.addEventListener('click', async () => {\n const code = pre.querySelector('code') ? pre.querySelector('code').textContent : pre.textContent;\n try {\n await navigator.clipboard.writeText(code);\n copyBtn.innerHTML = checkIcon + '<span>已复制</span>';\n copyBtn.classList.add('copied');\n setTimeout(() => {\n copyBtn.innerHTML = copyIcon + '<span>复制</span>';\n copyBtn.classList.remove('copied');\n }, 2000);\n } catch (err) {\n // Fallback for older browsers\n const textArea = document.createElement('textarea');\n textArea.value = code;\n textArea.style.position = 'fixed';\n textArea.style.left = '-9999px';\n document.body.appendChild(textArea);\n textArea.select();\n document.execCommand('copy');\n document.body.removeChild(textArea);\n copyBtn.innerHTML = checkIcon + '<span>已复制</span>';\n copyBtn.classList.add('copied');\n setTimeout(() => {\n copyBtn.innerHTML = copyIcon + '<span>复制</span>';\n copyBtn.classList.remove('copied');\n }, 2000);\n }\n });\n\n // Wrap the pre element\n pre.parentNode.insertBefore(wrapper, pre);\n wrapper.appendChild(pre);\n wrapper.appendChild(copyBtn);\n });\n });\n </script>\n</body>\n</html>\n"}, "268682825af5db26d8c6a81175706101e3f4a69a": {"t": 1785772826.9584355, "n": 53178, "h": "99f3504b2c87c746", "c": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>飞书机器人快速入门 - HappyCapy + OpenClaw</title>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --bg-color: #f8f5f0;\n --bg-secondary: #ffffff;\n --text-color: #2d2d2d;\n --text-secondary: #5a5a5a;\n --accent-color: #e07c5a;\n --accent-hover: #c96a4a;\n --border-color: #e5e0d8;\n --code-bg: #f0ebe3;\n --success-color: #4caf50;\n --warning-color: #ff9800;\n --info-color: #2196f3;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n scroll-behavior: smooth;\n }\n\n body {\n font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;\n background-color: var(--bg-color);\n color: var(--text-color);\n line-height: 1.8;\n font-size: 16px;\n }\n\n /* Navigation */\n .navbar {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n background: var(--bg-color);\n border-bottom: 1px solid var(--border-color);\n z-index: 1000;\n padding: 0 24px;\n }\n\n .navbar-inner {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n height: 64px;\n }\n\n .logo {\n display: flex;\n align-items: center;\n gap: 8px;\n font-family: 'Noto Serif SC', serif;\n font-size: 20px;\n font-weight: 600;\n color: var(--text-color);\n text-decoration: none;\n }\n\n .logo svg {\n width: 32px;\n height: 32px;\n }\n\n .nav-links {\n display: flex;\n gap: 32px;\n align-items: center;\n }\n\n .nav-links a {\n color: var(--text-secondary);\n text-decoration: none;\n font-size: 14px;\n transition: color 0.2s;\n }\n\n .nav-links a:hover {\n color: var(--text-color);\n }\n\n .btn-primary {\n background: var(--text-color);\n color: white;\n padding: 10px 20px;\n border-radius: 8px;\n text-decoration: none;\n font-size: 14px;\n font-weight: 500;\n transition: all 0.2s;\n }\n\n .btn-primary:hover {\n background: #1a1a1a;\n transform: translateY(-1px);\n }\n\n /* Hero Section */\n .hero {\n padding: 140px 24px 80px;\n text-align: center;\n background: linear-gradient(180deg, var(--bg-color) 0%, #fff 100%);\n }\n\n .hero-content {\n max-width: 800px;\n margin: 0 auto;\n }\n\n .hero h1 {\n font-family: 'Noto Serif SC', serif;\n font-size: 48px;\n font-weight: 700;\n line-height: 1.3;\n margin-bottom: 24px;\n }\n\n .hero h1 .highlight {\n color: var(--accent-color);\n font-style: italic;\n }\n\n .hero-subtitle {\n font-size: 20px;\n color: var(--text-secondary);\n margin-bottom: 40px;\n line-height: 1.6;\n }\n\n .hero-features {\n display: flex;\n justify-content: center;\n gap: 32px;\n flex-wrap: wrap;\n margin-bottom: 40px;\n }\n\n .hero-feature {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--text-secondary);\n font-size: 15px;\n }\n\n .hero-feature svg {\n color: var(--success-color);\n }\n\n .hero-buttons {\n display: flex;\n gap: 16px;\n justify-content: center;\n flex-wrap: wrap;\n }\n\n .btn-large {\n padding: 16px 32px;\n font-size: 16px;\n border-radius: 12px;\n }\n\n .btn-secondary {\n background: transparent;\n color: var(--text-color);\n border: 2px solid var(--border-color);\n padding: 14px 30px;\n border-radius: 12px;\n text-decoration: none;\n font-size: 16px;\n font-weight: 500;\n transition: all 0.2s;\n }\n\n .btn-secondary:hover {\n border-color: var(--text-color);\n background: var(--bg-secondary);\n }\n\n /* Info Banner */\n .info-banner {\n background: var(--bg-secondary);\n border: 1px solid var(--border-color);\n border-radius: 12px;\n padding: 24px 32px;\n max-width: 700px;\n margin: 0 auto 40px;\n display: flex;\n justify-content: space-around;\n flex-wrap: wrap;\n gap: 24px;\n }\n\n .info-item {\n text-align: center;\n }\n\n .info-item .label {\n font-size: 13px;\n color: var(--text-secondary);\n margin-bottom: 4px;\n }\n\n .info-item .value {\n font-weight: 600;\n font-size: 15px;\n }\n\n /* Main Content */\n .main-content {\n max-width: 900px;\n margin: 0 auto;\n padding: 0 24px 80px;\n }\n\n /* Table of Contents */\n .toc {\n background: var(--bg-secondary);\n border-radius: 16px;\n padding: 32px;\n margin-bottom: 60px;\n border: 1px solid var(--border-color);\n }\n\n .toc h2 {\n font-family: 'Noto Serif SC', serif;\n font-size: 24px;\n margin-bottom: 24px;\n padding-bottom: 16px;\n border-bottom: 1px solid var(--border-color);\n }\n\n .toc-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 12px;\n }\n\n .toc-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n border-radius: 8px;\n text-decoration: none;\n color: var(--text-color);\n transition: all 0.2s;\n }\n\n .toc-item:hover {\n background: var(--code-bg);\n }\n\n .toc-num {\n background: var(--accent-color);\n color: white;\n width: 28px;\n height: 28px;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 13px;\n font-weight: 600;\n flex-shrink: 0;\n }\n\n .toc-text {\n font-size: 15px;\n }\n\n /* Quick Links */\n .quick-links {\n background: linear-gradient(135deg, #2d2d2d 0%, #3d3d3d 100%);\n border-radius: 16px;\n padding: 32px;\n margin-bottom: 60px;\n color: white;\n }\n\n .quick-links h3 {\n font-family: 'Noto Serif SC', serif;\n font-size: 20px;\n margin-bottom: 20px;\n }\n\n .quick-links-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n }\n\n .quick-link {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n background: rgba(255,255,255,0.1);\n border-radius: 8px;\n text-decoration: none;\n color: white;\n font-size: 14px;\n transition: all 0.2s;\n }\n\n .quick-link:hover {\n background: rgba(255,255,255,0.2);\n }\n\n .quick-link svg {\n flex-shrink: 0;\n opacity: 0.7;\n }\n\n /* Section Styles */\n .section {\n margin-bottom: 60px;\n }\n\n .section-header {\n display: flex;\n align-items: center;\n gap: 16px;\n margin-bottom: 32px;\n padding-bottom: 16px;\n border-bottom: 2px solid var(--accent-color);\n }\n\n .section-num {\n background: var(--accent-color);\n color: white;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n font-weight: 700;\n }\n\n .section h2 {\n font-family: 'Noto Serif SC', serif;\n font-size: 28px;\n font-weight: 600;\n }\n\n .section h3 {\n font-family: 'Noto Serif SC', serif;\n font-size: 22px;\n font-weight: 600;\n margin: 40px 0 20px;\n color: var(--text-color);\n }\n\n .section h4 {\n font-size: 18px;\n font-weight: 600;\n margin: 24px 0 16px;\n color: var(--text-color);\n }\n\n .section p {\n margin-bottom: 16px;\n color: var(--text-secondary);\n }\n\n .section ul, .section ol {\n margin-bottom: 20px;\n padding-left: 24px;\n }\n\n .section li {\n margin-bottom: 10px;\n color: var(--text-secondary);\n }\n\n .section li strong {\n color: var(--text-color);\n }\n\n /* Callout Boxes */\n .callout {\n border-radius: 12px;\n padding: 20px 24px;\n margin: 24px 0;\n border-left: 4px solid;\n }\n\n .callout-info {\n background: #e3f2fd;\n border-color: var(--info-color);\n }\n\n .callout-warning {\n background: #fff3e0;\n border-color: var(--warning-color);\n }\n\n .callout-success {\n background: #e8f5e9;\n border-color: var(--success-color);\n }\n\n .callout-important {\n background: #fce4ec;\n border-color: var(--accent-color);\n }\n\n .callout-title {\n font-weight: 600;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .callout p {\n margin: 0;\n color: var(--text-color);\n }\n\n /* Code Blocks */\n .code-block {\n position: relative;\n margin: 20px 0;\n }\n\n .code-block pre {\n margin: 0;\n padding-top: 20px;\n }\n\n .code-block pre {\n margin: 0;\n }\n\n .copy-btn {\n position: absolute;\n top: 12px;\n right: 12px;\n background: var(--bg-secondary);\n border: 1px solid var(--border-color);\n border-radius: 6px;\n padding: 6px 12px;\n font-size: 12px;\n color: var(--text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: all 0.2s;\n opacity: 0;\n z-index: 10;\n }\n\n .code-block:hover .copy-btn {\n opacity: 1;\n }\n\n .copy-btn:hover {\n background: var(--text-color);\n color: white;\n border-color: var(--text-color);\n }\n\n .copy-btn.copied {\n background: var(--success-color);\n color: white;\n border-color: var(--success-color);\n }\n\n .copy-btn svg {\n width: 14px;\n height: 14px;\n }\n\n pre {\n background: var(--code-bg);\n border-radius: 12px;\n padding: 20px 24px;\n padding-right: 100px;\n overflow-x: auto;\n margin: 20px 0;\n border: 1px solid var(--border-color);\n }\n\n code {\n font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;\n font-size: 14px;\n line-height: 1.6;\n }\n\n p code, li code {\n background: var(--code-bg);\n padding: 2px 8px;\n border-radius: 4px;\n font-size: 14px;\n }\n\n /* Tables */\n .table-wrapper {\n overflow-x: auto;\n margin: 20px 0;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n background: var(--bg-secondary);\n border-radius: 12px;\n overflow: hidden;\n border: 1px solid var(--border-color);\n }\n\n th {\n background: var(--code-bg);\n padding: 14px 16px;\n text-align: left;\n font-weight: 600;\n font-size: 14px;\n border-bottom: 1px solid var(--border-color);\n }\n\n td {\n padding: 14px 16px;\n border-bottom: 1px solid var(--border-color);\n font-size: 14px;\n }\n\n tr:last-child td {\n border-bottom: none;\n }\n\n tr:hover {\n background: var(--code-bg);\n }\n\n /* Step Cards */\n .step-card {\n background: var(--bg-secondary);\n border-radius: 12px;\n padding: 24px;\n margin: 20px 0;\n border: 1px solid var(--border-color);\n }\n\n .step-header {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 16px;\n }\n\n .step-num {\n background: var(--text-color);\n color: white;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: 600;\n }\n\n .step-title {\n font-weight: 600;\n font-size: 16px;\n }\n\n /* Chat Example */\n .chat-example {\n background: var(--bg-secondary);\n border-radius: 12px;\n padding: 24px;\n margin: 20px 0;\n border: 1px solid var(--border-color);\n }\n\n .chat-message {\n display: flex;\n gap: 12px;\n margin-bottom: 16px;\n }\n\n .chat-message:last-child {\n margin-bottom: 0;\n }\n\n .chat-avatar {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n flex-shrink: 0;\n }\n\n .chat-avatar.user {\n background: var(--info-color);\n color: white;\n }\n\n .chat-avatar.bot {\n background: var(--accent-color);\n color: white;\n }\n\n .chat-content {\n background: var(--code-bg);\n border-radius: 12px;\n padding: 12px 16px;\n max-width: 80%;\n }\n\n .chat-content.bot {\n background: linear-gradient(135deg, #fef3e8 0%, #fde8dc 100%);\n }\n\n /* Feature Grid */\n .feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 20px;\n margin: 30px 0;\n }\n\n .feature-card {\n background: var(--bg-secondary);\n border-radius: 12px;\n padding: 24px;\n border: 1px solid var(--border-color);\n transition: all 0.2s;\n }\n\n .feature-card:hover {\n border-color: var(--accent-color);\n transform: translateY(-2px);\n }\n\n .feature-icon {\n width: 48px;\n height: 48px;\n background: var(--code-bg);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n font-size: 24px;\n }\n\n .feature-card h4 {\n margin: 0 0 8px;\n font-size: 17px;\n }\n\n .feature-card p {\n margin: 0;\n font-size: 14px;\n }\n\n /* Footer */\n .footer {\n background: var(--bg-secondary);\n border-top: 1px solid var(--border-color);\n padding: 60px 24px;\n }\n\n .footer-inner {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 2fr 1fr 1fr 1fr;\n gap: 60px;\n }\n\n .footer-brand {\n font-family: 'Noto Serif SC', serif;\n }\n\n .footer-brand .logo {\n margin-bottom: 16px;\n }\n\n .footer-brand p {\n color: var(--text-secondary);\n font-size: 14px;\n margin-bottom: 20px;\n }\n\n .social-links {\n display: flex;\n gap: 12px;\n }\n\n .social-links a {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n background: var(--code-bg);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-secondary);\n transition: all 0.2s;\n }\n\n .social-links a:hover {\n background: var(--text-color);\n color: white;\n }\n\n .footer-section h4 {\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 16px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .footer-section a {\n display: block;\n color: var(--text-secondary);\n text-decoration: none;\n font-size: 14px;\n margin-bottom: 10px;\n transition: color 0.2s;\n }\n\n .footer-section a:hover {\n color: var(--accent-color);\n }\n\n .footer-bottom {\n max-width: 1200px;\n margin: 40px auto 0;\n padding-top: 24px;\n border-top: 1px solid var(--border-color);\n text-align: center;\n color: var(--text-secondary);\n font-size: 13px;\n }\n\n /* Responsive */\n @media (max-width: 768px) {\n .navbar-inner {\n height: 56px;\n }\n\n .nav-links {\n display: none;\n }\n\n .hero {\n padding: 100px 20px 60px;\n }\n\n .hero h1 {\n font-size: 32px;\n }\n\n .hero-subtitle {\n font-size: 16px;\n }\n\n .hero-features {\n flex-direction: column;\n gap: 12px;\n }\n\n .info-banner {\n padding: 20px;\n }\n\n .toc {\n padding: 24px;\n }\n\n .section h2 {\n font-size: 24px;\n }\n\n .footer-inner {\n grid-template-columns: 1fr;\n gap: 40px;\n }\n\n /* Always show copy button on mobile */\n .copy-btn {\n opacity: 1;\n }\n\n pre {\n padding-right: 24px;\n padding-top: 50px;\n }\n\n .copy-btn {\n top: 8px;\n right: 8px;\n }\n }\n\n /* Scroll to top */\n .scroll-top {\n position: fixed;\n bottom: 24px;\n right: 24px;\n width: 48px;\n height: 48px;\n background: var(--text-color);\n color: white;\n border: none;\n border-radius: 12px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s;\n z-index: 100;\n }\n\n .scroll-top.visible {\n opacity: 1;\n visibility: visible;\n }\n\n .scroll-top:hover {\n background: var(--accent-color);\n transform: translateY(-2px);\n }\n </style>\n</head>\n<body>\n <!-- Navigation -->\n <nav class=\"navbar\">\n <div class=\"navbar-inner\">\n <a href=\"https://happycapy.ai\" class=\"logo\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\"/>\n <path d=\"M8 14s1.5 2 4 2 4-2 4-2\"/>\n <circle cx=\"9\" cy=\"9\" r=\"1\" fill=\"currentColor\"/>\n <circle cx=\"15\" cy=\"9\" r=\"1\" fill=\"currentColor\"/>\n </svg>\n happycapy\n </a>\n <div class=\"nav-links\">\n <a href=\"https://happycapy.ai/skill-store\">Skill Store</a>\n <a href=\"https://happycapy.ai/pricing\">Pricing</a>\n <a href=\"https://happycapy.ai\" class=\"btn-primary\">Try happycapy</a>\n </div>\n </div>\n </nav>\n\n <!-- Hero Section -->\n <section class=\"hero\">\n <div class=\"hero-content\">\n <h1>轻松打造你的<br>飞书 <span class=\"highlight\">AI</span> 助手</h1>\n <p class=\"hero-subtitle\">\n 借助 HappyCapy 的强大能力,你可以在 <strong>10分钟内</strong> 部署一个属于自己的飞书AI机器人!<br>\n <span style=\"color: var(--accent-color)\">OpenClaw</span> alternative. No setup. No security risks.\n </p>\n\n <div class=\"hero-features\">\n <div class=\"hero-feature\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n 智能对话\n </div>\n <div class=\"hero-feature\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n 群聊总结\n </div>\n <div class=\"hero-feature\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n 定时提醒\n </div>\n <div class=\"hero-feature\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n 联网搜索\n </div>\n </div>\n\n <div class=\"info-banner\">\n <div class=\"info-item\">\n <div class=\"label\">适用人群</div>\n <div class=\"value\">飞书用户 / 团队</div>\n </div>\n <div class=\"info-item\">\n <div class=\"label\">完成时间</div>\n <div class=\"value\">10-15 分钟</div>\n </div>\n <div class=\"info-item\">\n <div class=\"label\">技术要求</div>\n <div class=\"value\">零基础即可</div>\n </div>\n </div>\n\n <div class=\"hero-buttons\">\n <a href=\"#chapter-2\" class=\"btn-primary btn-large\">开始部署</a>\n <a href=\"https://happycapy.ai\" class=\"btn-secondary\">了解 HappyCapy</a>\n </div>\n </div>\n </section>\n\n <!-- Main Content -->\n <main class=\"main-content\">\n <!-- Table of Contents -->\n <div class=\"toc\">\n <h2>目录导航</h2>\n <div class=\"toc-grid\">\n <a href=\"#chapter-1\" class=\"toc-item\">\n <span class=\"toc-num\">1</span>\n <span class=\"toc-text\">准备工作</span>\n </a>\n <a href=\"#chapter-2\" class=\"toc-item\">\n <span class=\"toc-num\">2</span>\n <span class=\"toc-text\">与 HappyCapy 协作生成代码</span>\n </a>\n <a href=\"#chapter-3\" class=\"toc-item\">\n <span class=\"toc-num\">3</span>\n <span class=\"toc-text\">机器人配置规划</span>\n </a>\n <a href=\"#chapter-4\" class=\"toc-item\">\n <span class=\"toc-num\">4</span>\n <span class=\"toc-text\">AI 服务配置</span>\n </a>\n <a href=\"#chapter-5\" class=\"toc-item\">\n <span class=\"toc-num\">5</span>\n <span class=\"toc-text\">沙箱环境部署</span>\n </a>\n <a href=\"#chapter-6\" class=\"toc-item\">\n <span class=\"toc-num\">6</span>\n <span class=\"toc-text\">飞书后台配置</span>\n </a>\n <a href=\"#chapter-7\" class=\"toc-item\">\n <span class=\"toc-num\">7</span>\n <span class=\"toc-text\">如何与机器人对话</span>\n </a>\n <a href=\"#chapter-8\" class=\"toc-item\">\n <span class=\"toc-num\">8</span>\n <span class=\"toc-text\">如何总结群聊消息</span>\n </a>\n <a href=\"#chapter-9\" class=\"toc-item\">\n <span class=\"toc-num\">9</span>\n <span class=\"toc-text\">常见问题排查</span>\n </a>\n </div>\n </div>\n\n <!-- Quick Links -->\n <div class=\"quick-links\">\n <h3>重要链接速查</h3>\n <div class=\"quick-links-grid\">\n <a href=\"https://happycapy.ai\" class=\"quick-link\" target=\"_blank\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <path d=\"M8 14s1.5 2 4 2 4-2 4-2\"/>\n </svg>\n HappyCapy 官网\n </a>\n <a href=\"https://open.feishu.cn\" class=\"quick-link\" target=\"_blank\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/>\n <path d=\"M8 21h8\"/>\n <path d=\"M12 17v4\"/>\n </svg>\n 飞书开放平台\n </a>\n <a href=\"https://console.anthropic.com\" class=\"quick-link\" target=\"_blank\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M12 2L2 7l10 5 10-5-10-5z\"/>\n <path d=\"M2 17l10 5 10-5\"/>\n <path d=\"M2 12l10 5 10-5\"/>\n </svg>\n Claude API 控制台\n </a>\n <a href=\"https://platform.deepseek.com\" class=\"quick-link\" target=\"_blank\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n <path d=\"M21 21l-4.35-4.35\"/>\n </svg>\n Deepseek 平台\n </a>\n </div>\n </div>\n\n <!-- Chapter 1 -->\n <section class=\"section\" id=\"chapter-1\">\n <div class=\"section-header\">\n <span class=\"section-num\">1</span>\n <h2>准备工作</h2>\n </div>\n\n <h3>1.1 你需要准备什么?</h3>\n <p>在开始之前,请确保你有:</p>\n <ul>\n <li><strong>飞书账号</strong> - 有权限创建企业应用(管理员或开发者)</li>\n <li><strong>HappyCapy账号</strong> - 如果还没有,请访问 <a href=\"https://happycapy.ai\" target=\"_blank\">官网注册</a></li>\n <li><strong>15分钟时间</strong> - 跟着教程一步步来</li>\n <li><strong>第三方AI服务API Key</strong> - 用于接入AI能力(详见第4章)</li>\n </ul>\n\n <h3>1.2 暂时不需要准备的</h3>\n <div class=\"feature-grid\">\n <div class=\"feature-card\">\n <div class=\"feature-icon\">💻</div>\n <h4>编程经验</h4>\n <p>Capy 会帮你写代码,你只需要描述需求</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">🖥️</div>\n <h4>服务器</h4>\n <p>HappyCapy 沙箱已经为你准备好了</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">⚙️</div>\n <h4>复杂的配置</h4>\n <p>我们会一步步指导你完成</p>\n </div>\n </div>\n\n <h3>1.3 需要从飞书获取的凭证(稍后获取)</h3>\n <p><strong>飞书应用凭证</strong>(第6章会教你获取):</p>\n <ul>\n <li>App ID(格式:<code>cli_xxxxxxxxxxxx</code>)</li>\n <li>App Secret(一长串密钥)</li>\n </ul>\n\n <div class=\"callout callout-important\">\n <div class=\"callout-title\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <path d=\"M12 16v-4\"/>\n <path d=\"M12 8h.01\"/>\n </svg>\n 重要说明\n </div>\n <p>HappyCapy 内置的 AI 服务不支持直接接入飞书机器人,你需要使用第三方 AI 服务提供商的 API。支持的服务包括:Claude (Anthropic)、Gemini (Google)、Deepseek、通义千问 (阿里云) 等。</p>\n </div>\n </section>\n\n <!-- Chapter 2 -->\n <section class=\"section\" id=\"chapter-2\">\n <div class=\"section-header\">\n <span class=\"section-num\">2</span>\n <h2>与 HappyCapy 协作生成代码</h2>\n </div>\n\n <div class=\"callout callout-success\">\n <div class=\"callout-title\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/>\n <polyline points=\"22 4 12 14.01 9 11.01\"/>\n </svg>\n 这是最重要的一步!\n </div>\n <p>你不需要自己写代码,Capy 会帮你生成所有文件。</p>\n </div>\n\n <h3>2.1 打开 HappyCapy 对话界面</h3>\n <div class=\"step-card\">\n <div class=\"step-header\">\n <span class=\"step-num\">1</span>\n <span class=\"step-title\">登录 HappyCapy</span>\n </div>\n <p>访问 <a href=\"https://happycapy.ai\" target=\"_blank\">happycapy.ai</a> 并登录你的账号</p>\n </div>\n <div class=\"step-card\">\n <div class=\"step-header\">\n <span class=\"step-num\">2</span>\n <span class=\"step-title\">开始新对话</span>\n </div>\n <p>点击「新对话」或选择现有对话,你会看到一个类似 ChatGPT 的对话框</p>\n </div>\n\n <h3>2.2 请求 Capy 生成项目结构</h3>\n <h4>你应该这样说:</h4>\n <pre><code>你好,Capy!我想在HappyCapy沙箱中部署一个飞书机器人,功能要求:\n1. 能够智能对话(使用AI回复消息)\n2. 能够总结群聊消息\n3. 支持在群聊中@机器人\n\n请帮我:\n1. 创建项目目录结构\n2. 生成 package.json 文件\n3. 创建基础的 .env 配置文件模板</code></pre>\n\n <h4>Capy 会回复:</h4>\n <div class=\"chat-example\">\n <div class=\"chat-message\">\n <div class=\"chat-avatar bot\">C</div>\n <div class=\"chat-content bot\">\n <p>好的!我来帮你创建飞书机器人项目。</p>\n <p style=\"margin-top: 12px;\">✅ 已创建项目文件夹<br>\n ✅ 生成 package.json 依赖配置<br>\n ✅ 创建 .env 环境变量模板</p>\n </div>\n </div>\n </div>\n\n <h3>2.3 请求生成核心代码文件</h3>\n <h4>你应该这样说:</h4>\n <pre><code>很好!现在请帮我生成三个核心代码文件:\n\n1. **server.js** - 主服务器文件\n - 需要监听 4000 端口\n - 接收飞书的 webhook 消息\n - 处理消息事件并调用AI回复\n\n2. **feishu.js** - 飞书API封装\n - 包含 token 管理\n - 发送消息功能\n - 获取群聊历史消息\n\n3. **agent.js** - AI对话处理\n - 集成第三方AI API\n - 处理用户消息并生成回复\n\n请为我创建这三个文件,代码要简洁、有注释。</code></pre>\n\n <h3>2.6 暴露公网端口</h3>\n <h4>你应该这样说:</h4>\n <pre><code>服务器启动成功了!现在我需要:\n1. 暴露 4000 端口到公网(使用 /app/export-port.sh)\n2. 获取公网访问地址\n3. 告诉我这个地址,我需要在飞书后台配置</code></pre>\n\n <div class=\"callout callout-warning\">\n <div class=\"callout-title\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/>\n <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/>\n <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n </svg>\n 重要\n </div>\n <p>请复制并保存公网地址!格式类似:<code>https://4000-xxxxxx-preview.happycapy.ai</code><br>你在配置飞书时会用到。</p>\n </div>\n\n <h3>2.9 HappyCapy 协作快速参考</h3>\n <div class=\"table-wrapper\">\n <table>\n <thead>\n <tr>\n <th>你想做什么</th>\n <th>对 Capy 说</th>\n <th>Capy 会做</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>创建项目</td>\n <td>\"创建飞书机器人项目,包含对话和总结功能\"</td>\n <td>生成项目结构、所有代码文件</td>\n </tr>\n <tr>\n <td>配置环境</td>\n <td>\"帮我配置.env文件,我的凭证是:[粘贴凭证]\"</td>\n <td>填写配置文件</td>\n </tr>\n <tr>\n <td>启动服务</td>\n <td>\"安装依赖并启动服务器\"</td>\n <td>执行 npm install 和 npm start</td>\n </tr>\n <tr>\n <td>暴露端口</td>\n <td>\"暴露4000端口到公网\"</td>\n <td>执行 export-port 并返回 URL</td>\n </tr>\n <tr>\n <td>解决报错</td>\n <td>\"报错了:[粘贴错误],请帮我修复\"</td>\n <td>分析错误并给出解决方案</td>\n </tr>\n </tbody>\n </table>\n </div>\n </section>\n\n <!-- Chapter 4 -->\n <section class=\"section\" id=\"chapter-4\">\n <div class=\"section-header\">\n <span class=\"section-num\">4</span>\n <h2>AI 服务配置</h2>\n </div>\n\n <h3>4.1 支持的 AI 服务提供商</h3>\n <div class=\"table-wrapper\">\n <table>\n <thead>\n <tr>\n <th>服务商</th>\n <th>特点</th>\n <th>推荐场景</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><strong>Claude (Anthropic)</strong></td>\n <td>对话质量高、安全可控</td>\n <td>企业级应用、高质量对话</td>\n </tr>\n <tr>\n <td><strong>Gemini (Google)</strong></td>\n <td>速度快、免费额度高</td>\n <td>日常对话、成本敏感场景</td>\n </tr>\n <tr>\n <td><strong>Deepseek</strong></td>\n <td>性价比高、国内访问快</td>\n <td>国内用户、高频调用</td>\n </tr>\n <tr>\n <td><strong>通义千问 (阿里云)</strong></td>\n <td>中文理解优秀、合规安全</td>\n <td>中文场景、国内企业</td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <h3>4.2 Claude (Anthropic) API 配置</h3>\n <h4>获取 API Key</h4>\n <ol>\n <li>访问 <a href=\"https://console.anthropic.com\" target=\"_blank\">Anthropic Console</a></li>\n <li>登录或注册账号</li>\n <li>进入「Settings」→「API Keys」</li>\n <li>点击「Create Key」创建新的 API Key</li>\n <li>复制生成的 Key(格式:<code>sk-ant-api03-xxxxxxxxx...</code>)</li>\n </ol>\n\n <h4>.env 配置示例</h4>\n <pre><code># ===== Claude/Anthropic API 配置 =====\n\n# API Key(必需)\nCLAUDE_API_KEY=sk-ant-api03-xxxxxxxxxxxx\n\n# 模型名称(必需)\n# 可选:claude-opus-4-6 / claude-sonnet-4-5 / claude-haiku-3-5\nCLAUDE_MODEL=claude-sonnet-4-5\n\n# ===== 通用配置 =====\nBOT_NAME=我的飞书AI助手\nPORT=4000</code></pre>\n\n <h3>4.4 Deepseek API 配置</h3>\n <h4>.env 配置示例</h4>\n <pre><code># ===== Deepseek API 配置 =====\n# 注意:Deepseek 兼容 OpenAI API 格式\n\n# API Key(必填)\nOPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxx\n\n# API Base URL(必填,固定值)\nOPENAI_BASE_URL=https://api.deepseek.com\n\n# 模型名称(必填)\nOPENAI_MODEL=deepseek-chat\n\n# ===== 通用配置 =====\nBOT_NAME=我的飞书助手\nPORT=4000</code></pre>\n </section>\n\n <!-- Chapter 6 -->\n <section class=\"section\" id=\"chapter-6\">\n <div class=\"section-header\">\n <span class=\"section-num\">6</span>\n <h2>飞书后台配置</h2>\n </div>\n\n <div class=\"callout callout-info\">\n <div class=\"callout-title\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <path d=\"M12 16v-4\"/>\n <path d=\"M12 8h.01\"/>\n </svg>\n 开始之前\n </div>\n <p>请确保:服务器已经启动、已获取公网地址、公网地址可以正常访问</p>\n </div>\n\n <h3>6.1 创建飞书应用</h3>\n <div class=\"step-card\">\n <div class=\"step-header\">\n <span class=\"step-num\">1</span>\n <span class=\"step-title\">访问飞书开放平台</span>\n </div>\n <p>打开 <a href=\"https://open.feishu.cn\" target=\"_blank\">open.feishu.cn</a>,使用飞书账号登录,点击「开发者后台」</p>\n </div>\n <div class=\"step-card\">\n <div class=\"step-header\">\n <span class=\"step-num\">2</span>\n <span class=\"step-title\">创建企业自建应用</span>\n </div>\n <p>点击「创建企业自建应用」,填写应用名称、描述、图标</p>\n </div>\n <div class=\"step-card\">\n <div class=\"step-header\">\n <span class=\"step-num\">3</span>\n <span class=\"step-title\">获取应用凭证</span>\n </div>\n <p>在「凭证与基础信息」中获取 App ID 和 App Secret</p>\n </div>\n\n <h3>6.3 配置事件订阅(关键步骤!)</h3>\n <div class=\"callout callout-important\">\n <div class=\"callout-title\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/>\n <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/>\n <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n </svg>\n 这是最关键的一步!\n </div>\n <p>配置错误会导致机器人收不到消息。</p>\n </div>\n\n <h4>填写请求地址</h4>\n <pre><code>https://4000-xxxxxx-preview.happycapy.ai/webhook/event</code></pre>\n <p>将 <code>4000-xxxxxx-preview.happycapy.ai</code> 替换为你的真实公网地址</p>\n\n <h4>订阅事件类型</h4>\n <p>搜索并添加:<code>im.message.receive_v1</code></p>\n </section>\n\n <!-- Chapter 7 -->\n <section class=\"section\" id=\"chapter-7\">\n <div class=\"section-header\">\n <span class=\"section-num\">7</span>\n <h2>如何与机器人对话</h2>\n </div>\n\n <h3>7.1 添加机器人</h3>\n <ol>\n <li>打开飞书客户端</li>\n <li>点击左上角「+」按钮</li>\n <li>选择「添加机器人」</li>\n <li>搜索你的机器人名称</li>\n <li>点击「添加」</li>\n </ol>\n\n <h3>7.2 对话示例</h3>\n <div class=\"chat-example\">\n <div class=\"chat-message\">\n <div class=\"chat-avatar user\">你</div>\n <div class=\"chat-content\">你好</div>\n </div>\n <div class=\"chat-message\">\n <div class=\"chat-avatar bot\">🤖</div>\n <div class=\"chat-content bot\">\n 你好!我是你的AI助手,有什么可以帮到你吗?<br><br>\n 我可以帮你:<br>\n • 智能对话 - 回答问题、提供建议<br>\n • 群聊总结 - 梳理会议要点<br>\n • 联网搜索 - 获取最新信息\n </div>\n </div>\n </div>\n\n <h3>7.3 在群聊中使用</h3>\n <p>在群聊中,需要 @ 机器人才能触发回复:</p>\n <pre><code>@我的AI助手 帮我总结一下今天的讨论</code></pre>\n </section>\n\n <!-- Chapter 8 -->\n <section class=\"section\" id=\"chapter-8\">\n <div class=\"section-header\">\n <span class=\"section-num\">8</span>\n <h2>如何总结群聊消息</h2>\n </div>\n\n <div class=\"callout callout-success\">\n <div class=\"callout-title\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/>\n </svg>\n 最实用的功能\n </div>\n <p>可以快速梳理群聊讨论,节省阅读时间!</p>\n </div>\n\n <h3>8.1 基础总结</h3>\n <pre><code>@我的AI助手 总结今天的讨论</code></pre>\n\n <h3>8.2 指定时间范围</h3>\n <div class=\"table-wrapper\">\n <table>\n <thead>\n <tr>\n <th>你说</th>\n <th>时间范围</th>\n </tr>\n </thead>\n <tbody>\n <tr><td>\"总结最近1小时\"</td><td>最近1小时的消息</td></tr>\n <tr><td>\"总结今天\"</td><td>今天00:00至现在</td></tr>\n <tr><td>\"总结昨天\"</td><td>昨天全天</td></tr>\n <tr><td>\"总结本周\"</td><td>本周一至今</td></tr>\n </tbody>\n </table>\n </div>\n </section>\n\n <!-- Success Section -->\n <section class=\"section\" style=\"text-align: center; padding: 60px 0;\">\n <div style=\"font-size: 64px; margin-bottom: 24px;\">🎉</div>\n <h2 style=\"font-family: 'Noto Serif SC', serif; font-size: 32px; margin-bottom: 16px;\">恭喜你!</h2>\n <p style=\"font-size: 18px; color: var(--text-secondary); margin-bottom: 32px;\">\n 如果你完成了以上所有步骤,现在你已经拥有了一个功能完整的飞书AI机器人!\n </p>\n <div class=\"hero-buttons\" style=\"margin-bottom: 40px;\">\n <a href=\"https://happycapy.ai\" class=\"btn-primary btn-large\">开始使用 HappyCapy</a>\n </div>\n <div class=\"feature-grid\" style=\"text-align: left;\">\n <div class=\"feature-card\">\n <div class=\"feature-icon\">💬</div>\n <h4>智能对话</h4>\n <p>与机器人自然交流,获取即时回答</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">📝</div>\n <h4>群聊总结</h4>\n <p>快速梳理群聊要点,不错过重要信息</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">🔍</div>\n <h4>联网搜索</h4>\n <p>实时获取最新信息和资讯</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">📄</div>\n <h4>生成文档</h4>\n <p>自动创建飞书云文档</p>\n </div>\n </div>\n </section>\n </main>\n\n <!-- Footer -->\n <footer class=\"footer\">\n <div class=\"footer-inner\">\n <div class=\"footer-brand\">\n <a href=\"https://happycapy.ai\" class=\"logo\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" width=\"28\" height=\"28\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <path d=\"M8 14s1.5 2 4 2 4-2 4-2\"/>\n <circle cx=\"9\" cy=\"9\" r=\"1\" fill=\"currentColor\"/>\n <circle cx=\"15\" cy=\"9\" r=\"1\" fill=\"currentColor\"/>\n </svg>\n happycapy\n </a>\n <p>Building agent-native computer.</p>\n <div class=\"social-links\">\n <a href=\"#\" aria-label=\"Twitter\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"/>\n </svg>\n </a>\n <a href=\"#\" aria-label=\"Discord\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z\"/>\n </svg>\n </a>\n <a href=\"#\" aria-label=\"YouTube\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\"/>\n </svg>\n </a>\n </div>\n </div>\n <div class=\"footer-section\">\n <h4>Community</h4>\n <a href=\"#\">Discord</a>\n <a href=\"#\">Affiliates</a>\n </div>\n <div class=\"footer-section\">\n <h4>Legal</h4>\n <a href=\"#\">Privacy Policy</a>\n <a href=\"#\">Terms of Service</a>\n <a href=\"#\">AI Terms</a>\n </div>\n <div class=\"footer-section\">\n <h4>Resources</h4>\n <a href=\"https://open.feishu.cn/document\" target=\"_blank\">飞书开发文档</a>\n <a href=\"https://docs.anthropic.com\" target=\"_blank\">Claude API 文档</a>\n <a href=\"https://platform.deepseek.com\" target=\"_blank\">Deepseek 文档</a>\n </div>\n </div>\n <div class=\"footer-bottom\">\n <p>© 2026 HAPPYCAPY. All rights reserved.</p>\n <p style=\"margin-top: 8px;\">文档作者:阿成 (<a href=\"https://github.com/AchengBusiness\" style=\"color: var(--accent-color);\">@AchengBusiness</a>)</p>\n </div>\n </footer>\n\n <!-- Scroll to Top Button -->\n <button class=\"scroll-top\" onclick=\"window.scrollTo({top: 0, behavior: 'smooth'})\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"18 15 12 9 6 15\"></polyline>\n </svg>\n </button>\n\n <script>\n // Show/hide scroll to top button\n window.addEventListener('scroll', () => {\n const scrollTop = document.querySelector('.scroll-top');\n if (window.scrollY > 500) {\n scrollTop.classList.add('visible');\n } else {\n scrollTop.classList.remove('visible');\n }\n });\n\n // Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n\n // Add copy buttons to all code blocks\n document.addEventListener('DOMContentLoaded', () => {\n const copyIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path></svg>`;\n const checkIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg>`;\n\n document.querySelectorAll('pre').forEach(pre => {\n // Skip if already wrapped\n if (pre.parentElement.classList.contains('code-block')) return;\n\n // Create wrapper\n const wrapper = document.createElement('div');\n wrapper.className = 'code-block';\n\n // Create copy button\n const copyBtn = document.createElement('button');\n copyBtn.className = 'copy-btn';\n copyBtn.innerHTML = copyIcon + '<span>复制</span>';\n\n // Copy functionality\n copyBtn.addEventListener('click', async () => {\n const code = pre.querySelector('code') ? pre.querySelector('code').textContent : pre.textContent;\n try {\n await navigator.clipboard.writeText(code);\n copyBtn.innerHTML = checkIcon + '<span>已复制</span>';\n copyBtn.classList.add('copied');\n setTimeout(() => {\n copyBtn.innerHTML = copyIcon + '<span>复制</span>';\n copyBtn.classList.remove('copied');\n }, 2000);\n } catch (err) {\n // Fallback for older browsers\n const textArea = document.createElement('textarea');\n textArea.value = code;\n textArea.style.position = 'fixed';\n textArea.style.left = '-9999px';\n document.body.appendChild(textArea);\n textArea.select();\n document.execCommand('copy');\n document.body.removeChild(textArea);\n copyBtn.innerHTML = checkIcon + '<span>已复制</span>';\n copyBtn.classList.add('copied');\n setTimeout(() => {\n copyBtn.innerHTML = copyIcon + '<span>复制</span>';\n copyBtn.classList.remove('copied');\n }, 2000);\n }\n });\n\n // Wrap the pre element\n pre.parentNode.insertBefore(wrapper, pre);\n wrapper.appendChild(pre);\n wrapper.appendChild(copyBtn);\n });\n });\n </script>\n</body>\n</html>\n"}}}} |