safety-eval-service-frontend/.cursor/skills/specs/13-云组件使用规范/07-手动导入与样式管理/SKILL.md

name	description
jjb-cloud-component-manual-import	定义 JJB 云组件手动导入与样式管理规范。在使用 ImportCloudComponent、useUnMountCloudComponentStyle 时查阅。

云组件使用规范

手动导入与样式管理

手动导入云组件（ImportCloudComponent）

当需要手动控制云组件的加载时机时，可以使用 ImportCloudComponent：

import { ImportCloudComponent } from '@cqsjjb/jjb-cloud-component';
import React, { useState, useEffect } from 'react';

function MyPage() {
  const [Component, setComponent] = useState(null);

  useEffect(() => {
    async function loadComponent() {
      try {
        const { module, styleId, isNewVersion } = await ImportCloudComponent({
          from: 'https://example.com/my-component.js',
          dependencies: {
            react: React
          },
          cache: 'force-cache',
          headers: {
            'Authorization': 'Bearer token'
          }
        });

        console.log('样式ID:', styleId);
        console.log('是否新版:', isNewVersion);
        console.log('组件信息:', module.info);

        // 新版云组件需要调用函数获取组件
        const CloudComponent = isNewVersion 
          ? module.default({ 
              ref: null,
              $$dependencies: { react: React }
            })
          : module.default;

        setComponent(() => CloudComponent);
      } catch (error) {
        console.error('加载失败:', error);
      }
    }

    loadComponent();
  }, []);

  if (!Component) {
    return <Spin />;
  }

  return <Component title="Hello" />;
}

样式管理

自动样式管理

云组件的样式会自动注入到页面中，并在组件销毁时自动清理。

手动卸载样式

当需要手动卸载云组件样式时，可以使用 useUnMountCloudComponentStyle：

import { useUnMountCloudComponentStyle } from '@cqsjjb/jjb-cloud-component';

function MyPage() {
  const styleId = 'style-id-123';

  const handleUnmount = () => {
    // 手动卸载指定样式的云组件
    useUnMountCloudComponentStyle(styleId);
  };

  return (
    <>
      <Button onClick={handleUnmount}>卸载样式</Button>
      {/* ... */}
    </>
  );
}