65 lines
2.5 KiB
JavaScript
65 lines
2.5 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: sans-serif;
|
|
`;
|
|
|
|
panel.innerHTML = `
|
|
<style>
|
|
@keyframes breathe {
|
|
0% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.5; transform: scale(1.1); }
|
|
100% { opacity: 1; transform: scale(1); }
|
|
}
|
|
.recording-dot {
|
|
width: 8px; height: 8px; background: #ff4d4f; border-radius: 50%;
|
|
display: none; margin-right: 6px; animation: breathe 1.2s infinite;
|
|
}
|
|
</style>
|
|
<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" style="padding:8px 12px;border:none;border-radius:4px;background:#409eff;color:#fff;cursor:pointer;">🎤</button>
|
|
</div>
|
|
<div id="panelStatus" style="margin-top:10px;color:#999;font-size:12px;display:flex;align-items:center;">
|
|
<div id="recordingIndicator" class="recording-dot"></div>
|
|
<span id="statusText">准备就绪</span>
|
|
<span id="aiLoading" style="display:none;color:#409eff;margin-left:auto;font-weight:bold;">🤖 思考中...</span>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(panel);
|
|
return getUIRefs(panel);
|
|
}
|
|
|
|
function getUIRefs(panel) {
|
|
return {
|
|
btn: panel.querySelector("#voiceBtn"),
|
|
input: panel.querySelector("#voiceTextInput"),
|
|
setLoading: (loading) => {
|
|
panel.querySelector("#aiLoading").style.display = loading ? "inline" : "none";
|
|
panel.querySelector("#statusText").style.visibility = loading ? "hidden" : "visible";
|
|
},
|
|
setRecording: (isRecording) => {
|
|
const dot = panel.querySelector("#recordingIndicator");
|
|
const text = panel.querySelector("#statusText");
|
|
if (isRecording) {
|
|
dot.style.display = "inline-block";
|
|
text.innerText = "正在聆听...";
|
|
text.style.color = "#ff4d4f";
|
|
} else {
|
|
dot.style.display = "none";
|
|
text.innerText = "准备就绪";
|
|
text.style.color = "#999";
|
|
}
|
|
}
|
|
};
|
|
} |