Release/4.7.10

blog.config.js

@@ -127,7 +127,8 @@ const BLOG = {
     '/[prefix]/[slug]/[...suffix]': 'LayoutSlug',
     '/auth/result': 'LayoutAuth',
     '/sign-in/[[...index]]': 'LayoutSignIn',
-    '/sign-up/[[...index]]': 'LayoutSignUp'
+    '/sign-up/[[...index]]': 'LayoutSignUp',
+    '/dashboard/[[...index]]': 'LayoutDashboard'
   },
 
   CAN_COPY: process.env.NEXT_PUBLIC_CAN_COPY || true, // 是否允许复制页面内容 默认允许，如果设置为false、则全栈禁止复制内容。
@@ -252,7 +253,7 @@ const BLOG = {
   ],
 
   // 鼠标跟随特效
-  MOUSE_FOLLOW: process.env.NEXT_PUBLIC_MOUSE_FOLLOW || true, // 开关
+  MOUSE_FOLLOW: process.env.NEXT_PUBLIC_MOUSE_FOLLOW || false, // 开关
   // 这两个只有在鼠标跟随特效开启时才生效
   // 鼠标类型 1：路劲散点 2：下降散点 3：上升散点 4：边缘向鼠标移动散点 5：跟踪转圈散点 6：路径线条 7：聚集散点 8：聚集网格 9：移动网格 10：上升粒子 11：转圈随机颜色粒子 12：圆锥放射跟随蓝色粒子
   MOUSE_FOLLOW_EFFECT_TYPE: 11, // 1-12
