Merge pull request #359 from Icyoung/beta

Beta Merge dev、Bug fix
2026-07-12 07:16:56 +08:00 · 2025-11-04 01:50:34 +08:00
parent 04f3a20af9 6eecd8b33a
commit 88d46b1dde
9 changed files with 195 additions and 382 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -72,6 +72,7 @@
      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
      "dev": true,
+      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.27.1",
        "@babel/generator": "^7.28.5",
@@ -1275,6 +1276,7 @@
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.26.tgz",
      "integrity": "sha512-RFA/bURkcKzx/X9oumPG9Vp3D3JUgus/d0b67KB0t5S/raciymilkOa66olh78MUI92QLbEJevO7rvqU/kjwKA==",
      "devOptional": true,
+      "peer": true,
      "dependencies": {
        "@types/prop-types": "*",
        "csstype": "^3.0.2"
@@ -1462,6 +1464,7 @@
          "url": "https://github.com/sponsors/ai"
        }
      ],
+      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.8.19",
        "caniuse-lite": "^1.0.30001751",
@@ -2157,6 +2160,7 @@
      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
      "dev": true,
+      "peer": true,
      "bin": {
        "jiti": "bin/jiti.js"
      }
@@ -2477,6 +2481,7 @@
          "url": "https://github.com/sponsors/ai"
        }
      ],
+      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@@ -2653,6 +2658,7 @@
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "peer": true,
      "dependencies": {
        "loose-envify": "^1.1.0"
      },
