feat(static): aibox Web客户端重写为移动端专版
- 移除桌面端媒体查询与限宽居中,任务面板固定为抽屉形态 - 新增 enterkeyhint=send、overscroll-behavior、tap-highlight 等移动端触控优化 - 配合已提交的中断机制改动,协议与 BotOps 保持兼容
This commit is contained in:
1 parent
08f737ba2c
commit
f319686571
2 files changed
+10
-16
No files matched your search
@@ -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>
|
||||
|
||||
@@ -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; }
|
||||
}
|
||||
Reference in new issue
Block a user