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>
|
<main id="chat"></main>
|
||||||
<div id="input-bar">
|
<div id="input-bar">
|
||||||
<button id="interrupt-btn" type="button" style="display:none" title="中断当前生成">⏸</button>
|
<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>
|
<button id="send-btn" type="button">发送</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 任务面板:始终为抽屉式覆盖层(移动端唯一形态) -->
|
||||||
<aside id="task-panel">
|
<aside id="task-panel">
|
||||||
<header>任务面板<button id="task-close" type="button" aria-label="关闭">×</button></header>
|
<header>任务面板<button id="task-close" type="button" aria-label="关闭">×</button></header>
|
||||||
<div id="task-list"></div>
|
<div id="task-list"></div>
|
||||||
|
|||||||
@@ -1,20 +1,21 @@
|
|||||||
/* ===== 全屏应用布局(覆盖 theme.css 的居中卡片页默认) ===== */
|
/* ===== 移动端全屏应用布局(覆盖 theme.css 的居中卡片页默认) ===== */
|
||||||
html, body { height: 100%; }
|
html, body { height: 100%; }
|
||||||
body {
|
body {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100dvh; /* 移动端动态视口高度,规避地址栏遮挡 */
|
height: 100dvh; /* 移动端动态视口高度,规避地址栏遮挡 */
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
overscroll-behavior: none; /* 禁止下拉刷新/回弹手势干扰聊天滚动 */
|
||||||
}
|
}
|
||||||
#app {
|
#app {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100dvh;
|
height: 100dvh;
|
||||||
max-width: 900px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
transition: margin-right 0.25s;
|
|
||||||
}
|
}
|
||||||
|
/* 移动端触控优化:去点击高亮、去双击缩放延迟 */
|
||||||
|
button, textarea { -webkit-tap-highlight-color: transparent; }
|
||||||
|
button { touch-action: manipulation; }
|
||||||
|
|
||||||
/* ===== 顶栏 ===== */
|
/* ===== 顶栏 ===== */
|
||||||
#topbar {
|
#topbar {
|
||||||
@@ -67,6 +68,7 @@ body {
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 14px 12px;
|
padding: 14px 12px;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
|
overscroll-behavior: contain; /* 滚动到底不连带拉动 body */
|
||||||
}
|
}
|
||||||
.msg { margin-bottom: 12px; overflow-wrap: break-word; }
|
.msg { margin-bottom: 12px; overflow-wrap: break-word; }
|
||||||
.msg-user {
|
.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); }
|
#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; }
|
#send-btn:disabled, #interrupt-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||||
|
|
||||||
/* ===== 任务面板:移动端为抽屉式覆盖层 ===== */
|
/* ===== 任务面板:抽屉式覆盖层 ===== */
|
||||||
#task-panel {
|
#task-panel {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0; right: 0; bottom: 0;
|
top: 0; right: 0; bottom: 0;
|
||||||
@@ -204,13 +206,3 @@ body {
|
|||||||
z-index: 99;
|
z-index: 99;
|
||||||
}
|
}
|
||||||
#backdrop.show { opacity: 1; pointer-events: auto; }
|
#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