优化用户数据初始化时机

2025-11-18 19:16:24 +08:00
parent 5b1dae6e6c
commit fa6a4e5121
19 changed files with 52 additions and 52 deletions
--- a/.zed/settings.json
+++ b/.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"
  }
--- a/bun.lock
+++ b/bun.lock
@@ -63,6 +63,8 @@
        "husky": "^9.1.7",
        "rehype-highlight": "^7.0.2",
        "tailwindcss": "^4",
+      },
+      "peerDependencies": {
        "typescript": "^5",
      },
    },
--- a/package.json
+++ b/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"
--- a/src/app/(home)/_components/header/common.tsx
+++ b/src/app/(home)/_components/header/common.tsx
--- a/src/app/(home)/_components/header/menu-help.tsx
+++ b/src/app/(home)/_components/header/menu-help.tsx
--- a/src/app/(home)/_components/header/menu-mobile.tsx
+++ b/src/app/(home)/_components/header/menu-mobile.tsx
--- a/src/app/(home)/_components/header/menu-product.tsx
+++ b/src/app/(home)/_components/header/menu-product.tsx
--- a/src/app/(home)/_components/header/menu-solution.tsx
+++ b/src/app/(home)/_components/header/menu-solution.tsx
--- a/src/app/(home)/data-capture/page.tsx
+++ b/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">
-            <Wrap className="relative  pt-30 pb-48 max-md:pt-32 max-md:pb-24 min-h-[500px]">
+          <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]">
              <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
--- a/src/app/(home)/@footer/page.tsx
+++ b/src/app/(home)/@footer/page.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
--- a/src/app/(home)/@header/page.tsx
+++ b/src/app/(home)/@header/page.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 ProductMenu from './menu-product'
-import HelpMenu from './menu-help'
-import MobileMenu from './menu-mobile'
+import {HeaderContext} from './_components/header/common'
+import SolutionMenu from './_components/header/menu-solution'
+import ProductMenu from './_components/header/menu-product'
+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(' ')}
--- a/src/app/(home)/layout.tsx
+++ b/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
--- a/src/app/(home)/page.tsx
+++ b/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]"/>
--- a/src/app/admin/(dashboard)/page.tsx
+++ b/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"
--- a/src/app/admin/identify/page.tsx
+++ b/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">
--- a/src/app/admin/profile/page.tsx
+++ b/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"
--- a/src/app/layout.tsx
+++ b/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}>
-          <Effects>
-            {children}
-          </Effects>
+        <StoresProvider>
+          <Effects>{children}</Effects>
        </StoresProvider>
        <Toaster position="top-center" richColors expand/>
      </body>
--- a/src/components/stores-provider.tsx
+++ b/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) {
--- a/src/lib/stores/profile.ts
+++ b/src/lib/stores/profile.ts
@@ -12,14 +12,12 @@ export type ProfileActions = {
  refreshProfile: () => Promise<void>
 }

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