调研使用ant design和react的layout

package.json

@@ -38,43 +38,45 @@
     "@babel/runtime": "^7.24.4",
     "@tarojs/components": "4.1.1",
     "@tarojs/helper": "4.1.1",
-    "@tarojs/plugin-platform-weapp": "4.1.1",
+    "@tarojs/plugin-framework-react": "4.1.1",
     "@tarojs/plugin-platform-alipay": "4.1.1",
-    "@tarojs/plugin-platform-tt": "4.1.1",
-    "@tarojs/plugin-platform-swan": "4.1.1",
-    "@tarojs/plugin-platform-jd": "4.1.1",
-    "@tarojs/plugin-platform-qq": "4.1.1",
     "@tarojs/plugin-platform-h5": "4.1.1",
     "@tarojs/plugin-platform-harmony-hybrid": "4.1.1",
+    "@tarojs/plugin-platform-jd": "4.1.1",
+    "@tarojs/plugin-platform-qq": "4.1.1",
+    "@tarojs/plugin-platform-swan": "4.1.1",
+    "@tarojs/plugin-platform-tt": "4.1.1",
+    "@tarojs/plugin-platform-weapp": "4.1.1",
+    "@tarojs/react": "4.1.1",
     "@tarojs/runtime": "4.1.1",
     "@tarojs/shared": "4.1.1",
     "@tarojs/taro": "4.1.1",
-    "@tarojs/plugin-framework-react": "4.1.1",
-    "@tarojs/react": "4.1.1",
+    "antd": "^5.25.3",
+    "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react": "^18.0.0"
+    "react-router-dom": "^7.6.1"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
-    "@tarojs/cli": "4.1.1",
     "@babel/plugin-transform-class-properties": "7.25.9",
-    "@types/webpack-env": "^1.13.6",
-    "@types/react": "^18.0.0",
-    "webpack": "5.91.0",
+    "@babel/preset-react": "^7.24.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
+    "@tarojs/cli": "4.1.1",
     "@tarojs/taro-loader": "4.1.1",
     "@tarojs/webpack5-runner": "4.1.1",
+    "@types/node": "^18",
+    "@types/react": "^18.0.0",
+    "@types/webpack-env": "^1.13.6",
     "babel-preset-taro": "4.1.1",
-    "eslint-config-taro": "4.1.1",
     "eslint": "^8.57.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-    "react-refresh": "^0.14.0",
-    "@babel/preset-react": "^7.24.1",
+    "eslint-config-taro": "4.1.1",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.4.0",
+    "postcss": "^8.4.38",
+    "react-refresh": "^0.14.0",
     "stylelint": "^16.4.0",
-    "typescript": "^5.4.5",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "postcss": "^8.4.38",
-    "@types/node": "^18"
+    "typescript": "^5.4.5",
+    "webpack": "5.91.0"
   }
 }

src/app.config.ts

@@ -1,6 +1,7 @@
 export default defineAppConfig({
   pages: [
-    'pages/index/index'
+    'pages/index/index',
+    'pages/demo/App'
   ],
   window: {
     backgroundTextStyle: 'light',

src/layouts/BasicLayout.tsx

@@ -0,0 +1,54 @@
+// BasicLayout.tsx
+import React from 'react';
+import { Layout, Menu, Breadcrumb } from 'antd';
+import { Link } from 'react-router-dom';
+
+const { Header, Content, Footer, Sider } = Layout;
+
+interface BasicLayoutProps {
+  children: React.ReactNode;
+}
+
+const BasicLayout: React.FC<BasicLayoutProps> = ({ children }) => {
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Header className="header">
+        <div className="logo" />
+        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
+          <Menu.Item key="1"><Link to="/">Home</Link></Menu.Item>
+          <Menu.Item key="2"><Link to="/about">About</Link></Menu.Item>
+        </Menu>
+      </Header>
+      <Layout>
+        <Sider width={200} className="site-layout-background">
+          <Menu mode="inline" defaultSelectedKeys={['1']}>
+            <Menu.Item key="1">Option 1</Menu.Item>
+            <Menu.Item key="2">Option 2</Menu.Item>
+          </Menu>
+        </Sider>
+        <Layout style={{ padding: '0 24px 24px' }}>
+          <Breadcrumb style={{ margin: '16px 0' }}>
+            <Breadcrumb.Item>Home</Breadcrumb.Item>
+            <Breadcrumb.Item>List</Breadcrumb.Item>
+            <Breadcrumb.Item>App</Breadcrumb.Item>
+          </Breadcrumb>
+          <Content
+            className="site-layout-background"
+            style={{
+              padding: 24,
+              margin: 0,
+              minHeight: 280,
+            }}
+          >
+            {children}
+          </Content>
+          <Footer style={{ textAlign: 'center' }}>
+            Ant Design ©2025 Created by Ant UED
+          </Footer>
+        </Layout>
+      </Layout>
+    </Layout>
+  );
+};
+
+export default BasicLayout;

src/pages/demo/AboutPage.tsx

@@ -0,0 +1,13 @@
+// AboutPage.tsx
+import React from 'react';
+
+const AboutPage: React.FC = () => {
+  return (
+    <div>
+      <h1>About Us</h1>
+      <p>This is the about page content.</p>
+    </div>
+  );
+};
+
+export default AboutPage;

src/pages/demo/App.tsx

@@ -0,0 +1,22 @@
+// App.tsx
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import BasicLayout from '../../layouts/BasicLayout';
+import HomePage from './HomePage';
+import AboutPage from './AboutPage';
+
+const App: React.FC = () => {
+    console.log('App component rendered');
+  return (
+    <Router>
+      <BasicLayout>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/about" element={<AboutPage />} />
+        </Routes>
+      </BasicLayout>
+    </Router>
+  );
+};
+
+export default App;

src/pages/demo/HomePage.tsx

@@ -0,0 +1,13 @@
+// HomePage.tsx
+import React from 'react';
+
+const HomePage: React.FC = () => {
+  return (
+    <div>
+      <h1>Welcome to the Home Page</h1>
+      <p>This is the home page content.</p>
+    </div>
+  );
+};
+
+export default HomePage;