@cloudbase/framework-plugin-low-code 0.7.0 → 0.7.2-beta.1

package/template/src/handlers/render.jsx

@@ -1,17 +1,117 @@
 import * as React from 'react';
-import { useRef } from 'react';
 import * as _ from 'lodash';
-import { CompRenderer, ForContext } from './FieldMiddleware/renderer';
+import { ForContext, getComponentRenderList } from './FieldMiddleware/renderer';
 import { isScopeSlot } from '../utils/index';
+import { observer } from 'mobx-react-lite';
 
-function getComponentChildren(component) {
+export function getComponentChildren(component, context = {}) {
   const { properties } = component;
   if (!properties) {
     return [];
   }
-  return Object.values(properties).sort(
+  const list = Object.values(properties).sort(
     (a, b) => (a['x-index'] || 0) - (b['x-index'] || 0)
   );
+  const {
+    virtualFields,
+    codeContext,
+    scopeContext,
+    forContext,
+    injectContext = {},
+    dataContext,
+    updateContext,
+  } = context;
+
+  return list.map((schema) => {
+    return getRenderList({
+      key: schema.key,
+      componentSchema: schema,
+      rootNode: false,
+      renderSlot: false,
+      virtualFields,
+      codeContext,
+      scopeContext,
+      forContext,
+      injectContext,
+      context: dataContext,
+      updateContext,
+    });
+  });
+}
+
+function getRenderList(props) {
+  const {
+    key = '',
+    className,
+    virtualFields,
+    componentSchema,
+    renderSlot,
+    rootNode = true,
+    codeContext,
+    scopeContext = {},
+    context = {},
+    updateContext,
+    forContext = {},
+  } = props;
+
+  const { 'x-props': xProps, properties = {} } = componentSchema;
+
+  // 判断是否为 slot
+  const isSlot = !xProps;
+  if (isSlot && !(renderSlot || rootNode)) {
+    return null;
+  }
+
+  // const preClassName = useRef();
+
+  // wrapperClass
+  const containerEl = Object.values(properties)[0];
+  if (containerEl && containerEl['x-props'] && className) {
+    let { classNameList = [] } = containerEl['x-props'];
+
+    // 先替换掉先前计算出来的className部分
+    // if (preClassName.current) {
+    //   if (preClassName.current !== className) {
+    //     classNameList = classNameList.filter(
+    //       (clsName) => clsName !== preClassName.current
+    //     );
+    //     preClassName.current = className;
+    //   }
+    // } else {
+    //   preClassName.current = className;
+    // }
+
+    containerEl['x-props'].classNameList = Array.from(
+      new Set([className, ...classNameList])
+    );
+  }
+
+  if (xProps && xProps.sourceKey) {
+    const { sourceKey } = xProps;
+    const Field = virtualFields[sourceKey];
+    if (!Field) {
+      return (
+        <div style={{ color: 'red' }}>
+          组件<em>{sourceKey}</em>未找到
+        </div>
+      );
+    }
+  }
+
+  return getComponentRenderList({
+    key,
+    componentSchema,
+    id: componentSchema.key,
+    xProps,
+    emitEvents: componentSchema.emitEvents || [],
+    virtualFields,
+    renderSlot,
+    codeContext,
+    scopeContext,
+    forContext,
+    context,
+    updateContext,
+  });
 }
 
 export function generateSlotMetaMap(componentSchema, context, options = {}) {
@@ -36,14 +136,10 @@ export function generateSlotMetaMap(componentSchema, context, options = {}) {
         node: isHOC
           ? (props) => {
               let clonedScopeContext = _.cloneDeep(scopeContext);
-              _.set(
-                clonedScopeContext,
-                `${componentSchema.key}.${child.key}`,
-                props
-              );
+              _.set(clonedScopeContext, `${componentSchema.key}.${key}`, props);
               return (
                 <AppRender
-                  key={child.key}
+                  key={key}
                   componentSchema={child}
                   renderSlot={options?.renderSlot}
                   virtualFields={virtualFields}
@@ -58,7 +154,7 @@ export function generateSlotMetaMap(componentSchema, context, options = {}) {
               return (
                 <ForContext.Provider value={forContext}>
                   <AppRender
-                    key={child.key}
+                    key={key}
                     componentSchema={child}
                     renderSlot={options?.renderSlot}
                     virtualFields={virtualFields}
@@ -76,89 +172,10 @@ export function generateSlotMetaMap(componentSchema, context, options = {}) {
   return slots;
 }
 
-export function AppRender(props) {
-  const {
-    className,
-    virtualFields,
-    componentSchema,
-    renderSlot,
-    rootNode = true,
-    codeContext,
-    scopeContext = {},
-    context = {},
-    updateContext,
-  } = props;
-
-  const { 'x-props': xProps, properties = {} } = componentSchema;
-
-  // 判断是否为 slot
-  const isSlot = !xProps;
-  if (isSlot && !(renderSlot || rootNode)) {
-    return null;
-  }
-
-  const preClassName = useRef();
-
-  // wrapperClass
-  const containerEl = Object.values(properties)[0];
-  if (containerEl && containerEl['x-props'] && className) {
-    let { classNameList = [] } = containerEl['x-props'];
-
-    // 先替换掉先前计算出来的className部分
-    if (preClassName.current) {
-      if (preClassName.current !== className) {
-        classNameList = classNameList.filter(
-          (clsName) => clsName !== preClassName.current
-        );
-        preClassName.current = className;
-      }
-    } else {
-      preClassName.current = className;
-    }
-
-    containerEl['x-props'].classNameList = [className, ...classNameList];
-  }
-
-  if (xProps && xProps.sourceKey) {
-    const { sourceKey } = xProps;
-    const Field = virtualFields[sourceKey];
-    if (!Field) {
-      return (
-        <div style={{ color: 'red' }}>
-          组件<em>{sourceKey}</em>未找到
-        </div>
-      );
-    }
-  }
-
-  const children = getComponentChildren(componentSchema);
-
-  return (
-    <CompRenderer
-      id={componentSchema.key}
-      xProps={xProps}
-      emitEvents={componentSchema.emitEvents || []}
-      componentSchema={componentSchema}
-      virtualFields={virtualFields}
-      renderSlot={renderSlot}
-      codeContext={codeContext}
-      scopeContext={scopeContext}
-      context={context}
-      updateContext={updateContext}
-    >
-      {children.map((comp) => (
-        <AppRender
-          key={comp.key}
-          componentSchema={comp}
-          rootNode={false}
-          renderSlot={false}
-          virtualFields={virtualFields}
-          codeContext={codeContext}
-          scopeContext={scopeContext}
-          context={context}
-          updateContext={updateContext}
-        />
-      ))}
-    </CompRenderer>
-  );
-}
+export const AppRender = observer(function (props) {
+  return getRenderList({
+    ...props,
+    forContext: React.useContext(ForContext),
+    injectContext: {},
+  });
+});

package/template/src/handlers/utils/common.js

@@ -84,7 +84,7 @@ export function resolveComponentProps(props, isPlainProps) {
       ...props,
     };
   }
-  const { data = {}, events = [], ...restProps } = props;
+  const { data = {}, events = [], $node, ...restProps } = props;
   const customProps = { ...data };
   const builtinProps = [
     // react 保留字
@@ -150,12 +150,12 @@ export function getStaticResourceAttribute(staticUrl) {
 }
 
 export function findLoginPage(app = window.app) {
-  const { pages = [] } = app.utils._getConfig();
+  const { pages = [] } = app.__internal__.getConfig();
   return pages.find(item => item.type === 'login');
 }
 
 let _AUTH_CONFIG_CACHE = null;
-async function getAuthConfig(app = window.app) {
+export async function getAuthConfig(app = window.app) {
   if (_AUTH_CONFIG_CACHE) {
     return _AUTH_CONFIG_CACHE;
   }
@@ -209,6 +209,19 @@ async function getAccessPermission(app, appId, pageId) {
   return isAccess
 }
 
+export async function checkAnonymous() {
+  // 用户是否非匿名登录前端判断条件：有accessToken且scope不为anonymous
+  // 此分支逻辑本不应该前端判断是否登录，历史原因后端短期内搞不定，后续后端优化后删除
+  let isAnonymous = true;
+  try {
+    const [scope, { accessToken }] = await Promise.all([loginScope(), getAccessToken()]);
+    if (accessToken && scope !== 'anonymous') {
+      isAnonymous = false;
+    }
+  } catch (e) { }
+  return isAnonymous;
+}
+
 /**
  * 检查页面权限
  **/
@@ -223,31 +236,24 @@ export async function checkAuth(app, appId, $page) {
   // 暂时先认为有登录页则自定义登录功能开启且生效
   if (loginPage) {
     requestList.push(getAuthConfig(app));
+    requestList.push(checkAnonymous());
   }
-  const [isAccess, authConfig] = await Promise.all(requestList);
+  const [isAccess, authConfig, isAnonymous] = await Promise.all(requestList);
   app.hideNavigationBarLoading();
 
-  if (!isAccess) {
-    if (loginPage && (authConfig.NeedLogin || authConfig.RejectStrategy == 'to_login')) {
-      redirectToLogin($page);
-    } else {
-      app.showToast({
-        title: '页面无访问权限',
-        icon: 'error',
-      });
-    }
-  } else if (loginPage && authConfig.NeedLogin) {
-    // 此分支逻辑本不应该前端判断是否登录，历史原因后端短期内搞不定，后续后端优化后删除
-    try {
-      const [scope, { accessToken }] = await Promise.all([loginScope(), getAccessToken()]);
-      if (!accessToken || scope === 'anonymous') {
-        redirectToLogin($page);
-      }
-    } catch (e) {
-      console.error('获取身份失败', e);
+  if (loginPage && isAnonymous) {
+    if (authConfig.NeedLogin || (!isAccess && authConfig.RejectStrategy === 'to_login')) {
       redirectToLogin($page);
+      return isAccess;
     }
   }
+
+  if (!isAccess) {
+    app.showToast({
+      title: '页面无访问权限',
+      icon: 'error',
+    });
+  }
   return isAccess;
 }
 

package/template/src/index.jsx

@@ -12,7 +12,7 @@ import attachFastClick from 'fastclick'
 import { initWebConfig } from 'handlers/lifecycle'
 const AppConfig = require('../webpack/miniprogram.config')
 import { app } from './app/global-api'
-import { redirectToLogin, findLoginPage, getAuthConfig } from './handlers/utils'
+import { redirectToLogin, findLoginPage, getAuthConfig, checkAnonymous } from './handlers/utils'
 // app 中注册配置页面以及app的全局配置miniprogram.config，h5里分app以及web页分别处理，使用process.env.isApp 区分判断
 if (process.env.isApp) {
   initWebConfig(app, AppConfig);
@@ -63,7 +63,8 @@ setConfig({
       const loginPage = findLoginPage();
       if (loginPage) {
         const authConfig = await getAuthConfig();
-        if (authConfig.NeedLogin || authConfig.RejectStrategy == 'to_login') {
+        const isAnonymous = await checkAnonymous();
+        if (isAnonymous && authConfig.RejectStrategy == 'to_login') {
           redirectToLogin();
         } else if (authConfig.RejectStrategy == 'show_warning') {
           app.showToast({

package/template/src/pages/app.tpl

@@ -78,37 +78,19 @@ initLifeCycle({
 export default function App() {
   // 检查权限
   const [weDaHasLogin, setWeDaHasLogin] = React.useState(false);
-  const context = React.useRef(observable({})).current;
+  const dataContextRef =  React.useRef(observable({}))
+  const context = dataContextRef.current;
   const containerRef = React.useRef(null);
   const microApp = React.useRef(null);
   const pureSrc = '<%= pageSource %>';
   const isPure = !!pureSrc;
 
-  /**
-   * 更新数据容器的上下文的方法
-   * 会传递到事件emit的地方，将从组件获取到的数据data赋值给上下文
-   * 当组件卸载时，传过来的data为undefined即可
-   * {
-   *   id1: [{...}],
-   *   id2: {...},
-   *   id3: undefined,
-   *   id4: null,
-   *   ...
-   * }
-   * @param id
-   * @param data
-   */
-  const updateContext = (id, data) => {
-    if (id) {
-      context[id] = { data };
-    }
-  }
-
   React.useEffect(() => {
     Object.assign($page, {
       id: '<%= pageName %>',
       state: observable(initPageState),
       computed: createComputed(computed),
+      // _context: context,
       handler,
     });
 
@@ -134,10 +116,10 @@ export default function App() {
   }, []);
 
   React.useEffect(() => {
-    $page.widgets = createWidgets(widgetsContext, dataBinds, {}, context);
+    $page.widgets = createWidgets(widgetsContext, dataBinds, {}, dataContextRef.current);
     // widgets 内的 dataBinds 可能需要关联 widgets，需要重新执行 dataBinds
     retryDataBinds();
-  }, [context]);
+  }, [dataContextRef.current]);
 
   // Web 环境页面级别生命周期
   if (!process.env.isMiniprogram) {
@@ -179,8 +161,27 @@ export default function App() {
         <AppRender pageListenerInstances={pageListenerInstances}
           virtualFields={virtualFields}
           componentSchema={componentSchema}
-          context={context}
-          updateContext={updateContext}
+          context={dataContextRef.current}
+           /**
+            * 更新数据容器的上下文的方法
+            * 会传递到事件emit的地方，将从组件获取到的数据data赋值给上下文
+            * 当组件卸载时，传过来的data为undefined即可
+            * {
+            *   id1: [{...}],
+            *   id2: {...},
+            *   id3: undefined,
+            *   id4: null,
+            *   ...
+            * }
+            * @param id
+            * @param data
+            */
+          updateContext={(id, data) => {
+            if (id) {
+              dataContextRef.current[id] = { data };
+              // console.log('111', context[id])
+            }
+          }}
         />
       )}
     </div>

package/template/src/utils/formatEnum.js

@@ -0,0 +1,42 @@
+import { observable } from 'mobx';
+let loading = {};
+export let enumOptions = observable({});
+export function formatEnum(path, optionname) {
+  // 判断是单选还是多选
+  let isSingle = Array.isArray(path);
+  // 获取到options
+  let parseOptions = getEnumOptions(optionname);
+  if (parseOptions === '') {
+    return !isSingle ? path : path.join(',');
+  }
+  let multiTmp = [];
+  let value = !isSingle
+    ? JSON.parse(parseOptions)?.find((item) => item?.key === path)?.value
+    : JSON.parse(parseOptions)
+        ?.filter((item) => path.some((pathValue) => item?.key === pathValue))
+        .map((item) => multiTmp.push(item?.value));
+  // 对多选或者单选有不同处理
+  return !isSingle ? value : multiTmp?.join(',');
+}
+function getEnumOptions(optionName) {
+  if (enumOptions[optionName]) {
+    return enumOptions[optionName];
+  }
+  if (!loading[optionName]) {
+    loading[optionName] = true;
+    getGeneralOptions(optionName).then((data) => {
+      enumOptions[optionName] = data?.Items[0]?.Config;
+    });
+  }
+  return '';
+}
+export async function getGeneralOptions(optionName) {
+  return app.cloud.callWedaApi({
+    action: 'DescribeGeneralOptionsDetailList',
+    data: {
+      PageSize: 1,
+      PageIndex: 1,
+      LikeNameOrTitle: optionName,
+    },
+  });
+}