宜搭 web会打出一个 资源包

方案一 项目对接

资源包

components 资源

  1. import Coms from '@xxx/yida-web/src/components'
  2. import {
  3.   VisionCanvasLBus,
  4. } from '@xxx/yida-web'
  6. const {
  7.   // 容器
  8.   BaseVisionLContainer,
  9.   FormVisionLContainer,
  10.   AbsVisionLContainer,
  11.   // 组件
  12.   LabelText,
  13.   ButtonCom,
  14.   InputCom,
  15.   VisionTable
  16. } = Coms
  18. VisionCanvasLBus.registerComponent(LabelText, 'LabelText')
  19. VisionCanvasLBus.registerComponent(BaseVisionLContainer, 'BaseVisionLContainer')
  20. VisionCanvasLBus.registerComponent(FormVisionLContainer, 'FormVisionLContainer')
  21. VisionCanvasLBus.registerComponent(AbsVisionLContainer, 'AbsVisionLContainer')
  22. VisionCanvasLBus.registerComponent(ButtonCom, 'Button')
  23. VisionCanvasLBus.registerComponent(InputCom, 'Input', ViewInputCom)
  24. VisionCanvasLBus.registerComponent(VisionTable, 'VisionTable', ViewVisionTable)

核心资源

1.npm install @xxx/yida-web

  1. .vision-canvas-demo-container {
  2.   display: flex;
  3.   height: calc(100vh - 50px);
  4.   background-color: #fff;
  5.   .vision-canvas-header {
  6.     background-color: #fff;
  7.     height: 50px;
  8.     border-bottom: 1px solid rgb(204, 204, 204);
  9.     width: 100%;
  10.     display: flex;
  11.     justify-content: space-between;
  12.     align-items: center;
  13.     .margin-r-20 {
  14.       margin-right: 20px;
  15.     }
  16.   }
  17.   .vision-canvas-demo {
  18.     min-width: 1440px;
  19.     display: flex;
  20.     width: 100%;
  21.     position: absolute;
  22.     top: 50px;
  23.     left: 0;
  24.     right: 0;
  25.     bottom: 0;
  27.     .vision-canvas-l-left {
  28.       flex: none;
  29.       width: 48px;
  30.       height: 100%;
  31.       overflow: hidden;
  33.       .ant-collapse-content {
  34.         .ant-collapse-content-box {
  35.           .viewNode {
  36.             border: 1px rgba(0, 0, 0, 0) solid !important;
  38.             &:hover {
  39.               border: 1px solid #3384F3 !important;
  40.             }
  41.           }
  42.         }
  43.       }
  44.     }
  46.     .vision-canvas-conter {
  47.       width: calc(100%);
  48.       height: 100%;
  49.       overflow: hidden;
  51.       >div {
  52.         height: 100%;
  53.       }
  54.     }
  56.     .vision-canvas-l-conter {
  57.       width: calc(100% - 348px);
  58.       height: 100%;
  59.       overflow: hidden;
  61.       border: 1px solid rgb(204, 204, 204);
  62.       padding: 12px;
  63.       background: #eceff3;
  65.       border: 1px solid #ccc;
  66.       border-top: none;
  68.       >div {
  69.         background-color: #fff;
  70.         height: 100%;
  71.         position: relative;
  72.         overflow: hidden;
  73.       }
  74.     }
  76.     .vision-canvas-l-right {
  77.       flex: none;
  78.       overflow: hidden;
  79.       width: 300px;
  80.       position: relative;
  81.       height: 100%;
  82.       overflow-y: auto;
  83.       z-index: 1001;
  84.     }
  85.   }
  86. }
  1. import {
  2.   VisionCanvasLBus,
  3.   VisionCanvasL,
  4. } from '@xxx/yida-web'
  5. import '../index.less';
  7. export class ViewTemplate extends React.Component<{
  8.   VisionCanvasLBus?: VisionCanvasL,
  9.   setLoading: (bool: boolean) => void;
  10. }> {
  12.   VisionCanvasLBus = VisionCanvasLBus;
  13.   VisionCanvasL: VisionCanvasL | null = null
  15.   constructor (props) {
  16.     super(props);
  17.     this.VisionCanvasLBus = props.VisionCanvasLBus || VisionCanvasLBus
  18.   }
  20.   componentDidMount () {
  21.     // 可以写支持的事件
  23.     // this.VisionCanvasLBus.pubSub.subscribe('canvas:didmount', () => {
  24.     //   console.log('canvas:didmount')
  25.     // });
  27.     // this.VisionCanvasLBus.pubSub.subscribe('canvas:mouseup', () => {
  28.     //   console.log('canvas:mouseup')
  29.     // });
  31.     // this.VisionCanvasLBus.pubSub.subscribe('canvas:click', () => {
  32.     //   console.log('canvas:click')
  33.     // });
  35.     // this.VisionCanvasLBus.pubSub.subscribe('canvas:mouseleave', () => {
  36.     //   console.log('canvas:mouseleave')
  37.     // });
  39.     // this.VisionCanvasLBus.pubSub.subscribe('canvas:mousemove', () => {
  40.     //   console.log('canvas:mousemove')
  41.     // });
  43.     // this.VisionCanvasLBus.pubSub.subscribe('canvas:unmount', () => {
  44.     //   console.log('canvas:unmount')
  45.     // });
  47.     // this.VisionCanvasLBus.pubSub.subscribe('node:mousedown', () => {
  48.     //   console.log('node:mousedown')
  49.     // });
  51.     // this.VisionCanvasLBus.pubSub.subscribe('node:mousemove', () => {
  52.     //   console.log('node:mousemove')
  53.     // });
  55.     // this.VisionCanvasLBus.pubSub.subscribe('node:mouseup', () => {
  56.     //   console.log('node:mouseup')
  57.     // });
  58.   }
  60.   getConfig () {
  61.     if (this.VisionCanvasL) {
  62.       // 例子
  63.       let __schema = '{"layout":"inline-block","nodes":[],"width":"","height":"","id":"VisionCanvasL_774d107f-f96b-4bb0-8a18-fca0edbb0712","attributeParams":{"params":{},"paramsConfig":[]},"dataSource":{},"dataSourceList":[],"componentIds":{},"formIds":{}}'
  65.       // 在这里请求数据，传入数据
  66.       (this.VisionCanvasL as VisionCanvasL).setJSONSchema(__schema)
  67.     }
  68.   }
  70.   render () {
  71.     return (
  72.       <div className='vision-canvas-demo-container'>
  73.         <div className='vision-canvas-demo' style={{
  74.           top:0,
  75.           position: 'fixed',
  76.           zIndex: 120,
  77.           backgroundColor: '#fff'
  78.         }}>
  79.           <div className='vision-canvas-conter' style={{ border: '1px solid #ccc' }}>
  80.             <VisionCanvasL
  81.               layout='inline-block'
  82.               moveFlag={false}
  83.               ref={(refCanvas) => {
  84.                 if (refCanvas) {
  85.                   this.VisionCanvasL = refCanvas;
  86.                   this.getConfig();
  87.                 }
  88.               }}
  89.             />
  90.           </div>
  91.         </div>
  92.       </div>
  93.     )
  94.   }
  95. }

