starter\magzine\gitbook 主题dashboard元素

themes/gitbook/index.js

@@ -7,6 +7,8 @@ import LoadingCover from '@/components/LoadingCover'
 import NotionIcon from '@/components/NotionIcon'
 import NotionPage from '@/components/NotionPage'
 import ShareBar from '@/components/ShareBar'
+import DashboardBody from '@/components/ui/dashboard/DashboardBody'
+import DashboardHeader from '@/components/ui/dashboard/DashboardHeader'
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { isBrowser } from '@/lib/utils'
@@ -255,7 +257,9 @@ const LayoutIndex = props => {
         // 重定向到指定文章
         router.push(index).then(() => {
           setTimeout(() => {
-            const article = document.querySelector('#article-wrapper #notion-article')
+            const article = document.querySelector(
+              '#article-wrapper #notion-article'
+            )
             if (!article) {
               console.log(
                 '请检查您的Notion数据库中是否包含此slug页面： ',
@@ -309,7 +313,9 @@ const LayoutSlug = props => {
       setTimeout(
         () => {
           if (isBrowser) {
-            const article = document.querySelector('#article-wrapper #notion-article')
+            const article = document.querySelector(
+              '#article-wrapper #notion-article'
+            )
             if (!article) {
               router.push('/404').then(() => {
                 console.warn('找不到页面', router.asPath)
@@ -539,11 +545,40 @@ const LayoutSignUp = 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 />
+    </>
+  )
+}
+
 export {
   Layout404,
   LayoutArchive,
   LayoutBase,
   LayoutCategoryIndex,
+  LayoutDashboard,
   LayoutIndex,
   LayoutPostList,
   LayoutSearch,

themes/magzine/components/Header.js

@@ -1,8 +1,9 @@
 import Collapse from '@/components/Collapse'
 import DarkModeButton from '@/components/DarkModeButton'
+import DashboardButton from '@/components/ui/dashboard/DashboardButton'
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
-import { SignInButton, SignedOut, UserButton } from '@clerk/nextjs'
+import { SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
 import throttle from 'lodash.throttle'
 import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
@@ -200,7 +201,10 @@ export default function Header(props) {
                   </button>
                 </SignInButton>
               </SignedOut>
-              <UserButton />
+              <SignedIn>
+                <UserButton />
+                <DashboardButton />
+              </SignedIn>
             </>
           )}
         </div>

themes/magzine/index.js

@@ -6,6 +6,8 @@ import replaceSearchResult from '@/components/Mark'
 import NotionPage from '@/components/NotionPage'
 import ShareBar from '@/components/ShareBar'
 import WWAds from '@/components/WWAds'
+import DashboardBody from '@/components/ui/dashboard/DashboardBody'
+import DashboardHeader from '@/components/ui/dashboard/DashboardHeader'
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { isBrowser } from '@/lib/utils'
@@ -155,7 +157,9 @@ const LayoutSlug = props => {
       setTimeout(
         () => {
           if (isBrowser) {
-            const article = document.querySelector('#article-wrapper #notion-article')
+            const article = document.querySelector(
+              '#article-wrapper #notion-article'
+            )
             if (!article) {
               router.push('/404').then(() => {
                 console.warn('找不到页面', router.asPath)
@@ -495,11 +499,39 @@ const LayoutSignUp = 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 />
+    </>
+  )
+}
 export {
   Layout404,
   LayoutArchive,
   LayoutBase,
   LayoutCategoryIndex,
+  LayoutDashboard,
   LayoutIndex,
   LayoutPostList,
   LayoutSearch,

themes/starter/components/Header.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-unreachable */
+import DashboardButton from '@/components/ui/dashboard/DashboardButton'
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
@@ -87,12 +88,7 @@ export const Header = props => {
                     </SignedOut>
                     <SignedIn>
                       <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>
+                      <DashboardButton />
                     </SignedIn>
                   </>
                 )}

themes/starter/components/MenuItem.js

@@ -42,7 +42,7 @@ export const MenuItem = ({ link }) => {
             </svg>
           </a>
 
-          <div className='submenu relative left-0 top-full hidden w-[250px] rounded-sm bg-white p-4 transition-[top] duration-300 group-hover:opacity-100 dark:bg-dark-2 lg:invisible lg:absolute lg:top-[110%] lg:block lg:opacity-0 lg:shadow-lg lg:group-hover:visible lg:group-hover:top-full'>
+          <div className='submenu border dark:border-gray-600 relative left-0 top-full hidden w-[250px] rounded-sm bg-white p-4 transition-[top] duration-300 group-hover:opacity-100 dark:bg-dark-2 lg:invisible lg:absolute lg:top-[110%] lg:block lg:opacity-0 lg:shadow-lg lg:group-hover:visible lg:group-hover:top-full'>
             {link.subMenus.map((sLink, index) => {
               return (
                 <Link
@@ -51,7 +51,7 @@ export const MenuItem = ({ link }) => {
                   target={link?.target}
                   className='block rounded px-4 py-[10px] text-sm text-body-color hover:text-primary dark:text-dark-6 dark:hover:text-primary'>
                   {/* 子菜单SubMenuItem */}
-                  <span className='text-sm ml-4 whitespace-nowrap'>
+                  <span className='text-md ml-2 whitespace-nowrap'>
                     {link?.icon && (
                       <i className={sLink.icon + ' mr-2 my-auto'} />
                     )}{' '}

themes/starter/index.js

@@ -178,6 +178,7 @@ const LayoutSlug = props => {
     </>
   )
 }
+
 /**
  * 仪表盘
  * @param {*} props

themes/theme.js

@@ -8,17 +8,50 @@ import { getQueryParam, getQueryVariable, isBrowser } from '../lib/utils'
 export const { THEMES = [] } = getConfig().publicRuntimeConfig
 
 /**
- * 获取主体配置
+ * 获取主题配置
+ * @param {string} themeQuery - 主题查询参数（支持多个主题用逗号分隔）
+ * @returns {Promise<object>} 主题配置对象
  */
 export const getThemeConfig = async themeQuery => {
-  if (themeQuery && themeQuery !== BLOG.THEME) {
-    const THEME_CONFIG = await import(`@/themes/${themeQuery}`).then(
-      m => m.THEME_CONFIG
-    )
-    return THEME_CONFIG
-  } else {
-    return ThemeComponents?.THEME_CONFIG
+  // 如果 themeQuery 存在且不等于默认主题，处理多主题情况
+  if (typeof themeQuery === 'string' && themeQuery.trim()) {
+    // 取 themeQuery 中第一个主题（以逗号为分隔符）
+    const themeName = themeQuery.split(',')[0].trim()
+
+    // 如果 themeQuery 不等于当前默认主题，则加载指定主题的配置
+    if (themeName !== BLOG.THEME) {
+      try {
+        // 动态导入主题配置
+        const THEME_CONFIG = await import(`@/themes/${themeName}`)
+          .then(m => m.THEME_CONFIG)
+          .catch(err => {
+            console.error(`Failed to load theme ${themeName}:`, err)
+            return null // 主题加载失败时返回 null 或者其他默认值
+          })
+
+        // 如果主题配置加载成功，返回配置
+        if (THEME_CONFIG) {
+          return THEME_CONFIG
+        } else {
+          // 如果加载失败，返回默认主题配置
+          console.warn(
+            `Loading ${themeName} failed. Falling back to default theme.`
+          )
+          return ThemeComponents?.THEME_CONFIG
+        }
+      } catch (error) {
+        // 如果 import 过程中出现异常，返回默认主题配置
+        console.error(
+          `Error loading theme configuration for ${themeName}:`,
+          error
+        )
+        return ThemeComponents?.THEME_CONFIG
+      }
+    }
   }
+
+  // 如果没有 themeQuery 或 themeQuery 与默认主题相同，返回默认主题配置
+  return ThemeComponents?.THEME_CONFIG
 }
 
 /**