# LOFTER 活动任务系统 - Monorepo

这是一个基于 LOFTER 活动任务系统的 Monorepo 项目，包含核心 SDK 和 React 组件库。

## 项目结构

```
├── @lofter-mission/
│   ├── core/                    # 核心 SDK 包
│   └── react/                   # React 组件库
├── my-react-app/                # 示例 React 应用
├── pnpm-workspace.yaml          # pnpm 工作区配置
└── package.json                 # 根 package.json
```

## 包说明

### @lofter-mission/core
核心 SDK 包，提供活动任务相关的 API 服务。

**特性：**
- 活动数据获取
- 任务进度管理
- 用户信息处理
- TypeScript 支持

### @lofter-mission/react
基于 `@lofter-mission/core` 的 React 组件库。

**组件：**
- `ActivityContainer` - 活动容器组件
- `ActivityUser` - 用户信息组件  
- `MissionItemView` - 单个任务组件
- `MissionListView` - 任务列表组件
- `MissionPopupView` - 任务弹窗组件

## 快速开始

### 安装依赖

```bash
pnpm install
```

### 构建所有包

```bash
pnpm run build
```

### 构建单个包

```bash
# 构建核心 SDK
pnpm run build:core

# 构建 React 组件库
pnpm run build:react
```

### 开发模式

```bash
# React 组件库开发模式
pnpm run dev:react
```

### 运行示例应用

```bash
pnpm run start:example
```

## 使用示例

### 基础使用

```tsx
import React, { useState } from 'react';
import {
  ActivityContainer,
  ActivityUser,
  MissionListView,
  MissionPopupView
} from '@lofter-mission/react';
// 导入样式
import '@lofter-mission/react/src/styles/index.css';

function App() {
  const [showPopup, setShowPopup] = useState(false);

  const handleMissionProgress = (mission) => {
    console.log('任务完成:', mission);
  };

  return (
    <ActivityContainer activityCode="confession">
      <ActivityUser />
      <MissionListView 
        onMissionProgressUpdate={handleMissionProgress} 
      />
      
      <button onClick={() => setShowPopup(true)}>
        打开任务弹窗
      </button>
      
      <MissionPopupView
        visible={showPopup}
        onClose={() => setShowPopup(false)}
        onMissionProgressUpdate={handleMissionProgress}
      />
    </ActivityContainer>
  );
}
```

### 高级使用

```tsx
import React from 'react';
import { useActivity } from '@lofter-mission/react';

function CustomComponent() {
  const {
    activityInfo,
    missions,
    userInfo,
    loading,
    error,
    refreshActivity
  } = useActivity();

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误: {error}</div>;

  return (
    <div>
      <h2>{activityInfo?.name}</h2>
      <p>任务总数: {missions.length}</p>
      <p>用户积分: {userInfo?.points}</p>
      <button onClick={refreshActivity}>刷新</button>
    </div>
  );
}
```

## 开发脚本

| 命令 | 说明 |
|------|------|
| `pnpm install` | 安装所有依赖 |
| `pnpm run build` | 构建所有包 |
| `pnpm run build:core` | 构建核心 SDK |
| `pnpm run build:react` | 构建 React 组件库 |
| `pnpm run dev:react` | React 组件库开发模式 |
| `pnpm run start:example` | 启动示例应用 |
| `pnpm run clean` | 清理所有构建产物 |

## 技术栈

- **包管理**: pnpm workspace
- **构建工具**: Rollup
- **开发语言**: TypeScript
- **前端框架**: React 18
- **样式**: CSS
- **代码规范**: ESLint

## 许可证

MIT

## 贡献

欢迎提交 Issue 和 Pull Request！

## 更多文档

- [@lofter-mission/core 文档](./\@lofter-mission/core/readme.md)
- [@lofter-mission/react 文档](./\@lofter-mission/react/README.md)