Ant Design React 后台管理系统：页面缩小横向滑动、导航栏固定、内容滑动

要实现后台管理系统页面缩小横向滑动、导航栏固定和内容滑动，可以使用 Ant Design 的 Layout 组件和 React Router 来实现。

首先，安装 Ant Design 和 React Router:

npm install antd react-router-dom

然后，创建一个基本的后台管理系统布局组件，并导入所需的 Ant Design 组件和 React Router 的相关组件:

import React from 'react';
import { Layout, Menu } from 'antd';
import { Link } from 'react-router-dom';

const { Header, Content, Sider } = Layout;

const AdminLayout = ({ children }) => {
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider width={200} style={{ background: '#fff' }}>
        <Menu mode='inline' defaultSelectedKeys={['1']} style={{ height: '100%', borderRight: 0 }}>
          <Menu.Item key='1'>
            <Link to='/dashboard'>Dashboard</Link>
          </Menu.Item>
          <Menu.Item key='2'>
            <Link to='/users'>Users</Link>
          </Menu.Item>
          {/* Add more menu items as needed */}
        </Menu>
      </Sider>
      <Layout>
        <Header style={{ background: '#fff', padding: 0 }}>Header</Header>
        <Content style={{ margin: '24px 16px 0' }}>
          <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
            {children}
          </div>
        </Content>
      </Layout>
    </Layout>
  );
}

export default AdminLayout;

在上面的代码中，我们创建了一个基本的后台管理系统布局组件，其中包含了一个侧边栏菜单和一个内容区域。侧边栏菜单使用 Ant Design 的 Menu 组件来实现，内容区域使用 Ant Design 的 Layout 组件来实现。

接下来，创建路由组件并使用 AdminLayout 作为布局组件:

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import AdminLayout from './AdminLayout';
import Dashboard from './Dashboard';
import Users from './Users';

const App = () => {
  return (
    <Router>
      <AdminLayout>
        <Route path='/dashboard' component={Dashboard} />
        <Route path='/users' component={Users} />
      </AdminLayout>
    </Router>
  );
}

export default App;

在上面的代码中，我们使用 BrowserRouter 作为路由容器，然后使用 Route 组件来定义路由规则和对应的组件。在 AdminLayout 组件中，我们通过 props.children 将路由组件的内容作为子组件传递进来。

最后，创建 Dashboard 和 Users 组件，用来展示对应的页面内容:

import React from 'react';

const Dashboard = () => {
  return <h2>Dashboard</h2>;
}

export default Dashboard;

// Users.js
import React from 'react';

const Users = () => {
  return <h2>Users</h2>;
}

export default Users;

现在，当你访问 /dashboard 和 /users 时，你应该能够看到导航栏固定在左侧，内容区域可以滚动，同时页面也可以横向滚动。你可以根据自己的需求添加更多的菜单项和页面组件。