新增 React Ant Design 前端骨架

2026-07-07 18:15:02 +08:00
parent c2c168f18e
commit 45d4df74fc
61 changed files with 6869 additions and 0 deletions
@@ -0,0 +1,149 @@
+import {
+  AuditOutlined,
+  DashboardOutlined,
+  FileSearchOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  OrderedListOutlined,
+  SettingOutlined,
+  ShopOutlined,
+  TeamOutlined,
+  UnorderedListOutlined,
+  UserOutlined,
+} from '@ant-design/icons'
+import { App, Button, Dropdown, Layout, Menu, Space, Typography } from 'antd'
+import type { MenuProps } from 'antd'
+import { useMemo, useState } from 'react'
+import { Outlet, useLocation, useNavigate } from 'react-router'
+
+import { logoutAdmin } from '@/services/admin'
+import {
+  clearAdminSession,
+  getAdminRole,
+  getAdminTokenExpiresAt,
+  getAdminUsername,
+} from '@/utils/admin-auth'
+import { formatAdminDateTime } from '@/utils/admin-time'
+
+const SIDEBAR_COLLAPSED_KEY = 'react-admin-sidebar-collapsed'
+
+export default function AdminLayout() {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const { message } = App.useApp()
+  const [collapsed, setCollapsed] = useState(
+    () => window.localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === '1',
+  )
+  const role = getAdminRole()
+  const username = getAdminUsername() || 'admin'
+  const expiresAt = getAdminTokenExpiresAt()
+
+  const menuItems = useMemo<MenuProps['items']>(() => {
+    const items: MenuProps['items'] = [
+      { key: '/admin/dashboard', icon: <DashboardOutlined />, label: '概览' },
+      { key: '/admin/orders', icon: <OrderedListOutlined />, label: '订单' },
+      { key: '/admin/tasks', icon: <UnorderedListOutlined />, label: '任务' },
+    ]
+
+    if (role === 'admin') {
+      items.splice(1, 0, { key: '/admin/users', icon: <TeamOutlined />, label: '用户' })
+      items.push(
+        { key: '/admin/cloudtentacles-records', icon: <FileSearchOutlined />, label: '发货记录' },
+        {
+          key: '/admin/platform-shops',
+          icon: <SettingOutlined />,
+          label: '平台配置',
+        },
+        { key: '/admin/platform-fulfillment', icon: <ShopOutlined />, label: '履约配置' },
+        { key: '/admin/audit-logs', icon: <AuditOutlined />, label: '审计' },
+      )
+    }
+
+    return items
+  }, [role])
+
+  async function submitLogout() {
+    try {
+      await logoutAdmin()
+    } catch {
+      // 后端退出是无状态的，本地清理优先。
+    } finally {
+      clearAdminSession()
+      message.success('已退出后台')
+      navigate('/admin/login', { replace: true })
+    }
+  }
+
+  function toggleCollapsed() {
+    const next = !collapsed
+    setCollapsed(next)
+    window.localStorage.setItem(SIDEBAR_COLLAPSED_KEY, next ? '1' : '0')
+  }
+
+  const selectedKey = resolveSelectedKey(location.pathname)
+
+  return (
+    <Layout className="admin-shell">
+      <Layout.Sider
+        width={232}
+        collapsedWidth={72}
+        collapsed={collapsed}
+        className="admin-sider"
+        trigger={null}
+      >
+        <div className="admin-brand">
+          <strong>{collapsed ? 'OS' : '运营后台'}</strong>
+          {!collapsed ? <span>订单与交付管理</span> : null}
+        </div>
+        <Menu
+          mode="inline"
+          selectedKeys={[selectedKey]}
+          items={menuItems}
+          onClick={({ key }) => navigate(String(key))}
+        />
+      </Layout.Sider>
+      <Layout>
+        <Layout.Header className="admin-topbar">
+          <Button
+            aria-label={collapsed ? '展开导航' : '折叠导航'}
+            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+            onClick={toggleCollapsed}
+          />
+          <Space className="admin-user" size={12}>
+            <div className="admin-user-copy">
+              <Typography.Text strong>{username}</Typography.Text>
+              <Typography.Text type="secondary">
+                {roleLabel(role)}
+                {expiresAt ? ` · ${formatAdminDateTime(expiresAt)} 到期` : ''}
+              </Typography.Text>
+            </div>
+            <Dropdown
+              menu={{
+                items: [{ key: 'logout', label: '退出登录' }],
+                onClick: submitLogout,
+              }}
+              placement="bottomRight"
+            >
+              <Button icon={<UserOutlined />}>账号</Button>
+            </Dropdown>
+          </Space>
+        </Layout.Header>
+        <Layout.Content className="admin-content">
+          <Outlet />
+        </Layout.Content>
+      </Layout>
+    </Layout>
+  )
+}
+
+function resolveSelectedKey(pathname: string) {
+  if (pathname.startsWith('/admin/orders')) return '/admin/orders'
+  if (pathname.startsWith('/admin/tasks')) return '/admin/tasks'
+  return pathname
+}
+
+function roleLabel(role: string) {
+  if (role === 'admin') return '管理员'
+  if (role === 'operator') return '普通运营'
+  return '客服'
+}