+
+ );
+ }
+
+ // 如果未认证，重定向到登录页面
+ if (!isAuthenticated) {
+ return
+
+
+
+ 正在验证身份
+请稍候...
+
-
-
-
+
)
diff --git a/src/components/UserMenu.tsx b/src/components/UserMenu.tsx
new file mode 100644
index 0000000..92ec25e
--- /dev/null
+++ b/src/components/UserMenu.tsx
@@ -0,0 +1,181 @@
+/**
+ * 用户菜单组件
+ * 显示用户头像、信息和操作菜单
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import {
+ User,
+ Settings,
+ LogOut,
+ ChevronDown,
+ Shield,
+ Edit3
+} from 'lucide-react';
+import { useAuthStore } from '../stores/useAuthStore';
+import { useNavigate } from 'react-router-dom';
+
+const UserMenu: React.FC = () => {
+ const { user, logout } = useAuthStore();
+ const navigate = useNavigate();
+ const [isOpen, setIsOpen] = useState(false);
+ const menuRef = useRef
+ {/* 用户菜单 */}
+
e.stopPropagation()}>
+
+
+ {/* 窗口控制按钮 */}
+
+
+
+
+
+ {/* 用户头像按钮 */}
+
+
+ {/* 下拉菜单 */}
+ {isOpen && (
+
+ );
+};
+
+export default UserMenu;
diff --git a/src/index.css b/src/index.css
index dd29536..ca150ef 100644
--- a/src/index.css
+++ b/src/index.css
@@ -48,6 +48,59 @@
.timeline-track {
@apply relative h-16 bg-secondary-200 border-b border-secondary-300;
}
+
+ /* 登录页面特殊样式 */
+ .login-bg-pattern {
+ background-image:
+ radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
+ radial-gradient(circle at 75% 75%, rgba(147, 51, 234, 0.1) 0%, transparent 50%);
+ }
+
+ .login-glass {
+ backdrop-filter: blur(20px);
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ }
+
+ .login-input {
+ backdrop-filter: blur(10px);
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ transition: all 0.3s ease;
+ }
+
+ .login-input:focus {
+ background: rgba(255, 255, 255, 0.15);
+ border-color: rgba(59, 130, 246, 0.5);
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+ }
+
+ .login-button {
+ background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #1d4ed8 100%);
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .login-button:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
+ }
+
+ .login-button:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+ transition: left 0.5s;
+ }
+
+ .login-button:hover:before {
+ left: 100%;
+ }
.timeline-clip {
@apply absolute top-0 h-full bg-primary-500 rounded border border-primary-600 cursor-pointer hover:bg-primary-600 transition-colors;
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..de03a77
--- /dev/null
+++ b/src/pages/LoginPage.tsx
@@ -0,0 +1,420 @@
+/**
+ * 登录页面
+ * 美观大气的科技风登录界面，集成Nakama用户系统
+ */
+
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+ User,
+ Lock,
+ Mail,
+ Eye,
+ EyeOff,
+ Zap,
+ Shield,
+ Cpu,
+ Play,
+ Sparkles,
+ ArrowRight
+} from 'lucide-react';
+import { useAuthStore } from '../stores/useAuthStore';
+
+interface LoginFormData {
+ email: string;
+ password: string;
+ rememberMe: boolean;
+}
+
+interface RegisterFormData {
+ email: string;
+ username: string;
+ password: string;
+ confirmPassword: string;
+ displayName: string;
+}
+
+const LoginPage: React.FC = () => {
+ const navigate = useNavigate();
+ const { login, register, loading, error, clearError, isAuthenticated } = useAuthStore();
+
+ const [isRegisterMode, setIsRegisterMode] = useState(false);
+ const [showPassword, setShowPassword] = useState(false);
+ const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+ const [loginForm, setLoginForm] = useState
+ {/* 用户信息 */}
+
+ )}
+
+
+
+ {/* 菜单项 */}
+
+ })
+
+
+
+ + {user.displayName || user.username} +
+{user.email}
+
+
+
+
+
+
+
+
+
+
+ {/* 分割线 */}
+
+
+ {/* 登出 */}
+
+
+ {/* 背景动画元素 */}
+
+ );
+};
+
+export default LoginPage;
diff --git a/src/services/nakamaAuth.ts b/src/services/nakamaAuth.ts
new file mode 100644
index 0000000..e09336e
--- /dev/null
+++ b/src/services/nakamaAuth.ts
@@ -0,0 +1,329 @@
+/**
+ * Nakama认证服务
+ * 处理用户登录、注册、会话管理等功能
+ */
+
+import { Client, Session } from '@heroiclabs/nakama-js';
+
+export interface LoginCredentials {
+ email?: string;
+ username?: string;
+ password: string;
+}
+
+export interface RegisterCredentials {
+ email: string;
+ username: string;
+ password: string;
+ displayName?: string;
+}
+
+export interface UserProfile {
+ id: string;
+ username: string;
+ displayName: string;
+ email?: string;
+ avatarUrl?: string;
+ createTime: string;
+ updateTime: string;
+}
+
+export interface AuthState {
+ isAuthenticated: boolean;
+ user: UserProfile | null;
+ session: Session | null;
+ loading: boolean;
+ error: string | null;
+}
+
+class NakamaAuthService {
+ private client: Client;
+ private session: Session | null = null;
+ private readonly SERVER_KEY = 'defaultkey'; // 替换为实际的服务器密钥
+ private readonly HOST = 'https://nakama.bowong.cc'; // 替换为实际的Nakama服务器地址
+ private readonly PORT = '443'; // 替换为实际的端口
+ private readonly USE_SSL = true; // 根据实际情况设置
+
+ constructor() {
+ this.client = new Client(this.SERVER_KEY, this.HOST, this.PORT, this.USE_SSL);
+ this.loadStoredSession();
+ }
+
+ /**
+ * 从本地存储加载会话
+ */
+ private loadStoredSession(): void {
+ try {
+ const storedSession = localStorage.getItem('nakama_session');
+ if (storedSession) {
+ const sessionData = JSON.parse(storedSession);
+ this.session = Session.restore(
+ sessionData.token,
+ sessionData.refresh_token,
+ sessionData.username,
+ sessionData.user_id,
+ sessionData.created,
+ sessionData.expires_at,
+ sessionData.vars
+ );
+
+ // 检查会话是否过期
+ if (this.session.isexpired(Date.now() / 1000)) {
+ this.refreshSession();
+ }
+ }
+ } catch (error) {
+ console.error('Failed to load stored session:', error);
+ this.clearStoredSession();
+ }
+ }
+
+ /**
+ * 保存会话到本地存储
+ */
+ private saveSession(session: Session): void {
+ try {
+ const sessionData = {
+ token: session.token,
+ refresh_token: session.refresh_token,
+ username: session.username,
+ user_id: session.user_id,
+ created: session.created,
+ expires_at: session.expires_at,
+ vars: session.vars
+ };
+ localStorage.setItem('nakama_session', JSON.stringify(sessionData));
+ this.session = session;
+ } catch (error) {
+ console.error('Failed to save session:', error);
+ }
+ }
+
+ /**
+ * 清除本地存储的会话
+ */
+ private clearStoredSession(): void {
+ localStorage.removeItem('nakama_session');
+ this.session = null;
+ }
+
+ /**
+ * 刷新会话
+ */
+ private async refreshSession(): Promise
+
+
+
+
+
+ {/* 网格背景 */}
+
+
+
+ {/* 左侧 - 品牌展示 */}
+
+
+
+
+ {/* 右侧 - 登录表单 */}
+
+
+ 智能视频混剪
+
+
+
+
+ {/* 特性展示 */}
+
+
+
+
+
+ MixVideo
+
+ 智能视频混剪
+
+
+ 创作平台
+
+
+
+ + 基于AI技术的专业视频混剪工具，让创作更简单，让想象成为现实 +
+
+
+
+
+
+
+
+
+
+ 智能场景检测
+AI驱动的视频场景自动识别与分割
+
+
+
+
+
+
+
+ 高性能处理
+多核并行处理，快速完成视频编辑任务
+
+
+
+
+
+
+ 模板系统
+丰富的视频模板库，快速创建专业作品
+
+
+
+ {/* 表单头部 */}
+
+
+
+
+ {/* 错误提示 */}
+ {error && (
+
+
+ + {isRegisterMode ? '创建账户' : '欢迎回来'} +
++ {isRegisterMode ? '加入MixVideo，开始您的创作之旅' : '登录您的账户继续使用'} +
+
+
+ )}
+
+ {/* 登录表单 */}
+ {!isRegisterMode ? (
+
+ ) : (
+ /* 注册表单 */
+
+ )}
+
+ {/* 切换模式 */}
+ {error}
+
+
+ + {isRegisterMode ? '已有账户？' : '还没有账户？'} + +
+