# mobiled

**Repository Path**: Z2026617199/mobiled

## Basic Information

- **Project Name**: mobiled
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-26
- **Last Updated**: 2025-05-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 校园社交App

这是一个基于React Native和Expo开发的校园社交应用前端项目。

## 项目功能

- 用户登录/注册系统
  - 账号密码登录
  - 第三方账号登录（微信、QQ、微博）- 开发中
  - 用户注册
  - 自动登录验证
- 个人信息管理
  - 个人资料展示
  - 个人资料编辑
  - 技能标签管理
- 社交功能
  - 粉丝列表查看
  - 关注列表查看
  - 帖子详情查看
  - 帖子点赞/收藏功能
  - 帖子管理（开发中）
  - 收藏管理（开发中）
- 消息系统（开发中）
- 帮助与反馈
  - 帮助中心（常见问题展示）
  - 问题反馈（提交反馈与历史记录）
  - 联系客服（邮箱、电话、在线客服）
  - 相关资源入口

## 技术栈

- React Native
- Expo
- Expo Router (路由导航)
- Redux Toolkit (状态管理)
- Axios (API请求)
- React Native Paper (UI组件库)
- Expo Linear Gradient (渐变效果)
- AsyncStorage (本地存储)

## 如何开始

### 安装依赖

```bash
npm install
# 或
yarn install
```

### 启动开发服务器

```bash
npm start
# 或
yarn start
```

然后使用Expo Go应用扫描二维码在手机上运行，或者选择在iOS/Android模拟器中运行。

## 项目结构

```
app/                    # 应用主目录（基于Expo Router）
  ├─ _layout.tsx        # 根布局配置
  ├─ index.tsx          # 首页（路由重定向和权限验证）
  ├─ login.tsx          # 登录页面
  ├─ register.tsx       # 注册页面
  ├─ profile/           # 个人资料相关页面
  │   ├─ edit.tsx       # 编辑个人资料页面
  │   └─ followers.tsx  # 粉丝列表页面
  ├─ (tabs)/            # 底部导航栏页面
  │   ├─ _layout.tsx    # 底部导航布局
  │   ├─ index.tsx      # 首页Tab
  │   ├─ discovery.tsx  # 发现Tab
  │   ├─ message.tsx    # 消息Tab
  │   └─ profile.tsx    # 个人中心Tab
  ├─ store/             # Redux状态管理
  │   ├─ store.ts       # Redux存储配置
  │   ├─ hooks.ts       # 自定义Redux hooks
  │   └─ userSlice.ts   # 用户状态管理
  ├─ services/          # API服务
  │   └─ userService.ts # 用户相关API服务
  └─ components/        # 公共组件
      └─ AuthGuard.tsx  # 路由权限保护组件
```

## 状态管理

项目使用Redux Toolkit进行状态管理，主要管理：
- 用户登录状态
- 用户个人资料
- 登录/注册过程中的加载状态
- 错误信息处理

## API集成

通过Axios与后端API进行交互，已完成的接口：
- 用户登录 `/api/user/login`
- 用户注册 `/api/user/register`
- 获取当前用户信息 `/api/user/get/login`
- 更新用户个人资料 `/api/user/update/my`
- 用户注销 `/api/user/logout`
- 获取用户统计数据 `/api/user/stats`
- 获取粉丝列表 `/api/user/followers`
- 获取关注列表 `/api/user/followings`

## 个人资料功能

个人资料页面包含以下功能：
- 用户基本信息显示（头像、姓名、角色、专业等）
- 学术信息展示（学院、年级、研究方向等）
- 专业技能标签展示
- 社交统计数据展示（粉丝、关注、帖子等）
- 下拉刷新功能，实时更新个人资料信息
- 头像上传功能，支持从相册选择并裁剪图片

个人资料编辑页面包含以下功能：
- 基本信息编辑（昵称、性别、个人简介等）
- 学术信息编辑（学院、专业、年级等）
- 技能标签管理（添加/删除）
- 联系方式管理
- 隐私设置
- 头像上传与更换功能

## 社交功能

粉丝列表页面包含以下功能：
- 粉丝列表展示（头像、姓名、专业年级等信息）
- 支持分页加载，下拉刷新功能
- 搜索功能（UI已实现，功能开发中）
- 回关功能（UI已实现，功能开发中）

关注列表页面包含以下功能：
- 关注用户列表展示（头像、姓名、专业年级等信息）
- 支持分页加载，下拉刷新功能
- 搜索功能
- 取消关注功能
- 关注状态实时更新

## 开发进度

