新增dashboard组件

themes/starter/components/Header.js

@@ -86,12 +86,13 @@ export const Header = props => {
                       </div>
                     </SignedOut>
                     <SignedIn>
-                      <Link
-                        href='/dashboard'
-                        className='bg-black hover:bg-gray-900 text-white py-2 px-4 rounded-lg '>
-                        Dashboard
-                      </Link>
                       <UserButton />
+
+                      <button
+                        type='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'>
+                        <Link href='/dashboard'>Dashboard</Link>
+                      </button>
                     </SignedIn>
                   </>
                 )}

themes/starter/index.js

@@ -27,6 +27,8 @@ import { Style } from './style'
 import Comment from '@/components/Comment'
 import replaceSearchResult from '@/components/Mark'
 import ShareBar from '@/components/ShareBar'
+import DashboardBody from '@/components/ui/dashboard/DashboardBody'
+import DashboardHeader from '@/components/ui/dashboard/DashboardHeader'
 import { useGlobal } from '@/lib/global'
 import { loadWowJS } from '@/lib/plugins/wow'
 import { SignIn, SignUp } from '@clerk/nextjs'
@@ -176,7 +178,39 @@ const LayoutSlug = props => {
     </>
   )
 }
+/**
+ * 仪表盘
+ * @param {*} props
+ * @returns
+ */
+const LayoutDashboard = props => {
+  const { post } = props
 
+  return (
+    <>
+      <div className='container grow'>
+        <div className='flex flex-wrap justify-center -mx-4'>
+          <div id='container-inner' className='w-full p-4'>
+            {post && (
+              <div id='article-wrapper' className='mx-auto'>
+                <NotionPage {...props} />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      {/* 仪表盘 */}
+      <DashboardHeader />
+      <DashboardBody />
+    </>
+  )
+}
+
+/**
+ * 搜索
+ * @param {*} props
+ * @returns
+ */
 const LayoutSearch = props => {
   const { keyword } = props
   const router = useRouter()
@@ -491,6 +525,7 @@ export {
   LayoutArchive,
   LayoutBase,
   LayoutCategoryIndex,
+  LayoutDashboard,
   LayoutIndex,
   LayoutPostList,
   LayoutSearch,

themes/theme.js

@@ -50,46 +50,34 @@ export const DynamicLayout = props => {
 
 /**
  * 加载主题文件
- * 如果是
  * @param {*} router
+ * @param {*} theme
  * @returns
  */
 export const getLayoutByTheme = ({ router, theme }) => {
   const themeQuery = getQueryParam(router.asPath, 'theme') || theme
-  if (themeQuery !== BLOG.THEME) {
-    return dynamic(
-      () =>
-        import(`@/themes/${themeQuery}`).then(m => {
-          setTimeout(() => {
-            checkThemeDOM()
-          }, 500)
+  const layoutName = getLayoutNameByPath(router.pathname, router.asPath)
+  const isDefaultTheme = !themeQuery || themeQuery === BLOG.THEME
 
-          const components =
-            m[getLayoutNameByPath(router.pathname, router.asPath)]
-          if (components) {
-            return components
-          } else {
-            return m.LayoutSlug
-          }
-        }),
+  const loadThemeComponents = componentsSource => {
+    const components =
+      componentsSource[layoutName] || componentsSource.LayoutSlug
+    setTimeout(fixThemeDOM, isDefaultTheme ? 100 : 500) // 根据主题选择延迟时间
+    return components
+  }
+
+  if (isDefaultTheme) {
+    return loadThemeComponents(ThemeComponents)
+  } else {
+    return dynamic(
+      () => import(`@/themes/${themeQuery}`).then(m => loadThemeComponents(m)),
       { ssr: true }
     )
-  } else {
-    setTimeout(() => {
-      checkThemeDOM()
-    }, 100)
-    const components =
-      ThemeComponents[getLayoutNameByPath(router.pathname, router.asPath)]
-    if (components) {
-      return components
-    } else {
-      return ThemeComponents.LayoutSlug
-    }
   }
 }
 
 /**
- * 根据路径 获取对应的layout
+ * 根据路径 获取对应的layout名称
  * @param {*} path
  * @returns
  */
@@ -101,8 +89,9 @@ const getLayoutNameByPath = path => {
 
 /**
  * 切换主题时的特殊处理
+ * 删除多余的元素
  */
-const checkThemeDOM = () => {
+const fixThemeDOM = () => {
   if (isBrowser) {
     const elements = document.querySelectorAll('[id^="theme-"]')
     if (elements?.length > 1) {