示例: UI组件与样式配置 Demo

本文档提供了关于通过 css 接口控制组件样式的实时代码示例。

依赖库导入

import { Postmate } from "@nobook/nobook-saas-sdk";
import { Button } from "antd";

实时编辑器

function setCss() { const [styleType, setStyleType] = useState(0); // 0: 不显示 1: 播放器模式 2: 编辑器模式 const [labIndex, setLabIndex] = useState(0); const [postMate, setPostMate] = useState(null); const [communication, setCommunication] = useState(null); const [labList] = useState([ { name: "电与磁", uuid: "res-a40b09d7454c1081adacf0da5b91c912" }, { name: "光学", uuid: "res-0057fb7bb2a7903d007ee4c5e8c56872" }, { name: "力学", uuid: "res-d76e4bde443c821b4cccb3a00c1a5cb8" }, { name: "电与磁", uuid: "res-68f5d8d86bff60495f1140a2930ebd88" }, ]); const styleTypeParams = { 1: { // 播放器样式 leftToolbarVisible: true, playerToolBarVisible: true, infoVisible: true, settingsMenuVisible: true, topToolbarVisible: false, rightToolbarVisible: false, bottomToolbarVisible: false, css: { leftToolbar: { circuitBtn: { left: "30px", top: "0px", }, mechDiyTool: { left: "30px", top: "0px", }, forceSettingBtns: { left: "30px", top: "0px", }, }, playerToolbar: { pc: { right: 0, bottom: "20px", }, }, }, }, 2: { // 编辑器样式 topToolbarVisible: true, leftToolbarVisible: true, rightToolbarVisible: true, bottomToolbarVisible: true, settingsMenuVisible: true, infoVisible: true, playerToolBarVisible: false, css: { info: { hasEquipmentDrawer: { top: "60px", }, }, leftToolbar: { circuitBtn: { left: "0px", top: "70px", }, mechDiyTool: { left: "0px", top: "70px", }, forceSettingBtns: { left: "auto", top: "70px", }, }, }, }, }; const container = useRef(null); useEffect(() => { (async () => { const uuids = labList.map((item) => item.uuid); const urls = await getPlayerURLs(uuids); labList.forEach((item, index) => { item.url = urls[index]; }); if (container.current) { const param = new Postmate({ container: container.current }); setPostMate(param); } })(); return () => { if (postMate) { postMate.destroy(); // 离开页面,销毁 postMate setPostMate(null); } }; }, []); useEffect(async () => { if (postMate) { try { if (communication) communication.destroy(); const param = await postMate.init(labList[labIndex].url); setCommunication(param); } catch (err) { console.log("~创建链接失败: ", err); } } }, [labIndex, postMate]); useEffect(async () => { if (communication) { communication.get("config", styleTypeParams[styleType]); } }, [communication, styleType]); return ( <div> <div> <div className="iframe-container" ref={container}></div> <div> <span>选择实验室样式：</span> <Button onClick={() => { setStyleType(2); }} > 显示编辑器样式 </Button> <Button onClick={() => { setStyleType(1); }} > 显示播放器样式 </Button> </div> <div> <span>选择实验室模块：</span> {labList.map((item, index) => { return ( <Button key={index} onClick={() => setLabIndex(index)}> {item.name} </Button> ); })} </div> </div> </div> ); }

function setCss() {
  const [styleType, setStyleType] = useState(0); // 0: 不显示 1: 播放器模式 2: 编辑器模式
  const [labIndex, setLabIndex] = useState(0);
  const [postMate, setPostMate] = useState(null);
  const [communication, setCommunication] = useState(null);
  const [labList] = useState([
    { name: "电与磁", uuid: "res-a40b09d7454c1081adacf0da5b91c912" },
    { name: "光学", uuid: "res-0057fb7bb2a7903d007ee4c5e8c56872" },
    { name: "力学", uuid: "res-d76e4bde443c821b4cccb3a00c1a5cb8" },
    { name: "电与磁", uuid: "res-68f5d8d86bff60495f1140a2930ebd88" },
  ]);
  const styleTypeParams = {
    1: { // 播放器样式
      leftToolbarVisible: true,
      playerToolBarVisible: true,
      infoVisible: true,
      settingsMenuVisible: true,
      topToolbarVisible: false,
      rightToolbarVisible: false,
      bottomToolbarVisible: false,
      css: {
        leftToolbar: {
          circuitBtn: {
            left: "30px",
            top: "0px",
          },
          mechDiyTool: {
            left: "30px",
            top: "0px",
          },
          forceSettingBtns: {
            left: "30px",
            top: "0px",
          },
        },
        playerToolbar: {
          pc: {
            right: 0,
            bottom: "20px",
          },
        },
      },
    },
    2: { // 编辑器样式
      topToolbarVisible: true,
      leftToolbarVisible: true,
      rightToolbarVisible: true,
      bottomToolbarVisible: true,
      settingsMenuVisible: true,
      infoVisible: true,
      playerToolBarVisible: false,
      css: {
        info: {
          hasEquipmentDrawer: {
            top: "60px",
          },
        },
        leftToolbar: {
          circuitBtn: {
            left: "0px",
            top: "70px",
          },
          mechDiyTool: {
            left: "0px",
            top: "70px",
          },
          forceSettingBtns: {
            left: "auto",
            top: "70px",
          },
        },
      },
    },
  };
  const container = useRef(null);

  useEffect(() => {
    (async () => {
      const uuids = labList.map((item) => item.uuid);
      const urls = await getPlayerURLs(uuids);
      labList.forEach((item, index) => {
        item.url = urls[index];
      });
      if (container.current) {
        const param = new Postmate({ container: container.current });
        setPostMate(param);
      }
    })();
    return () => {
      if (postMate) {
        postMate.destroy(); // 离开页面,销毁 postMate
        setPostMate(null);
      }
    };
  }, []);

  useEffect(async () => {
    if (postMate) {
      try {
        if (communication) communication.destroy();
        const param = await postMate.init(labList[labIndex].url);
        setCommunication(param);
      } catch (err) {
        console.log("~创建链接失败: ", err);
      }
    }
  }, [labIndex, postMate]);

  useEffect(async () => {
    if (communication) {
      communication.get("config", styleTypeParams[styleType]);
    }
  }, [communication, styleType]);

  return (
    <div>
      <div>
        <div className="iframe-container" ref={container}></div>
        <div>
          <span>选择实验室样式：</span>
          <Button
            onClick={() => {
              setStyleType(2);
            }}
          >
            显示编辑器样式
          </Button>
          <Button
            onClick={() => {
              setStyleType(1);
            }}
          >
            显示播放器样式
          </Button>
        </div>
        <div>
          <span>选择实验室模块：</span>
          {labList.map((item, index) => {
            return (
              <Button key={index} onClick={() => setLabIndex(index)}>
                {item.name}
              </Button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

结果

Loading...