feat: market login/logout/upload flow with UI state management

This commit is contained in:
2026-07-26 20:44:11 +08:00
parent 3bb4de6de6
commit 70df32bb07
+35 -1
View File
@@ -162,6 +162,9 @@ const PageDashboard = {
}); });
document.getElementById('btn-market-upload')?.addEventListener('click', () => this._showMarketUpload()); document.getElementById('btn-market-upload')?.addEventListener('click', () => this._showMarketUpload());
document.getElementById('btn-market-login')?.addEventListener('click', () => this._showMarketLogin());
this._updateMarketUI();
}, },
async _installFromMarket(id, filename) { async _installFromMarket(id, filename) {
@@ -199,15 +202,29 @@ const PageDashboard = {
const overlay = document.createElement('div'); const overlay = document.createElement('div');
overlay.className = 'modal-overlay'; overlay.className = 'modal-overlay';
overlay.innerHTML = `<div class="modal" style="min-width:360px;max-width:400px"> overlay.innerHTML = `<div class="modal" style="min-width:360px;max-width:400px">
<h3>市场登录</h3> <h3>市场</h3>
<div class="form-group"><label>邮箱</label><input id="ml-email" type="email"></div> <div class="form-group"><label>邮箱</label><input id="ml-email" type="email"></div>
<div class="form-group"><label>密码</label><input id="ml-pass" type="password"></div> <div class="form-group"><label>密码</label><input id="ml-pass" type="password"></div>
<div class="modal-actions"> <div class="modal-actions">
<button class="btn btn-secondary btn-sm" id="ml-logout" style="display:none;margin-right:auto">退出</button>
<button class="btn btn-secondary btn-sm" id="ml-register">注册</button> <button class="btn btn-secondary btn-sm" id="ml-register">注册</button>
<button class="btn btn-primary btn-sm" id="ml-login">登录</button> <button class="btn btn-primary btn-sm" id="ml-login">登录</button>
</div></div>`; </div></div>`;
document.body.appendChild(overlay); document.body.appendChild(overlay);
if (this._marketToken) {
overlay.querySelector('#ml-login').style.display = 'none';
overlay.querySelector('#ml-register').style.display = 'none';
overlay.querySelector('#ml-logout').style.display = '';
overlay.querySelector('#ml-logout').addEventListener('click', () => {
this._marketToken = null;
localStorage.removeItem('turbosu-market-token');
overlay.remove();
this._updateMarketUI();
Toast.show('已退出', 'info');
});
}
overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); }); overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
overlay.querySelector('#ml-login').addEventListener('click', async () => { overlay.querySelector('#ml-login').addEventListener('click', async () => {
const email = document.getElementById('ml-email').value; const email = document.getElementById('ml-email').value;
@@ -219,6 +236,7 @@ const PageDashboard = {
localStorage.setItem('turbosu-market-token', data.token); localStorage.setItem('turbosu-market-token', data.token);
Toast.show('登录成功', 'success'); Toast.show('登录成功', 'success');
overlay.remove(); overlay.remove();
this._updateMarketUI();
} else { Toast.show(data.message || '登录失败', 'error'); } } else { Toast.show(data.message || '登录失败', 'error'); }
}); });
overlay.querySelector('#ml-register').addEventListener('click', async () => { overlay.querySelector('#ml-register').addEventListener('click', async () => {
@@ -230,6 +248,21 @@ const PageDashboard = {
}); });
}, },
_updateMarketUI() {
const loginBtn = document.getElementById('btn-market-login');
const uploadBtn = document.getElementById('btn-market-upload');
if (!loginBtn || !uploadBtn) return;
if (this._marketToken) {
loginBtn.textContent = '已登录';
loginBtn.className = 'btn btn-sm btn-secondary';
uploadBtn.style.display = '';
} else {
loginBtn.textContent = '登录';
loginBtn.className = 'btn btn-sm btn-primary';
uploadBtn.style.display = 'none';
}
},
_openDashboard(themeId) { _openDashboard(themeId) {
const gameParam = this._selectedGameId ? `?game=${this._selectedGameId}` : ''; const gameParam = this._selectedGameId ? `?game=${this._selectedGameId}` : '';
const url = `${location.origin}/dashboard/${themeId}${gameParam}`; const url = `${location.origin}/dashboard/${themeId}${gameParam}`;
@@ -279,6 +312,7 @@ const PageDashboard = {
<div class="dashboard-sub-sidebar"> <div class="dashboard-sub-sidebar">
<div id="dash-category-list"></div> <div id="dash-category-list"></div>
<div style="padding:8px 12px;margin-top:auto;display:flex;flex-direction:column;gap:4px"> <div style="padding:8px 12px;margin-top:auto;display:flex;flex-direction:column;gap:4px">
<button id="btn-market-login" class="btn btn-sm btn-primary" style="width:100%">登录</button>
<button id="btn-market-upload" class="btn btn-sm btn-secondary" style="width:100%;display:none">发布到市场</button> <button id="btn-market-upload" class="btn btn-sm btn-secondary" style="width:100%;display:none">发布到市场</button>
<button id="btn-import-dashboard" class="btn btn-sm btn-secondary" style="width:100%;">导入 .tsd</button> <button id="btn-import-dashboard" class="btn btn-sm btn-secondary" style="width:100%;">导入 .tsd</button>
</div> </div>