新增dashboard组件

components/ui/dashboard/DashboardBody.js

@@ -0,0 +1,41 @@
+'use client'
+import { UserProfile } from '@clerk/nextjs'
+import { useRouter } from 'next/router'
+import DashboardMenuList from './DashboardMenuList'
+
+/**
+ * 仪表盘内容主体
+ * 组件懒加载
+ * @returns
+ */
+export default function DashboardBody() {
+  const asPath = useRouter()?.asPath
+
+  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'>
+        <DashboardMenuList />
+      </div>
+      <div className='main-content-wrapper grow'>
+        {asPath === '/dashboard' && <div>控制台首页</div>}
+        {(asPath === '/dashboard/user-profile' ||
+          asPath === '/dashboard/user-profile/security') && (
+          <UserProfile
+            appearance={{
+              elements: {
+                cardBox: 'w-full',
+                rootBox: 'w-full'
+              }
+            }}
+            className='bg-blue-300'
+            routing='path'
+            path='/dashboard/user-profile'
+          />
+        )}
+        {asPath === '/dashboard/membership' && <div>会员</div>}
+        {asPath === '/dashboard/order' && <div>订单</div>}
+        {asPath === '/dashboard/favorite' && <div>收藏</div>}
+      </div>
+    </div>
+  )
+}