create-rue 0.1.4 → 0.7.2

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

@@ -2,7 +2,7 @@ import { computed, type FC, ref, useEffect, watch } from '@rue-js/rue'
 import { RouterLink, useRoute } from '@rue-js/router'
 
 const themeStorageKey = 'rue.base.theme'
-const headerToggleRoutes = ['/', '/report', '/todo']
+const reportHeaderStorageKey = 'rue.base.report.hideHeader'
 
 const navItems = [
   { to: '/', label: '首页' },
@@ -80,21 +80,9 @@ const themeLabels: Record<string, string> = {
   sunset: '日落',
 }
 
-const getStoredTheme = () => {
-  const storedTheme = localStorage.getItem(themeStorageKey)
-  return storedTheme && themes.includes(storedTheme) ? storedTheme : 'light'
-}
-
-const getHeaderStorageKey = (path: string) => {
-  if (path === '/') {
-    return 'rue.base.header.hide.home'
-  }
-
-  return `rue.base.header.hide.${path.replace(/^\//, '')}`
-}
+const getStoredTheme = () => localStorage.getItem(themeStorageKey) || 'light'
 
-const getStoredHeaderHidden = (path: string) =>
-  localStorage.getItem(getHeaderStorageKey(path)) === '1'
+const getStoredHeaderHidden = () => localStorage.getItem(reportHeaderStorageKey) === '1'
 
 const applyTheme = (theme: string) => {
   document.documentElement.setAttribute('data-theme', theme)
@@ -103,48 +91,20 @@ 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(() => {
-    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)
-    }
-  }, [])
+    applyTheme(theme.value)
+  })
 
   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) => {
@@ -152,7 +112,7 @@ const ThemePicker: FC = () => {
       }}
     >
       {themes.map((name) => (
-        <option key={name} value={name}>
+        <option key={name} value={name} selected={theme.value === name}>
           {themeLabels[name] || name}
         </option>
       ))}
@@ -163,34 +123,11 @@ 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/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">
+    <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">
           <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
