修复角色中心组件中的类型不匹配错误，改进skinId和capeId的类型处理逻辑

API测试指南.md

@@ -0,0 +1,114 @@
+# API连接测试指南
+
+本指南将帮助您测试前端是否能够成功读取后端数据，以及验证登录和注册功能的实现状态。
+
+## 登录和注册功能实现状态
+
+根据代码分析，**登录和注册功能已经实现并连接到了真实的后端API**。系统采用了以下实现方式：
+
+### 登录功能
+- 支持使用用户名或邮箱登录
+- 集成了NextAuth.js进行身份验证管理
+- 在测试环境中提供测试账号（用户名: `test`, 密码: `test`）
+- 非测试账号会调用真实的后端API进行认证：`https://code.littlelan.cn/CarrotSkin/APIgateway/api/v1/auth/login`
+- 包含验证码验证机制（非测试账号需要）
+
+### 注册功能
+- 完整的表单验证逻辑（用户名、密码、邮箱、Minecraft用户名不能为空）
+- 密码强度检查（至少6位）
+- 邮箱格式验证
+- 验证码验证
+- 调用真实的后端注册API：`https://code.littlelan.cn/CarrotSkin/APIgateway/api/v1/auth/register`
+
+## 如何测试后端数据连接
+
+### 方法一：使用API测试页面
+
+1. 访问 `http://localhost:3000/api-tester` 打开API测试工具（已修复）
+2. 点击"开始API测试"按钮
+3. 查看测试结果，了解各个API端点的连接状态
+
+### 方法二：使用简化API测试页面
+
+1. 访问 `http://localhost:3000/simple-api-test` 打开简化的API测试工具
+2. 选择要测试的API端点
+3. 输入必要的参数（如用户ID、角色ID等）
+4. 点击"测试API"按钮查看返回结果
+
+### 方法三：使用浏览器控制台进行测试
+
+打开浏览器开发者工具（F12），切换到控制台（Console）选项卡，执行以下代码：
+
+```javascript
+// 测试材质列表API（无需登录）
+fetch('/api/textures')
+  .then(response => response.json())
+  .then(data => console.log('材质列表数据:', data))
+  .catch(error => console.error('获取材质列表失败:', error));
+
+// 如果已登录，可以测试需要认证的API
+// 测试用户角色列表
+fetch('/api/user-profiles?userId=1', { credentials: 'include' })
+  .then(response => response.json())
+  .then(data => console.log('用户角色列表数据:', data))
+  .catch(error => console.error('获取用户角色列表失败:', error));
+```
+
+## 测试登录功能
+
+### 测试测试账号登录
+
+1. 访问 `http://localhost:3000/login` 登录页面
+2. 输入用户名：`test`，密码：`test`
+3. 点击登录按钮
+4. 成功后会自动跳转到用户主页 `http://localhost:3000/user-home`
+
+### 测试注册功能
+
+1. 访问 `http://localhost:3000/register` 注册页面
+2. 填写完整的注册信息：
+   - 用户名：自定义
+   - 密码：至少6位
+   - 邮箱：有效的邮箱地址
+   - Minecraft用户名：自定义
+3. 点击获取验证码，输入收到的验证码
+4. 点击注册按钮
+5. 成功后会提示注册成功并自动跳转到登录页面
+
+## 常见问题排查
+
+1. **API请求失败**
+   - 检查网络连接是否正常
+   - 确认后端服务器是否正在运行
+   - 查看浏览器控制台是否有错误信息
+   - 检查API端点URL是否正确
+
+2. **登录失败**
+   - 确认用户名和密码是否正确
+   - 检查验证码是否输入正确
+   - 查看是否有网络错误提示
+
+3. **注册失败**
+   - 确认所有必填项都已填写
+   - 检查密码是否满足长度要求
+   - 确认邮箱格式是否正确
+   - 检查用户名或邮箱是否已被注册
+
+## 高级测试技巧
+
+### 查看API请求详情
+
+1. 打开浏览器开发者工具（F12）
+2. 切换到网络（Network）选项卡
+3. 刷新页面或执行API操作
+4. 查看请求和响应详情，包括状态码、请求头、响应内容等
+
+### 测试特定API端点
+
+使用API测试页面，您可以测试以下主要端点：
+- **材质列表**: `/api/textures` - 获取所有材质数据（无需登录）
+- **用户角色列表**: `/api/user-profiles?userId={id}` - 获取指定用户的角色列表（需要登录）
+- **角色详情**: `/api/profile?profileId={id}` - 获取指定角色的详细信息（需要登录）
+- **角色及属性**: `/api/profile-props?profileId={id}` - 获取指定角色及其属性（需要登录）
+
+通过以上测试方法，您可以全面验证前端与后端的连接状态和数据读取能力。