v1.2.0: 优化移动端输入与代码块显示体验
修复代码块长内容导致的页面横向溢出,并将移动端回车默认行为调整为换行,避免误触发送,提升手机端可用性。
This commit is contained in:
@@ -20,6 +20,14 @@ https://github.com/ZgDaniel/cc-web 给我装!
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
## 更新记录
|
||||||
|
|
||||||
|
- **v1.2**
|
||||||
|
- 修复消息中包含代码块时可能触发的页面横向溢出问题:窗口不再被长代码撑宽,代码块可在块内横向滚动。
|
||||||
|
- 优化移动端输入体验:手机浏览器回车键默认换行,不再直接发送消息;消息发送改为手动点击发送按钮。
|
||||||
|
- **v1.1**
|
||||||
|
- 增加 Windows 环境下 Claude Code CLI 的兼容支持,完善本地部署与启动体验。
|
||||||
|
|
||||||
## 功能特性
|
## 功能特性
|
||||||
|
|
||||||
- **超轻量** — 后端性能占用少,前端通过web访问,不易被杀后台
|
- **超轻量** — 后端性能占用少,前端通过web访问,不易被杀后台
|
||||||
|
|||||||
@@ -807,6 +807,10 @@
|
|||||||
msgInput.style.height = Math.min(msgInput.scrollHeight, max) + 'px';
|
msgInput.style.height = Math.min(msgInput.scrollHeight, max) + 'px';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isMobileInputMode() {
|
||||||
|
return window.matchMedia('(max-width: 768px), (pointer: coarse)').matches;
|
||||||
|
}
|
||||||
|
|
||||||
// --- Event Listeners ---
|
// --- Event Listeners ---
|
||||||
loginForm.addEventListener('submit', (e) => {
|
loginForm.addEventListener('submit', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@@ -864,6 +868,14 @@
|
|||||||
if (e.key === 'Escape') { hideCmdMenu(); return; }
|
if (e.key === 'Escape') { hideCmdMenu(); return; }
|
||||||
}
|
}
|
||||||
if (e.key === 'Enter' && !e.shiftKey) {
|
if (e.key === 'Enter' && !e.shiftKey) {
|
||||||
|
if (isMobileInputMode()) {
|
||||||
|
if (!cmdMenu.hidden) {
|
||||||
|
e.preventDefault();
|
||||||
|
selectCmdMenuItem();
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (!cmdMenu.hidden) {
|
if (!cmdMenu.hidden) {
|
||||||
// If menu is open and user presses Enter, select the item
|
// If menu is open and user presses Enter, select the item
|
||||||
|
|||||||
@@ -337,6 +337,7 @@ body {
|
|||||||
.messages {
|
.messages {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -368,6 +369,7 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
max-width: 85%;
|
max-width: 85%;
|
||||||
|
min-width: 0;
|
||||||
animation: fadeIn 0.25s ease;
|
animation: fadeIn 0.25s ease;
|
||||||
}
|
}
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
@@ -396,6 +398,8 @@ body {
|
|||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
line-height: 1.65;
|
line-height: 1.65;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
|
min-width: 0;
|
||||||
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
.msg.user .msg-bubble {
|
.msg.user .msg-bubble {
|
||||||
background: var(--bg-bubble-user);
|
background: var(--bg-bubble-user);
|
||||||
@@ -480,6 +484,7 @@ body {
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
.code-block-header {
|
.code-block-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -504,12 +509,15 @@ body {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
max-width: 100%;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
.code-block-wrapper pre code {
|
.code-block-wrapper pre code {
|
||||||
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
|
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
white-space: pre;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tool calls */
|
/* Tool calls */
|
||||||
@@ -655,6 +663,7 @@ body {
|
|||||||
outline: none;
|
outline: none;
|
||||||
max-height: var(--input-max-height);
|
max-height: var(--input-max-height);
|
||||||
min-height: 24px;
|
min-height: 24px;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
#msg-input::placeholder { color: var(--text-muted); }
|
#msg-input::placeholder { color: var(--text-muted); }
|
||||||
.send-btn, .abort-btn {
|
.send-btn, .abort-btn {
|
||||||
|
|||||||
@@ -140,10 +140,11 @@ function sendNotification(title, content) {
|
|||||||
|
|
||||||
const parsed = new URL(url);
|
const parsed = new URL(url);
|
||||||
const contentType = isFormData ? 'application/x-www-form-urlencoded' : 'application/json';
|
const contentType = isFormData ? 'application/x-www-form-urlencoded' : 'application/json';
|
||||||
const req = https.request(parsed, {
|
const reqOptions = {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: { 'Content-Type': contentType, 'Content-Length': Buffer.byteLength(data) },
|
headers: { 'Content-Type': contentType, 'Content-Length': Buffer.byteLength(data) },
|
||||||
}, (res) => {
|
};
|
||||||
|
const req = https.request(parsed, reqOptions, (res) => {
|
||||||
let body = '';
|
let body = '';
|
||||||
res.on('data', (c) => body += c);
|
res.on('data', (c) => body += c);
|
||||||
res.on('end', () => {
|
res.on('end', () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user