create-rue 0.0.14 → 0.0.15

package/template/base/app/pages/components/Layout.tsx

@@ -80,7 +80,10 @@ const themeLabels: Record<string, string> = {
   sunset: '日落',
 }
 
-const getStoredTheme = () => localStorage.getItem(themeStorageKey) || 'light'
+const getStoredTheme = () => {
+  const storedTheme = localStorage.getItem(themeStorageKey)
+  return storedTheme && themes.includes(storedTheme) ? storedTheme : 'light'
+}
 
 const getStoredHeaderHidden = () => localStorage.getItem(reportHeaderStorageKey) === '1'
 
@@ -91,20 +94,48 @@ const applyTheme = (theme: string) => {
 const ThemePicker: FC = () => {
   const theme = ref(getStoredTheme())
 
+  const applyThemeState = () => {
+    const currentTheme = theme.value
+    const themePicker = document.querySelector<HTMLSelectElement>('[data-base-theme-picker="true"]')
+
+    applyTheme(currentTheme)
+
+    if (themePicker && themePicker.value !== currentTheme) {
+      themePicker.value = currentTheme
+    }
+  }
+
+  const syncStoredTheme = () => {
+    theme.value = getStoredTheme()
+    requestAnimationFrame(applyThemeState)
+  }
+
   useEffect(() => {
-    applyTheme(theme.value)
-  })
+    localStorage.setItem(themeStorageKey, theme.value)
+    requestAnimationFrame(applyThemeState)
+
+    window.addEventListener('storage', syncStoredTheme)
+    window.addEventListener('focus', syncStoredTheme)
+    document.addEventListener('visibilitychange', syncStoredTheme)
+
+    return () => {
+      window.removeEventListener('storage', syncStoredTheme)
+      window.removeEventListener('focus', syncStoredTheme)
+      document.removeEventListener('visibilitychange', syncStoredTheme)
+    }
+  }, [])
 
   watch(
     () => theme.value,
     () => {
-      applyTheme(theme.value)
       localStorage.setItem(themeStorageKey, theme.value)
+      requestAnimationFrame(applyThemeState)
     },
   )
 
   return (
     <select
+      data-base-theme-picker="true"
       aria-label="切换主题"
       className="select select-bordered select-sm w-40"
       onChange={(event: Event) => {
@@ -112,7 +143,7 @@ const ThemePicker: FC = () => {
       }}
     >
       {themes.map((name) => (
-        <option key={name} value={name} selected={theme.value === name}>
+        <option key={name} value={name}>
           {themeLabels[name] || name}
         </option>
       ))}
@@ -123,11 +154,34 @@ const ThemePicker: FC = () => {
 const Header: FC = () => {
   const route = useRoute()
   const currentPath = computed(() => route.get()?.path || '/')
+  const navClass = (path: string) =>
+    `btn btn-sm ${currentPath.get() === path ? 'btn-primary' : 'btn-ghost'}`.trim()
+
+  const applyHeaderNavState = () => {
+    const path = currentPath.get()
+    const navLinks = document.querySelectorAll<HTMLElement>('[data-base-nav-path]')
+
+    navLinks.forEach((link) => {
+      const targetPath = link.dataset.baseNavPath || ''
+      link.className = `btn btn-sm ${path === targetPath ? 'btn-primary' : 'btn-ghost'}`.trim()
+    })
+  }
+
+  watch(
+    () => currentPath.get(),
+    () => {
+      requestAnimationFrame(applyHeaderNavState)
+    },
+  )
+
+  useEffect(() => {
+    requestAnimationFrame(applyHeaderNavState)
+  }, [])
 
   return (
-    <header className="sticky top-0 z-40 border-b border-base-300/70 bg-base-100/85 backdrop-blur">
-      <div className="content-width navbar min-h-0 gap-4 py-3">
-        <div className="navbar-start min-w-0">
+    <header className="sticky top-0 z-40 border-b border-base-300/70 bg-base-100/90 backdrop-blur">
+      <div className="content-width flex flex-wrap items-center gap-3 py-3">
+        <div className="min-w-0 flex-1 md:flex-none">
           <RouterLink to="/" className="flex min-w-0 items-center gap-3">
             <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-primary text-primary-content shadow-lg shadow-primary/20">
               R
@@ -137,18 +191,19 @@ const Header: FC = () => {
             </div>
           </RouterLink>
         </div>
-        <nav className="navbar-center hidden flex-1 justify-center gap-2 md:flex">
+        <nav className="order-3 flex w-full flex-wrap gap-2 md:order-none md:w-auto md:flex-1 md:justify-center">
           {navItems.map((item) => (
             <RouterLink
               key={item.to}
               to={item.to}
-              className={`btn btn-sm ${currentPath.get() === item.to ? 'btn-primary' : 'btn-ghost'}`}
+              data-base-nav-path={item.to}
+              className={navClass(item.to)}
             >
-              {item.label}
+              <span>{item.label}</span>
             </RouterLink>
           ))}
         </nav>
-        <div className="navbar-end flex items-center gap-2">
+        <div className="flex items-center gap-2 md:ml-auto">
           <ThemePicker />
         </div>
       </div>
@@ -175,8 +230,8 @@ const HeaderToggleButton: FC<{ hidden: boolean; onToggle: () => void }> = (props
   <button
     type="button"
     className="btn btn-circle btn-sm fixed left-3 top-3 z-50 border-base-300 bg-base-100/90 shadow-lg backdrop-blur"
-    aria-label={props.hidden ? '显示顶部导航' : '隐藏顶部导航'}
-    title={props.hidden ? '显示顶部导航' : '隐藏顶部导航'}
+    aria-label={props.hidden ? '显示头部和底部' : '隐藏头部和底部'}
+    title={props.hidden ? '显示头部和底部' : '隐藏头部和底部'}
     onClick={props.onToggle}
   >
     {props.hidden ? '显' : '隐'}
@@ -185,10 +240,10 @@ const HeaderToggleButton: FC<{ hidden: boolean; onToggle: () => void }> = (props
 
 const SiteLayout: FC = (props) => {
   const route = useRoute()
-  const reportHeaderHidden = ref(getStoredHeaderHidden())
   const currentPath = computed(() => route.get()?.path || '/')
-  const isReportRoute = computed(() => currentPath.get() === '/report')
-  const hideHeader = computed(() => isReportRoute.get() && reportHeaderHidden.value)
+  const allowHeaderToggle = computed(() => currentPath.get() === '/report')
+  const reportHeaderHidden = ref(getStoredHeaderHidden())
+  const hideHeader = computed(() => allowHeaderToggle.get() && reportHeaderHidden.value)
 
   watch(
     () => reportHeaderHidden.value,
@@ -201,7 +256,7 @@ const SiteLayout: FC = (props) => {
     <div className="app-shell">
       <div className="app-surface">
         {!hideHeader.get() && <Header />}
-        {isReportRoute.get() && (
+        {allowHeaderToggle.get() && (
           <HeaderToggleButton
             hidden={hideHeader.get()}
             onToggle={() => {
@@ -209,12 +264,10 @@ const SiteLayout: FC = (props) => {
             }}
           />
         )}
-        <main
-          className={`content-width pb-10 ${hideHeader.get() ? 'pt-6 sm:pt-8' : 'pt-6 sm:pt-8'}`}
-        >
+        <main className="content-width pb-10 pt-6 sm:pt-8">
           {props.children}
         </main>
-        <Footer />
+        {!hideHeader.get() && <Footer />}
       </div>
     </div>
   )