@@ -2664,6 +2670,7 @@
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "peer": true,
      "dependencies": {
        "loose-envify": "^1.1.0",
        "scheduler": "^0.23.2"
@@ -3172,6 +3179,7 @@
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "dev": true,
+      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -3286,6 +3294,7 @@
      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
      "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
      "dev": true,
+      "peer": true,
      "dependencies": {
        "esbuild": "^0.25.0",
        "fdir": "^6.4.4",
@@ -3377,6 +3386,7 @@
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "dev": true,
+      "peer": true,
      "engines": {
        "node": ">=12"
      },
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -13,7 +13,6 @@ import { LanguageProvider, useLanguage } from './contexts/LanguageContext';
 import { AuthProvider, useAuth } from './contexts/AuthContext';
 import { t, type Language } from './i18n/translations';
 import { useSystemConfig } from './hooks/useSystemConfig';
-import { Zap } from 'lucide-react';
 import type {
  SystemStatus,
  AccountInfo,
@@ -270,229 +269,35 @@ function App() {

  return (
    <div className="min-h-screen" style={{ background: '#0B0E11', color: '#EAECEF' }}>
-      {/* Header - Binance Style */}
-      <header className="glass sticky top-0 z-50 backdrop-blur-xl">
-        <div className="max-w-[1920px] mx-auto px-3 md:px-6 py-4">
-          {/* Desktop Layout */}
-          <div className="hidden md:flex relative items-center">
-            {/* Left - Logo and Title */}
-            <div className="flex items-center gap-3">
-              <div className="w-8 h-8 flex items-center justify-center">
-                <img src="/icons/nofx.svg?v=2" alt="NOFX" className="w-8 h-8" />
-              </div>
-              <div>
-                <h1 className="text-xl font-bold" style={{ color: '#EAECEF' }}>
-                  {t('appTitle', language)}
-                </h1>
-                <p className="text-xs mono" style={{ color: '#848E9C' }}>
-                  {t('subtitle', language)}
-                </p>
-              </div>
-            </div>
-
-            {/* Center - Page Toggle (absolutely positioned) */}
-            <div className="absolute left-1/2 transform -translate-x-1/2 flex gap-1 rounded p-1" style={{ background: '#1E2329' }}>
-              <button
-                onClick={() => setCurrentPage('competition')}
-                className={`px-3 py-2 rounded text-sm font-semibold transition-all`}
-                style={currentPage === 'competition'
-                  ? { background: '#F0B90B', color: '#000' }
-                  : { background: 'transparent', color: '#848E9C' }
-                }
-              >
-                {t('aiCompetition', language)}
-              </button>
-              <button
-                onClick={() => setCurrentPage('traders')}
-                className={`px-3 py-2 rounded text-sm font-semibold transition-all`}
-                style={currentPage === 'traders'
-                  ? { background: '#F0B90B', color: '#000' }
-                  : { background: 'transparent', color: '#848E9C' }
-                }
-              >
-                {t('aiTraders', language)}
-              </button>
-              <button
-                onClick={() => setCurrentPage('trader')}
-                className={`px-3 py-2 rounded text-sm font-semibold transition-all`}
-                style={currentPage === 'trader'
-                  ? { background: '#F0B90B', color: '#000' }
-                  : { background: 'transparent', color: '#848E9C' }
-                }
-              >
-                {t('tradingPanel', language)}
-              </button>
-            </div>
-
-            {/* Right - Actions */}
-            <div className="ml-auto flex items-center gap-3">
-
-              {/* User Info - Only show if not in admin mode */}
-              {!systemConfig?.admin_mode && user && (
-                <div className="flex items-center gap-2 px-3 py-2 rounded" style={{ background: '#1E2329', border: '1px solid #2B3139' }}>
-                  <div className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold" style={{ background: '#F0B90B', color: '#000' }}>
-                    {user.email[0].toUpperCase()}
-                  </div>
-                  <span className="text-sm" style={{ color: '#EAECEF' }}>{user.email}</span>
-                </div>
-              )}
-
-              {/* Admin Mode Indicator */}
-              {systemConfig?.admin_mode && (
-                <div className="flex items-center gap-2 px-3 py-2 rounded" style={{ background: '#1E2329', border: '1px solid #2B3139' }}>
-                  <Zap className="w-4 h-4" style={{ color: '#F0B90B' }} />
-                  <span className="text-sm font-semibold" style={{ color: '#F0B90B' }}>{t('adminMode', language)}</span>
-                </div>
-              )}
-
-              {/* Language Toggle */}
-              <div className="flex gap-1 rounded p-1" style={{ background: '#1E2329' }}>
-                <button
-                  onClick={() => setLanguage('zh')}
-                  className="px-3 py-1.5 rounded text-xs font-semibold transition-all"
-                  style={language === 'zh'
-                    ? { background: '#F0B90B', color: '#000' }
-                    : { background: 'transparent', color: '#848E9C' }
-                  }
-                >
-                  中文
-                </button>
-                <button
-                  onClick={() => setLanguage('en')}
-                  className="px-3 py-1.5 rounded text-xs font-semibold transition-all"
-                  style={language === 'en'
-                    ? { background: '#F0B90B', color: '#000' }
-                    : { background: 'transparent', color: '#848E9C' }
-                  }
-                >
-                  EN
-                </button>
-              </div>
-
-              {/* Logout Button - Only show if not in admin mode */}
-              {!systemConfig?.admin_mode && (
-                <button
-                  onClick={logout}
-                  className="px-3 py-2 rounded text-sm font-semibold transition-all hover:scale-105"
-                  style={{ background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D', border: '1px solid rgba(246, 70, 93, 0.2)' }}
-                >
-                  {t('logout', language)}
-                </button>
-              )}
-            </div>
-          </div>
-
-          {/* Mobile Layout */}
-          <div className="flex md:hidden flex-col gap-3">
-            {/* Top Row - Logo, Title and Language */}
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <img src="/icons/nofx.svg?v=2" alt="NOFX" className="w-7 h-7" />
-                <div>
-                  <h1 className="text-base font-bold" style={{ color: '#EAECEF' }}>
-                    {t('appTitle', language)}
-                  </h1>
-                  <p className="text-xs mono" style={{ color: '#848E9C' }}>
-                    {t('subtitle', language)}
-                  </p>
-                </div>
-              </div>
-
-              {/* Language Toggle - Right side on mobile */}
-              <div className="flex gap-1 rounded p-0.5" style={{ background: '#1E2329' }}>
-                <button
-                  onClick={() => setLanguage('zh')}
-                  className="px-2 py-1 rounded text-xs font-semibold transition-all"
-                  style={language === 'zh'
-                    ? { background: '#F0B90B', color: '#000' }
-                    : { background: 'transparent', color: '#848E9C' }
-                  }
-                >
-                  中文
-                </button>
-                <button
-                  onClick={() => setLanguage('en')}
-                  className="px-2 py-1 rounded text-xs font-semibold transition-all"
-                  style={language === 'en'
-                    ? { background: '#F0B90B', color: '#000' }
-                    : { background: 'transparent', color: '#848E9C' }
-                  }
-                >
-                  EN
-                </button>
-              </div>
-            </div>
-
-            {/* Second Row - Page Toggle */}
-            <div className="flex gap-1 rounded p-1" style={{ background: '#1E2329' }}>
-              <button
-                onClick={() => setCurrentPage('competition')}
-                className={`flex-1 px-2 py-1.5 rounded text-xs font-semibold transition-all`}
-                style={currentPage === 'competition'
-                  ? { background: '#F0B90B', color: '#000' }
-                  : { background: 'transparent', color: '#848E9C' }
-                }
-              >
-                {t('aiCompetition', language)}
-              </button>
-              <button
-                onClick={() => setCurrentPage('traders')}
-                className={`flex-1 px-2 py-1.5 rounded text-xs font-semibold transition-all`}
-                style={currentPage === 'traders'
-                  ? { background: '#F0B90B', color: '#000' }
-                  : { background: 'transparent', color: '#848E9C' }
-                }
-              >
-                {t('aiTraders', language)}
-              </button>
-              <button
-                onClick={() => setCurrentPage('trader')}
-                className={`flex-1 px-2 py-1.5 rounded text-xs font-semibold transition-all`}
-                style={currentPage === 'trader'
-                  ? { background: '#F0B90B', color: '#000' }
-                  : { background: 'transparent', color: '#848E9C' }
-                }
-              >
-                {t('tradingPanel', language)}
-              </button>
-            </div>
-
-            {/* Third Row - User Info and Logout */}
-            <div className="flex items-center gap-2">
-              {/* User Info or Admin Mode */}
-              {!systemConfig?.admin_mode && user && (
-                <div className="flex-1 flex items-center gap-2 px-2 py-1.5 rounded" style={{ background: '#1E2329', border: '1px solid #2B3139' }}>
-                  <div className="w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold" style={{ background: '#F0B90B', color: '#000' }}>
-                    {user.email[0].toUpperCase()}
-                  </div>
-                  <span className="text-xs truncate" style={{ color: '#EAECEF' }}>{user.email}</span>
-                </div>
-              )}
-
-              {systemConfig?.admin_mode && (
-                <div className="flex-1 flex items-center gap-2 px-2 py-1.5 rounded" style={{ background: '#1E2329', border: '1px solid #2B3139' }}>
-                  <Zap className="w-4 h-4" style={{ color: '#F0B90B' }} />
-                  <span className="text-xs font-semibold" style={{ color: '#F0B90B' }}>{t('adminMode', language)}</span>
-                </div>
-              )}
-
-              {/* Logout Button */}
-              {!systemConfig?.admin_mode && (
-                <button
-                  onClick={logout}
-                  className="px-3 py-1.5 rounded text-xs font-semibold transition-all"
-                  style={{ background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D', border: '1px solid rgba(246, 70, 93, 0.2)' }}
-                >
-                  {t('logout', language)}
-                </button>
-              )}
-            </div>
-          </div>
-        </div>
-      </header>
+      <HeaderBar 
+        isLoggedIn={!!user} 
+        currentPage={currentPage}
+        language={language}
+        onLanguageChange={setLanguage}
+        user={user}
+        onLogout={logout}
+        isAdminMode={systemConfig?.admin_mode}
+        onPageChange={(page) => {
+          console.log('Main app onPageChange called with:', page);
+          
+          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');
+          }
+        }}
+      />

      {/* Main Content */}
-      <main className="max-w-[1920px] mx-auto px-3 md:px-6 py-4 md:py-6">
+      <main className="max-w-[1920px] mx-auto px-6 py-6 pt-24">
        {currentPage === 'competition' ? (
          <CompetitionPage />
        ) : currentPage === 'traders' ? (