安装并使用 Card SDK

let c = document.createElement('script');
c.src = 'https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.13/libs/cn/ui.js';
document.body.appendChild(c);

import React, { useCallback, useEffect, useRef } from 'react';

// 定义 CozeCard 组件，用于创建和管理 CozeWebSDK.WebCardRuntime 实例
const CozeCard = () => {
  // 使用 useRef 创建一个可变的引用对象，用于保存 CozeWebSDK.WebCardRuntime 实例
  const clientRef = useRef();

  // 使用 useCallback 缓存函数，避免组件重新渲染时函数重新创建
  const genCard = useCallback((elem) => {
    // 如果传入的元素为空，直接返回
    if (!elem) {
      return;data 
    }
    // 如果之前已经存在 CozeWebSDK.WebCardRuntime 实例，先销毁它
    if (clientRef.current) {
      clientRef.current.destroy();
    }
    // 创建新的 CozeWebSDK.WebCardRuntime 实例并保存到 clientRef 中
    clientRef.current = new CozeWebSDK.WebCardRuntime({
      // 指定要渲染的 DOM 元素
      el: elem,
      // 自定义组件映射，定义特定组件的渲染逻辑
      customComponentMap: {
        // 自定义 NewImage 组件的渲染逻辑
        '@flowpd/cici-components/NewImage': ({ name, element, props }) => {
          // 打印开发调试信息
          console.log("[dev]", { name, element, props });
          // 设置元素的 HTML 内容
          element.innerHTML = `Test`;
          // 设置元素的宽度
          element.style.width = '100px';
          // 设置元素的高度
          element.style.height = '100px';
          // 设置元素的背景颜色
          element.style.background = 'red';
          // 返回一个销毁函数，用于处理组件卸载时的清理工作
          return () => {
            // destroy, 例如react 等问题
          };
        },
        // 自定义 ColumnLayout1_2 组件的渲染逻辑
        '@flowpd/cici-components/ColumnLayout1_2': ({ name, element, props, renderChildren }) => {
          // 从 props 中解构出 Columns 属性
          const { Columns } = props;
          // 遍历 Columns 数组，渲染每个子元素
          Columns.map((column) => {
            const { content } = column;
            const elem = renderChildren(content());
            element.appendChild(elem);
          });
          // 打印开发调试信息
          console.log("[dev]", { name, element, props });
          // 设置元素的背景颜色
          element.style.background = 'yellow';
          // 设置元素的显示方式为弹性布局
          element.style.display = 'flex';
        },
      },
      // 运行时配置选项
      runtimeOptions: {
        // 解析后的 JSON 数据，定义组件的结构和属性
        dsl: JSON.parse(
          '{"elements":{"7c1EN9VHwU":{"id":"7c1EN9VHwU","name":"FlowpdCiciComponentsColumnLayout1_2","type":"@flowpd/cici-components/ColumnLayout1_2","props":{"Columns":[{"children":["DQKOI54sJV"],"config":{"vertical":"top","width":"auto"},"type":"slot"},{"children":["FE8Y2GcSwb","L3gNU6QxiI"],"config":{"vertical":"top","weight":2,"width":"weighted"},"type":"slot"}],"action":"enableUrl","backgroundColor":"transparent","enableClickEvent":true,"url":{"type":"expression","value":"{{url}}"}},"directives":{}},"DQKOI54sJV":{"id":"DQKOI54sJV","name":"FlowpdCiciComponentsNewImage","type":"@flowpd/cici-components/NewImage","props":{"action":"enableUrl","crop":"aspectFill","enableClickEvent":false,"enableCrop":false,"fixedSize":"medium","mode":"fixed","ratio":"1:1","src":{"type":"expression","value":"{{image}}"}},"directives":{}},"FE8Y2GcSwb":{"id":"FE8Y2GcSwb","name":"FlowpdCiciComponentsText","type":"@flowpd/cici-components/Text","props":{"action":"enableUrl","color":"neutral-100","content":{"type":"expression","value":"{{title}}"},"enableClickEvent":false,"enableLines":true,"fontSize":"large","fontWeight":"bold","lines":1,"textAlign":"left"},"directives":{}},"L3gNU6QxiI":{"id":"L3gNU6QxiI","name":"FlowpdCiciComponentsText","type":"@flowpd/cici-components/Text","props":{"action":"enableUrl","color":"neutral-70","content":{"type":"expression","value":"{{content}}"},"enableClickEvent":false,"enableLines":true,"fontSize":"small","fontWeight":"normal","lines":2,"textAlign":"left"},"directives":{}},"root":{"id":"root","name":"Root","type":"@flowpd/cici-components/PageContainer","children":["7c1EN9VHwU"],"directives":{}}},"rootID":"root","variables":{"content":{"ID":"content","name":"content","defaultValue":"26/22℃ 无持续风向3-4级 28/24℃ 无持续风向<3级 30/25℃ 无持续风向<3级 26/22℃ 无持续风向3-4级 28/24℃ 无持续风向<3级 30/25℃ 无持续风向<3级"},"image":{"ID":"image","name":"image","defaultValue":""},"title":{"ID":"title","name":"title","defaultValue":"【深圳天气预报15天_深圳天气预报15天查询】-中国天气网"},"url":{"ID":"url","name":"url"}}}'
        ),
        // 是否只读
        readonly: false,
        // 是否强制远程加载
        remoteForce: false,
        // 主题样式
        theme: 'dark',
        // 语言设置
        lang: 'en',
        // 渲染完成后的回调函数
        afterRender: () => {
          console.log('[dev] afterRender');
        },
      },
    });
  }, []);

  // 使用 useEffect 处理组件卸载时的清理工作
  useEffect(() => {
    // 返回一个清理函数，在组件卸载时销毁 CozeWebSDK.WebCardRuntime 实例
    return () => {
      clientRef.current?.destroy();
    };
  }, []);

  // 返回组件的 JSX 结构
  return (
    <>
      {/* 定义一个按钮，点击时更新运行时的主题为 light */}
      <button
        onClick={() => {
          clientRef.current?.updateRuntimeOptions({
            theme: 'light',
          });
        }}
      >
        ChangeTheme
      </button>
      {/* 定义一个 div 元素，使用 ref 绑定 genCard 函数，用于初始化 CozeWebSDK.WebCardRuntime 实例 */}
      <div ref={elem => genCard(elem)} style={{
        margin: '10px',
        width: '500px'
      }} />
    </>
  );
};

// 定义 TestCardDemo 组件，用于渲染两个 CozeCard 组件
const TestCardDemo: React.FC = () => {
  return (
    <div>
      <CozeCard />
      <CozeCard />
    </div>
  );
};

// 导出 TestCardDemo 组件，供其他模块使用
export default TestCardDemo;

type DestoryFunc = () => void;
type RenderCustomComponentFunc = (params: {
    name: string, 
    element: HTMLDivElement, 
    props: Record<string, any>, 
    renderChildren: (node: React.ReactNode) => HTMLDivElement}
) => DestoryFunc | void;

interface {
     customComponentMap?: Record<string, RenderCustomComponentFunc>;
}

customComponentMap: {
    '@flowpd/cici-components/NewImage': ({ name, element, props }) => {
      element.style.width = '100px';
      element.style.height = '100px';
      const renderRoot = createRoot(element); //使用react渲染组件
      renderRoot.render(<div style={{
        width: '100%',
        height: '100%',
        background: 'red',
      }}>
        Image Test
      </div>);
      return () => {
        renderRoot.unmount(); //销毁函数
      }
    }
}