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 - 任务弹窗组件

快速开始

安装依赖

pnpm install

构建所有包

pnpm run build

构建单个包

# 构建核心 SDK
pnpm run build:core

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

开发模式

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

运行示例应用

pnpm run start:example

使用示例

基础使用

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>
  );
}

高级使用

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/react 文档