开启 ppr 优化渲染性能

src/components/stores/client.tsx

@@ -0,0 +1,65 @@
+'use client'
+import {createStore, StoreApi} from 'zustand/vanilla'
+import {persist} from 'zustand/middleware'
+import {createContext, ReactNode, useContext, useState} from 'react'
+import {useStore} from 'zustand/react'
+
+// store
+export type ClientState = {
+  breakpoint: {
+    sm: boolean
+    md: boolean
+    lg: boolean
+    xl: boolean
+  }
+}
+export type ClientActions = {
+  setBreakpoints: (breakpoints: Partial<ClientState['breakpoint']>) => void
+}
+export type ClientStore = ClientState & ClientActions
+
+export const createClientStore = () => {
+  return createStore<ClientStore>()(persist(
+    setState => ({
+      breakpoint: {
+        sm: false,
+        md: false,
+        lg: false,
+        xl: false,
+      },
+      setBreakpoints: breakpoints => setState(state => ({
+        breakpoint: {
+          ...state.breakpoint,
+          ...breakpoints,
+        },
+      })),
+    }),
+    {
+      name: 'client-store',
+      partialize: state => ({
+        device: state.breakpoint,
+      }),
+    },
+  ))
+}
+
+// provider
+const ClientStoreContext = createContext<StoreApi<ClientStore> | null>(null)
+
+export const ClientStoreProvider = (props: {children: ReactNode}) => {
+  const [store] = useState(() => createClientStore())
+  return (
+    <ClientStoreContext.Provider value={store}>
+      {props.children}
+    </ClientStoreContext.Provider>
+  )
+}
+
+// consumer
+export function useClientStore<T>(selector: (state: ClientStore) => T) {
+  const store = useContext(ClientStoreContext)
+  if (!store) {
+    throw new Error('ClientStoreContext 没有正确初始化')
+  }
+  return useStore(store, selector)
+}

src/components/stores/layout.tsx

@@ -0,0 +1,56 @@
+'use client'
+import {createStore, StoreApi} from 'zustand/vanilla'
+import {persist} from 'zustand/middleware'
+import {createContext, ReactNode, useContext, useState} from 'react'
+import {useStore} from 'zustand/react'
+
+// store
+export type LayoutState = {
+  navbar: boolean
+}
+export type LayoutActions = {
+  toggleNavbar: () => void
+  setNavbar: (navbar: boolean) => void
+}
+export type LayoutStore = LayoutState & LayoutActions
+
+export const createLayoutStore = () => {
+  return createStore<LayoutStore>()(persist(
+    setState => ({
+      navbar: false,
+      toggleNavbar: () => setState((state) => {
+        return {navbar: !state.navbar}
+      }),
+      setNavbar: navbar => setState((_) => {
+        return {navbar}
+      }),
+    }),
+    {
+      name: 'layout-store',
+      partialize: state => ({
+        navbar: state.navbar,
+      }),
+    },
+  ))
+}
+
+// provider
+const LayoutStoreContext = createContext<StoreApi<LayoutStore> | null>(null)
+
+export const LayoutStoreProvider = (props: {children: ReactNode}) => {
+  const [store] = useState(() => createLayoutStore())
+  return (
+    <LayoutStoreContext.Provider value={store}>
+      {props.children}
+    </LayoutStoreContext.Provider>
+  )
+}
+
+// consumer
+export function useLayoutStore<T>(selector: (state: LayoutStore) => T) {
+  const context = useContext(LayoutStoreContext)
+  if (!context) {
+    throw new Error('LayoutStoreContext 没有正确初始化')
+  }
+  return useStore(context, selector)
+}

src/components/stores/profile.tsx

@@ -0,0 +1,48 @@
+'use client'
+import {User} from '@/lib/models'
+import {createStore, StoreApi} from 'zustand/vanilla'
+import {getProfile} from '@/actions/auth'
+import {createContext, useContext, useState} from 'react'
+import {useStore} from 'zustand/react'
+
+// store
+export type ProfileState = {
+  profile: Promise<User | null>
+}
+export type ProfileActions = {
+  refreshProfile: () => void
+}
+export type ProfileStore = ProfileState & ProfileActions
+
+export function createProfileStore(profile: Promise<User | null>) {
+  return createStore<ProfileStore>()(set => ({
+    profile,
+    refreshProfile: () => {
+      set({profile: getProfile().then(resp => resp.success ? resp.data : null)})
+    },
+  }))
+}
+
+// provider
+export const ProfileStoreContext = createContext<StoreApi<ProfileStore> | null>(null)
+
+export const ProfileStoreProvider = (props: {
+  profile: Promise<User | null>
+  children: React.ReactNode
+}) => {
+  const [store] = useState(() => createProfileStore(props.profile))
+  return (
+    <ProfileStoreContext.Provider value={store}>
+      {props.children}
+    </ProfileStoreContext.Provider>
+  )
+}
+
+// consumer
+export function useProfileStore<T>(selector: (state: ProfileStore) => T) {
+  const context = useContext(ProfileStoreContext)
+  if (!context) {
+    throw new Error('ProfileStoreContext 没有正确初始化')
+  }
+  return useStore(context, selector)
+}