数据资源
计划产出接口

  1. /**获取当前页面信息*/
  3. request(`${url}/yida-web-service/${applicationName}/${pageId}`).then(__schema => {
  4.     (this.VisionCanvasL as VisionCanvasL).setJSONSchema(__schema)
  5. })

方案二 JS对接方式

yida-web项目会打包出一个umd格式的js，
libraryName：XXXYidaBuild

  • applicationName
  • version
  • hash

通过后台某种方式写入到页面中

  1. /**js方式*/
  2. (function(){
  3.   const script = document.createElement("script");
  4.   const jsPath = `${url}/yida-web-service/${applicationName}/main.${version}.${hash}.js`
  6.  script.src = jsPath;
  7.  document.head.appendChild(script);
  9.  YidaWeb.render(document.getElementById("root"));
  10. })()

例子

  1. import React from 'react';
  3. export default function() {
  4.   let divContainer: HTMLElement | null;
  5.   const uuid = () => {
  6.     const s = [];
  7.     const hexDigits = '0123456789abcdef';
  8.     for (let i = 0; i < 36; i += 1) {
  9.       s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
  10.     }
  11.     s[14] = '4'; // bits 12-15 of the time_hi_and_version field to 0010
  12.     // bits 6-7 of the clock_seq_hi_and_reserved to 01
  13.     // @ts-ignore
  14.         s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // eslint-disable-line
  15.         s[8] = s[13] = s[18] = s[23] = '-'; // eslint-disable-line
  17.     return s.join('');
  18.   };
  19.   React.useEffect(() => {
  20.     const url = 'https://xxx.xxx.com'
  21.     if (document) {
  22.       if (!document.getElementById('xxx-build-config')) {
  23.         const configScript = document.createElement('script')
  24.         configScript.id = 'xxx-build-config'
  25.         configScript.src = `${url}/yida-web-service/new-admin1/config.js?uuid=${uuid()}`;
  26.         document.head.appendChild(configScript);
  28.         function mountLoop () {
  29.           // @ts-ignore
  30.           const XXXYidaBuild = window.XXXYidaBuild
  32.           if (!XXXYidaBuild || !document.getElementById('container')) {
  33.             setTimeout(() => {
  34.               mountLoop()
  35.             }, 100)
  36.             return
  37.           }
  39.           if (XXXYidaBuild.mount) {
  40.             XXXYidaBuild.mount({
  41.               container: 'container',
  42.               basename: '/v2/yida',
  43.               type: 'browser'
  44.             })
  45.           }
  46.         }
  48.         function loop () {
  49.           // @ts-ignore
  50.           const XXXBuildConfig = window.XXXBuildConfig;
  51.           if (!XXXBuildConfig) {
  52.             setTimeout(() => {
  53.               loop()
  54.             }, 100)
  55.             return
  56.           }
  58.           const XXXYidaBuildScript = document.createElement('script')
  59.           XXXYidaBuildScript.id = 'xxx-yida-build'
  60.           XXXYidaBuildScript.src = `${url}/yida-web-service/new-admin1/main.${XXXBuildConfig.version}.${XXXBuildConfig.hash}.js`;
  61.           document.head.appendChild(XXXYidaBuildScript);
  63.           mountLoop()
  64.         }
  66.         loop()
  67.       }
  68.     }
  69.   }, [])
  70.   return <>
  71.     <div id='container'>加载中...</div>
  72.   </>
  73. }