@steedos/service-plugin-amis 3.0.0-beta.133 → 3.0.0-beta.135

package/main/default/client/amis.render.client.js

@@ -33,4 +33,386 @@
         console.error(error)
     };
 
+    const getAmisLng = ()=>{
+        var locale = Builder.settings.context.user ? Builder.settings.context.user.language : null;
+        if(locale){
+            locale = locale.replace('_', '-');
+            locale = locale === 'en' ? 'en-US' : locale;
+            locale = locale === 'zh' ? 'zh-CN' : locale;
+            locale = locale === 'cn' ? 'zh-CN' : locale;
+            return locale
+        }
+        return 'zh-CN'
+    }
+
+    // 此处不能使用import, client js 编译时会将import 转为require, 导致加载失败
+    // import('/unpkg.com/@steedos-ui/amis/dist/amis-sdk.umd.min.js').then(() => {
+        Promise.all([
+            waitForThing(window, 'assetsLoaded'),
+            waitForThing(window, 'amis'),
+        ]).then(()=>{
+            // window.React = window.__React;
+            // window.ReactDOM = window.__ReactDOM;
+            const AmisRenderers = [];
+            let amis = (window.amisRequire && window.amisRequire('amis')) || window.Amis;
+            let amisVersion = amis && amis.version;
+            if(amisVersion){
+              const amisVersionClassName = "amis-" + amisVersion.split(".")[0] + "-" + amisVersion.split(".")[1];
+              document.getElementsByTagName('body')[0].className += " " + amisVersionClassName;
+            }
+            let amisLib = amisRequire('amis');
+            amisLib.registerFilter('t', function (key,param) {
+              return typeof key === 'string' ? window.t(key,param) : key;
+            });
+            const registerMap = {
+              renderer: amisLib.Renderer,
+              formitem: amisLib.FormItem,
+              options: amisLib.OptionsControl,
+            };
+
+            const amisComps = lodash.filter(Builder.registry['meta-components'], function(item){ return item.componentName && item.amis && item.amis.render});
+            
+            lodash.each(amisComps,(comp)=>{
+                const Component = Builder.components.find(item => item.name === comp.componentName);
+                var type = null;
+                if(comp.amis){
+                  type = comp.amis.render.type
+                }
+                if (Component && !AmisRenderers.includes(type)){
+                    try {
+                        let AmisWrapper = Component.class
+                        AmisRenderers.push(type);
+                        if(comp.componentType === 'amisSchema'){
+                            let amisReact = amisRequire('react');
+                            AmisWrapper = function(props){
+                              // console.log(`AmisWrapper===>`, props)
+                              const { $schema, body, render } = props
+                              const [schema, setSchema] = amisReact.useState(null);
+                              amisReact.useEffect(()=>{
+                                // console.log("AmisWrapper===>==useEffect==", comp.amis.render.type, JSON.stringify(props.data?.recordId))
+                                const result = Component.class(props);
+                                if(result.then && typeof result.then === 'function'){
+                                  result.then((data)=>{
+                                    // console.log("AmisWrapper===>==useEffect==setSchema", data)
+                                    setSchema(data);
+                                  })
+                                }else{
+                                  // console.log("AmisWrapper===>==useEffect==result", result)
+                                  setSchema(result)
+                                }
+                              }, [JSON.stringify($schema)]) //, JSON.stringify(props.data)
+
+                              if (!schema)
+                                return;
+                                // return render('body', {
+                                //   "type": "wrapper",
+                                //   "className": "h-full flex items-center justify-center",
+                                //   "body": {
+                                //     "type": "spinner",
+                                //     "show": true
+                                //   }
+                                // })
+
+                              if (props.env.enableAMISDebug && schema) {
+                                console.groupCollapsed(`[steedos render ${type}]`);
+                                console.trace('Component: ', props, 'Generated Amis Schema: ', schema);
+                                console.groupEnd();
+                              }
+                              return amisReact.createElement(amisReact.Fragment, null, amisReact.createElement(amisReact.Fragment, null, schema && render ? render('body', schema) : ''));
+                            }
+                          }
+                        // 注册amis渲染器
+                        let asset = comp.amis.render;
+                        if (!registerMap[asset.usage]) {
+                          console.error(
+                            `自定义组件注册失败，不存在${asset.usage}自定义组件类型。`, comp
+                          );
+                        } else {
+                          registerMap[asset.usage]({
+                            test: new RegExp(`(^|\/)${asset.type}`),
+                            type: asset.type,
+                            weight: asset.weight,
+                            autoVar: true,
+                          })(AmisWrapper);
+                          // 记录当前创建的amis自定义组件
+                          console.debug('注册了一个自定义amis组件:', {
+                            type: asset.type,
+                            weight: asset.weight,
+                            component: AmisWrapper,
+                            framework: asset.framework,
+                            usage: asset.usage,
+                          });
+                        }
+                        // amisRequire("amis").Renderer(
+                        //     {
+                        //         type: comp.amis?.render.type,
+                        //         weight: comp.amis?.render.weight,
+                        //         autoVar: true,
+                        //     }
+                        // )(AmisWrapper);
+                    } catch(e){console.error(e)}
+                }
+            });
+
+            const normalizeLink = (to, location = window.location) => {
+                to = to || '';
+              
+                if (to && to[0] === '#') {
+                  to = location.pathname + location.search + to;
+                } else if (to && to[0] === '?') {
+                  to = location.pathname + to;
+                }
+              
+                const idx = to.indexOf('?');
+                const idx2 = to.indexOf('#');
+                let pathname = ~idx
+                  ? to.substring(0, idx)
+                  : ~idx2
+                  ? to.substring(0, idx2)
+                  : to;
+                let search = ~idx ? to.substring(idx, ~idx2 ? idx2 : undefined) : '';
+                let hash = ~idx2 ? to.substring(idx2) : location.hash;
+              
+                if (!pathname) {
+                  pathname = location.pathname;
+                } else if (pathname[0] != '/' && !/^https?\:\/\//.test(pathname)) {
+                  let relativeBase = location.pathname;
+                  const paths = relativeBase.split('/');
+                  paths.pop();
+                  let m;
+                  while ((m = /^\.\.?\//.exec(pathname))) {
+                    if (m[0] === '../') {
+                      paths.pop();
+                    }
+                    pathname = pathname.substring(m[0].length);
+                  }
+                  pathname = paths.concat(pathname).join('/');
+                }
+              
+                return pathname + search + hash;
+              };
+            const isCurrentUrl = (to, ctx)=>{
+              try {
+                if (!to) {
+                  return false;
+                }
+                const pathname = window.location.pathname;
+                const link = normalizeLink(to, {
+                  ...location,
+                  pathname,
+                  hash: ''
+                });
+              
+                if (!~link.indexOf('http') && ~link.indexOf(':')) {
+                  let strict = ctx && ctx.strict;
+                  return match(link, {
+                    decode: decodeURIComponent,
+                    strict: typeof strict !== 'undefined' ? strict : true
+                  })(pathname);
+                }
+                return decodeURI(pathname) === link || decodeURI(pathname).startsWith(`${link}/`);
+              } catch (error) {
+                console.error(`error`, error)
+              }
+            }
+            AmisEnv = {
+                // getModalContainer: (props)=>{
+                //     let div = document.querySelector("#amisModalContainer");
+                //     if(!div){
+                //         div = document.createElement('div');
+                //         div.className="amis-scope";
+                //         div.style.height='0px';
+                //         div.id="amisModalContainer";
+                //         document.body.appendChild(div)
+                //     }
+                //     return div;
+                // },
+                // 如果这里不配置env.notify，那么会走amis 默认的env.notify，它会造成随机把toast组件dom插入到不同的scope容器内（应该是插入到最后一个加载的scope），这在苹果手机上可能会造成弹出的通知z-index不生效的情况，出现通知被档住的问题
+                notify: (type, msg)=>{
+                  var tpl = msg.props && msg.props.schema.tpl;
+                  if(tpl){
+                    SteedosUI.message[type](tpl)
+                  }else if(typeof msg == 'string'){
+                    SteedosUI.message[type](msg)
+                  }else{
+                    console.warn('notify', type, msg)
+                  }
+                },
+                jumpTo: (to, action) => {
+                  if (to === 'goBack') {
+                      return window.history.back();
+                  }
+
+                  to = normalizeLink(to);
+
+                  if (action && action.actionType === 'url') {
+                      action.blank === false ? (window.location.href = to) : window.open(to);
+                      return;
+                  }
+
+                  // 主要是支持 nav 中的跳转
+                  if (action && to && action.target) {
+                      window.open(to, action.target);
+                      return;
+                  }
+
+                  if (/^https?:\/\//.test(to)) {
+                      window.location.replace(to);
+                  } else {
+                      FlowRouter.go(to);
+                  }
+                },
+                theme: 'antd',
+                isCurrentUrl: isCurrentUrl,
+                requestAdaptor: (config)=>{
+                    if(config.allowCredentials == false){
+                      config.withCredentials = false;
+                      delete config.allowCredentials
+                    }
+                    // url是相对路径
+                    if(config.url && (!/^http[s]?:\/\//i.test(config.url))){
+                      if(!config.headers){
+                        config.headers = {}
+                      }
+
+                      if(!config.headers.Authorization && Builder.settings.context && Builder.settings.context.tenantId && Builder.settings.context.authToken){
+                        config.headers.Authorization = `Bearer ${Builder.settings.context.tenantId},${Builder.settings.context.authToken}`;
+                      }
+                    }
+                    return config;
+                },
+                responseAdaptor: function(api, payload, query, request, response){
+                  if(payload.statusCode === 500 && payload.message){
+                    payload = {
+                      "status": payload.statusCode,
+                      "msg": payload.message
+                    }
+                  }
+                  return payload;
+                }
+            };
+            // 已弃用
+            const AmisRender = function (props) {
+                let env = props.env;
+                const schema = props.schema;
+                const data = props.data;
+                const name = props.name;
+                const refName = schema.name || schema.id;
+                if(SteedosUI.refs[refName]){
+                  if(SteedosUI.refs[refName].unmount){
+                    try {
+                      SteedosUI.refs[refName].unmount()
+                    } catch (Exception) {
+                    }
+                  }else{
+                    console.log(`not find amis scope unmount`)
+                  }
+                }
+
+                if(props.pageType === 'form'){
+                    env = Object.assign({
+                        getModalContainer: ()=>{
+                            return document.querySelector('.amis-scope');
+                        }
+                    }, env);
+                }
+                schema.scopeRef = (ref) => {
+                    try {
+                      if(!window.amisScopes){
+                        window.amisScopes = {};
+                      }
+                      if(name){
+                        window.amisScopes[name] = ref; 
+                      }
+                    } catch (error) {
+                      console.error('error', error)
+                    }
+                    
+                    return scoped = ref
+                  }
+
+                
+                let amisReact = amisRequire('react');
+
+                amisReact.useEffect(()=>{
+                    const amisScope = amisRequire('amis/embed').embed(`.steedos-amis-render-scope-${name}`,schema, {data, name, locale: getAmisLng()}, Object.assign({}, AmisEnv, env))
+                    const refName = schema.name || schema.id;
+                    if(window.SteedosUI && refName){
+                      SteedosUI.refs[refName] = amisScope;
+                    }
+                  }, [])
+                return amisReact.createElement("div", {
+                    className: "amis-scope"
+                  }, amisReact.createElement("div", {
+                    className: `steedos-amis-render-scope-${name}`
+                  }));
+            };
+
+            window.renderAmis = function (root, schema, data, env) {
+              // console.log("===window.renderAmis===root, env===", root, env);
+              // console.log("===window.renderAmis===data===", data);
+              const refName = schema.name || schema.id;
+              if(SteedosUI.refs[refName]){
+                if(SteedosUI.refs[refName].unmount){
+                  try {
+                    SteedosUI.refs[refName].unmount()
+                  } catch (Exception) {
+                  }
+                }else{
+                  console.log(`not find amis scope unmount`)
+                }
+              }
+
+              // if(props.pageType === 'form'){
+              //     env = Object.assign({
+              //         getModalContainer: ()=>{
+              //             return document.querySelector('.amis-scope');
+              //         }
+              //     }, env);
+              // }
+              schema.scopeRef = (ref) => {
+                  try {
+                    if(!window.amisScopes){
+                      window.amisScopes = {};
+                    }
+                    if(name){
+                      window.amisScopes[name] = ref; 
+                    }
+                  } catch (error) {
+                    console.error('error', error)
+                  }
+                  
+                  return scoped = ref
+                }
+
+                const amisScope = amisRequire('amis/embed').embed(root, schema, {data, name, locale: getAmisLng()}, Object.assign({getModalContainer: ()=>{ return document.querySelector('body');}}, AmisEnv, env))
+                if(window.SteedosUI && refName){
+                  SteedosUI.refs[refName] = amisScope;
+                  SteedosUI.refs[refName].__$schema = schema;
+                }
+            };
+
+            const initMonaco = ()=>{
+                return Promise.resolve(true)
+            }
+            //Amis SDK 中已清理了monaco, 所以这里需要提前注册,否则会导致amis code类型报错
+            initMonaco().catch((err)=>{
+                console.error(`Builder.initMonaco error: ${err}`);
+            }).finally(()=>{
+                const language = getAmisLng()
+                axios.get(`/translations/amis/${language}.json`).then((res)=>{
+                    amisRequire("amis").registerLocale(`${language}`, res.data)
+                    Builder.registerComponent(AmisRender, {
+                        name: 'Amis',
+                        inputs: [
+                            { name: 'schema', type: 'object' },
+                            { name: 'data', type: 'object' },
+                            { name: 'name', type: 'string' }
+                        ]
+                    });
+                })
+            });
+        });
+    // });
+
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steedos/service-plugin-amis",
-  "version": "3.0.0-beta.133",
+  "version": "3.0.0-beta.135",
   "main": "package.service.js",
   "scripts": {
     "build": "yarn build:tailwind-base && yarn build:tailwind",
@@ -12,7 +12,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "31ae90031b62c49f733ca7cf1cd232cfba1b77b4",
+  "gitHead": "c145c558cece638878fd1c0688326fc20c7529f5",
   "devDependencies": {
     "tailwindcss": "^3.4.17"
   }

package/public/tailwind/tailwind-steedos.css

@@ -64,10 +64,6 @@
   position: absolute
 }
 
-.relative {
-  position: relative
-}
-
 .sticky {
   position: sticky
 }
@@ -76,14 +72,6 @@
   grid-column: span 2 / span 2
 }
 
-.float-start {
-  float: inline-start
-}
-
-.float-end {
-  float: inline-end
-}
-
 .float-right {
   float: right
 }
@@ -104,11 +92,6 @@
   margin: auto
 }
 
-.mx-2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem
-}
-
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem
@@ -152,10 +135,6 @@
   margin-right: 0.25rem
 }
 
-.mr-2 {
-  margin-right: 0.5rem
-}
-
 .mr-4 {
   margin-right: 1rem
 }
@@ -184,10 +163,6 @@
   display: flex
 }
 
-.inline-flex {
-  display: inline-flex
-}
-
 .table {
   display: table
 }
@@ -308,10 +283,6 @@
   border-bottom-width: 1px
 }
 
-.border-t {
-  border-top-width: 1px
-}
-
 .border-none {
   border-style: none
 }
@@ -488,11 +459,6 @@
     border-radius: 0.5rem
   }
 
-  .sm\:rounded-b-lg {
-    border-bottom-right-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem
-  }
-
   .sm\:border {
     border-width: 1px
   }