优化后台UI与开放文档排版设计

frontend/src/layouts/MainLayout.tsx

@@ -7,12 +7,17 @@ import {
   Space,
   Typography,
   Avatar,
+  Tag,
+  Button,
+  Tooltip,
 } from 'antd'
 import {
   ApiOutlined,
   AppstoreOutlined,
+  CodeOutlined,
   DashboardOutlined,
   DownOutlined,
+  FileTextOutlined,
   LogoutOutlined,
   MenuOutlined,
   OrderedListOutlined,
@@ -53,13 +58,13 @@ const adminSections: SidebarSection[] = [
     key: 'products',
     label: '商品管理',
     icon: <AppstoreOutlined />,
-    children: [{ key: 'merchant-products', label: '商品', path: '/merchant-products' }],
+    children: [{ key: 'merchant-products', label: '商品列表', path: '/merchant-products' }],
   },
   {
     key: 'shops',
     label: '商户管理',
     icon: <ShopOutlined />,
-    children: [{ key: 'shop-list', label: '商户列表', path: '/platform-merchants' }],
+    children: [{ key: 'shop-list', label: '平台商户', path: '/platform-merchants' }],
   },
   {
     key: 'orders',
@@ -71,11 +76,11 @@ const adminSections: SidebarSection[] = [
     key: 'staff',
     label: '员工管理',
     icon: <TeamOutlined />,
-    children: [{ key: 'merchant-members', label: '成员', path: '/merchant-members' }],
+    children: [{ key: 'merchant-members', label: '成员管理', path: '/merchant-members' }],
   },
   {
     key: 'funds',
-    label: '积分',
+    label: '积分管理',
     icon: <WalletOutlined />,
     children: [{ key: 'merchant-wallet', label: '积分明细', path: '/merchant-wallet' }],
   },
@@ -85,7 +90,7 @@ const adminSections: SidebarSection[] = [
     icon: <ApiOutlined />,
     children: [
       { key: 'api-keys', label: 'API 密钥', path: '/merchant-api-keys' },
-      { key: 'api-callbacks', label: '回调', path: '/merchant-callbacks' },
+      { key: 'api-callbacks', label: '回调订阅', path: '/merchant-callbacks' },
       { key: 'api-docs', label: '对接文档', path: '/open-api' },
       { key: 'api-debug', label: '调用调试', path: '/api-debug' },
     ],
@@ -103,7 +108,7 @@ const merchantSections: SidebarSection[] = [
     key: 'products',
     label: '商品管理',
     icon: <AppstoreOutlined />,
-    children: [{ key: 'merchant-products', label: '商品', path: '/merchant-products' }],
+    children: [{ key: 'merchant-products', label: '商品列表', path: '/merchant-products' }],
   },
   {
     key: 'orders',
@@ -113,7 +118,7 @@ const merchantSections: SidebarSection[] = [
   },
   {
     key: 'funds',
-    label: '积分',
+    label: '积分管理',
     icon: <WalletOutlined />,
     children: [{ key: 'merchant-wallet', label: '积分明细', path: '/merchant-wallet' }],
   },
@@ -121,7 +126,7 @@ const merchantSections: SidebarSection[] = [
     key: 'staff',
     label: '员工管理',
     icon: <TeamOutlined />,
-    children: [{ key: 'merchant-members', label: '成员', path: '/merchant-members' }],
+    children: [{ key: 'merchant-members', label: '成员管理', path: '/merchant-members' }],
   },
   {
     key: 'open-api',
@@ -129,7 +134,7 @@ const merchantSections: SidebarSection[] = [
     icon: <ApiOutlined />,
     children: [
       { key: 'api-keys', label: 'API 密钥', path: '/merchant-api-keys' },
-      { key: 'api-callbacks', label: '回调', path: '/merchant-callbacks' },
+      { key: 'api-callbacks', label: '回调订阅', path: '/merchant-callbacks' },
     ],
   },
 ]
@@ -205,10 +210,21 @@ export default function MainLayout() {
   }
 
   const userMenu: MenuProps['items'] = [
+    {
+      key: 'user-info',
+      disabled: true,
+      label: (
+        <div style={{ padding: '4px 0' }}>
+          <div style={{ fontWeight: 600, color: '#0f172a' }}>{user?.nickname || user?.username}</div>
+          <div style={{ fontSize: 12, color: '#64748b' }}>角色：{isAdmin ? '平台超级管理员' : '商户成员'}</div>
+        </div>
+      ),
+    },
+    { type: 'divider' },
     {
       key: 'logout',
-      icon: <LogoutOutlined />,
-      label: '退出登录',
+      icon: <LogoutOutlined style={{ color: '#dc2626' }} />,
+      label: <span style={{ color: '#dc2626' }}>退出登录</span>,
       onClick: () => {
         logout()
         navigate('/login')
@@ -223,8 +239,15 @@ export default function MainLayout() {
         trigger={null}
         collapsible
         collapsed={collapsed}
-        width={230}
+        width={240}
         collapsedWidth={74}
+        style={{
+          position: 'sticky',
+          top: 0,
+          height: '100vh',
+          left: 0,
+          zIndex: 100,
+        }}
       >
         <div className="app-sidebar__brand">
           <span className="app-sidebar__brand-mark">S</span>
@@ -270,27 +293,61 @@ export default function MainLayout() {
         </nav>
       </Sider>
       <Layout className={`app-main${isDocsPage ? ' app-main--flush' : ''}`}>
-        <Header
-          className="app-header"
-        >
-          <button
-            className="app-header__collapse"
-            type="button"
-            onClick={() => setCollapsed(!collapsed)}
-            aria-label={collapsed ? '展开侧边栏' : '收起侧边栏'}
-            title={collapsed ? '展开侧边栏' : '收起侧边栏'}
-          >
-            <MenuOutlined />
-          </button>
-          <Dropdown menu={{ items: userMenu }}>
-            <Space style={{ cursor: 'pointer' }}>
-              <Avatar size="small" icon={<UserOutlined />} />
-              <Typography.Text>
-                {user?.nickname || user?.username}
-                {isAdmin ? '（平台管理员）' : '（商户账号）'}
-              </Typography.Text>
-            </Space>
-          </Dropdown>
+        <Header className="app-header">
+          <div className="app-header__left">
+            <button
+              className="app-header__collapse"
+              type="button"
+              onClick={() => setCollapsed(!collapsed)}
+              aria-label={collapsed ? '展开侧边栏' : '收起侧边栏'}
+              title={collapsed ? '展开侧边栏' : '收起侧边栏'}
+            >
+              <MenuOutlined />
+            </button>
+          </div>
+          <div className="app-header__right">
+            {isAdmin && (
+              <Space size="small">
+                <Tooltip title="开放 API 接口文档">
+                  <Button
+                    type="text"
+                    size="small"
+                    icon={<FileTextOutlined />}
+                    onClick={() => navigate('/open-api')}
+                  >
+                    API文档
+                  </Button>
+                </Tooltip>
+                <Tooltip title="API 签名与请求在线调试器">
+                  <Button
+                    type="text"
+                    size="small"
+                    icon={<CodeOutlined />}
+                    onClick={() => navigate('/api-debug')}
+                  >
+                    接口调试
+                  </Button>
+                </Tooltip>
+              </Space>
+            )}
+            <Dropdown menu={{ items: userMenu }} placement="bottomRight">
+              <div className="app-header__user">
+                <Avatar className="app-header__user-avatar" size="small" icon={<UserOutlined />} />
+                <Typography.Text style={{ fontWeight: 600, fontSize: 13.5, color: '#1e293b' }}>
+                  {user?.nickname || user?.username}
+                </Typography.Text>
+                {isAdmin ? (
+                  <Tag color="blue" bordered={false} style={{ margin: 0, fontSize: 11, fontWeight: 600 }}>
+                    管理员
+                  </Tag>
+                ) : (
+                  <Tag color="cyan" bordered={false} style={{ margin: 0, fontSize: 11, fontWeight: 600 }}>
+                    商户
+                  </Tag>
+                )}
+              </div>
+            </Dropdown>
+          </div>
         </Header>
         <Content className="app-content">
           <div className="app-content__body">