---
name: jjb-base-api-full-example
description: 定义 JJB 底座 baseAPI 完整使用示例。在整合 getUserInfo、systemInfo、getMenuInfoByPath、openFsPanel 时查阅。
---

# 底座平台API调用规范

## 完整示例

```javascript
import React, { useEffect, useState } from 'react';

function MyPage() {
  const [userInfo, setUserInfo] = useState(null);
  const [systemInfo, setSystemInfo] = useState(null);

  useEffect(() => {
    // 判断是否在底座中
    if (typeof window.__IN_BASE__ !== 'undefined') {
      // 获取用户信息
      base.getUserInfo({
        onSuccess: (data) => {
          setUserInfo(data);
          console.log('用户信息:', data);
        },
        onFail: (error) => {
          console.error('获取用户信息失败:', error);
        }
      });

      // 获取系统信息（同步）
      const sysInfo = base.systemInfo;
      setSystemInfo(sysInfo);
      console.log('系统信息:', sysInfo);

      // 监听表单引擎关闭事件
      const handleFormilyDesignExit = (e) => {
        const { data, type } = e.data;
        if (type === 'EVENT_FORMILY_DESIGN_EXIT') {
          console.log('表单设计数据:', data);
          // 处理表单设计数据
        }
      };

      window.addEventListener('message', handleFormilyDesignExit);

      // 清理函数
      return () => {
        window.removeEventListener('message', handleFormilyDesignExit);
      };
    } else {
      console.warn('当前应用不在底座中，无法使用 baseAPI');
    }
  }, []);

  const handleOpenMenu = async () => {
    if (typeof window.__IN_BASE__ !== 'undefined') {
      try {
        // 获取菜单信息
        const menuInfo = await base.call.getMenuInfoByPath({ path: '/user/list' });
        // 打开菜单
        base.call.openMenu(menuInfo, { id: 123 });
      } catch (error) {
        console.error('打开菜单失败:', error);
      }
    }
  };

  const handleOpenFileCenter = (e) => {
    e.stopPropagation(); // 必须阻止事件冒泡
    if (typeof window.__IN_BASE__ !== 'undefined') {
      base.call.openFsPanel({
        fileType: 'PICTURE',
        allowSelect: true,
        onOk: (selectedFileIds) => {
          console.log('选择的文件ID:', selectedFileIds);
        }
      });
    }
  };

  return (
    <div>
      {systemInfo && (
        <div>
          <p>租户ID: {systemInfo.baseTenantId}</p>
          <p>终端ID: {systemInfo.clientId}</p>
        </div>
      )}
      
      {userInfo && (
        <div>
          <p>用户信息已加载</p>
        </div>
      )}

      <button onClick={handleOpenMenu}>打开菜单</button>
      <button onClick={handleOpenFileCenter}>打开文件中心</button>
    </div>
  );
}

export default MyPage;
```