目前已经完成：
- 登录页面UI和功能
- 注册页面UI和功能
- 个人中心页面UI和功能
- 个人资料编辑页面UI和功能
- 粉丝列表页面UI和基础功能
- 关注列表页面UI和基础功能
- 个人主页统计数字动态获取
- 页面间导航
- Redux状态管理
- API服务集成
- 路由权限保护
- 个人中心页面下拉刷新功能
- 头像上传与更换功能
- 移除个人资料编辑页面的姓名字段，仅保留昵称字段
- 首页帖子列表功能
  - 帖子列表展示和分页加载
  - 下拉刷新功能
  - 点击帖子跳转到详情页面
  - 帖子点赞/收藏功能及状态更新
- 帖子详情页面UI和功能
  - 用户信息展示（头像、昵称、专业年级）
  - 帖子内容完整展示
  - 标签展示
  - 图片展示（支持单张全宽和多张网格布局）
  - 点赞/收藏功能及状态实时更新
  - 相对时间显示（X分钟前、X小时前等）
  - 返回导航和顶部导航栏
  - 完美的安全区域适配，解决与系统状态栏和底部指示器重叠问题
  - 跨平台兼容（iOS和Android设备的状态栏处理）
- 帮助与反馈功能
  - 帮助中心页面（折叠式常见问题列表）
  - 联系客服信息展示（邮箱、电话、在线客服）
  - 相关资源入口（使用指南、社区规范、隐私政策）
  - 问题反馈表单和历史记录展示

正在开发中：
- 社交功能的搜索和回关功能
- 帖子评论功能
- 帖子分享功能
- 用户关注功能
- 帖子列表和收藏列表
- 消息系统
- 头像上传功能

## 注意事项

- 目前所有第三方登录功能（微信、QQ、微博）均显示"功能开发中"提示
- 头像上传功能尚未实现，目前仅显示占位头像
- 后端API地址默认为`http://192.168.43.81:8101`，可在`app/services/userService.ts`中修改

## 新增依赖

- expo-image-picker: 用于从设备相册中选择图片

## 环境变量管理（Expo 方案）

本项目采用 `app.config.js` 管理环境变量，避免硬编码。

### 如何配置

1. 在根目录 `mobiled/app.config.js` 文件中，`extra` 字段用于定义环境变量，例如：

```js
extra: {
  API_URL: process.env.API_URL || 'https://default.api.com',
}
```

2. 启动项目时可通过命令行传递环境变量：

```bash
API_URL=https://dev.api.com expo start
```

3. 在代码中通过 `expo-constants` 读取：

```js
import Constants from 'expo-constants';
const apiUrl = Constants.expoConfig.extra.API_URL;
```

### 注意事项
- 推荐不要在代码中硬编码 API 地址等敏感信息。
- 支持多环境切换，按需传递不同变量。

## 聊天功能模块

本项目新增了聊天功能模块，包括私聊、群聊、好友管理和群组管理功能。

### 新增页面

1. **消息列表页面** (`/app/(tabs)/message.tsx`)
   - 显示私聊、群聊和通知列表
   - 支持切换不同类型的消息

2. **聊天详情页面**
   - 私聊聊天页面 (`/app/chat/private/[id].tsx`)
   - 群聊聊天页面 (`/app/chat/group/[id].tsx`)
   - 支持发送消息、查看历史记录

3. **好友管理页面**
   - 添加好友页面 (`/app/friend/add.tsx`)
   - 支持通过学号搜索用户、发送好友请求

4. **群组管理页面**
   - 创建群组页面 (`/app/group/create.tsx`)
   - 支持创建群组、选择群成员

### 启动方式

```bash
# 安装依赖
cd mobiled
npm install

# 启动开发服务器
npm run start

# 在Android设备/模拟器上运行
npm run android

# 在iOS设备/模拟器上运行
npm run ios

# 在Web浏览器上运行
npm run web
```

### 使用说明

1. **查看消息列表**
   - 点击底部导航栏的"消息"选项卡
   - 可切换查看私聊、群聊和通知

2. **添加好友**
   - 在消息页面点击右上角的"+"按钮
   - 输入学号搜索用户
   - 填写验证信息发送好友请求

3. **创建群组**
   - 在消息页面切换到"群聊"标签
   - 点击右上角的"+"按钮
   - 填写群组信息并选择成员

4. **发送消息**
   - 在聊天页面底部输入框中输入消息
   - 点击发送按钮

### 注意事项

- 目前应用使用模拟数据，需要连接后端API才能实现完整功能
- 部分高级功能（如语音消息、图片消息等）尚未实现
- 与后端的连接配置请在`constants/api.ts`文件中设置