diff --git a/web/src/components/AITradersPage.tsx b/web/src/components/AITradersPage.tsx
index 32252ad1..10b06dd0 100644
--- a/web/src/components/AITradersPage.tsx
+++ b/web/src/components/AITradersPage.tsx
@@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
import useSWR from 'swr'
import { api } from '../lib/api'
import type {
@@ -29,7 +30,10 @@ import {
BookOpen,
HelpCircle,
Radio,
+ Pencil,
} from 'lucide-react'
+import { confirmToast } from '../lib/notify'
+import { toast } from 'sonner'
// 获取友好的AI模型名称
function getModelDisplayName(modelId: string): string {
@@ -58,6 +62,7 @@ interface AITradersPageProps {
export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
const { language } = useLanguage()
const { user, token } = useAuth()
+ const navigate = useNavigate()
const [showCreateModal, setShowCreateModal] = useState(false)
const [showEditModal, setShowEditModal] = useState(false)
const [showModelModal, setShowModelModal] = useState(false)
@@ -220,21 +225,25 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
const exchange = allExchanges?.find((e) => e.id === data.exchange_id)
if (!model?.enabled) {
- alert(t('modelNotConfigured', language))
+ toast.error(t('modelNotConfigured', language))
return
}
if (!exchange?.enabled) {
- alert(t('exchangeNotConfigured', language))
+ toast.error(t('exchangeNotConfigured', language))
return
}
- await api.createTrader(data)
+ await toast.promise(api.createTrader(data), {
+ loading: '正在创建…',
+ success: '创建成功',
+ error: '创建失败',
+ })
setShowCreateModal(false)
mutateTraders()
} catch (error) {
console.error('Failed to create trader:', error)
- alert(t('createTraderFailed', language))
+ toast.error(t('createTraderFailed', language))
}
}
@@ -245,7 +254,7 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
setShowEditModal(true)
} catch (error) {
console.error('Failed to fetch trader config:', error)
- alert(t('getTraderConfigFailed', language))
+ toast.error(t('getTraderConfigFailed', language))
}
}
@@ -257,12 +266,12 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
const exchange = enabledExchanges?.find((e) => e.id === data.exchange_id)
if (!model) {
- alert(t('modelConfigNotExist', language))
+ toast.error(t('modelConfigNotExist', language))
return
}
if (!exchange) {
- alert(t('exchangeConfigNotExist', language))
+ toast.error(t('exchangeConfigNotExist', language))
return
}
@@ -282,39 +291,58 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
use_oi_top: data.use_oi_top,
}
- await api.updateTrader(editingTrader.trader_id, request)
+ await toast.promise(api.updateTrader(editingTrader.trader_id, request), {
+ loading: '正在保存…',
+ success: '保存成功',
+ error: '保存失败',
+ })
setShowEditModal(false)
setEditingTrader(null)
mutateTraders()
} catch (error) {
console.error('Failed to update trader:', error)
- alert(t('updateTraderFailed', language))
+ toast.error(t('updateTraderFailed', language))
}
}
const handleDeleteTrader = async (traderId: string) => {
- if (!confirm(t('confirmDeleteTrader', language))) return
+ {
+ const ok = await confirmToast(t('confirmDeleteTrader', language))
+ if (!ok) return
+ }
try {
- await api.deleteTrader(traderId)
+ await toast.promise(api.deleteTrader(traderId), {
+ loading: '正在删除…',
+ success: '删除成功',
+ error: '删除失败',
+ })
mutateTraders()
} catch (error) {
console.error('Failed to delete trader:', error)
- alert(t('deleteTraderFailed', language))
+ toast.error(t('deleteTraderFailed', language))
}
}
const handleToggleTrader = async (traderId: string, running: boolean) => {
try {
if (running) {
- await api.stopTrader(traderId)
+ await toast.promise(api.stopTrader(traderId), {
+ loading: '正在停止…',
+ success: '已停止',
+ error: '停止失败',
+ })
} else {
- await api.startTrader(traderId)
+ await toast.promise(api.startTrader(traderId), {
+ loading: '正在启动…',
+ success: '已启动',
+ error: '启动失败',
+ })
}
mutateTraders()
} catch (error) {
console.error('Failed to toggle trader:', error)
- alert(t('operationFailed', language))
+ toast.error(t('operationFailed', language))
}
}
@@ -353,19 +381,16 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
if (config.checkInUse(config.id)) {
const usingTraders = config.getUsingTraders(config.id)
const traderNames = usingTraders.map((t) => t.trader_name).join(', ')
- alert(
- t(config.cannotDeleteKey, language) +
- '\n\n' +
- t('tradersUsing', language) +
- ': ' +
- traderNames +
- '\n\n' +
- t('pleaseDeleteTradersFirst', language)
+ toast.error(
+ `${t(config.cannotDeleteKey, language)} · ${t('tradersUsing', language)}: ${traderNames} · ${t('pleaseDeleteTradersFirst', language)}`
)
return
}
- if (!confirm(t(config.confirmDeleteKey, language))) return
+ {
+ const ok = await confirmToast(t(config.confirmDeleteKey, language))
+ if (!ok) return
+ }
try {
const updatedItems =
@@ -374,7 +399,11 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
) || []
const request = config.buildRequest(updatedItems)
- await config.updateApi(request)
+ await toast.promise(config.updateApi(request), {
+ loading: '正在更新配置…',
+ success: '配置已更新',
+ error: '更新配置失败',
+ })
// 重新获取用户配置以确保数据同步
const refreshedItems = await config.refreshApi()
@@ -383,7 +412,7 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
config.closeModal()
} catch (error) {
console.error(`Failed to delete ${config.type} config:`, error)
- alert(t(config.errorKey, language))
+ toast.error(t(config.errorKey, language))
}
}
@@ -445,7 +474,7 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
const modelToUpdate =
existingModel || supportedModels?.find((m) => m.id === modelId)
if (!modelToUpdate) {
- alert(t('modelNotExist', language))
+ toast.error(t('modelNotExist', language))
return
}
@@ -489,7 +518,11 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
),
}
- await api.updateModelConfigs(request)
+ await toast.promise(api.updateModelConfigs(request), {
+ loading: '正在更新模型配置…',
+ success: '模型配置已更新',
+ error: '更新模型配置失败',
+ })
// 重新获取用户配置以确保数据同步
const refreshedModels = await api.getModelConfigs()
@@ -499,7 +532,7 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
setEditingModel(null)
} catch (error) {
console.error('Failed to save model config:', error)
- alert(t('saveConfigFailed', language))
+ toast.error(t('saveConfigFailed', language))
}
}
@@ -569,7 +602,7 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
(e) => e.id === exchangeId
)
if (!exchangeToUpdate) {
- alert(t('exchangeNotExist', language))
+ toast.error(t('exchangeNotExist', language))
return
}
@@ -629,7 +662,11 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
),
}
- await api.updateExchangeConfigsEncrypted(request)
+ await toast.promise(api.updateExchangeConfigsEncrypted(request), {
+ loading: '正在更新交易所配置…',
+ success: '交易所配置已更新',
+ error: '更新交易所配置失败',
+ })
// 重新获取用户配置以确保数据同步
const refreshedExchanges = await api.getExchangeConfigs()
@@ -639,7 +676,7 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
setEditingExchange(null)
} catch (error) {
console.error('Failed to save exchange config:', error)
- alert(t('saveConfigFailed', language))
+ toast.error(t('saveConfigFailed', language))
}
}
@@ -658,12 +695,16 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
oiTopUrl: string
) => {
try {
- await api.saveUserSignalSource(coinPoolUrl, oiTopUrl)
+ await toast.promise(api.saveUserSignalSource(coinPoolUrl, oiTopUrl), {
+ loading: '正在保存…',
+ success: '保存成功',
+ error: '保存失败',
+ })
setUserSignalSource({ coinPoolUrl, oiTopUrl })
setShowSignalSourceModal(false)
} catch (error) {
console.error('Failed to save signal source:', error)
- alert(t('saveSignalSourceFailed', language))
+ toast.error(t('saveSignalSourceFailed', language))
}
}
@@ -1025,9 +1066,9 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
{/* Status */}
-
+ {/*
{t('status', language)}
-
+
*/}
- {/* Actions */}
-
+ {/* Actions: 禁止换行，超出横向滚动 */}
+
onTraderSelect?.(trader.trader_id)}
+ onClick={() => {
+ if (onTraderSelect) {
+ onTraderSelect(trader.trader_id)
+ } else {
+ navigate(`/dashboard?trader=${trader.trader_id}`)
+ }
+ }}
className="px-2 md:px-3 py-1.5 md:py-2 rounded text-xs md:text-sm font-semibold transition-all hover:scale-105 flex items-center gap-1 whitespace-nowrap"
style={{
background: 'rgba(99, 102, 241, 0.1)',
@@ -1069,7 +1116,7 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
handleEditTrader(trader.trader_id)}
disabled={trader.is_running}
- className="px-2 md:px-3 py-1.5 md:py-2 rounded text-xs md:text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
+ className="px-2 md:px-3 py-1.5 md:py-2 rounded text-xs md:text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap flex items-center gap-1"
style={{
background: trader.is_running
? 'rgba(132, 142, 156, 0.1)'
@@ -1077,7 +1124,8 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
color: trader.is_running ? '#848E9C' : '#FFC107',
}}
>
- ✏️ {t('edit', language)}
+
setCopiedIP(false), 2000)
+ toast.success(t('ipCopied', language))
} else {
// 降级方案: 使用传统的 execCommand 方法
const textArea = document.createElement('textarea')
@@ -1804,6 +1853,7 @@ function ExchangeConfigModal({
if (successful) {
setCopiedIP(true)
setTimeout(() => setCopiedIP(false), 2000)
+ toast.success(t('ipCopied', language))
} else {
throw new Error('复制命令执行失败')
}
@@ -1814,7 +1864,7 @@ function ExchangeConfigModal({
} catch (err) {
console.error('复制失败:', err)
// 显示错误提示
- alert(t('copyIPFailed', language) || `复制失败: ${ip}\n请手动复制此IP地址`)
+ toast.error(t('copyIPFailed', language) || `复制失败: ${ip}\n请手动复制此IP地址`)
}
}
diff --git a/web/src/components/ConfirmDialog.tsx b/web/src/components/ConfirmDialog.tsx
new file mode 100644
index 00000000..c2d9b711
--- /dev/null
+++ b/web/src/components/ConfirmDialog.tsx
@@ -0,0 +1,123 @@
+import React, {
+ createContext,
+ useContext,
+ useState,
+ useCallback,
+ useEffect,
+} from 'react'
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogTitle,
+} from './ui/alert-dialog'
+import { setGlobalConfirm } from '../lib/notify'
+
+interface ConfirmOptions {
+ title?: string
+ message: string
+ okText?: string
+ cancelText?: string
+}
+
+interface ConfirmDialogContextType {
+ confirm: (options: ConfirmOptions) => Promise
+}
+
+const ConfirmDialogContext = createContext<
+ ConfirmDialogContextType | undefined
+>(undefined)
+
+export function useConfirmDialog() {
+ const context = useContext(ConfirmDialogContext)
+ if (!context) {
+ throw new Error(
+ 'useConfirmDialog must be used within ConfirmDialogProvider'
+ )
+ }
+ return context
+}
+
+interface ConfirmState {
+ isOpen: boolean
+ title?: string
+ message: string
+ okText: string
+ cancelText: string
+ resolve?: (value: boolean) => void
+}
+
+export function ConfirmDialogProvider({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ const [state, setState] = useState({
+ isOpen: false,
+ message: '',
+ okText: '确认',
+ cancelText: '取消',
+ })
+
+ const confirm = useCallback((options: ConfirmOptions): Promise => {
+ return new Promise((resolve) => {
+ setState({
+ isOpen: true,
+ title: options.title,
+ message: options.message,
+ okText: options.okText || '确认',
+ cancelText: options.cancelText || '取消',
+ resolve,
+ })
+ })
+ }, [])
+
+ // 注册全局 confirm 函数
+ useEffect(() => {
+ setGlobalConfirm(confirm)
+ }, [confirm])
+
+ const handleClose = useCallback((result: boolean) => {
+ setState((prev) => {
+ prev.resolve?.(result)
+ return {
+ ...prev,
+ isOpen: false,
+ }
+ })
+ }, [])
+
+ return (
+
+ {children}
+ !open && handleClose(false)}
+ >
+
+
+ {state.title && (
+
+ {state.title}
+
+ )}
+
+ {state.message}
+
+
+ handleClose(false)}>
+ {state.cancelText}
+
+ handleClose(true)}>
+ {state.okText}
+
+
+
+
+
+ )
+}
diff --git a/web/src/components/Container.tsx b/web/src/components/Container.tsx
new file mode 100644
index 00000000..00ae716d
--- /dev/null
+++ b/web/src/components/Container.tsx
@@ -0,0 +1,40 @@
+import { ReactNode, CSSProperties } from 'react'
+
+interface ContainerProps {
+ children: ReactNode
+ className?: string
+ as?: 'div' | 'main' | 'header' | 'section'
+ style?: CSSProperties
+ /** 是否充满宽度（取消 max-width） */
+ fluid?: boolean
+ /** 是否取消水平内边距 */
+ noPadding?: boolean
+ /** 自定义最大宽度类（默认 max-w-[1920px]） */
+ maxWidthClass?: string
+}
+
+/**
+ * 统一的容器组件，确保所有页面元素使用一致的最大宽度和内边距
+ * - max-width: 1920px
+ * - padding: 24px (mobile) -> 32px (tablet) -> 48px (desktop)
+ */
+export function Container({
+ children,
+ className = '',
+ as: Component = 'div',
+ style,
+ fluid = false,
+ noPadding = false,
+ maxWidthClass = 'max-w-[1920px]',
+}: ContainerProps) {
+ const maxWidth = fluid ? 'w-full' : maxWidthClass
+ const padding = noPadding ? 'px-0' : 'px-6 sm:px-8 lg:px-12'
+ return (
+
+ {children}
+
+ )
+}
diff --git a/web/src/components/DevToastController.tsx b/web/src/components/DevToastController.tsx
new file mode 100644
index 00000000..912e3723
--- /dev/null
+++ b/web/src/components/DevToastController.tsx
@@ -0,0 +1,116 @@
+///
+
Sonner 自定义通知
+
+ 这是一个通过 `notify.custom` 渲染的测试 Toast
+
+
('success')
+ const [message, setMessage] = useState('来自 Dev 控制器的测试通知')
+ const [duration, setDuration] = useState(2200)
+
+ if (!import.meta.env.DEV) {
+ return null
+ }
+
+ const triggerToast = async () => {
+ switch (type) {
+ case 'message':
+ notify.message(message, { duration })
+ break
+ case 'success':
+ notify.success(message, { duration })
+ break
+ case 'info':
+ notify.info(message, { duration })
+ break
+ case 'warning':
+ notify.warning(message, { duration })
+ break
+ case 'error':
+ notify.error(message, { duration })
+ break
+ case 'custom':
+ notify.custom(() => customRenderer(), { duration })
+ break
+ }
+ }
+
+ const triggerConfirm = async () => {
+ const confirmed = await confirmToast(message, {
+ okText: '继续',
+ cancelText: '取消',
+ })
+ if (confirmed) {
+ notify.success('确认按钮已点击', { duration: 2000 })
+ } else {
+ notify.message('已取消确认逻辑', { duration: 2000 })
+ }
+ }
+
+ return (
+
+
+ Dev Sonner 控制器
+ 仅在 dev 模式可见
+
+
+
+ 类型
+ setType(event.target.value as ToastType)}
+ >
+ {toastOptions.map((option) => (
+
+ {option}
+
+ ))}
+
+
+
+ 文案
+
+
+ 持续(ms)
+
+
+ 触发通知
+ 触发确认
+
+
+
-
+
{/* Left - Logo and Title */}
@@ -58,7 +59,7 @@ export function Header({ simple = false }: HeaderProps) {
)
}
diff --git a/web/src/components/HeaderBar.tsx b/web/src/components/HeaderBar.tsx
new file mode 100644
index 00000000..3c1870c4
--- /dev/null
+++ b/web/src/components/HeaderBar.tsx
@@ -0,0 +1,921 @@
+import { useState, useEffect, useRef } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import { Menu, X, ChevronDown } from 'lucide-react'
+import { t, type Language } from '../i18n/translations'
+import { Container } from './Container'
+
+interface HeaderBarProps {
+ onLoginClick?: () => void
+ isLoggedIn?: boolean
+ isHomePage?: boolean
+ currentPage?: string
+ language?: Language
+ onLanguageChange?: (lang: Language) => void
+ user?: { email: string } | null
+ onLogout?: () => void
+ onPageChange?: (page: string) => void
+}
+
+export default function HeaderBar({
+ isLoggedIn = false,
+ isHomePage = false,
+ currentPage,
+ language = 'zh' as Language,
+ onLanguageChange,
+ user,
+ onLogout,
+ onPageChange,
+}: HeaderBarProps) {
+ const navigate = useNavigate()
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+ const [languageDropdownOpen, setLanguageDropdownOpen] = useState(false)
+ const [userDropdownOpen, setUserDropdownOpen] = useState(false)
+ const dropdownRef = useRef(null)
+ const userDropdownRef = useRef(null)
+
+ // Close dropdown when clicking outside
+ useEffect(() => {
+ function handleClickOutside(event: MouseEvent) {
+ if (
+ dropdownRef.current &&
+ !dropdownRef.current.contains(event.target as Node)
+ ) {
+ setLanguageDropdownOpen(false)
+ }
+ if (
+ userDropdownRef.current &&
+ !userDropdownRef.current.contains(event.target as Node)
+ ) {
+ setUserDropdownOpen(false)
+ }
+ }
+
+ document.addEventListener('mousedown', handleClickOutside)
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside)
+ }
+ }, [])
+
+ return (
+
+
+ {/* Logo */}
+
+ NOFX
+
+
+ Agentic Trading OS
+
+
+
+ {/* Desktop Menu */}
+
+ {/* Left Side - Navigation Tabs */}
+
+ {isLoggedIn ? (
+ // Main app navigation when logged in
+ <>
+
{
+ navigate('/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' && (
+
+
+
{
+ 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' && (
+
+
+
{
+ 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' && (
+
+
+
{
+ if (onPageChange) {
+ onPageChange('faq')
+ } else {
+ 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' && (
+
+
+ ) : (
+ // Landing page navigation when not logged in
+ <>
+
{
+ 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' && (
+
+
+
{
+ 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' && (
+
+
+ )}
+
+
+ {/* Right Side - Original Navigation Items and Login */}
+
+ {/* Only show original navigation items on home page */}
+ {isHomePage &&
+ [
+ { key: 'features', label: t('features', language) },
+ { key: 'howItWorks', label: t('howItWorks', language) },
+ { key: 'GitHub', label: 'GitHub' },
+ { key: 'community', label: t('community', language) },
+ ].map((item) => (
+
+ {item.label}
+
+ ))}
+
+ {/* User Info and Actions */}
+ {isLoggedIn && user ? (
+
+ {/* User Info with Dropdown */}
+
+
setUserDropdownOpen(!userDropdownOpen)}
+ className="flex items-center gap-2 px-3 py-2 rounded transition-colors"
+ style={{
+ background: 'var(--panel-bg)',
+ border: '1px solid var(--panel-border)',
+ }}
+ onMouseEnter={(e) =>
+ (e.currentTarget.style.background =
+ 'rgba(255, 255, 255, 0.05)')
+ }
+ onMouseLeave={(e) =>
+ (e.currentTarget.style.background = 'var(--panel-bg)')
+ }
+ >
+
+ {user.email[0].toUpperCase()}
+
+
+ {user.email}
+
+
+
+ {userDropdownOpen && (
+
+
+
+ {t('loggedInAs', language)}
+
+
+ {user.email}
+
+
+ {onLogout && (
+
{
+ onLogout()
+ setUserDropdownOpen(false)
+ }}
+ className="w-full px-3 py-2 text-sm font-semibold transition-colors hover:opacity-80 text-center"
+ style={{
+ background: 'var(--binance-red-bg)',
+ color: 'var(--binance-red)',
+ }}
+ >
+ {t('exitLogin', language)}
+
+ )}
+
+ )}
+
+
+ ) : (
+ /* Show login/register buttons when not logged in and not on login/register pages */
+ currentPage !== 'login' &&
+ currentPage !== 'register' && (
+
+ )
+ )}
+
+ {/* Language Toggle - Always at the rightmost */}
+
+
setLanguageDropdownOpen(!languageDropdownOpen)}
+ className="flex items-center gap-2 px-3 py-2 rounded transition-colors"
+ style={{ color: 'var(--brand-light-gray)' }}
+ onMouseEnter={(e) =>
+ (e.currentTarget.style.background =
+ 'rgba(255, 255, 255, 0.05)')
+ }
+ onMouseLeave={(e) =>
+ (e.currentTarget.style.background = 'transparent')
+ }
+ >
+
+ {language === 'zh' ? '🇨🇳' : '🇺🇸'}
+
+
+
+ {languageDropdownOpen && (
+
+ {
+ onLanguageChange?.('zh')
+ setLanguageDropdownOpen(false)
+ }}
+ className={`w-full flex items-center gap-2 px-3 py-2 transition-colors ${
+ language === 'zh' ? '' : 'hover:opacity-80'
+ }`}
+ style={{
+ color: 'var(--brand-light-gray)',
+ background:
+ language === 'zh'
+ ? 'rgba(240, 185, 11, 0.1)'
+ : 'transparent',
+ }}
+ >
+ 🇨🇳
+ 中文
+
+ {
+ onLanguageChange?.('en')
+ setLanguageDropdownOpen(false)
+ }}
+ className={`w-full flex items-center gap-2 px-3 py-2 transition-colors ${
+ language === 'en' ? '' : 'hover:opacity-80'
+ }`}
+ style={{
+ color: 'var(--brand-light-gray)',
+ background:
+ language === 'en'
+ ? 'rgba(240, 185, 11, 0.1)'
+ : 'transparent',
+ }}
+ >
+ 🇺🇸
+ English
+
+
+ )}
+
+
+
setMobileMenuOpen(!mobileMenuOpen)}
+ className="md:hidden"
+ style={{ color: 'var(--brand-light-gray)' }}
+ whileTap={{ scale: 0.9 }}
+ >
+ {mobileMenuOpen ? (
+
+
+
+ {/* Mobile Menu */}
+
+
+ {/* New Navigation Tabs */}
+ {isLoggedIn ? (
+
{
+ console.log(
+ '移动端 实时 button clicked, onPageChange:',
+ onPageChange
+ )
+ onPageChange?.('competition')
+ setMobileMenuOpen(false)
+ }}
+ 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',
+ width: '100%',
+ textAlign: 'left',
+ }}
+ >
+ {/* Background for selected state */}
+ {currentPage === 'competition' && (
+
+ ) : (
+
+ {/* Background for selected state */}
+ {currentPage === 'competition' && (
+
+ )}
+ {/* Only show 配置 and 看板 when logged in */}
+ {isLoggedIn && (
+ <>
+
{
+ if (onPageChange) {
+ onPageChange('traders')
+ } else {
+ 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:
+ currentPage === 'traders'
+ ? 'var(--brand-yellow)'
+ : 'var(--brand-light-gray)',
+ padding: '12px 16px',
+ borderRadius: '8px',
+ position: 'relative',
+ width: '100%',
+ textAlign: 'left',
+ }}
+ >
+ {/* Background for selected state */}
+ {currentPage === 'traders' && (
+
+
{
+ if (onPageChange) {
+ onPageChange('trader')
+ } else {
+ 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' && (
+
+
{
+ if (onPageChange) {
+ onPageChange('faq')
+ } else {
+ 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' && (
+
+
+ )}
+
+ {/* Original Navigation Items - Only on home page */}
+ {isHomePage &&
+ [
+ { key: 'features', label: t('features', language) },
+ { key: 'howItWorks', label: t('howItWorks', language) },
+ { key: 'GitHub', label: 'GitHub' },
+ { key: 'community', label: t('community', language) },
+ ].map((item) => (
+
+ {item.label}
+
+ ))}
+
+ {/* Language Toggle */}
+
+
+
+ {t('language', language)}:
+
+
+
+ {
+ onLanguageChange?.('zh')
+ setMobileMenuOpen(false)
+ }}
+ className={`w-full flex items-center gap-3 px-3 py-2 rounded transition-colors ${
+ language === 'zh'
+ ? 'bg-yellow-500 text-black'
+ : 'text-gray-400 hover:text-white'
+ }`}
+ >
+ 🇨🇳
+ 中文
+
+ {
+ onLanguageChange?.('en')
+ setMobileMenuOpen(false)
+ }}
+ className={`w-full flex items-center gap-3 px-3 py-2 rounded transition-colors ${
+ language === 'en'
+ ? 'bg-yellow-500 text-black'
+ : 'text-gray-400 hover:text-white'
+ }`}
+ >
+ 🇺🇸
+ English
+
+
+
+
+ {/* User info and logout for mobile when logged in */}
+ {isLoggedIn && user && (
+
+
+
+ {user.email[0].toUpperCase()}
+
+
+
+ {t('loggedInAs', language)}
+
+
+ {user.email}
+
+
+
+ {onLogout && (
+
{
+ onLogout()
+ setMobileMenuOpen(false)
+ }}
+ className="w-full px-4 py-2 rounded text-sm font-semibold transition-colors text-center"
+ style={{
+ background: 'var(--binance-red-bg)',
+ color: 'var(--binance-red)',
+ }}
+ >
+ {t('exitLogin', language)}
+
+ )}
+
+ )}
+
+ {/* Show login/register buttons when not logged in and not on login/register pages */}
+ {!isLoggedIn &&
+ currentPage !== 'login' &&
+ currentPage !== 'register' && (
+
+ )}
+
+
+ )
+}
diff --git a/web/src/components/LoginPage.tsx b/web/src/components/LoginPage.tsx
index abf63959..e498d91d 100644
--- a/web/src/components/LoginPage.tsx
+++ b/web/src/components/LoginPage.tsx
@@ -1,14 +1,16 @@
import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
import { useLanguage } from '../contexts/LanguageContext'
import { t } from '../i18n/translations'
-import HeaderBar from './landing/HeaderBar'
import { Eye, EyeOff } from 'lucide-react'
import { Input } from './ui/input'
+import { toast } from 'sonner'
export function LoginPage() {
const { language } = useLanguage()
const { login, loginAdmin, verifyOTP } = useAuth()
+ const navigate = useNavigate()
const [step, setStep] = useState<'login' | 'otp'>('login')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
@@ -26,7 +28,9 @@ export function LoginPage() {
setLoading(true)
const result = await loginAdmin(adminPassword)
if (!result.success) {
- setError(result.message || t('loginFailed', language))
+ const msg = result.message || t('loginFailed', language)
+ setError(msg)
+ toast.error(msg)
}
setLoading(false)
}
@@ -44,7 +48,9 @@ export function LoginPage() {
setStep('otp')
}
} else {
- setError(result.message || t('loginFailed', language))
+ const msg = result.message || t('loginFailed', language)
+ setError(msg)
+ toast.error(msg)
}
setLoading(false)
@@ -58,7 +64,9 @@ export function LoginPage() {
const result = await verifyOTP(userID, otpCode)
if (!result.success) {
- setError(result.message || t('verificationFailed', language))
+ const msg = result.message || t('verificationFailed', language)
+ setError(msg)
+ toast.error(msg)
}
// 成功的话AuthContext会自动处理登录状态
@@ -66,286 +74,259 @@ export function LoginPage() {
}
return (
-
-
{}}
- isLoggedIn={false}
- isHomePage={false}
- currentPage="login"
- language={language}
- onLanguageChange={() => {}}
- onPageChange={(page) => {
- console.log('LoginPage onPageChange called with:', page)
- if (page === 'competition') {
- window.location.href = '/competition'
- }
- }}
- />
-
-
-
- {/* Logo */}
-
-
-
-
-
- 登录 NOFX
-
-
- {step === 'login' ? '请输入您的邮箱和密码' : '请输入两步验证码'}
-
+
+
+ {/* Logo */}
+
+
+
-
- {/* Login Form */}
-
- {error && (
-
- {error}
-
- )}
-
-
+ {adminMode ? (
+
)}
+
+ {/* Register Link */}
+ {!adminMode && (
+
+
+ 还没有账户？{' '}
+ navigate('/register')}
+ className="font-semibold hover:underline transition-colors"
+ style={{ color: 'var(--brand-yellow)' }}
+ >
+ 立即注册
+
+
+
+ )}
)
diff --git a/web/src/components/RegisterPage.tsx b/web/src/components/RegisterPage.tsx
index 4c1b6275..c7b1c451 100644
--- a/web/src/components/RegisterPage.tsx
+++ b/web/src/components/RegisterPage.tsx
@@ -1,9 +1,11 @@
import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
import { useLanguage } from '../contexts/LanguageContext'
import { t } from '../i18n/translations'
import { getSystemConfig } from '../lib/config'
-import HeaderBar from './landing/HeaderBar'
+import { toast } from 'sonner'
+import { copyWithToast } from '../lib/clipboard'
import { Eye, EyeOff } from 'lucide-react'
import { Input } from './ui/input'
import PasswordChecklist from 'react-password-checklist'
@@ -11,6 +13,7 @@ import PasswordChecklist from 'react-password-checklist'
export function RegisterPage() {
const { language } = useLanguage()
const { register, completeRegistration } = useAuth()
+ const navigate = useNavigate()
const [step, setStep] = useState<'register' | 'setup-otp' | 'verify-otp'>(
'register'
)
@@ -66,7 +69,9 @@ export function RegisterPage() {
setQrCodeURL(result.qrCodeURL || '')
setStep('setup-otp')
} else {
- setError(result.message || t('registrationFailed', language))
+ const msg = result.message || t('registrationFailed', language)
+ setError(msg)
+ toast.error(msg)
}
setLoading(false)
@@ -84,7 +89,9 @@ export function RegisterPage() {
const result = await completeRegistration(userID, otpCode)
if (!result.success) {
- setError(result.message || t('registrationFailed', language))
+ const msg = result.message || t('registrationFailed', language)
+ setError(msg)
+ toast.error(msg)
}
// 成功的话AuthContext会自动处理登录状态
@@ -92,141 +99,197 @@ export function RegisterPage() {
}
const copyToClipboard = (text: string) => {
- navigator.clipboard.writeText(text)
+ copyWithToast(text)
}
return (
-
-
{}}
- onPageChange={(page) => {
- console.log('RegisterPage onPageChange called with:', page)
- if (page === 'competition') {
- window.location.href = '/competition'
- }
- }}
- />
-
-
-
- {/* Logo */}
-
-
-
-
-
- {t('appTitle', language)}
-
-
- {step === 'register' && t('registerTitle', language)}
- {step === 'setup-otp' && t('setupTwoFactor', language)}
- {step === 'verify-otp' && t('verifyOTP', language)}
-
+
+
+ {/* Logo */}
+
+
+
+
+ {t('appTitle', language)}
+
+
+ {step === 'register' && t('registerTitle', language)}
+ {step === 'setup-otp' && t('setupTwoFactor', language)}
+ {step === 'verify-otp' && t('verifyOTP', language)}
+
+
- {/* Registration Form */}
-
- {step === 'register' && (
-
)
diff --git a/web/src/components/ResetPasswordPage.tsx b/web/src/components/ResetPasswordPage.tsx
index 6cf2cef5..2504c9c8 100644
--- a/web/src/components/ResetPasswordPage.tsx
+++ b/web/src/components/ResetPasswordPage.tsx
@@ -6,6 +6,7 @@ import { Header } from './Header'
import { ArrowLeft, KeyRound, Eye, EyeOff } from 'lucide-react'
import PasswordChecklist from 'react-password-checklist'
import { Input } from './ui/input'
+import { toast } from 'sonner'
export function ResetPasswordPage() {
const { language } = useLanguage()
@@ -38,13 +39,16 @@ export function ResetPasswordPage() {
if (result.success) {
setSuccess(true)
+ toast.success(t('resetPasswordSuccess', language) || '重置成功')
// 3秒后跳转到登录页面
setTimeout(() => {
window.history.pushState({}, '', '/login')
window.dispatchEvent(new PopStateEvent('popstate'))
}, 3000)
} else {
- setError(result.message || t('resetPasswordFailed', language))
+ const msg = result.message || t('resetPasswordFailed', language)
+ setError(msg)
+ toast.error(msg)
}
setLoading(false)
diff --git a/web/src/components/TraderConfigModal.tsx b/web/src/components/TraderConfigModal.tsx
index db343285..f0655213 100644
--- a/web/src/components/TraderConfigModal.tsx
+++ b/web/src/components/TraderConfigModal.tsx
@@ -2,6 +2,8 @@ import { useState, useEffect } from 'react'
import type { AIModel, Exchange, CreateTraderRequest } from '../types'
import { useLanguage } from '../contexts/LanguageContext'
import { t } from '../i18n/translations'
+import { toast } from 'sonner'
+import { Pencil, Plus, X as IconX } from 'lucide-react'
// 提取下划线后面的名称部分
function getShortName(fullName: string): string {
@@ -217,12 +219,11 @@ export function TraderConfigModal({
const currentBalance = data.total_equity || data.balance || 0
setFormData((prev) => ({ ...prev, initial_balance: currentBalance }))
-
- // 显示成功提示
- console.log('已获取当前余额:', currentBalance)
+ toast.success('已获取当前余额')
} catch (error) {
console.error('获取余额失败:', error)
setBalanceFetchError('获取余额失败，请检查网络连接')
+ toast.error('获取余额失败，请检查网络连接')
} finally {
setIsFetchingBalance(false)
}
@@ -249,7 +250,11 @@ export function TraderConfigModal({
initial_balance: formData.initial_balance,
scan_interval_minutes: formData.scan_interval_minutes,
}
- await onSave(saveData)
+ await toast.promise(onSave(saveData), {
+ loading: '正在保存…',
+ success: '保存成功',
+ error: '保存失败',
+ })
onClose()
} catch (error) {
console.error('保存失败:', error)
@@ -268,8 +273,12 @@ export function TraderConfigModal({
{/* Header */}
-
-
{isEditMode ? '✏️' : '➕'}
+
+ {isEditMode ? (
+
+ ) : (
+
+ )}
@@ -284,7 +293,7 @@ export function TraderConfigModal({
onClick={onClose}
className="w-8 h-8 rounded-lg text-[#848E9C] hover:text-[#EAECEF] hover:bg-[#2B3139] transition-colors flex items-center justify-center"
>
- ✕
+
diff --git a/web/src/components/TraderConfigViewModal.tsx b/web/src/components/TraderConfigViewModal.tsx
index febf115b..3df872fe 100644
--- a/web/src/components/TraderConfigViewModal.tsx
+++ b/web/src/components/TraderConfigViewModal.tsx
@@ -1,4 +1,5 @@
import { useState } from 'react'
+import { toast } from 'sonner'
import type { TraderConfigData } from '../types'
// 提取下划线后面的名称部分
@@ -27,8 +28,10 @@ export function TraderConfigViewModal({
await navigator.clipboard.writeText(text)
setCopiedField(fieldName)
setTimeout(() => setCopiedField(null), 2000)
+ toast.success('已复制到剪贴板')
} catch (error) {
console.error('Failed to copy:', error)
+ toast.error('复制失败，请手动复制')
}
}
diff --git a/web/src/components/TwoStageKeyModal.tsx b/web/src/components/TwoStageKeyModal.tsx
index 82d8a8f0..97e856dd 100644
--- a/web/src/components/TwoStageKeyModal.tsx
+++ b/web/src/components/TwoStageKeyModal.tsx
@@ -1,6 +1,7 @@
import { useEffect, useMemo, useRef, useState } from 'react'
import { createPortal } from 'react-dom'
import { t, type Language } from '../i18n/translations'
+import { toast } from 'sonner'
const DEFAULT_LENGTH = 64
@@ -99,12 +100,14 @@ export function TwoStageKeyModal({
...obfuscationLog,
`Stage 1: ${new Date().toISOString()} - Auto copied obfuscation`,
])
+ toast.success('已复制混淆字符串到剪贴板')
} catch {
setClipboardStatus('failed')
setObfuscationLog([
...obfuscationLog,
`Stage 1: ${new Date().toISOString()} - Auto copy failed, manual required`,
])
+ toast.error('复制失败，请手动复制混淆字符串')
}
} else {
setClipboardStatus('failed')
@@ -112,6 +115,7 @@ export function TwoStageKeyModal({
...obfuscationLog,
`Stage 1: ${new Date().toISOString()} - Clipboard API not available`,
])
+ toast('当前浏览器不支持自动复制，请手动复制')
}
setTimeout(() => {
diff --git a/web/src/components/faq/FAQLayout.tsx b/web/src/components/faq/FAQLayout.tsx
index b4388427..a2367fcf 100644
--- a/web/src/components/faq/FAQLayout.tsx
+++ b/web/src/components/faq/FAQLayout.tsx
@@ -1,5 +1,6 @@
import { useState, useMemo } from 'react'
import { HelpCircle } from 'lucide-react'
+import { Container } from '../Container'
import { t, type Language } from '../../i18n/translations'
import { FAQSearchBar } from './FAQSearchBar'
import { FAQSidebar } from './FAQSidebar'
@@ -57,7 +58,7 @@ export function FAQLayout({ language }: FAQLayoutProps) {
}
return (
-
+
{/* Page Header */}
@@ -176,6 +177,6 @@ export function FAQLayout({ language }: FAQLayoutProps) {
-
+
)
}
diff --git a/web/src/components/landing/HeaderBar.tsx b/web/src/components/landing/HeaderBar.tsx
deleted file mode 100644
index 527891c4..00000000
--- a/web/src/components/landing/HeaderBar.tsx
+++ /dev/null
@@ -1,932 +0,0 @@
-import { useState, useEffect, useRef } from 'react'
-import { motion } from 'framer-motion'
-import { Menu, X, ChevronDown } from 'lucide-react'
-import { t, type Language } from '../../i18n/translations'
-
-interface HeaderBarProps {
- onLoginClick?: () => void
- isLoggedIn?: boolean
- isHomePage?: boolean
- currentPage?: string
- language?: Language
- onLanguageChange?: (lang: Language) => void
- user?: { email: string } | null
- onLogout?: () => void
- onPageChange?: (page: string) => void
-}
-
-export default function HeaderBar({
- isLoggedIn = false,
- isHomePage = false,
- currentPage,
- language = 'zh' as Language,
- onLanguageChange,
- user,
- onLogout,
- onPageChange,
-}: HeaderBarProps) {
- const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
- const [languageDropdownOpen, setLanguageDropdownOpen] = useState(false)
- const [userDropdownOpen, setUserDropdownOpen] = useState(false)
- const dropdownRef = useRef
(null)
- const userDropdownRef = useRef(null)
-
- // Close dropdown when clicking outside
- useEffect(() => {
- function handleClickOutside(event: MouseEvent) {
- if (
- dropdownRef.current &&
- !dropdownRef.current.contains(event.target as Node)
- ) {
- setLanguageDropdownOpen(false)
- }
- if (
- userDropdownRef.current &&
- !userDropdownRef.current.contains(event.target as Node)
- ) {
- setUserDropdownOpen(false)
- }
- }
-
- document.addEventListener('mousedown', handleClickOutside)
- return () => {
- document.removeEventListener('mousedown', handleClickOutside)
- }
- }, [])
-
- return (
-
-
-
- {/* Logo */}
-
-
- NOFX
-
-
- Agentic Trading OS
-
-
-
- {/* Desktop Menu */}
-
- {/* Left Side - Navigation Tabs */}
-
- {isLoggedIn ? (
- // Main app navigation when logged in
- <>
-
{
- console.log(
- '实时 button clicked, onPageChange:',
- onPageChange
- )
- onPageChange?.('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' && (
-
-
-
{
- console.log(
- '配置 button clicked, onPageChange:',
- onPageChange
- )
- onPageChange?.('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' && (
-
-
-
{
- console.log(
- '看板 button clicked, onPageChange:',
- onPageChange
- )
- onPageChange?.('trader')
- }}
- 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' && (
-
-
-
{
- console.log(
- 'FAQ button clicked, onPageChange:',
- onPageChange
- )
- onPageChange?.('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' && (
-
-
- ) : (
- // Landing page navigation when not logged in
- <>
-
{
- 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' && (
-
-
-
{
- 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' && (
-
-
- )}
-
-
- {/* Right Side - Original Navigation Items and Login */}
-
- {/* Only show original navigation items on home page */}
- {isHomePage &&
- [
- { key: 'features', label: t('features', language) },
- { key: 'howItWorks', label: t('howItWorks', language) },
- { key: 'GitHub', label: 'GitHub' },
- { key: 'community', label: t('community', language) },
- ].map((item) => (
-
- {item.label}
-
- ))}
-
- {/* User Info and Actions */}
- {isLoggedIn && user ? (
-
- {/* User Info with Dropdown */}
-
-
setUserDropdownOpen(!userDropdownOpen)}
- className="flex items-center gap-2 px-3 py-2 rounded transition-colors"
- style={{
- background: 'var(--panel-bg)',
- border: '1px solid var(--panel-border)',
- }}
- onMouseEnter={(e) =>
- (e.currentTarget.style.background =
- 'rgba(255, 255, 255, 0.05)')
- }
- onMouseLeave={(e) =>
- (e.currentTarget.style.background = 'var(--panel-bg)')
- }
- >
-
- {user.email[0].toUpperCase()}
-
-
- {user.email}
-
-
-
- {userDropdownOpen && (
-
-
-
- {t('loggedInAs', language)}
-
-
- {user.email}
-
-
- {onLogout && (
-
{
- onLogout()
- setUserDropdownOpen(false)
- }}
- className="w-full px-3 py-2 text-sm font-semibold transition-colors hover:opacity-80 text-center"
- style={{
- background: 'var(--binance-red-bg)',
- color: 'var(--binance-red)',
- }}
- >
- {t('exitLogin', language)}
-
- )}
-
- )}
-
-
- ) : (
- /* Show login/register buttons when not logged in and not on login/register pages */
- currentPage !== 'login' &&
- currentPage !== 'register' && (
-
- )
- )}
-
- {/* Language Toggle - Always at the rightmost */}
-
-
setLanguageDropdownOpen(!languageDropdownOpen)}
- className="flex items-center gap-2 px-3 py-2 rounded transition-colors"
- style={{ color: 'var(--brand-light-gray)' }}
- onMouseEnter={(e) =>
- (e.currentTarget.style.background =
- 'rgba(255, 255, 255, 0.05)')
- }
- onMouseLeave={(e) =>
- (e.currentTarget.style.background = 'transparent')
- }
- >
-
- {language === 'zh' ? '🇨🇳' : '🇺🇸'}
-
-
-
- {languageDropdownOpen && (
-
- {
- onLanguageChange?.('zh')
- setLanguageDropdownOpen(false)
- }}
- className={`w-full flex items-center gap-2 px-3 py-2 transition-colors ${
- language === 'zh' ? '' : 'hover:opacity-80'
- }`}
- style={{
- color: 'var(--brand-light-gray)',
- background:
- language === 'zh'
- ? 'rgba(240, 185, 11, 0.1)'
- : 'transparent',
- }}
- >
- 🇨🇳
- 中文
-
- {
- onLanguageChange?.('en')
- setLanguageDropdownOpen(false)
- }}
- className={`w-full flex items-center gap-2 px-3 py-2 transition-colors ${
- language === 'en' ? '' : 'hover:opacity-80'
- }`}
- style={{
- color: 'var(--brand-light-gray)',
- background:
- language === 'en'
- ? 'rgba(240, 185, 11, 0.1)'
- : 'transparent',
- }}
- >
- 🇺🇸
- English
-
-
- )}
-
-
-
-
- {/* Mobile Menu Button */}
-
setMobileMenuOpen(!mobileMenuOpen)}
- className="md:hidden"
- style={{ color: 'var(--brand-light-gray)' }}
- whileTap={{ scale: 0.9 }}
- >
- {mobileMenuOpen ? (
-
-
-
-
- {/* New Navigation Tabs */}
- {isLoggedIn ? (
-
{
- console.log(
- '移动端 实时 button clicked, onPageChange:',
- onPageChange
- )
- onPageChange?.('competition')
- setMobileMenuOpen(false)
- }}
- 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',
- width: '100%',
- textAlign: 'left',
- }}
- >
- {/* Background for selected state */}
- {currentPage === 'competition' && (
-
- ) : (
-
- {/* Background for selected state */}
- {currentPage === 'competition' && (
-
- )}
- {/* Only show 配置 and 看板 when logged in */}
- {isLoggedIn && (
- <>
-
{
- console.log(
- '移动端 配置 button clicked, onPageChange:',
- onPageChange
- )
- onPageChange?.('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:
- currentPage === 'traders'
- ? 'var(--brand-yellow)'
- : 'var(--brand-light-gray)',
- padding: '12px 16px',
- borderRadius: '8px',
- position: 'relative',
- width: '100%',
- textAlign: 'left',
- }}
- >
- {/* Background for selected state */}
- {currentPage === 'traders' && (
-
-
{
- console.log(
- '移动端 看板 button clicked, onPageChange:',
- onPageChange
- )
- onPageChange?.('trader')
- 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' && (
-
-
{
- console.log(
- '移动端 FAQ button clicked, onPageChange:',
- onPageChange
- )
- onPageChange?.('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' && (
-
-
- )}
-
- {/* Original Navigation Items - Only on home page */}
- {isHomePage &&
- [
- { key: 'features', label: t('features', language) },
- { key: 'howItWorks', label: t('howItWorks', language) },
- { key: 'GitHub', label: 'GitHub' },
- { key: 'community', label: t('community', language) },
- ].map((item) => (
-
- {item.label}
-
- ))}
-
- {/* Language Toggle */}
-
-
-
- {t('language', language)}:
-
-
-
- {
- onLanguageChange?.('zh')
- setMobileMenuOpen(false)
- }}
- className={`w-full flex items-center gap-3 px-3 py-2 rounded transition-colors ${
- language === 'zh'
- ? 'bg-yellow-500 text-black'
- : 'text-gray-400 hover:text-white'
- }`}
- >
- 🇨🇳
- 中文
-
- {
- onLanguageChange?.('en')
- setMobileMenuOpen(false)
- }}
- className={`w-full flex items-center gap-3 px-3 py-2 rounded transition-colors ${
- language === 'en'
- ? 'bg-yellow-500 text-black'
- : 'text-gray-400 hover:text-white'
- }`}
- >
- 🇺🇸
- English
-
-
-
-
- {/* User info and logout for mobile when logged in */}
- {isLoggedIn && user && (
-
-
-
- {user.email[0].toUpperCase()}
-
-
-
- {t('loggedInAs', language)}
-
-
- {user.email}
-
-
-
- {onLogout && (
-
{
- onLogout()
- setMobileMenuOpen(false)
- }}
- className="w-full px-4 py-2 rounded text-sm font-semibold transition-colors text-center"
- style={{
- background: 'var(--binance-red-bg)',
- color: 'var(--binance-red)',
- }}
- >
- {t('exitLogin', language)}
-
- )}
-
- )}
-
- {/* Show login/register buttons when not logged in and not on login/register pages */}
- {!isLoggedIn &&
- currentPage !== 'login' &&
- currentPage !== 'register' && (
-
- )}
-
-
- )
-}
diff --git a/web/src/components/ui/alert-dialog.tsx b/web/src/components/ui/alert-dialog.tsx
new file mode 100644
index 00000000..75d9fe26
--- /dev/null
+++ b/web/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,142 @@
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import { cn } from '../../lib/cn'
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+AlertDialogHeader.displayName = 'AlertDialogHeader'
+
+const AlertDialogFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+AlertDialogFooter.displayName = 'AlertDialogFooter'
+
+const AlertDialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+ {/* Simple Header with Logo and Language Selector */}
+
+
+ {/* Logo */}
+
+ NOFX
+
+
+
+ {/* Language Selector */}
+
+ setLanguage(language === 'zh' ? 'en' : 'zh')}
+ className="px-3 py-1.5 rounded text-sm font-medium transition-colors"
+ style={{
+ background: '#1E2329',
+ border: '1px solid #2B3139',
+ color: '#EAECEF',
+ }}
+ >
+ {language === 'zh' ? 'English' : '中文'}
+
+
+
+
+
+ {/* Content with top padding to avoid overlap with fixed header */}
+
{children ||
+
+
{
+ // React Router handles navigation now
+ }}
+ />
+
+ {/* Main Content */}
+
+ {children ||
+
+ {/* Footer */}
+
+ )
+ | null = null
+
+export function setGlobalConfirm(
+ confirmFn: (options: ConfirmOptions & { message: string }) => Promise
+) {
+ globalConfirm = confirmFn
+}
+
+// 确认对话框函数，使用 shadcn AlertDialog
+export function confirmToast(
+ message: string,
+ options: ConfirmOptions = {}
+): Promise {
+ if (!globalConfirm) {
+ console.error('ConfirmDialogProvider not initialized')
+ return Promise.resolve(false)
+ }
+
+ return globalConfirm({
+ message,
+ ...options,
+ })
+}
+
+// 统一通知封装，避免组件直接依赖 sonner
+type Message = string | ReactNode
+
+function message(msg: Message, options?: Parameters[1]) {
+ return toast(msg as any, options)
+}
+
+function success(msg: Message, options?: Parameters[1]) {
+ return toast.success(msg as any, options)
+}
+
+function error(msg: Message, options?: Parameters[1]) {
+ return toast.error(msg as any, options)
+}
+
+function info(msg: Message, options?: Parameters[1]) {
+ return toast.info?.(msg as any, options) ?? toast(msg as any, options)
+}
+
+function warning(msg: Message, options?: Parameters[1]) {
+ return toast.warning?.(msg as any, options) ?? toast(msg as any, options)
+}
+
+function custom(
+ renderer: Parameters[0],
+ options?: Parameters[1]
+) {
+ return toast.custom(renderer, options)
+}
+
+function dismiss(id?: string | number) {
+ return toast.dismiss(id as any)
+}
+
+function promise(p: Promise | (() => Promise), msgs: any) {
+ return toast.promise(p as any, msgs as any)
+}
+
+export const notify = {
+ message,
+ success,
+ error,
+ info,
+ warning,
+ custom,
+ dismiss,
+ promise,
+}
+
+export default { confirmToast, notify }
diff --git a/web/src/lib/text.ts b/web/src/lib/text.ts
new file mode 100644
index 00000000..f8fb5487
--- /dev/null
+++ b/web/src/lib/text.ts
@@ -0,0 +1,28 @@
+/**
+ * 文本工具
+ *
+ * stripLeadingIcons: 去掉翻译文案或标题前面用于装饰的 Emoji/符号，
+ * 以便在组件里自行放置图标时不重复显示。
+ */
+
+/**
+ * 去掉开头的装饰性 Emoji/符号以及随后的分隔符（空格/冒号/点号等）。
+ */
+export function stripLeadingIcons(input: string | undefined | null): string {
+ if (!input) return ''
+ let s = String(input)
+
+ // 1) 去除常见的 Emoji/符号块（箭头、杂项符号、几何图形、表情等）
+ // 覆盖常见范围，兼容性好于使用 Unicode 属性类。
+ s = s.replace(
+ /^[\s\u2190-\u21FF\u2300-\u23FF\u2460-\u24FF\u25A0-\u25FF\u2600-\u27BF\u2B00-\u2BFF\u1F000-\u1FAFF]+/u,
+ ''
+ )
+
+ // 2) 去掉开头可能残留的分隔符（空格、连字符、冒号、居中点等）
+ s = s.replace(/^[\s\-:•·]+/, '')
+
+ return s.trim()
+}
+
+export default { stripLeadingIcons }
diff --git a/web/src/main.tsx b/web/src/main.tsx
index c4fc9bba..2bed5575 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -1,10 +1,26 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
+import { Toaster } from 'sonner'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
+
)
diff --git a/web/src/pages/FAQPage.tsx b/web/src/pages/FAQPage.tsx
index bd74f5c2..c766230b 100644
--- a/web/src/pages/FAQPage.tsx
+++ b/web/src/pages/FAQPage.tsx
@@ -1,17 +1,10 @@
-import HeaderBar from '../components/landing/HeaderBar'
import { FAQLayout } from '../components/faq/FAQLayout'
import { useLanguage } from '../contexts/LanguageContext'
-import { useAuth } from '../contexts/AuthContext'
-import { useSystemConfig } from '../hooks/useSystemConfig'
-import { t } from '../i18n/translations'
/**
* FAQ 页面
*
- * 这个页面只是组件的集合，负责：
- * - 组装 HeaderBar 和 FAQLayout
- * - 提供全局状态（语言、用户、系统配置）
- * - 处理页面级别的导航
+ * HeaderBar 和 Footer 现在由 MainLayout 提供
*
* 所有 FAQ 相关的逻辑都在子组件中：
* - FAQLayout: 整体布局和搜索逻辑
@@ -22,54 +15,7 @@ import { t } from '../i18n/translations'
* FAQ 数据配置在 data/faqData.ts
*/
export function FAQPage() {
- const { language, setLanguage } = useLanguage()
- const { user, logout } = useAuth()
- useSystemConfig() // Load system config but don't use it
+ const { language } = useLanguage()
- return (
-
-
{
- if (page === 'competition') {
- window.history.pushState({}, '', '/competition')
- window.location.href = '/competition'
- } else if (page === 'traders') {
- window.history.pushState({}, '', '/traders')
- window.location.href = '/traders'
- } else if (page === 'trader') {
- window.history.pushState({}, '', '/dashboard')
- window.location.href = '/dashboard'
- } else if (page === 'faq') {
- window.history.pushState({}, '', '/faq')
- window.location.href = '/faq'
- }
- }}
- />
-
- (
+ searchParams.get('trader') || undefined
+ )
+ const [lastUpdate, setLastUpdate] = useState('--:--:--')
+
+ // 获取trader列表（仅在用户登录时）
+ const { data: traders, error: tradersError } = useSWR(
+ user && token ? 'traders' : null,
+ api.getTraders,
+ {
+ refreshInterval: 10000,
+ shouldRetryOnError: false,
+ }
+ )
+
+ // 当获取到traders后，设置默认选中第一个
+ useEffect(() => {
+ if (traders && traders.length > 0 && !selectedTraderId) {
+ const firstTraderId = traders[0].trader_id
+ setSelectedTraderId(firstTraderId)
+ setSearchParams({ trader: firstTraderId })
+ }
+ }, [traders, selectedTraderId, setSearchParams])
+
+ // 更新URL参数
+ const handleTraderSelect = (traderId: string) => {
+ setSelectedTraderId(traderId)
+ setSearchParams({ trader: traderId })
+ }
+
+ // 如果在trader页面，获取该trader的数据
+ const { data: status } = useSWR(
+ selectedTraderId ? `status-${selectedTraderId}` : null,
+ () => api.getStatus(selectedTraderId),
+ {
+ refreshInterval: 15000,
+ revalidateOnFocus: false,
+ dedupingInterval: 10000,
+ }
+ )
+
+ const { data: account } = useSWR(
+ selectedTraderId ? `account-${selectedTraderId}` : null,
+ () => api.getAccount(selectedTraderId),
+ {
+ refreshInterval: 15000,
+ revalidateOnFocus: false,
+ dedupingInterval: 10000,
+ }
+ )
+
+ const { data: positions } = useSWR(
+ selectedTraderId ? `positions-${selectedTraderId}` : null,
+ () => api.getPositions(selectedTraderId),
+ {
+ refreshInterval: 15000,
+ revalidateOnFocus: false,
+ dedupingInterval: 10000,
+ }
+ )
+
+ const { data: decisions } = useSWR(
+ selectedTraderId ? `decisions/latest-${selectedTraderId}` : null,
+ () => api.getLatestDecisions(selectedTraderId),
+ {
+ refreshInterval: 30000,
+ revalidateOnFocus: false,
+ dedupingInterval: 20000,
+ }
+ )
+
+ const { data: stats } = useSWR(
+ selectedTraderId ? `statistics-${selectedTraderId}` : null,
+ () => api.getStatistics(selectedTraderId),
+ {
+ refreshInterval: 30000,
+ revalidateOnFocus: false,
+ dedupingInterval: 20000,
+ }
+ )
+
+ // Avoid unused variable warning
+ void stats
+
+ useEffect(() => {
+ if (account) {
+ const now = new Date().toLocaleTimeString()
+ setLastUpdate(now)
+ }
+ }, [account])
+
+ const selectedTrader = traders?.find((t) => t.trader_id === selectedTraderId)
+
+ // If API failed with error, show empty state
+ if (tradersError) {
+ return (
+
+
+
+
+ {t('dashboardEmptyTitle', language)}
+
+
+ {t('dashboardEmptyDescription', language)}
+
+
navigate('/traders')}
+ className="px-6 py-3 rounded-lg font-semibold transition-all hover:scale-105 active:scale-95"
+ style={{
+ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)',
+ color: '#0B0E11',
+ boxShadow: '0 4px 12px rgba(240, 185, 11, 0.3)',
+ }}
+ >
+ {t('goToTradersPage', language)}
+
+
+
+
+
+
+ {t('dashboardEmptyTitle', language)}
+
+
+ {t('dashboardEmptyDescription', language)}
+
+
navigate('/traders')}
+ className="px-6 py-3 rounded-lg font-semibold transition-all hover:scale-105 active:scale-95"
+ style={{
+ background: 'linear-gradient(135deg, #F0B90B 0%, #FCD535 100%)',
+ color: '#0B0E11',
+ boxShadow: '0 4px 12px rgba(240, 185, 11, 0.3)',
+ }}
+ >
+ {t('goToTradersPage', language)}
+
+
+
+
+
+ {[1, 2, 3, 4].map((i) => (
+
+ ))}
+
+
+
+ {/* Trader Header */}
+
+
+
+
+
+ {selectedTrader.trader_name}
+
+
+ {/* Trader Selector */}
+ {traders && traders.length > 0 && (
+
+
+ {t('switchTrader', language)}:
+
+ handleTraderSelect(e.target.value)}
+ className="rounded px-3 py-2 text-sm font-medium cursor-pointer transition-colors"
+ style={{
+ background: '#1E2329',
+ border: '1px solid #2B3139',
+ color: '#EAECEF',
+ }}
+ >
+ {traders.map((trader) => (
+
+ {trader.trader_name}
+
+ ))}
+
+
+ )}
+
+
+
+ AI Model:{' '}
+
+ {getModelDisplayName(
+ selectedTrader.ai_model.split('_').pop() ||
+ selectedTrader.ai_model
+ )}
+
+
+ {status && (
+ <>
+ •
+ Cycles: {status.call_count}
+ •
+ Runtime: {status.runtime_minutes} min
+
+ )}
+
+
+
+ {/* Debug Info */}
+ {account && (
+
+
+
+
+ )}
+
+ {/* Account Overview */}
+
+ 0}
+ />
+ = 0 ? '+' : ''}${account?.total_pnl?.toFixed(2) || '0.00'} USDT`}
+ change={account?.total_pnl_pct || 0}
+ positive={(account?.total_pnl ?? 0) >= 0}
+ />
+
+
+ {/* 主要内容区：左右分屏 */}
+
+ {/* 左侧：图表 + 持仓 */}
+
+ {/* Equity Chart */}
+
+
+
+ {/* Current Positions */}
+
+
+
+
+ {positions && positions.length > 0 && (
+
+ {positions.length} {t('active', language)}
+
+ )}
+
+ {positions && positions.length > 0 ? (
+
+
+
+
+
+ {t('symbol', language)}
+
+
+ {t('side', language)}
+
+
+ {t('entryPrice', language)}
+
+
+ {t('markPrice', language)}
+
+
+ {t('quantity', language)}
+
+
+ {t('positionValue', language)}
+
+
+ {t('leverage', language)}
+
+
+ {t('unrealizedPnL', language)}
+
+
+ {t('liqPrice', language)}
+
+
+
+
+ {positions.map((pos, i) => (
+
+
+ {pos.symbol}
+
+
+
+ {t(
+ pos.side === 'long' ? 'long' : 'short',
+ language
+ )}
+
+
+
+ {pos.entry_price.toFixed(4)}
+
+
+ {pos.mark_price.toFixed(4)}
+
+
+ {pos.quantity.toFixed(4)}
+
+
+ {(pos.quantity * pos.mark_price).toFixed(2)} USDT
+
+
+ {pos.leverage}x
+
+
+ = 0 ? '#0ECB81' : '#F6465D',
+ fontWeight: 'bold',
+ }}
+ >
+ {pos.unrealized_pnl >= 0 ? '+' : ''}
+ {pos.unrealized_pnl.toFixed(2)} (
+ {pos.unrealized_pnl_pct.toFixed(2)}%)
+
+
+
+ {pos.liquidation_price.toFixed(4)}
+
+
+ ))}
+
+
+
+ ) : (
+
+
+
+ {t('noPositions', language)}
+
+
+ {t('noActivePositions', language)}
+
+
+ )}
+
+
+
+ {/* 右侧：Recent Decisions */}
+
+
+
+
+
+
+ {t('recentDecisions', language)}
+
+ {decisions && decisions.length > 0 && (
+
+ {t('lastCycles', language, { count: decisions.length })}
+
+ )}
+
+
+
+
+ {decisions && decisions.length > 0 ? (
+ decisions.map((decision, i) => (
+
+ ))
+ ) : (
+
+
+
+
+ {t('noDecisionsYet', language)}
+
+
+ {t('aiDecisionsWillAppear', language)}
+
+
+ )}
+
+
+
+
+ {/* AI Learning & Performance Analysis */}
+
+
+
+ {title}
+
+
+ {value}
+
+ {change !== undefined && (
+
+
+ {positive ? '▲' : '▼'} {positive ? '+' : ''}
+ {change.toFixed(2)}%
+
+
+ )}
+ {subtitle && (
+
+ {subtitle}
+
+ )}
+
+ {/* Header */}
+
+
+
+ {t('cycle', language)} #{decision.cycle_number}
+
+
+ {new Date(decision.timestamp).toLocaleString()}
+
+
+
+ {t(decision.success ? 'success' : 'failed', language)}
+
+
+
+ {/* Input Prompt - Collapsible */}
+ {decision.input_prompt && (
+
+
setShowInputPrompt(!showInputPrompt)}
+ className="flex items-center gap-2 text-sm transition-colors"
+ style={{ color: '#60a5fa' }}
+ >
+
+
+
+ {showInputPrompt
+ ? t('collapse', language)
+ : t('expand', language)}
+
+
+ {showInputPrompt && (
+
+ {decision.input_prompt}
+
+ )}
+
+ )}
+
+ {/* AI Chain of Thought - Collapsible */}
+ {decision.cot_trace && (
+
+
setShowCoT(!showCoT)}
+ className="flex items-center gap-2 text-sm transition-colors"
+ style={{ color: '#F0B90B' }}
+ >
+
+
+
+ {showCoT ? t('collapse', language) : t('expand', language)}
+
+
+ {showCoT && (
+
+ {decision.cot_trace}
+
+ )}
+
+ )}
+
+ {/* Decisions Actions */}
+ {decision.decisions && decision.decisions.length > 0 && (
+
+ {decision.decisions.map((action, j) => (
+
+
+ {action.symbol}
+
+
+ {action.action}
+
+ {action.leverage > 0 && (
+ {action.leverage}x
+ )}
+ {action.price > 0 && (
+
+ @{action.price.toFixed(4)}
+
+ )}
+
+ {action.success ? (
+
+ {action.error && (
+
+ {action.error}
+
+ )}
+
+ ))}
+
+ )}
+
+ {/* Account State Summary */}
+ {decision.account_state && (
+
+
+ 净值: {decision.account_state.total_balance.toFixed(2)} USDT
+
+
+ 可用: {decision.account_state.available_balance.toFixed(2)} USDT
+
+
+ 保证金率: {decision.account_state.margin_used_pct.toFixed(1)}%
+
+ 持仓: {decision.account_state.position_count}
+
+ {t('candidateCoins', language)}:{' '}
+ {decision.candidate_coins?.length || 0}
+
+
+ )}
+
+ {/* Candidate Coins Warning */}
+ {decision.candidate_coins && decision.candidate_coins.length === 0 && (
+
+
+
+
+ {t('candidateCoinsZeroWarning', language)}
+
+
+
{t('possibleReasons', language)}
+
+ {t('coinPoolApiNotConfigured', language)}
+ {t('apiConnectionTimeout', language)}
+ {t('noCustomCoinsAndApiFailed', language)}
+
+
+ {t('solutions', language)}
+
+
+ {t('setCustomCoinsInConfig', language)}
+ {t('orConfigureCorrectApiUrl', language)}
+ {t('orDisableCoinPoolOptions', language)}
+
+
+
+
+ )}
+
+ {/* Execution Logs */}
+ {decision.execution_log && decision.execution_log.length > 0 && (
+
+ {decision.execution_log.map((log, k) => (
+
+ {log}
+
+ ))}
+
+ )}
+
+ {/* Error Message */}
+ {decision.error_message && (
+
+
+ )}
+
+