Files
hack/tools/scripts/llm-key-hunter/results/_cache/content/achengbusiness_happycapy-openclaw-feishubot-guide.json
T

1 line
150 KiB
JSON
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{"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>&copy; 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>&copy; 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>&copy; 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"}}}}