diff --git a/nkebao/src/App.tsx b/nkebao/src/App.tsx
index 07396f8e..707bcaaf 100644
--- a/nkebao/src/App.tsx
+++ b/nkebao/src/App.tsx
@@ -1,89 +1,51 @@
-import React, { useState, useEffect } from 'react';
-import './App.css';
-import { fetchDeviceList } from '@/api/devices';
-import { fetchWechatAccountList } from '@/api/wechat-accounts';
-import { fetchScenes } from '@/api/scenarios';
-import TestComponent from '@/components/TestComponent';
-import type { Device } from '@/types/device';
-import type { WechatFriend } from '@/types/wechat';
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Home from './pages/Home';
+import Login from './pages/login/Login';
+import Devices from './pages/devices/Devices';
+import DeviceDetail from './pages/devices/DeviceDetail';
+import WechatAccounts from './pages/wechat-accounts/WechatAccounts';
+import WechatAccountDetail from './pages/wechat-accounts/WechatAccountDetail';
+import Workspace from './pages/workspace/Workspace';
+import AutoGroupDetail from './pages/workspace/auto-group/Detail';
+import MomentsSync from './pages/workspace/moments-sync/MomentsSync';
+import MomentsSyncDetail from './pages/workspace/moments-sync/Detail';
+import TrafficDistribution from './pages/workspace/traffic-distribution/TrafficDistribution';
+import TrafficDistributionDetail from './pages/workspace/traffic-distribution/Detail';
+import Scenarios from './pages/scenarios/Scenarios';
+import Profile from './pages/profile/Profile';
+import Plans from './pages/plans/Plans';
+import Orders from './pages/orders/Orders';
+import TrafficPool from './pages/traffic-pool/TrafficPool';
+import ContactImport from './pages/contact-import/ContactImport';
+import Content from './pages/content/Content';
 
 function App() {
-  const [devices, setDevices] = useState<any[]>([]);
-  const [wechatAccounts, setWechatAccounts] = useState<any[]>([]);
-  const [scenes, setScenes] = useState<any[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  const testAPIs = async () => {
-    setLoading(true);
-    try {
-      // 测试设备API
-      const deviceResponse = await fetchDeviceList(1, 5);
-      console.log('设备API响应:', deviceResponse);
-      setDevices(deviceResponse.data?.list || []);
-
-      // 测试微信账号API
-      const wechatResponse = await fetchWechatAccountList({ page: 1, limit: 5 });
-      console.log('微信账号API响应:', wechatResponse);
-      setWechatAccounts(wechatResponse.data?.list || []);
-
-      // 测试场景API
-      const sceneResponse = await fetchScenes({ page: 1, limit: 5 });
-      console.log('场景API响应:', sceneResponse);
-      setScenes(sceneResponse.data || []);
-
-    } catch (error) {
-      console.error('API测试失败:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    // 页面加载时自动测试API
-    testAPIs();
-  }, []);
-
   return (
-    <div className="App">
-      <header className="App-header">
-        <h1>nkebao2 - 基础文件迁移测试</h1>
-        <p>这是一个测试页面，用于验证从Cunkebao迁移过来的基础文件是否正常工作</p>
-        
-        <TestComponent 
-          title="路径别名测试" 
-          className="mb-4 bg-blue-50"
-        />
-        
-        <button onClick={testAPIs} disabled={loading}>
-          {loading ? '测试中...' : '重新测试API'}
-        </button>
-
-        <div style={{ marginTop: '20px', textAlign: 'left', maxWidth: '800px' }}>
-          <h3>测试结果:</h3>
-          
-          <div style={{ marginBottom: '20px' }}>
-            <h4>设备API (共 {devices.length} 条):</h4>
-            <pre style={{ fontSize: '12px', background: '#f5f5f5', padding: '10px', borderRadius: '4px' }}>
-              {JSON.stringify(devices.slice(0, 2), null, 2)}
-            </pre>
-          </div>
-
-          <div style={{ marginBottom: '20px' }}>
-            <h4>微信账号API (共 {wechatAccounts.length} 条):</h4>
-            <pre style={{ fontSize: '12px', background: '#f5f5f5', padding: '10px', borderRadius: '4px' }}>
-              {JSON.stringify(wechatAccounts.slice(0, 2), null, 2)}
-            </pre>
-          </div>
-
-          <div style={{ marginBottom: '20px' }}>
-            <h4>场景API (共 {scenes.length} 条):</h4>
-            <pre style={{ fontSize: '12px', background: '#f5f5f5', padding: '10px', borderRadius: '4px' }}>
-              {JSON.stringify(scenes.slice(0, 2), null, 2)}
-            </pre>
-          </div>
-        </div>
-      </header>
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/devices" element={<Devices />} />
+        <Route path="/devices/:id" element={<DeviceDetail />} />
+        <Route path="/wechat-accounts" element={<WechatAccounts />} />
+        <Route path="/wechat-accounts/:id" element={<WechatAccountDetail />} />
+        <Route path="/workspace" element={<Workspace />} />
+        <Route path="/workspace/auto-group/:id" element={<AutoGroupDetail />} />
+        <Route path="/workspace/moments-sync" element={<MomentsSync />} />
+        <Route path="/workspace/moments-sync/:id" element={<MomentsSyncDetail />} />
+        <Route path="/workspace/traffic-distribution" element={<TrafficDistribution />} />
+        <Route path="/workspace/traffic-distribution/:id" element={<TrafficDistributionDetail />} />
+        <Route path="/scenarios" element={<Scenarios />} />
+        <Route path="/profile" element={<Profile />} />
+        <Route path="/plans" element={<Plans />} />
+        <Route path="/orders" element={<Orders />} />
+        <Route path="/traffic-pool" element={<TrafficPool />} />
+        <Route path="/contact-import" element={<ContactImport />} />
+        <Route path="/content" element={<Content />} />
+        {/* 你可以继续添加更多路由 */}
+      </Routes>
+    </BrowserRouter>
   );
 }
 
diff --git a/nkebao/src/pages/Home.tsx b/nkebao/src/pages/Home.tsx
new file mode 100644
index 00000000..f3ae16b3
--- /dev/null
+++ b/nkebao/src/pages/Home.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Home() {
+  return <div>首页</div>;
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/contact-import/ContactImport.tsx b/nkebao/src/pages/contact-import/ContactImport.tsx
new file mode 100644
index 00000000..f3090966
--- /dev/null
+++ b/nkebao/src/pages/contact-import/ContactImport.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function ContactImport() {
+  return <div>导入通讯录页</div>;
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/content/Content.tsx b/nkebao/src/pages/content/Content.tsx
new file mode 100644
index 00000000..7629b07a
--- /dev/null
+++ b/nkebao/src/pages/content/Content.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Content() {
+  return <div>内容管理页</div>;
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/devices/DeviceDetail.tsx b/nkebao/src/pages/devices/DeviceDetail.tsx
new file mode 100644
index 00000000..2b814edf
--- /dev/null
+++ b/nkebao/src/pages/devices/DeviceDetail.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+export default function DeviceDetail() {
+  const { id } = useParams();
+  return <div>设备详情页，当前ID: {id}</div>;
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/devices/Devices.tsx b/nkebao/src/pages/devices/Devices.tsx
new file mode 100644
index 00000000..5445ccd2
--- /dev/null
+++ b/nkebao/src/pages/devices/Devices.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Devices() {
+  return <div>设备列表页</div>;
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/login/Login.tsx b/nkebao/src/pages/login/Login.tsx
new file mode 100644
index 00000000..c8f30ad7
--- /dev/null
+++ b/nkebao/src/pages/login/Login.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Login() {
+  return <div>登录页</div>;
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/orders/Orders.tsx b/nkebao/src/pages/orders/Orders.tsx
new file mode 100644
index 00000000..de347ea0
--- /dev/null
+++ b/nkebao/src/pages/orders/Orders.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Orders() {
+  return <div>订单页</div>;
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/plans/Plans.tsx b/nkebao/src/pages/plans/Plans.tsx
new file mode 100644
index 00000000..195ab943
--- /dev/null
+++ b/nkebao/src/pages/plans/Plans.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Plans() {
+  return <div>套餐页</div>;
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/profile/Profile.tsx b/nkebao/src/pages/profile/Profile.tsx
new file mode 100644
index 00000000..3ca72a49
--- /dev/null
+++ b/nkebao/src/pages/profile/Profile.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Profile() {
+  return <div>个人中心页</div>;
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/scenarios/Scenarios.tsx b/nkebao/src/pages/scenarios/Scenarios.tsx
new file mode 100644
index 00000000..85378f6b
--- /dev/null
+++ b/nkebao/src/pages/scenarios/Scenarios.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Scenarios() {
+  return <div>场景列表页</div>;
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/traffic-pool/TrafficPool.tsx b/nkebao/src/pages/traffic-pool/TrafficPool.tsx
new file mode 100644
index 00000000..ef9a94fe
--- /dev/null
+++ b/nkebao/src/pages/traffic-pool/TrafficPool.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function TrafficPool() {
+  return <div>流量池页</div>;
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/wechat-accounts/WechatAccountDetail.tsx b/nkebao/src/pages/wechat-accounts/WechatAccountDetail.tsx
new file mode 100644
index 00000000..be57854a
--- /dev/null
+++ b/nkebao/src/pages/wechat-accounts/WechatAccountDetail.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+export default function WechatAccountDetail() {
+  const { id } = useParams();
+  return <div>微信号详情页，当前ID: {id}</div>;
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/wechat-accounts/WechatAccounts.tsx b/nkebao/src/pages/wechat-accounts/WechatAccounts.tsx
new file mode 100644
index 00000000..99941353
--- /dev/null
+++ b/nkebao/src/pages/wechat-accounts/WechatAccounts.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function WechatAccounts() {
+  return <div>微信号列表页</div>;
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/workspace/Workspace.tsx b/nkebao/src/pages/workspace/Workspace.tsx
new file mode 100644
index 00000000..cb60a38a
--- /dev/null
+++ b/nkebao/src/pages/workspace/Workspace.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Workspace() {
+  return <div>工作台首页</div>;
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/workspace/auto-group/Detail.tsx b/nkebao/src/pages/workspace/auto-group/Detail.tsx
new file mode 100644
index 00000000..3c6750a0
--- /dev/null
+++ b/nkebao/src/pages/workspace/auto-group/Detail.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+export default function AutoGroupDetail() {
+  const { id } = useParams();
+  return <div>分组详情页，当前ID: {id}</div>;
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/workspace/moments-sync/Detail.tsx b/nkebao/src/pages/workspace/moments-sync/Detail.tsx
new file mode 100644
index 00000000..f67a5ab5
--- /dev/null
+++ b/nkebao/src/pages/workspace/moments-sync/Detail.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+export default function MomentsSyncDetail() {
+  const { id } = useParams();
+  return <div>朋友圈同步详情页，当前ID: {id}</div>;
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/workspace/moments-sync/MomentsSync.tsx b/nkebao/src/pages/workspace/moments-sync/MomentsSync.tsx
new file mode 100644
index 00000000..ab0720f8
--- /dev/null
+++ b/nkebao/src/pages/workspace/moments-sync/MomentsSync.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function MomentsSync() {
+  return <div>朋友圈同步页</div>;
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/workspace/traffic-distribution/Detail.tsx b/nkebao/src/pages/workspace/traffic-distribution/Detail.tsx
new file mode 100644
index 00000000..60c5a1f9
--- /dev/null
+++ b/nkebao/src/pages/workspace/traffic-distribution/Detail.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+export default function TrafficDistributionDetail() {
+  const { id } = useParams();
+  return <div>流量分配详情页，当前ID: {id}</div>;
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/workspace/traffic-distribution/TrafficDistribution.tsx b/nkebao/src/pages/workspace/traffic-distribution/TrafficDistribution.tsx
new file mode 100644
index 00000000..f7422f29
--- /dev/null
+++ b/nkebao/src/pages/workspace/traffic-distribution/TrafficDistribution.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function TrafficDistribution() {
+  return <div>流量分配页</div>;
+} 
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 5980b39c..2def5ad8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2,5 +2,137 @@
   "name": "Project",
   "lockfileVersion": 3,
   "requires": true,
-  "packages": {}
+  "packages": {
+    "": {
+      "dependencies": {
+        "@types/react-router-dom": "^5.3.3",
+        "react-router-dom": "^7.6.3"
+      }
+    },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmmirror.com/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.1.8",
+      "resolved": "https://registry.npmmirror.com/@types/react/-/react-19.1.8.tgz",
+      "integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmmirror.com/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmmirror.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmmirror.com/react/-/react-19.1.0.tgz",
+      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmmirror.com/react-dom/-/react-dom-19.1.0.tgz",
+      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "scheduler": "^0.26.0"
+      },
+      "peerDependencies": {
+        "react": "^19.1.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmmirror.com/react-router/-/react-router-7.6.3.tgz",
+      "integrity": "sha512-zf45LZp5skDC6I3jDLXQUu0u26jtuP4lEGbc7BbdyxenBN1vJSTA18czM2D+h5qyMBuMrD+9uB+mU37HIoKGRA==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-7.6.3.tgz",
+      "integrity": "sha512-DiWJm9qdUAmiJrVWaeJdu4TKu13+iB/8IEi0EW/XgaHCjW/vWGrwzup0GVvaMteuZjKnh5bEvJP/K0MDnzawHw==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.6.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmmirror.com/scheduler/-/scheduler-0.26.0.tgz",
+      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmmirror.com/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    }
+  }
 }
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..311f33b2
--- /dev/null
+++ b/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@types/react-router-dom": "^5.3.3",
+    "react-router-dom": "^7.6.3"
+  }
+}