如何写一个脚本自动回复评论

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">智能自动回复 · 评论机器人</title>
    <!-- 干净轻量的样式，模拟社交评论面板 -->
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            background: #f2f4f8;
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 2rem 1rem;
        }
        .card {
            background: white;
            max-width: 680px;
            width: 100%;
            border-radius: 28px;
            box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.2);
            padding: 1.8rem 2rem 2.2rem;
            transition: all 0.1s ease;
        }
        h1 {
            font-size: 1.7rem;
            font-weight: 600;
            letter-spacing: -0.01em;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            color: #1e293b;
            margin-bottom: 0.3rem;
        }
        .subhead {
            font-size: 0.95rem;
            color: #64748b;
            border-left: 4px solid #3b82f6;
            padding-left: 0.8rem;
            margin-bottom: 1.8rem;
            margin-top: 0.2rem;
        }
        .comment-thread {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-bottom: 2rem;
            max-height: 380px;
            overflow-y: auto;
            padding-right: 4px;
        }
        .comment-item {
            display: flex;
            gap: 0.8rem;
            background: #f8fafc;
            padding: 0.9rem 1.2rem;
            border-radius: 20px;
            border: 1px solid #e9edf2;
            transition: 0.1s;
        }
        .comment-item:hover {
            border-color: #cbd5e1;
        }
        .avatar {
            width: 40px;
            height: 40px;
            background: #d1d9e6;
            border-radius: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            color: #1f2937;
            flex-shrink: 0;
        }
        .comment-body {
            flex: 1;
        }
        .comment-author {
            font-weight: 600;
            font-size: 0.9rem;
            color: #0f172a;
            display: inline-block;
            margin-right: 0.5rem;
        }
        .comment-time {
            font-size: 0.7rem;
            color: #94a3b8;
        }
        .comment-text {
            margin: 0.25rem 0 0.35rem;
            font-size: 0.95rem;
            line-height: 1.4;
            word-break: break-word;
            color: #1e293b;
        }
        .reply-badge {
            background: #eef2ff;
            color: #2563eb;
            font-size: 0.7rem;
            font-weight: 500;
            padding: 0.2rem 0.8rem;
            border-radius: 30px;
            display: inline-block;
            border: 1px solid #c7d2fe;
            margin-top: 0.2rem;
        }
        .reply-badge::before {
            content: "↩️ 回复: ";
            opacity: 0.7;
        }
        .empty-feed {
            padding: 2.5rem 1rem;
            text-align: center;
            color: #64748b;
            background: #f1f5f9;
            border-radius: 40px;
            font-size: 0.95rem;
        }
        .control-panel {
            background: #f1f5f9;
            padding: 1.3rem 1.5rem;
            border-radius: 24px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 1rem 0.8rem;
            margin-bottom: 1.2rem;
        }
        .auto-toggle {
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }
        .auto-toggle label {
            font-weight: 500;
            color: #1e293b;
        }
        .switch {
            position: relative;
            display: inline-block;
            width: 46px;
            height: 26px;
            background: #cbd5e1;
            border-radius: 40px;
            cursor: pointer;
            transition: 0.15s;
        }
        .switch.active {
            background: #2563eb;
        }
        .switch::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 40px;
            transition: 0.15s;
            box-shadow: 0 1px 4px rgba(0,0,0,0.15);
        }
        .switch.active::after {
            transform: translateX(20px);
        }
        .incoming-control {
            display: flex;
            align-items: center;
            gap: 0.4rem 0.8rem;
            flex-wrap: wrap;
        }
        .btn {
            background: white;
            border: 1px solid #d1d9e6;
            padding: 0.5rem 1rem;
            border-radius: 40px;
            font-weight: 500;
            font-size: 0.85rem;
            color: #1e293b;
            cursor: pointer;
            transition: 0.1s;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.02);
        }
        .btn-primary {
            background: #2563eb;
            border: 1px solid #2563eb;
            color: white;
        }
        .btn-primary:hover {
            background: #1d4ed8;
        }
        .btn-outline {
            background: transparent;
            border: 1px dashed #94a3b8;
            color: #334155;
        }
        .btn-outline:hover {
            background: #eef2ff;
            border-color: #3b82f6;
        }
        .btn:hover {
            transform: scale(0.97);
        }
        .badge {
            background: #e2e8f0;
            padding: 0.2rem 0.8rem;
            border-radius: 40px;
            font-size: 0.75rem;
            color: #1e293b;
        }
        .counter {
            font-size: 0.8rem;
            color: #475569;
        }
        .footer-note {
            font-size: 0.8rem;
            color: #94a3b8;
            text-align: center;
            margin-top: 1rem;
            border-top: 1px solid #e9edf2;
            padding-top: 0.8rem;
        }
        .footer-note code {
            background: #e9edf2;
            padding: 0.2rem 0.4rem;
            border-radius: 12px;
        }
        /* 滚动条美化 */
        .comment-thread::-webkit-scrollbar {
            width: 4px;
        }
        .comment-thread::-webkit-scrollbar-track {
            background: #eef2f6;
            border-radius: 10px;
        }
        .comment-thread::-webkit-scrollbar-thumb {
            background: #b9c7da;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div class="card">
    <h1>💬 评论小助手</h1>
    <div class="subhead">自动回复机器人 · 可配置规则</div>
    <!-- 评论流 -->
    <div class="comment-thread" id="commentFeed">
        <!-- 由 JavaScript 动态渲染 -->
        <div class="empty-feed">暂无评论，点击下方「模拟新评论」</div>
    </div>
    <!-- 控制栏 -->
    <div class="control-panel">
        <div class="auto-toggle">
            <label for="autoSwitchBtn">🤖 自动回复</label>
            <span id="autoSwitchBtn" class="switch active" role="button" tabindex="0" aria-label="自动回复开关"></span>
            <span class="badge" id="statusBadge">开启</span>
        </div>
        <div class="incoming-control">
            <button class="btn btn-primary" id="simulateCommentBtn">➕ 模拟评论</button>
            <button class="btn btn-outline" id="clearCommentsBtn">🧹 清空</button>
        </div>
    </div>
    <!-- 回复计数 & 自定义回复 -->
    <div style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem;">
        <div class="counter" id="replyCounter">🤖 已自动回复 <span id="replyCountSpan">0</span> 条</div>
        <div style="display: flex; gap: 6px;">
            <input type="text" id="customReplyInput" placeholder="自定义回复内容..." 
                style="border:1px solid #d1d9e6; border-radius:40px; padding:0.4rem 1rem; font-size:0.85rem; background:white; width:180px; outline:none;"/>
            <button class="btn" id="applyCustomReplyBtn" style="background:#e9edf2;">应用</button>
        </div>
    </div>
    <div class="footer-note">
        ⚡ 自动回复开启时，每条新评论都会触发机器人回复 
        <code>当前规则: 关键词/默认</code>
    </div>
</div>
<script>
    (function(){
        // --- 数据 ---
        // 评论池 (初始几条演示)
        let comments = [
            { id: 'c1', author: '小明', text: '这个教程太棒了！', time: '2分钟前', replied: true },
            { id: 'c2', author: '阿花', text: '请问支持批量操作吗？', time: '8分钟前', replied: true },
            { id: 'c3', author: '代码君', text: '写得很好，已收藏', time: '15分钟前', replied: false },
        ];
        let replyCount = comments.filter(c => c.replied).length;
        let autoReplyEnabled = true;   // 开关
        // 自定义回复模板 (默认)
        let customReplyTemplate = '感谢你的评论！ 🙌';
        // 模拟用户数据
        const randomAuthors = ['Lily', 'Mike', 'Zoe', 'Alex', 'Joy', 'Sam', 'River', 'Taylor'];
        const randomMessages = [
            '有没有更详细的例子？',
            '太棒了，解决了我的问题 👍',
            '什么时候更新下一部分？',
            '请问这个兼容IE吗 😂',
            '收藏了，慢慢看',
            '很清晰，谢谢博主',
            '有没有考虑出视频版？',
            '代码可以再优化一下',
            '正好需要这个，感谢！',
            '为什么我运行报错？',
        ];
        // DOM 元素
        const feedEl = document.getElementById('commentFeed');
        const replyCountSpan = document.getElementById('replyCountSpan');
        const autoSwitchBtn = document.getElementById('autoSwitchBtn');
        const statusBadge = document.getElementById('statusBadge');
        const simulateBtn = document.getElementById('simulateCommentBtn');
        const clearBtn = document.getElementById('clearCommentsBtn');
        const customReplyInput = document.getElementById('customReplyInput');
        const applyCustomBtn = document.getElementById('applyCustomReplyBtn');
        // ---- 辅助函数 ----
        function generateId() {
            return 'c_' + Date.now() + '_' + Math.random().toString(36).slice(2,6);
        }
        // 获取当前时间字符串 (相对)
        function getFriendlyTime() {
            return '刚刚';
        }
        // ---- 核心：自动回复逻辑 ----
        function autoReplyForComment(commentText) {
            if (!autoReplyEnabled) return null;   // 开关关闭，不回复
            // 基于关键词的智能回复 (可扩展)
            const lower = commentText.toLowerCase();
            if (lower.includes('谢谢') || lower.includes('感谢') || lower.includes('收藏') || lower.includes('很棒') || lower.includes('太好')) {
                return '谢谢支持！ 😊 有疑问随时留言。';
            } else if (lower.includes('报错') || lower.includes('错误') || lower.includes('bug') || lower.includes('不行')) {
                return '遇到问题请提供详细日志，我们会协助排查 🛠️';
            } else if (lower.includes('视频') || lower.includes('教程') || lower.includes('更新')) {
                return '内容持续制作中，关注不错过更新 🔔';
            } else if (lower.includes('兼容') || lower.includes('ie') || lower.includes('浏览器')) {
                return '目前兼容主流现代浏览器，IE建议升级 🧩';
            } else {
                // 默认回复: 使用自定义模板
                return customReplyTemplate || '收到你的评论，谢谢！ ✨';
            }
        }
        // ---- 渲染评论列表 ----
        function renderComments() {
            if (comments.length === 0) {
                feedEl.innerHTML = `<div class="empty-feed">📭 暂无评论，点击「模拟新评论」添加</div>`;
                return;
            }
            let html = '';
            comments.forEach(c => {
                const avatarLetter = c.author.charAt(0).toUpperCase();
                const replyBadge = c.replied 
                    ? `<div class="reply-badge">${c.repliedText || '机器人已回复'}</div>` 
                    : '';
                html += `
                    <div class="comment-item" data-comment-id="${c.id}">
                        <div class="avatar">${avatarLetter}</div>
                        <div class="comment-body">
                            <div>
                                <span class="comment-author">${c.author}</span>
                                <span class="comment-time">${c.time}</span>
                            </div>
                            <div class="comment-text">${c.text}</div>
                            ${replyBadge}
                        </div>
                    </div>
                `;
            });
            feedEl.innerHTML = html;
            // 更新回复计数
            replyCount = comments.filter(c => c.replied).length;
            replyCountSpan.textContent = replyCount;
        }
        // ---- 添加新评论 (模拟) ----
        function addComment(author, text, time, replied = false, repliedText = '') {
            const newComment = {
                id: generateId(),
                author: author,
                text: text,
                time: time || getFriendlyTime(),
                replied: replied,
                repliedText: repliedText || '',
            };
            // 如果自动回复开启，且评论没有被标记为已回复 (新评论)
            if (autoReplyEnabled && !replied) {
                const replyContent = autoReplyForComment(text);
                if (replyContent) {
                    newComment.replied = true;
                    newComment.repliedText = replyContent;
                }
            }
            comments.push(newComment);
            renderComments();
            // 滚动到底部 (最新评论)
            setTimeout(() => {
                feedEl.scrollTop = feedEl.scrollHeight;
            }, 30);
        }
        // ---- 模拟一条随机评论 ----
        function simulateRandomComment() {
            const author = randomAuthors[Math.floor(Math.random() * randomAuthors.length)];
            const text = randomMessages[Math.floor(Math.random() * randomMessages.length)];
            // 10%几率生成自定义文本，更真实
            const useCustom = Math.random() < 0.2;
            const finalText = useCustom ? `请问${customReplyTemplate.slice(0, 12)}可以吗？` : text;
            addComment(author, finalText, getFriendlyTime(), false);
        }
        // ---- 清空所有评论 ----
        function clearAllComments() {
            if (comments.length === 0) return;
            comments = [];
            renderComments();
        }
        // ---- 切换自动回复 ----
        function toggleAutoReply() {
            autoReplyEnabled = !autoReplyEnabled;
            // 更新 UI
            autoSwitchBtn.classList.toggle('active', autoReplyEnabled);
            statusBadge.textContent = autoReplyEnabled ? '开启' : '关闭';
            // 对现有未回复评论 批量回复 (如果开启)
            if (autoReplyEnabled) {
                let changed = false;
                comments.forEach(c => {
                    if (!c.replied) {
                        const reply = autoReplyForComment(c.text);
                        if (reply) {
                            c.replied = true;
                            c.repliedText = reply;
                            changed = true;
                        }
                    }
                });
                if (changed) {
                    renderComments();
                }
            }
        }
        // ---- 应用自定义回复 ----
        function applyCustomReply() {
            const raw = customReplyInput.value.trim();
            if (raw === '') {
                // 恢复默认
                customReplyTemplate = '感谢你的评论！ 🙌';
                customReplyInput.placeholder = '已重置为默认';
                customReplyInput.value = '';
            } else {
                customReplyTemplate = raw;
                // 闪烁提示
                customReplyInput.placeholder = '✅ 已应用';
                setTimeout(() => {
                    customReplyInput.placeholder = '自定义回复内容...';
                }, 1200);
            }
            // 如果自动回复开启，刷新所有未回复评论？ (谨慎: 只对新评论有效)
            // 但为了体验，提示用户
            if (autoReplyEnabled) {
                // 可选项：重跑一次自动回复
                let updated = false;
                comments.forEach(c => {
                    if (!c.replied) {
                        const reply = autoReplyForComment(c.text);
                        if (reply) {
                            c.replied = true;
                            c.repliedText = reply;
                            updated = true;
                        }
                    }
                });
                if (updated) {
                    renderComments();
                }
            }
        }
        // ---- 初始化 + 事件绑定 ----
        function init() {
            // 初始渲染
            // 补全初始评论的repliedText
            comments.forEach(c => {
                if (c.replied && !c.repliedText) {
                    c.repliedText = autoReplyForComment(c.text) || '感谢评论！';
                }
            });
            renderComments();
            replyCountSpan.textContent = comments.filter(c => c.replied).length;
            // 开关
            autoSwitchBtn.addEventListener('click', toggleAutoReply);
            // 模拟评论
            simulateBtn.addEventListener('click', simulateRandomComment);
            // 清空
            clearBtn.addEventListener('click', clearAllComments);
            // 应用自定义回复
            applyCustomBtn.addEventListener('click', applyCustomReply);
            customReplyInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    applyCustomReply();
                }
            });
            // 额外: 预置自定义输入框占位
            customReplyInput.placeholder = '自定义回复...';
        }
        init();
    })();
</script>
</body>
</html>

自动回复机制与交互

您可以开启或关闭自动回复，并自定义回复内容,它的核心逻辑是模拟真实评论环境并智能响应。

• 智能回复规则：机器人会根据评论中的关键词（如“谢谢”、“报错”）自动匹配预设的回复模板,您也可以在下方的输入框中设置统一的默认回复内容。
• 模拟与测试：点击“模拟评论”按钮，系统会随机生成新评论，并触发自动回复，您可以通过“清空”按钮重置对话,方便测试不同规则。
• 状态监控：控制面板清晰显示自动回复的开启/关闭状态，并统计已自动回复的评论总数,让您对机器人的工作效果一目了然。