新增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>
+  )
+}

components/ui/dashboard/DashboardHeader.js

@@ -0,0 +1,41 @@
+import LazyImage from '@/components/LazyImage'
+import { useGlobal } from '@/lib/global'
+import formatDate from '@/lib/utils/formatDate'
+import { SignOutButton } from '@clerk/nextjs'
+/**
+ * 仪表盘页头
+ * @returns
+ */
+export default function DashboardHeader() {
+  const { user } = useGlobal()
+
+  return (
+    <div className='flex w-full container mx-auto mt-24 justify-ends'>
+      {/* 头像昵称 */}
+      <div className='flex items-center gap-4 w-full'>
+        <LazyImage
+          className='w-10 h-10 rounded-full'
+          src={user?.imageUrl}
+          alt={user?.fullName}
+        />
+        <div class='font-medium dark:text-white'>
+          <div>{user?.fullName}</div>
+          <div className='text-sm text-gray-500 gap-x-2 flex dark:text-gray-400'>
+            <span>{user?.username}</span>
+            <span>{formatDate(user?.createdAt)}</span>
+          </div>
+        </div>
+      </div>
+      {/* 登出按钮 */}
+      <div className='flex items-center'>
+        <SignOutButton redirectUrl='/'>
+          <button className='text-white bg-gray-800 hover:bg-gray-900 hover:ring-4 hover:ring-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700'>
+            <span className='text-nowrap'>
+              <i className='fas fa-right-from-bracket' /> Sign Out
+            </span>
+          </button>
+        </SignOutButton>
+      </div>
+    </div>
+  )
+}

components/ui/dashboard/DashboardMenuList.js

@@ -0,0 +1,34 @@
+import Link from 'next/link'
+
+/**
+ * 仪表盘菜单
+ * @returns
+ */
+export default function DashboardMenuList() {
+  const dashBoardMenus = [
+    { title: '控制台', href: '/dashboard' },
+    { title: '基础资料', href: '/dashboard/user-profile' },
+    { title: '我的会员', href: '/dashboard/membership' },
+    { title: '我的订单', href: '/dashboard/order' },
+    { title: '我的收藏', href: '/dashboard/favorite' }
+  ]
+  return (
+    <ul
+      role='menu'
+      className='side-tabs-list bg-white border rounded-lg shadow-lg p-2 space-y-2'>
+      {dashBoardMenus?.map((item, index) => (
+        <li
+          role='menuitem'
+          key={index}
+          className='hover:bg-gray-100 rounded-lg cursor-pointer block'>
+          <Link
+            href={item.href}
+            className='block py-2 px-4 w-full' // 让 Link 填充整个 li
+          >
+            {item.title}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}