优化用户数据初始化时机

.zed/settings.json

@@ -3,7 +3,7 @@
 // For a full list of overridable settings, and general information on folder-specific settings,
 // see the documentation: https://zed.dev/docs/configuring-zed#settings-files
 {
-  "language_servers": ["...", "!biome"],
+  "language_servers": ["...", "!biome", "!typescript-language-server"],
   "formatter": {
     "code_action": "source.fixAll.eslint"
   }

bun.lock

@@ -63,6 +63,8 @@
         "husky": "^9.1.7",
         "rehype-highlight": "^7.0.2",
         "tailwindcss": "^4",
+      },
+      "peerDependencies": {
         "typescript": "^5",
       },
     },

package.json

@@ -67,7 +67,9 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "husky": "^9.1.7",
     "rehype-highlight": "^7.0.2",
-    "tailwindcss": "^4",
+    "tailwindcss": "^4"
+  },
+  "peerDependencies": {
     "typescript": "^5"
   },
   "packageManager": "bun@1.2.19"

src/app/(home)/data-capture/page.tsx

@@ -32,8 +32,8 @@ export default function CollectPage(props: CollectPageProps) {
         ]}/>
         <main className="flex flex-col gap-16 lg:gap-32 mb-16 lg:mb-32">
           {/* banner */}
-          <section className="flex-none basis-40 relative flex flex-col gap-4  justify-center">
+          <section className="flex-none basis-40 relative flex flex-col gap-4 justify-center">
-            <Wrap className="relative  pt-30 pb-48 max-md:pt-32 max-md:pb-24 min-h-[500px]">
+            <Wrap className="relative pt-30 pb-48 max-md:pt-32 max-md:pb-24 min-h-[500px]">
               <Image src={s12} alt="背景图" className="absolute inset-0 w-full h-full object-cover"/>
               <div className="relative pl-20 w-1/2 flex-1">
                 <h1 className="text-4xl">数据抓取</h1>
