feat: market login/logout/upload flow with UI state management
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user