-
-
- {points}
-
+
+ {isLoading ? (
+ <>
+
+
+ ...
+
+
+ ) : error ? (
+ <>
+
+
+ --
+
+
+ ) : (
+ <>
+
+
+ {points}
+
+
+ )}
- {/* 头像区域 - 重叠在积分显示上 */}
-
+ {/* 头像区域 - 重叠在积分显示上，确保完全可见 */}
+
{children}
diff --git a/react/src/components/auth/UserMenu.tsx b/react/src/components/auth/UserMenu.tsx
index 3126f751f..8cc6c98a0 100644
--- a/react/src/components/auth/UserMenu.tsx
+++ b/react/src/components/auth/UserMenu.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
import { useTranslation } from 'react-i18next'
import { useAuth } from '@/contexts/AuthContext'
-import { useConfigs, useRefreshModels } from '@/contexts/configs'
+import { useConfigs } from '@/contexts/configs'
+import { useNavigate, useLocation } from '@tanstack/react-router'
import { BASE_API_URL } from '@/constants'
import { Button } from '@/components/ui/button'
import {
@@ -14,67 +14,258 @@ import {
} from '@/components/ui/dropdown-menu'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { logout } from '@/api/auth'
-import { PointsDisplay } from './PointsDisplay'
+import { useBalance } from '@/hooks/use-balance'
+import { useUserInfo } from '@/hooks/use-user-info'
+import { useEffect, useState, useCallback } from 'react'
+import { LogOut, Crown, Gift } from 'lucide-react'
+import { InviteDialog } from '@/components/invite/InviteDialog'
+
+// 🆕 Helper function to format level display with i18n support
+const formatLevelDisplay = (level: string, t: any): { name: string, period: string, isMax: boolean } => {
+ if (!level || level === 'free') {
+ return { name: t('common:auth.levels.free'), period: '', isMax: false }
+ }
+
+ // 解析新的level格式：base_monthly, pro_yearly等
+ const parts = level.split('_')
+ if (parts.length !== 2) {
+ // 兼容旧格式
+ const levelKey = level as 'base' | 'pro' | 'max'
+ return {
+ name: t(`common:auth.levels.${levelKey}`, { defaultValue: level }),
+ period: '',
+ isMax: level === 'max'
+ }
+ }
+
+ const [planType, billingPeriod] = parts
+
+ return {
+ name: t(`common:auth.levels.${planType}`, { defaultValue: planType }),
+ period: t(`common:auth.levels.${billingPeriod}`, { defaultValue: billingPeriod }),
+ isMax: planType === 'max'
+ }
+}
export function UserMenu() {
const { authStatus, refreshAuth } = useAuth()
const { setShowLoginDialog } = useConfigs()
- const refreshModels = useRefreshModels()
const { t } = useTranslation()
+ const { balance, isLoading: balanceLoading, error: balanceError } = useBalance()
+ const { userInfo, currentLevel, isLoggedIn: userInfoLoggedIn, isLoading: userInfoLoading, refreshUserInfo } = useUserInfo()
+ const navigate = useNavigate()
+ const location = useLocation()
+ const [showInviteDialog, setShowInviteDialog] = useState(false)
+
+ // 🎯 用户菜单打开时主动刷新用户数据，确保信息是最新的
+ const handleMenuOpen = useCallback(() => {
+ console.log('👤 UserMenu: 菜单打开，主动刷新用户数据...')
+ // 同时刷新认证状态和用户信息
+ refreshAuth().catch(error => {
+ console.error('❌ UserMenu: 刷新认证状态失败:', error)
+ })
+ refreshUserInfo().catch(error => {
+ console.error('❌ UserMenu: 刷新用户信息失败:', error)
+ })
+ }, [refreshAuth, refreshUserInfo])
+
+ // 计算积分显示
+ const points = Math.max(0, Math.floor(parseFloat(balance) * 100))
+
+ // 🎯 组件加载时主动刷新一次用户数据，确保等级信息最新
+ useEffect(() => {
+ if (authStatus.is_logged_in && authStatus.user_info) {
+ console.log('👤 UserMenu: 组件加载，主动刷新用户数据确保等级最新...')
+ refreshAuth().catch(error => {
+ console.error('❌ UserMenu: 初始刷新认证状态失败:', error)
+ })
+ }
+ }, []) // 只在组件加载时执行一次
+
+ // 调试状态信息
+ useEffect(() => {
+ console.log('👤 UserMenu 状态信息:', {
+ // AuthContext数据
+ authIsLoggedIn: authStatus.is_logged_in,
+ authUserLevel: authStatus.user_info?.level,
+ // useUserInfo数据
+ userInfoLoggedIn: userInfoLoggedIn,
+ currentLevel: currentLevel,
+ userInfoLoading: userInfoLoading,
+ points,
+ })
+ }, [authStatus, userInfoLoggedIn, currentLevel, userInfoLoading, points])
const handleLogout = async () => {
- await logout()
- await refreshAuth()
- // Refresh models list after logout and config update
- refreshModels()
+ console.log('🚪 UserMenu: Starting logout...')
+ try {
+ // 🚀 调用优化后的logout函数
+ // 它会：1.调用后端API 2.清理前端数据 3.通知其他标签页
+ await logout()
+
+ // 🏠 logout成功后，导航到首页
+ console.log('🏠 UserMenu: Navigating to homepage...')
+ navigate({ to: '/' })
+ } catch (error) {
+ console.error('❌ UserMenu logout failed:', error)
+ // 即使出错，也尝试导航到首页
+ console.log('🏠 UserMenu: Fallback - navigating to homepage...')
+ navigate({ to: '/' })
+ }
}
- // 如果用户已登录，显示用户菜单
- if (authStatus.is_logged_in && authStatus.user_info) {
- const { username, image_url } = authStatus.user_info
+ // 🎯 智能判断登录状态：优先使用userInfo的数据，回退到authStatus
+ const isLoggedIn = userInfoLoggedIn || authStatus.is_logged_in
+ const hasUserInfo = (userInfo?.user_info && userInfo.is_logged_in) || authStatus.user_info
+
+ // 🚨 检查是否在logout过程中，如果是则强制显示Login按钮
+ const isLoggingOut = sessionStorage.getItem('is_logging_out') === 'true' ||
+ sessionStorage.getItem('force_logout') === 'true'
+
+ // 如果用户已登录且不在logout过程中，显示用户菜单
+ if (isLoggedIn && hasUserInfo && !isLoggingOut) {
+ // 🎯 智能合并用户信息：userInfo提供level，AuthContext提供完整用户信息
+ const authUserInfo = authStatus.user_info
+ const apiUserInfo = userInfo?.user_info
+
+ // 🔧 优先使用AuthContext的username和image_url，因为API接口没有返回这些字段
+ const username = authUserInfo?.username || apiUserInfo?.email?.split('@')[0] || 'User'
+ const image_url = authUserInfo?.image_url
+ const email = apiUserInfo?.email || authUserInfo?.email
+ const level = currentLevel || authUserInfo?.level || 'free'
const initials = username ? username.substring(0, 2).toUpperCase() : 'U'
+
+ // 🔍 调试头像信息
+ console.log('🔍 UserMenu: 头像信息调试:', {
+ authUserInfo,
+ apiUserInfo,
+ finalUsername: username,
+ finalImageUrl: image_url,
+ finalEmail: email,
+ finalLevel: level
+ })
+
+ // 🔍 调试：显示实际使用的level值
+ console.log('🔍 UserMenu: 最终使用的用户等级:', {
+ currentLevel: currentLevel,
+ authLevel: authStatus.user_info?.level,
+ finalLevel: level,
+ source: currentLevel ? 'useUserInfo' : 'AuthContext'
+ })
+
+ // 🆕 格式化用户等级显示
+ const levelInfo = formatLevelDisplay(level, t)
+ console.log('🔍 UserMenu: 格式化结果:', levelInfo)
+
return (
-
-
-
-
-
- {t('common:auth.myAccount')}
- {username}
-
- {
- const billingUrl = `${BASE_API_URL}/billing`
- if (window.electronAPI?.openBrowserUrl) {
- window.electronAPI.openBrowserUrl(billingUrl)
- } else {
- window.open(billingUrl, '_blank')
- }
- }}
- >
- {t('common:auth.recharge')}
-
-
-
- {t('common:auth.logout')}
-
-
-
+
+
+
+ {/* User Profile Header */}
+
+
+
+
+ {initials}
+
+
+
+ {username}
+
+
+ {email || 'No email provided'}
+
+ {/* 🆕 显示用户计划信息 */}
+
+
+ {levelInfo.name}
+
+ {levelInfo.period && (
+
+ ({levelInfo.period})
+
+ )}
+
+
+
+
+
+
+
+ {/* Credits 显示 */}
+
+
+
{t('common:auth.currentPoints')}
+
+
+ {balanceLoading ? '...' : balanceError ? '--' : points}
+
+ {t('common:auth.left')}
+
+
+
+ {/* 邀请码 */}
+
setShowInviteDialog(true)}
+ className="px-3 py-2 cursor-pointer hover:bg-white/40 transition-colors text-slate-700 hover:text-slate-800"
+ >
+
+
+ {t('common:auth.inviteCode')}
+
+
+
+ {/* 退出 */}
+
+
+
+ {t('common:auth.logout')}
+
+
+
+
+
+ {/* 邀请码弹窗 - 移到外部避免与DropdownMenu冲突 */}
+
+
+
+
)
}
- // 未登录状态，显示登录按钮
+ // 未登录状态，检查是否在邀请页面
+ const isInvitePage = location.pathname.startsWith('/join/')
+
return (
)
}
diff --git a/react/src/components/canvas/CanvasExcali.tsx b/react/src/components/canvas/CanvasExcali.tsx
index 50c77899c..ad3addb11 100644
--- a/react/src/components/canvas/CanvasExcali.tsx
+++ b/react/src/components/canvas/CanvasExcali.tsx
@@ -409,13 +409,23 @@ const CanvasExcali: React.FC
= ({
initialData={() => {
const data = initialData
console.log('👇initialData', data)
- if (data?.appState) {
- data.appState = {
- ...data.appState,
- collaborators: undefined!,
- }
+
+ // 🎨 设置自定义背景色 - 与蓝色渐变主题呼应
+ // 颜色选项：
+ // '#fafbff' - 非常淡的蓝白色（推荐，与主题完美呼应）
+ // '#f8faff' - 稍蓝一点的版本（更明显的蓝色调）
+ // '#fbfcff' - 极淡版本（几乎白色但保持蓝色调）
+ // '#ffffff' - 经典纯白色（如需回到原始效果）
+ const customAppState = {
+ ...(data?.appState || {}),
+ collaborators: undefined!,
+ viewBackgroundColor: '#fafbff', // 当前使用：非常淡的蓝白色
}
- return data || null
+
+ return {
+ ...data,
+ appState: customAppState,
+ } || null
}}
renderEmbeddable={renderEmbeddable}
// Allow all URLs for embeddable content
diff --git a/react/src/components/canvas/CanvasHeader.tsx b/react/src/components/canvas/CanvasHeader.tsx
index 7d71d57e1..71498549c 100644
--- a/react/src/components/canvas/CanvasHeader.tsx
+++ b/react/src/components/canvas/CanvasHeader.tsx
@@ -1,5 +1,4 @@
import { Input } from '@/components/ui/input'
-import CanvasExport from './CanvasExport'
import TopMenu from '../TopMenu'
type CanvasHeaderProps = {
@@ -18,14 +17,15 @@ const CanvasHeader: React.FC = ({
return (
onNameChange(e.target.value)}
- onBlur={onNameSave}
- />
+
+ onNameChange(e.target.value)}
+ onBlur={onNameSave}
+ />
+
}
- right={}
/>
)
}
diff --git a/react/src/components/canvas/ChatPanelHeader.tsx b/react/src/components/canvas/ChatPanelHeader.tsx
new file mode 100644
index 000000000..093d13a8c
--- /dev/null
+++ b/react/src/components/canvas/ChatPanelHeader.tsx
@@ -0,0 +1,82 @@
+import { Button } from '@/components/ui/button'
+import { SessionHistoryDropdown } from './SessionHistoryDropdown'
+import { EditableTitle } from './EditableTitle'
+import { Session } from '@/types/types'
+import { Plus, Minimize2 } from 'lucide-react'
+import { getSessionDisplayName } from '@/utils/sessionUtils'
+
+interface ChatPanelHeaderProps {
+ sessionList: Session[]
+ currentSessionId: string
+ onClose: () => void
+ onNewSession: () => void
+ onSessionSelect: (sessionId: string) => void
+ onSessionNameChange?: (sessionId: string, newName: string) => void
+}
+
+export function ChatPanelHeader({
+ sessionList,
+ currentSessionId,
+ onClose,
+ onNewSession,
+ onSessionSelect,
+ onSessionNameChange
+}: ChatPanelHeaderProps) {
+ // 获取当前session
+ const currentSession = sessionList.find(session => session.id === currentSessionId)
+ const sessionName = getSessionDisplayName(currentSession, sessionList)
+
+ // 处理session名称变更
+ const handleSessionNameSave = (newName: string) => {
+ if (onSessionNameChange && currentSessionId) {
+ onSessionNameChange(currentSessionId, newName)
+ }
+ }
+ return (
+
+ {/* 左侧：Session名称 */}
+
+
+
+
+ {/* 右侧：功能按钮 */}
+
+ {/* 新建按钮 */}
+
+
+ {/* 历史会话下拉菜单 */}
+
+
+ {/* Hide Chat按钮 */}
+
+
+
+ {title || defaultPlaceholder}
+
+ )
+}
\ No newline at end of file
diff --git a/react/src/components/canvas/FloatingChatPanel.tsx b/react/src/components/canvas/FloatingChatPanel.tsx
new file mode 100644
index 000000000..cec5b1d49
--- /dev/null
+++ b/react/src/components/canvas/FloatingChatPanel.tsx
@@ -0,0 +1,132 @@
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import ChatInterface from '@/components/chat/Chat'
+import { ChatPanelHeader } from './ChatPanelHeader'
+import { Session } from '@/types/types'
+import { MessageCircle, X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useNavigate } from '@tanstack/react-router'
+
+interface FloatingChatPanelProps {
+ canvasId: string
+ sessionList: Session[]
+ setSessionList: (sessions: Session[]) => void
+ sessionId: string
+ onNewSession?: () => void
+ onSessionNameChange?: (sessionId: string, newName: string) => void
+}
+
+export function FloatingChatPanel({
+ canvasId,
+ sessionList,
+ setSessionList,
+ sessionId,
+ onNewSession,
+ onSessionNameChange,
+}: FloatingChatPanelProps) {
+ const [isOpen, setIsOpen] = useState(true)
+ const navigate = useNavigate()
+
+ // 新建会话 - 现在直接调用传入的回调
+ const handleNewSession = () => {
+ onNewSession?.()
+ }
+
+ // 切换会话
+ const handleSessionSelect = (newSessionId: string) => {
+ // 跳转到指定会话
+ navigate({
+ to: '/canvas/$id',
+ params: { id: canvasId },
+ search: { sessionId: newSessionId }
+ })
+ }
+
+ return (
+ <>
+ {/* 聊天切换按钮 - 右侧中间位置，移动端友好 */}
+ {!isOpen && (
+
+
+
+ )}
+
+ {/* 浮动聊天窗口 - 只在桌面端显示，底部留出空间 */}
+
+
+ {/* 功能栏 */}
+
setIsOpen(false)}
+ onNewSession={handleNewSession}
+ onSessionSelect={handleSessionSelect}
+ onSessionNameChange={onSessionNameChange}
+ />
+
+ {/* 聊天界面 */}
+
+
+
+
+
+ {/* 移动端功能栏 */}
+
setIsOpen(false)}
+ onNewSession={handleNewSession}
+ onSessionSelect={handleSessionSelect}
+ onSessionNameChange={onSessionNameChange}
+ />
+
+ {/* 移动端聊天界面 */}
+
+
+
+
+
+
+
+
+
+ navigate({ to: '/' })}
+ className="flex items-center gap-3 cursor-pointer hover:bg-white/60 transition-colors"
+ >
+
+ Home
+
+
+ navigate({ to: '/templates' })}
+ className="flex items-center gap-3 cursor-pointer hover:bg-white/60 transition-colors"
+ >
+
+ Templates
+
+
+
+
+
+
+ New Project
+
+
+
+
+ Delete Project
+
+
+
+
+
+
+ {/* Logo按钮 */}
+
+
+
+
+
+ navigate({ to: '/' })}
+ className="flex items-center gap-3 cursor-pointer hover:bg-white/60"
+ >
+
+ {t('canvas:menu.home')}
+
+
+ navigate({ to: '/templates' })}
+ className="flex items-center gap-3 cursor-pointer hover:bg-white/60"
+ >
+
+ {t('canvas:menu.templates')}
+
+
+
+
+
+
+ {isCreating ? t('canvas:messages.creating') : t('canvas:menu.newProject')}
+
+
+
+
+ {isDeleting ? t('canvas:messages.deleting') : t('canvas:menu.deleteProject')}
+
+
+
+
+
+ {/* Project名称编辑区域 */}
+
+ {isEditing ? (
+
{
+ setTempName(e.target.value)
+ // 🚀 移除实时更新，仅在本地更新tempName，避免触发Canvas重新渲染
+ }}
+ onBlur={handleSaveEdit}
+ onKeyDown={handleKeyDown}
+ className="h-7 md:h-8 text-sm md:text-lg font-medium bg-white/90 border-gray-300 focus:border-gray-500 rounded-md"
+ placeholder="输入项目名称..."
+ />
+ ) : (
+
+
+ {projectName || '未命名项目'}
+ {isSaving && (保存中...)}
+
+
+
+ )}
+
+
+
+ {/* 项目删除确认对话框 */}
+
setShowDeleteDialog(false)}
+ onConfirm={handleConfirmDelete}
+ isDeleting={isDeleting}
+ projectName={projectName}
+ />
+
+
open && handleMenuOpen()}>
+
+
+
+
+ {/* User Profile Header */}
+
+
+
+
+ {initials}
+
+
+
+ {username}
+
+
+ {email || 'No email provided'}
+
+ {/* 🆕 显示用户计划信息 */}
+
+
+ {levelInfo.name}
+
+ {levelInfo.period && (
+
+ ({levelInfo.period})
+
+ )}
+
+
+
+
+
+
+
+ {/* Credits 显示 */}
+
+
+
{t('common:auth.currentPoints')}
+
+
+ {balanceLoading ? '...' : balanceError ? '--' : points}
+
+ {t('common:auth.left')}
+
+
+
+ {/* 邀请码 */}
+
setShowInviteDialog(true)}
+ className="px-3 py-2 cursor-pointer hover:bg-white/40 transition-colors text-slate-700 hover:text-slate-800"
+ >
+
+
+ {t('common:auth.inviteCode')}
+
+
+
+ {/* 退出 */}
+
+
+
+ {t('common:auth.logout')}
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/react/src/components/canvas/ProjectDeleteDialog.tsx b/react/src/components/canvas/ProjectDeleteDialog.tsx
new file mode 100644
index 000000000..6699026c7
--- /dev/null
+++ b/react/src/components/canvas/ProjectDeleteDialog.tsx
@@ -0,0 +1,99 @@
+import CommonDialogContent from '@/components/common/DialogContent'
+import { Button } from '@/components/ui/button'
+import {
+ Dialog,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from '@/components/ui/dialog'
+import { AlertTriangle, Trash2 } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+type ProjectDeleteDialogProps = {
+ isOpen: boolean
+ onClose: () => void
+ onConfirm: () => void
+ isDeleting?: boolean
+ projectName?: string
+}
+
+const ProjectDeleteDialog: React.FC = ({
+ isOpen,
+ onClose,
+ onConfirm,
+ isDeleting = false,
+ projectName
+}) => {
+ const { t } = useTranslation()
+
+ const handleConfirm = () => {
+ onConfirm()
+ onClose()
+ }
+
+ return (
+
+ )
+}
+
+export default ProjectDeleteDialog
\ No newline at end of file
diff --git a/react/src/components/canvas/SessionHistoryDropdown.tsx b/react/src/components/canvas/SessionHistoryDropdown.tsx
new file mode 100644
index 000000000..8364c5c6b
--- /dev/null
+++ b/react/src/components/canvas/SessionHistoryDropdown.tsx
@@ -0,0 +1,112 @@
+import { Button } from '@/components/ui/button'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Session } from '@/types/types'
+import { History, MessageSquare, Clock, Plus } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { getSessionDisplayName } from '@/utils/sessionUtils'
+import { useLanguage } from '@/hooks/use-language'
+
+interface SessionHistoryDropdownProps {
+ sessionList: Session[]
+ currentSessionId: string
+ onSessionSelect: (sessionId: string) => void
+ onNewSession: () => void
+}
+
+export function SessionHistoryDropdown({
+ sessionList,
+ currentSessionId,
+ onSessionSelect,
+ onNewSession
+}: SessionHistoryDropdownProps) {
+ const { t } = useTranslation(['chat', 'common'])
+ const { currentLanguage } = useLanguage()
+
+ // 格式化创建时间
+ const formatCreatedTime = (session: Session) => {
+ try {
+ const date = new Date(session.created_at)
+ return date.toLocaleDateString(currentLanguage === 'zh-CN' ? 'zh-CN' : 'en-US', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit'
+ })
+ } catch {
+ return ''
+ }
+ }
+
+ // 排序会话：按创建时间倒序
+ const sortedSessions = [...sessionList].sort((a, b) => {
+ const timeA = new Date(a.created_at).getTime()
+ const timeB = new Date(b.created_at).getTime()
+ return timeB - timeA
+ })
+
+ return (
+
+
+
+
+
+ {/* Header */}
+
+
{t('chat:sessionHistory.historyTitle')}
+
+
+ {/* Session List */}
+
+ {sortedSessions.length > 0 ? (
+ sortedSessions.map((session, index) => (
+
onSessionSelect(session.id)}
+ className={`px-6 py-4 cursor-pointer transition-all duration-150 hover:bg-gray-50 border-b border-gray-100/50 last:border-b-0 ${
+ session.id === currentSessionId
+ ? 'bg-blue-50 border-r-3 border-blue-500'
+ : ''
+ }`}
+ >
+
+ {getSessionDisplayName(session, sessionList)}
+
+
+ {formatCreatedTime(session)}
+
+
+ ))
+ ) : (
+
+
+
+
+
{t('chat:sessionHistory.noSessionsYet')}
+
{t('chat:sessionHistory.startNewConversation')}
+
+ )}
+
+
{tools.map((tool, index) =>
tool ? (
{
return (
- {currentZoom}%
+ {currentZoom}%
{[10, 50, 100, 150, 200].map((zoom) => (
@@ -73,7 +73,7 @@ const CanvasViewMenu = () => {
-