AskaEth/TurboSu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: marketplace integration via backend proxy

Browse Source 
- market_url config (server-side only, never exposed to frontend)
- /api/market/* proxy endpoints to PocketBase
- Dashboard page: 'Market' tab in sub-sidebar
- Market list: browse/install community dashboards
- Login/register modal, upload to market
- PocketBase API fully proxied, zero credentials in frontend
This commit is contained in:
AskaEth
2026-07-26 19:52:00 +08:00
parent 06042a93a2
commit 683e573e9a
4 changed files with 217 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/pages/dashboard.js
+130 -45
View File
@@ -2,9 +2,12 @@ const PageDashboard = {
_el: null,
_currentCategory: 'all',
_selectedGameId: null,
_marketMode: false,
_marketToken: null,
init() {
this._el = document.getElementById('page-dashboard');
this._marketToken = localStorage.getItem('turbosu-market-token');
},
async render() {
@@ -35,6 +38,12 @@ const PageDashboard = {
item.dataset.cat = cat;
listEl.appendChild(item);
});
const marketItem = document.createElement('div');
marketItem.className = 'category-item market-tab';
marketItem.textContent = '市场';
marketItem.dataset.cat = 'market';
listEl.appendChild(marketItem);
} catch (e) {
console.error('Failed to load categories:', e);
}
@@ -43,38 +52,48 @@ const PageDashboard = {
async _loadThemes() {
const gridEl = document.getElementById('dash-theme-grid');
if (!gridEl) return;
gridEl.innerHTML = '<div style="text-align:center;padding:40px;color:var(--text-tertiary);">加载中...</div>';
if (this._marketMode) {
await this._loadMarket(gridEl);
return;
}
try {
let themes = await API.getDashboards(this._currentCategory);
if (!themes || themes.length === 0) {
gridEl.innerHTML = this._emptyHtml();
return;
}
if (this._selectedGameId) {
themes = themes.filter(t => this._isGameSupported(t));
}
if (!themes || themes.length === 0) { gridEl.innerHTML = this._emptyHtml(); return; }
if (this._selectedGameId) { themes = themes.filter(t => this._isGameSupported(t)); }
const searchQuery = document.getElementById('dash-search')?.value?.toLowerCase() || '';
if (searchQuery) {
themes = themes.filter(t => (t.name||'').toLowerCase().includes(searchQuery) || (t.description||'').toLowerCase().includes(searchQuery) || (t.author||'').toLowerCase().includes(searchQuery));
}
if (searchQuery) { themes = themes.filter(t => (t.name||'').toLowerCase().includes(searchQuery) || (t.description||'').toLowerCase().includes(searchQuery) || (t.author||'').toLowerCase().includes(searchQuery)); }
const sortBy = document.getElementById('dash-sort')?.value || 'name';
themes.sort((a, b) => (a[sortBy]||'').localeCompare(b[sortBy]||''));
if (themes.length === 0) {
gridEl.innerHTML = this._emptyHtml('当前游戏没有兼容的仪表盘');
return;
}
if (themes.length === 0) { gridEl.innerHTML = this._emptyHtml('当前游戏没有兼容的仪表盘'); return; }
gridEl.innerHTML = themes.map(t => this._themeCardHtml(t)).join('');
} catch (e) {
console.error('Failed to load themes:', e);
gridEl.innerHTML = '<div style="text-align:center;padding:40px;color:var(--danger);">加载失败</div>';
}
} catch (e) { gridEl.innerHTML = '<div style="text-align:center;padding:40px;color:var(--danger);">加载失败</div>'; }
},
async _loadMarket(gridEl) {
try {
const res = await fetch('/api/market/dashboards');
const data = await res.json();
const items = data.items || [];
if (!items.length) { gridEl.innerHTML = this._emptyHtml('市场暂无仪表盘'); return; }
gridEl.innerHTML = items.map(d => {
const icon = d.icon || '📦';
return `<div class="glass-card theme-card" data-market-id="${d.id}">
<div class="theme-card-preview">${icon}</div>
<div class="theme-card-info">
<div class="theme-card-name">${d.name||'Unnamed'}</div>
<div class="theme-card-meta">
<span>${d.category||''}</span><span>v${d.version||'1.0'}</span>
</div>
<div class="theme-card-meta" style="margin-top:4px">
<span>${d.author||''}</span><span style="color:var(--text-tertiary)">${d.downloads||0} 次下载</span>
</div>
<button class="btn btn-sm btn-primary btn-market-install" data-id="${d.id}" data-file="${d.file||''}" style="margin-top:8px;width:100%">安装</button>
</div></div>`;
}).join('');
} catch (e) { gridEl.innerHTML = '<div style="text-align:center;padding:40px;color:var(--danger);">市场加载失败</div>'; }
},
_isGameSupported(theme) {
@@ -102,6 +121,8 @@ const PageDashboard = {
categoryList.querySelectorAll('.category-item').forEach(el => el.classList.remove('active'));
item.classList.add('active');
this._currentCategory = item.dataset.cat;
this._marketMode = (this._currentCategory === 'market');
document.getElementById('dash-search-box').style.display = this._marketMode ? 'none' : 'flex';
this._loadThemes();
});
}
@@ -112,14 +133,16 @@ const PageDashboard = {
const card = e.target.closest('.theme-card');
if (!card) return;
const themeId = card.dataset.themeId;
this._openDashboard(themeId);
if (themeId) this._openDashboard(themeId);
const installBtn = e.target.closest('.btn-market-install');
if (installBtn) this._installFromMarket(installBtn.dataset.id, installBtn.dataset.file);
});
gridEl.addEventListener('contextmenu', (e) => {
const card = e.target.closest('.theme-card');
if (!card) return;
if (!card || !card.dataset.themeId) return;
e.preventDefault();
const themeId = card.dataset.themeId;
this._exportDashboard(themeId);
this._exportDashboard(card.dataset.themeId);
});
}
@@ -127,22 +150,83 @@ const PageDashboard = {
document.getElementById('dash-sort')?.addEventListener('change', () => this._loadThemes());
document.getElementById('btn-import-dashboard')?.addEventListener('click', () => {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.tsd';
const input = document.createElement('input'); input.type = 'file'; input.accept = '.tsd';
input.onchange = async (e) => {
const file = e.target.files[0];
if (!file) return;
const formData = new FormData();
formData.append('file', file);
try {
const res = await fetch('/api/dashboards/import', { method: 'POST', body: formData });
const data = await res.json();
if (data.ok) { Toast.show('仪表盘导入成功', 'success'); this._loadThemes(); }
else Toast.show('导入失败', 'error');
} catch (err) { Toast.show('导入失败', 'error'); }
};
input.click();
const file = e.target.files[0]; if (!file) return;
const fd = new FormData(); fd.append('file', file);
const res = await fetch('/api/dashboards/import', { method: 'POST', body: fd });
const data = await res.json();
if (data.ok) { Toast.show('导入成功', 'success'); this._loadThemes(); }
else Toast.show('导入失败', 'error');
}; input.click();
});
document.getElementById('btn-market-upload')?.addEventListener('click', () => this._showMarketUpload());
},
async _installFromMarket(id, filename) {
try {
const res = await fetch(`/api/market/install?id=${id}&filename=${filename}`);
const data = await res.json();
if (data.ok) { Toast.show('安装成功', 'success'); this._loadThemes(); }
else Toast.show('安装失败', 'error');
} catch (e) { Toast.show('安装失败', 'error'); }
},
_showMarketUpload() {
if (!this._marketToken) {
Toast.show('请先登录市场账户', 'info');
this._showMarketLogin();
return;
}
const input = document.createElement('input'); input.type = 'file'; input.accept = '.tsd';
input.onchange = async (e) => {
const file = e.target.files[0]; if (!file) return;
const fd = new FormData(); fd.append('file', file);
fd.append('name', file.name.replace('.tsd',''));
fd.append('category', 'community');
fd.append('author', 'TurboSu User');
fd.append('token', this._marketToken);
try {
const res = await fetch('/api/market/upload', { method: 'POST', body: fd });
const data = await res.json();
Toast.show(data.error ? '上传失败: ' + data.error : '上传成功', data.error ? 'error' : 'success');
} catch (e) { Toast.show('上传失败', 'error'); }
}; input.click();
},
_showMarketLogin() {
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';
overlay.innerHTML = `<div class="modal" style="min-width:360px;max-width:400px">
<h3>市场登录</h3>
<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="modal-actions">
<button class="btn btn-secondary btn-sm" id="ml-register">注册</button>
<button class="btn btn-primary btn-sm" id="ml-login">登录</button>
</div></div>`;
document.body.appendChild(overlay);
overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
overlay.querySelector('#ml-login').addEventListener('click', async () => {
const email = document.getElementById('ml-email').value;
const pass = document.getElementById('ml-pass').value;
const res = await fetch('/api/market/auth', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({email, password}) });
const data = await res.json();
if (data.token) {
this._marketToken = data.token;
localStorage.setItem('turbosu-market-token', data.token);
Toast.show('登录成功', 'success');
overlay.remove();
} else { Toast.show(data.message || '登录失败', 'error'); }
});
overlay.querySelector('#ml-register').addEventListener('click', async () => {
const email = document.getElementById('ml-email').value;
const pass = document.getElementById('ml-pass').value;
const res = await fetch('/api/market/register', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({email, password: pass, passwordConfirm: pass}) });
const data = await res.json();
Toast.show(data.error ? '注册失败: ' + data.error : '注册成功，请查收验证邮件', data.error ? 'error' : 'success');
});
},
@@ -194,12 +278,13 @@ const PageDashboard = {
<div class="dashboard-layout">
<div class="dashboard-sub-sidebar">
<div id="dash-category-list"></div>
<div style="padding:8px 12px;margin-top:auto;">
<div style="padding:8px 12px;margin-top:auto;display:flex;flex-direction:column;gap:4px">
<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>
</div>
</div>
<div class="dashboard-main">
<div style="display:flex;gap:8px;margin-bottom:12px;align-items:center">
<div id="dash-search-box" style="display:flex;gap:8px;margin-bottom:12px;align-items:center">
<input id="dash-search" type="text" placeholder="搜索仪表盘..." style="flex:1;max-width:300px">
<select id="dash-sort" style="width:120px">
<option value="name">名称</option>