Sea-Studio/MC_Report
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: home page hash-based tab routing for shareable links

Browse Source
This commit is contained in:
canglan
2026-07-12 01:53:59 +08:00
parent 5bb2df7b52
commit 989a3ae4cf
2 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/js/app.js
View File

@@ -55,7 +55,8 @@ const App = {
}
if (page === 'install') { this.showPublic('install'); return; }
if (page === 'home' || page === 'login' || page === 'register') { this.showPublic(page); return; }
if (page === 'home') { this.showPublic('home', param); return; }
if (page === 'login' || page === 'register') { this.showPublic(page); return; }
if (!Auth.logged()) { location.hash = '#/login'; return; }
this.showLayout();
@@ -83,13 +84,13 @@ const App = {
}
},
showPublic(page) {
showPublic(page, param) {
document.getElementById('top-auth').classList.remove('hidden');
document.getElementById('main-layout').classList.add('hidden');
const pub = document.getElementById('public-page');
pub.classList.remove('hidden');
const comp = page === 'login' ? LoginPage : page === 'register' ? RegisterPage : page === 'install' ? InstallPage : HomePage;
Promise.resolve(comp.render()).then(html => { pub.innerHTML = html; if (comp.mount) comp.mount(); });
Promise.resolve(comp.render(param)).then(html => { pub.innerHTML = html; if (comp.mount) comp.mount(param); });
},
showLayout() {

35
public/js/pages/home.js
View File

@@ -1,26 +1,25 @@
const HomePage = {
async render() {
async render(tab) {
const t = tab || 'report';
return `<div id="home-content" style="max-width:800px;margin:0 auto;padding:30px 0">
<div class="tab-nav">
<button class="active" data-tab="report"><i class="fas fa-flag"></i> 举报</button>
<button data-tab="suggestion"><i class="fas fa-lightbulb"></i> 建议</button>
<button data-tab="appeal"><i class="fas fa-gavel"></i> 申诉</button>
<button data-tab="tracking"><i class="fas fa-search"></i> 追踪</button>
<button class="${t==='report'?'active':''}" data-tab="report"><i class="fas fa-flag"></i> 举报</button>
<button class="${t==='suggestion'?'active':''}" data-tab="suggestion"><i class="fas fa-lightbulb"></i> 建议</button>
<button class="${t==='appeal'?'active':''}" data-tab="appeal"><i class="fas fa-gavel"></i> 申诉</button>
<button class="${t==='tracking'?'active':''}" data-tab="tracking"><i class="fas fa-search"></i> 追踪</button>
</div>
<div id="home-tab"></div>
</div>`;
},
mount() {
mount(tab) {
const t = tab || 'report';
const tabBtns = document.querySelectorAll('.tab-nav button');
const tabContent = document.getElementById('home-tab');
let currentTab = 'report';
function switchTab(tab) {
currentTab = tab;
tabBtns.forEach(b => b.classList.toggle('active', b.dataset.tab === tab));
if (tab === 'tracking') renderTracking(tabContent);
else TicketCreate.render(tabContent, { type: tab, prefill: {}, backLink: null });
function switchContent(type) {
if (type === 'tracking') renderTracking(tabContent);
else TicketCreate.render(tabContent, { type, prefill: {}, backLink: null });
}
function renderTracking(ct) {
@@ -35,8 +34,8 @@ const HomePage = {
</div></div>`;
}
tabBtns.forEach(b => b.onclick = () => switchTab(b.dataset.tab));
switchTab('report');
tabBtns.forEach(b => b.onclick = () => App.navigate('home', b.dataset.tab));
switchContent(t);
this.searchTracking = async () => {
const token = document.getElementById('track-token').value.trim();
@@ -48,10 +47,10 @@ const HomePage = {
ct.innerHTML = tickets.length ? `
<div class="table-wrap"><table><thead><tr>
<th>#</th><th>类型</th><th>标题</th><th>状态</th><th>时间</th><th>操作</th>
</tr></thead><tbody>${tickets.map(t => `
<tr><td>${t.id}</td><td>${U.badge(t.type,'type')}</td><td>${U.esc(t.title)}</td>
<td>${U.badge(t.status,'status')}</td><td>${U.date(t.created_at)}</td>
<td><button class="btn btn-o btn-sm" onclick="App.navigate('tracking');App.showTrackDetail(${t.id},'${token}')">查看</button></td></tr>
</tr></thead><tbody>${tickets.map(tick => `
<tr><td>${tick.id}</td><td>${U.badge(tick.type,'type')}</td><td>${U.esc(tick.title)}</td>
<td>${U.badge(tick.status,'status')}</td><td>${U.date(tick.created_at)}</td>
<td><button class="btn btn-o btn-sm" onclick="App.navigate('home','tracking');HomePage.showTrackDetail(${tick.id},'${token}')">查看</button></td></tr>
`).join('')}</tbody></table></div>` : '<div class="empty"><i class="fas fa-inbox"></i><p>未找到工单</p></div>';
} catch (ex) { ct.innerHTML = `<div class="alert alert-e">${ex.message}</div>`; }
};