282 lines
9.6 KiB
TypeScript
282 lines
9.6 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { BrowserRouter, Link, Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom'
|
|
import { App, ConfigProvider, Layout, Menu, Typography, Button, Tag, Space, Spin, type MenuProps } from 'antd'
|
|
import {
|
|
AccountBookOutlined,
|
|
ApiOutlined,
|
|
DashboardOutlined,
|
|
DollarCircleOutlined,
|
|
EyeOutlined,
|
|
FileSearchOutlined,
|
|
LogoutOutlined,
|
|
OrderedListOutlined,
|
|
SettingOutlined,
|
|
ShopOutlined,
|
|
SkinOutlined,
|
|
UserOutlined,
|
|
WalletOutlined,
|
|
} from '@ant-design/icons'
|
|
import { getMe, logout, type CurrentMember, getStoredToken } from './api'
|
|
import { MemberContext } from './MemberContext'
|
|
import Dashboard from './pages/Dashboard'
|
|
import Sites from './pages/Sites'
|
|
import Rules from './pages/Rules'
|
|
import Payments from './pages/Payments'
|
|
import Accounts from './pages/Accounts'
|
|
import Settlements from './pages/Settlements'
|
|
import Orders from './pages/Orders'
|
|
import Wallet from './pages/Wallet'
|
|
import SiteSettings from './pages/SiteSettings'
|
|
import Login from './pages/Login'
|
|
import Storefront from './pages/Storefront'
|
|
import './style.css'
|
|
|
|
type MenuItem = Required<MenuProps>['items'][number]
|
|
|
|
function MainLayout({ member, onLogout }: { member: CurrentMember; onLogout: () => void }) {
|
|
const location = useLocation()
|
|
const menuItems: MenuItem[] = [
|
|
{ key: '/', icon: <DashboardOutlined />, label: <Link to="/">仪表盘</Link> },
|
|
...(member.is_superadmin
|
|
? [{ key: '/sites', icon: <ShopOutlined />, label: <Link to="/sites">分销站点管理</Link> }]
|
|
: []),
|
|
{ key: '/orders', icon: <OrderedListOutlined />, label: <Link to="/orders">全部分销订单</Link> },
|
|
{ key: '/sold', icon: <FileSearchOutlined />, label: <Link to="/sold">售出账号订单</Link> },
|
|
{ key: '/receive', icon: <AccountBookOutlined />, label: <Link to="/receive">分销收号管理</Link> },
|
|
{ key: '/accounts', icon: <ShopOutlined />, label: <Link to="/accounts">商品货架与加价</Link> },
|
|
{ key: '/wallet', icon: <WalletOutlined />, label: <Link to="/wallet">资金与提现</Link> },
|
|
{
|
|
key: '/settlements',
|
|
icon: <DollarCircleOutlined />,
|
|
label: <Link to="/settlements">{member.is_superadmin ? '结算批次管理' : '周期对账单'}</Link>,
|
|
},
|
|
{ key: '/settings', icon: <SkinOutlined />, label: <Link to="/settings">品牌装修</Link> },
|
|
...(member.is_superadmin
|
|
? [{ key: '/payments', icon: <ApiOutlined />, label: <Link to="/payments">支付通道配置</Link> }]
|
|
: []),
|
|
{
|
|
key: '/rules',
|
|
icon: <SettingOutlined />,
|
|
label: <Link to="/rules">{member.is_superadmin ? '比例与税费规则' : '合作政策与权益'}</Link>,
|
|
},
|
|
]
|
|
|
|
const selectedKey = menuItems.some((item) => item && 'key' in item && item.key === location.pathname)
|
|
? location.pathname
|
|
: '/'
|
|
|
|
const roleLabel = member.is_superadmin
|
|
? '平台超级管理员'
|
|
: member.member_type === 'operator'
|
|
? '分销运营'
|
|
: member.member_type === 'finance'
|
|
? '分销财务'
|
|
: '分销成员'
|
|
|
|
return (
|
|
<MemberContext.Provider value={member}>
|
|
<Layout className="app">
|
|
<Layout.Sider breakpoint="lg" collapsedWidth="0" className="app-sider" width={220}>
|
|
<div className="brand">
|
|
<ShopOutlined style={{ fontSize: 20, color: '#1677ff' }} />
|
|
<span>HFB 分销后台</span>
|
|
</div>
|
|
<Menu
|
|
theme="dark"
|
|
mode="inline"
|
|
items={menuItems}
|
|
selectedKeys={[selectedKey]}
|
|
/>
|
|
</Layout.Sider>
|
|
<Layout className="app-layout">
|
|
<Layout.Header className="header">
|
|
<div className="header-left">
|
|
{member.is_superadmin ? (
|
|
<Tag color="gold" style={{ fontSize: 13, padding: '2px 8px' }}>
|
|
平台全局管理模式
|
|
</Tag>
|
|
) : (
|
|
<Tag color="blue" style={{ fontSize: 13, padding: '2px 8px' }}>
|
|
{member.site_name || '当前分销站点'} · {member.domain || member.site_code}
|
|
</Tag>
|
|
)}
|
|
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
|
|
主站 hao858.com · 分销管理系统
|
|
</Typography.Text>
|
|
</div>
|
|
<div className="header-right">
|
|
<Space size="middle">
|
|
{member.site_code && (
|
|
<Button
|
|
type="primary"
|
|
ghost
|
|
icon={<EyeOutlined />}
|
|
size="small"
|
|
onClick={() => {
|
|
const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
|
|
const targetUrl = isLocal
|
|
? `http://${window.location.hostname}:5189/?site=${member.site_code}`
|
|
: member.domain
|
|
? `https://${member.domain}`
|
|
: `/?site=${member.site_code}`
|
|
window.open(targetUrl, '_blank')
|
|
}}
|
|
style={{ borderColor: '#1677ff', color: '#1677ff' }}
|
|
>
|
|
预览分销前台商城 ↗
|
|
</Button>
|
|
)}
|
|
<div className="user-profile">
|
|
<UserOutlined style={{ color: '#1677ff' }} />
|
|
<Typography.Text strong style={{ fontSize: 13 }}>
|
|
{member.nickname || member.username}
|
|
</Typography.Text>
|
|
<Tag color={member.is_superadmin ? 'purple' : 'cyan'}>{roleLabel}</Tag>
|
|
</div>
|
|
<Button
|
|
type="text"
|
|
danger
|
|
icon={<LogoutOutlined />}
|
|
onClick={onLogout}
|
|
size="small"
|
|
>
|
|
退出登录
|
|
</Button>
|
|
</Space>
|
|
</div>
|
|
</Layout.Header>
|
|
<Layout.Content className="app-content">
|
|
<Routes>
|
|
<Route path="/" element={<Dashboard />} />
|
|
{member.is_superadmin && <Route path="/sites" element={<Sites isSuperadmin={true} />} />}
|
|
<Route path="/rules" element={<Rules />} />
|
|
<Route path="/payments" element={<Payments />} />
|
|
<Route path="/accounts" element={<Accounts />} />
|
|
<Route path="/wallet" element={<Wallet />} />
|
|
<Route path="/settings" element={<SiteSettings />} />
|
|
<Route path="/settlements" element={<Settlements />} />
|
|
<Route path="/sold" element={<Orders kind="sold" />} />
|
|
<Route path="/receive" element={<Orders kind="receive" />} />
|
|
<Route path="/orders" element={<Orders kind="all" />} />
|
|
<Route path="*" element={<Navigate to="/" replace />} />
|
|
</Routes>
|
|
</Layout.Content>
|
|
</Layout>
|
|
</Layout>
|
|
</MemberContext.Provider>
|
|
)
|
|
}
|
|
|
|
function AppContent() {
|
|
const [member, setMember] = useState<CurrentMember | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const navigate = useNavigate()
|
|
const location = useLocation()
|
|
|
|
const isPublicStorefront = location.pathname.startsWith('/site')
|
|
|
|
useEffect(() => {
|
|
let active = true
|
|
const checkAuth = async () => {
|
|
// For public storefront, we do not force login
|
|
if (isPublicStorefront) {
|
|
try {
|
|
const profile = await getMe()
|
|
if (active) setMember(profile)
|
|
} catch {
|
|
// ignore auth error on public storefront
|
|
} finally {
|
|
if (active) setLoading(false)
|
|
}
|
|
return
|
|
}
|
|
|
|
// If no token exists and no session, skip getMe
|
|
if (!getStoredToken() && location.pathname === '/login') {
|
|
if (active) setLoading(false)
|
|
return
|
|
}
|
|
try {
|
|
const profile = await getMe()
|
|
if (active) {
|
|
setMember(profile)
|
|
if (location.pathname === '/login') {
|
|
navigate('/', { replace: true })
|
|
}
|
|
}
|
|
} catch {
|
|
if (active) {
|
|
setMember(null)
|
|
if (location.pathname !== '/login') {
|
|
navigate('/login', { replace: true })
|
|
}
|
|
}
|
|
} finally {
|
|
if (active) setLoading(false)
|
|
}
|
|
}
|
|
checkAuth()
|
|
return () => {
|
|
active = false
|
|
}
|
|
}, [location.pathname, navigate, isPublicStorefront])
|
|
|
|
const handleLogout = async () => {
|
|
await logout()
|
|
setMember(null)
|
|
navigate('/login', { replace: true })
|
|
}
|
|
|
|
const handleLoginSuccess = (current: CurrentMember) => {
|
|
setMember(current)
|
|
navigate('/', { replace: true })
|
|
}
|
|
|
|
if (isPublicStorefront) {
|
|
return (
|
|
<Routes>
|
|
<Route path="/site" element={<Navigate to="/site/demo" replace />} />
|
|
<Route path="/site/:siteCode" element={<Storefront />} />
|
|
<Route path="*" element={<Navigate to="/" replace />} />
|
|
</Routes>
|
|
)
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<Spin size="large" tip="正在加载分销系统..." />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (location.pathname === '/login') {
|
|
return <Login onSuccess={handleLoginSuccess} />
|
|
}
|
|
|
|
if (!member) {
|
|
return <Navigate to="/login" replace />
|
|
}
|
|
|
|
return <MainLayout member={member} onLogout={handleLogout} />
|
|
}
|
|
|
|
export default function AppShell() {
|
|
return (
|
|
<BrowserRouter>
|
|
<ConfigProvider
|
|
theme={{
|
|
token: {
|
|
colorPrimary: '#1677ff',
|
|
borderRadius: 6,
|
|
},
|
|
}}
|
|
>
|
|
<App>
|
|
<AppContent />
|
|
</App>
|
|
</ConfigProvider>
|
|
</BrowserRouter>
|
|
)
|
|
}
|