mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-07 13:34:08 +08:00
新增quickcommand.showProcessBar和quickcommand.updateProcessBar接口，支持显示带有暂停、恢复、关闭回调功能的进度条，且可以动态更新进度
This commit is contained in:
fofolee
parent
17cec93767
commit
f09be6533e
@ -357,10 +357,50 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
waitButtonContainer.appendChild(buttonGroup);
|
||||
break;
|
||||
|
||||
case "process":
|
||||
document.getElementById("process").style.display = "block";
|
||||
document.body.classList.add("dialog-process");
|
||||
|
||||
// 设置初始文本和进度
|
||||
document.getElementById("process-text").textContent = config.text;
|
||||
document.getElementById(
|
||||
"process-bar-inner"
|
||||
).style.width = `${config.value}%`;
|
||||
|
||||
// 如果需要显示暂停按钮
|
||||
if (config.showPause) {
|
||||
document.body.classList.add("show-pause");
|
||||
const pauseBtn = document.getElementById("process-pause-btn");
|
||||
let isPaused = false;
|
||||
|
||||
pauseBtn.onclick = () => {
|
||||
isPaused = !isPaused;
|
||||
pauseBtn.classList.toggle("paused", isPaused);
|
||||
ipcRenderer.sendTo(parentId, "process-pause", isPaused);
|
||||
};
|
||||
}
|
||||
|
||||
// 添加关闭按钮点击事件
|
||||
document.getElementById("process-close-btn").onclick = () => {
|
||||
ipcRenderer.sendTo(parentId, "dialog-result", "close");
|
||||
};
|
||||
break;
|
||||
}
|
||||
ipcRenderer.sendTo(parentId, "dialog-ready", calculateHeight());
|
||||
});
|
||||
|
||||
// 监听进度条更新事件
|
||||
ipcRenderer.on("update-process", (event, data) => {
|
||||
const { value, text } = data;
|
||||
if (typeof value === "number") {
|
||||
document.getElementById("process-bar-inner").style.width = `${value}%`;
|
||||
}
|
||||
if (text) {
|
||||
document.getElementById("process-text").textContent = text;
|
||||
}
|
||||
});
|
||||
|
||||
const calculateHeight = () => {
|
||||
const titleBar = document.querySelector(".title-bar");
|
||||
const buttonBar = document.querySelector(".button-bar");
|
||||
|
||||
@ -200,6 +200,47 @@ const showSystemSelectList = async (items, options = {}) => {
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 计算窗口位置
|
||||
* @param {object} options - 配置选项
|
||||
* @param {string} [options.position="bottom-right"] - 窗口位置，可选值：top-left, top-right, bottom-left, bottom-right
|
||||
* @param {number} options.width - 窗口宽度
|
||||
* @param {number} options.height - 窗口高度
|
||||
* @param {number} [options.padding=20] - 边距
|
||||
* @returns {{x: number, y: number}} 窗口位置坐标
|
||||
*/
|
||||
const calculateWindowPosition = (options) => {
|
||||
const { position = "bottom-right", width, height, padding = 20 } = options;
|
||||
|
||||
// 获取主屏幕尺寸
|
||||
const primaryDisplay = utools.getPrimaryDisplay();
|
||||
const { width: screenWidth, height: screenHeight } =
|
||||
primaryDisplay.workAreaSize;
|
||||
|
||||
let x, y;
|
||||
switch (position) {
|
||||
case "top-left":
|
||||
x = padding;
|
||||
y = padding;
|
||||
break;
|
||||
case "top-right":
|
||||
x = screenWidth - width - padding;
|
||||
y = padding;
|
||||
break;
|
||||
case "bottom-left":
|
||||
x = padding;
|
||||
y = screenHeight - height - padding;
|
||||
break;
|
||||
case "bottom-right":
|
||||
default:
|
||||
x = screenWidth - width - padding;
|
||||
y = screenHeight - height - padding;
|
||||
break;
|
||||
}
|
||||
|
||||
return { x, y };
|
||||
};
|
||||
|
||||
/**
|
||||
* 显示一个系统级等待按钮
|
||||
* @param {object} options - 配置选项
|
||||
@ -228,42 +269,11 @@ const showSystemWaitButton = async (options = {}) => {
|
||||
const textWidth = span.offsetWidth;
|
||||
document.body.removeChild(span);
|
||||
|
||||
const dialogOptions = {
|
||||
width: Math.max(textWidth + 32 + (showCancel ? 25 : 0), 80), // 文本宽度 + padding + 取消按钮宽度(如果有)
|
||||
height: 36,
|
||||
opacity: 1,
|
||||
};
|
||||
const width = Math.max(textWidth + 32 + (showCancel ? 25 : 0), 80);
|
||||
const height = 36;
|
||||
|
||||
// 获取主屏幕尺寸
|
||||
const primaryDisplay = utools.getPrimaryDisplay();
|
||||
const { width, height } = primaryDisplay.workAreaSize;
|
||||
|
||||
// 根据position计算窗口位置
|
||||
const padding = 20;
|
||||
let x, y;
|
||||
|
||||
switch (position) {
|
||||
case "top-left":
|
||||
x = padding;
|
||||
y = padding;
|
||||
break;
|
||||
case "top-right":
|
||||
x = width - dialogOptions.width - padding;
|
||||
y = padding;
|
||||
break;
|
||||
case "bottom-left":
|
||||
x = padding;
|
||||
y = height - dialogOptions.height - padding;
|
||||
break;
|
||||
case "bottom-right":
|
||||
default:
|
||||
x = width - dialogOptions.width - padding;
|
||||
y = height - dialogOptions.height - padding;
|
||||
break;
|
||||
}
|
||||
|
||||
dialogOptions.x = x;
|
||||
dialogOptions.y = y;
|
||||
// 计算窗口位置
|
||||
const { x, y } = calculateWindowPosition({ position, width, height });
|
||||
|
||||
return await createDialog(
|
||||
{
|
||||
@ -271,10 +281,171 @@ const showSystemWaitButton = async (options = {}) => {
|
||||
text,
|
||||
showCancel,
|
||||
},
|
||||
dialogOptions
|
||||
{
|
||||
width,
|
||||
height,
|
||||
x,
|
||||
y,
|
||||
opacity: 1,
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
let lastProcessBar = null;
|
||||
|
||||
/**
|
||||
* 显示一个进度条对话框
|
||||
* @param {object} options - 配置选项
|
||||
* @param {string} [options.title="进度"] - 对话框标题
|
||||
* @param {string} [options.text="处理中..."] - 进度条上方的文本
|
||||
* @param {number} [options.value=0] - 初始进度值(0-100)
|
||||
* @param {string} [options.position="bottom-right"] - 进度条位置，可选值：top-left, top-right, bottom-left, bottom-right
|
||||
* @param {Function} [options.onClose] - 关闭按钮点击时的回调函数
|
||||
* @param {Function} [options.onPause] - 暂停按钮点击时的回调函数
|
||||
* @param {Function} [options.onResume] - 恢复按钮点击时的回调函数
|
||||
* @returns {Promise<{id: number, close: Function}>} 返回进度条窗口ID和关闭函数
|
||||
* @throws {Error} 如果只配置了onPause或onResume中的一个会抛出错误
|
||||
*/
|
||||
const showProcessBar = async (options = {}) => {
|
||||
const {
|
||||
title = "进度",
|
||||
text = "处理中...",
|
||||
value = 0,
|
||||
position = "bottom-right",
|
||||
onClose,
|
||||
onPause,
|
||||
onResume,
|
||||
} = options;
|
||||
|
||||
// 校验暂停/恢复回调必须同时配置
|
||||
if ((onPause && !onResume) || (!onPause && onResume)) {
|
||||
throw new Error("onPause 和 onResume 必须同时配置");
|
||||
}
|
||||
|
||||
const windowWidth = 300;
|
||||
const windowHeight = 60;
|
||||
|
||||
// 计算窗口位置
|
||||
const { x, y } = calculateWindowPosition({
|
||||
position,
|
||||
width: windowWidth,
|
||||
height: windowHeight,
|
||||
});
|
||||
|
||||
return new Promise((resolve) => {
|
||||
const UBrowser = createBrowserWindow(
|
||||
"lib/dialog/view.html",
|
||||
{
|
||||
title,
|
||||
width: windowWidth,
|
||||
height: windowHeight,
|
||||
x,
|
||||
y,
|
||||
resizable: false,
|
||||
minimizable: false,
|
||||
maximizable: false,
|
||||
fullscreenable: false,
|
||||
skipTaskbar: true,
|
||||
alwaysOnTop: true,
|
||||
frame: false,
|
||||
opacity: 0,
|
||||
movable: true,
|
||||
webPreferences: {
|
||||
preload: "lib/dialog/controller.js",
|
||||
devTools: utools.isDev(),
|
||||
},
|
||||
},
|
||||
() => {
|
||||
const windowId = UBrowser.webContents.id;
|
||||
|
||||
// 发送配置到子窗口
|
||||
ipcRenderer.sendTo(windowId, "dialog-config", {
|
||||
type: "process",
|
||||
title,
|
||||
text,
|
||||
value,
|
||||
isDark: utools.isDarkColors(),
|
||||
platform: process.platform,
|
||||
showPause: Boolean(onPause && onResume),
|
||||
});
|
||||
|
||||
// 监听窗口准备就绪
|
||||
ipcRenderer.once("dialog-ready", () => {
|
||||
UBrowser.setOpacity(1);
|
||||
});
|
||||
|
||||
// 监听对话框结果
|
||||
ipcRenderer.once("dialog-result", (event, result) => {
|
||||
if (result === "close" && typeof onClose === "function") {
|
||||
onClose();
|
||||
}
|
||||
UBrowser.destroy();
|
||||
});
|
||||
|
||||
// 监听暂停/恢复事件
|
||||
if (onPause && onResume) {
|
||||
ipcRenderer.on("process-pause", (event, isPaused) => {
|
||||
if (isPaused) {
|
||||
onPause();
|
||||
} else {
|
||||
onResume();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const processBar = {
|
||||
id: windowId,
|
||||
close: () => {
|
||||
if (typeof onClose === "function") {
|
||||
onClose();
|
||||
}
|
||||
lastProcessBar = null;
|
||||
UBrowser.destroy();
|
||||
},
|
||||
};
|
||||
|
||||
lastProcessBar = processBar;
|
||||
|
||||
// 返回窗口ID和关闭函数
|
||||
resolve(processBar);
|
||||
}
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新进度条的进度
|
||||
* @param {object} options - 配置选项
|
||||
* @param {number} options.value - 新的进度值(0-100)
|
||||
* @param {string} [options.text] - 新的进度文本
|
||||
* @param {boolean} [options.complete] - 是否完成并关闭进度条
|
||||
* @param {{id: number, close: Function}|undefined} processBar - 进度条对象, 如果不传入则使用上一次创建的进度条
|
||||
* @throws {Error} 如果传入的processBar对象不是有效的进度条对象
|
||||
*/
|
||||
const updateProcessBar = (options = {}, processBar = null) => {
|
||||
if (!processBar) {
|
||||
if (!lastProcessBar) {
|
||||
throw new Error("没有找到已创建的进度条");
|
||||
}
|
||||
processBar = lastProcessBar;
|
||||
}
|
||||
// 校验processBar对象
|
||||
if (
|
||||
typeof processBar !== "object" ||
|
||||
typeof processBar.id !== "number" ||
|
||||
typeof processBar.close !== "function"
|
||||
) {
|
||||
throw new Error("processBar对象格式错误");
|
||||
}
|
||||
|
||||
const { value, text, complete } = options;
|
||||
ipcRenderer.sendTo(processBar.id, "update-process", { value, text });
|
||||
|
||||
if (complete) {
|
||||
processBar.close();
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
showSystemMessageBox,
|
||||
showSystemInputBox,
|
||||
@ -283,4 +454,6 @@ module.exports = {
|
||||
showSystemTextArea,
|
||||
showSystemSelectList,
|
||||
showSystemWaitButton,
|
||||
showProcessBar,
|
||||
updateProcessBar,
|
||||
};
|
||||
|
||||
@ -583,3 +583,145 @@ textarea:focus {
|
||||
#wait-cancel-btn:hover {
|
||||
background-color: var(--wait-btn-hover);
|
||||
}
|
||||
|
||||
/* 进度条对话框样式 */
|
||||
.dialog-process .title-bar,
|
||||
.dialog-process .button-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dialog-process .content-wrapper {
|
||||
padding: 0;
|
||||
background: var(--button-bg);
|
||||
color: white;
|
||||
}
|
||||
|
||||
#process {
|
||||
display: none;
|
||||
padding: 8px 12px;
|
||||
position: relative;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.process-text {
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.process-bar {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.process-bar-inner {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* 进度条按钮容器 */
|
||||
.process-buttons {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 6px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
/* 进度条关闭按钮 */
|
||||
.process-close-btn {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.process-close-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.process-close-btn::before,
|
||||
.process-close-btn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 1px;
|
||||
background-color: white;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.process-close-btn::before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.process-close-btn::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
/* 进度条暂停按钮 */
|
||||
.process-pause-btn {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: none;
|
||||
/* 默认隐藏 */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.process-pause-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 暂停状态（显示两条竖线） */
|
||||
.process-pause-btn::before,
|
||||
.process-pause-btn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
background-color: white;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.process-pause-btn::before {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
|
||||
.process-pause-btn::after {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
/* 播放状态（显示三角形） */
|
||||
.process-pause-btn.paused::before {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: none;
|
||||
border-style: solid;
|
||||
border-width: 6px 0 6px 10px;
|
||||
border-color: transparent transparent transparent white;
|
||||
transform: translateX(1px);
|
||||
}
|
||||
|
||||
.process-pause-btn.paused::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 显示暂停按钮 */
|
||||
.show-pause .process-pause-btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -51,6 +51,18 @@
|
||||
|
||||
<!-- 等待按钮对话框 -->
|
||||
<div id="wait-button"></div>
|
||||
|
||||
<!-- 进度条对话框 -->
|
||||
<div id="process">
|
||||
<div class="process-buttons">
|
||||
<div class="process-pause-btn" id="process-pause-btn"></div>
|
||||
<div class="process-close-btn" id="process-close-btn"></div>
|
||||
</div>
|
||||
<div class="process-text" id="process-text"></div>
|
||||
<div class="process-bar">
|
||||
<div class="process-bar-inner" id="process-bar-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-bar">
|
||||
<button id="cancel-btn">取消</button>
|
||||
|
||||
119
src/plugins/monaco/types/quickcommand.api.d.ts
vendored
119
src/plugins/monaco/types/quickcommand.api.d.ts
vendored
@ -720,6 +720,125 @@ interface quickcommandApi {
|
||||
};
|
||||
}
|
||||
): Promise<string>;
|
||||
|
||||
/**
|
||||
* 显示一个带有暂停、恢复、关闭回调功能的进度条，支持动态更新进度
|
||||
* @param {object} options - 配置选项
|
||||
* @param {string} [options.title="进度"] - 对话框标题
|
||||
* @param {string} [options.text="处理中..."] - 进度条上方的文本
|
||||
* @param {number} [options.value=0] - 初始进度值(0-100)
|
||||
* @param {string} [options.position="bottom-right"] - 进度条位置，可选值：top-left, top-right, bottom-left, bottom-right
|
||||
* @param {Function} [options.onClose] - 关闭按钮点击时的回调函数
|
||||
* @param {Function} [options.onPause] - 暂停按钮点击时的回调函数，必须和onResume一起配置
|
||||
* @param {Function} [options.onResume] - 恢复按钮点击时的回调函数，必须和onPause一起配置
|
||||
* @returns {Promise<{id: number, close: Function}>} 返回进度条对象
|
||||
*
|
||||
* ```js
|
||||
* // 基本使用
|
||||
* const processBar = await quickcommand.showProcessBar({
|
||||
* title: "下载进度",
|
||||
* text: "正在下载文件...",
|
||||
* value: 0,
|
||||
* position: "bottom-right"
|
||||
* });
|
||||
*
|
||||
* // 带暂停/恢复，关闭回调功能
|
||||
* let isPaused = false;
|
||||
* const processBar = await quickcommand.showProcessBar({
|
||||
* title: "下载进度",
|
||||
* text: "正在下载文件...",
|
||||
* value: 0,
|
||||
* onPause: () => {
|
||||
* isPaused = true;
|
||||
* console.log("暂停下载");
|
||||
* },
|
||||
* onResume: () => {
|
||||
* isPaused = false;
|
||||
* console.log("继续下载");
|
||||
* },
|
||||
* onClose: () => {
|
||||
* console.log("用户关闭了进度条");
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* // 动态更新进度
|
||||
* const items = Array(100).fill(0);
|
||||
* for (let i = 0; i < items.length; i++) {
|
||||
* // 检查是否暂停
|
||||
* while (isPaused) {
|
||||
* await quickcommand.asyncSleep(100);
|
||||
* }
|
||||
*
|
||||
* // 更新进度
|
||||
* quickcommand.updateProcessBar({
|
||||
* value: Math.round((i + 1) / items.length * 100),
|
||||
* text: `正在处理第 ${i + 1}/${items.length} 项`
|
||||
* });
|
||||
*
|
||||
* await someAsyncOperation();
|
||||
* }
|
||||
*
|
||||
* // 完成时更新并关闭
|
||||
* quickcommand.updateProcessBar({
|
||||
* value: 100,
|
||||
* text: "处理完成！",
|
||||
* complete: true
|
||||
* });
|
||||
* ```
|
||||
*/
|
||||
showProcessBar(options?: {
|
||||
title?: string;
|
||||
text?: string;
|
||||
value?: number;
|
||||
position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
|
||||
onClose?: () => void;
|
||||
onPause?: () => void;
|
||||
onResume?: () => void;
|
||||
}): Promise<{
|
||||
id: number;
|
||||
close: () => void;
|
||||
}>;
|
||||
|
||||
/**
|
||||
* 更新进度条的进度
|
||||
* @param {object} options - 配置选项
|
||||
* @param {number} options.value - 新的进度值(0-100)
|
||||
* @param {string} [options.text] - 新的进度文本
|
||||
* @param {boolean} [options.complete] - 是否完成并关闭进度条
|
||||
* @param {{id: number, close: Function}|undefined} processBar - 进度条对象，如果不传入则使用上一次创建的进度条
|
||||
*
|
||||
* ```js
|
||||
* // 使用最近创建的进度条
|
||||
* quickcommand.updateProcessBar({
|
||||
* value: 50,
|
||||
* text: "已完成50%"
|
||||
* });
|
||||
*
|
||||
* // 使用指定的进度条
|
||||
* quickcommand.updateProcessBar({
|
||||
* value: 50,
|
||||
* text: "已完成50%"
|
||||
* }, processBar);
|
||||
*
|
||||
* // 完成并关闭
|
||||
* quickcommand.updateProcessBar({
|
||||
* value: 100,
|
||||
* text: "完成！",
|
||||
* complete: true
|
||||
* });
|
||||
* ```
|
||||
*/
|
||||
updateProcessBar(
|
||||
options: {
|
||||
value: number;
|
||||
text?: string;
|
||||
complete?: boolean;
|
||||
},
|
||||
processBar?: {
|
||||
id: number;
|
||||
close: () => void;
|
||||
}
|
||||
): void;
|
||||
}
|
||||
|
||||
declare var quickcommand: quickcommandApi;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user