zwbpc/image-generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复 localStorage 保存后 alert 仍显示的问题，统一用 DOMContentLoaded 包装初始化

Browse Source
This commit is contained in:
zwbcc
2026-03-28 21:32:31 +08:00
parent 535573f95a
commit c3726f0d4d
1 changed files with 75 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
ui.js
View File

@@ -179,12 +179,14 @@ async function copySrc(src, fmt, btn) {
// ── Init ──────────────────────────────────────────────────────── // ── Init ────────────────────────────────────────────────────────
async function init() { function init() {
const savedKey = localStorage.getItem('imgGen-apiKey') || ''; const savedKey = (localStorage.getItem('imgGen-apiKey') || '').trim();
const savedBaseUrl = localStorage.getItem('imgGen-baseUrl') || 'https://api.minimaxi.com'; const savedBaseUrl = localStorage.getItem('imgGen-baseUrl') || 'https://api.minimaxi.com';
if (!savedKey) apiKeyAlert.style.display = 'flex'; if (!savedKey && apiKeyAlert) {
apiKeyInput.value = savedKey; apiKeyAlert.style.display = 'flex';
baseUrlInput.value = savedBaseUrl; }
if (apiKeyInput) apiKeyInput.value = savedKey;
if (baseUrlInput) baseUrlInput.value = savedBaseUrl;
} }
// ── Generate ──────────────────────────────────────────────────── // ── Generate ────────────────────────────────────────────────────
@@ -222,80 +224,75 @@ generateForm.addEventListener('submit', async (e) => {
} }
}); });
// ── Quick prompt tags ──────────────────────────────────────────
document.querySelectorAll('.tag-pill').forEach(btn => {
btn.addEventListener('click', () => {
const tag = btn.dataset.tag;
const current = promptInput.value.trim();
if (current) {
promptInput.value = current + '，' + tag;
} else {
promptInput.value = tag;
}
promptInput.dispatchEvent(new Event('input'));
promptInput.focus();
});
});
// ── Prompt char count ──────────────────────────────────────────
promptInput.addEventListener('input', () => {
charCount.textContent = `${promptInput.value.length} / 1500`;
});
// ── Settings modal ──────────────────────────────────────────────
function openModal() {
settingsModal.classList.add('open');
apiKeyInput.focus();
}
function closeModal() {
settingsModal.classList.remove('open');
clearError();
}
openSettings.addEventListener('click', openModal);
alertSettings.addEventListener('click', openModal);
closeSettings.addEventListener('click', closeModal);
cancelSettings.addEventListener('click', closeModal);
settingsModal.addEventListener('click', e => { if (e.target === settingsModal) closeModal(); });
toggleKey.addEventListener('click', () => {
apiKeyInput.type = apiKeyInput.type === 'password' ? 'text' : 'password';
});
saveSettingsBtn.addEventListener('click', async () => {
clearError();
const apiKey = apiKeyInput.value.trim();
const baseUrl = baseUrlInput.value.trim() || 'https://api.minimaxi.com';
localStorage.setItem('imgGen-apiKey', apiKey);
localStorage.setItem('imgGen-baseUrl', baseUrl);
if (apiKey) apiKeyAlert.style.display = 'none';
closeModal();
});
// ── Theme switcher ─────────────────────────────────────────────
function applyTheme(theme) {
document.documentElement.dataset.theme = theme;
localStorage.setItem('imgGen-theme', theme);
document.querySelectorAll('.theme-btn').forEach(btn =>
btn.classList.toggle('active', btn.dataset.theme === theme)
);
}
document.querySelectorAll('.theme-btn').forEach(btn => {
btn.addEventListener('click', () => applyTheme(btn.dataset.theme));
});
// Restore saved theme
const savedTheme = localStorage.getItem('imgGen-theme');
if (savedTheme) applyTheme(savedTheme);
// ── Start ────────────────────────────────────────────────────── // ── Start ──────────────────────────────────────────────────────
init(); document.addEventListener('DOMContentLoaded', () => {
init();
// Quick prompt tags
document.querySelectorAll('.tag-pill').forEach(btn => {
btn.addEventListener('click', () => {
const tag = btn.dataset.tag;
const current = (promptInput.value || '').trim();
promptInput.value = current ? current + '，' + tag : tag;
promptInput.dispatchEvent(new Event('input'));
promptInput.focus();
});
});
// Prompt char count
promptInput.addEventListener('input', () => {
charCount.textContent = `${promptInput.value.length} / 1500`;
});
// Settings modal
function openModal() {
settingsModal.classList.add('open');
apiKeyInput.focus();
}
function closeModal() {
settingsModal.classList.remove('open');
clearError();
}
openSettings.addEventListener('click', openModal);
alertSettings.addEventListener('click', openModal);
closeSettings.addEventListener('click', closeModal);
cancelSettings.addEventListener('click', closeModal);
settingsModal.addEventListener('click', e => { if (e.target === settingsModal) closeModal(); });
toggleKey.addEventListener('click', () => {
apiKeyInput.type = apiKeyInput.type === 'password' ? 'text' : 'password';
});
saveSettingsBtn.addEventListener('click', () => {
clearError();
const apiKey = (apiKeyInput.value || '').trim();
const baseUrl = (baseUrlInput.value || '').trim() || 'https://api.minimaxi.com';
localStorage.setItem('imgGen-apiKey', apiKey);
localStorage.setItem('imgGen-baseUrl', baseUrl);
if (apiKey && apiKeyAlert) apiKeyAlert.style.display = 'none';
closeModal();
});
// Theme switcher
function applyTheme(theme) {
document.documentElement.dataset.theme = theme;
localStorage.setItem('imgGen-theme', theme);
document.querySelectorAll('.theme-btn').forEach(btn =>
btn.classList.toggle('active', btn.dataset.theme === theme)
);
}
document.querySelectorAll('.theme-btn').forEach(btn => {
btn.addEventListener('click', () => applyTheme(btn.dataset.theme));
});
const savedTheme = localStorage.getItem('imgGen-theme');
if (savedTheme) applyTheme(savedTheme);
});