@funhub/platform

现代化的 React 组件库和工具函数集合，为 FunHub 项目提供统一的设计系统和开发工具。

技术栈

• React 18+
• TypeScript
• Zustand + Immer (状态管理)
• TanStack Query (数据获取)
• Vite (构建工具)

安装

pnpm add @funhub/platform

导出模块

| 模块 | 路径 | 说明 | |------|------|------| | base | @funhub/platform/base | 基础 UI 组件 | | biz | @funhub/platform/biz | 业务组件 | | utils | @funhub/platform/utils | 工具函数 | | service | @funhub/platform/service | API 服务层 | | hooks | @funhub/platform/hooks | React Hooks | | types | @funhub/platform/types | TypeScript 类型定义 | | store | @funhub/platform/store | 状态管理 |

基础组件 (Base)

Avatar    Badge    Box    Button    Card    Checkbox
Divider   Icons    Image  InfiniteScroll  Input  Link
List      Loading  Mask   Popover   Providers  Skeleton
Switch    Tabs     TagTabs  Text

业务组件 (Biz)

Basics (基础业务组件)

• header-nav - 头部导航组件
• logo - Logo 组件
• search - 搜索组件
  • basic-search - 基础搜索
  • filter-search - 过滤搜索
  • tag-search - 标签搜索

Business (业务组件)

• search-bar - 搜索栏组件
  • basic-search-bar - 基础搜索栏
  • filter-search-bar - 过滤搜索栏
  • tag-search-bar - 标签搜索栏

使用示例

使用基础组件

import { Button, Card, Input } from '@funhub/platform/base';

function App() {
  return (
    <Card>
      <Input placeholder='请输入...' />
      <Button variant='primary'>提交</Button>
    </Card>
  );
}

使用业务组件

import { BasicSearch } from '@funhub/platform/biz';

function App() {
  return <BasicSearch />;
}

使用工具函数

import { http } from '@funhub/platform/utils';

const data = await http.get('/api/data');

使用状态管理

import { useDemoStore } from '@funhub/platform/store';

function App() {
  const { data, setData } = useDemoStore();
  // ...
}

开发

# 开发模式（监听文件变化）
pnpm dev

# 构建
pnpm build

# 发布
pnpm pp

代码规范

ESLint

pnpm lint         # 检查代码问题
pnpm fix          # 自动修复问题

文件组织规范

命名规范

所有文件和文件夹使用 kebab-case 命名。

组件组织方式

方式一：多文件组件（文件夹组织）

list/
├── index.ts           # 统一导出
├── list.tsx           # 主组件
└── list-item.tsx      # 子组件

方式二：单文件组件

button.tsx
card.tsx
input.tsx

相关文档

• 完整文档 (待上线)
• 更新日志