优化后台侧边导航

apps/frontend-react/src/layouts/AdminLayout.tsx

@@ -1,10 +1,16 @@
 import {
+  ApiOutlined,
   AuditOutlined,
+  BellOutlined,
+  CloudServerOutlined,
   DashboardOutlined,
   FileSearchOutlined,
+  LinkOutlined,
+  LogoutOutlined,
   MenuFoldOutlined,
   MenuUnfoldOutlined,
   OrderedListOutlined,
+  SafetyCertificateOutlined,
   SettingOutlined,
   ShopOutlined,
   TeamOutlined,
@@ -39,23 +45,71 @@ export default function AdminLayout() {
   const expiresAt = getAdminTokenExpiresAt()
 
   const menuItems = useMemo<MenuProps['items']>(() => {
-    const items: MenuProps['items'] = [
+    const operationItems: MenuProps['items'] = [
       { key: '/admin/dashboard', icon: <DashboardOutlined />, label: '概览' },
       { key: '/admin/orders', icon: <OrderedListOutlined />, label: '订单' },
       { key: '/admin/tasks', icon: <UnorderedListOutlined />, label: '任务' },
+      { key: '/admin/cloudtentacles-records', icon: <FileSearchOutlined />, label: '发货记录' },
+    ]
+
+    const items: MenuProps['items'] = [
+      {
+        key: 'group-operation',
+        type: 'group',
+        label: '运营',
+        children: operationItems,
+      },
     ]
 
     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',
+          key: 'group-config',
-          icon: <SettingOutlined />,
+          type: 'group',
-          label: '平台配置',
+          label: '配置',
+          children: [
+            { key: '/admin/users', icon: <TeamOutlined />, label: '后台用户' },
+            {
+              key: '/admin/platform-shops',
+              icon: <SettingOutlined />,
+              label: '平台配置',
+              children: [
+                {
+                  key: '/admin/platform-shops?tab=ninetyone',
+                  icon: <LinkOutlined />,
+                  label: '91卡券',
+                },
+                {
+                  key: '/admin/platform-shops?tab=notifications',
+                  icon: <BellOutlined />,
+                  label: '内部通知',
+                },
+                {
+                  key: '/admin/platform-shops?tab=kuaishouEticket',
+                  icon: <SafetyCertificateOutlined />,
+                  label: '快手核销',
+                },
+                {
+                  key: '/admin/platform-shops?tab=kuaishouFeifei',
+                  icon: <ApiOutlined />,
+                  label: 'feifei',
+                },
+                {
+                  key: '/admin/platform-shops?tab=cloudtentacles',
+                  icon: <CloudServerOutlined />,
+                  label: 'cloudtentacles',
+                },
+              ],
+            },
+            { key: '/admin/platform-fulfillment', icon: <ShopOutlined />, label: '履约配置' },
+          ],
+        },
+        {
+          key: 'group-system',
+          type: 'group',
+          label: '系统',
+          children: [{ key: '/admin/audit-logs', icon: <AuditOutlined />, label: '审计日志' }],
         },
-        { key: '/admin/platform-fulfillment', icon: <ShopOutlined />, label: '履约配置' },
-        { key: '/admin/audit-logs', icon: <AuditOutlined />, label: '审计' },
       )
     }
 
@@ -80,7 +134,8 @@ export default function AdminLayout() {
     window.localStorage.setItem(SIDEBAR_COLLAPSED_KEY, next ? '1' : '0')
   }
 
-  const selectedKey = resolveSelectedKey(location.pathname)
+  const selectedKey = resolveSelectedKey(location.pathname, location.search)
+  const defaultOpenKeys = collapsed ? [] : resolveDefaultOpenKeys(selectedKey)
 
   return (
     <Layout className="admin-shell">
@@ -91,32 +146,57 @@ export default function AdminLayout() {
         className="admin-sider"
         trigger={null}
       >
-        <div className="admin-brand">
+        <div className="admin-sider-inner">
-          <strong>{collapsed ? 'OS' : '运营后台'}</strong>
+          <div className="admin-brand">
-          {!collapsed ? <span>订单与交付管理</span> : null}
+            <div className="admin-brand-copy">
+              <strong>{collapsed ? 'OS' : '运营后台'}</strong>
+              {!collapsed ? <span>订单与交付管理</span> : null}
+            </div>
+            <Button
+              className="admin-collapse-button"
+              aria-label={collapsed ? '展开导航' : '折叠导航'}
+              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+              onClick={toggleCollapsed}
+            />
+          </div>
+
+          {!collapsed ? (
+            <div className="admin-sidebar-profile">
+              <Typography.Text strong>{username}</Typography.Text>
+              <Typography.Text type="secondary">{roleLabel(role)}</Typography.Text>
+              {expiresAt ? (
+                <Typography.Text type="secondary">
+                  {formatAdminDateTime(expiresAt)} 到期
+                </Typography.Text>
+              ) : null}
+            </div>
+          ) : null}
+
+          <Menu
+            mode="inline"
+            inlineIndent={16}
+            selectedKeys={[selectedKey]}
+            defaultOpenKeys={defaultOpenKeys}
+            items={menuItems}
+            className="admin-menu"
+            onClick={({ key }) => navigate(String(key))}
+          />
+
+          <div className="admin-sider-footer">
+            <Button
+              block={!collapsed}
+              icon={<LogoutOutlined />}
+              onClick={submitLogout}
+              aria-label="退出登录"
+            >
+              {collapsed ? null : '退出登录'}
+            </Button>
+          </div>
         </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: '退出登录' }],
@@ -136,12 +216,24 @@ export default function AdminLayout() {
   )
 }
 
-function resolveSelectedKey(pathname: string) {
+function resolveSelectedKey(pathname: string, search = '') {
   if (pathname.startsWith('/admin/orders')) return '/admin/orders'
   if (pathname.startsWith('/admin/tasks')) return '/admin/tasks'
+  if (pathname === '/admin/platform-shops') {
+    const tab = new URLSearchParams(search).get('tab') || 'ninetyone'
+    return `/admin/platform-shops?tab=${tab}`
+  }
   return pathname
 }
 
+function resolveDefaultOpenKeys(selectedKey: string) {
+  if (selectedKey.startsWith('/admin/platform-shops')) {
+    return ['/admin/platform-shops']
+  }
+
+  return []
+}
+
 function roleLabel(role: string) {
   if (role === 'admin') return '管理员'
   if (role === 'operator') return '普通运营'

apps/frontend-react/src/styles/main.css

@@ -64,14 +64,33 @@ select {
   z-index: 2;
 }
 
+.admin-sider .ant-layout-sider-children {
+  height: 100%;
+}
+
+.admin-sider-inner {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
 .admin-brand {
-  height: 64px;
+  min-height: 68px;
-  display: grid;
+  display: flex;
-  align-content: center;
+  align-items: center;
-  padding: 0 20px;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 12px 14px 12px 18px;
   border-bottom: 1px solid #edf0f5;
 }
 
+.admin-brand-copy {
+  min-width: 0;
+  display: grid;
+  line-height: 1.25;
+}
+
 .admin-brand strong {
   color: #111827;
   font-size: 18px;
@@ -82,11 +101,87 @@ select {
   font-size: 12px;
 }
 
+.admin-collapse-button {
+  flex: 0 0 auto;
+  border-color: #e5e7eb;
+}
+
+.admin-sidebar-profile {
+  margin: 12px 14px 8px;
+  padding: 12px;
+  border: 1px solid #edf0f5;
+  border-radius: 6px;
+  background: #f8fafc;
+  display: grid;
+  gap: 3px;
+  line-height: 1.35;
+}
+
+.admin-sidebar-profile .ant-typography {
+  margin: 0;
+  font-size: 12px;
+}
+
+.admin-menu {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-inline-end: 0 !important;
+  padding: 6px 8px 10px;
+}
+
+.admin-menu .ant-menu-item,
+.admin-menu .ant-menu-submenu-title {
+  border-radius: 6px;
+  margin-inline: 0;
+  width: 100%;
+}
+
+.admin-menu .ant-menu-item-selected {
+  font-weight: 700;
+}
+
+.admin-menu .ant-menu-item-group-title {
+  padding: 12px 10px 6px;
+  color: #9ca3af;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.admin-sider-footer {
+  padding: 10px 14px 14px;
+  border-top: 1px solid #edf0f5;
+}
+
+.admin-sider.ant-layout-sider-collapsed .admin-brand {
+  padding: 12px 8px;
+  flex-direction: column;
+}
+
+.admin-sider.ant-layout-sider-collapsed .admin-brand-copy {
+  justify-items: center;
+}
+
+.admin-sider.ant-layout-sider-collapsed .admin-menu {
+  padding-inline: 6px;
+}
+
+.admin-sider.ant-layout-sider-collapsed .admin-menu .ant-menu-item-group-title {
+  padding: 8px 0;
+  height: 8px;
+  overflow: hidden;
+}
+
+.admin-sider.ant-layout-sider-collapsed .admin-sider-footer {
+  padding-inline: 8px;
+}
+
 .admin-topbar {
   height: 64px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   padding: 0 20px;
   border-bottom: 1px solid #edf0f5;
 }