51 lines
2.0 KiB
JavaScript
51 lines
2.0 KiB
JavaScript
export function createPanel() {
|
|
const panelId = "automation-ai-panel";
|
|
// 防止重复创建
|
|
let panel = document.getElementById(panelId);
|
|
if (panel) return getUIRefs(panel);
|
|
|
|
panel = document.createElement("div");
|
|
panel.id = panelId;
|
|
panel.style.cssText = `
|
|
position: fixed; bottom: 24px; right: 24px; z-index: 2147483647;
|
|
background: white; border-radius: 10px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,.2); padding: 12px; width: 260px;
|
|
font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
`;
|
|
|
|
panel.innerHTML = `
|
|
<div style="display:flex;gap:8px;align-items:center;">
|
|
<input id="voiceTextInput" type="text" placeholder="输入指令或自然语言..."
|
|
style="flex:1;padding:8px;border:1px solid #dcdfe6;border-radius:4px;outline:none;font-size:13px;" />
|
|
<button id="voiceBtn" title="按 Alt+V 快捷开启"
|
|
style="padding:8px 12px;border:none;border-radius:4px;background:#409eff;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;">
|
|
🎤
|
|
</button>
|
|
</div>
|
|
<div id="panelStatus" style="margin-top:8px;color:#999;font-size:12px;display:flex;justify-content:space-between;align-items:center;">
|
|
<span id="statusText">准备就绪</span>
|
|
<span id="aiLoading" style="display:none;color:#409eff;font-weight:bold;">🤖 思考中...</span>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(panel);
|
|
return getUIRefs(panel);
|
|
}
|
|
|
|
function getUIRefs(panel) {
|
|
const input = panel.querySelector("#voiceTextInput");
|
|
const btn = panel.querySelector("#voiceBtn");
|
|
const loading = panel.querySelector("#aiLoading");
|
|
const statusText = panel.querySelector("#statusText");
|
|
|
|
return {
|
|
input,
|
|
btn,
|
|
setLoading: (isLoading) => {
|
|
loading.style.display = isLoading ? "inline" : "none";
|
|
statusText.style.display = isLoading ? "none" : "inline";
|
|
input.disabled = isLoading;
|
|
if (!isLoading) input.focus();
|
|
}
|
|
};
|
|
} |