feat: add strategy market, login overlay, and registration limit page

- Add public strategy market API endpoint (/api/strategies/public)
- Add is_public and config_visible fields to Strategy model
- Add LoginRequiredOverlay component for unified auth prompts
- Add WhitelistFullPage for registration capacity limit
- Add StrategyMarketPage for browsing public strategies
- Unify navigation logic across HeaderBar, LandingPage, App
- Reduce klines API calls (fetch once on mount)
- Fix various page transition issues

api/server.go

@@ -127,6 +127,9 @@ func (s *Server) setupRoutes() {
 		api.GET("/klines", s.handleKlines)
 		api.GET("/symbols", s.handleSymbols)
 
+		// Public strategy market (no authentication required)
+		api.GET("/strategies/public", s.handlePublicStrategies)
+
 		// Authentication related routes (no authentication required)
 		api.POST("/register", s.handleRegister)
 		api.POST("/login", s.handleLogin)

api/strategy.go

@@ -29,6 +29,43 @@ func validateStrategyConfig(config *store.StrategyConfig) []string {
 	return warnings
 }
 
+// handlePublicStrategies Get public strategies for strategy market (no auth required)
+func (s *Server) handlePublicStrategies(c *gin.Context) {
+	strategies, err := s.store.Strategy().ListPublic()
+	if err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to get public strategies: " + err.Error()})
+		return
+	}
+
+	// Convert to frontend format with visibility control
+	result := make([]gin.H, 0, len(strategies))
+	for _, st := range strategies {
+		item := gin.H{
+			"id":             st.ID,
+			"name":           st.Name,
+			"description":    st.Description,
+			"author_email":   "", // Will be filled if we have user info
+			"is_public":      st.IsPublic,
+			"config_visible": st.ConfigVisible,
+			"created_at":     st.CreatedAt,
+			"updated_at":     st.UpdatedAt,
+		}
+
+		// Only include config if config_visible is true
+		if st.ConfigVisible {
+			var config store.StrategyConfig
+			json.Unmarshal([]byte(st.Config), &config)
+			item["config"] = config
+		}
+
+		result = append(result, item)
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"strategies": result,
+	})
+}
+
 // handleGetStrategies Get strategy list
 func (s *Server) handleGetStrategies(c *gin.Context) {
 	userID := c.GetString("user_id")
@@ -50,14 +87,16 @@ func (s *Server) handleGetStrategies(c *gin.Context) {
 		json.Unmarshal([]byte(st.Config), &config)
 
 		result = append(result, gin.H{
-			"id":          st.ID,
+			"id":             st.ID,
-			"name":        st.Name,
+			"name":           st.Name,
-			"description": st.Description,
+			"description":    st.Description,
-			"is_active":   st.IsActive,
+			"is_active":      st.IsActive,
-			"is_default":  st.IsDefault,
+			"is_default":     st.IsDefault,
-			"config":      config,
+			"is_public":      st.IsPublic,
-			"created_at":  st.CreatedAt,
+			"config_visible": st.ConfigVisible,
-			"updated_at":  st.UpdatedAt,
+			"config":         config,
+			"created_at":     st.CreatedAt,
+			"updated_at":     st.UpdatedAt,
 		})
 	}
 
@@ -174,9 +213,11 @@ func (s *Server) handleUpdateStrategy(c *gin.Context) {
 	}
 
 	var req struct {
-		Name        string               `json:"name"`
+		Name          string               `json:"name"`
-		Description string               `json:"description"`
+		Description   string               `json:"description"`
-		Config      store.StrategyConfig `json:"config"`
+		Config        store.StrategyConfig `json:"config"`
+		IsPublic      bool                 `json:"is_public"`
+		ConfigVisible bool                 `json:"config_visible"`
 	}
 
 	if err := c.ShouldBindJSON(&req); err != nil {
@@ -192,11 +233,13 @@ func (s *Server) handleUpdateStrategy(c *gin.Context) {
 	}
 
 	strategy := &store.Strategy{
-		ID:          strategyID,
+		ID:            strategyID,
-		UserID:      userID,
+		UserID:        userID,
-		Name:        req.Name,
+		Name:          req.Name,
-		Description: req.Description,
+		Description:   req.Description,
-		Config:      string(configJSON),
+		Config:        string(configJSON),
+		IsPublic:      req.IsPublic,
+		ConfigVisible: req.ConfigVisible,
 	}
 
 	if err := s.store.Strategy().Update(strategy); err != nil {

store/strategy.go

@@ -15,15 +15,17 @@ type StrategyStore struct {
 
 // Strategy strategy configuration
 type Strategy struct {
-	ID          string    `gorm:"primaryKey" json:"id"`
+	ID            string    `gorm:"primaryKey" json:"id"`
-	UserID      string    `gorm:"column:user_id;not null;default:'';index" json:"user_id"`
+	UserID        string    `gorm:"column:user_id;not null;default:'';index" json:"user_id"`
-	Name        string    `gorm:"not null" json:"name"`
+	Name          string    `gorm:"not null" json:"name"`
-	Description string    `gorm:"default:''" json:"description"`
+	Description   string    `gorm:"default:''" json:"description"`
-	IsActive    bool      `gorm:"column:is_active;default:false;index" json:"is_active"`
+	IsActive      bool      `gorm:"column:is_active;default:false;index" json:"is_active"`
-	IsDefault   bool      `gorm:"column:is_default;default:false" json:"is_default"`
+	IsDefault     bool      `gorm:"column:is_default;default:false" json:"is_default"`
-	Config      string    `gorm:"not null;default:'{}'" json:"config"`
+	IsPublic      bool      `gorm:"column:is_public;default:false;index" json:"is_public"`       // whether visible in strategy market
-	CreatedAt   time.Time `json:"created_at"`
+	ConfigVisible bool      `gorm:"column:config_visible;default:true" json:"config_visible"`    // whether config details are visible
-	UpdatedAt   time.Time `json:"updated_at"`
+	Config        string    `gorm:"not null;default:'{}'" json:"config"`
+	CreatedAt     time.Time `json:"created_at"`
+	UpdatedAt     time.Time `json:"updated_at"`
 }
 
 func (Strategy) TableName() string { return "strategies" }
@@ -298,10 +300,12 @@ func (s *StrategyStore) Update(strategy *Strategy) error {
 	return s.db.Model(&Strategy{}).
 		Where("id = ? AND user_id = ?", strategy.ID, strategy.UserID).
 		Updates(map[string]interface{}{
-			"name":        strategy.Name,
+			"name":           strategy.Name,
-			"description": strategy.Description,
+			"description":    strategy.Description,
-			"config":      strategy.Config,
+			"config":         strategy.Config,
-			"updated_at":  time.Now(),
+			"is_public":      strategy.IsPublic,
+			"config_visible": strategy.ConfigVisible,
+			"updated_at":     time.Now(),
 		}).Error
 }
 
@@ -328,6 +332,18 @@ func (s *StrategyStore) List(userID string) ([]*Strategy, error) {
 	return strategies, nil
 }
 
+// ListPublic get all public strategies for the strategy market
+func (s *StrategyStore) ListPublic() ([]*Strategy, error) {
+	var strategies []*Strategy
+	err := s.db.Where("is_public = ?", true).
+		Order("created_at DESC").
+		Find(&strategies).Error
+	if err != nil {
+		return nil, err
+	}
+	return strategies, nil
+}
+
 // Get get a single strategy
 func (s *StrategyStore) Get(userID, id string) (*Strategy, error) {
 	var st Strategy

web/src/App.tsx

@@ -1,4 +1,6 @@
 import { useEffect, useState, useRef } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+// Force HMR Update
 import useSWR, { mutate } from 'swr'
 import { api } from './lib/api'
 import { ChartTabs } from './components/ChartTabs'
@@ -11,6 +13,8 @@ import { LandingPage } from './pages/LandingPage'
 import { FAQPage } from './pages/FAQPage'
 import { StrategyStudioPage } from './pages/StrategyStudioPage'
 import { DebateArenaPage } from './pages/DebateArenaPage'
+import { StrategyMarketPage } from './pages/StrategyMarketPage'
+import { LoginRequiredOverlay } from './components/LoginRequiredOverlay'
 import HeaderBar from './components/HeaderBar'
 import { LanguageProvider, useLanguage } from './contexts/LanguageContext'
 import { AuthProvider, useAuth } from './contexts/AuthContext'
@@ -40,6 +44,7 @@ type Page =
   | 'trader'
   | 'backtest'
   | 'strategy'
+  | 'strategy-market'
   | 'debate'
   | 'faq'
   | 'login'
@@ -119,6 +124,11 @@ function App() {
   const { loading: configLoading } = useSystemConfig()
   const [route, setRoute] = useState(window.location.pathname)
 
+  // Debug log
+  useEffect(() => {
+    console.log('[App] Mounted. Route:', window.location.pathname);
+  }, []);
+
   // 从URL路径读取初始页面状态（支持刷新保持页面）
   const getInitialPage = (): Page => {
     const path = window.location.pathname
@@ -127,12 +137,44 @@ function App() {
     if (path === '/traders' || hash === 'traders') return 'traders'
     if (path === '/backtest' || hash === 'backtest') return 'backtest'
     if (path === '/strategy' || hash === 'strategy') return 'strategy'
+    if (path === '/strategy-market' || hash === 'strategy-market') return 'strategy-market'
     if (path === '/debate' || hash === 'debate') return 'debate'
     if (path === '/dashboard' || hash === 'trader' || hash === 'details')
       return 'trader'
     return 'competition' // 默认为竞赛页面
   }
 
+  // Login required overlay state
+  const [loginOverlayOpen, setLoginOverlayOpen] = useState(false)
+  const [loginOverlayFeature, setLoginOverlayFeature] = useState('')
+
+  const handleLoginRequired = (featureName: string) => {
+    setLoginOverlayFeature(featureName)
+    setLoginOverlayOpen(true)
+  }
+
+  // Unified page navigation handler
+  const navigateToPage = (page: Page) => {
+    const pathMap: Record<Page, string> = {
+      'competition': '/competition',
+      'strategy-market': '/strategy-market',
+      'traders': '/traders',
+      'trader': '/dashboard',
+      'backtest': '/backtest',
+      'strategy': '/strategy',
+      'debate': '/debate',
+      'faq': '/faq',
+      'login': '/login',
+      'register': '/register',
+    }
+    const path = pathMap[page]
+    if (path) {
+      window.history.pushState({}, '', path)
+      setRoute(path)
+      setCurrentPage(page)
+    }
+  }
+
   const [currentPage, setCurrentPage] = useState<Page>(getInitialPage())
   // 从 URL 参数读取初始 trader 标识（格式: name-id前4位）
   const [selectedTraderSlug, setSelectedTraderSlug] = useState<string | undefined>(() => {
@@ -178,6 +220,8 @@ function App() {
         setCurrentPage('backtest')
       } else if (path === '/strategy' || hash === 'strategy') {
         setCurrentPage('strategy')
+      } else if (path === '/strategy-market' || hash === 'strategy-market') {
+        setCurrentPage('strategy-market')
       } else if (path === '/debate' || hash === 'debate') {
         setCurrentPage('debate')
       } else if (
@@ -381,154 +425,28 @@ function App() {
           onLanguageChange={setLanguage}
           user={user}
           onLogout={logout}
-          onPageChange={(page: Page) => {
+          onLoginRequired={handleLoginRequired}
-            if (page === 'competition') {
+          onPageChange={navigateToPage}
-              window.history.pushState({}, '', '/competition')
-              setRoute('/competition')
-              setCurrentPage('competition')
-            } else if (page === 'traders') {
-              window.history.pushState({}, '', '/traders')
-              setRoute('/traders')
-              setCurrentPage('traders')
-            } else if (page === 'trader') {
-              window.history.pushState({}, '', '/dashboard')
-              setRoute('/dashboard')
-              setCurrentPage('trader')
-            } else if (page === 'faq') {
-              window.history.pushState({}, '', '/faq')
-              setRoute('/faq')
-            } else if (page === 'backtest') {
-              window.history.pushState({}, '', '/backtest')
-              setRoute('/backtest')
-              setCurrentPage('backtest')
-            } else if (page === 'strategy') {
-              window.history.pushState({}, '', '/strategy')
-              setRoute('/strategy')
-              setCurrentPage('strategy')
-            } else if (page === 'debate') {
-              window.history.pushState({}, '', '/debate')
-              setRoute('/debate')
-              setCurrentPage('debate')
-            }
-          }}
         />
         <FAQPage />
+        <LoginRequiredOverlay
+          isOpen={loginOverlayOpen}
+          onClose={() => setLoginOverlayOpen(false)}
+          featureName={loginOverlayFeature}
+        />
       </div>
     )
   }
   if (route === '/reset-password') {
     return <ResetPasswordPage />
   }
-  if (route === '/competition') {
-    return (
-      <div
-        className="min-h-screen"
-        style={{ background: '#000000', color: '#EAECEF' }}
-      >
-        <HeaderBar
-          isLoggedIn={!!user}
-          currentPage="competition"
-          language={language}
-          onLanguageChange={setLanguage}
-          user={user}
-          onLogout={logout}
-          onPageChange={(page: Page) => {
-            console.log('Competition page onPageChange called with:', page)
-            console.log('Current route:', route, 'Current page:', currentPage)
-
-            if (page === 'competition') {
-              console.log('Navigating to competition')
-              window.history.pushState({}, '', '/competition')
-              setRoute('/competition')
-              setCurrentPage('competition')
-            } else if (page === 'traders') {
-              console.log('Navigating to traders')
-              window.history.pushState({}, '', '/traders')
-              setRoute('/traders')
-              setCurrentPage('traders')
-            } else if (page === 'trader') {
-              console.log('Navigating to trader/dashboard')
-              window.history.pushState({}, '', '/dashboard')
-              setRoute('/dashboard')
-              setCurrentPage('trader')
-            } else if (page === 'faq') {
-              console.log('Navigating to faq')
-              window.history.pushState({}, '', '/faq')
-              setRoute('/faq')
-            } else if (page === 'backtest') {
-              console.log('Navigating to backtest')
-              window.history.pushState({}, '', '/backtest')
-              setRoute('/backtest')
-              setCurrentPage('backtest')
-            } else if (page === 'strategy') {
-              console.log('Navigating to strategy')
-              window.history.pushState({}, '', '/strategy')
-              setRoute('/strategy')
-              setCurrentPage('strategy')
-            } else if (page === 'debate') {
-              console.log('Navigating to debate')
-              window.history.pushState({}, '', '/debate')
-              setRoute('/debate')
-              setCurrentPage('debate')
-            }
-
-            console.log(
-              'After navigation - route:',
-              route,
-              'currentPage:',
-              currentPage
-            )
-          }}
-        />
-        <main className="max-w-[1920px] mx-auto px-6 py-6 pt-24">
-          <CompetitionPage />
-        </main>
-      </div>
-    )
-  }
-
   // Show landing page for root route
   if (route === '/' || route === '') {
     return <LandingPage />
   }
 
-  // Allow unauthenticated users to open backtest page directly (others仍展示 Landing)
+  // Redirect unauthenticated users to landing page
   if (!user || !token) {
-    if (route === '/backtest' || currentPage === 'backtest') {
-      return (
-        <div
-          className="min-h-screen"
-          style={{ background: '#0B0E11', color: '#EAECEF' }}
-        >
-          <HeaderBar
-            isLoggedIn={false}
-            currentPage="backtest"
-            language={language}
-            onLanguageChange={setLanguage}
-            onPageChange={(page: Page) => {
-              if (page === 'competition') {
-                window.history.pushState({}, '', '/competition')
-                setRoute('/competition')
-                setCurrentPage('competition')
-              } else if (page === 'traders') {
-                window.history.pushState({}, '', '/traders')
-                setRoute('/traders')
-                setCurrentPage('traders')
-              }
-            }}
-          />
-          <main className="max-w-[1920px] mx-auto px-6 py-6 pt-24">
-            <BacktestPage />
-          </main>
-        </div>
-      )
-    }
-    return <LandingPage />
-  }
-
-  // Show main app for authenticated users on other routes
-  if (!user || !token) {
-    // Default to landing page when not authenticated and no specific route
     return <LandingPage />
   }
 
@@ -544,41 +462,11 @@ function App() {
         onLanguageChange={setLanguage}
         user={user}
         onLogout={logout}
-        onPageChange={(page: Page) => {
+        onLoginRequired={handleLoginRequired}
-          console.log('Main app onPageChange called with:', page)
+        onPageChange={navigateToPage}
-
-          if (page === 'competition') {
-            window.history.pushState({}, '', '/competition')
-            setRoute('/competition')
-            setCurrentPage('competition')
-          } else if (page === 'traders') {
-            window.history.pushState({}, '', '/traders')
-            setRoute('/traders')
-            setCurrentPage('traders')
-          } else if (page === 'trader') {
-            window.history.pushState({}, '', '/dashboard')
-            setRoute('/dashboard')
-            setCurrentPage('trader')
-          } else if (page === 'backtest') {
-            window.history.pushState({}, '', '/backtest')
-            setRoute('/backtest')
-            setCurrentPage('backtest')
-          } else if (page === 'strategy') {
-            window.history.pushState({}, '', '/strategy')
-            setRoute('/strategy')
-            setCurrentPage('strategy')
-          } else if (page === 'faq') {
-            window.history.pushState({}, '', '/faq')
-            setRoute('/faq')
-          } else if (page === 'debate') {
-            window.history.pushState({}, '', '/debate')
-            setRoute('/debate')
-            setCurrentPage('debate')
-          }
-        }}
       />
 
-      {/* Main Content */}
+      {/* Main Content with Page Transitions */}
       <main
         className={
           currentPage === 'debate'
@@ -586,56 +474,68 @@ function App() {
             : 'max-w-[1920px] mx-auto px-6 py-6 pt-24'
         }
       >
-        {currentPage === 'competition' ? (
+        <AnimatePresence mode="wait">
-          <CompetitionPage />
+          <motion.div
-        ) : currentPage === 'traders' ? (
+            key={currentPage}
-          <AITradersPage
+            initial={{ opacity: 0, y: 8 }}
-            onTraderSelect={(traderId) => {
+            animate={{ opacity: 1, y: 0 }}
-              setSelectedTraderId(traderId)
+            exit={{ opacity: 0, y: -8 }}
-              window.history.pushState({}, '', '/dashboard')
+            transition={{ duration: 0.15, ease: 'easeOut' }}
-              setRoute('/dashboard')
+          >
-              setCurrentPage('trader')
+            {currentPage === 'competition' ? (
-            }}
+              <CompetitionPage />
-          />
+            ) : currentPage === 'strategy-market' ? (
-        ) : currentPage === 'backtest' ? (
+              <StrategyMarketPage />
-          <BacktestPage />
+            ) : currentPage === 'traders' ? (
-        ) : currentPage === 'strategy' ? (
+              <AITradersPage
-          <StrategyStudioPage />
+                onTraderSelect={(traderId) => {
-        ) : currentPage === 'debate' ? (
+                  setSelectedTraderId(traderId)
-          <DebateArenaPage />
+                  window.history.pushState({}, '', '/dashboard')
-        ) : (
+                  setRoute('/dashboard')
-          <TraderDetailsPage
+                  setCurrentPage('trader')
-            selectedTrader={selectedTrader}
+                }}
-            status={status}
+              />
-            account={account}
+            ) : currentPage === 'backtest' ? (
-            positions={positions}
+              <BacktestPage />
-            decisions={decisions}
+            ) : currentPage === 'strategy' ? (
-            decisionsLimit={decisionsLimit}
+              <StrategyStudioPage />
-            onDecisionsLimitChange={setDecisionsLimit}
+            ) : currentPage === 'debate' ? (
-            stats={stats}
+              <DebateArenaPage />
-            lastUpdate={lastUpdate}
+            ) : (
-            language={language}
+              <TraderDetailsPage
-            traders={traders}
+                selectedTrader={selectedTrader}
-            tradersError={tradersError}
+                status={status}
-            selectedTraderId={selectedTraderId}
+                account={account}
-            onTraderSelect={(traderId) => {
+                positions={positions}
-              setSelectedTraderId(traderId)
+                decisions={decisions}
-              // 更新 URL 参数（使用 slug: name-id前4位）
+                decisionsLimit={decisionsLimit}
-              const trader = traders?.find(t => t.trader_id === traderId)
+                onDecisionsLimitChange={setDecisionsLimit}
-              if (trader) {
+                stats={stats}
-                const url = new URL(window.location.href)
+                lastUpdate={lastUpdate}
-                url.searchParams.set('trader', getTraderSlug(trader))
+                language={language}
-                window.history.replaceState({}, '', url.toString())
+                traders={traders}
-              }
+                tradersError={tradersError}
-            }}
+                selectedTraderId={selectedTraderId}
-            onNavigateToTraders={() => {
+                onTraderSelect={(traderId) => {
-              window.history.pushState({}, '', '/traders')
+                  setSelectedTraderId(traderId)
-              setRoute('/traders')
+                  // 更新 URL 参数（使用 slug: name-id前4位）
-              setCurrentPage('traders')
+                  const trader = traders?.find(t => t.trader_id === traderId)
-            }}
+                  if (trader) {
-            exchanges={exchanges}
+                    const url = new URL(window.location.href)
-          />
+                    url.searchParams.set('trader', getTraderSlug(trader))
-        )}
+                    window.history.replaceState({}, '', url.toString())
+                  }
+                }}
+                onNavigateToTraders={() => {
+                  window.history.pushState({}, '', '/traders')
+                  setRoute('/traders')
+                  setCurrentPage('traders')
+                }}
+                exchanges={exchanges}
+              />
+            )}
+          </motion.div>
+        </AnimatePresence>
       </main>
 
       {/* Footer - Hidden on debate page */}
@@ -751,6 +651,13 @@ function App() {
           </div>
         </footer>
       )}
+
+      {/* Login Required Overlay */}
+      <LoginRequiredOverlay
+        isOpen={loginOverlayOpen}
+        onClose={() => setLoginOverlayOpen(false)}
+        featureName={loginOverlayFeature}
+      />
     </div>
   )
 }
@@ -1146,7 +1053,7 @@ function TraderDetailsPage({
             >
               {getModelDisplayName(
                 selectedTrader.ai_model.split('_').pop() ||
-                  selectedTrader.ai_model
+                selectedTrader.ai_model
               )}
             </span>
           </span>
@@ -1351,13 +1258,13 @@ function TraderDetailsPage({
                               style={
                                 pos.side === 'long'
                                   ? {
-                                      background: 'rgba(14, 203, 129, 0.1)',
+                                    background: 'rgba(14, 203, 129, 0.1)',
-                                      color: '#0ECB81',
+                                    color: '#0ECB81',
-                                    }
+                                  }
                                   : {
-                                      background: 'rgba(246, 70, 93, 0.1)',
+                                    background: 'rgba(246, 70, 93, 0.1)',
-                                      color: '#F6465D',
+                                    color: '#F6465D',
-                                    }
+                                  }
                               }
                             >
                               {t(

web/src/components/HeaderBar.tsx

@@ -12,6 +12,7 @@ type Page =
   | 'trader'
   | 'backtest'
   | 'strategy'
+  | 'strategy-market'
   | 'debate'
   | 'faq'
   | 'login'
@@ -27,6 +28,7 @@ interface HeaderBarProps {
   user?: { email: string } | null
   onLogout?: () => void
   onPageChange?: (page: Page) => void
+  onLoginRequired?: (featureName: string) => void
 }
 
 export default function HeaderBar({
@@ -38,6 +40,7 @@ export default function HeaderBar({
   user,
   onLogout,
   onPageChange,
+  onLoginRequired,
 }: HeaderBarProps) {
   const navigate = useNavigate()
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
@@ -92,380 +95,67 @@ export default function HeaderBar({
 
         {/* Desktop Menu */}
         <div className="hidden md:flex items-center justify-between flex-1 ml-8">
-          {/* Left Side - Navigation Tabs */}
+          {/* Left Side - Navigation Tabs - Always show all tabs */}
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
-            {isLoggedIn ? (
+            {/* Navigation tabs configuration */}
-              // Main app navigation when logged in
+            {(() => {
-              <>
+              // Define all navigation tabs
+              const navTabs: { page: Page; path: string; label: string; requiresAuth: boolean }[] = [
+                { page: 'competition', path: '/competition', label: t('realtimeNav', language), requiresAuth: true },
+                { page: 'strategy-market', path: '/strategy-market', label: language === 'zh' ? '策略市场' : 'Market', requiresAuth: true },
+                { page: 'traders', path: '/traders', label: t('configNav', language), requiresAuth: true },
+                { page: 'trader', path: '/dashboard', label: t('dashboardNav', language), requiresAuth: true },
+                { page: 'strategy', path: '/strategy', label: t('strategyNav', language), requiresAuth: true },
+                { page: 'debate', path: '/debate', label: t('debateNav', language), requiresAuth: true },
+                { page: 'backtest', path: '/backtest', label: 'Backtest', requiresAuth: true },
+                { page: 'faq', path: '/faq', label: t('faqNav', language), requiresAuth: false },
+              ]
+
+              const handleNavClick = (tab: typeof navTabs[0]) => {
+                // If requires auth and not logged in, show login prompt
+                if (tab.requiresAuth && !isLoggedIn) {
+                  onLoginRequired?.(tab.label)
+                  return
+                }
+                // Navigate normally
+                if (onPageChange) {
+                  onPageChange(tab.page)
+                }
+                navigate(tab.path)
+              }
+
+              return navTabs.map((tab) => (
                 <button
-                  onClick={() => {
+                  key={tab.page}
-                    if (onPageChange) {
+                  onClick={() => handleNavClick(tab)}
-                      onPageChange('competition')
-                    }
-                    navigate('/competition')
-                  }}
                   className="text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
                   style={{
-                    color:
+                    color: currentPage === tab.page ? 'var(--brand-yellow)' : 'var(--brand-light-gray)',
-                      currentPage === 'competition'
+                    padding: '8px 12px',
-                        ? 'var(--brand-yellow)'
-                        : 'var(--brand-light-gray)',
-                    padding: '8px 16px',
                     borderRadius: '8px',
                     position: 'relative',
                   }}
                   onMouseEnter={(e) => {
-                    if (currentPage !== 'competition') {
+                    if (currentPage !== tab.page) {
                       e.currentTarget.style.color = 'var(--brand-yellow)'
                     }
                   }}
                   onMouseLeave={(e) => {
-                    if (currentPage !== 'competition') {
+                    if (currentPage !== tab.page) {
                       e.currentTarget.style.color = 'var(--brand-light-gray)'
                     }
                   }}
                 >
-                  {/* Background for selected state */}
+                  {currentPage === tab.page && (
-                  {currentPage === 'competition' && (
                     <span
                       className="absolute inset-0 rounded-lg"
-                      style={{
+                      style={{ background: 'rgba(240, 185, 11, 0.15)', zIndex: -1 }}
-                        background: 'rgba(240, 185, 11, 0.15)',
-                        zIndex: -1,
-                      }}
                     />
                   )}
-
+                  {tab.label}
-                  {t('realtimeNav', language)}
                 </button>
-
+              ))
-                <button
+            })()}
-                  onClick={() => {
-                    if (onPageChange) {
-                      onPageChange('traders')
-                    }
-                    navigate('/traders')
-                  }}
-                  className="text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
-                  style={{
-                    color:
-                      currentPage === 'traders'
-                        ? 'var(--brand-yellow)'
-                        : 'var(--brand-light-gray)',
-                    padding: '8px 16px',
-                    borderRadius: '8px',
-                    position: 'relative',
-                  }}
-                  onMouseEnter={(e) => {
-                    if (currentPage !== 'traders') {
-                      e.currentTarget.style.color = 'var(--brand-yellow)'
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (currentPage !== 'traders') {
-                      e.currentTarget.style.color = 'var(--brand-light-gray)'
-                    }
-                  }}
-                >
-                  {/* Background for selected state */}
-                  {currentPage === 'traders' && (
-                    <span
-                      className="absolute inset-0 rounded-lg"
-                      style={{
-                        background: 'rgba(240, 185, 11, 0.15)',
-                        zIndex: -1,
-                      }}
-                    />
-                  )}
-
-                  {t('configNav', language)}
-                </button>
-
-                <button
-                  onClick={() => {
-                    if (onPageChange) {
-                      onPageChange('trader')
-                    }
-                    navigate('/dashboard')
-                  }}
-                  className="text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
-                  style={{
-                    color:
-                      currentPage === 'trader'
-                        ? 'var(--brand-yellow)'
-                        : 'var(--brand-light-gray)',
-                    padding: '8px 16px',
-                    borderRadius: '8px',
-                    position: 'relative',
-                  }}
-                  onMouseEnter={(e) => {
-                    if (currentPage !== 'trader') {
-                      e.currentTarget.style.color = 'var(--brand-yellow)'
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (currentPage !== 'trader') {
-                      e.currentTarget.style.color = 'var(--brand-light-gray)'
-                    }
-                  }}
-                >
-                  {/* Background for selected state */}
-                  {currentPage === 'trader' && (
-                    <span
-                      className="absolute inset-0 rounded-lg"
-                      style={{
-                        background: 'rgba(240, 185, 11, 0.15)',
-                        zIndex: -1,
-                      }}
-                    />
-                  )}
-
-                  {t('dashboardNav', language)}
-                </button>
-
-                <button
-                  onClick={() => {
-                    if (onPageChange) {
-                      onPageChange('strategy')
-                    }
-                    navigate('/strategy')
-                  }}
-                  className="text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
-                  style={{
-                    color:
-                      currentPage === 'strategy'
-                        ? 'var(--brand-yellow)'
-                        : 'var(--brand-light-gray)',
-                    padding: '8px 16px',
-                    borderRadius: '8px',
-                    position: 'relative',
-                  }}
-                  onMouseEnter={(e) => {
-                    if (currentPage !== 'strategy') {
-                      e.currentTarget.style.color = 'var(--brand-yellow)'
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (currentPage !== 'strategy') {
-                      e.currentTarget.style.color = 'var(--brand-light-gray)'
-                    }
-                  }}
-                >
-                  {currentPage === 'strategy' && (
-                    <span
-                      className="absolute inset-0 rounded-lg"
-                      style={{
-                        background: 'rgba(240, 185, 11, 0.15)',
-                        zIndex: -1,
-                      }}
-                    />
-                  )}
-
-                  {t('strategyNav', language)}
-                </button>
-
-                <button
-                  onClick={() => {
-                    if (onPageChange) {
-                      onPageChange('debate')
-                    }
-                    navigate('/debate')
-                  }}
-                  className="text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
-                  style={{
-                    color:
-                      currentPage === 'debate'
-                        ? 'var(--brand-yellow)'
-                        : 'var(--brand-light-gray)',
-                    padding: '8px 16px',
-                    borderRadius: '8px',
-                    position: 'relative',
-                  }}
-                  onMouseEnter={(e) => {
-                    if (currentPage !== 'debate') {
-                      e.currentTarget.style.color = 'var(--brand-yellow)'
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (currentPage !== 'debate') {
-                      e.currentTarget.style.color = 'var(--brand-light-gray)'
-                    }
-                  }}
-                >
-                  {currentPage === 'debate' && (
-                    <span
-                      className="absolute inset-0 rounded-lg"
-                      style={{
-                        background: 'rgba(240, 185, 11, 0.15)',
-                        zIndex: -1,
-                      }}
-                    />
-                  )}
-
-                  {t('debateNav', language)}
-                </button>
-
-                <button
-                  onClick={() => {
-                    if (onPageChange) {
-                      onPageChange('backtest')
-                    }
-                    navigate('/backtest')
-                  }}
-                  className="text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
-                  style={{
-                    color:
-                      currentPage === 'backtest'
-                        ? 'var(--brand-yellow)'
-                        : 'var(--brand-light-gray)',
-                    padding: '8px 16px',
-                    borderRadius: '8px',
-                    position: 'relative',
-                  }}
-                  onMouseEnter={(e) => {
-                    if (currentPage !== 'backtest') {
-                      e.currentTarget.style.color = 'var(--brand-yellow)'
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (currentPage !== 'backtest') {
-                      e.currentTarget.style.color = 'var(--brand-light-gray)'
-                    }
-                  }}
-                >
-                  {currentPage === 'backtest' && (
-                    <span
-                      className="absolute inset-0 rounded-lg"
-                      style={{
-                        background: 'rgba(240, 185, 11, 0.15)',
-                        zIndex: -1,
-                      }}
-                    />
-                  )}
-
-                  Backtest
-                </button>
-
-                <button
-                  onClick={() => {
-                    if (onPageChange) {
-                      onPageChange('faq')
-                    }
-                    navigate('/faq')
-                  }}
-                  className="text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
-                  style={{
-                    color:
-                      currentPage === 'faq'
-                        ? 'var(--brand-yellow)'
-                        : 'var(--brand-light-gray)',
-                    padding: '8px 16px',
-                    borderRadius: '8px',
-                    position: 'relative',
-                  }}
-                  onMouseEnter={(e) => {
-                    if (currentPage !== 'faq') {
-                      e.currentTarget.style.color = 'var(--brand-yellow)'
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (currentPage !== 'faq') {
-                      e.currentTarget.style.color = 'var(--brand-light-gray)'
-                    }
-                  }}
-                >
-                  {/* Background for selected state */}
-                  {currentPage === 'faq' && (
-                    <span
-                      className="absolute inset-0 rounded-lg"
-                      style={{
-                        background: 'rgba(240, 185, 11, 0.15)',
-                        zIndex: -1,
-                      }}
-                    />
-                  )}
-
-                  {t('faqNav', language)}
-                </button>
-              </>
-            ) : (
-              // Landing page navigation when not logged in
-              <>
-                <a
-                  href="/competition"
-                  className="text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
-                  style={{
-                    color:
-                      currentPage === 'competition'
-                        ? 'var(--brand-yellow)'
-                        : 'var(--brand-light-gray)',
-                    padding: '8px 16px',
-                    borderRadius: '8px',
-                    position: 'relative',
-                  }}
-                  onMouseEnter={(e) => {
-                    if (currentPage !== 'competition') {
-                      e.currentTarget.style.color = 'var(--brand-yellow)'
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (currentPage !== 'competition') {
-                      e.currentTarget.style.color = 'var(--brand-light-gray)'
-                    }
-                  }}
-                >
-                  {/* Background for selected state */}
-                  {currentPage === 'competition' && (
-                    <span
-                      className="absolute inset-0 rounded-lg"
-                      style={{
-                        background: 'rgba(240, 185, 11, 0.15)',
-                        zIndex: -1,
-                      }}
-                    />
-                  )}
-
-                  {t('realtimeNav', language)}
-                </a>
-
-                <a
-                  href="/faq"
-                  className="text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
-                  style={{
-                    color:
-                      currentPage === 'faq'
-                        ? 'var(--brand-yellow)'
-                        : 'var(--brand-light-gray)',
-                    padding: '8px 16px',
-                    borderRadius: '8px',
-                    position: 'relative',
-                  }}
-                  onMouseEnter={(e) => {
-                    if (currentPage !== 'faq') {
-                      e.currentTarget.style.color = 'var(--brand-yellow)'
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (currentPage !== 'faq') {
-                      e.currentTarget.style.color = 'var(--brand-light-gray)'
-                    }
-                  }}
-                >
-                  {/* Background for selected state */}
-                  {currentPage === 'faq' && (
-                    <span
-                      className="absolute inset-0 rounded-lg"
-                      style={{
-                        background: 'rgba(240, 185, 11, 0.15)',
-                        zIndex: -1,
-                      }}
-                    />
-                  )}
-
-                  {t('faqNav', language)}
-                </a>
-              </>
-            )}
           </div>
 
           {/* Right Side - Social Links and User Actions */}
@@ -755,89 +445,40 @@ export default function HeaderBar({
           borderTop: '1px solid rgba(240, 185, 11, 0.1)',
         }}
       >
-        <div className="px-4 py-4 space-y-3">
+        <div className="px-4 py-4 space-y-2">
-          {/* New Navigation Tabs */}
+          {/* Mobile Navigation Tabs - Show all tabs */}
-          {isLoggedIn ? (
+          {(() => {
-            <button
+            const navTabs: { page: Page; path: string; label: string; requiresAuth: boolean }[] = [
-              onClick={() => {
+              { page: 'competition', path: '/competition', label: t('realtimeNav', language), requiresAuth: true },
-                console.log(
+              { page: 'strategy-market', path: '/strategy-market', label: language === 'zh' ? '策略市场' : 'Market', requiresAuth: true },
-                  '移动端 实时 button clicked, onPageChange:',
+              { page: 'traders', path: '/traders', label: t('configNav', language), requiresAuth: true },
-                  onPageChange
+              { page: 'trader', path: '/dashboard', label: t('dashboardNav', language), requiresAuth: true },
-                )
+              { page: 'strategy', path: '/strategy', label: t('strategyNav', language), requiresAuth: true },
-                onPageChange?.('competition')
+              { page: 'debate', path: '/debate', label: t('debateNav', language), requiresAuth: true },
+              { page: 'backtest', path: '/backtest', label: 'Backtest', requiresAuth: true },
+              { page: 'faq', path: '/faq', label: t('faqNav', language), requiresAuth: false },
+            ]
+
+            const handleMobileNavClick = (tab: typeof navTabs[0]) => {
+              if (tab.requiresAuth && !isLoggedIn) {
+                onLoginRequired?.(tab.label)
                 setMobileMenuOpen(false)
-              }}
+                return
-              className="block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
+              }
-              style={{
+              if (onPageChange) {
-                color:
+                onPageChange(tab.page)
-                  currentPage === 'competition'
+              }
-                    ? 'var(--brand-yellow)'
+              navigate(tab.path)
-                    : 'var(--brand-light-gray)',
+              setMobileMenuOpen(false)
-                padding: '12px 16px',
+            }
-                borderRadius: '8px',
-                position: 'relative',
-                width: '100%',
-                textAlign: 'left',
-              }}
-            >
-              {/* Background for selected state */}
-              {currentPage === 'competition' && (
-                <span
-                  className="absolute inset-0 rounded-lg"
-                  style={{
-                    background: 'rgba(240, 185, 11, 0.15)',
-                    zIndex: -1,
-                  }}
-                />
-              )}
 
-              {t('realtimeNav', language)}
+            return navTabs.map((tab) => (
-            </button>
-          ) : (
-            <a
-              href="/competition"
-              className="block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
-              style={{
-                color:
-                  currentPage === 'competition'
-                    ? 'var(--brand-yellow)'
-                    : 'var(--brand-light-gray)',
-                padding: '12px 16px',
-                borderRadius: '8px',
-                position: 'relative',
-              }}
-            >
-              {/* Background for selected state */}
-              {currentPage === 'competition' && (
-                <span
-                  className="absolute inset-0 rounded-lg"
-                  style={{
-                    background: 'rgba(240, 185, 11, 0.15)',
-                    zIndex: -1,
-                  }}
-                />
-              )}
-
-              {t('realtimeNav', language)}
-            </a>
-          )}
-          {/* Only show 配置 and 看板 when logged in */}
-          {isLoggedIn && (
-            <>
               <button
-                onClick={() => {
+                key={tab.page}
-                  if (onPageChange) {
+                onClick={() => handleMobileNavClick(tab)}
-                    onPageChange('traders')
+                className="block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
-                  }
-                  navigate('/traders')
-                  setMobileMenuOpen(false)
-                }}
-                className="block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500 hover:text-yellow-500"
                 style={{
-                  color:
+                  color: currentPage === tab.page ? 'var(--brand-yellow)' : 'var(--brand-light-gray)',
-                    currentPage === 'traders'
-                      ? 'var(--brand-yellow)'
-                      : 'var(--brand-light-gray)',
                   padding: '12px 16px',
                   borderRadius: '8px',
                   position: 'relative',
@@ -845,191 +486,21 @@ export default function HeaderBar({
                   textAlign: 'left',
                 }}
               >
-                {/* Background for selected state */}
+                {currentPage === tab.page && (
-                {currentPage === 'traders' && (
                   <span
                     className="absolute inset-0 rounded-lg"
-                    style={{
+                    style={{ background: 'rgba(240, 185, 11, 0.15)', zIndex: -1 }}
-                      background: 'rgba(240, 185, 11, 0.15)',
-                      zIndex: -1,
-                    }}
                   />
                 )}
-
+                {tab.label}
-                {t('configNav', language)}
+                {tab.requiresAuth && !isLoggedIn && (
-              </button>
+                  <span className="ml-2 text-[10px] px-1.5 py-0.5 rounded" style={{ background: 'rgba(240, 185, 11, 0.2)', color: '#F0B90B' }}>
-              <button
+                    {language === 'zh' ? '需登录' : 'Login'}
-                onClick={() => {
+                  </span>
-                  if (onPageChange) {
-                    onPageChange('trader')
-                  }
-                  navigate('/dashboard')
-                  setMobileMenuOpen(false)
-                }}
-                className="block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500 hover:text-yellow-500"
-                style={{
-                  color:
-                    currentPage === 'trader'
-                      ? 'var(--brand-yellow)'
-                      : 'var(--brand-light-gray)',
-                  padding: '12px 16px',
-                  borderRadius: '8px',
-                  position: 'relative',
-                  width: '100%',
-                  textAlign: 'left',
-                }}
-              >
-                {/* Background for selected state */}
-                {currentPage === 'trader' && (
-                  <span
-                    className="absolute inset-0 rounded-lg"
-                    style={{
-                      background: 'rgba(240, 185, 11, 0.15)',
-                      zIndex: -1,
-                    }}
-                  />
                 )}
-
-                {t('dashboardNav', language)}
               </button>
-              <button
+            ))
-                onClick={() => {
+          })()}
-                  if (onPageChange) {
-                    onPageChange('strategy')
-                  }
-                  navigate('/strategy')
-                  setMobileMenuOpen(false)
-                }}
-                className="block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500 hover:text-yellow-500"
-                style={{
-                  color:
-                    currentPage === 'strategy'
-                      ? 'var(--brand-yellow)'
-                      : 'var(--brand-light-gray)',
-                  padding: '12px 16px',
-                  borderRadius: '8px',
-                  position: 'relative',
-                  width: '100%',
-                  textAlign: 'left',
-                }}
-              >
-                {/* Background for selected state */}
-                {currentPage === 'strategy' && (
-                  <span
-                    className="absolute inset-0 rounded-lg"
-                    style={{
-                      background: 'rgba(240, 185, 11, 0.15)',
-                      zIndex: -1,
-                    }}
-                  />
-                )}
-
-                {t('strategyNav', language)}
-              </button>
-              <button
-                onClick={() => {
-                  if (onPageChange) {
-                    onPageChange('debate')
-                  }
-                  navigate('/debate')
-                  setMobileMenuOpen(false)
-                }}
-                className="block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500 hover:text-yellow-500"
-                style={{
-                  color:
-                    currentPage === 'debate'
-                      ? 'var(--brand-yellow)'
-                      : 'var(--brand-light-gray)',
-                  padding: '12px 16px',
-                  borderRadius: '8px',
-                  position: 'relative',
-                  width: '100%',
-                  textAlign: 'left',
-                }}
-              >
-                {/* Background for selected state */}
-                {currentPage === 'debate' && (
-                  <span
-                    className="absolute inset-0 rounded-lg"
-                    style={{
-                      background: 'rgba(240, 185, 11, 0.15)',
-                      zIndex: -1,
-                    }}
-                  />
-                )}
-
-                {t('debateNav', language)}
-              </button>
-              <button
-                onClick={() => {
-                  if (onPageChange) {
-                    onPageChange('backtest')
-                  }
-                  navigate('/backtest')
-                  setMobileMenuOpen(false)
-                }}
-                className="block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500 hover:text-yellow-500"
-                style={{
-                  color:
-                    currentPage === 'backtest'
-                      ? 'var(--brand-yellow)'
-                      : 'var(--brand-light-gray)',
-                  padding: '12px 16px',
-                  borderRadius: '8px',
-                  position: 'relative',
-                  width: '100%',
-                  textAlign: 'left',
-                }}
-              >
-                {/* Background for selected state */}
-                {currentPage === 'backtest' && (
-                  <span
-                    className="absolute inset-0 rounded-lg"
-                    style={{
-                      background: 'rgba(240, 185, 11, 0.15)',
-                      zIndex: -1,
-                    }}
-                  />
-                )}
-
-                Backtest
-              </button>
-              <button
-                onClick={() => {
-                  if (onPageChange) {
-                    onPageChange('faq')
-                  }
-                  navigate('/faq')
-                  setMobileMenuOpen(false)
-                }}
-                className="block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500 hover:text-yellow-500"
-                style={{
-                  color:
-                    currentPage === 'faq'
-                      ? 'var(--brand-yellow)'
-                      : 'var(--brand-light-gray)',
-                  padding: '12px 16px',
-                  borderRadius: '8px',
-                  position: 'relative',
-                  width: '100%',
-                  textAlign: 'left',
-                }}
-              >
-                {/* Background for selected state */}
-                {currentPage === 'faq' && (
-                  <span
-                    className="absolute inset-0 rounded-lg"
-                    style={{
-                      background: 'rgba(240, 185, 11, 0.15)',
-                      zIndex: -1,
-                    }}
-                  />
-                )}
-
-                {t('faqNav', language)}
-              </button>
-            </>
-          )}
 
           {/* Original Navigation Items - Only on home page */}
           {isHomePage &&

web/src/components/LoginPage.tsx

@@ -3,7 +3,7 @@ import { useAuth } from '../contexts/AuthContext'
 import { useLanguage } from '../contexts/LanguageContext'
 import { t } from '../i18n/translations'
 import { Eye, EyeOff } from 'lucide-react'
-import { Input } from './ui/input'
+// import { Input } from './ui/input' // Removed unused import
 import { toast } from 'sonner'
 import { useSystemConfig } from '../hooks/useSystemConfig'
 
@@ -102,261 +102,262 @@ export function LoginPage() {
   }
 
   return (
-    <div
+    <div className="min-h-screen bg-black text-zinc-300 font-mono relative overflow-hidden flex items-center justify-center py-12">
-      className="flex items-center justify-center py-12"
+      {/* Background Effects */}
-      style={{ minHeight: 'calc(100vh - 64px)' }}
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none"></div>
-    >
+      <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent pointer-events-none"></div>
-      <div className="w-full max-w-md">
+
-        {/* Logo */}
+      {/* Scanline Effect */}
-        <div className="text-center mb-8">
+      <div className="absolute inset-0 pointer-events-none opacity-[0.03] bg-[linear-gradient(transparent_50%,rgba(0,0,0,0.5)_50%)] bg-[length:100%_4px]"></div>
-          <div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center">
+
-            <img
+      <div className="w-full max-w-md relative z-10 px-6">
-              src="/icons/nofx.svg"
+        {/* Navigation - Top Bar (Mobile/Desktop Friendly) */}
-              alt="NoFx Logo"
+        <div className="flex justify-between items-center mb-8">
-              className="w-16 h-16 object-contain"
+          <button
-            />
+            onClick={() => window.location.href = '/'}
+            className="flex items-center gap-2 text-zinc-500 hover:text-white transition-colors group px-3 py-1.5 rounded border border-transparent hover:border-zinc-700 bg-black/20 backdrop-blur-sm"
+          >
+            <div className="w-2 h-2 rounded-full bg-red-500 group-hover:animate-pulse"></div>
+            <span className="text-xs font-mono uppercase tracking-widest">&lt; CANCEL_LOGIN</span>
+          </button>
+        </div>
+
+        {/* Terminal Header */}
+        <div className="mb-8 text-center">
+          <div className="flex justify-center mb-6">
+            <div className="relative">
+              <div className="absolute -inset-2 bg-nofx-gold/20 rounded-full blur-xl animate-pulse"></div>
+              <img
+                src="/icons/nofx.svg"
+                alt="NoFx Logo"
+                className="w-16 h-16 object-contain relative z-10 opacity-90"
+              />
+            </div>
           </div>
-          <h1
+          <h1 className="text-3xl font-bold tracking-tighter text-white uppercase mb-2">
-            className="text-2xl font-bold"
+            <span className="text-nofx-gold">SYSTEM</span> ACCESS
-            style={{ color: 'var(--brand-light-gray)' }}
-          >
-            登录 NOFX
           </h1>
-          <p
+          <p className="text-zinc-500 text-xs tracking-[0.2em] uppercase">
-            className="text-sm mt-2"
+            {step === 'login' ? 'Authentication Protocol v3.0' : 'Multi-Factor Verification'}
-            style={{ color: 'var(--text-secondary)' }}
-          >
-            {step === 'login' ? '请输入您的邮箱和密码' : '请输入两步验证码'}
           </p>
         </div>
 
-        {/* Login Form */}
+        {/* Terminal Output / Form Container */}
-        <div
+        <div className="bg-zinc-900/40 backdrop-blur-md border border-zinc-800 rounded-lg overflow-hidden shadow-2xl relative group">
-          className="rounded-lg p-6"
+          <div className="absolute inset-0 bg-zinc-900/50 opacity-0 group-hover:opacity-100 transition duration-700 pointer-events-none"></div>
-          style={{
+
-            background: 'var(--panel-bg)',
+          {/* Window Bar */}
-            border: '1px solid var(--panel-border)',
+          <div className="flex items-center justify-between px-4 py-2 bg-zinc-900/80 border-b border-zinc-800">
-          }}
+            <div className="flex gap-1.5">
-        >
+              <div
-          {adminMode ? (
+                className="w-2.5 h-2.5 rounded-full bg-red-500/50 hover:bg-red-500 cursor-pointer transition-colors"
-            <form onSubmit={handleAdminLogin} className="space-y-4">
+                onClick={() => window.location.href = '/'}
-              <div>
+                title="Close / Return Home"
-                <label
+              ></div>
-                  className="block text-sm font-semibold mb-2"
+              <div className="w-2.5 h-2.5 rounded-full bg-yellow-500/50"></div>
-                  style={{ color: 'var(--brand-light-gray)' }}
+              <div className="w-2.5 h-2.5 rounded-full bg-green-500/50"></div>
-                >
+            </div>
-                  管理员密码
+            <div className="text-[10px] text-zinc-600 font-mono flex items-center gap-1">
-                </label>
+              <span className="text-emerald-500">➜</span> login.exe
-                <input
+            </div>
-                  type="password"
+          </div>
-                  value={adminPassword}
+
-                  onChange={(e) => setAdminPassword(e.target.value)}
+          <div className="p-6 md:p-8 relative">
-                  className="w-full px-3 py-2 rounded"
+            {/* Status Output */}
-                  style={{
+            <div className="mb-6 font-mono text-xs space-y-1 text-zinc-500 border-b border-zinc-800/50 pb-4">
-                    background: 'var(--brand-black)',
+              <div className="flex gap-2">
-                    border: '1px solid var(--panel-border)',
+                <span className="text-emerald-500">➜</span>
-                    color: 'var(--brand-light-gray)',
+                <span>Initiating handshake...</span>
-                  }}
-                  placeholder="请输入管理员密码"
-                  required
-                />
               </div>
-
+              <div className="flex gap-2">
-              {error && (
+                <span className="text-emerald-500">➜</span>
-                <div
+                <span>Target: NOFX CORE HUB</span>
-                  className="text-sm px-3 py-2 rounded"
-                  style={{
-                    background: 'var(--binance-red-bg)',
-                    color: 'var(--binance-red)',
-                  }}
-                >
-                  {error}
-                </div>
-              )}
-
-              <button
-                type="submit"
-                disabled={loading}
-                className="w-full px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50"
-                style={{
-                  background: 'var(--brand-yellow)',
-                  color: 'var(--brand-black)',
-                }}
-              >
-                {loading ? t('loading', language) : '登录'}
-              </button>
-            </form>
-          ) : step === 'login' ? (
-            <form onSubmit={handleLogin} className="space-y-4">
-              <div>
-                <label
-                  className="block text-sm font-semibold mb-2"
-                  style={{ color: 'var(--brand-light-gray)' }}
-                >
-                  {t('email', language)}
-                </label>
-                <Input
-                  type="email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  placeholder={t('emailPlaceholder', language)}
-                  required
-                />
               </div>
+              <div className="flex gap-2">
+                <span className="text-emerald-500">➜</span>
+                <span>Status: <span className="text-zinc-300">AWAITING CREDENTIALS</span></span>
+              </div>
+            </div>
 
-              <div>
+            {adminMode ? (
-                <label
+              <form onSubmit={handleAdminLogin} className="space-y-5">
-                  className="block text-sm font-semibold mb-2"
+                <div>
-                  style={{ color: 'var(--brand-light-gray)' }}
+                  <label className="block text-xs uppercase tracking-wider text-nofx-gold mb-1.5 ml-1">Admin Key</label>
-                >
+                  <input
-                  {t('password', language)}
+                    type="password"
-                </label>
+                    value={adminPassword}
-                <div className="relative">
+                    onChange={(e) => setAdminPassword(e.target.value)}
-                  <Input
+                    className="w-full bg-black/50 border border-zinc-700 rounded px-4 py-3 text-sm focus:border-nofx-gold focus:ring-1 focus:ring-nofx-gold/50 outline-none transition-all placeholder-zinc-700 text-white font-mono"
-                    type={showPassword ? 'text' : 'password'}
+                    placeholder="ENTER_ROOT_PASSWORD"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    className="pr-10"
-                    placeholder={t('passwordPlaceholder', language)}
                     required
                   />
-                  <button
-                    type="button"
-                    aria-label={showPassword ? '隐藏密码' : '显示密码'}
-                    onMouseDown={(e) => e.preventDefault()}
-                    onClick={() => setShowPassword((v) => !v)}
-                    className="absolute inset-y-0 right-2 w-8 h-10 flex items-center justify-center rounded bg-transparent p-0 m-0 border-0 outline-none focus:outline-none focus:ring-0 appearance-none cursor-pointer btn-icon"
-                    style={{ color: 'var(--text-secondary)' }}
-                  >
-                    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
-                  </button>
                 </div>
-                <div className="text-right mt-2">
-                  <button
-                    type="button"
-                    onClick={() => {
-                      window.location.href = '/reset-password'
-                    }}
-                    className="text-xs hover:underline"
-                    style={{ color: '#F0B90B' }}
-                  >
-                    {t('forgotPassword', language)}
-                  </button>
-                </div>
-              </div>
 
-              {error && (
+                {error && (
-                <div
+                  <div className="text-xs bg-red-500/10 border border-red-500/30 text-red-500 px-3 py-2 rounded font-mono">
-                  className="text-sm px-3 py-2 rounded"
+                    [ERROR]: {error}
-                  style={{
+                  </div>
-                    background: 'var(--binance-red-bg)',
+                )}
-                    color: 'var(--binance-red)',
-                  }}
-                >
-                  {error}
-                </div>
-              )}
 
-              <button
-                type="submit"
-                disabled={loading}
-                className="w-full px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50"
-                style={{
-                  background: 'var(--brand-yellow)',
-                  color: 'var(--brand-black)',
-                }}
-              >
-                {loading ? t('loading', language) : t('loginButton', language)}
-              </button>
-            </form>
-          ) : (
-            <form onSubmit={handleOTPVerify} className="space-y-4">
-              <div className="text-center mb-4">
-                <div className="text-4xl mb-2">📱</div>
-                <p className="text-sm" style={{ color: '#848E9C' }}>
-                  {t('scanQRCodeInstructions', language)}
-                  <br />
-                  {t('enterOTPCode', language)}
-                </p>
-              </div>
-
-              <div>
-                <label
-                  className="block text-sm font-semibold mb-2"
-                  style={{ color: 'var(--brand-light-gray)' }}
-                >
-                  {t('otpCode', language)}
-                </label>
-                <input
-                  type="text"
-                  value={otpCode}
-                  onChange={(e) =>
-                    setOtpCode(e.target.value.replace(/\D/g, '').slice(0, 6))
-                  }
-                  className="w-full px-3 py-2 rounded text-center text-2xl font-mono"
-                  style={{
-                    background: 'var(--brand-black)',
-                    border: '1px solid var(--panel-border)',
-                    color: 'var(--brand-light-gray)',
-                  }}
-                  placeholder={t('otpPlaceholder', language)}
-                  maxLength={6}
-                  required
-                />
-              </div>
-
-              {error && (
-                <div
-                  className="text-sm px-3 py-2 rounded"
-                  style={{
-                    background: 'var(--binance-red-bg)',
-                    color: 'var(--binance-red)',
-                  }}
-                >
-                  {error}
-                </div>
-              )}
-
-              <div className="flex gap-3">
-                <button
-                  type="button"
-                  onClick={() => setStep('login')}
-                  className="flex-1 px-4 py-2 rounded text-sm font-semibold"
-                  style={{
-                    background: 'var(--panel-bg-hover)',
-                    color: 'var(--text-secondary)',
-                  }}
-                >
-                  {t('back', language)}
-                </button>
                 <button
                   type="submit"
-                  disabled={loading || otpCode.length !== 6}
+                  disabled={loading}
-                  className="flex-1 px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50"
+                  className="w-full bg-nofx-gold text-black font-bold py-3 px-4 rounded text-sm tracking-wide uppercase hover:bg-yellow-400 transition-all transform active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed font-mono shadow-[0_0_20px_rgba(255,215,0,0.1)] hover:shadow-[0_0_30px_rgba(255,215,0,0.3)]"
-                  style={{ background: '#F0B90B', color: '#000' }}
                 >
-                  {loading ? t('loading', language) : t('verifyOTP', language)}
+                  {loading ? '> VERIFYING...' : '> EXECUTE_LOGIN'}
                 </button>
-              </div>
+              </form>
-            </form>
+            ) : step === 'login' ? (
-          )}
+              <form onSubmit={handleLogin} className="space-y-5">
+                <div className="space-y-4">
+                  <div>
+                    <label className="block text-xs uppercase tracking-wider text-zinc-500 mb-1.5 ml-1 font-bold">{t('email', language)}</label>
+                    <input
+                      type="email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      className="w-full bg-black/50 border border-zinc-700 rounded px-4 py-3 text-sm focus:border-nofx-gold focus:ring-1 focus:ring-nofx-gold/50 outline-none transition-all placeholder-zinc-700 text-white font-mono"
+                      placeholder="user@nofx.os"
+                      required
+                    />
+                  </div>
+
+                  <div>
+                    <div className="flex items-center justify-between mb-1.5 ml-1">
+                      <label className="block text-xs uppercase tracking-wider text-zinc-500 font-bold">{t('password', language)}</label>
+                    </div>
+
+                    <div className="relative">
+                      <input
+                        type={showPassword ? 'text' : 'password'}
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        className="w-full bg-black/50 border border-zinc-700 rounded px-4 py-3 text-sm focus:border-nofx-gold focus:ring-1 focus:ring-nofx-gold/50 outline-none transition-all placeholder-zinc-700 text-white font-mono pr-10"
+                        placeholder="••••••••••••"
+                        required
+                      />
+                      <button
+                        type="button"
+                        onClick={() => setShowPassword(!showPassword)}
+                        className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-600 hover:text-zinc-400 transition-colors"
+                      >
+                        {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                      </button>
+                    </div>
+                    <div className="text-right mt-2">
+                      <button
+                        type="button"
+                        onClick={() => window.location.href = '/reset-password'}
+                        className="text-[10px] uppercase tracking-wide text-zinc-500 hover:text-nofx-gold transition-colors"
+                      >
+                        &gt; {t('forgotPassword', language)}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                {error && (
+                  <div className="text-xs bg-red-500/10 border border-red-500/30 text-red-500 px-3 py-2 rounded font-mono flex gap-2 items-start">
+                    <span>⚠</span> <span>{error}</span>
+                  </div>
+                )}
+
+                <button
+                  type="submit"
+                  disabled={loading}
+                  className="w-full bg-nofx-gold text-black font-bold py-3 px-4 rounded text-sm tracking-wide uppercase hover:bg-yellow-400 transition-all transform active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed font-mono shadow-[0_0_15px_rgba(255,215,0,0.1)] hover:shadow-[0_0_25px_rgba(255,215,0,0.25)] flex items-center justify-center gap-2 group"
+                >
+                  {loading ? (
+                    <span className="animate-pulse">PROCESSING...</span>
+                  ) : (
+                    <>
+                      <span>AUTHENTICATE</span>
+                      <span className="group-hover:translate-x-1 transition-transform">-&gt;</span>
+                    </>
+                  )}
+                </button>
+              </form>
+            ) : (
+              <form onSubmit={handleOTPVerify} className="space-y-6">
+                <div className="text-center py-2">
+                  <div className="w-12 h-12 bg-zinc-900 rounded-full flex items-center justify-center mx-auto mb-4 border border-zinc-700 text-2xl">
+                    🔐
+                  </div>
+                  <p className="text-xs text-zinc-400 font-mono leading-relaxed">
+                    {t('scanQRCodeInstructions', language)}<br />
+                    {t('enterOTPCode', language)}
+                  </p>
+                </div>
+
+                <div>
+                  <label className="block text-xs uppercase tracking-wider text-nofx-gold mb-2 text-center font-bold">
+                    {t('otpCode', language)}
+                  </label>
+                  <input
+                    type="text"
+                    value={otpCode}
+                    onChange={(e) =>
+                      setOtpCode(e.target.value.replace(/\D/g, '').slice(0, 6))
+                    }
+                    className="w-full bg-black border border-zinc-700 rounded px-4 py-4 text-center text-2xl tracking-[0.5em] font-mono text-white focus:border-nofx-gold focus:ring-1 focus:ring-nofx-gold/50 outline-none transition-all placeholder-zinc-800"
+                    placeholder="000000"
+                    maxLength={6}
+                    required
+                    autoFocus
+                  />
+                </div>
+
+                {error && (
+                  <div className="text-xs bg-red-500/10 border border-red-500/30 text-red-500 px-3 py-2 rounded font-mono text-center">
+                    [ACCESS DENIED]: {error}
+                  </div>
+                )}
+
+                <div className="flex gap-3 pt-2">
+                  <button
+                    type="button"
+                    onClick={() => setStep('login')}
+                    className="flex-1 bg-zinc-900 border border-zinc-700 text-zinc-400 py-3 rounded text-xs font-mono uppercase hover:bg-zinc-800 transition-colors"
+                  >
+                    &lt; ABORT
+                  </button>
+                  <button
+                    type="submit"
+                    disabled={loading || otpCode.length !== 6}
+                    className="flex-1 bg-nofx-gold text-black font-bold py-3 rounded text-xs font-mono uppercase hover:bg-yellow-400 transition-colors disabled:opacity-50"
+                  >
+                    {loading ? 'VERIFYING...' : 'CONFIRM IDENTITY'}
+                  </button>
+                </div>
+              </form>
+            )}
+          </div>
+
+          {/* Terminal Footer Info */}
+          <div className="bg-zinc-900/50 p-3 flex justify-between items-center text-[10px] font-mono text-zinc-600 border-t border-zinc-800">
+            <div>SECURE_CONNECTION: ENCRYPTED</div>
+            <div>{new Date().toISOString().split('T')[0]}</div>
+          </div>
         </div>
 
         {/* Register Link */}
         {!adminMode && registrationEnabled && (
-          <div className="text-center mt-6">
+          <div className="text-center mt-8 space-y-4">
-            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+            <p className="text-xs font-mono text-zinc-500">
-              还没有账户？{' '}
+              NEW_USER_DETECTED?{' '}
               <button
-                onClick={() => {
+                onClick={() => window.location.href = '/register'}
-                  window.location.href = '/register'
+                className="text-nofx-gold hover:underline hover:text-yellow-300 transition-colors ml-1 uppercase"
-                }}
-                className="font-semibold hover:underline transition-colors"
-                style={{ color: 'var(--brand-yellow)' }}
               >
-                立即注册
+                INITIALIZE REGISTRATION
               </button>
             </p>
+            <button
+              onClick={() => window.location.href = '/'}
+              className="text-[10px] text-zinc-600 hover:text-red-500 transition-colors uppercase tracking-widest hover:underline decoration-red-500/30 font-mono"
+            >
+              [ ABORT_SESSION_RETURN_HOME ]
+            </button>
           </div>
         )}
       </div>

web/src/components/LoginRequiredOverlay.tsx

@@ -0,0 +1,163 @@
+import { motion, AnimatePresence } from 'framer-motion'
+import { LogIn, UserPlus, X, AlertTriangle, Terminal } from 'lucide-react'
+import { useLanguage } from '../contexts/LanguageContext'
+
+interface LoginRequiredOverlayProps {
+  isOpen: boolean
+  onClose: () => void
+  featureName?: string
+}
+
+export function LoginRequiredOverlay({ isOpen, onClose, featureName }: LoginRequiredOverlayProps) {
+  const { language } = useLanguage()
+
+  const texts = {
+    zh: {
+      title: '系统访问受限',
+      subtitle: featureName ? `访问「${featureName}」需要更高权限` : '此模块需要授权访问',
+      description: '初始化身份验证协议以解锁完整系统功能：AI 交易员配置、策略市场数据流、回测模拟核心。',
+      benefits: [
+        'AI 交易员控制权',
+        '高频策略核心市场',
+        '历史数据回测引擎',
+        '全系统数据可视化'
+      ],
+      login: '执行登录指令',
+      register: '注册新用户 ID',
+      later: '中止操作'
+    },
+    en: {
+      title: 'SYSTEM ACCESS DENIED',
+      subtitle: featureName ? `Module "${featureName}" requires elevated privileges` : 'Authorization required for this module',
+      description: 'Initialize authentication protocol to unlock full system capabilities: AI Trader configuration, Strategy Market data streams, and Backtest Simulation core.',
+      benefits: [
+        'AI Trader Control',
+        'HFT Strategy Market',
+        'Historical Backtest Engine',
+        'Full System Visualization'
+      ],
+      login: 'EXECUTE LOGIN',
+      register: 'REGISTER NEW ID',
+      later: 'ABORT'
+    }
+  }
+
+  const t = texts[language]
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/90 backdrop-blur-sm"
+          onClick={onClose}
+        >
+          {/* Scanline Effect */}
+          <div className="absolute inset-0 pointer-events-none opacity-[0.03] bg-[linear-gradient(transparent_50%,rgba(0,0,0,0.5)_50%)] bg-[length:100%_4px]"></div>
+
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: 10 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: 10 }}
+            transition={{ type: 'spring', damping: 20, stiffness: 300 }}
+            className="relative max-w-md w-full overflow-hidden bg-black border border-nofx-gold/30 shadow-[0_0_50px_rgba(240,185,11,0.1)] rounded-sm group font-mono"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Terminal Window Header */}
+            <div className="flex items-center justify-between px-3 py-2 bg-zinc-900 border-b border-zinc-800">
+              <div className="flex items-center gap-2">
+                <Terminal size={12} className="text-nofx-gold" />
+                <span className="text-[10px] text-zinc-500 uppercase tracking-wider">auth_protocol.exe</span>
+              </div>
+              <button
+                onClick={onClose}
+                className="text-zinc-600 hover:text-red-500 transition-colors"
+              >
+                <X size={14} />
+              </button>
+            </div>
+
+            {/* Main Content */}
+            <div className="p-8 relative">
+              {/* Background Grid */}
+              <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)] bg-[size:14px_14px] pointer-events-none"></div>
+
+              <div className="relative z-10">
+                {/* Flashing Access Denied */}
+                <div className="flex justify-center mb-6">
+                  <div className="relative">
+                    <div className="absolute inset-0 bg-red-500/20 blur-xl animate-pulse"></div>
+                    <div className="bg-black border border-red-500/50 text-red-500 px-4 py-2 flex items-center gap-3 shadow-[0_0_15px_rgba(239,68,68,0.2)]">
+                      <AlertTriangle size={18} className="animate-pulse" />
+                      <span className="font-bold tracking-widest text-sm uppercase">{language === 'zh' ? '访问被拒绝' : 'ACCESS DENIED'}</span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Terminal Text */}
+                <div className="space-y-4 mb-8">
+                  <div className="text-center">
+                    <h2 className="text-xl font-bold text-white uppercase tracking-wider mb-2">{t.title}</h2>
+                    <p className="text-nofx-gold text-xs uppercase tracking-widest border-b border-nofx-gold/20 pb-4 inline-block">{t.subtitle}</p>
+                  </div>
+
+                  <div className="bg-zinc-900/50 border-l-2 border-zinc-700 p-3 my-4">
+                    <p className="text-xs text-zinc-400 leading-relaxed font-mono">
+                      <span className="text-green-500 mr-2">$</span>
+                      {t.description}
+                    </p>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-2">
+                    {t.benefits.map((benefit, i) => (
+                      <div key={i} className="flex items-center gap-2 text-[10px] text-zinc-500 uppercase tracking-wide">
+                        <span className="text-nofx-gold">✓</span> {benefit}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Action Buttons */}
+                <div className="space-y-3">
+                  <a
+                    href="/login"
+                    className="flex items-center justify-center gap-2 w-full py-3 bg-nofx-gold text-black font-bold text-xs uppercase tracking-widest hover:bg-yellow-400 transition-all shadow-[0_0_15px_rgba(240,185,11,0.2)] hover:shadow-[0_0_25px_rgba(240,185,11,0.4)] group"
+                  >
+                    <LogIn size={14} />
+                    <span>{t.login}</span>
+                    <span className="opacity-0 group-hover:opacity-100 transition-opacity -ml-2 group-hover:ml-0">-&gt;</span>
+                  </a>
+
+                  <a
+                    href="/register"
+                    className="flex items-center justify-center gap-2 w-full py-3 bg-transparent border border-zinc-700 text-zinc-400 hover:text-white hover:border-zinc-500 font-bold text-xs uppercase tracking-widest transition-all hover:bg-zinc-900"
+                  >
+                    <UserPlus size={14} />
+                    <span>{t.register}</span>
+                  </a>
+                </div>
+
+                <div className="mt-4 text-center">
+                  <button
+                    onClick={onClose}
+                    className="text-[10px] text-zinc-600 hover:text-red-500 uppercase tracking-widest hover:underline decoration-red-500/30"
+                  >
+                    [ {t.later} ]
+                  </button>
+                </div>
+
+              </div>
+            </div>
+
+            {/* Corner Accents */}
+            <div className="absolute top-0 right-0 w-2 h-2 border-t border-r border-nofx-gold"></div>
+            <div className="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-nofx-gold"></div>
+
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}

web/src/components/RegisterPage.tsx

@@ -6,14 +6,15 @@ import { getSystemConfig } from '../lib/config'
 import { toast } from 'sonner'
 import { copyWithToast } from '../lib/clipboard'
 import { Eye, EyeOff } from 'lucide-react'
-import { Input } from './ui/input'
+// import { Input } from './ui/input' // Removed unused import
 import PasswordChecklist from 'react-password-checklist'
 import { RegistrationDisabled } from './RegistrationDisabled'
+import { WhitelistFullPage } from './WhitelistFullPage'
 
 export function RegisterPage() {
   const { language } = useLanguage()
   const { register, completeRegistration } = useAuth()
-  const [step, setStep] = useState<'register' | 'setup-otp' | 'verify-otp'>(
+  const [step, setStep] = useState<'register' | 'setup-otp' | 'verify-otp' | 'whitelist-full'>(
     'register'
   )
   const [email, setEmail] = useState('')
@@ -49,6 +50,11 @@ export function RegisterPage() {
     return <RegistrationDisabled />
   }
 
+  // 如果白名单已满，显示容量已满页面
+  if (step === 'whitelist-full') {
+    return <WhitelistFullPage onBack={() => setStep('register')} />
+  }
+
   const handleRegister = async (e: React.FormEvent) => {
     e.preventDefault()
     setError('')
@@ -66,20 +72,54 @@ export function RegisterPage() {
 
     setLoading(true)
 
-    const result = await register(email, password, betaCode.trim() || undefined)
+    try {
+      const result = await register(email, password, betaCode.trim() || undefined)
 
-    if (result.success && result.userID) {
+      // Helper to check for whitelist errors
-      setUserID(result.userID)
+      const isWhitelistError = (msg: string) => {
-      setOtpSecret(result.otpSecret || '')
+        const lowerMsg = msg.toLowerCase()
-      setQrCodeURL(result.qrCodeURL || '')
+        return lowerMsg.includes('whitelist') ||
-      setStep('setup-otp')
+          lowerMsg.includes('capacity') ||
-    } else {
+          lowerMsg.includes('limit') ||
-      // Only business errors reach here (system/network errors shown via toast)
+          lowerMsg.includes('permission denied') ||
-      const msg = result.message || t('registrationFailed', language)
+          lowerMsg.includes('not on whitelist')
-      setError(msg)
+      }
+
+      if (result.success && result.userID) {
+        setUserID(result.userID)
+        setOtpSecret(result.otpSecret || '')
+        setQrCodeURL(result.qrCodeURL || '')
+        setStep('setup-otp')
+      } else {
+        // Check for whitelist/capacity limit error
+        const msg = result.message || t('registrationFailed', language)
+        if (isWhitelistError(msg)) {
+          setStep('whitelist-full')
+          return
+        }
+        setError(msg)
+        toast.error(msg)
+      }
+    } catch (e) {
+      console.error('Registration error:', e)
+      const errorMsg = e instanceof Error ? e.message : 'Registration failed due to server error'
+
+      // Check for whitelist error in catch block too
+      const lowerMsg = errorMsg.toLowerCase()
+      if (lowerMsg.includes('whitelist') ||
+        lowerMsg.includes('capacity') ||
+        lowerMsg.includes('limit') ||
+        lowerMsg.includes('permission denied') ||
+        lowerMsg.includes('not on whitelist')) {
+        setStep('whitelist-full')
+        return
+      }
+
+      setError(errorMsg)
+      toast.error(errorMsg)
+    } finally {
+      setLoading(false)
     }
-
-    setLoading(false)
   }
 
   const handleSetupComplete = () => {
@@ -108,437 +148,326 @@ export function RegisterPage() {
   }
 
   return (
-    <div
+    <div className="min-h-screen bg-black text-zinc-300 font-mono relative overflow-hidden flex items-center justify-center py-12">
-      className="flex items-center justify-center py-12"
+      {/* Background Effects */}
-      style={{ minHeight: 'calc(100vh - 64px)' }}
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none"></div>
-    >
+      <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent pointer-events-none"></div>
-      <div className="w-full max-w-md">
+
-        {/* Logo */}
+      {/* Scanline Effect */}
-        <div className="text-center mb-8">
+      <div className="absolute inset-0 pointer-events-none opacity-[0.03] bg-[linear-gradient(transparent_50%,rgba(0,0,0,0.5)_50%)] bg-[length:100%_4px]"></div>
-          <div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center">
+
-            <img
+      <div className="w-full max-w-lg relative z-10 px-6">
-              src="/icons/nofx.svg"
+        {/* Navigation - Top Bar (Mobile/Desktop Friendly) */}
-              alt="NoFx Logo"
+        <div className="flex justify-between items-center mb-8">
-              className="w-16 h-16 object-contain"
+          <button
-            />
+            onClick={() => window.location.href = '/'}
+            className="flex items-center gap-2 text-zinc-500 hover:text-white transition-colors group px-3 py-1.5 rounded border border-transparent hover:border-zinc-700 bg-black/20 backdrop-blur-sm"
+          >
+            <div className="w-2 h-2 rounded-full bg-red-500 group-hover:animate-pulse"></div>
+            <span className="text-xs font-mono uppercase tracking-widest">&lt; ABORT_REGISTRATION</span>
+          </button>
+        </div>
+
+        {/* Terminal Header */}
+        <div className="mb-8 text-center">
+          <div className="flex justify-center mb-6">
+            <div className="relative">
+              <div className="absolute -inset-2 bg-nofx-gold/20 rounded-full blur-xl animate-pulse"></div>
+              <img
+                src="/icons/nofx.svg"
+                alt="NoFx Logo"
+                className="w-16 h-16 object-contain relative z-10 opacity-90"
+              />
+            </div>
           </div>
-          <h1 className="text-2xl font-bold" style={{ color: '#EAECEF' }}>
+          <h1 className="text-3xl font-bold tracking-tighter text-white uppercase mb-2">
-            {t('appTitle', language)}
+            <span className="text-nofx-gold">NEW_USER</span> ONBOARDING
           </h1>
-          <p className="text-sm mt-2" style={{ color: '#848E9C' }}>
+          <p className="text-zinc-500 text-xs tracking-[0.2em] uppercase">
-            {step === 'register' && t('registerTitle', language)}
+            {step === 'register' && 'Initializing Registration Sequence...'}
-            {step === 'setup-otp' && t('setupTwoFactor', language)}
+            {step === 'setup-otp' && 'Configuring Security Protocols...'}
-            {step === 'verify-otp' && t('verifyOTP', language)}
+            {step === 'verify-otp' && 'Finalizing Authentication...'}
           </p>
         </div>
 
-        {/* Registration Form */}
+        {/* Terminal Output / Form Container */}
-        <div
+        <div className="bg-zinc-900/40 backdrop-blur-md border border-zinc-800 rounded-lg overflow-hidden shadow-2xl relative group">
-          className="rounded-lg p-6"
+          <div className="absolute inset-0 bg-zinc-900/50 opacity-0 group-hover:opacity-100 transition duration-700 pointer-events-none"></div>
-          style={{
-            background: 'var(--panel-bg)',
-            border: '1px solid var(--panel-border)',
-          }}
-        >
-          {step === 'register' && (
-            <form onSubmit={handleRegister} className="space-y-4">
-              <div>
-                <label
-                  className="block text-sm font-semibold mb-2"
-                  style={{ color: 'var(--brand-light-gray)' }}
-                >
-                  {t('email', language)}
-                </label>
-                <Input
-                  type="email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  placeholder={t('emailPlaceholder', language)}
-                  required
-                />
-              </div>
 
-              <div>
+          {/* Window Bar */}
-                <label
+          <div className="flex items-center justify-between px-4 py-2 bg-zinc-900/80 border-b border-zinc-800">
-                  className="block text-sm font-semibold mb-2"
+            <div className="flex gap-1.5">
-                  style={{ color: 'var(--brand-light-gray)' }}
-                >
-                  {t('password', language)}
-                </label>
-                <div className="relative">
-                  <Input
-                    type={showPassword ? 'text' : 'password'}
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    className="pr-10"
-                    placeholder={t('passwordPlaceholder', language)}
-                    required
-                  />
-                  <button
-                    type="button"
-                    aria-label={showPassword ? '隐藏密码' : '显示密码'}
-                    onMouseDown={(e) => e.preventDefault()}
-                    onClick={() => setShowPassword((v) => !v)}
-                    className="absolute inset-y-0 right-2 w-8 h-10 flex items-center justify-center rounded bg-transparent p-0 m-0 border-0 outline-none focus:outline-none focus:ring-0 appearance-none cursor-pointer btn-icon"
-                    style={{ color: 'var(--text-secondary)' }}
-                  >
-                    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
-                  </button>
-                </div>
-              </div>
-
-              <div>
-                <label
-                  className="block text-sm font-semibold mb-2"
-                  style={{ color: 'var(--brand-light-gray)' }}
-                >
-                  {t('confirmPassword', language)}
-                </label>
-                <div className="relative">
-                  <Input
-                    type={showConfirmPassword ? 'text' : 'password'}
-                    value={confirmPassword}
-                    onChange={(e) => setConfirmPassword(e.target.value)}
-                    className="pr-10"
-                    placeholder={t('confirmPasswordPlaceholder', language)}
-                    required
-                  />
-                  <button
-                    type="button"
-                    aria-label={showConfirmPassword ? '隐藏密码' : '显示密码'}
-                    onMouseDown={(e) => e.preventDefault()}
-                    onClick={() => setShowConfirmPassword((v) => !v)}
-                    className="absolute inset-y-0 right-2 w-8 h-10 flex items-center justify-center rounded bg-transparent p-0 m-0 border-0 outline-none focus:outline-none focus:ring-0 appearance-none cursor-pointer btn-icon"
-                    style={{ color: 'var(--text-secondary)' }}
-                  >
-                    {showConfirmPassword ? (
-                      <EyeOff size={18} />
-                    ) : (
-                      <Eye size={18} />
-                    )}
-                  </button>
-                </div>
-              </div>
-
-              {/* 密码规则清单（通过才允许提交） */}
               <div
-                className="mt-1 text-xs"
+                className="w-2.5 h-2.5 rounded-full bg-red-500/50 hover:bg-red-500 cursor-pointer transition-colors"
-                style={{ color: 'var(--text-secondary)' }}
+                onClick={() => window.location.href = '/'}
-              >
+                title="Close / Return Home"
-                <div
+              ></div>
-                  className="mb-1"
+              <div className="w-2.5 h-2.5 rounded-full bg-yellow-500/50"></div>
-                  style={{ color: 'var(--brand-light-gray)' }}
+              <div className="w-2.5 h-2.5 rounded-full bg-green-500/50"></div>
-                >
+            </div>
-                  {t('passwordRequirements', language)}
+            <div className="text-[10px] text-zinc-600 font-mono flex items-center gap-1">
-                </div>
+              <span className="text-emerald-500">➜</span> setup_account.sh
-                <PasswordChecklist
+            </div>
-                  rules={[
+          </div>
-                    'minLength',
-                    'capital',
-                    'lowercase',
-                    'number',
-                    'specialChar',
-                    'match',
-                  ]}
-                  minLength={8}
-                  value={password}
-                  valueAgain={confirmPassword}
-                  messages={{
-                    minLength: t('passwordRuleMinLength', language),
-                    capital: t('passwordRuleUppercase', language),
-                    lowercase: t('passwordRuleLowercase', language),
-                    number: t('passwordRuleNumber', language),
-                    specialChar: t('passwordRuleSpecial', language),
-                    match: t('passwordRuleMatch', language),
-                  }}
-                  className="space-y-1"
-                  onChange={(isValid) => setPasswordValid(isValid)}
-                />
-              </div>
 
-              {betaMode && (
+          <div className="p-6 md:p-8 relative">
+            {/* Status Output */}
+            <div className="mb-6 font-mono text-xs space-y-1 text-zinc-500 border-b border-zinc-800/50 pb-4">
+              <div className="flex gap-2">
+                <span className="text-emerald-500">➜</span>
+                <span>System Check: <span className="text-emerald-500">READY</span></span>
+              </div>
+              <div className="flex gap-2">
+                <span className="text-emerald-500">➜</span>
+                <span>Mode: {betaMode ? 'CLOSED_BETA CA1' : 'PUBLIC'}</span>
+              </div>
+            </div>
+
+            {step === 'register' && (
+              <form onSubmit={handleRegister} className="space-y-5">
                 <div>
-                  <label
+                  <label className="block text-xs uppercase tracking-wider text-zinc-500 mb-1.5 ml-1 font-bold">{t('email', language)}</label>
-                    className="block text-sm font-semibold mb-2"
-                    style={{ color: '#EAECEF' }}
-                  >
-                    内测码 *
-                  </label>
                   <input
-                    type="text"
+                    type="email"
-                    value={betaCode}
+                    value={email}
-                    onChange={(e) =>
+                    onChange={(e) => setEmail(e.target.value)}
-                      setBetaCode(
+                    className="w-full bg-black/50 border border-zinc-700 rounded px-4 py-3 text-sm focus:border-nofx-gold focus:ring-1 focus:ring-nofx-gold/50 outline-none transition-all placeholder-zinc-800 text-white font-mono"
-                        e.target.value.replace(/[^a-z0-9]/gi, '').toLowerCase()
+                    placeholder="user@nofx.os"
-                      )
+                    required
-                    }
-                    className="w-full px-3 py-2 rounded font-mono"
-                    style={{
-                      background: '#0B0E11',
-                      border: '1px solid #2B3139',
-                      color: '#EAECEF',
-                    }}
-                    placeholder="请输入6位内测码"
-                    maxLength={6}
-                    required={betaMode}
                   />
-                  <p className="text-xs mt-1" style={{ color: '#848E9C' }}>
-                    内测码由6位字母数字组成，区分大小写
-                  </p>
-                </div>
-              )}
-
-              {error && (
-                <div
-                  className="text-sm px-3 py-2 rounded"
-                  style={{
-                    background: 'var(--binance-red-bg)',
-                    color: 'var(--binance-red)',
-                  }}
-                >
-                  {error}
-                </div>
-              )}
-
-              <button
-                type="submit"
-                disabled={
-                  loading || (betaMode && !betaCode.trim()) || !passwordValid
-                }
-                className="w-full px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50"
-                style={{
-                  background: 'var(--brand-yellow)',
-                  color: 'var(--brand-black)',
-                }}
-              >
-                {loading
-                  ? t('loading', language)
-                  : t('registerButton', language)}
-              </button>
-            </form>
-          )}
-
-          {step === 'setup-otp' && (
-            <div className="space-y-4">
-              <div className="text-center">
-                <div className="text-4xl mb-2">📱</div>
-                <h3
-                  className="text-lg font-semibold mb-2"
-                  style={{ color: '#EAECEF' }}
-                >
-                  {t('setupTwoFactor', language)}
-                </h3>
-                <p className="text-sm" style={{ color: '#848E9C' }}>
-                  {t('setupTwoFactorDesc', language)}
-                </p>
-              </div>
-
-              <div className="space-y-3">
-                <div
-                  className="p-3 rounded"
-                  style={{
-                    background: 'var(--brand-black)',
-                    border: '1px solid var(--panel-border)',
-                  }}
-                >
-                  <p
-                    className="text-sm font-semibold mb-2"
-                    style={{ color: 'var(--brand-light-gray)' }}
-                  >
-                    {t('authStep1Title', language)}
-                  </p>
-                  <p
-                    className="text-xs"
-                    style={{ color: 'var(--text-secondary)' }}
-                  >
-                    {t('authStep1Desc', language)}
-                  </p>
                 </div>
 
-                <div
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  className="p-3 rounded"
+                  <div>
-                  style={{
+                    <label className="block text-xs uppercase tracking-wider text-zinc-500 mb-1.5 ml-1 font-bold">{t('password', language)}</label>
-                    background: 'var(--brand-black)',
+                    <div className="relative">
-                    border: '1px solid var(--panel-border)',
+                      <input
-                  }}
+                        type={showPassword ? 'text' : 'password'}
-                >
+                        value={password}
-                  <p
+                        onChange={(e) => setPassword(e.target.value)}
-                    className="text-sm font-semibold mb-2"
+                        className="w-full bg-black/50 border border-zinc-700 rounded px-4 py-3 text-sm focus:border-nofx-gold focus:ring-1 focus:ring-nofx-gold/50 outline-none transition-all placeholder-zinc-800 text-white font-mono pr-10"
-                    style={{ color: 'var(--brand-light-gray)' }}
+                        placeholder="••••••••"
-                  >
+                        required
-                    {t('authStep2Title', language)}
+                      />
-                  </p>
-                  <p className="text-xs mb-2" style={{ color: '#848E9C' }}>
-                    {t('authStep2Desc', language)}
-                  </p>
-
-                  {qrCodeURL && (
-                    <div className="mt-2">
-                      <p className="text-xs mb-2" style={{ color: '#848E9C' }}>
-                        {t('qrCodeHint', language)}
-                      </p>
-                      <div className="bg-white p-2 rounded text-center">
-                        <img
-                          src={`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(qrCodeURL)}`}
-                          alt="QR Code"
-                          className="mx-auto"
-                        />
-                      </div>
-                    </div>
-                  )}
-
-                  <div className="mt-2">
-                    <p className="text-xs mb-1" style={{ color: '#848E9C' }}>
-                      {t('otpSecret', language)}
-                    </p>
-                    <div className="flex items-center gap-2">
-                      <code
-                        className="flex-1 px-2 py-1 text-xs rounded font-mono"
-                        style={{
-                          background: 'var(--panel-bg-hover)',
-                          color: 'var(--brand-light-gray)',
-                        }}
-                      >
-                        {otpSecret}
-                      </code>
                       <button
-                        onClick={() => copyToClipboard(otpSecret)}
+                        type="button"
-                        className="px-2 py-1 text-xs rounded"
+                        onClick={() => setShowPassword(!showPassword)}
-                        style={{
+                        className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-600 hover:text-zinc-400 transition-colors"
-                          background: 'var(--brand-yellow)',
-                          color: 'var(--brand-black)',
-                        }}
                       >
-                        {t('copy', language)}
+                        {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                      </button>
+                    </div>
+                  </div>
+
+                  <div>
+                    <label className="block text-xs uppercase tracking-wider text-zinc-500 mb-1.5 ml-1 font-bold">{t('confirmPassword', language)}</label>
+                    <div className="relative">
+                      <input
+                        type={showConfirmPassword ? 'text' : 'password'}
+                        value={confirmPassword}
+                        onChange={(e) => setConfirmPassword(e.target.value)}
+                        className="w-full bg-black/50 border border-zinc-700 rounded px-4 py-3 text-sm focus:border-nofx-gold focus:ring-1 focus:ring-nofx-gold/50 outline-none transition-all placeholder-zinc-800 text-white font-mono pr-10"
+                        placeholder="••••••••"
+                        required
+                      />
+                      <button
+                        type="button"
+                        onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                        className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-600 hover:text-zinc-400 transition-colors"
+                      >
+                        {showConfirmPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                       </button>
                     </div>
                   </div>
                 </div>
 
-                <div
+                <div className="bg-zinc-900/50 p-3 rounded border border-zinc-800/50">
-                  className="p-3 rounded"
+                  <div className="text-[10px] uppercase tracking-wider text-zinc-500 mb-2 font-bold flex items-center gap-2">
-                  style={{
+                    <div className="w-1 h-1 rounded-full bg-zinc-500"></div>
-                    background: 'var(--brand-black)',
+                    Password Strength Protocol
-                    border: '1px solid var(--panel-border)',
+                  </div>
-                  }}
+                  <div className="text-xs font-mono text-zinc-400">
-                >
+                    <PasswordChecklist
-                  <p
+                      rules={['minLength', 'capital', 'lowercase', 'number', 'specialChar', 'match']}
-                    className="text-sm font-semibold mb-2"
+                      minLength={8}
-                    style={{ color: 'var(--brand-light-gray)' }}
+                      value={password}
-                  >
+                      valueAgain={confirmPassword}
-                    {t('authStep3Title', language)}
+                      messages={{
-                  </p>
+                        minLength: t('passwordRuleMinLength', language),
-                  <p
+                        capital: t('passwordRuleUppercase', language),
-                    className="text-xs"
+                        lowercase: t('passwordRuleLowercase', language),
-                    style={{ color: 'var(--text-secondary)' }}
+                        number: t('passwordRuleNumber', language),
-                  >
+                        specialChar: t('passwordRuleSpecial', language),
-                    {t('authStep3Desc', language)}
+                        match: t('passwordRuleMatch', language),
-                  </p>
+                      }}
+                      className="grid grid-cols-2 gap-x-4 gap-y-1"
+                      onChange={(isValid) => setPasswordValid(isValid)}
+                      iconSize={10}
+                    />
+                  </div>
                 </div>
-              </div>
 
-              <button
+                {betaMode && (
-                onClick={handleSetupComplete}
+                  <div>
-                className="w-full px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105"
+                    <label className="block text-xs uppercase tracking-wider text-nofx-gold mb-1.5 ml-1 font-bold">Priority Access Code</label>
-                style={{ background: '#F0B90B', color: '#000' }}
+                    <input
-              >
+                      type="text"
-                {t('setupCompleteContinue', language)}
+                      value={betaCode}
-              </button>
+                      onChange={(e) => setBetaCode(e.target.value.replace(/[^a-z0-9]/gi, '').toLowerCase())}
-            </div>
+                      className="w-full bg-black/50 border border-zinc-700 rounded px-4 py-3 text-sm focus:border-nofx-gold focus:ring-1 focus:ring-nofx-gold/50 outline-none transition-all placeholder-zinc-800 text-white font-mono tracking-widest"
-          )}
+                      placeholder="XXXXXX"
+                      maxLength={6}
+                      required={betaMode}
+                    />
+                    <p className="text-[10px] text-zinc-600 font-mono mt-1 ml-1">* CASE SENSITIVE ALPHANUMERIC</p>
+                  </div>
+                )}
 
-          {step === 'verify-otp' && (
+                {error && (
-            <form onSubmit={handleOTPVerify} className="space-y-4">
+                  <div className="text-xs bg-red-500/10 border border-red-500/30 text-red-500 px-3 py-2 rounded font-mono">
-              <div className="text-center mb-4">
+                    [REGISTRATION_ERROR]: {error}
-                <div className="text-4xl mb-2">🔐</div>
+                  </div>
-                <p className="text-sm" style={{ color: '#848E9C' }}>
+                )}
-                  {t('enterOTPCode', language)}
-                  <br />
-                  {t('completeRegistrationSubtitle', language)}
-                </p>
-              </div>
 
-              <div>
-                <label
-                  className="block text-sm font-semibold mb-2"
-                  style={{ color: 'var(--brand-light-gray)' }}
-                >
-                  {t('otpCode', language)}
-                </label>
-                <input
-                  type="text"
-                  value={otpCode}
-                  onChange={(e) =>
-                    setOtpCode(e.target.value.replace(/\D/g, '').slice(0, 6))
-                  }
-                  className="w-full px-3 py-2 rounded text-center text-2xl font-mono"
-                  style={{
-                    background: 'var(--brand-black)',
-                    border: '1px solid var(--panel-border)',
-                    color: 'var(--brand-light-gray)',
-                  }}
-                  placeholder={t('otpPlaceholder', language)}
-                  maxLength={6}
-                  required
-                />
-              </div>
-
-              {error && (
-                <div
-                  className="text-sm px-3 py-2 rounded"
-                  style={{
-                    background: 'var(--binance-red-bg)',
-                    color: 'var(--binance-red)',
-                  }}
-                >
-                  {error}
-                </div>
-              )}
-
-              <div className="flex gap-3">
                 <button
-                  type="button"
+                  type="submit"
-                  onClick={() => setStep('setup-otp')}
+                  disabled={loading || (betaMode && !betaCode.trim()) || !passwordValid}
-                  className="flex-1 px-4 py-2 rounded text-sm font-semibold"
+                  className="w-full bg-nofx-gold text-black font-bold py-3 px-4 rounded text-sm tracking-wide uppercase hover:bg-yellow-400 transition-all transform active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed font-mono shadow-[0_0_15px_rgba(255,215,0,0.1)] hover:shadow-[0_0_25px_rgba(255,215,0,0.25)] flex items-center justify-center gap-2 group mt-4"
-                  style={{
-                    background: 'var(--panel-bg-hover)',
-                    color: 'var(--text-secondary)',
-                  }}
                 >
-                  {t('back', language)}
+                  {loading ? (
+                    <span className="animate-pulse">INITIALIZING...</span>
+                  ) : (
+                    <>
+                      <span>CREATE_ACCOUNT</span>
+                      <span className="group-hover:translate-x-1 transition-transform">-&gt;</span>
+                    </>
+                  )}
                 </button>
+              </form>
+            )}
+
+            {step === 'setup-otp' && (
+              <div className="space-y-6">
+                <div className="text-center bg-zinc-900/50 p-4 rounded border border-zinc-800">
+                  <div className="text-xs font-mono text-zinc-400 mb-2">SCAN_QR_CODE_SEQUENCE</div>
+                  {qrCodeURL ? (
+                    <div className="bg-white p-2 rounded inline-block shadow-[0_0_30px_rgba(255,255,255,0.1)]">
+                      <img
+                        src={`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(qrCodeURL)}`}
+                        alt="QR Code"
+                        className="w-32 h-32"
+                      />
+                    </div>
+                  ) : (
+                    <div className="w-32 h-32 bg-zinc-800 animate-pulse rounded inline-block"></div>
+                  )}
+                  <div className="mt-4">
+                    <p className="text-[10px] text-zinc-500 uppercase tracking-widest mb-1">Backup Secret Key</p>
+                    <div className="flex items-center gap-2 justify-center bg-black/50 p-2 rounded border border-zinc-700/50 max-w-[200px] mx-auto">
+                      <code className="text-xs font-mono text-nofx-gold">{otpSecret}</code>
+                      <button
+                        onClick={() => copyToClipboard(otpSecret)}
+                        className="text-zinc-500 hover:text-white transition-colors"
+                      >
+                        <span className="text-[10px] uppercase border border-zinc-700 px-1 rounded">Copy</span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="space-y-3 font-mono text-xs text-zinc-400">
+                  <div className="flex gap-3">
+                    <span className="text-nofx-gold mt-0.5">01</span>
+                    <p>Install Google Authenticator or Authy on your mobile device.</p>
+                  </div>
+                  <div className="flex gap-3">
+                    <span className="text-nofx-gold mt-0.5">02</span>
+                    <p>Scan the QR code above or manually enter the secret key.</p>
+                  </div>
+                  <div className="flex gap-3">
+                    <span className="text-nofx-gold mt-0.5">03</span>
+                    <p>Proceed to verify the generated 6-digit token.</p>
+                  </div>
+                </div>
+
+                <button
+                  onClick={handleSetupComplete}
+                  className="w-full bg-nofx-gold text-black font-bold py-3 px-4 rounded text-sm tracking-wide uppercase hover:bg-yellow-400 transition-colors font-mono shadow-lg"
+                >
+                  PROCEED TO VERIFICATION
+                </button>
+              </div>
+            )}
+
+            {step === 'verify-otp' && (
+              <form onSubmit={handleOTPVerify} className="space-y-6">
+                <div className="text-center">
+                  <p className="text-xs text-zinc-400 font-mono mb-6">
+                    ENTER 6-DIGIT SECURITY TOKEN TO FINALIZE ONBOARDING
+                  </p>
+                </div>
+
+                <div>
+                  <input
+                    type="text"
+                    value={otpCode}
+                    onChange={(e) =>
+                      setOtpCode(e.target.value.replace(/\D/g, '').slice(0, 6))
+                    }
+                    className="w-full bg-black border border-zinc-700 rounded px-4 py-4 text-center text-3xl tracking-[0.5em] font-mono text-white focus:border-nofx-gold focus:ring-1 focus:ring-nofx-gold/50 outline-none transition-all placeholder-zinc-800"
+                    placeholder="000000"
+                    maxLength={6}
+                    required
+                    autoFocus
+                  />
+                </div>
+
+                {error && (
+                  <div className="text-xs bg-red-500/10 border border-red-500/30 text-red-500 px-3 py-2 rounded font-mono text-center">
+                    [VERIFICATION_FAILED]: {error}
+                  </div>
+                )}
+
                 <button
                   type="submit"
                   disabled={loading || otpCode.length !== 6}
-                  className="flex-1 px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50"
+                  className="w-full bg-nofx-gold text-black font-bold py-3 px-4 rounded text-sm tracking-wide uppercase hover:bg-yellow-400 transition-colors font-mono shadow-lg disabled:opacity-50"
-                  style={{ background: '#F0B90B', color: '#000' }}
                 >
-                  {loading
+                  {loading ? 'VALIDATING...' : 'ACTIVATE ACCOUNT'}
-                    ? t('loading', language)
-                    : t('completeRegistration', language)}
                 </button>
-              </div>
+              </form>
-            </form>
+            )}
-          )}
+
+          </div>
+
+          {/* Terminal Footer Info */}
+          <div className="bg-zinc-900/50 p-3 flex justify-between items-center text-[10px] font-mono text-zinc-600 border-t border-zinc-800">
+            <div>ENCRYPTION: AES-256</div>
+            <div>SECURE_REGISTRY</div>
+          </div>
         </div>
 
         {/* Login Link */}
         {step === 'register' && (
-          <div className="text-center mt-6">
+          <div className="text-center mt-8 space-y-4">
-            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+            <p className="text-xs font-mono text-zinc-500">
-              已有账户？{' '}
+              EXISTING_OPERATOR?{' '}
               <button
-                onClick={() => {
+                onClick={() => window.location.href = '/login'}
-                  window.location.href = '/login'
+                className="text-nofx-gold hover:underline hover:text-yellow-300 transition-colors ml-1 uppercase"
-                }}
-                className="font-semibold hover:underline transition-colors"
-                style={{ color: 'var(--brand-yellow)' }}
               >
-                立即登录
+                ACCESS TERMINAL
               </button>
             </p>
+            <button
+              onClick={() => window.location.href = '/'}
+              className="text-[10px] text-zinc-600 hover:text-red-500 transition-colors uppercase tracking-widest hover:underline decoration-red-500/30 font-mono"
+            >
+              [ ABORT_REGISTRATION_RETURN_HOME ]
+            </button>
           </div>
         )}
+
       </div>
     </div>
   )

web/src/components/WhitelistFullPage.tsx

@@ -0,0 +1,124 @@
+import { motion } from 'framer-motion'
+import { ShieldAlert, ArrowLeft, Twitter, Send, Lock } from 'lucide-react'
+import { OFFICIAL_LINKS } from '../constants/branding'
+
+interface WhitelistFullPageProps {
+  onBack?: () => void
+}
+
+export function WhitelistFullPage({ onBack }: WhitelistFullPageProps) {
+  const handleBackToLogin = () => {
+    if (onBack) {
+      onBack()
+    } else {
+      window.location.href = '/login'
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-black text-white font-mono relative overflow-hidden flex items-center justify-center px-4">
+      {/* Background Grid & Scanlines */}
+      <div className="fixed inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none"></div>
+      <div className="fixed inset-0 bg-gradient-to-t from-black via-transparent to-transparent pointer-events-none"></div>
+      <div className="fixed inset-0 pointer-events-none opacity-[0.03] bg-[linear-gradient(transparent_50%,rgba(0,0,0,0.5)_50%)] bg-[length:100%_4px]"></div>
+
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.5 }}
+        className="max-w-lg w-full relative z-10"
+      >
+        <div className="bg-zinc-900/40 backdrop-blur-md border border-red-500/30 rounded-lg overflow-hidden relative group">
+
+          {/* Top Bar */}
+          <div className="flex items-center justify-between px-4 py-2 bg-red-900/20 border-b border-red-500/30">
+            <div className="flex gap-1.5 opacity-50">
+              <div className="w-2.5 h-2.5 rounded-full bg-red-500"></div>
+              <div className="w-2.5 h-2.5 rounded-full bg-zinc-600"></div>
+              <div className="w-2.5 h-2.5 rounded-full bg-zinc-600"></div>
+            </div>
+            <div className="text-[10px] text-red-400 font-mono tracking-widest animate-pulse">
+              ACCESS_DENIED // ERROR_403
+            </div>
+          </div>
+
+          <div className="p-8 text-center">
+            {/* Icon */}
+            <div className="relative mx-auto mb-8 w-20 h-20 flex items-center justify-center">
+              <div className="absolute inset-0 bg-red-500/20 rounded-full animate-ping opacity-50"></div>
+              <div className="relative z-10 p-4 border-2 border-red-500/50 rounded-full bg-black/50">
+                <ShieldAlert className="w-8 h-8 text-red-500" />
+              </div>
+            </div>
+
+            {/* Title */}
+            <h1 className="text-2xl font-bold mb-2 tracking-widest text-white uppercase glitch-text">
+              <span className="text-red-500">RESTRICTED</span> ACCESS
+            </h1>
+
+            <div className="h-[1px] w-full bg-gradient-to-r from-transparent via-red-900/50 to-transparent my-4"></div>
+
+            {/* Description */}
+            <p className="text-xs text-zinc-400 mb-8 leading-relaxed font-mono px-4">
+              <span className="text-red-400">[SYSTEM_MESSAGE]:</span> YOUR IDENTIFIER IS NOT ON THE ACTIVE WHITELIST.
+              <br /><br />
+              Platform capacity limits have been reached for the current beta phase. Prioritized access is currently reserved for authorized operators only.
+            </p>
+
+            {/* Info Box */}
+            <div className="bg-red-950/20 border border-red-900/30 p-4 rounded mb-8 text-left">
+              <div className="flex items-start gap-3">
+                <Lock className="w-4 h-4 text-red-500 mt-0.5" />
+                <div>
+                  <h3 className="text-xs font-bold text-red-400 uppercase mb-1">Authorization Protocol</h3>
+                  <p className="text-[10px] text-zinc-500 leading-tight">
+                    Access is rolled out in batches. If you believe this is an error, please verify your credentials or contact system administrators.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Action Buttons */}
+            <div className="space-y-3">
+              <button
+                onClick={handleBackToLogin}
+                className="w-full flex items-center justify-center gap-2 py-3 border border-zinc-700 bg-black hover:bg-zinc-900 hover:border-red-500 hover:text-red-500 text-zinc-400 transition-all text-xs font-bold tracking-widest uppercase group"
+              >
+                <ArrowLeft className="w-3 h-3 group-hover:-translate-x-1 transition-transform" />
+                RETURN TO LOGIN
+              </button>
+
+              <div className="grid grid-cols-2 gap-3 mt-4">
+                <a
+                  href={OFFICIAL_LINKS.twitter}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center justify-center gap-2 py-2 border border-zinc-800 bg-zinc-900/50 hover:bg-zinc-800 text-zinc-500 hover:text-white transition-colors text-[10px] uppercase"
+                >
+                  <Twitter className="w-3 h-3" />
+                  Updates
+                </a>
+                <a
+                  href={OFFICIAL_LINKS.telegram}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center justify-center gap-2 py-2 border border-zinc-800 bg-zinc-900/50 hover:bg-zinc-800 text-zinc-500 hover:text-white transition-colors text-[10px] uppercase"
+                >
+                  <Send className="w-3 h-3" />
+                  Support
+                </a>
+              </div>
+            </div>
+
+          </div>
+
+          {/* Footer */}
+          <div className="bg-black/80 p-2 text-[9px] text-zinc-700 text-center border-t border-zinc-800 font-mono uppercase">
+            ERR_CODE: WLIST_0x403 // SECURITY_LAYER_ACTIVE
+          </div>
+
+        </div>
+      </motion.div>
+    </div>
+  )
+}

web/src/components/landing/FooterSection.tsx

@@ -30,9 +30,13 @@ export default function FooterSection({ language }: FooterSectionProps) {
       { name: 'Pull Requests', href: 'https://github.com/NoFxAiOS/nofx/pulls' },
     ],
     supporters: [
+      { name: 'Binance', href: 'https://www.binance.com/join?ref=NOFXENG' },
+      { name: 'Bybit', href: 'https://partner.bybit.com/b/83856' },
+      { name: 'OKX', href: 'https://www.okx.com/join/1865360' },
+      { name: 'Bitget', href: 'https://www.bitget.com/referral/register?from=referral&clacCode=c8a43172' },
+      { name: 'Hyperliquid', href: 'https://app.hyperliquid.xyz/join/AITRADING' },
       { name: 'Aster DEX', href: 'https://www.asterdex.com/en/referral/fdfc0e' },
-      { name: 'Binance', href: 'https://www.maxweb.red/join?ref=NOFXAI' },
+      { name: 'Lighter', href: 'https://app.lighter.xyz/?referral=68151432' },
-      { name: 'Hyperliquid', href: 'https://hyperliquid.xyz/' },
     ],
   }
 
@@ -123,21 +127,20 @@ export default function FooterSection({ language }: FooterSectionProps) {
             <h4 className="text-sm font-semibold mb-4" style={{ color: '#EAECEF' }}>
               {t('supporters', language)}
             </h4>
-            <ul className="space-y-3">
+            <div className="flex flex-wrap gap-2">
               {links.supporters.map((link) => (
-                <li key={link.name}>
+                <a
-                  <a
+                  key={link.name}
-                    href={link.href}
+                  href={link.href}
-                    target="_blank"
+                  target="_blank"
-                    rel="noopener noreferrer"
+                  rel="noopener noreferrer"
-                    className="text-sm transition-colors hover:text-[#F0B90B]"
+                  className="text-xs border border-zinc-800 bg-zinc-900/50 rounded px-3 py-1.5 transition-all hover:border-[#F0B90B] hover:text-[#F0B90B] hover:bg-[#F0B90B]/10 hover:shadow-[0_0_10px_rgba(240,185,11,0.2)]"
-                    style={{ color: '#5E6673' }}
+                  style={{ color: '#848E9C' }}
-                  >
+                >
-                    {link.name}
+                  {link.name}
-                  </a>
+                </a>
-                </li>
               ))}
-            </ul>
+            </div>
           </div>
         </div>
 

web/src/components/landing/core/TerminalHero.tsx

@@ -54,9 +54,8 @@ export default function TerminalHero() {
             }
         }
 
+        // Only fetch once on mount, cache the result
         fetchPrices()
-        const interval = setInterval(fetchPrices, 5000)
-        return () => clearInterval(interval)
     }, [])
 
     return (

web/src/contexts/AuthContext.tsx

@@ -192,27 +192,38 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
       requestBody.beta_code = betaCode
     }
 
-    const result = await httpClient.post<{
+    try {
-      user_id: string
+      const result = await httpClient.post<{
-      otp_secret: string
+        user_id: string
-      qr_code_url: string
+        otp_secret: string
-      message: string
+        qr_code_url: string
-    }>('/api/register', requestBody)
+        message: string
+      }>('/api/register', requestBody)
 
-    if (result.success && result.data) {
+      if (result.success && result.data) {
-      return {
+        return {
-        success: true,
+          success: true,
-        userID: result.data.user_id,
+          userID: result.data.user_id,
-        otpSecret: result.data.otp_secret,
+          otpSecret: result.data.otp_secret,
-        qrCodeURL: result.data.qr_code_url,
+          qrCodeURL: result.data.qr_code_url,
-        message: result.message || result.data.message,
+          message: result.message || result.data.message,
+        }
       }
-    }
 
-    // Only business errors reach here (system/network errors were intercepted)
+      // Only business errors reach here (system/network errors were intercepted)
-    return {
+      return {
-      success: false,
+        success: false,
-      message: result.message || 'Registration failed',
+        message: result.message || 'Registration failed',
+      }
+    } catch (error) {
+      console.error('Auth register error:', error);
+      // Re-throw if it's a critical error, or return structured error
+      // Since httpClient throws on 500, we should return a structured error response
+      // to let the UI display it gracefully without crashing.
+      return {
+        success: false,
+        message: error instanceof Error ? error.message : 'Detailed server error'
+      }
     }
   }
 

web/src/pages/LandingPage.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import HeaderBar from '../components/HeaderBar'
 import LoginModal from '../components/landing/LoginModal'
+import { LoginRequiredOverlay } from '../components/LoginRequiredOverlay'
 import FooterSection from '../components/landing/FooterSection'
 import TerminalHero from '../components/landing/core/TerminalHero'
 import LiveFeed from '../components/landing/core/LiveFeed'
@@ -11,10 +12,17 @@ import { useLanguage } from '../contexts/LanguageContext'
 
 export function LandingPage() {
   const [showLoginModal, setShowLoginModal] = useState(false)
+  const [loginOverlayOpen, setLoginOverlayOpen] = useState(false)
+  const [loginOverlayFeature, setLoginOverlayFeature] = useState('')
   const { user, logout } = useAuth()
   const { language, setLanguage } = useLanguage()
   const isLoggedIn = !!user
 
+  const handleLoginRequired = (featureName: string) => {
+    setLoginOverlayFeature(featureName)
+    setLoginOverlayOpen(true)
+  }
+
   return (
     <>
       <HeaderBar
@@ -25,13 +33,21 @@ export function LandingPage() {
         onLanguageChange={setLanguage}
         user={user}
         onLogout={logout}
+        onLoginRequired={handleLoginRequired}
         onPageChange={(page) => {
-          if (page === 'competition') {
+          const pathMap: Record<string, string> = {
-            window.location.href = '/competition'
+            'competition': '/competition',
-          } else if (page === 'traders') {
+            'strategy-market': '/strategy-market',
-            window.location.href = '/traders'
+            'traders': '/traders',
-          } else if (page === 'trader') {
+            'trader': '/dashboard',
-            window.location.href = '/dashboard'
+            'backtest': '/backtest',
+            'strategy': '/strategy',
+            'debate': '/debate',
+            'faq': '/faq',
+          }
+          const path = pathMap[page]
+          if (path) {
+            window.location.href = path
           }
         }}
       />
@@ -53,6 +69,12 @@ export function LandingPage() {
             language={language}
           />
         )}
+
+        <LoginRequiredOverlay
+          isOpen={loginOverlayOpen}
+          onClose={() => setLoginOverlayOpen(false)}
+          featureName={loginOverlayFeature}
+        />
       </div>
     </>
   )

web/src/pages/StrategyMarketPage.tsx

@@ -0,0 +1,515 @@
+import { useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import useSWR from 'swr'
+import {
+  TrendingUp,
+  Shield,
+  Zap,
+  Eye,
+  EyeOff,
+  Copy,
+  Check,
+  Hexagon,
+  Layers,
+  Target,
+  Activity,
+  Terminal,
+  Cpu,
+  Database
+} from 'lucide-react'
+import { useLanguage } from '../contexts/LanguageContext'
+import { useAuth } from '../contexts/AuthContext'
+import { toast } from 'sonner' // Ensure sonner is installed or stick to custom toast if preferred
+
+interface PublicStrategy {
+  id: string
+  name: string
+  description: string
+  author_email?: string
+  is_public: boolean
+  config_visible: boolean
+  config?: any
+  stats?: {
+    used_by: number
+    rating: number
+  }
+  created_at: string
+  updated_at: string
+}
+
+const strategyStyles: Record<string, { color: string; border: string; glow: string; shadow: string; icon: any; bg: string }> = {
+  scalper: {
+    color: 'text-[#F0B90B]',
+    border: 'border-[#F0B90B]/30',
+    glow: 'shadow-[0_0_20px_rgba(240,185,11,0.15)]',
+    shadow: 'hover:shadow-[0_0_30px_rgba(240,185,11,0.25)]',
+    bg: 'bg-[#F0B90B]/5',
+    icon: Zap
+  },
+  swing: {
+    color: 'text-cyan-400',
+    border: 'border-cyan-400/30',
+    glow: 'shadow-[0_0_20px_rgba(34,211,238,0.15)]',
+    shadow: 'hover:shadow-[0_0_30px_rgba(34,211,238,0.25)]',
+    bg: 'bg-cyan-400/5',
+    icon: TrendingUp
+  },
+  arbitrage: {
+    color: 'text-purple-400',
+    border: 'border-purple-400/30',
+    glow: 'shadow-[0_0_20px_rgba(192,132,252,0.15)]',
+    shadow: 'hover:shadow-[0_0_30px_rgba(192,132,252,0.25)]',
+    bg: 'bg-purple-400/5',
+    icon: Layers
+  },
+  conservative: {
+    color: 'text-emerald-400',
+    border: 'border-emerald-400/30',
+    glow: 'shadow-[0_0_20px_rgba(52,211,153,0.15)]',
+    shadow: 'hover:shadow-[0_0_30px_rgba(52,211,153,0.25)]',
+    bg: 'bg-emerald-400/5',
+    icon: Shield
+  },
+  aggressive: {
+    color: 'text-red-500',
+    border: 'border-red-500/30',
+    glow: 'shadow-[0_0_20px_rgba(239,68,68,0.15)]',
+    shadow: 'hover:shadow-[0_0_30px_rgba(239,68,68,0.25)]',
+    bg: 'bg-red-500/5',
+    icon: Target
+  },
+  default: {
+    color: 'text-zinc-400',
+    border: 'border-zinc-700',
+    glow: '',
+    shadow: 'hover:shadow-[0_0_20px_rgba(255,255,255,0.05)]',
+    bg: 'bg-zinc-800/20',
+    icon: Activity
+  }
+}
+
+function getStrategyStyle(name: string) {
+  const lowerName = name.toLowerCase()
+  if (lowerName.includes('scalp')) return strategyStyles.scalper
+  if (lowerName.includes('swing')) return strategyStyles.swing
+  if (lowerName.includes('arb')) return strategyStyles.arbitrage
+  if (lowerName.includes('safe') || lowerName.includes('conserv')) return strategyStyles.conservative
+  if (lowerName.includes('aggress') || lowerName.includes('high')) return strategyStyles.aggressive
+  return strategyStyles.default
+}
+
+export function StrategyMarketPage() {
+  const { language } = useLanguage()
+  const { token, user } = useAuth()
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedCategory, setSelectedCategory] = useState<string>('all')
+  const [copiedId, setCopiedId] = useState<string | null>(null)
+
+  const texts = {
+    zh: {
+      title: '策略市场',
+      subtitle: 'STRATEGY MARKETPLACE',
+      description: '发现、学习并复用社区精英交易员的策略配置',
+      search: '搜索参数...',
+      all: '全部协议',
+      popular: '热门配置',
+      recent: '最新提交',
+      myStrategies: '我的库',
+      noStrategies: '无信号',
+      noStrategiesDesc: '当前频段未检测到策略信号',
+      author: 'OPERATOR',
+      createdAt: 'TIMESTAMP',
+      viewConfig: 'DECRYPT CONFIG',
+      hideConfig: 'ENCRYPT',
+      copyConfig: 'CLONE CONFIG',
+      copied: 'COPIED',
+      configHidden: 'ENCRYPTED',
+      configHiddenDesc: '配置参数已加密',
+      indicators: 'INDICATORS',
+      maxPositions: 'POS_LIMIT',
+      maxLeverage: 'LEV_MAX',
+      shareYours: 'UPLOAD_STRATEGY',
+      makePublic: 'PUBLISH',
+      loading: 'INITIALIZING...'
+    },
+    en: {
+      title: 'STRATEGY MARKET',
+      subtitle: 'GLOBAL STRATEGY DATABASE',
+      description: 'Discover, analyze, and clone high-performance trading algorithms',
+      search: 'SEARCH PARAMETERS...',
+      all: 'ALL PROTOCOLS',
+      popular: 'TRENDING',
+      recent: 'LATEST',
+      myStrategies: 'MY LIBRARY',
+      noStrategies: 'NO SIGNAL',
+      noStrategiesDesc: 'No strategic signals detected in this frequency',
+      author: 'OPERATOR',
+      createdAt: 'TIMESTAMP',
+      viewConfig: 'DECRYPT CONFIG',
+      hideConfig: 'ENCRYPT',
+      copyConfig: 'CLONE CONFIG',
+      copied: 'COPIED',
+      configHidden: 'ENCRYPTED',
+      configHiddenDesc: 'Configuration parameters encrypted',
+      indicators: 'INDICATORS',
+      maxPositions: 'POS_LIMIT',
+      maxLeverage: 'LEV_MAX',
+      shareYours: 'UPLOAD_STRATEGY',
+      makePublic: 'PUBLISH',
+      loading: 'INITIALIZING...'
+    }
+  }
+
+  const t = texts[language]
+
+  // Fetch public strategies
+  const { data: strategies, isLoading } = useSWR<PublicStrategy[]>(
+    'public-strategies',
+    async () => {
+      const response = await fetch('/api/strategies/public')
+      if (!response.ok) throw new Error('Failed to fetch strategies')
+      const data = await response.json()
+      return data.strategies || []
+    },
+    {
+      refreshInterval: 60000,
+      revalidateOnFocus: false
+    }
+  )
+
+  const filteredStrategies = strategies?.filter(s => {
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase()
+      return s.name.toLowerCase().includes(query) ||
+        s.description?.toLowerCase().includes(query)
+    }
+    return true
+  }) || []
+
+  const handleCopyConfig = async (strategy: PublicStrategy) => {
+    if (!strategy.config) return
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(strategy.config, null, 2))
+      setCopiedId(strategy.id)
+      toast.success(t.copied)
+      setTimeout(() => setCopiedId(null), 2000)
+    } catch (err) {
+      console.error('Failed to copy:', err)
+    }
+  }
+
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr)
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    }).replace(',', '')
+  }
+
+  const getIndicatorList = (config: any) => {
+    if (!config?.indicators) return []
+    const indicators = []
+    if (config.indicators.enable_ema) indicators.push('EMA')
+    if (config.indicators.enable_macd) indicators.push('MACD')
+    if (config.indicators.enable_rsi) indicators.push('RSI')
+    if (config.indicators.enable_atr) indicators.push('ATR')
+    if (config.indicators.enable_boll) indicators.push('BOLL')
+    if (config.indicators.enable_volume) indicators.push('VOL')
+    if (config.indicators.enable_oi) indicators.push('OI')
+    if (config.indicators.enable_funding_rate) indicators.push('FR')
+    return indicators
+  }
+
+  return (
+    <div className="min-h-screen bg-black text-white font-mono relative overflow-hidden flex flex-col items-center py-12">
+      {/* Background Grid & Scanlines */}
+      <div className="fixed inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none"></div>
+      <div className="fixed inset-0 bg-gradient-to-t from-black via-transparent to-transparent pointer-events-none"></div>
+      <div className="fixed inset-0 pointer-events-none opacity-[0.03] bg-[linear-gradient(transparent_50%,rgba(0,0,0,0.5)_50%)] bg-[length:100%_4px]"></div>
+
+      <div className="w-full max-w-7xl relative z-10 px-6">
+
+        {/* Header Section */}
+        <div className="mb-12 border-b border-zinc-800 pb-8 relative">
+          <div className="absolute top-0 right-0 p-2 border border-zinc-800 rounded bg-black/50 text-xs text-zinc-500 font-mono hidden md:block">
+            SYSTEM_STATUS: <span className="text-emerald-500 animate-pulse">ONLINE</span>
+            <br />
+            MARKET_UPLINK: <span className="text-emerald-500">ESTABLISHED</span>
+          </div>
+
+          <div className="flex items-center gap-4 mb-4">
+            <div className="bg-zinc-900 border border-zinc-700 p-3 rounded-none relative group overflow-hidden">
+              <div className="absolute inset-0 bg-nofx-gold/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+              <Database className="w-8 h-8 text-nofx-gold relative z-10" />
+            </div>
+            <div>
+              <h1 className="text-4xl font-bold tracking-tighter text-white uppercase glitch-text" data-text={t.title}>
+                {t.title}
+              </h1>
+              <p className="text-xs text-nofx-gold tracking-[0.3em] font-bold mt-1">
+                // {t.subtitle}
+              </p>
+            </div>
+          </div>
+          <p className="text-sm text-zinc-500 max-w-2xl border-l-2 border-zinc-800 pl-4">
+            {t.description}
+          </p>
+        </div>
+
+        {/* Search and Filter Bar */}
+        <div className="flex flex-col md:flex-row gap-4 mb-8">
+          {/* Search */}
+          <div className="relative flex-1 group">
+            <div className="absolute -inset-0.5 bg-gradient-to-r from-nofx-gold/20 to-zinc-800/20 rounded opacity-0 group-hover:opacity-100 transition duration-500 blur"></div>
+            <div className="relative bg-black flex items-center border border-zinc-800 group-hover:border-nofx-gold/50 transition-colors">
+              <div className="pl-4 pr-3 text-zinc-500 group-hover:text-nofx-gold transition-colors">
+                <Terminal size={16} />
+              </div>
+              <input
+                type="text"
+                placeholder={t.search}
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full bg-transparent py-3 text-sm focus:outline-none placeholder-zinc-700 text-nofx-gold font-mono"
+              />
+              <div className="pr-4">
+                <div className="w-2 h-4 bg-nofx-gold animate-pulse"></div>
+              </div>
+            </div>
+          </div>
+
+          {/* Category Filter */}
+          <div className="flex gap-2 bg-zinc-900/50 p-1 border border-zinc-800">
+            {['all', 'popular', 'recent'].map((cat) => (
+              <button
+                key={cat}
+                onClick={() => setSelectedCategory(cat)}
+                className={`px-4 py-2 text-xs font-mono uppercase tracking-wider transition-all relative overflow-hidden ${selectedCategory === cat
+                  ? 'text-black font-bold'
+                  : 'text-zinc-500 hover:text-white'
+                  }`}
+              >
+                {selectedCategory === cat && (
+                  <motion.div
+                    layoutId="filter-highlight"
+                    className="absolute inset-0 bg-nofx-gold"
+                    transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
+                  />
+                )}
+                <span className="relative z-10">{t[cat as keyof typeof t]}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Loading State */}
+        {isLoading && (
+          <div className="flex flex-col items-center justify-center py-32 space-y-4">
+            <div className="relative w-16 h-16">
+              <div className="absolute inset-0 border-2 border-zinc-800 rounded-full"></div>
+              <div className="absolute inset-0 border-2 border-nofx-gold rounded-full border-t-transparent animate-spin"></div>
+              <div className="absolute inset-0 flex items-center justify-center">
+                <Cpu size={24} className="text-nofx-gold/50" />
+              </div>
+            </div>
+            <p className="text-nofx-gold text-xs tracking-widest animate-pulse">{t.loading}</p>
+            <div className="flex gap-1">
+              <div className="w-1 h-1 bg-nofx-gold rounded-full animate-bounce" style={{ animationDelay: '0s' }}></div>
+              <div className="w-1 h-1 bg-nofx-gold rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
+              <div className="w-1 h-1 bg-nofx-gold rounded-full animate-bounce" style={{ animationDelay: '0.4s' }}></div>
+            </div>
+          </div>
+        )}
+
+        {/* Empty State */}
+        {!isLoading && filteredStrategies.length === 0 && (
+          <div className="flex flex-col items-center justify-center py-32 border border-zinc-800 border-dashed bg-zinc-900/20 rounded">
+            <div className="relative mb-6">
+              <div className="absolute -inset-4 bg-red-500/10 rounded-full blur-xl animate-pulse"></div>
+              <Activity className="w-16 h-16 text-zinc-700 relative z-10" />
+            </div>
+            <h3 className="text-xl font-bold text-zinc-300 font-mono tracking-tight mb-2">
+              [{t.noStrategies}]
+            </h3>
+            <p className="text-zinc-600 text-xs tracking-wide uppercase">{t.noStrategiesDesc}</p>
+          </div>
+        )}
+
+        {/* Strategy Grid */}
+        {!isLoading && filteredStrategies.length > 0 && (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <AnimatePresence>
+              {filteredStrategies.map((strategy, i) => {
+                const style = getStrategyStyle(strategy.name)
+                const Icon = style.icon
+                const indicators = strategy.config_visible && strategy.config
+                  ? getIndicatorList(strategy.config)
+                  : []
+
+                return (
+                  <motion.div
+                    key={strategy.id}
+                    initial={{ opacity: 0, scale: 0.95 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    exit={{ opacity: 0, scale: 0.95 }}
+                    transition={{ delay: i * 0.05 }}
+                    className={`group relative bg-black border border-zinc-800 hover:border-zinc-600 transition-all duration-300 ${style.shadow}`}
+                  >
+                    {/* Holographic Border Highlight */}
+                    <div className={`absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-${style.color.split('-')[1]}-500 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500`}></div>
+                    <div className={`absolute bottom-0 right-0 w-full h-[1px] bg-gradient-to-r from-transparent via-${style.color.split('-')[1]}-500 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500`}></div>
+
+                    {/* Category Side Strip */}
+                    <div className={`absolute left-0 top-0 bottom-0 w-[2px] ${style.bg.replace('/5', '/50')}`}></div>
+
+                    <div className="p-6 relative">
+                      {/* Header */}
+                      <div className="flex justify-between items-start mb-6">
+                        <div className={`p-2 rounded-none border ${style.border} ${style.bg}`}>
+                          <Icon className={`w-5 h-5 ${style.color}`} />
+                        </div>
+                        <div className="text-[10px] font-mono">
+                          {strategy.config_visible ? (
+                            <div className="flex items-center gap-1.5 text-emerald-500 border border-emerald-500/20 bg-emerald-500/10 px-2 py-1">
+                              <Eye size={10} />
+                              PUBLIC_ACCESS
+                            </div>
+                          ) : (
+                            <div className="flex items-center gap-1.5 text-zinc-500 border border-zinc-800 bg-zinc-900 px-2 py-1">
+                              <EyeOff size={10} />
+                              RESTRICTED
+                            </div>
+                          )}
+                        </div>
+                      </div>
+
+                      {/* Name and Description */}
+                      <h3 className={`text-lg font-bold mb-2 tracking-tight group-hover:${style.color} transition-colors uppercase truncate relative`}>
+                        {strategy.name}
+                        <span className="absolute -bottom-1 left-0 w-8 h-[2px] bg-zinc-800 group-hover:bg-nofx-gold transition-colors"></span>
+                      </h3>
+                      <p className="text-xs text-zinc-500 mb-6 line-clamp-2 h-8 leading-relaxed font-sans">
+                        {strategy.description || 'NO_DESCRIPTION_AVAILABLE'}
+                      </p>
+
+                      {/* Meta Data */}
+                      <div className="grid grid-cols-2 gap-y-2 mb-6 text-[10px] font-mono text-zinc-600">
+                        <div className="flex flex-col">
+                          <span className="text-zinc-700 uppercase">{t.author}</span>
+                          <span className="text-zinc-400 group-hover:text-white transition-colors">@{strategy.author_email?.split('@')[0] || 'UNKNOWN'}</span>
+                        </div>
+                        <div className="flex flex-col text-right">
+                          <span className="text-zinc-700 uppercase">{t.createdAt}</span>
+                          <span className="text-zinc-400">{formatDate(strategy.created_at)}</span>
+                        </div>
+                      </div>
+
+                      {/* Config / Indicators */}
+                      <div className="bg-zinc-900/30 border border-zinc-800/50 p-3 mb-4 backdrop-blur-sm min-h-[90px]">
+                        {strategy.config_visible && strategy.config ? (
+                          <div className="space-y-3">
+                            {/* Indicators */}
+                            <div className="flex items-center gap-2 overflow-x-auto scrollbar-hide pb-1">
+                              {indicators.length > 0 ? indicators.map((ind) => (
+                                <span
+                                  key={ind}
+                                  className="px-1.5 py-0.5 border border-zinc-700 bg-zinc-800 text-[9px] text-zinc-300 font-mono whitespace-nowrap"
+                                >
+                                  {ind}
+                                </span>
+                              )) : <span className="text-[9px] text-zinc-600">NO_INDICATORS</span>}
+                            </div>
+
+                            {/* Risk Control */}
+                            {strategy.config.risk_control && (
+                              <div className="flex justify-between items-center text-[10px]">
+                                <div className="flex gap-3">
+                                  <div className="flex flex-col">
+                                    <span className="text-zinc-600 scale-90 origin-left">LEV</span>
+                                    <span className="text-zinc-300 font-bold">{strategy.config.risk_control.btc_eth_max_leverage || '-'}x</span>
+                                  </div>
+                                  <div className="flex flex-col">
+                                    <span className="text-zinc-600 scale-90 origin-left">POS</span>
+                                    <span className="text-zinc-300 font-bold">{strategy.config.risk_control.max_positions || '-'}</span>
+                                  </div>
+                                </div>
+                                <Activity size={12} className="text-zinc-700" />
+                              </div>
+                            )}
+                          </div>
+                        ) : (
+                          <div className="flex flex-col items-center justify-center h-full text-zinc-600">
+                            <EyeOff size={16} className="mb-1 opacity-50" />
+                            <span className="text-[9px] uppercase tracking-widest">{t.configHiddenDesc}</span>
+                          </div>
+                        )}
+                      </div>
+
+                      {/* Action Button */}
+                      <div>
+                        {strategy.config_visible && strategy.config ? (
+                          <button
+                            onClick={() => handleCopyConfig(strategy)}
+                            className="w-full py-2.5 text-[10px] font-bold font-mono uppercase tracking-widest border border-zinc-700 bg-black hover:bg-zinc-900 text-zinc-300 hover:text-nofx-gold hover:border-nofx-gold transition-all flex items-center justify-center gap-2 group/btn"
+                          >
+                            {copiedId === strategy.id ? (
+                              <>
+                                <Check className="w-3 h-3 text-emerald-500" />
+                                <span className="text-emerald-500">{t.copied}</span>
+                              </>
+                            ) : (
+                              <>
+                                <Copy className="w-3 h-3 group-hover/btn:scale-110 transition-transform" />
+                                {t.copyConfig}
+                              </>
+                            )}
+                          </button>
+                        ) : (
+                          <button disabled className="w-full py-2.5 text-[10px] font-bold font-mono uppercase tracking-widest border border-zinc-800 bg-black text-zinc-700 cursor-not-allowed flex items-center justify-center gap-2">
+                            <Shield size={12} />
+                            {t.hideConfig}
+                          </button>
+                        )}
+                      </div>
+
+                    </div>
+                  </motion.div>
+                )
+              })}
+            </AnimatePresence>
+          </div>
+        )}
+
+        {/* CTA - Share Strategy */}
+        {user && token && (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.3 }}
+            className="mt-16 mb-20 flex justify-center"
+          >
+            <div className="relative group cursor-pointer" onClick={() => window.location.href = '/strategy'}>
+              <div className="absolute -inset-1 bg-gradient-to-r from-nofx-gold to-yellow-600 rounded blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
+              <div className="relative px-8 py-4 bg-black border border-zinc-800 hover:border-nofx-gold/50 flex items-center gap-4 transition-all">
+                <Hexagon className="text-nofx-gold animate-spin-slow" size={24} />
+                <div className="text-left">
+                  <div className="text-sm font-bold text-white uppercase tracking-wider group-hover:text-nofx-gold transition-colors">{t.shareYours}</div>
+                  <div className="text-[10px] text-zinc-500 font-mono">CONTRIBUTE TO THE GLOBAL DATABASE</div>
+                </div>
+                <div className="w-[1px] h-8 bg-zinc-800 mx-2"></div>
+                <div className="text-xs font-mono text-zinc-400 group-hover:translate-x-1 transition-transform">
+                  INITIALIZE_UPLOAD -&gt;
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        )}
+
+      </div>
+    </div>
+  )
+}