@@ -129,7 +129,7 @@ export default function CollectPage(props: CollectPageProps) {
           </Section>
 
           {/* 优势 2 */}
-          <Section title="产品核心优势  ">
+          <Section title="产品核心优势 ">
             <ul className={merge('grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8')}>
               <li className={merge('p-8 flex flex-col gap-5 shadow-[4px_4px_20px_4px] shadow-blue-50 bg-white rounded-lg max-md:items-center')}>
                 <Image

src/app/(home)/footer.tsx

@@ -18,8 +18,8 @@ export default function Footer(props: FooterProps) {
             <p className={`text-sm text-gray-500 `}>电话/微信:18751847847</p>
             <p className={`text-sm text-gray-500 `}>QQ号:800180559</p>
             <h3 className="hidden sm:block">服务保障</h3>
-            <p className="text-sm text-gray-500  hidden sm:block">售前服务</p>
+            <p className="text-sm text-gray-500 hidden sm:block">售前服务</p>
-            <p className="text-sm text-gray-500  hidden sm:block">技术支持</p>
+            <p className="text-sm text-gray-500 hidden sm:block">技术支持</p>
           </div>
 
           <SiteNavList

src/app/(home)/header.tsx

@@ -2,10 +2,11 @@
 import {useCallback, useEffect, useMemo, useState, PointerEvent, ComponentProps} from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
-import SolutionMenu from './menu-solution'
+import {HeaderContext} from './_components/header/common'
-import ProductMenu from './menu-product'
+import SolutionMenu from './_components/header/menu-solution'
-import HelpMenu from './menu-help'
+import ProductMenu from './_components/header/menu-product'
-import MobileMenu from './menu-mobile'
+import HelpMenu from './_components/header/menu-help'
+import MobileMenu from './_components/header/menu-mobile'
 import Wrap from '@/components/wrap'
 import logo from '@/assets/logo.webp'
 import {Button} from '@/components/ui/button'
@@ -14,11 +15,11 @@ import UserCenter from '@/components/composites/user-center'
 import {MenuIcon} from 'lucide-react'
 import down from '@/assets/header/down.svg'
 import {merge} from '@/lib/utils'
-import {HeaderContext} from './common'
+import {User} from '@/lib/models'
 
-export type ProviderProps = {}
+export type HeaderProps = {}
 
-export default function Page(props: ProviderProps) {
+export default function Header(props: HeaderProps) {
   // ======================
   // 滚动条状态
   // ======================
@@ -163,7 +164,7 @@ export default function Page(props: ProviderProps) {
 
             {/* 登录 */}
             <div className="flex items-center">
-              {profile == undefined
+              {profile == null
                 ? (
                   <>
                     <Link
@@ -175,7 +176,7 @@ export default function Page(props: ProviderProps) {
                     <Link
                       href="/login?type=sms"
                       className={[
-                        `w-20 lg:w-24 h-10 lg:h-12 bg-gradient-to-r  rounded-sm flex items-center justify-center lg:text-lg text-white`,
+                        `w-20 lg:w-24 h-10 lg:h-12 bg-linear-to-r rounded-sm flex items-center justify-center lg:text-lg text-white`,
                         `transition-colors duration-200 ease-in-out`,
                         `from-blue-500 to-cyan-400 hover:from-blue-500 hover:to-cyan-300`,
                       ].join(' ')}

src/app/(home)/layout.tsx

@@ -1,6 +1,6 @@
-import Header from '@/app/(home)/@header/page'
-import Footer from '@/app/(home)/@footer/page'
 import {ReactNode} from 'react'
+import Header from './header'
+import Footer from './footer'
 
 export type HomeLayoutProps = {
   children: ReactNode

src/app/(home)/page.tsx

@@ -2,7 +2,7 @@
 import {ReactNode} from 'react'
 import Wrap from '@/components/wrap'
 import Image from 'next/image'
-import React, {useState} from 'react'
+import React from 'react'
 import {useRouter} from 'next/navigation'
 import {useProfileStore} from '@/components/stores-provider'
 
@@ -15,7 +15,7 @@ export default function Home() {
     <main className="flex flex-col gap-16 lg:gap-32 mb-16 lg:mb-32">
 
       {/* banner */}
-      <section className={`w-full bg-[url('/banner.webp')] bg-cover bg-[center_right_40%]`}>
+      <section className={`w-full bg-[url('/banner.webp')] bg-cover bg-position-[center_right_40%]`}>
         <Wrap className="pt-64 pb-48 max-md:pt-32 max-md:pb-24">
           <h1 className="text-4xl">安全，稳定，快速，合规的代理服务器</h1>
           <p className="mt-10 text-gray-500">遍布全国的代理服务器节点为用户提供智能可靠的IP代理服务</p>
@@ -38,7 +38,7 @@ export default function Home() {
           <button
             className={[
               `mt-32 max-md:mt-20 w-96 max-md:w-full h-16 md:h-24 rounded-lg shadow-lg`,
-              `bg-gradient-to-r from-blue-500 to-cyan-400 text-white text-xl lg:text-4xl`,
+              `bg-linear-to-r from-blue-500 to-cyan-400 text-white text-xl lg:text-4xl`,
             ].join(' ')}
             onClick={() => {
               if (profile) {
@@ -59,22 +59,22 @@ export default function Home() {
         <ul className="shadow-[0_0_20px_4px] shadow-blue-50 p-8 flex max-lg:flex-col">
           <li className="flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200">
             <p className="text-xl">全国城市线路数量</p>
-            <p className="mt-9 max-lg:mt-2 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">350+</p>
+            <p className="mt-9 max-lg:mt-2 text-5xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">350+</p>
             <div className="lg:hidden w-24 border-b mt-4 border-gray-200"></div>
           </li>
           <li className="flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200">
             <p className="text-xl">每日更新IP数量</p>
-            <p className="mt-9 max-lg:mt-2 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">1,350,129</p>
+            <p className="mt-9 max-lg:mt-2 text-5xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">1,350,129</p>
             <div className="lg:hidden w-24 border-b mt-4 border-gray-200"></div>
           </li>
           <li className="flex-1 flex flex-col items-center justify-center lg:border-r max-lg:mb-4 border-gray-200">
             <p className="text-xl">用户量</p>
-            <p className="mt-9 max-lg:mt-2 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">26,578</p>
+            <p className="mt-9 max-lg:mt-2 text-5xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">26,578</p>
             <div className="lg:hidden w-24 border-b mt-4 border-gray-200"></div>
           </li>
           <li className="flex-1 flex flex-col items-center justify-center">
             <p className="text-xl">IP可用率</p>
-            <p className="mt-9 max-lg:mt-2 text-5xl bg-gradient-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">99%</p>
+            <p className="mt-9 max-lg:mt-2 text-5xl bg-linear-to-t from-blue-500 to-cyan-400 bg-clip-text text-transparent font-bold pb-2 -mb-2">99%</p>
           </li>
         </ul>
         <img src="/map.webp" alt="map" className="w-[1200px]"/>

src/app/admin/(dashboard)/page.tsx

@@ -108,7 +108,7 @@ function Pins(props: DashboardPinsProps) {
           <div className="flex-1 flex items-center justify-between">
             <h4 className="text-balance">包时</h4>
             <p className="flex flex-col items-end">
-              <span className="text-sm  text-weak" >当日可提取数量</span>
+              <span className="text-sm text-weak" >当日可提取数量</span>
               <span className="text-sm">{props.long.resource_daily_free_sum}</span>
             </p>
           </div>
@@ -116,7 +116,7 @@ function Pins(props: DashboardPinsProps) {
           <div className="flex-1 flex items-center justify-between">
             <h4 className="text-balance">包量</h4>
             <p className="flex flex-col items-end">
-              <span className="text-sm  text-weak">剩余可提取数量</span>
+              <span className="text-sm text-weak">剩余可提取数量</span>
               <span className="text-sm">{props.long.resource_quota_sum}</span>
             </p>
           </div>
@@ -149,7 +149,7 @@ function Announcements(props: Props) {
   return (
     <Card className="h-full">
       <CardHeader>
-        <div className="flex justify-between  gap-2">
+        <div className="flex justify-between gap-2">
           <CardTitle>公告</CardTitle>
           {/* <Button
             theme="text"

src/app/admin/identify/page.tsx

@@ -103,7 +103,7 @@ export default function IdentifyPage(props: IdentifyPageProps) {
 
   return (
     <Page className="flex-row max-md:flex-col">
-      <div className="flex-3/4 flex flex-col bg-white rounded-lg  gap-16 max-md:gap-0">
+      <div className="flex-3/4 flex flex-col bg-white rounded-lg gap-16 max-md:gap-0">
 
         {/* banner */}
         <section className="flex-none basis-40 relative flex flex-col gap-4 pl-8 pr-4 justify-center">

src/app/admin/profile/page.tsx

@@ -47,14 +47,14 @@ export default function ProfilePage(props: ProfilePageProps) {
     <Page className="lg:flex-row lg:items-stretch md:flex-col max-sm:flex-col">
       <div className="flex-3/4 flex flex-col gap-4">
         {/* banner */}
-        <section className="flex-none relative  rounded-lg p-16 pr-4 overflow-hidden flex max-sm:flex-col flex-col gap-4 pl-8 justify-center">
+        <section className="flex-none relative rounded-lg p-16 pr-4 overflow-hidden flex max-sm:flex-col flex-col gap-4 pl-8 justify-center">
           <Image src={banner} alt="背景图" aria-hidden className="absolute inset-0 w-full h-full object-cover"/>
           <h3 className="text-lg font-bold z-10 relative">蓝狐HTTP邀请您参与【先测后买】服务</h3>
-          <p className="text-sm  text-gray-600 z-10 relative">为了保障您的账户安全，请先完成实名认证，即可获取福利套餐测试资格</p>
+          <p className="text-sm text-gray-600 z-10 relative">为了保障您的账户安全，请先完成实名认证，即可获取福利套餐测试资格</p>
         </section>
 
         {/* 块信息 */}
-        <div className="flex gap-4  max-md:flex-col max-sm:flex-col">
+        <div className="flex gap-4 max-md:flex-col max-sm:flex-col">
 
           <Card className="flex-1 ">
             <CardHeader>
@@ -99,7 +99,7 @@ export default function ProfilePage(props: ProfilePageProps) {
           </Card>
         </div>
 
-        <div className="flex-none rounded-lg bg-white p-4  flex max-sm:flex-col flex-col gap-8">
+        <div className="flex-none rounded-lg bg-white p-4 flex max-sm:flex-col flex-col gap-8">
 
           {/* 安全信息 */}
           <div className="flex flex-col gap-4">
@@ -276,7 +276,7 @@ function BasicForm(props: {
             <Input {...field} placeholder="请输入微信号" className="w-48 max-xl:w-full"/>
           )}
         </FormField>
-        <div className="flex justify-end gap-4 md:col-span-2  justify-self-stretch">
+        <div className="flex justify-end gap-4 md:col-span-2 justify-self-stretch">
           <Button
             theme="outline"
             type="button"

src/app/layout.tsx

@@ -5,7 +5,6 @@ import './globals.css'
 import localFont from 'next/font/local'
 import {Toaster} from '@/components/ui/sonner'
 import StoresProvider from '@/components/stores-provider'
-import {getProfile} from '@/actions/auth'
 import Effects from '@/app/effects'
 
 const font = localFont({
@@ -23,16 +22,11 @@ export default async function RootLayout({
 }: Readonly<{
   children: ReactNode
 }>) {
-  const result = await getProfile()
-  const user = result.success ? result.data : null
-
   return (
     <html lang="zh-CN">
       <body className={`${font.className}`}>
-        <StoresProvider user={user}>
+        <StoresProvider>
-          <Effects>
+          <Effects>{children}</Effects>
-            {children}
-          </Effects>
         </StoresProvider>
         <Toaster position="top-center" richColors expand/>
       </body>

src/components/stores-provider.tsx

@@ -1,5 +1,4 @@
 'use client'
-import {User} from '@/lib/models'
 import {createContext, ReactNode, useContext, useEffect, useRef} from 'react'
 import {StoreApi} from 'zustand/vanilla'
 import {useStore} from 'zustand/react'
@@ -38,16 +37,20 @@ export function useClientStore<T>(selector: (store: ClientStore) => T) {
 }
 
 export type ProfileProviderProps = {
-  user: User | null
   children: ReactNode
 }
 
 export default function StoresProvider(props: ProfileProviderProps) {
+  // 用户信息
   const profile = useRef<StoreApi<ProfileStore>>(null)
   if (!profile.current) {
     console.log('📦 create profile store')
-    profile.current = createProfileStore(props.user)
+    profile.current = createProfileStore()
   }
+  const profileStore = useRef(useStore(profile.current))
+  useEffect(() => {
+    profileStore.current.refreshProfile()
+  }, [])
 
   const layout = useRef<StoreApi<LayoutStore>>(null)
   if (!layout.current) {

src/lib/stores/profile.ts

@@ -12,14 +12,12 @@ export type ProfileActions = {
   refreshProfile: () => Promise<void>
 }
 
-export const createProfileStore = (init: User | null) => {
+export const createProfileStore = () => {
-  return createStore<ProfileStore>()(setState => ({
+  return createStore<ProfileStore>()(set => ({
-    profile: init,
+    profile: null,
     refreshProfile: async () => {
-      const profile = await getProfile()
+      const result = await getProfile()
-      setState({
+      set({profile: result.success ? result.data : null})
-        profile: profile.success ? profile.data : null,
-      })
     },
   }))
 }