feat(static): aibox Web客户端重写为移动端专版

- 移除桌面端媒体查询与限宽居中,任务面板固定为抽屉形态
- 新增 enterkeyhint=send、overscroll-behavior、tap-highlight 等移动端触控优化
- 配合已提交的中断机制改动,协议与 BotOps 保持兼容
This commit is contained in:
qing committed 2026-08-01 14:17:36 +08:00
1 parent 08f737ba2c
commit f319686571
2 files changed
+10 -16

No files matched your search

+3 -1
View File
@@ -20,10 +20,12 @@
<main id="chat"></main>
<div id="input-bar">
<button id="interrupt-btn" type="button" style="display:none" title="中断当前生成">⏸</button>
<textarea id="input" rows="1" placeholder="输入消息,/help 查看命令"></textarea>
<!-- enterkeyhint=send:移动端软键盘回车键显示"发送" -->
<textarea id="input" rows="1" enterkeyhint="send" placeholder="输入消息,/help 查看命令"></textarea>
<button id="send-btn" type="button">发送</button>
</div>
</div>
<!-- 任务面板:始终为抽屉式覆盖层(移动端唯一形态) -->
<aside id="task-panel">
<header>任务面板<button id="task-close" type="button" aria-label="关闭">×</button></header>
<div id="task-list"></div>
+7 -15
View File
@@ -1,20 +1,21 @@
/* ===== 全屏应用布局(覆盖 theme.css 的居中卡片页默认) ===== */
/* ===== 移动端全屏应用布局(覆盖 theme.css 的居中卡片页默认) ===== */
html, body { height: 100%; }
body {
display: block;
padding: 0;
height: 100dvh; /* 移动端动态视口高度,规避地址栏遮挡 */
overflow: hidden;
overscroll-behavior: none; /* 禁止下拉刷新/回弹手势干扰聊天滚动 */
}
#app {
display: flex;
flex-direction: column;
height: 100dvh;
max-width: 900px;
margin: 0 auto;
background: var(--bg);
transition: margin-right 0.25s;
}
/* 移动端触控优化:去点击高亮、去双击缩放延迟 */
button, textarea { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
/* ===== 顶栏 ===== */
#topbar {
@@ -67,6 +68,7 @@ body {
overflow-y: auto;
padding: 14px 12px;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain; /* 滚动到底不连带拉动 body */
}
.msg { margin-bottom: 12px; overflow-wrap: break-word; }
.msg-user {
@@ -157,7 +159,7 @@ body {
#interrupt-btn { flex: none; min-height: 44px; min-width: 44px; padding: 0.45rem 0.7rem; background: var(--error-bg); color: var(--error); }
#send-btn:disabled, #interrupt-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* ===== 任务面板:移动端为抽屉式覆盖层 ===== */
/* ===== 任务面板:抽屉式覆盖层 ===== */
#task-panel {
position: fixed;
top: 0; right: 0; bottom: 0;
@@ -204,13 +206,3 @@ body {
z-index: 99;
}
#backdrop.show { opacity: 1; pointer-events: auto; }
/* ===== 桌面端:任务面板固化为右侧栏 ===== */
@media (min-width: 900px) {
#app { margin-right: 340px; max-width: none; }
#task-panel { transform: none; box-shadow: none; }
#task-toggle, #task-close, #backdrop { display: none; }
/* 桌面端所有对话一律左对齐(移动端保留用户右/AI 左的对话式布局) */
.msg-user, .msg-ai, .msg-reasoning { margin-left: 0; margin-right: 0; }
}