Files
bili-auto-comment/sidepanel.html
T

347 lines
18 KiB
HTML
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.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { width: 100%; min-height: 100vh; font-family: "PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif; font-size: 13px; color: #222; }
header { background: #00A1D6; color: #fff; padding: 10px 12px; font-weight: bold; font-size: 14px; }
.promo { display:flex; align-items:center; justify-content:space-between; gap:8px;
background: linear-gradient(90deg,#00A1D6,#FB7299); color:#fff; padding: 8px 12px; font-size: 13px; }
.promo a { color:#fff; font-weight:bold; text-decoration:underline; cursor:pointer; }
.sec { padding: 10px 12px; border-bottom: 1px solid #eee; }
.lbl { font-size: 11px; color: #888; margin-bottom: 5px; }
input[type=text], input[type=password], input[type=number], select {
width: 100%; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; background:#fff; }
.row { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.row .unit { font-size: 12px; white-space: nowrap; }
.row input[type=number] { width: 62px; }
button { padding: 6px 10px; border: 1px solid #d9d9d9; background: #fff; border-radius: 4px; cursor: pointer; font-size: 13px; }
button.primary { background: #00A1D6; color: #fff; border-color: #00A1D6; }
button:disabled { opacity: .5; cursor: default; }
#status { font-size: 12px; color: #0a7; padding: 0 12px 8px; min-height: 16px; }
#modeWarn { display:none; font-size: 11px; color: #e67e22; margin-top: 4px; }
#btnStart { width: 100%; height: 42px; font-size: 16px; font-weight: bold; margin-top: 10px; }
#btnStopRun { height: 42px; font-size: 15px; font-weight: bold; color:#fff; background:#444; border-color:#444; flex: 1; }
#runTimer { font-size: 13px; font-weight: bold; color: #FB7299; white-space: nowrap; min-width: 90px; text-align: right; }
.statRow { display:flex; gap:6px; align-items:center; }
.stat { flex:1; text-align:center; background:#f7f7f9; border-radius:6px; padding:5px 2px; }
.stat .n { font-size:16px; font-weight:bold; color:#00A1D6; }
.stat .k { font-size:10px; color:#999; }
.done { padding: 6px 10px; border-bottom: 1px solid #f2f2f2; cursor: pointer; }
.done:hover { background: #f3faff; }
.done .dt { display: block; font-size: 13px; color: #161823; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-decoration: none; font-weight: 500; }
.done .dt::before { content: "✓ "; color: #0a7; font-weight: bold; }
.done .dt:hover { color: #00A1D6; text-decoration: underline; }
.done .dc { font-size: 12px; color: #4a9d6a; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.done .dm { font-size: 10px; color: #aaa; margin-top: 1px; }
#logBox { max-height: 220px; min-height: 64px; overflow-y: auto; background:#14161f; color:#c5fff2;
font-family: Consolas, monospace; font-size: 12px; padding: 8px 10px; border-radius: 6px; line-height: 1.6; }
#logBox .step { color: #ffd76e; }
#logBox .ok { color: #8ef7b7; }
#logBox .fail { color: #ff7b72; }
.foot { font-size: 11px; color: #aaa; padding: 8px 12px; }
</style>
</head>
<body>
<header>B站评论助手</header>
<div id="licSec" style="padding:8px 12px;border-bottom:1px solid #eee;background:#fafbfc">
<div style="display:flex;align-items:center;gap:6px">
<span id="licIcon" style="font-size:14px">⏳</span>
<span id="licText" style="font-size:13px;font-weight:bold;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">授权检查中…</span>
<a id="licBuy" style="color:#e91e63;font-weight:bold;text-decoration:underline;cursor:pointer;white-space:nowrap">购买授权 →</a>
</div>
<div id="licSub" style="font-size:11px;color:#888;margin-top:3px"></div>
<div id="updMsg" style="display:none;font-size:12px;color:#005f8b;background:#e6f6fd;border:1px solid #9ed8f0;border-radius:4px;padding:4px 8px;margin-top:6px"></div>
<div id="licNotice" style="display:none;font-size:12px;color:#7a5c00;background:#fff8e1;border:1px solid #ffe082;border-radius:4px;padding:4px 8px;margin-top:6px;line-height:1.5"></div>
<div id="licActRow" style="display:none;margin-top:6px;align-items:center;gap:6px">
<input type="text" id="cardKey" placeholder="已有卡密?粘贴到这里" style="flex:1">
<button id="btnActivate">激活</button>
<span id="actMsg" style="font-size:12px"></span>
</div>
<div id="licMachine" style="font-size:10px;color:#bbb;margin-top:4px;cursor:pointer" title="点击复制机器码">机器码:<span id="machineIdText">…</span>(点击复制)</div>
</div>
<div class="promo">
<span>🤖 没有模型?注册即送额度</span>
<a id="promoLink">ai.88531.cn 注册 →</a>
</div>
<div class="sec">
<div class="lbl">📊 评论记录</div>
<div class="statRow">
<div class="stat"><div class="n" id="stTotal">0</div><div class="k">总数</div></div>
<div class="stat"><div class="n" id="stWeek">0</div><div class="k">周</div></div>
<div class="stat"><div class="n" id="stToday">0</div><div class="k">今日</div></div>
<button id="btnClearHist" title="清空评论记录">清空</button>
</div>
</div>
<div class="sec">
<div class="lbl">LLM 配置(自动保存,仅 AI 模式需要)</div>
<input type="text" id="baseUrl" placeholder="https://ai.88531.cn/v1">
<input type="password" id="apiKey" placeholder="API Key" style="margin-top:4px">
<input type="text" id="model" placeholder="模型名,默认 mimo-v2.6-flash" style="margin-top:4px">
<div class="row">
<button id="testCfg">测试连接</button>
<span id="testMsg" style="font-size:12px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></span>
</div>
</div>
<div class="sec">
<div class="lbl">搜索与发布</div>
<input type="text" id="keyword" placeholder="搜索关键词,如:效率软件">
<div class="row">
<span class="unit">排序</span>
<select id="order">
<option value="hot">最热门(播放量优先)</option>
<option value="totalrank">综合排序</option>
<option value="click">最多播放</option>
<option value="dm">最多弹幕</option>
<option value="stow">最多收藏</option>
<option value="pubdate">最新发布</option>
</select>
<span class="unit">评论方式</span>
<select id="mode">
<option value="tpl">固定模板</option>
<option value="ai">AI生成</option>
<option value="custom">自定义</option>
</select>
</div>
<textarea id="customText" rows="5" placeholder="自定义评论:每行一条,每行至少3个字(3~200字、不含链接),每条视频随机取一条" style="display:none;width:100%;min-height:110px;margin-top:6px;padding:8px 10px;border:1px solid #ccc;border-radius:4px;font-size:13px;line-height:1.6;resize:vertical;box-sizing:border-box"></textarea>
<div class="row">
<span class="unit">发送方式</span>
<select id="sendMode" style="flex:1">
<option value="human">模拟真人(打开视频页逐字输入)</option>
<option value="api">快速(不跳页直接发送)</option>
</select>
</div>
<div class="row">
<span class="unit">分区</span>
<select id="tid" style="flex:1">
<option value="0">全部分区</option>
<option value="188">科技</option>
<option value="36">知识</option>
<option value="160">生活</option>
<option value="4">游戏</option>
<option value="181">影视</option>
<option value="177">纪录片</option>
<option value="23">电影</option>
<option value="11">电视剧</option>
<option value="3">音乐</option>
<option value="129">舞蹈</option>
<option value="1">动画</option>
<option value="168">国创</option>
<option value="5">娱乐</option>
<option value="119">鬼畜</option>
<option value="155">时尚</option>
<option value="211">美食</option>
<option value="217">动物圈</option>
<option value="223">汽车</option>
<option value="234">运动</option>
</select>
</div>
<div class="row">
<span class="unit">地区</span>
<select id="region" style="flex:1">
<option value="">全部地区</option>
<optgroup label="直辖市">
<option value="北京市">北京市</option>
<option value="上海市">上海市</option>
<option value="天津市">天津市</option>
<option value="重庆市">重庆市</option>
</optgroup>
<optgroup label="省份/自治区">
<option value="河北省">河北省</option>
<option value="山西省">山西省</option>
<option value="辽宁省">辽宁省</option>
<option value="吉林省">吉林省</option>
<option value="黑龙江省">黑龙江省</option>
<option value="江苏省">江苏省</option>
<option value="浙江省">浙江省</option>
<option value="安徽省">安徽省</option>
<option value="福建省">福建省</option>
<option value="江西省">江西省</option>
<option value="山东省">山东省</option>
<option value="河南省">河南省</option>
<option value="湖北省">湖北省</option>
<option value="湖南省">湖南省</option>
<option value="广东省">广东省</option>
<option value="海南省">海南省</option>
<option value="四川省">四川省</option>
<option value="贵州省">贵州省</option>
<option value="云南省">云南省</option>
<option value="陕西省">陕西省</option>
<option value="甘肃省">甘肃省</option>
<option value="青海省">青海省</option>
<option value="台湾省">台湾省</option>
<option value="内蒙古自治区">内蒙古自治区</option>
<option value="广西壮族自治区">广西壮族自治区</option>
<option value="西藏自治区">西藏自治区</option>
<option value="宁夏回族自治区">宁夏回族自治区</option>
<option value="新疆维吾尔自治区">新疆维吾尔自治区</option>
</optgroup>
<optgroup label="特别行政区">
<option value="香港特别行政区">香港</option>
<option value="澳门特别行政区">澳门</option>
</optgroup>
<optgroup label="热门城市">
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="杭州">杭州</option>
<option value="成都">成都</option>
<option value="武汉">武汉</option>
<option value="南京">南京</option>
<option value="苏州">苏州</option>
<option value="西安">西安</option>
<option value="郑州">郑州</option>
<option value="长沙">长沙</option>
<option value="青岛">青岛</option>
<option value="大连">大连</option>
<option value="厦门">厦门</option>
<option value="宁波">宁波</option>
<option value="无锡">无锡</option>
<option value="佛山">佛山</option>
<option value="东莞">东莞</option>
<option value="合肥">合肥</option>
<option value="福州">福州</option>
<option value="济南">济南</option>
<option value="昆明">昆明</option>
<option value="沈阳">沈阳</option>
<option value="哈尔滨">哈尔滨</option>
<option value="长春">长春</option>
<option value="南宁">南宁</option>
<option value="贵阳">贵阳</option>
<option value="太原">太原</option>
<option value="南昌">南昌</option>
<option value="石家庄">石家庄</option>
<option value="兰州">兰州</option>
<option value="乌鲁木齐">乌鲁木齐</option>
<option value="海口">海口</option>
<option value="呼和浩特">呼和浩特</option>
<option value="银川">银川</option>
<option value="西宁">西宁</option>
</optgroup>
</select>
</div>
<div id="modeWarn">⚠ 选了 AI 生成但还没填模型配置,将自动改用固定模板</div>
<div class="row">
<span class="unit">最多</span>
<input type="number" id="maxN" value="3" min="1" max="20">
<span class="unit">条视频,每条间隔 1~2 分钟随机</span>
</div>
<div class="row">
<span class="unit">播放量 ≥</span>
<input type="number" id="minPlay" value="0" min="0">
<span class="unit">次(0 = 不过滤)</span>
</div>
<div class="row" style="margin-top:8px">
<span class="unit">发送内容</span>
<select id="sendWhat" style="flex:1">
<option value="comment" selected>只发评论(默认)</option>
<option value="dm">只发私信,不发评论</option>
<option value="both">评论 + 私信</option>
</select>
</div>
<div id="dmBox" style="margin-top:8px;padding:9px 10px;border:1px dashed #d0a0a0;border-radius:8px;background:#fdf7f7;display:none">
<div style="font-size:12px;color:#7a5c00;background:#fff8e1;border:1px solid #ffe082;border-radius:4px;padding:5px 8px;line-height:1.55">
私信对象:<b>仅本视频评论区里发过评论的人</b>(不含UP主、不含没评论的路人)。<br>
同一用户<b>终身只发一条</b>,已发过的自动跳过。
</div>
<div style="margin-top:7px">
<div class="row">
<span class="unit">每个视频最多</span>
<select id="dmCount">
<option value="1">1 人</option>
<option value="2" selected>2 人</option>
<option value="3">3 人</option>
<option value="5">5 人</option>
</select>
<span class="unit">私信 · 间隔 2~4 分钟</span>
</div>
<textarea id="dmText" rows="3" placeholder="私信内容(选填):留空则复用上方评论内容。建议口语化、不带链接、不群发广告感" style="width:100%;min-height:64px;margin-top:5px;padding:7px 9px;border:1px solid #ccc;border-radius:4px;font-size:13px;line-height:1.6;resize:vertical;box-sizing:border-box"></textarea>
<div style="font-size:11px;color:#c0392b;line-height:1.6;margin-top:5px">
⚠ B站限制:对方未回复/未关注你前<b>最多只能发 1 条</b>;频繁发送会被限流 24 小时甚至禁言。<br>
插件已按此设计:同一用户永不重复、间隔 2~4 分钟、每日建议不超过 10 条。<b>使用风险自负。</b>
</div>
</div>
</div>
<button id="btnStart" class="primary">▶ 开始执行</button>
<div class="row" style="display:none" id="stopRow">
<button id="btnStopRun">⏹ 停止</button>
<span id="runTimer"></span>
</div>
</div>
<div id="status"></div>
<div class="sec">
<div class="lbl">✅ 本次评论成功的视频(实时更新)</div>
<div id="doneList" style="max-height:240px;overflow-y:auto"></div>
</div>
<div class="sec">
<div class="lbl">📋 执行日志(实时滚动,确认正在运行就看这里)</div>
<div id="logBox"></div>
</div>
<div class="sec">
<div class="lbl">⬇ 下载当前B站页面视频(先切到视频页,保存到 下载/B站视频/)</div>
<div class="row">
<span class="unit">清晰度</span>
<select id="dlQuality">
<option value="80">最高可用(登录后1080P)</option>
<option value="64">720P</option>
<option value="32">480P</option>
<option value="16">360P</option>
</select>
<button id="btnDownload">⬇ 下载当前视频</button>
<span id="dlMsg" style="font-size:12px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></span>
</div>
</div>
<div class="sec">
<button id="btnLatest" style="width:100%;height:46px;font-size:16px;font-weight:bold;color:#fff;border:none;border-radius:12px;cursor:pointer;background:linear-gradient(135deg,#00A1D6,#FB7299);box-shadow:0 6px 18px rgba(0,161,214,.28)">
⬇ 获取最新版本 · 使用说明
</button>
<div style="font-size:11px;color:#999;text-align:center;margin-top:5px">点击在新标签页打开官网 dl.88531.cn/bili.html</div>
</div>
<div class="sec">
<details>
<summary style="cursor:pointer;font-size:13px;font-weight:bold;color:#00A1D6">📖 使用说明(点开看功能与用法)</summary>
<div style="font-size:12px;color:#555;line-height:1.85;margin-top:8px">
<b style="color:#222">三步上手</b><br>
① 先登录B站网页版 → 点工具栏图标打开本面板<br>
② 填关键词(可选分区/地区/最热门排序/最多几条),选评论方式 → 点「▶ 开始执行」<br>
③ 想让评论更贴合视频就配 AI 模型(API地址+模型名+密钥,点测试连接验证)
<div style="border-top:1px dashed #ddd;margin:9px 0"></div>
<b style="color:#222">三种评论方式</b><br>
· 固定模板:不用配置,装上就能用<br>
· 自定义:自己写,一行一条随机取,每行 3 字以上<br>
· AI 生成:先读视频的标签/简介/弹幕/热评,再写针对性评论
<div style="border-top:1px dashed #ddd;margin:9px 0"></div>
<b style="color:#222">核心优势</b><br>
· 模拟真人:自动打开视频页→滚到评论区→逐字输入→点发布<br>
· 防风控:每条间隔 1~2 分钟随机,可随时停止<br>
· 不重复:评过的视频自动跳过<br>
· 数据本地:评论内容和记录都只存在你浏览器里<br>
· 下载视频:不受授权限制,最高 1080P
<div style="border-top:1px dashed #ddd;margin:9px 0"></div>
<b style="color:#222">注意事项</b><br>
· 每天建议不超过 10 条,合理控制频率避免账号风控<br>
· 评论不含外链/广告,触发验证码或当日上限会自动停止<br>
· 新版本下载、安装步骤、常见问题都在官网页
</div>
</details>
</div>
<div class="foot">填关键词 → 点「▶ 开始执行」,其余全自动;页面右上角浮层显示每一步</div>
<script src="sidepanel.js"></script>
</body>
</html>