const { ipcRenderer } = require("electron"); const pinyinMatch = require("pinyin-match"); // 等待 DOM 加载完成 document.addEventListener("DOMContentLoaded", () => { let parentId = null; let dialogType = null; // 监听父窗口发来的对话框配置 ipcRenderer.on("dialog-config", (event, config) => { parentId = event.senderId; dialogType = config.type; // 设置主题 document.documentElement.setAttribute( "data-theme", config.isDark ? "dark" : "light" ); // 设置对话框标题 document.getElementById("title-text").textContent = config.title || "提示"; // 设置对话框内容 if (config.content) { document.getElementById("content").textContent = config.content; } // 根据类型设置不同的对话框内容 switch (config.type) { case "message": document.body.classList.add("dialog-message"); // 添加消息对话框的类 break; case "input": document.getElementById("input").style.display = "block"; document.body.classList.add("dialog-input"); // 创建输入框 const inputContainer = document.getElementById("input-container"); inputContainer.innerHTML = ""; // 清空现有内容 config.inputOptions.forEach((inputOption, index) => { console.log(inputOption); const div = document.createElement("div"); div.className = "input-group"; const label = document.createElement("label"); label.textContent = typeof inputOption === "string" ? inputOption : inputOption.label; const input = document.createElement("input"); input.type = "text"; input.id = `input-${index}`; if (typeof inputOption !== "string") { input.value = inputOption.value || ""; input.placeholder = inputOption.hint || ""; } div.appendChild(label); div.appendChild(input); inputContainer.appendChild(div); }); document.getElementById("input-0").focus(); break; case "confirm": document.getElementById("confirm").style.display = "block"; document.body.classList.add("dialog-confirm"); break; case "buttons": document.getElementById("buttons").style.display = "block"; document.body.classList.add("dialog-buttons"); // 创建按钮 const buttonContainer = document.getElementById("button-container"); buttonContainer.innerHTML = ""; config.buttons.forEach((btn, index) => { const button = document.createElement("button"); button.textContent = btn; button.onclick = () => { ipcRenderer.sendTo(parentId, "dialog-result", { id: index, text: btn, }); }; buttonContainer.appendChild(button); }); break; case "textarea": document.getElementById("textarea").style.display = "block"; document.body.classList.add("dialog-textarea"); const textarea = document.getElementById("text-content"); if (config.placeholder) { textarea.placeholder = config.placeholder; } if (config.defaultText) { textarea.value = config.defaultText; } textarea.focus(); break; case "select": document.getElementById("select").style.display = "block"; document.body.classList.add("dialog-select"); const selectContainer = document.getElementById("select-container"); const filterInput = document.getElementById("filter-input"); const selectList = document.querySelector(".select-list"); selectContainer.innerHTML = ""; let currentSelected = null; let allItems = []; let filteredItems = []; let hoverTimeout = null; let isKeyboardNavigation = false; if (!config.enableSearch) { filterInput.style.display = "none"; } if (config.placeholder) { filterInput.placeholder = config.placeholder; } // 创建选项 const createSelectItem = (item, index) => { const div = document.createElement("div"); div.className = "select-item"; // 点击事件 div.onclick = () => { const originalIndex = allItems.indexOf(item); const result = typeof item === "string" ? { id: originalIndex, text: item, } : item; ipcRenderer.sendTo(parentId, "dialog-result", result); }; // 鼠标移入事件 div.onmouseenter = () => { if (isKeyboardNavigation) return; if (hoverTimeout) { clearTimeout(hoverTimeout); } hoverTimeout = setTimeout(() => { if (currentSelected) { currentSelected.classList.remove("selected"); } div.classList.add("selected"); currentSelected = div; }, 0); }; // 鼠标移动事件 div.onmousemove = () => { if (isKeyboardNavigation) { isKeyboardNavigation = false; selectList.classList.remove("keyboard-nav"); } }; // 高亮文本 const highlightText = (text, filterText) => { if (!filterText) return text; const matchResult = pinyinMatch.match(text, filterText); if (!matchResult) return text; const [start, end] = matchResult; return ( text.slice(0, start) + `${text.slice(start, end + 1)}` + text.slice(end + 1) ); }; if (typeof item === "string" || typeof item === "number") { const highlightedText = highlightText( String(item), filterInput.value ); div.innerHTML = `
${highlightedText}
${highlightedTitle}
${ item.description ? `${highlightedDesc}
` : "" }