Add 卓米会 mini program and admin server.

Initial commit of the WeChat mini program, Express backend, and admin console.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Michelle Zan
2026-09-29 19:01:36 +08:00
co-authored by Cursor
commit cd05113755
67 changed files with 4845 additions and 0 deletions
+477
View File
@@ -0,0 +1,477 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>卓米会管理后台</title>
<style>
:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; background: #f3f5f7; color: #1f2937; }
button, input, select, textarea { font: inherit; }
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.panel { width: min(420px, 100%); background: #fff; border-radius: 16px; padding: 28px; }
h1 { margin: 0 0 8px; font-size: 22px; }
.muted { color: #6b7280; font-size: 13px; }
label { display: block; margin: 14px 0 6px; font-size: 13px; color: #6b7280; }
input, select, textarea { width: 100%; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; background: #fff; }
textarea { min-height: 72px; resize: vertical; }
.primary, .ghost, .danger { border: 0; border-radius: 10px; padding: 10px 14px; cursor: pointer; }
.primary { background: #128a80; color: #fff; }
.ghost { background: #fff; color: #128a80; border: 1px solid #b7e0dc; }
.danger { background: #fff; color: #dc2626; border: 1px solid #fecaca; }
.app { display: none; min-height: 100vh; }
header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #fff; }
nav { display: flex; gap: 8px; padding: 12px 24px; }
nav button { background: transparent; border: 0; padding: 8px 12px; border-radius: 999px; cursor: pointer; color: #4b5563; }
nav button.on { background: #128a80; color: #fff; }
main { padding: 8px 24px 40px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.card { background: #fff; border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.stat { font-size: 28px; font-weight: 700; }
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #f3f4f6; font-size: 14px; vertical-align: top; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; }
.error { color: #dc2626; min-height: 1.2em; font-size: 13px; }
img.qr { width: 140px; height: 140px; }
@media (max-width: 800px) { .grid, .split { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<div class="login" id="loginView">
<form class="panel" id="loginForm">
<h1>卓米会后台</h1>
<p class="muted">默认账号 admin / 123456,上线前请修改密码。</p>
<label>账号</label>
<input name="username" value="admin" autocomplete="username" />
<label>密码</label>
<input name="password" type="password" value="123456" autocomplete="current-password" />
<p class="error" id="loginError"></p>
<button class="primary" type="submit">登录</button>
</form>
</div>
<div class="app" id="appView">
<header>
<strong>卓米会</strong>
<div class="row">
<button class="ghost" id="passwordBtn" type="button">修改密码</button>
<button class="ghost" id="logoutBtn" type="button">退出</button>
</div>
</header>
<nav>
<button type="button" data-tab="stats" class="on">数据统计</button>
<button type="button" data-tab="activities">活动</button>
<button type="button" data-tab="posters">海报</button>
<button type="button" data-tab="signups">报名</button>
<button type="button" data-tab="checkin">签到码</button>
<button type="button" data-tab="staff">管理员</button>
</nav>
<main>
<section id="stats"></section>
<section id="activities" hidden></section>
<section id="posters" hidden></section>
<section id="signups" hidden></section>
<section id="checkin" hidden></section>
<section id="staff" hidden></section>
</main>
</div>
<script>
const state = { token: localStorage.getItem('zhuomi_admin') || '', activities: [] }
const loginView = document.getElementById('loginView')
const appView = document.getElementById('appView')
function showApp(on) {
loginView.style.display = on ? 'none' : 'flex'
appView.style.display = on ? 'block' : 'none'
}
async function api(url, options = {}) {
const headers = { ...(options.headers || {}) }
if (state.token) headers.Authorization = state.token
if (options.body && !(options.body instanceof FormData)) headers['Content-Type'] = 'application/json'
const res = await fetch(url, { ...options, headers })
if (options.raw) return res
const data = await res.json().catch(() => ({}))
if (res.status === 401 && url !== '/api/admin/login') {
state.token = ''
localStorage.removeItem('zhuomi_admin')
showApp(false)
}
if (!res.ok || data.ok === false) throw new Error(data.message || '请求失败')
return data.data
}
async function uploadMedia(file) {
const form = new FormData()
form.append('file', file)
return api('/api/admin/upload-file', { method: 'POST', body: form })
}
function mediaFields(value) {
return `
<label>封面图片地址</label>
<input name="cover" id="coverUrl" value="${escapeHtml(value.cover || '')}" placeholder="/static/uploads/..." />
<label>上传封面图片</label>
<input type="file" id="coverFile" accept="image/png,image/jpeg,image/webp" />
<label>视频地址</label>
<input name="video" id="videoUrl" value="${escapeHtml(value.video || '')}" placeholder="/static/uploads/..." />
<label>上传视频</label>
<input type="file" id="videoFile" accept="video/mp4,video/webm,video/quicktime" />
<div class="muted" id="mediaHint" style="margin-top:8px"></div>
`
}
function bindMediaPickers(scope) {
const root = scope || document
const coverFile = root.querySelector('#coverFile')
const videoFile = root.querySelector('#videoFile')
const hint = root.querySelector('#mediaHint')
if (coverFile) {
coverFile.onchange = async (event) => {
const file = event.target.files[0]
if (!file) return
try {
if (hint) hint.textContent = '图片上传中...'
const uploaded = await uploadMedia(file)
root.querySelector('#coverUrl').value = uploaded.url
if (hint) hint.textContent = '图片已上传'
} catch (error) {
if (hint) hint.textContent = error.message
alert(error.message)
}
}
}
if (videoFile) {
videoFile.onchange = async (event) => {
const file = event.target.files[0]
if (!file) return
try {
if (hint) hint.textContent = '视频上传中...'
const uploaded = await uploadMedia(file)
root.querySelector('#videoUrl').value = uploaded.url
if (hint) hint.textContent = '视频已上传'
} catch (error) {
if (hint) hint.textContent = error.message
alert(error.message)
}
}
}
}
document.getElementById('loginForm').addEventListener('submit', async (event) => {
event.preventDefault()
const form = new FormData(event.target)
try {
const data = await api('/api/admin/login', {
method: 'POST',
body: JSON.stringify({ username: form.get('username'), password: form.get('password') })
})
state.token = data.token
localStorage.setItem('zhuomi_admin', data.token)
document.getElementById('loginError').textContent = ''
boot()
} catch (error) {
document.getElementById('loginError').textContent = error.message
}
})
document.getElementById('logoutBtn').onclick = () => {
state.token = ''
localStorage.removeItem('zhuomi_admin')
showApp(false)
}
document.getElementById('passwordBtn').onclick = async () => {
const oldPassword = prompt('原密码')
const newPassword = prompt('新密码(至少 6 位)')
if (!oldPassword || !newPassword) return
try {
await api('/api/admin/password', { method: 'POST', body: JSON.stringify({ oldPassword, newPassword }) })
state.token = ''
localStorage.removeItem('zhuomi_admin')
showApp(false)
alert('密码已更新,请重新登录')
} catch (error) {
alert(error.message)
}
}
document.querySelectorAll('nav button').forEach((button) => {
button.onclick = () => {
document.querySelectorAll('nav button').forEach((item) => item.classList.remove('on'))
button.classList.add('on')
document.querySelectorAll('main section').forEach((section) => {
section.hidden = section.id !== button.dataset.tab
})
}
})
async function boot() {
showApp(true)
await loadActivities()
await Promise.all([loadStats(), loadPosters(), loadSignups(), loadCodes(), loadStaff()])
}
async function loadStats() {
const stats = await api('/api/admin/stats')
const rows = stats.bySharer.map((item) => `<tr><td>${escapeHtml(item.sharer)}</td><td>${item.count}</td></tr>`).join('')
document.getElementById('stats').innerHTML = `
<div class="grid">
<div class="card"><div class="muted">活动</div><div class="stat">${stats.activityCount}</div></div>
<div class="card"><div class="muted">报名</div><div class="stat">${stats.signupCount}</div></div>
<div class="card"><div class="muted">签到</div><div class="stat">${stats.checkinCount}</div></div>
</div>
<div class="card"><strong>推荐来源</strong>
<table><thead><tr><th>分享人</th><th>报名数</th></tr></thead><tbody>${rows || '<tr><td colspan="2">暂无报名</td></tr>'}</tbody></table>
</div>`
}
function activityForm(activity) {
const value = activity || { status: 'draft', isCurrent: false, brandName: '卓米会 ZHUOMI' }
return `
<form id="activityForm" class="card">
<strong>${value.id ? '编辑活动' : '新建活动'}</strong>
<p class="muted">状态选 past 即为往期;往期可置顶,并支持封面图 / 视频。</p>
<input type="hidden" name="id" value="${value.id || ''}" />
<label>名称</label><input name="title" value="${escapeHtml(value.title || '')}" />
<label>品牌名</label><input name="brandName" value="${escapeHtml(value.brandName || '')}" />
<label>简介</label><textarea name="brandDesc">${escapeHtml(value.brandDesc || '')}</textarea>
<label>时间</label><input name="startAt" value="${escapeHtml(value.startAt || '')}" />
<label>地址</label><input name="address" value="${escapeHtml(value.address || '')}" />
<label>纬度</label><input name="latitude" value="${value.latitude ?? ''}" />
<label>经度</label><input name="longitude" value="${value.longitude ?? ''}" />
${mediaFields(value)}
<label>状态</label>
<select name="status" id="activityStatus">
<option value="current" ${value.status === 'current' ? 'selected' : ''}>current(当前)</option>
<option value="past" ${value.status === 'past' ? 'selected' : ''}>past(往期)</option>
<option value="draft" ${value.status === 'draft' ? 'selected' : ''}>draft(草稿)</option>
</select>
<label><input type="checkbox" name="isCurrent" ${value.isCurrent ? 'checked' : ''} style="width:auto" /> 设为当前活动</label>
<label><input type="checkbox" name="pinned" ${value.pinned ? 'checked' : ''} style="width:auto" /> 往期置顶(仅 past 生效)</label>
<div class="row"><button class="primary" type="submit">保存</button></div>
</form>`
}
async function loadActivities() {
state.activities = await api('/api/admin/activities')
const list = state.activities.slice().sort((a, b) => {
const rank = (item) => (item.isCurrent ? 0 : item.status === 'current' ? 1 : item.status === 'past' ? 2 : 3)
const ra = rank(a)
const rb = rank(b)
if (ra !== rb) return ra - rb
if (a.status === 'past' && b.status === 'past') {
const ap = a.pinned ? 1 : 0
const bp = b.pinned ? 1 : 0
if (ap !== bp) return bp - ap
}
return String(b.createdAt || '').localeCompare(String(a.createdAt || ''))
})
const rows = list.map((item) => `
<tr>
<td>
${escapeHtml(item.title)}
<div class="muted">
${item.status}${item.isCurrent ? ' · 当前' : ''}${item.pinned ? ' · 置顶' : ''}${item.cover ? ' · 图' : ''}${item.video ? ' · 视频' : ''}
</div>
</td>
<td>${escapeHtml(item.startAt || '')}</td>
<td class="row">
${item.status === 'past'
? `<button class="ghost" data-pin="${item.id}" data-pinned="${item.pinned ? 1 : 0}" type="button">${item.pinned ? '取消置顶' : '置顶'}</button>`
: ''}
<button class="ghost" data-edit="${item.id}" type="button">编辑</button>
<button class="danger" data-del="${item.id}" type="button">删除</button>
</td>
</tr>`).join('')
document.getElementById('activities').innerHTML = `
<div class="split">
<table><thead><tr><th>活动</th><th>时间</th><th></th></tr></thead><tbody>${rows || '<tr><td colspan="3">暂无活动</td></tr>'}</tbody></table>
<div id="activityEditor">${activityForm()}</div>
</div>`
bindActivityEditor()
}
function bindActivityEditor() {
const form = document.getElementById('activityForm')
bindMediaPickers(form)
form.onsubmit = async (event) => {
event.preventDefault()
const formData = new FormData(form)
const body = Object.fromEntries(formData.entries())
body.isCurrent = formData.get('isCurrent') === 'on'
body.pinned = formData.get('pinned') === 'on'
const id = body.id
delete body.id
if (id) await api(`/api/admin/activities/${id}`, { method: 'PUT', body: JSON.stringify(body) })
else await api('/api/admin/activities', { method: 'POST', body: JSON.stringify(body) })
loadActivities()
loadStats()
}
document.querySelectorAll('#activities [data-edit]').forEach((button) => {
button.onclick = () => {
const activity = state.activities.find((item) => item.id === button.dataset.edit)
document.getElementById('activityEditor').innerHTML = activityForm(activity)
bindActivityEditor()
}
})
document.querySelectorAll('#activities [data-del]').forEach((button) => {
button.onclick = async () => {
if (!confirm('删除这场活动?')) return
await api(`/api/admin/activities/${button.dataset.del}`, { method: 'DELETE' })
loadActivities()
loadStats()
}
})
document.querySelectorAll('#activities [data-pin]').forEach((button) => {
button.onclick = async () => {
const next = String(button.dataset.pinned) !== '1'
await api(`/api/admin/activities/${button.dataset.pin}/pin`, {
method: 'POST',
body: JSON.stringify({ pinned: next })
})
loadActivities()
}
})
}
async function loadPosters() {
const posters = await api('/api/admin/posters')
const options = state.activities.map((item) => `<option value="${item.id}">${escapeHtml(item.title)}</option>`).join('')
const rows = posters.map((item) => `
<tr>
<td>${escapeHtml(item.title || item.image)}</td>
<td>${item.enabled ? '启用' : '停用'}</td>
<td><button class="danger" data-poster="${item.id}" type="button">删除</button></td>
</tr>`).join('')
document.getElementById('posters').innerHTML = `
<form id="posterForm" class="card">
<strong>新增海报</strong>
<label>活动</label><select name="activityId">${options}</select>
<label>标题</label><input name="title" />
<label>图片地址</label><input name="image" id="posterImage" placeholder="/static/uploads/..." />
<label>或上传图片</label><input type="file" id="posterFile" accept="image/png,image/jpeg,image/webp" />
<div class="row" style="margin-top:12px"><button class="primary" type="submit">保存海报</button></div>
</form>
<table><thead><tr><th>海报</th><th>状态</th><th></th></tr></thead><tbody>${rows || '<tr><td colspan="3">暂无海报</td></tr>'}</tbody></table>`
document.getElementById('posterFile').onchange = async (event) => {
const file = event.target.files[0]
if (!file) return
try {
const uploaded = await uploadMedia(file)
document.getElementById('posterImage').value = uploaded.url
} catch (error) {
alert(error.message)
}
}
document.getElementById('posterForm').onsubmit = async (event) => {
event.preventDefault()
const body = Object.fromEntries(new FormData(event.target).entries())
await api('/api/admin/posters', { method: 'POST', body: JSON.stringify(body) })
loadPosters()
}
document.querySelectorAll('[data-poster]').forEach((button) => {
button.onclick = async () => {
await api(`/api/admin/posters/${button.dataset.poster}`, { method: 'DELETE' })
loadPosters()
}
})
}
async function loadSignups() {
const signups = await api('/api/admin/signups')
const rows = signups.map((item) => `
<tr>
<td>${escapeHtml(item.name)}<div class="muted">${escapeHtml(item.phone)}</div></td>
<td>${escapeHtml(item.activityTitle || '')}</td>
<td>${escapeHtml(item.sourceSharer || '直接访问')}</td>
<td>${item.checkedIn ? '已签到' : '未签到'}</td>
<td><button class="danger" data-signup="${item.id}" type="button">删除</button></td>
</tr>`).join('')
document.getElementById('signups').innerHTML = `
<div class="row" style="margin-bottom:12px">
<a class="primary" style="text-decoration:none" href="/api/admin/signups/export?token=${encodeURIComponent(state.token)}">导出 CSV</a>
</div>
<table><thead><tr><th>报名人</th><th>活动</th><th>分享人</th><th>签到</th><th></th></tr></thead><tbody>${rows || '<tr><td colspan="5">暂无报名</td></tr>'}</tbody></table>`
document.querySelectorAll('[data-signup]').forEach((button) => {
button.onclick = async () => {
await api(`/api/admin/signups/${button.dataset.signup}`, { method: 'DELETE' })
loadSignups()
loadStats()
}
})
}
async function loadCodes() {
const codes = await api('/api/admin/checkin-codes')
const options = state.activities.map((item) => `<option value="${item.id}">${escapeHtml(item.title)}</option>`).join('')
const cards = codes.map((item) => `
<div class="card">
<img class="qr" src="${item.qrDataUrl}" alt="签到码" />
<div class="muted">${escapeHtml(item.token)}</div>
<div class="muted">有效至 ${escapeHtml(item.expiresAt)}</div>
</div>`).join('')
document.getElementById('checkin').innerHTML = `
<form id="codeForm" class="card row">
<select name="activityId">${options}</select>
<input name="ttlHours" type="number" value="12" style="width:120px" />
<button class="primary" type="submit">生成签到码</button>
</form>
<div class="grid">${cards || '<div class="card">还没有签到码</div>'}</div>`
document.getElementById('codeForm').onsubmit = async (event) => {
event.preventDefault()
const body = Object.fromEntries(new FormData(event.target).entries())
await api('/api/admin/checkin-codes', { method: 'POST', body: JSON.stringify(body) })
loadCodes()
}
}
async function loadStaff() {
const users = await api('/api/admin/users')
const rows = users.map((item) => `
<tr>
<td>${escapeHtml(item.nickName || item.name || '未命名')}<div class="muted">${escapeHtml(item.phone || '')}</div></td>
<td style="font-size:12px;word-break:break-all">${escapeHtml(item.openid)}</td>
<td>${item.allowed ? '管理员' : '普通用户'}</td>
<td>
${item.allowed
? `<button class="danger" data-remove="${encodeURIComponent(item.openid)}" type="button">取消管理员</button>`
: `<button class="ghost" data-add="${escapeHtml(item.openid)}" type="button">设为管理员</button>`}
</td>
</tr>`).join('')
document.getElementById('staff').innerHTML = `
<div class="card"><strong>小程序管理员</strong>
<p class="muted">在后台设为管理员后,该用户打开小程序「往期」会直接看到增加、删除、置顶,界面上没有「管理员登录」入口。</p>
</div>
<table>
<thead><tr><th>用户</th><th>openid</th><th>状态</th><th></th></tr></thead>
<tbody>${rows || '<tr><td colspan="4">暂无用户,请先在小程序登录一次</td></tr>'}</tbody>
</table>`
document.querySelectorAll('[data-add]').forEach((button) => {
button.onclick = async () => {
await api('/api/admin/allowlist', { method: 'POST', body: JSON.stringify({ openid: button.dataset.add }) })
loadStaff()
}
})
document.querySelectorAll('[data-remove]').forEach((button) => {
button.onclick = async () => {
await api(`/api/admin/allowlist/${button.dataset.remove}`, { method: 'DELETE' })
loadStaff()
}
})
}
function escapeHtml(value) {
return String(value ?? '').replace(/[&<>"']/g, (char) => ({
'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
}[char]))
}
if (state.token) {
api('/api/admin/stats').then(boot).catch(() => showApp(false))
}
</script>
</body>
</html>