clerk 相关

2026-05-13 23:16:47 +00:00 · 2024-09-23 17:35:46 +08:00
parent de479a65a6
commit f0cefd305b
3 changed files with 57 additions and 29 deletions
--- a/themes/starter/components/Header.js
+++ b/themes/starter/components/Header.js
@@ -1,6 +1,7 @@
 /* eslint-disable no-unreachable */
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
+import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
 import throttle from 'lodash.throttle'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useState } from 'react'
@@ -11,12 +12,15 @@ import { MenuList } from './MenuList'
 /**
 * 顶部导航栏
 */
-export const NavBar = props => {
+export const Header = props => {
  const router = useRouter()
  const { isDarkMode } = useGlobal()
  const [buttonTextColor, setColor] = useState(
    router.route === '/' ? 'text-white' : ''
  )
+
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+
  useEffect(() => {
    if (isDarkMode || router.route === '/') {
      setColor('text-white')
@@ -60,22 +64,27 @@ export const NavBar = props => {
              <MenuList {...props} />

              {/* 右侧功能 */}
-              <div className='flex items-center justify-end pr-16 lg:pr-0'>
+              <div className='flex items-center gap-4 justify-end pr-16 lg:pr-0'>
                {/* 深色模式切换 */}
                <DarkModeButton />
                {/* 注册登录功能 */}
-                <div className='hidden sm:flex'>
-                  <a
-                    href={siteConfig('STARTER_NAV_BUTTON_1_URL')}
-                    className={`loginBtn ${buttonTextColor}  px-[22px] py-2 text-base font-medium hover:opacity-70`}>
-                    {siteConfig('STARTER_NAV_BUTTON_1_TEXT')}
-                  </a>
-                  <a
-                    href={siteConfig('STARTER_NAV_BUTTON_2_URL')}
-                    className={`signUpBtn ${buttonTextColor} rounded-md bg-white bg-opacity-20 px-6 py-2 text-base font-medium duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark`}>
-                    {siteConfig('STARTER_NAV_BUTTON_2_TEXT')}
-                  </a>
-                </div>
+                <SignedOut>
+                  <div className='hidden sm:flex gap-4'>
+                    <a
+                      href={siteConfig('STARTER_NAV_BUTTON_1_URL')}
+                      className={`loginBtn ${buttonTextColor} p-2 text-base font-medium hover:opacity-70`}>
+                      {siteConfig('STARTER_NAV_BUTTON_1_TEXT')}
+                    </a>
+                    <a
+                      href={siteConfig('STARTER_NAV_BUTTON_2_URL')}
+                      className={`signUpBtn ${buttonTextColor} p-2 rounded-md bg-white bg-opacity-20 py-2 text-base font-medium duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark`}>
+                      {siteConfig('STARTER_NAV_BUTTON_2_TEXT')}
+                    </a>
+                  </div>
+                </SignedOut>
+                <SignedIn>
+                  <UserButton />
+                </SignedIn>
              </div>
            </div>
          </div>
--- a/themes/starter/index.js
+++ b/themes/starter/index.js
@@ -2,13 +2,6 @@
 /* eslint-disable @next/next/no-img-element */

 'use client'
-
-/**
- * 这是一个空白主题，方便您用作创建新主题时的模板，从而开发出您自己喜欢的主题
- * 1. 禁用了代码质量检查功能，提高了代码的宽容度；您可以使用标准的html写法
- * 2. 内容大部分是在此文件中写死，notion数据从props参数中传进来
- * 3. 您可在此网站找到更多喜欢的组件 https://www.tailwind-kit.com/
- */
 import Loading from '@/components/Loading'
 import NotionPage from '@/components/NotionPage'
 import { siteConfig } from '@/lib/config'
@@ -23,8 +16,8 @@ import { Contact } from './components/Contact'
 import { FAQ } from './components/FAQ'
 import { Features } from './components/Features'
 import { Footer } from './components/Footer'
+import { Header } from './components/Header'
 import { Hero } from './components/Hero'
-import { NavBar } from './components/NavBar'
 import { Pricing } from './components/Pricing'
 import { Team } from './components/Team'
 import { Testimonials } from './components/Testimonials'
@@ -32,11 +25,13 @@ import CONFIG from './config'
 import { Style } from './style'
 // import { MadeWithButton } from './components/MadeWithButton'
 import { loadWowJS } from '@/lib/plugins/wow'
+import { SignIn, SignUp } from '@clerk/nextjs'
 import Link from 'next/link'
 import { Banner } from './components/Banner'
 import { CTA } from './components/CTA'
 import { SignInForm } from './components/SignInForm'
 import { SVG404 } from './components/svg/SVG404'
+
 /**
 * 布局框架
 * Landing-2 主题用作产品落地页展示
@@ -58,14 +53,17 @@ const LayoutBase = props => {
      id='theme-starter'
      className={`${siteConfig('FONT_STYLE')} min-h-screen flex flex-col dark:bg-[#212b36] scroll-smooth`}>
      <Style />
-      <NavBar {...props} />
+      {/* 页头 */}
+      <Header {...props} />

      {children}

+      {/* 页脚 */}
      <Footer {...props} />

      {/* 悬浮按钮 */}
      <BackToTopButton />
+
      {/* <MadeWithButton/> */}
    </div>
  )
@@ -101,7 +99,8 @@ const LayoutIndex = props => {
      {siteConfig('STARTER_CONTACT_ENABLE') && <Contact />}
      {/* 合作伙伴 */}
      {siteConfig('STARTER_BRANDS_ENABLE') && <Brand />}
-      <CTA />
+      {/* 行动呼吁 */}
+      {siteConfig('STARTER_CTA_ENABLE') && <CTA />}
    </>
  )
 }
@@ -220,6 +219,7 @@ const LayoutTagIndex = props => <></>
 * @returns
 */
 const LayoutSignIn = props => {
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
  const title = siteConfig('STARTER_SIGNIN', '登录')
  const description = siteConfig(
    'STARTER_SIGNIN_DESCRITION',
@@ -229,7 +229,15 @@ const LayoutSignIn = props => {
    <>
      <div className='grow mt-20'>
        <Banner title={title} description={description} />
-        <SignInForm />
+        {/* clerk预置表单 */}
+        {enableClerk && (
+          <div className='flex justify-center py-6'>
+            <SignIn />
+          </div>
+        )}
+
+        {/* 自定义登录表单 */}
+        {!enableClerk && <SignInForm />}
      </div>
    </>
  )
@@ -241,6 +249,8 @@ const LayoutSignIn = props => {
 * @returns
 */
 const LayoutSignUp = props => {
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+
  const title = siteConfig('STARTER_SIGNIN', '注册')
  const description = siteConfig(
    'STARTER_SIGNIN_DESCRITION',
@@ -250,7 +260,16 @@ const LayoutSignUp = props => {
    <>
      <div className='grow mt-20'>
        <Banner title={title} description={description} />
-        <SignInForm />
+
+        {/* clerk预置表单 */}
+        {enableClerk && (
+          <div className='flex justify-center py-6'>
+            <SignUp />
+          </div>
+        )}
+
+        {/* 自定义登录表单 */}
+        {!enableClerk && <SignUpForm />}
      </div>
    </>
  )
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,7 @@
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
    "noEmit": true,
    "incremental": true,
    "target": "es6",
@@ -21,12 +21,12 @@
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
-    "jsx": "react-jsx"
+    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.json",
-    "**/*.js",
+    // "**/*.js",
    "**/*.ts",
    "**/*.tsx",
    "**/*.jsx"