starter\magzine\gitbook 主题dashboard元素

components/ui/dashboard/DashboardBody.js

@@ -1,25 +1,34 @@
 'use client'
 import { UserProfile } from '@clerk/nextjs'
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
-import DashboardMenuList from './DashboardMenuList'
 
+const DashboardMenuList = dynamic(() => import('./DashboardMenuList'))
+const DashboardItemMembership = dynamic(
+  () => import('./DashboardItemMembership')
+)
+const DashboardItemBalance = dynamic(() => import('./DashboardItemBalance'))
+const DashboardItemHome = dynamic(() => import('./DashboardItemHome'))
+const DashboardItemOrder = dynamic(() => import('./DashboardItemOrder'))
+const DashboardItemAffliate = dynamic(() => import('./DashboardItemAffliate'))
 /**
  * 仪表盘内容主体
  * 组件懒加载
  * @returns
  */
 export default function DashboardBody() {
-  const asPath = useRouter()?.asPath
-
+  const { asPath } = useRouter()
+  // 提取不包含查询参数的路径部分
+  const basePath = asPath.split('?')[0]
   return (
-    <div className='flex w-full container gap-x-4 min-h-96 mx-auto mt-12 mb-12 justify-center'>
-      <div className='side-tabs w-72'>
+    <div className='flex flex-col md:flex-row w-full container gap-x-4 min-h-96 mx-auto mb-12 justify-center'>
+      <div className='side-tabs w-full md:w-72'>
         <DashboardMenuList />
       </div>
-      <div className='main-content-wrapper grow'>
-        {asPath === '/dashboard' && <div>控制台首页</div>}
-        {(asPath === '/dashboard/user-profile' ||
-          asPath === '/dashboard/user-profile/security') && (
+      <div className='main-content-wrapper w-full'>
+        {basePath === '/dashboard' && <DashboardItemHome />}
+        {(basePath === '/dashboard/user-profile' ||
+          basePath === '/dashboard/user-profile/security') && (
           <UserProfile
             appearance={{
               elements: {
@@ -32,9 +41,10 @@ export default function DashboardBody() {
             path='/dashboard/user-profile'
           />
         )}
-        {asPath === '/dashboard/membership' && <div>会员</div>}
-        {asPath === '/dashboard/order' && <div>订单</div>}
-        {asPath === '/dashboard/favorite' && <div>收藏</div>}
+        {basePath === '/dashboard/balance' && <DashboardItemBalance />}
+        {basePath === '/dashboard/membership' && <DashboardItemMembership />}
+        {basePath === '/dashboard/order' && <DashboardItemOrder />}
+        {basePath === '/dashboard/affiliate' && <DashboardItemAffliate />}
       </div>
     </div>
   )