+ setShowCreateCharacter(true)}
+ className="bg-gradient-to-r from-orange-500 to-amber-500 text-white px-4 py-2 rounded-xl flex items-center space-x-2 shadow-lg hover:shadow-xl transition-all duration-200"
+ whileHover={{ scale: 1.05 }}
+ whileTap={{ scale: 0.95 }}
+ >
+
+
+
+ {/* Create Character Modal */}
+ 角色管理
+
+
+ 创建新角色
+ +
+
+
+
+ setNewCharacterName(e.target.value)}
+ className="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-transparent"
+ placeholder="请输入角色名称"
+ />
+
+
+
+
+
+
+
+ ) : (
+ 暂无角色
+创建你的第一个Minecraft角色吧！
+
+ {profiles.map((profile) => (
+
+ )}
+ 账户设置
+ +
+ {/* Avatar Settings */}
+
+
+
+
+
+ {/* Yggdrasil Settings */}
+
+
+
+
+
+ {/* Basic Info */}
+
+
+
+
+
+ {/* Account Actions */}
+
+
+
+
+
+
+
+
+
+
+ {userProfile?.avatar ? (
+ 
+ ) : (
+ document.getElementById('avatar-upload')?.click()}
+ >
+
+
+
+
+
+ )}
+
+
+ + 支持 JPG、PNG 格式，最大 2MB +
+ {avatarFile && ( +
+
+ )}
+ {isUploadingAvatar && (
+ + 已选择: {avatarFile.name} +
+
+
+ )}
+
+
+
+ + 上传中... {avatarUploadProgress}% +
+
+
+
+ {userProfile?.avatar && (
+
+ 删除头像
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ setShowYggdrasilPassword(!showYggdrasilPassword)}
+ className="bg-gradient-to-r from-gray-500 to-gray-600 text-white px-4 py-2 rounded-xl shadow-lg hover:shadow-xl transition-all duration-200"
+ whileHover={{ scale: 1.05 }}
+ whileTap={{ scale: 0.95 }}
+ >
+ {showYggdrasilPassword ? '隐藏' : '显示'}
+
+
+ {isResettingYggdrasilPassword ? '重置中...' : '重置密码'}
+
+
+ + 此密码用于Minecraft客户端连接，请妥善保管 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 更换邮箱地址
+
+
+ 退出登录
+
+
+ + 账户设置 +
+
+
+ 功能开发中
+该功能正在开发中，敬请期待！
+
+
+
+ + 为角色 "{currentProfile?.name}" 选择皮肤 +
+ +
+ {
+ // 移除皮肤
+ if (currentProfile) {
+ updateProfile(currentProfile.uuid, { skin_id: undefined });
+ setProfiles(prev => prev.map(p =>
+ p.uuid === currentProfile.uuid ? { ...p, skin_id: undefined } : p
+ ));
+ setProfileSkins(prev => {
+ const newSkins = { ...prev };
+ delete newSkins[currentProfile.uuid];
+ return newSkins;
+ });
+ setShowSkinSelector(null);
+ }
+ }}
+ >
+
+
+ {availableSkins.map((skin) => (
+ {
+ // 分配皮肤给角色
+ if (currentProfile) {
+ updateProfile(currentProfile.uuid, { skin_id: skin.id });
+ setProfiles(prev => prev.map(p =>
+ p.uuid === currentProfile.uuid ? { ...p, skin_id: skin.id } : p
+ ));
+ setProfileSkins(prev => ({
+ ...prev,
+ [currentProfile.uuid]: { url: skin.url, isSlim: skin.is_slim }
+ }));
+ setShowSkinSelector(null);
+ }
+ }}
+ >
+
+ ))}
+
+
+ {availableSkins.length === 0 && (
+
+
+ 移除皮肤
+
+ {skin.name}
+
+
+
+ )}
+ 暂无可用皮肤，请先上传皮肤
+
{/* Animated Background */}
-
+
-
+
- {/* Left Sidebar - 完全固定的 */}
+ {/* Left Sidebar - 使用CSS自定义属性考虑navbar高度 */}
{/* User Profile Card */}
-
-
+ {/* Profile Sidebar Component */}
+ setActiveTab(tab as 'characters' | 'skins' | 'favorites' | 'settings')}
+ skinCount={mySkins.length}
+ favoriteCount={favoriteSkins.length}
+ profilesCount={profiles.length}
+ onLogout={logout}
+ />
{/* Right Content Area - 考虑左侧fixed侧栏的空间 */}
- {/* Characters Tab */}
- {activeTab === 'characters' && (
-
-
- {showCreateCharacter && (
-
-
-
-
- )}
-
-
- {/* Skin Selector Modal */}
-
- {showSkinSelector && (
-
-
-
-
- )}
-
-
- {profiles.length === 0 ? (
-
- )}
-
- {/* Skins Tab */}
- {activeTab === 'skins' && (
-
-
- {showUploadSkin && (
-
-
-
-
+
- {userProfile?.avatar ? (
-
- ) : (
-
-
-
-
- )}
-
-
- {userProfile?.username}
-{userProfile?.email}
-
-
-
-
- {mySkins.length}
- 皮肤
-
-
- {favoriteSkins.length}
- 收藏
-
-
- {userProfile?.points || 0}
- 积分
-
- setShowCreateCharacter(true)}
- className="bg-gradient-to-r from-orange-500 to-amber-500 text-white px-4 py-2 rounded-xl flex items-center space-x-2 shadow-lg hover:shadow-xl transition-all duration-200"
- whileHover={{ scale: 1.05 }}
- whileTap={{ scale: 0.95 }}
- >
-
-
-
- {/* Create Character Modal */}
- 角色管理
-
-
- 创建新角色
- -
-
-
-
- setNewCharacterName(e.target.value)}
- className="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-transparent"
- placeholder="请输入角色名称"
- />
-
-
-
-
-
-
-
-
- {mySkins.length === 0 ? (
- 选择皮肤
- -
-
- ) : (
- <>
- 暂无皮肤
-您还没有上传任何皮肤
- -
-
-
-
-
- {mySkins.map((skin) => (
- handleAssignSkin(showSkinSelector, skin.id)}
- >
-
- ))}
-
-
- )}
-
- {skin.type === 'SKIN' ? (
-
-
-
-
- )}
- {!skin.is_public && (
-
-
-
- 🧥
-
- 披风
-
- 私密
-
- )}
-
-
- {skin.name}
-- {skin.type === 'SKIN' ? (skin.is_slim ? '细臂模型' : '经典模型') : '披风'} -
-
-
-
-
-
- ) : (
- 暂无角色
-创建你的第一个Minecraft角色吧！
-
- {profiles.map((profile) => (
-
-
- ))}
-
- )}
-
- {editingProfile === profile.uuid ? (
- setEditProfileName(e.target.value)}
- className="text-lg font-semibold bg-transparent border-b border-orange-500 focus:outline-none text-gray-900 dark:text-white"
- onBlur={() => handleEditCharacter(profile.uuid)}
- onKeyPress={(e) => e.key === 'Enter' && handleEditCharacter(profile.uuid)}
- autoFocus
- />
- ) : (
-
-
- {profile.name}
- )} - {profile.is_active && ( - - 当前使用 - - )} -
- {profileSkins[profile.uuid] ? (
-
-
-
-
-
- )}
-
- {!profile.is_active && (
-
- )}
-
-
-
-
-
- setShowUploadSkin(true)}
- className="bg-gradient-to-r from-orange-500 to-amber-500 text-white px-4 py-2 rounded-xl flex items-center space-x-2 shadow-lg hover:shadow-xl transition-all duration-200"
- whileHover={{ scale: 1.05 }}
- whileTap={{ scale: 0.95 }}
- >
-
-
-
- {/* Upload Skin Modal */}
- 我的皮肤
-
-
- 上传皮肤
- -
-
-
-
-
-
-
- - 点击选择文件或拖拽到此处 -
- - - {selectedFile && ( -- 已选择: {selectedFile.name} -
- )} -
-
- setNewSkinData(prev => ({ ...prev, name: e.target.value }))}
- className="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-transparent"
- placeholder="请输入皮肤名称"
- />
-
-
-
-
-