封装 Header 和 Navbar 组件，调整用户界面

src/components/providers/StoreProvider.tsx

@@ -1,13 +1,15 @@
 'use client'
 import {User} from '@/lib/models'
 import {createContext, ReactNode, useContext, useRef} from 'react'
-import {createProfileStore, ProfileStore} from '@/stores/profile-store'
 import {StoreApi} from 'zustand/vanilla'
 import {useStore} from 'zustand/react'
+import {createProfileStore, ProfileStore} from '@/stores/profile'
+import {createLayoutStore, LayoutStore} from '@/stores/layout'
 
 
 export type StoreContextType = {
   profile: StoreApi<ProfileStore>
+  layout: StoreApi<LayoutStore>
 }
 
 export const StoreContext = createContext<StoreContextType | null>(null)
@@ -18,15 +20,23 @@ export type ProfileProviderProps = {
 }
 
 export default function StoreProvider(props: ProfileProviderProps) {
+
   const profile = useRef<StoreApi<ProfileStore>>(null)
   if (!profile.current) {
     console.log('create profile store')
     profile.current = createProfileStore(props.user)
   }
 
+  const layout = useRef<StoreApi<LayoutStore>>(null)
+  if (!layout.current) {
+    console.log('create layout store')
+    layout.current = createLayoutStore()
+  }
+
   return (
     <StoreContext.Provider value={{
       profile: profile.current,
+      layout: layout.current,
     }}>
       {props.children}
     </StoreContext.Provider>
@@ -41,3 +51,11 @@ export function useProfileStore<T>(selector: (store: ProfileStore) => T) {
   }
   return useStore(ctx.profile, selector)
 }
+
+export function useLayoutStore<T>(selector: (store: LayoutStore) => T) {
+  const ctx = useContext(StoreContext)
+  if (!ctx) {
+    throw new Error('useLayoutStore must be used within a StoreProvider')
+  }
+  return useStore(ctx.layout, selector)
+}