create-fullstack-scaffold 0.1.1 → 0.2.0

package/template/src/client/components/AuthButton.tsx

@@ -1,41 +1,48 @@
+import { Link } from 'react-router-dom'
 import { useAuthStore } from '../stores/authStore'
 
 export function AuthButton() {
-  const { isAuthenticated, logout, setToken } = useAuthStore()
-
-  const handleLogin = () => {
-    // For development, use a test token
-    // In production, this should call an actual login API
-    const testToken = 'user-token'
-    setToken(testToken)
-    window.location.reload()
-  }
+  const isAuthenticated = useAuthStore(state => state.isAuthenticated)
+  const user = useAuthStore(state => state.user)
+  const logout = useAuthStore(state => state.logout)
 
   const handleLogout = () => {
     logout()
-    window.location.reload()
   }
 
   if (isAuthenticated) {
     return (
       <div className="flex items-center gap-2">
-        <span className="text-sm text-gray-600">已登录</span>
+        <span className="text-sm text-gray-600" data-testid="auth-username">
+          {user?.username}
+        </span>
         <button
           onClick={handleLogout}
+          data-testid="auth-logout"
           className="px-3 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600"
         >
-          退出
+          Sign Out
         </button>
       </div>
     )
   }
 
   return (
-    <button
-      onClick={handleLogin}
-      className="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600"
-    >
-      登录
-    </button>
+    <div className="flex items-center gap-2">
+      <Link
+        to="/login"
+        data-testid="auth-login"
+        className="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600"
+      >
+        Sign In
+      </Link>
+      <Link
+        to="/register"
+        data-testid="auth-register"
+        className="px-3 py-1 text-sm border border-gray-300 text-gray-700 rounded hover:bg-gray-50"
+      >
+        Sign Up
+      </Link>
+    </div>
   )
 }

package/template/src/client/components/BottomTabBar.tsx

@@ -0,0 +1,107 @@
+import { useState } from 'react'
+import { NavLink, useLocation } from 'react-router-dom'
+import {
+  Sun,
+  Calendar,
+  FolderKanban,
+  Compass,
+  Puzzle,
+  Tags,
+  Code,
+  Home,
+  ShoppingCart,
+  Package,
+  Hash,
+  TrendingUp,
+  Bell,
+  User,
+  LayoutDashboard,
+  Settings,
+  Search,
+  PlusCircle,
+  type LucideIcon,
+} from 'lucide-react'
+import type { TabItem, PresetTheme } from '../preset-ui-config'
+
+interface BottomTabBarProps {
+  tabs: TabItem[]
+  theme?: PresetTheme
+}
+
+const ICON_MAP: Record<string, LucideIcon> = {
+  Sun,
+  Calendar,
+  FolderKanban,
+  Compass,
+  Puzzle,
+  Tags,
+  Code,
+  Home,
+  ShoppingCart,
+  Package,
+  Hash,
+  TrendingUp,
+  Bell,
+  User,
+  LayoutDashboard,
+  Settings,
+  Search,
+  PlusCircle,
+}
+
+export const BottomTabBar: React.FC<BottomTabBarProps> = ({ tabs, theme }) => {
+  const location = useLocation()
+  const [activeTab, setActiveTab] = useState(() => {
+    const match = tabs.find(tab => location.pathname.startsWith(tab.path))
+    return match?.path || tabs[0]?.path || ''
+  })
+
+  const primaryColor = theme?.primaryColor ?? '#6366f1'
+
+  if (tabs.length === 0) return null
+
+  return (
+    <nav
+      className="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-md border-t border-gray-200 safe-area-inset-bottom"
+      style={{
+        paddingBottom: 'env(safe-area-inset-bottom, 0px)',
+      }}
+      data-testid="bottom-tab-bar"
+    >
+      <div className="flex items-center justify-around h-16 px-2">
+        {tabs.map(tab => {
+          const Icon = ICON_MAP[tab.icon] || LayoutDashboard
+          const isActive = activeTab === tab.path || location.pathname.startsWith(tab.path)
+
+          return (
+            <NavLink
+              key={tab.path}
+              to={tab.path}
+              onClick={() => setActiveTab(tab.path)}
+              data-testid={`bottom-tab-${tab.label.toLowerCase()}`}
+              className={`flex flex-col items-center justify-center gap-0.5 flex-1 py-1 rounded-xl transition-all duration-200 min-w-0 ${
+                isActive ? '' : 'text-gray-400 hover:text-gray-600'
+              }`}
+              style={{ color: isActive ? primaryColor : undefined }}
+            >
+              <Icon className={`w-5 h-5 transition-transform ${isActive ? 'scale-110' : ''}`} />
+              <span
+                className={`text-[10px] font-medium leading-tight truncate w-full text-center px-1 ${
+                  isActive ? 'font-semibold' : ''
+                }`}
+              >
+                {tab.label}
+              </span>
+              {isActive && (
+                <div
+                  className="absolute top-0 w-8 h-0.5 rounded-full"
+                  style={{ backgroundColor: primaryColor }}
+                />
+              )}
+            </NavLink>
+          )
+        })}
+      </div>
+    </nav>
+  )
+}

