mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-08 05:55:34 +08:00
优化进度条组件,支持根据内容调整高度
This commit is contained in:
parent
1e5a4c1ff5
commit
7635f1ac64
@ -272,7 +272,7 @@ async function chat(content, apiConfig, options = {}) {
|
||||
if (processBar) {
|
||||
quickcommand.updateProcessBar(
|
||||
{
|
||||
text: fullResponse, // 只显示最后100个字符,避免内容过长
|
||||
text: fullResponse,
|
||||
},
|
||||
processBar
|
||||
);
|
||||
|
@ -409,7 +409,10 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
processBarInner.style.width = `${value}%`;
|
||||
}
|
||||
if (text) {
|
||||
document.getElementById("process-text").textContent = text;
|
||||
const processText = document.getElementById("process-text");
|
||||
processText.innerHTML = text;
|
||||
processText.scrollTop = processText.scrollHeight;
|
||||
ipcRenderer.sendTo(parentId, "dialog-ready", calculateHeight());
|
||||
}
|
||||
});
|
||||
|
||||
@ -425,9 +428,11 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
(buttonBar.style.display !== "none" ? buttonBar.offsetHeight : 0);
|
||||
|
||||
const maxHeight = dialogType === "select" ? 620 : 520;
|
||||
// 进度条的最大高度通过.process-text的max-height限制
|
||||
const minHeight = dialogType === "process" ? 60 : 100;
|
||||
|
||||
// 确保高度在最小值和最大值之间
|
||||
return Math.min(Math.max(totalHeight, 100), maxHeight);
|
||||
return Math.min(Math.max(totalHeight, minHeight), maxHeight);
|
||||
};
|
||||
|
||||
// 确定按钮点击事件
|
||||
|
@ -328,7 +328,7 @@ const showProcessBar = async (options = {}) => {
|
||||
throw new Error("onPause 和 onResume 必须同时配置");
|
||||
}
|
||||
|
||||
const windowWidth = 250;
|
||||
const windowWidth = 350;
|
||||
const windowHeight = 60;
|
||||
|
||||
// 计算窗口位置
|
||||
@ -364,10 +364,25 @@ const showProcessBar = async (options = {}) => {
|
||||
isLoading: value === undefined, // 当不传value时显示加载动画
|
||||
});
|
||||
|
||||
// 监听窗口准备就绪
|
||||
ipcRenderer.once("dialog-ready", () => {
|
||||
const dialogReadyHandler = (event, height) => {
|
||||
// 获取当前窗口位置
|
||||
const bounds = UBrowser.getBounds();
|
||||
// 调整y坐标,保持窗口底部不变
|
||||
const y = Math.round(bounds.y - (height - bounds.height));
|
||||
// 确保坐标和尺寸都是有效的整数
|
||||
const newBounds = {
|
||||
x: Math.round(bounds.x),
|
||||
y: Math.max(0, y), // 确保不会超出屏幕顶部
|
||||
width: windowWidth,
|
||||
height: Math.round(height),
|
||||
};
|
||||
// 设置新的位置和大小
|
||||
UBrowser.setBounds(newBounds);
|
||||
UBrowser.setOpacity(1);
|
||||
});
|
||||
};
|
||||
|
||||
// 监听子窗口返回的计算高度
|
||||
ipcRenderer.on("dialog-ready", dialogReadyHandler);
|
||||
|
||||
// 监听对话框结果
|
||||
ipcRenderer.once("dialog-result", (event, result) => {
|
||||
@ -395,6 +410,7 @@ const showProcessBar = async (options = {}) => {
|
||||
onClose();
|
||||
}
|
||||
lastProcessBar = null;
|
||||
ipcRenderer.removeListener("dialog-ready", dialogReadyHandler);
|
||||
UBrowser.destroy();
|
||||
},
|
||||
};
|
||||
|
@ -78,6 +78,7 @@ body {
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-thumb);
|
||||
transition: background-color 0.3s;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* 悬浮时显示滚动条 */
|
||||
@ -584,6 +585,9 @@ textarea:focus {
|
||||
padding: 0;
|
||||
background: var(--button-bg);
|
||||
color: white;
|
||||
min-height: auto;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#process {
|
||||
@ -596,16 +600,14 @@ textarea:focus {
|
||||
.process-text {
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scrollbar-width: none;
|
||||
width: calc(100% - 30px);
|
||||
white-space: pre-wrap;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-right: 2px;
|
||||
width: calc(100% - 15px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.process-text::-webkit-scrollbar {
|
||||
display: none;
|
||||
max-height: 250px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.process-bar {
|
||||
@ -655,20 +657,6 @@ textarea:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 添加按钮区域的渐变遮罩 */
|
||||
.process-buttons::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
/* 对应#process的padding-right */
|
||||
top: -6px;
|
||||
/* 对应#process的padding-top */
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
background: linear-gradient(to right, transparent, var(--button-bg) 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 进度条关闭按钮 */
|
||||
.process-close-btn {
|
||||
width: 16px;
|
||||
|
Loading…
x
Reference in New Issue
Block a user