@lofter-mission/react v1.0.0

@lofter-mission/react

基于 @lofter-mission/core 的 React 组件库，提供活动任务相关的通用 UI 组件。

安装

npm install @lofter-mission/react @lofter-mission/core
# 或
yarn add @lofter-mission/react @lofter-mission/core
# 或
pnpm add @lofter-mission/react @lofter-mission/core

组件概览

ActivityContainer

活动容器组件，作为所有活动相关组件的根容器，提供活动上下文。

import { ActivityContainer } from '@lofter-mission/react';

<ActivityContainer activityCode="confession">
  {/* 其他组件 */}
</ActivityContainer>

ActivityUser

登录用户积分信息组件，显示用户头像、昵称、积分等信息。

import { ActivityUser } from '@lofter-mission/react';

<ActivityUser />

MissionItemView

单个任务组件，展示任务详情和进度。

import { MissionItemView } from '@lofter-mission/react';

<MissionItemView
  mission={missionObject}
  onProgressUpdate={(mission) => {
    console.log('任务更新:', mission);
  }}
/>

MissionListView

任务列表组件，显示多个任务项。

import { MissionListView } from '@lofter-mission/react';

<MissionListView
  tabName="daily" // 可选，筛选特定标签的任务
  onMissionProgressUpdate={(mission) => {
    console.log('任务进度更新:', mission);
  }}
/>

MissionPopupView

弹窗组件，包含用户信息和任务列表。

import { MissionPopupView } from '@lofter-mission/react';

<MissionPopupView
  visible={showPopup}
  onClose={() => setShowPopup(false)}
  onMissionProgressUpdate={(mission) => {
    console.log('任务完成:', mission);
  }}
/>

完整使用示例

基础使用

import React, { useState } from 'react';
import {
  ActivityContainer,
  ActivityUser,
  MissionListView,
  MissionPopupView,
  Mission
} from '@lofter-mission/react';

const App: React.FC = () => {
  const [showPopup, setShowPopup] = useState(false);

  const handleMissionProgress = (mission: Mission) => {
    console.log('任务进度更新:', mission);
  };

  return (
    <ActivityContainer activityCode="confession">
      <div style={{ padding: '20px' }}>
        <h1>告白活动</h1>
        
        {/* 用户信息 */}
        <ActivityUser />
        
        {/* 任务列表 */}
        <MissionListView
          onMissionProgressUpdate={handleMissionProgress}
        />
        
        {/* 弹窗触发按钮 */}
        <button onClick={() => setShowPopup(true)}>
          打开任务弹窗
        </button>
        
        {/* 任务弹窗 */}
        <MissionPopupView
          visible={showPopup}
          onClose={() => setShowPopup(false)}
          onMissionProgressUpdate={handleMissionProgress}
        />
      </div>
    </ActivityContainer>
  );
};

export default App;

高级使用

使用 Context Hook

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

const CustomComponent: React.FC = () => {
  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>
  );
};

筛选特定标签任务

<MissionListView
  tabName="daily"
  onMissionProgressUpdate={handleMissionProgress}
/>

TypeScript 支持

组件库完全支持 TypeScript，提供完整的类型定义：

import { 
  Mission, 
  ActivityInfo, 
  UserInfo,
  MissionItemViewProps 
} from '@lofter-mission/react';

const mission: Mission = {
  id: '1',
  name: '每日签到',
  status: 'pending',
  progress: 0,
  maxProgress: 1
};

样式自定义

组件库提供了基础样式，你可以通过 CSS 类名进行自定义：

/* 自定义任务项样式 */
.mission-item {
  border: 2px solid #your-color;
  border-radius: 12px;
}

/* 自定义弹窗样式 */
.mission-popup {
  max-width: 600px;
}

/* 自定义用户信息样式 */
.activity-user {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}

API 参考

Props 类型定义

interface ActivityContainerProps {
  activityCode: string;
  children?: ReactNode;
}

interface MissionItemViewProps {
  activityInfo?: ActivityInfo;
  mission: Mission;
  onProgressUpdate?: (mission: Mission) => void;
}

interface MissionListViewProps {
  activityInfo?: ActivityInfo;
  tabName?: string;
  onMissionProgressUpdate?: (mission: Mission) => void;
}

interface MissionPopupViewProps {
  activityInfo?: ActivityInfo;
  visible?: boolean;
  onClose?: () => void;
  onMissionProgressUpdate?: (mission: Mission) => void;
}

开发和构建

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 测试
npm test

许可证

MIT

贡献

欢迎提交 Issue 和 Pull Request！