package/template/src/client/components/Navigation.tsx

@@ -1,64 +1,174 @@
-import { NavLink } from 'react-router-dom'
-import { CheckCircle, Bell, Plug, Rocket, Github, FileText } from 'lucide-react'
-import { AuthButton } from './AuthButton'
+import { NavLink, Link } from 'react-router-dom'
+import { Rocket, Sparkles, Search, ShoppingCart, UserCircle, LogIn } from 'lucide-react'
+import { useAuthStore } from '../stores/authStore'
+import type { PresetTheme, NavigationConfig, AuthStyle, ClientNavItem } from '../preset-ui-config'
 
-type RouteKey = 'todos' | 'notifications' | 'websocket' | 'content'
+interface NavigationProps {
+  preset?: string
+  items?: ClientNavItem[]
+  theme?: PresetTheme
+  navigation?: NavigationConfig
+}
+
+function AuthSection({ style }: { style: AuthStyle }) {
+  const isAuthenticated = useAuthStore(state => state.isAuthenticated)
+  const user = useAuthStore(state => state.user)
+  const logout = useAuthStore(state => state.logout)
+
+  if (style === 'none') return null
 
-const routes: Record<
-  RouteKey,
-  { label: string; icon: React.FC<{ className?: string }>; path: string }
-> = {
-  todos: { label: 'Todo List', icon: CheckCircle, path: '/todos' },
-  content: { label: 'Content', icon: FileText, path: '/content' },
-  notifications: { label: 'Notifications', icon: Bell, path: '/notifications' },
-  websocket: { label: 'WebSocket', icon: Plug, path: '/websocket' },
+  if (isAuthenticated) {
+    if (style === 'avatar') {
+      return (
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-xs font-medium text-gray-700">
+            {user?.username?.[0]?.toUpperCase() || 'U'}
+          </div>
+          <button onClick={logout} className="text-xs text-gray-400 hover:text-gray-600">
+            Sign Out
+          </button>
+        </div>
+      )
+    }
+    return (
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-gray-600">{user?.username}</span>
+        <button onClick={logout} className="text-xs text-gray-400 hover:text-red-500">
+          Sign Out
+        </button>
+      </div>
+    )
+  }
+
+  switch (style) {
+    case 'text-link':
+      return (
+        <Link
+          to="/login"
+          className="text-sm text-gray-500 hover:text-gray-900 flex items-center gap-1"
+        >
+          <LogIn className="w-4 h-4" />
+          Login
+        </Link>
+      )
+    case 'icon':
+      return (
+        <Link to="/login" className="text-gray-400 hover:text-gray-600">
+          <UserCircle className="w-6 h-6" />
+        </Link>
+      )
+    case 'avatar':
+      return (
+        <Link to="/login" className="text-sm text-gray-500 hover:text-gray-900">
+          Join
+        </Link>
+      )
+    case 'buttons':
+    default:
+      return (
+        <div className="flex items-center gap-2">
+          <Link
+            to="/login"
+            className="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600"
+          >
+            Sign In
+          </Link>
+          <Link
+            to="/register"
+            className="px-3 py-1 text-sm border border-gray-300 text-gray-700 rounded hover:bg-gray-50"
+          >
+            Sign Up
+          </Link>
+        </div>
+      )
+  }
 }
 
-export const Navigation: React.FC = () => {
+export const Navigation: React.FC<NavigationProps> = ({
+  preset: _preset = 'todo',
+  items,
+  theme,
+  navigation,
+}) => {
+  const navItems = navigation?.navItems === 'none' ? [] : items ?? []
+  const primaryColor = theme?.primaryColor ?? '#6366f1'
+  const logoText = theme?.logoText ?? 'Biomimic'
+  const showLogo = navigation?.showLogo !== false
+  const showSearch = navigation?.showSearch === true
+  const showCart = navigation?.showCart === true
+  const authStyle = navigation?.authStyle ?? 'buttons'
+
   return (
-    <nav className="bg-white border-b border-gray-200 sticky top-0 z-50" data-testid="app-nav">
-      <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
-        <div className="flex items-center gap-8">
-          <h1
-            className="text-xl font-bold text-gray-900 flex items-center gap-2"
+    <nav
+      className="hidden md:block bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50"
+      data-testid="app-nav"
+    >
+      <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between gap-3">
+        {showLogo && (
+          <NavLink
+            to="/"
+            className="flex items-center gap-2 group shrink-0"
             data-testid="app-title"
           >
-            <Rocket className="w-6 h-6 text-blue-500" />
-            Biomimic App
-          </h1>
-          <div className="flex items-center gap-1">
-            {(Object.keys(routes) as RouteKey[]).map(route => {
-              const Icon = routes[route].icon
-              return (
-                <NavLink
-                  key={route}
-                  to={routes[route].path}
-                  data-testid={`nav-${route}-button`}
-                  className={({ isActive }) =>
-                    `flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-                      isActive ? 'bg-blue-50 text-blue-600' : 'text-gray-600 hover:bg-gray-100'
-                    }`
-                  }
-                >
-                  <Icon className="w-4 h-4" />
-                  {routes[route].label}
-                </NavLink>
-              )
-            })}
+            <div
+              className="w-8 h-8 rounded-lg flex items-center justify-center shadow-sm group-hover:shadow-md transition-shadow"
+              style={{ backgroundColor: primaryColor }}
+            >
+              <Rocket className="w-4 h-4 text-white" />
+            </div>
+            <span className="text-lg font-semibold text-gray-900 tracking-tight whitespace-nowrap">
+              {logoText}
+            </span>
+            <Sparkles className="w-3.5 h-3.5 shrink-0" style={{ color: primaryColor }} />
+          </NavLink>
+        )}
+
+        {showSearch && (
+          <div className="flex-1 max-w-md mx-4">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+              <input
+                type="text"
+                placeholder="Search..."
+                className="w-full pl-10 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-300"
+              />
+            </div>
           </div>
+        )}
+
+        <div className="flex items-center gap-0.5 overflow-x-auto flex-1 min-w-0 scrollbar-hide [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
+          {navItems.map(item => (
+            <NavLink
+              key={item.path}
+              to={item.path}
+              data-testid={`nav-${item.label.toLowerCase().replace(/\s+/g, '-')}-button`}
+              className={({ isActive }: { isActive: boolean }) =>
+                `px-3 py-1.5 rounded-lg text-sm font-medium transition-all duration-200 shrink-0 whitespace-nowrap ${
+                  isActive ? 'text-white' : 'text-gray-500 hover:text-gray-900 hover:bg-gray-50'
+                }`
+              }
+              style={
+                (({ isActive }: { isActive: boolean }) =>
+                  isActive
+                    ? { backgroundColor: `${primaryColor}15`, color: primaryColor }
+                    : undefined) as never
+              }
+            >
+              {item.label}
+            </NavLink>
+          ))}
         </div>
-        <div className="flex items-center gap-4">
-          <AuthButton />
-          <a
-            href="https://github.com"
-            target="_blank"
-            rel="noopener noreferrer"
-            data-testid="github-link"
-            className="text-gray-400 hover:text-gray-600 transition-colors"
-          >
-            <Github className="w-5 h-5" />
-          </a>
-        </div>
+
+        {showCart && (
+          <Link to="/cart" className="relative text-gray-500 hover:text-gray-700 mr-2">
+            <ShoppingCart className="w-5 h-5" />
+            <span className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white text-[10px] rounded-full flex items-center justify-center">
+              3
+            </span>
+          </Link>
+        )}
+
+        <AuthSection style={authStyle} />
       </div>
     </nav>
   )

package/template/src/client/components/__tests__/App.test.tsx

@@ -15,6 +15,22 @@ vi.mock('@client/pages/WebSocketPage', () => ({
   WebSocketPage: () => <div data-testid="websocket-page">WebSocket Page</div>,
 }))
 
+vi.mock('@client/pages/LoginPage', () => ({
+  LoginPage: () => <div data-testid="login-page">Login Page</div>,
+}))
+
+vi.mock('@client/pages/RegisterPage', () => ({
+  RegisterPage: () => <div data-testid="register-page">Register Page</div>,
+}))
+
+vi.mock('@client/pages/DashboardPage', () => ({
+  DashboardPage: () => <div data-testid="dashboard-page">Dashboard Page</div>,
+}))
+
+vi.mock('@client/pages/SettingsPage', () => ({
+  SettingsPage: () => <div data-testid="settings-page">Settings Page</div>,
+}))
+
 describe('App Component', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -25,55 +41,55 @@ describe('App Component', () => {
   })
 
   describe('Initial Render', () => {
-    it('should render title with correct text', () => {
-      render(<App />)
-      const titleElement = screen.getByTestId('app-title')
-      expect(titleElement).toBeInTheDocument()
-      expect(titleElement).toHaveTextContent('Biomimic App')
-    })
-
     it('should render navigation', () => {
-      render(<App />)
+      render(<App presetId="todo" />)
       expect(screen.getByTestId('app-nav')).toBeInTheDocument()
     })
 
-    it('should render footer', () => {
-      render(<App />)
-      expect(screen.getByTestId('app-footer')).toBeInTheDocument()
+    it('should render main content area', () => {
+      render(<App presetId="todo" />)
+      expect(screen.getByTestId('app-main')).toBeInTheDocument()
     })
-  })
 
-  describe('Navigation Links', () => {
-    it('should render todos nav link', () => {
-      render(<App />)
-      expect(screen.getByTestId('nav-todos-button')).toBeInTheDocument()
+    it('should render container', () => {
+      render(<App presetId="todo" />)
+      expect(screen.getByTestId('app-container')).toBeInTheDocument()
     })
+  })
 
-    it('should render notifications nav link', () => {
-      render(<App />)
-      expect(screen.getByTestId('nav-notifications-button')).toBeInTheDocument()
+  describe('Layout', () => {
+    it('should render with todo preset', () => {
+      render(<App presetId="todo" />)
+      expect(screen.getByTestId('app-container')).toBeInTheDocument()
+      expect(screen.getByTestId('app-nav')).toBeInTheDocument()
     })
 
-    it('should render websocket nav link', () => {
-      render(<App />)
-      expect(screen.getByTestId('nav-websocket-button')).toBeInTheDocument()
+    it('should render with plugin preset', () => {
+      render(<App presetId="plugin" />)
+      expect(screen.getByTestId('app-container')).toBeInTheDocument()
     })
 
-    it('should render github link', () => {
-      render(<App />)
-      expect(screen.getByTestId('github-link')).toBeInTheDocument()
+    it('should render with ecommerce preset', () => {
+      render(<App presetId="ecommerce" />)
+      expect(screen.getByTestId('app-container')).toBeInTheDocument()
     })
-  })
 
-  describe('Layout', () => {
-    it('should render main content area', () => {
-      render(<App />)
-      expect(screen.getByTestId('app-main')).toBeInTheDocument()
+    it('should render with community preset', () => {
+      render(<App presetId="community" />)
+      expect(screen.getByTestId('app-container')).toBeInTheDocument()
     })
 
-    it('should render container', () => {
-      render(<App />)
+    it('should render with saas preset', () => {
+      render(<App presetId="saas" />)
       expect(screen.getByTestId('app-container')).toBeInTheDocument()
     })
   })
+
+  describe('Layout Features', () => {
+    it('should render nav and footer for top-nav preset', () => {
+      render(<App presetId="todo" />)
+      expect(screen.getByTestId('app-nav')).toBeInTheDocument()
+      expect(screen.getByTestId('app-footer')).toBeInTheDocument()
+    })
+  })
 })