@@ -551,7 +552,9 @@ const BLOG = {
   VERSION: (() => {
     try {
       // 优先使用环境变量，否则从package.json中获取版本号
-      return process.env.NEXT_PUBLIC_VERSION || require('./package.json').version
+      return (
+        process.env.NEXT_PUBLIC_VERSION || require('./package.json').version
+      )
     } catch (error) {
       console.warn('Failed to load package.json version:', error)
       return '1.0.0' // 缺省版本号

components/ui/dashboard/DashboardBody.js

@@ -0,0 +1,51 @@
+'use client'
+import { UserProfile } from '@clerk/nextjs'
+import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
+
+const DashboardMenuList = dynamic(() => import('./DashboardMenuList'))
+const DashboardItemMembership = dynamic(
+  () => import('./DashboardItemMembership')
+)
+const DashboardItemBalance = dynamic(() => import('./DashboardItemBalance'))
+const DashboardItemHome = dynamic(() => import('./DashboardItemHome'))
+const DashboardItemOrder = dynamic(() => import('./DashboardItemOrder'))
+const DashboardItemAffliate = dynamic(() => import('./DashboardItemAffliate'))
+/**
+ * 仪表盘内容主体
+ * 组件懒加载
+ * @returns
+ */
+export default function DashboardBody() {
+  const { asPath } = useRouter()
+  // 提取不包含查询参数的路径部分
+  const basePath = asPath.split('?')[0]
+  return (
+    <div className='flex flex-col md:flex-row w-full container gap-x-4 min-h-96 mx-auto mb-12 justify-center'>
+      <div className='side-tabs w-full md:w-72'>
+        <DashboardMenuList />
+      </div>
+      <div className='main-content-wrapper w-full'>
+        {basePath === '/dashboard' && <DashboardItemHome />}
+        {(basePath === '/dashboard/user-profile' ||
+          basePath === '/dashboard/user-profile/security') && (
+          <UserProfile
+            appearance={{
+              elements: {
+                cardBox: 'w-full',
+                rootBox: 'w-full'
+              }
+            }}
+            className='bg-blue-300'
+            routing='path'
+            path='/dashboard/user-profile'
+          />
+        )}
+        {basePath === '/dashboard/balance' && <DashboardItemBalance />}
+        {basePath === '/dashboard/membership' && <DashboardItemMembership />}
+        {basePath === '/dashboard/order' && <DashboardItemOrder />}
+        {basePath === '/dashboard/affiliate' && <DashboardItemAffliate />}
+      </div>
+    </div>
+  )
+}

components/ui/dashboard/DashboardButton.js

@@ -0,0 +1,27 @@
+import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+/**
+ * 跳转仪表盘的按钮
+ * @returns
+ */
+export default function DashboardButton() {
+  const { asPath } = useRouter()
+  const enableDashboardButton = siteConfig('ENABLE_DASHBOARD_BUTTON', false)
+
+  if (!enableDashboardButton) {
+    return null
+  }
+
+  if (asPath?.indexOf('/dashboard') === 0) {
+    return null
+  }
+
+  return (
+    <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 me-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700'>
+      <Link href='/dashboard'>仪表盘</Link>
+    </button>
+  )
+}

components/ui/dashboard/DashboardHeader.js

@@ -0,0 +1,53 @@
+import LazyImage from '@/components/LazyImage'
+import { useGlobal } from '@/lib/global'
+import formatDate from '@/lib/utils/formatDate'
+import { SignOutButton } from '@clerk/nextjs'
+import Link from 'next/link'
+/**
+ * 仪表盘页头
+ * @returns
+ */
+export default function DashboardHeader() {
+  const { user } = useGlobal()
+
+  return (
+    <>
+      <div className='flex w-full container mx-auto mt-12 mb-12 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 className='flex items-center gap-x-2'>
+              <span>{user?.fullName}</span>
+              <Link href='/dashboard/membership'>
+                <span class='bg-gray-100 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300'>
+                  普通用户
+                </span>
+              </Link>
+            </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/DashboardItemAffliate.js

@@ -0,0 +1,187 @@
+import Link from 'next/link'
+
+/**
+ * 联盟行销
+ * @returns
+ */
+export default function DashboardItemAffliate() {
+  const cards = [
+    {
+      title: '￥0.00',
+      desc: '累计佣金',
+      className: 'bg-blue-600 hover:bg-blue-700 text-white'
+    },
+    {
+      title: '￥0.00',
+      desc: '已提现',
+      className: 'bg-cyan-600 hover:bg-cyan-700 text-white'
+    },
+    {
+      title: '￥0.00',
+      desc: '提现中',
+      className: 'bg-pink-600 hover:bg-pink-700 text-white'
+    },
+    {
+      title: '￥0.00',
+      desc: '可提现',
+      className: 'bg-emerald-600 hover:bg-emerald-700 text-white'
+    }
+  ]
+
+  return (
+    <div className='bg-white rounded-lg shadow-lg p-6 border'>
+      <div className='grid grid-cols-4 gap-4'>
+        {cards?.map((card, index) => (
+          <div
+            key={index}
+            className={`block max-w-sm p-6 text-center border cursor-pointer rounded-lg shadow ${card.className}`}>
+            <h5 className='mb-2 text-2xl font-bold tracking-tight'>
+              {card.title}
+            </h5>
+            <p className='font-normal'>{card.desc}</p>
+          </div>
+        ))}
+      </div>
+      <form className='mt-6'>
+        <div className='grid gap-6 mb-6 md:grid-cols-2'>
+          <div>
+            <label
+              for='last_name'
+              className='block mb-2 text-sm font-medium text-gray-900 dark:text-white'>
+              推广总数
+            </label>
+            <input
+              disabled
+              type='text'
+              id='last_name'
+              className='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
+              placeholder='123'
+              required
+            />
+          </div>
+          <div>
+            <label
+              for='company'
+              className='block mb-2 text-sm font-medium text-gray-900 dark:text-white'>
+              推广链接
+            </label>
+            <input
+              disabled
+              type='text'
+              id='company'
+              className='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
+              placeholder='https://tangly1024.com'
+              required
+            />
+          </div>
+
+          <div>
+            <label
+              for='website'
+              className='block mb-2 text-sm font-medium text-gray-900 dark:text-white'>
+              推广佣金提成
+            </label>
+            <input
+              disabled
+              type='url'
+              id='website'
+              className='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
+              placeholder='5%'
+              required
+            />
+          </div>
+        </div>
+
+        <hr className='my-6' />
+
+        <div className='grid gap-6 mb-6 md:grid-cols-2'>
+          <div>
+            <label
+              for='first_name'
+              className='block mb-2 text-sm font-medium text-gray-900 dark:text-white'>
+              提现账号
+            </label>
+            <input
+              type='text'
+              id='first_name'
+              className='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
+              placeholder='John'
+              required
+            />
+          </div>
+
+          <div>
+            <label
+              for='visitors'
+              className='block mb-2 text-sm font-medium text-gray-900 dark:text-white'>
+              提现金额
+            </label>
+            <input
+              type='number'
+              id='visitors'
+              className='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
+              placeholder=''
+              required
+            />
+          </div>
+        </div>
+
+        <div className='flex items-start mb-6'>
+          <div className='flex items-center h-5'>
+            <input
+              id='remember'
+              type='checkbox'
+              value=''
+              className='w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800'
+              required
+            />
+          </div>
+          <label
+            for='remember'
+            className='ms-2 text-sm font-medium text-gray-900 dark:text-gray-300'>
+            我以阅读并同意{' '}
+            <Link
+              href='/terms-of-use'
+              className='text-blue-600 hover:underline dark:text-blue-500'>
+              服务协议
+            </Link>
+            .
+          </label>
+        </div>
+        <div className='flex gap-x-2'>
+          <button
+            type='submit'
+            className='text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'>
+            提现RMB
+          </button>
+          <button
+            type='submit'
+            className='text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'>
+            提现到余额
+          </button>
+        </div>
+
+        <ul className='text-gray-600 list-disc pl-6'>
+          <li>推广说明：</li>
+          <li className='font-bold'>这只是一个演示页面，不存在真实功能！</li>
+          <li>
+            如需提现请联系网站管理员，发送您的账号信息和收款码进行人工提现
+          </li>
+          <li>
+            如果用户是通过您的推广链接购买的资源或者开通会员，则按照推广佣金比列奖励到您的佣金中
+          </li>
+          <li>
+            如果用户是通过您的链接新注册的用户，推荐人是您，该用户购买资都会给你佣金
+          </li>
+          <li>
+            如果用户是你的下级，用户使用其他推荐人链接购买，以上下级关系为准，优先给注册推荐人而不是推荐链接
+          </li>
+          <li>推广奖励金额保留一位小数点四舍五入。0.1之类的奖励金额不计算</li>
+          <li>
+            前台无法查看推广订单详情，如需查看详情可联系管理员截图查看详细记录和时间
+          </li>
+        </ul>
+      </form>
+    </div>
+  )
+}