nonebot-plugin-botui 0.1.0__py3-none-any.whl

nonebot_plugin_botui/static/index.html

@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="dark">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="color-scheme" content="dark light">
+  <meta name="referrer" content="no-referrer">
+  <title>BotUI · 消息控制台</title>
+  <base href="./">
+  <link rel="stylesheet" href="./static/app.css">
+</head>
+<body>
+  <!-- 应用外壳：两栏布局，窄屏下由 JS 切换 data-pane 决定显示哪一栏 -->
+  <div class="app" id="app" data-pane="sidebar">
+
+    <!-- ============ 左侧边栏 ============ -->
+    <aside class="sidebar" id="sidebar">
+      <header class="sidebar-head">
+        <div class="sidebar-title-row">
+          <span class="brand">
+            <span class="brand-mark" aria-hidden="true"></span>
+            <span class="brand-text">BotUI</span>
+          </span>
+          <button class="icon-btn" id="themeBtn" type="button" title="切换主题" aria-label="切换主题">
+            <svg class="ico-sun" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.6v2.2M12 19.2v2.2M2.6 12h2.2M19.2 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M18.7 5.3l-1.6 1.6M6.9 17.1l-1.6 1.6"/></svg>
+            <svg class="ico-moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.2A8.2 8.2 0 0 1 9.8 4 8.4 8.4 0 1 0 20 14.2z"/></svg>
+          </button>
+        </div>
+        <div class="search-wrap">
+          <svg class="search-ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6.2"/><path d="M15.6 15.6L21 21"/></svg>
+          <input type="search" id="searchInput" class="search-input" placeholder="搜索会话 / 群号 / 消息" autocomplete="off" spellcheck="false" aria-label="搜索会话或消息">
+          <button class="search-clear" id="searchClear" type="button" aria-label="清空搜索" hidden>✕</button>
+        </div>
+        <div class="search-tabs" id="searchTabs" hidden role="tablist" aria-label="搜索范围">
+          <button class="search-tab active" id="tabChats" type="button" role="tab" aria-selected="true">会话</button>
+          <button class="search-tab" id="tabMsgs" type="button" role="tab" aria-selected="false">消息</button>
+        </div>
+      </header>
+
+      <div class="chat-list" id="chatList" role="list" aria-label="会话列表"></div>
+
+      <!-- 消息搜索结果：只在「消息」标签下显示，点一条直接跳到该会话并定位 -->
+      <div class="msg-results" id="msgResults" hidden role="list" aria-label="消息搜索结果"></div>
+
+      <footer class="sidebar-foot">
+        <div class="conn-row">
+          <span class="dot dot-idle" id="connDot" aria-hidden="true"></span>
+          <span class="conn-text" id="connText">正在连接…</span>
+        </div>
+        <div class="conn-meta" id="connMeta"></div>
+      </footer>
+    </aside>
+
+    <!-- ============ 右侧会话区 ============ -->
+    <main class="chat-pane" id="chatPane">
+      <header class="chat-head" id="chatHead">
+        <button class="icon-btn back-btn" id="backBtn" type="button" title="返回会话列表" aria-label="返回会话列表">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 5l-7 7 7 7"/></svg>
+        </button>
+        <div class="head-avatar" id="headAvatar"></div>
+        <div class="head-main">
+          <div class="head-name-row">
+            <span class="head-name" id="headName">未选择会话</span>
+            <button class="icon-btn head-rename" id="headRenameBtn" type="button" title="设置会话备注" aria-label="设置会话备注" hidden>
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20h4l10-10-4-4L4 16v4z"/><path d="M13.5 6.5l4 4"/></svg>
+            </button>
+            <span class="badge" id="headKind" hidden></span>
+          </div>
+          <div class="head-sub" id="headSub">从左侧选择一个会话开始查看消息</div>
+        </div>
+        <button class="icon-btn" id="reloadBtn" type="button" title="重新加载消息" aria-label="重新加载消息">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 12a8 8 0 1 1-2.6-5.9"/><path d="M20.2 4.4v4.2H16"/></svg>
+        </button>
+
+        <!-- 设置：缓存管理（本地缓存占用 / 清理），入口在右上角 -->
+        <button class="icon-btn" id="settingsBtn" type="button" title="设置" aria-label="设置" aria-haspopup="dialog">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3.2"/><path d="M12 2.8v2.4M12 18.8v2.4M2.8 12h2.4M18.8 12h2.4M5.5 5.5l1.7 1.7M16.8 16.8l1.7 1.7M18.5 5.5l-1.7 1.7M7.2 16.8l-1.7 1.7"/></svg>
+        </button>
+
+        <!-- 机器人切换器：列出所有连接过的机器人，在线的标「在线」，会话按机器人区分 -->
+        <div class="bot-switch" id="botSwitch">
+          <button class="bot-btn" id="botBtn" type="button" aria-haspopup="true" aria-expanded="false" title="切换机器人">
+            <span class="dot dot-idle" id="botDot" aria-hidden="true"></span>
+            <span class="bot-btn-name" id="botBtnName">选择机器人</span>
+            <svg class="bot-caret" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
+          </button>
+          <div class="bot-menu" id="botMenu" hidden role="menu" aria-label="选择机器人"></div>
+        </div>
+      </header>
+
+      <div class="msg-area">
+        <div class="msg-viewport" id="msgViewport">
+          <div class="msg-list" id="msgList"></div>
+        </div>
+        <button class="new-msg-btn" id="newMsgBtn" type="button" hidden></button>
+      </div>
+
+      <footer class="composer" id="composer">
+        <div class="composer-bar" id="replyBar" hidden>
+          <span class="bar-label" id="replyBarLabel"></span>
+          <button class="bar-close" id="replyBarClose" type="button" aria-label="取消回复">✕</button>
+        </div>
+        <div class="pending-at" id="pendingAt" hidden></div>
+        <div class="pending-files" id="pendingFiles" hidden></div>
+        <div class="composer-row">
+          <button class="composer-tool" id="atBtn" type="button" title="提及成员（@）">@</button>
+          <button class="composer-tool" id="fileBtn" type="button" title="发送图片 / 文件">＋</button>
+          <textarea id="composerInput" class="composer-input" rows="1" placeholder="输入消息，Enter 发送，Shift+Enter 换行" aria-label="消息输入框"></textarea>
+          <button class="send-btn" id="sendBtn" type="button">发送</button>
+        </div>
+        <div class="composer-hint" id="composerHint"></div>
+        <input type="file" id="filePicker" multiple hidden aria-hidden="true">
+      </footer>
+    </main>
+  </div>
+
+  <!-- 拖拽文件到页面任意位置即可添加附件 -->
+  <div class="drop-overlay" id="dropOverlay" hidden>
+    <div class="drop-overlay-card">松开即可添加附件（图片 / 文件）</div>
+  </div>
+
+  <!-- 图片灯箱：点击图片查看大图，点击任意处或 Esc 关闭 -->
+  <div class="lightbox" id="lightbox" hidden>
+    <img id="lightboxImg" alt="图片预览">
+    <div class="lightbox-tip">点击任意位置或按 Esc 关闭</div>
+  </div>
+
+  <!-- 文件在线预览：文本 / 图片 / PDF / 音视频 / 合并转发 -->
+  <div class="file-viewer" id="fileViewer" hidden role="dialog" aria-modal="true" aria-labelledby="fileViewerTitle">
+    <div class="file-card">
+      <header class="file-head">
+        <div class="file-head-main">
+          <h2 class="file-title" id="fileViewerTitle">文件预览</h2>
+          <p class="file-meta" id="fileViewerMeta"></p>
+        </div>
+        <a class="file-action" id="fileViewerSave" href="#" download>下载</a>
+        <button class="file-action" id="fileViewerClose" type="button">关闭</button>
+      </header>
+      <div class="file-body" id="fileViewerBody"></div>
+    </div>
+  </div>
+
+  <!-- 消息右键菜单 -->
+  <div class="ctx-menu" id="ctxMenu" hidden role="menu"></div>
+
+  <!-- 备注（别名）编辑弹窗：给会话 / 成员 / 机器人起一个认得出的名字 -->
+  <div class="alias" id="aliasDialog" hidden role="dialog" aria-modal="true" aria-labelledby="aliasTitle">
+    <div class="alias-card">
+      <h2 class="alias-title" id="aliasTitle">设置备注</h2>
+      <p class="alias-desc" id="aliasDesc">备注只影响界面显示，不会写入聊天记录。</p>
+      <input type="text" class="alias-input" id="aliasInput" maxlength="64" autocomplete="off" spellcheck="false" aria-label="备注">
+      <div class="alias-actions">
+        <button class="settings-btn" id="aliasClear" type="button">清除备注</button>
+        <button class="settings-btn primary" id="aliasSave" type="button">保存</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 设置面板：目前只有本地缓存管理，后续设置项继续往里加 -->
+  <div class="settings" id="settings" hidden role="dialog" aria-modal="true" aria-labelledby="settingsTitle">
+    <div class="settings-card">
+      <header class="settings-head">
+        <h2 class="settings-title" id="settingsTitle">设置</h2>
+        <button class="file-action" id="settingsClose" type="button">关闭</button>
+      </header>
+      <div class="settings-body">
+        <section class="settings-section">
+          <div class="settings-section-head">
+            <h3 class="settings-section-title">新消息通知</h3>
+            <span class="settings-badge" id="notifyState">已关闭</span>
+          </div>
+          <p class="settings-desc">
+            收到新消息时弹出系统通知（需浏览器授权）。页面已聚焦在当前会话时不会打扰，
+            自己发出的消息也不会提醒。
+          </p>
+          <label class="settings-switch">
+            <input type="checkbox" id="notifyToggle">
+            <span class="switch-track" aria-hidden="true"></span>
+            <span class="switch-text">开启网页通知</span>
+          </label>
+          <label class="settings-switch">
+            <input type="checkbox" id="notifySound">
+            <span class="switch-track" aria-hidden="true"></span>
+            <span class="switch-text">通知提示音</span>
+          </label>
+        </section>
+
+        <section class="settings-section">
+          <div class="settings-section-head">
+            <h3 class="settings-section-title">本地缓存</h3>
+            <span class="settings-badge" id="cacheState">—</span>
+          </div>
+          <p class="settings-desc">
+            机器人收到的图片与文件会自动下载到本地，之后即使原链接失效也能查看。
+            未被聊天记录引用的资源会按保留时间自动回收。
+          </p>
+          <div class="cache-stats" id="cacheStats"></div>
+          <div class="cache-actions">
+            <button class="settings-btn" id="cacheRefresh" type="button">刷新</button>
+            <button class="settings-btn" id="cacheClearOrphans" type="button">清理未引用</button>
+            <button class="settings-btn" id="cacheClearImages" type="button">清理图片</button>
+            <button class="settings-btn" id="cacheClearFiles" type="button">清理文件</button>
+            <button class="settings-btn danger" id="cacheClearAll" type="button">清空缓存</button>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+
+  <!-- @ 成员选择菜单：列出该会话记录到过的成员，供点选 -->
+  <div class="at-menu" id="atMenu" hidden role="menu" tabindex="-1" aria-label="选择要提及的成员"></div>
+
+  <!-- 令牌输入页：仅在需要鉴权且本地无令牌时显示 -->
+  <div class="gate" id="gate" hidden>
+    <div class="gate-card">
+      <div class="gate-logo" aria-hidden="true"></div>
+      <h1 class="gate-title">BotUI 消息控制台</h1>
+      <p class="gate-desc" id="gateDesc">该服务已开启访问令牌校验，请输入令牌后继续。</p>
+      <form class="gate-form" id="gateForm" autocomplete="off">
+        <input type="password" class="gate-input" id="gateInput" placeholder="请输入访问令牌" autocomplete="off" spellcheck="false" aria-label="访问令牌">
+        <button type="submit" class="gate-submit" id="gateSubmit">保存</button>
+      </form>
+      <p class="gate-tip">令牌仅保存在当前浏览器的 localStorage 中</p>
+    </div>
+  </div>
+
+  <!-- 轻量提示条 -->
+  <div class="toast" id="toast" hidden></div>
+
+  <script src="./static/app.js"></script>
+</body>
+</html>