# CloudSync

**Repository Path**: hj2017hhh/cloud-sync

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-29
- **Last Updated**: 2026-06-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 云存储与权益卡商城应用

一个功能丰富的现代化云存储平台，集成了权益卡商城、积分系统、好友系统等完整生态。

## 📋 目录

- [功能特性](#-功能特性)
- [技术栈](#-技术栈)
- [项目结构](#-项目结构)
- [快速开始](#-快速开始)
- [主要功能模块](#-主要功能模块)
- [API 接口](#-api-接口)
- [开发指南](#-开发指南)
- [环境配置](#-环境配置)

## ✨ 功能特性

### 🔐 用户认证
- 邮箱/密码登录注册
- 手势密码登录
- WebAuthn 生物识别认证
- 2FA 双重认证
- OAuth 第三方登录（Gitee 等）
- 支付密码设置
- 头像上传与编辑

### 📁 文件管理
- 文件上传下载
- 文件夹创建与管理
- 文件预览
- 文件搜索
- 存储空间统计

### 💰 积分系统
- 每日签到获取积分
- 大转盘抽奖
- 积分兑换存储空间
- 积分历史记录查询
- 签到日历

### 🛒 权益卡商城
- 权益卡浏览与购买
- 购物车管理
- 订单创建与支付
- 我的权益卡管理
- 核销码管理
- 扫码核销

### 🎁 赠送系统
- 权益卡赠送好友
- 自定义贺卡设计
- 赠送记录查询
- 接收与拒绝赠送

### 🎫 优惠券系统
- 优惠券领取与使用
- 优惠券管理
- 管理员优惠券创建与审核

### 👥 好友系统
- 搜索添加好友
- 好友请求处理
- 好友列表管理
- 好友详情查看

### 🔄 退款管理
- 订单退款申请
- 权益卡退款申请
- 管理员退款审核
- 退款记录查询

### 🔔 通知系统
- 系统通知推送
- 通知列表与详情
- 未读消息统计

## 🛠️ 技术栈

- **前端框架**: React 18.2.0
- **语言**: TypeScript 5.3.3
- **构建工具**: Vite 5.1.0
- **样式方案**: Tailwind CSS 4.0.0
- **UI 动画**: Framer Motion 11.0.8
- **图标库**: Lucide React 0.312.0
- **二维码**: qrcode.react 4.2.0
- **代码规范**: ESLint

## 📁 项目结构

```
login-page-app/
├── public/                 # 静态资源
├── src/
│   ├── api/               # API 接口层
│   │   └── api.ts         # 所有 API 定义
│   ├── components/        # 组件目录
│   │   ├── App/           # 主应用组件
│   │   │   ├── BottomNav.tsx
│   │   │   ├── FileList.tsx
│   │   │   ├── HomeScreen.tsx
│   │   │   ├── PointsScreen.tsx
│   │   │   ├── UploadScreen.tsx
│   │   │   └── ...
│   │   ├── Auth/          # 认证相关组件
│   │   │   ├── LoginScreen.tsx
│   │   │   ├── RegisterScreen.tsx
│   │   │   ├── GestureLock.tsx
│   │   │   └── PayPasswordScreen.tsx
│   │   ├── RightsCard/    # 权益卡模块
│   │   │   ├── RightsCardMallScreen.tsx
│   │   │   ├── CartScreen.tsx
│   │   │   ├── OrderManagementScreen.tsx
│   │   │   ├── MyRightsCardsScreen.tsx
│   │   │   └── ...
│   │   ├── Coupon/        # 优惠券模块
│   │   ├── Friend/        # 好友模块
│   │   ├── Common/        # 通用组件
│   │   └── FullscreenButton.tsx
│   ├── contexts/          # React Context
│   │   ├── ThemeContext.tsx
│   │   ├── ToastContext.tsx
│   │   └── NotificationContext.tsx
│   ├── types/             # TypeScript 类型定义
│   │   └── index.ts
│   ├── lib/               # 工具函数
│   ├── App.tsx            # 应用入口组件
│   ├── main.tsx           # 应用启动文件
│   └── index.css          # 全局样式
├── package.json
├── tsconfig.json
├── vite.config.ts
└── ...
```

## 🚀 快速开始

### 环境要求

- Node.js >= 16.0.0
- pnpm (推荐) 或 npm

### 安装依赖

```bash
pnpm install
```

### 开发模式

```bash
pnpm dev
```

访问 http://localhost:5173 查看应用。

### 构建生产版本

```bash
pnpm build
```

### 预览构建结果

```bash
pnpm preview
```

### 代码检查

```bash
pnpm lint
```

## 📦 主要功能模块

### 用户认证流程

```
登录/注册 → 设置支付密码(可选) → 设置手势密码(可选) → 启用2FA(可选) → 完成
```

### 权益卡购买流程

```
浏览商品 → 选择商品 → 加入购物车 → 结算 → 选择优惠券 → 验证支付密码 → 支付成功 → 获得权益卡
```

### 积分获取与使用

1. **获取途径**:
   - 每日签到
   - 大转盘抽奖
   - 系统活动奖励

2. **使用方式**:
   - 兑换存储空间
   - 购买权益卡抵扣

### 权益卡赠送流程

```
选择未使用权益卡 → 选择好友 → 设计贺卡 → 发送赠送 → 好友接收
```

## 🔗 API 接口

所有 API 接口定义在 `src/api/api.ts` 中，主要包含以下模块：

### 认证 API (`authApi`)
- 登录、注册
- 密码修改
- 2FA 设置与验证
- WebAuthn 认证
- 手势密码
- 头像上传

### 权益卡 API (`rightsCardApi`)
- 权益卡列表与详情
- 购物车管理
- 订单创建与支付
- 退款申请
- 核销与验证

### 积分 API (`pointsApi`)
- 积分信息查询
- 签到
- 大转盘抽奖
- 积分兑换
- 历史记录

### 文件 API (`fileApi` / `folderApi`)
- 文件上传下载
- 文件夹管理
- 文件预览

### 优惠券 API (`couponApi`)
- 优惠券领取与使用
- 管理员优惠券管理

### 好友 API (`friendApi`)
- 好友搜索与添加
- 好友请求处理
- 好友列表管理

### 通知 API (`notificationApi`)
- 通知列表
- 标记已读
- 未读统计

## 📝 开发指南

### 添加新页面

1. 在 `src/components/` 对应目录下创建新组件
2. 在 `App.tsx` 中添加页面路由
3. 在 `AppScreen` 类型中添加新页面名称
4. 在 `shouldShowBottomNav` 中配置是否显示底部导航

### 调用 API

```typescript
import { rightsCardApi } from '../api/api';

const loadData = async () => {
  try {
    const response = await rightsCardApi.getCardList();
    if (response.success) {
      // 处理数据
    }
  } catch (error) {
    console.error('加载失败', error);
  }
};
```

### 使用 Context

```typescript
import { useToast } from '../contexts/ToastContext';

const { addToast } = useToast();

addToast('success', '操作成功', '您的操作已完成');
```

### 添加新图标

项目使用 Lucide React 图标库，完整图标列表可参考 [Lucide 官网](https://lucide.dev/)。

```typescript
import { NewIcon } from 'lucide-react';

<NewIcon className="w-6 h-6" />
```

## 🔧 环境配置

### API 地址配置

在项目根目录创建 `.env` 文件：

```env
VITE_API_BASE_URL=http://your-api-server.com/api
```

默认 API 地址为 `http://10.114.15.134:8080/api`。

### OAuth 配置

在 `src/api/api.ts` 中配置 OAuth Client ID：

```typescript
const GITEE_CLIENT_ID = 'YOUR_GITEE_CLIENT_ID';
```

## 🔐 安全特性

- JWT Token 认证
- 支付密码验证
- 2FA 双重认证
- WebAuthn 生物识别
- 手势密码加密存储

## 📱 响应式设计

项目采用移动端优先设计，支持：
- 手机端适配
- 平板端适配
- 桌面端适配
- 横竖屏自适应

## 📄 许可证

MIT License

## 👥 贡献

欢迎提交 Issue 和 Pull Request！

## 📧 联系方式

如有问题，请通过 Issue 联系我们。