feat(dashboard): add boss dashboard H5 and APIs

Implement the mobile dashboard frontend, admin overview APIs, report archive export, and local dev proxy so the boss dashboard can run against real backend data while preserving MSW demos.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
danaisuiyuan
2026-05-11 13:07:40 +08:00
parent 693c66c258
commit 403ffe0fde
40 changed files with 6767 additions and 0 deletions

View File

@@ -0,0 +1,38 @@
import { RightOutline } from 'antd-mobile-icons'
import { formatMoney, formatNumber } from '../../../utils/format'
import type { RankItem } from '../types'
type RankListProps = {
title: string
items: RankItem[]
valueType?: 'money' | 'number'
}
export function RankList({ title, items, valueType = 'money' }: RankListProps) {
return (
<section className="section-block">
<div className="section-title-row">
<div>
<p className="section-kicker">Top 3</p>
<h2>{title}</h2>
</div>
<button className="text-button" type="button">
<RightOutline />
</button>
</div>
<div className="rank-list">
{items.map((item, index) => (
<button className="rank-item" key={item.id} type="button">
<span className="rank-index">{index + 1}</span>
<span className="rank-content">
<strong>{item.name}</strong>
<small>{item.description}</small>
</span>
<span className="rank-value">{valueType === 'money' ? formatMoney(item.value) : formatNumber(item.value)}</span>
</button>
))}
</div>
</section>
)
}

View File

@@ -0,0 +1,42 @@
import { Tag } from 'antd-mobile'
import type { RiskAlert, RiskLevel } from '../types'
type RiskAlertSectionProps = {
risks: RiskAlert[]
}
const levelMeta: Record<RiskLevel, { color: 'danger' | 'warning' | 'default'; label: string }> = {
red: { color: 'danger', label: '红色' },
yellow: { color: 'warning', label: '黄色' },
gray: { color: 'default', label: '灰色' },
}
export function RiskAlertSection({ risks }: RiskAlertSectionProps) {
return (
<section className="section-block">
<div className="section-title-row">
<div>
<p className="section-kicker">Risk</p>
<h2></h2>
</div>
<span className="risk-count">{risks.length} </span>
</div>
<div className="risk-list">
{risks.map((risk) => {
const meta = levelMeta[risk.level]
return (
<button className="risk-item" key={risk.id} type="button">
<div className="risk-header">
<Tag color={meta.color}>{meta.label}</Tag>
<span>{risk.type}</span>
<time>{risk.discoveredAt}</time>
</div>
<strong>{risk.title}</strong>
<p>{risk.description}</p>
</button>
)
})}
</div>
</section>
)
}

View File

@@ -0,0 +1,64 @@
import { CapsuleTabs, Tag } from 'antd-mobile'
import { useState } from 'react'
import { formatMoney, formatNumber } from '../../../utils/format'
import type { SnapshotSlot, TodaySnapshot } from '../types'
type TodaySnapshotSectionProps = {
snapshots: TodaySnapshot[]
}
const statusMap = {
pending: { color: 'default', label: '待生成' },
success: { color: 'success', label: '已生成' },
failed: { color: 'danger', label: '生成失败' },
temporary: { color: 'warning', label: '临时数据' },
} as const
export function TodaySnapshotSection({ snapshots }: TodaySnapshotSectionProps) {
const [activeSlot, setActiveSlot] = useState<SnapshotSlot>('1015')
const activeSnapshot = snapshots.find((snapshot) => snapshot.slot === activeSlot) ?? snapshots[0]
const status = statusMap[activeSnapshot.status]
return (
<section className="section-block snapshot-section">
<div className="section-title-row">
<div>
<p className="section-kicker"></p>
<h2> / </h2>
</div>
<Tag color={status.color}>{status.label}</Tag>
</div>
<CapsuleTabs activeKey={activeSlot} onChange={(key) => setActiveSlot(key as SnapshotSlot)}>
{snapshots.map((snapshot) => (
<CapsuleTabs.Tab title={snapshot.title.replace(' ', '')} key={snapshot.slot} />
))}
</CapsuleTabs>
<div className="snapshot-card">
<p className="snapshot-message">{activeSnapshot.message}</p>
{activeSnapshot.generatedAt && <p className="snapshot-time">{activeSnapshot.generatedAt}</p>}
<div className="snapshot-grid">
<span>
<strong>{formatNumber(activeSnapshot.purchaseUsers)}</strong>
</span>
<span>
<strong>{formatNumber(activeSnapshot.orderCount)}</strong>
</span>
<span>
<strong>{formatMoney(activeSnapshot.dealAmount)}</strong>
</span>
<span>
<strong>{formatMoney(activeSnapshot.paidAmount)}</strong>
</span>
<span>
<strong>{formatNumber(activeSnapshot.newMerchandiseCount)}</strong>
</span>
<span>
<strong>{formatMoney(Number(activeSnapshot.selfBonusChange) + Number(activeSnapshot.shareBonusChange))}</strong>
</span>
</div>
</div>
</section>
)
}