@@ -200,19 +137,18 @@ const Header: FC = () => {
             </div>
           </RouterLink>
         </div>
-        <nav className="order-3 flex w-full flex-wrap gap-2 md:order-none md:w-auto md:flex-1 md:justify-center">
+        <nav className="navbar-center hidden flex-1 justify-center gap-2 md:flex">
           {navItems.map((item) => (
             <RouterLink
               key={item.to}
               to={item.to}
-              data-base-nav-path={item.to}
-              className={navClass(item.to)}
+              className={`btn btn-sm ${currentPath.get() === item.to ? 'btn-primary' : 'btn-ghost'}`}
             >
-              <span>{item.label}</span>
+              {item.label}
             </RouterLink>
           ))}
         </nav>
-        <div className="flex items-center gap-2 md:ml-auto">
+        <div className="navbar-end flex items-center gap-2">
           <ThemePicker />
         </div>
       </div>
@@ -238,72 +174,26 @@ const Footer: FC = () => (
 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/95 text-base-content shadow-lg backdrop-blur"
-    aria-label={props.hidden ? '显示头部和底部' : '隐藏头部和底部'}
-    title={props.hidden ? '显示头部和底部' : '隐藏头部和底部'}
+    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 ? '显示顶部导航' : '隐藏顶部导航'}
     onClick={props.onToggle}
   >
-    {props.hidden ? (
-      <svg
-        viewBox="0 0 24 24"
-        width="16"
-        height="16"
-        aria-hidden="true"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" />
-        <circle cx="12" cy="12" r="3" />
-      </svg>
-    ) : (
-      <svg
-        viewBox="0 0 24 24"
-        width="16"
-        height="16"
-        aria-hidden="true"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path d="M3 3l18 18" />
-        <path d="M10.6 10.7a3 3 0 0 0 4.2 4.2" />
-        <path d="M9.9 5.1A10.9 10.9 0 0 1 12 5c6.5 0 10 7 10 7a21.7 21.7 0 0 1-4 5.2" />
-        <path d="M6.6 6.7C4.2 8.3 2.7 10.9 2 12c0 0 3.5 7 10 7 1.8 0 3.4-.5 4.8-1.3" />
-      </svg>
-    )}
+    {props.hidden ? '显' : '隐'}
   </button>
 )
 
 const SiteLayout: FC = (props) => {
   const route = useRoute()
+  const reportHeaderHidden = ref(getStoredHeaderHidden())
   const currentPath = computed(() => route.get()?.path || '/')
-  const allowHeaderToggle = computed(() => headerToggleRoutes.includes(currentPath.get()))
-  const reportHeaderHidden = ref(getStoredHeaderHidden(currentPath.get()))
-  const hideHeader = computed(() => allowHeaderToggle.get() && reportHeaderHidden.value)
-
-  watch(
-    () => currentPath.get(),
-    (path) => {
-      reportHeaderHidden.value = allowHeaderToggle.get() ? getStoredHeaderHidden(path) : false
-    },
-  )
+  const isReportRoute = computed(() => currentPath.get() === '/report')
+  const hideHeader = computed(() => isReportRoute.get() && reportHeaderHidden.value)
 
   watch(
     () => reportHeaderHidden.value,
     () => {
-      if (!allowHeaderToggle.get()) {
-        return
-      }
-
-      localStorage.setItem(
-        getHeaderStorageKey(currentPath.get()),
-        reportHeaderHidden.value ? '1' : '0',
-      )
+      localStorage.setItem(reportHeaderStorageKey, reportHeaderHidden.value ? '1' : '0')
     },
   )
 
@@ -311,7 +201,7 @@ const SiteLayout: FC = (props) => {
     <div className="app-shell">
       <div className="app-surface">
         {!hideHeader.get() && <Header />}
-        {allowHeaderToggle.get() && (
+        {isReportRoute.get() && (
           <HeaderToggleButton
             hidden={hideHeader.get()}
             onToggle={() => {
@@ -319,8 +209,12 @@ const SiteLayout: FC = (props) => {
             }}
           />
         )}
-        <main className="content-width pb-10 pt-6 sm:pt-8">{props.children}</main>
-        {!hideHeader.get() && <Footer />}
+        <main
+          className={`content-width pb-10 ${hideHeader.get() ? 'pt-6 sm:pt-8' : 'pt-6 sm:pt-8'}`}
+        >
+          {props.children}
+        </main>
+        <Footer />
       </div>
     </div>
   )

package/template/base/package.json

@@ -6,35 +6,32 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview",
-    "typecheck": "tsgo --noEmit",
+    "typecheck": "tsc --noEmit",
     "oxlint": "oxlint -c ./.oxlintrc.json .",
     "oxlint-fix": "oxlint -c ./.oxlintrc.json . --fix",
     "format": "oxfmt .",
     "format-check": "oxfmt --check ."
   },
   "dependencies": {
-    "@rue-js/jsx-runtime": "^0.1.1",
-    "@rue-js/router": "^0.1.1",
-    "@rue-js/rue": "^0.1.1",
-    "@rue-js/runtime": "^0.1.1",
-    "@rue-js/runtime-vapor": "^0.1.1",
-    "daisyui": "^5.5.19",
-    "oxfmt": "^0.48.0",
-    "oxlint": "^1.63.0"
+    "@rue-js/design": "^0.7.2",
+    "@rue-js/jsx-runtime": "^0.7.2",
+    "@rue-js/router": "^0.7.2",
+    "@rue-js/rue": "^0.7.2",
+    "@rue-js/runtime": "^0.7.2",
+    "@rue-js/runtime-vapor": "^0.7.2"
   },
   "devDependencies": {
-    "@rue-js/jsx-dev-runtime": "^0.1.1",
-    "@rue-js/vite-plugin-rue": "^0.1.1",
-    "@swc/core": "^1.15.33",
+    "@rue-js/jsx-dev-runtime": "^0.7.2",
+    "@rue-js/vite-plugin-rue": "^0.7.2",
+    "@swc/core": "^1.15.3",
     "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.3.0",
-    "@types/node": "^25.6.2",
-    "@typescript/native-preview": "beta",
-    "tailwindcss": "^4.3.0",
-    "typescript": "^6.0.3",
-    "vite": "^8.0.11",
-    "vite-plugin-wasm": "^3.6.0"
+    "@tailwindcss/vite": "^4.1.17",
+    "@types/node": "^24.10.1",
+    "oxfmt": "^0.42.0",
+    "oxlint": "^1.57.0",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.3",
+    "vite-plugin-wasm": "^3.5.0"
   },
   "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319"
 }

package/template/base/tsconfig.json

@@ -11,11 +11,12 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": false,
-    "types": ["vite/client", "@rue-js/rue/jsx", "node"],
+    "types": ["vitest/globals"],
     "jsx": "react-jsx",
     "jsxImportSource": "@rue-js",
     "declaration": true,
-    "outDir": "./dist"
+    "outDir": "./dist",
+    "baseUrl": "."
   },
   "include": ["app/**/*.ts", "app/**/*.tsx", "app/**/*.d.ts", "vite.config.ts"]
 }

package/template/base/vite.config.ts

@@ -3,7 +3,7 @@ import VitePluginRue from '@rue-js/vite-plugin-rue'
 import wasm from 'vite-plugin-wasm'
 import tailwindcss from '@tailwindcss/vite'
 
-export default defineConfig(({ command }) => ({
+export default defineConfig({
   resolve: {
     conditions: ['import', 'module', 'browser', 'default'],
   },
@@ -11,11 +11,8 @@ export default defineConfig(({ command }) => ({
     wasm(),
     tailwindcss() as any,
     VitePluginRue({
-      debug: command === 'serve',
+      include: ['/app/'],
+      debug: true,
     }),
   ],
-  server: {
-    port: 5173,
-    strictPort: false,
-  },
-}))
+})