@cloudbase/lowcode-builder 1.8.44-alpha.0 → 1.8.45-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/lowcode-builder",
-  "version": "1.8.44-alpha.0",
+  "version": "1.8.45-beta.1",
   "description": "云开发 Tencent CloudBase Framework Low Code Plugin，将低码配置生成完整项目并一键部署云开发资源。",
   "author": "yhsunshining@gmail.com",
   "homepage": "https://github.com/TencentCloudBase/cloudbase-framework#readme",
@@ -31,9 +31,10 @@
     "build": "tsc",
     "test:build": "ts-node ./__tests__/build.ts",
     "dev:web:serve": "rm -rf dist && node ./webpack/scripts/web.pre.js && cross-env NODE_ENV=development webpack-dev-server --config ./webpack/web.config.js",
-    "dev:web": "rm -rf dist && node ./webpack/scripts/web.pre.js && cross-env NODE_ENV=development webpack --config ./webpack/web.config.js && node ./webpack/scripts/web.post.js",
-    "build:web": "rm -rf dist && node ./webpack/scripts/web.pre.js && cross-env NODE_ENV=production webpack --config ./webpack/web.config.js && node ./webpack/scripts/web.post.js",
-    "build:template": "./scripts/buildTemplate.sh"
+    "dev:web": "rm -rf dist && cross-env NODE_ENV=development webpack --config ./webpack/web.config.js",
+    "build:web": "rm -rf dist && cross-env NODE_ENV=production webpack --config ./webpack/web.config.js && cp -Rf dist/ lib/",
+    "build:template": "./scripts/buildTemplate.sh",
+    "release": "yarn npm whoami --publish && npm run build && npm run build:web && yarn set version 1.22.19 && yarn config set version-tag-prefix '@cloudbase/lowcode-builder@' && yarn version --no-commit-hooks --message 'chore(builder): v%s' && yarn config set version-tag-prefix v && yarn set version 3.6.2 && yarn npm publish"
   },
   "bugs": {
     "url": "https://github.com/TencentCloudBase/cloudbase-framework/issues"
@@ -41,7 +42,7 @@
   "dependencies": {
     "@babel/core": "7.21.4",
     "@babel/preset-env": "7.21.4",
-    "@cloudbase/cals": "^1.0.29",
+    "@cloudbase/cals": "^1.0.31-beta.1",
     "@cloudbase/lowcode-generator": "^1.8.14",
     "axios": "^0.21.0",
     "browserfs": "^1.4.3",

package/template/mp/common/merge-renderer.js

@@ -14,7 +14,7 @@ export default {
     }
     for (const id in widgets) {
       const props = widgets[id]
-      dataFactory['<%= dataPropNames.widgetProp %>' + id] = () => resolveWidgetData(props)
+      dataFactory['<%= dataPropNames.widgetProp %>' + id] = () => resolveWidgetData(props, id)
     }
     const disposers = []
     for (const k in dataFactory) {

package/template/mp/common/modal/index.js

@@ -0,0 +1,200 @@
+function classNames(...args) {
+  const classes = [];
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (!arg) continue;
+
+    const argType = typeof arg;
+
+    if (argType === 'string' || argType === 'number') {
+      classes.push(arg);
+    } else if (Array.isArray(arg)) {
+      if (arg.length) {
+        const inner = classes.push(classNames(...arg));
+        if (inner) {
+          classes.push(inner);
+        }
+      }
+    } else if (argType === 'object') {
+      if (arg.toString === Object.prototype.toString) {
+        Object.keys(arg).forEach((key) => {
+          arg[key] && classes.push(key);
+        });
+      } else {
+        classes.push(arg.toString());
+      }
+    }
+  }
+
+  return classes.join(' ');
+}
+
+const WD_PREFIX = 'wd'
+
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  behaviors: [],
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+    defaultShow: {
+      type: Boolean,
+      value: false,
+    },
+    position: {
+      type: String,
+      value: 'bottom',
+    },
+    closeType: {
+      type: Array,
+      value: ['mask'],
+    },
+    defaultMaskShow: {
+      type: Boolean,
+      value: true,
+    },
+  },
+  data: {
+    cls: '',
+    styleMain: '',
+    styleShow: '',
+    classPrefix: WD_PREFIX,
+    modalMaskClasses: '', // 遮罩层样式
+    modalBdClasses: '', // 主体内容样式
+    isBdShow: true, // 弹窗主体内容显示控制
+    isMaskShow: false, // 弹窗遮罩层显示控制
+    maskPreToShow: false, // 弹窗遮罩层预显示控制，为了动画
+    openInfo: null,
+    closeInfo: null,
+  },
+  lifetimes: {
+    attached() {
+      // this.updateWidgetAPI();
+    },
+  },
+  methods: {
+    updateWidgetAPI() {
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          open: this.onOpen.bind(this),
+          close: this.onClose.bind(this),
+          modalState: this.data.isBdShow ? 'open' : 'close',
+          openInfo: this.data.openInfo,
+          closeInfo: this.data.closeInfo,
+        });
+    },
+    /**
+     * 控制弹窗打开/关闭
+     * @param {Boolean} isOpen
+     */
+    dealShow(isOpen) {
+      let setImmediately = {
+        maskPreToShow: true,
+        isMaskShow: !isOpen,
+        isBdShow: isOpen,
+      };
+
+      if (!isOpen) {
+        setImmediately = {
+          isBdShow: isOpen,
+          isMaskShow: !isOpen,
+          maskPreToShow: false,
+        };
+      }
+
+      this.setData(setImmediately);
+
+      this.triggerEvent(isOpen ? 'open' : 'close');
+    },
+    /**
+     * 关闭弹窗
+     */
+    onClose(params) {
+      this.dealShow(false);
+      this.setData({ closeInfo: params?.info || params });
+    },
+    /**
+     * 开启弹窗
+     */
+    onOpen(params) {
+      this.dealShow(true);
+      this.setData({ openInfo: params?.info || params });
+    },
+    /**
+     * 点击遮罩层
+     */
+    maskClick() {
+      if (this.data.closeType.includes('mask')) {
+        this.onClose();
+      }
+    },
+  },
+  observers: {
+    'style,className,position,isMaskShow,defaultMaskShow,isBdShow': function (
+      style,
+      className,
+      position,
+      isMaskShow,
+      defaultMaskShow,
+      isBdShow
+    ) {
+      const defaultWidth = { center: 'calc(100% - 4.57rem)', bottom: '100%' }[
+        position
+      ];
+      const styleShow = `width: ${defaultWidth};` + style;
+      const styleMain = style?.match(/(display:).*?(;)/g)?.join('');
+
+      // 响应式css api
+      const cls = classNames({
+        [`${WD_PREFIX}-modal`]: true,
+        [`${WD_PREFIX}-modal-center`]: position === 'center',
+        [`${WD_PREFIX}-mp-modal`]: true,
+        [`${WD_PREFIX}-mp-modal-hide`]: !isBdShow,
+        [className]: className,
+      });
+      // 遮罩层样式
+      const modalMaskClasses = classNames({
+        [`${WD_PREFIX}-modal-mask`]: true,
+        [`${WD_PREFIX}-modal-mask__fadein`]: true,
+        [`${WD_PREFIX}-modal-mask__fadeout`]: isMaskShow,
+        [`${WD_PREFIX}-modal-mask__hide`]: !defaultMaskShow,
+      });
+      // 主体内容样式
+      const modalBdClasses = classNames({
+        'weda-modal-new': true,
+        [`${WD_PREFIX}-modal-bd`]: true,
+        [`${WD_PREFIX}-modal-bd__toggle`]: isBdShow,
+        [`${WD_PREFIX}-modal-bd__box`]:
+          !defaultMaskShow && position === 'center',
+      });
+
+      this.setData({
+        styleMain,
+        styleShow,
+        cls,
+        modalMaskClasses,
+        modalBdClasses,
+      });
+    },
+    defaultShow: function (defaultShow) {
+      this.dealShow(defaultShow);
+    },
+    'isBdShow,openInfo,closeInfo': function () {
+      this.updateWidgetAPI();
+    },
+  },
+});

package/template/mp/common/modal/index.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {}
+}

package/template/mp/common/modal/index.wxml

@@ -0,0 +1,16 @@
+<view id="{{id}}" style="{{styleMain}}" class="{{cls}}">
+  <block wx:if="{{maskPreToShow}}">
+    <view class="{{modalMaskClasses}}" bindtap="maskClick" />
+    <view style="{{styleShow}}" class="{{modalBdClasses}}">
+      <view class="{{classPrefix + '-modal-bd__hd'}}">
+        <slot name="headerSlot"></slot>
+      </view>
+      <view class="{{classPrefix + '-modal-bd__main'}}">
+        <slot name="contentSlot"></slot>
+      </view>
+      <view class="{{classPrefix + '-modal-bd__ft'}}">
+        <slot name="footerSlot"></slot>
+      </view>
+    </view>
+  </block>
+</view>

package/template/mp/common/modal/index.wxss

@@ -0,0 +1 @@
+@import './wd-modal.wxss';

package/template/mp/common/modal/wd-modal.wxss

@@ -0,0 +1,177 @@
+@charset "UTF-8";
+@-webkit-keyframes wd-fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes wd-fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes wd-fadeout {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes wd-fadeout {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.wd-modal {
+  position: fixed;
+  z-index: 1000;
+}
+.wd-modal-mask {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  z-index: 1000;
+}
+.wd-modal-mask__fadein {
+  animation: wd-fadein 0.3s forwards;
+}
+.wd-modal-mask__fadeout {
+  animation: wd-fadeout 0.3s forwards;
+}
+.wd-modal-mask__hide {
+  background: transparent;
+}
+.wd-modal-bd {
+  overflow: hidden;
+  position: fixed;
+  left: 50%;
+  bottom: 0;
+  background: #fff;
+  box-sizing: border-box;
+  z-index: 1001;
+  transform: translate(-50%, 100%);
+  transition: all 0.3s;
+  height: inherit;
+  width: inherit;
+  overflow-y: auto;
+  border: 0.5px solid #dcdcdc;
+  display: flex;
+  flex-direction: column;
+}
+.wd-modal-bd__box {
+  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.05), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 8px 10px rgba(0, 0, 0, 0.08);
+}
+.wd-modal-bd__toggle {
+  transform: translate(-50%, 0);
+}
+.wd-modal-bd__hd {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font: var(--wd-typography-title-lg);
+}
+.wd-modal-bd__hd:empty {
+  margin-bottom: 0;
+}
+.wd-modal-bd__hd .wd-icon {
+  margin-left: auto;
+}
+.wd-modal-bd__main {
+  flex: 1;
+  overflow-y: auto;
+  color: #16181a;
+}
+.wd-modal-bd__main:empty {
+  margin-top: 0;
+}
+.wd-modal-bd__ft {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wd-modal-bd__ft:empty {
+  margin-top: 0;
+}
+.wd-modal-bd__ft .wd-btn {
+  margin-right: 12px;
+}
+
+.wd-modal-center .wd-modal-bd {
+  bottom: 50%;
+  transform: translate(-50%, 50%);
+  opacity: 0;
+}
+.wd-modal-center .wd-modal-bd__toggle {
+  opacity: 1;
+}
+
+.wd-modal {
+  left: 0;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+.wd-modal.wd-mp-modal-hide {
+  z-index: -1;
+}
+.wd-modal-center {
+  align-items: center;
+}
+.wd-modal-center .wd-modal-bd {
+  transform: unset;
+}
+.wd-modal-bd {
+  border-radius: 24rpx 24rpx 0 0;
+  padding: 64rpx 48rpx 48rpx 48rpx;
+  max-height: 1412rpx;
+  position: static;
+}
+.wd-modal-bd__hd {
+  margin-bottom: 16rpx;
+}
+.wd-modal-bd__main {
+  font-size: 32rpx;
+}
+.wd-modal-bd__ft {
+  margin-top: 48rpx;
+}
+.wd-modal-bd__ft-btn {
+  border-radius: 12rpx;
+  margin-right: 24rpx;
+  padding: 16rpx 48rpx;
+  font-size: 32rpx;
+}
+.wd-modal-bd__toggle {
+  transform: unset;
+}
+
+.wd-modal-center .wd-modal-bd {
+  border-radius: 24rpx;
+}
+
+.weda-modal-new.wd-modal-bd {
+  padding: 32rpx 24rpx 24rpx 24rpx;
+  padding-bottom: 24rpx;
+  padding-bottom: calc(constant(safe-area-inset-bottom) + 24rpx);
+  /* 兼容 iOS < 11.2 */
+  padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
+  /* 兼容 iOS >= 11.2 */
+}

package/template/mp/common/privacyModal/index.json

@@ -1,10 +1,7 @@
 {
   "component": true,
-  "styleIsolation": "shared",
+  "styleIsolation": "apply-shared",
   "usingComponents": {
-    "modal": "/materials/gsd-h5-react/components/wd-modal/index",
-    "text": "/materials/gsd-h5-react/components/wd-text/index",
-    "icon": "/materials/gsd-h5-react/components/wd-icon/index",
-    "wd-button": "/materials/gsd-h5-react/components/wd-button/index"
+    "modal": "/common/modal/index"
   }
 }

package/template/mp/common/privacyModal/index.wxml

@@ -1,11 +1,11 @@
-<modal defaultShow="{{visible}}" closeType="{{[]}}">
-  <text level="title-6" text="{{title}}" slot="headerSlot">{{title}}</text>
-  <icon style="color: rgba(0, 0, 0, 0.6);" name="td:close" size="md" bind:tap="handleDisagree" slot="headerSlot"/>
+<modal className="privacy" defaultShow="{{visible}}" closeType="{{[]}}">
+  <text class="{{textClass}} wd-typography-title-lg" slot="headerSlot">{{title}}</text>
+  <view class="wd-icon t-icon t-icon-close wd-icon--md wd-mp-icon" style="color: rgba(0, 0, 0, 0.6);" bind:tap="handleDisagree" slot="headerSlot"></view>
 
-  <text style="display:inline;" level="body-default" text="{{desc1}}" slot="contentSlot" />
-  <text style="display:inline;color: var(--wd-color-brand)" level="body-default" text="{{urlTitle}}" slot="contentSlot" bindtap="openPrivacyContract" />
-  <text style="display:inline;" level="body-default" text="{{desc2}}" slot="contentSlot" />
+  <text class="{{textClass}}" style="display:inline;" level="body-default" slot="contentSlot">{{desc1}}</text>
+  <text class="{{textClass}}" style="display:inline;color: var(--wd-color-brand)" level="body-default" slot="contentSlot" bindtap="openPrivacyContract">{{urlTitle}}</text>
+  <text class="{{textClass}}" style="display:inline;" level="body-default" slot="contentSlot">{{desc2}}</text>
 
-  <wd-button text="取消" slot="footerSlot" theme="secondary" variant="outline" size="md" bindtap="handleDisagree"/>
-  <button class="wd-btn wd-btn--primary wd-btn--base wd-btn--md wd-mp-btn" id="agree-btn" theme="primary" variant="base" size="md" open-type="agreePrivacyAuthorization" bindtap="close" bindagreeprivacyauthorization="handleAgree" slot="footerSlot">同意</button>
+  <button class="privacy-btn wd-btn wd-btn--secondary wd-btn--outline wd-btn--md wd-mp-btn" slot="footerSlot" theme="secondary" variant="outline" size="md" bind:tap="handleDisagree">取消</button>
+  <button class="privacy-btn wd-btn wd-btn--primary wd-btn--base wd-btn--md wd-mp-btn" id="agree-btn" type="primary" variant="base" size="default" open-type="agreePrivacyAuthorization" bindtap="close" bindagreeprivacyauthorization="handleAgree" slot="footerSlot">同意</button>
 </modal>

package/template/mp/common/privacyModal/index.wxss

@@ -1,5 +1,18 @@
 /* common/privacyModel/index.wxss */
-.weda-modal-new {
+
+.privacy .weda-modal-new {
   padding: 32rpx 24rpx 24rpx 24rpx;
-  padding-bottom: 24rpx !important;
+  padding-bottom: 24rpx;
+  padding-bottom: calc(constant(safe-area-inset-bottom) + 24rpx);
+  /* 兼容 iOS < 11.2 */
+  padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
+  /* 兼容 iOS >= 11.2 */
+}
+
+.privacy-btn {
+  font-size: 28rpx;
+  width: 200rpx;
+  height: 70rpx;
+  line-height: 70rpx;
+  margin: 0
 }

package/template/mp/common/util.js

@@ -419,8 +419,8 @@ export async function getAuthConfig() {
 
 let _AUTH_CACHE_MAP = {};
 
-async function getAccessPermission(app, appId, subAppId = "", pageId) {
-  const cacheKey = subAppId ? `${appId}-${subAppId}-${pageId}` : `${appId}-${pageId}`;
+async function getAccessPermission(app, appId, pageId) {
+  const cacheKey = `${appId}-${pageId}`;
   if (_AUTH_CACHE_MAP[cacheKey] !== undefined) {
     return _AUTH_CACHE_MAP[cacheKey];
   }
@@ -482,19 +482,7 @@ export async function checkAuth(app, appId, $page) {
     return true;
   }
   wx.showNavigationBarLoading();
-  let subAppId = '';
-  if ($page.packageName) {
-    if ($page.__internal__.subAppId) {
-      subAppId = $page.__internal__.subAppId
-    } else {
-      const matched = $page.packageName.match(/packages\/(.*)$/);
-      if (matched?.[1]) {
-        subAppId = `sub-${matched[1]}`
-      }
-    }
-  }
-
-  const requestList = [getAccessPermission(app, appId, subAppId, $page.id)];
+  const requestList = [getAccessPermission(app, appId, $page.id)];
   // 暂时先认为有登录页则自定义登录功能开启且生效
   if (loginPage) {
     requestList.push(getAuthConfig(app));
@@ -553,7 +541,6 @@ export function redirectToLogin(currentPage) {
     app.redirectTo({
       pageId: loginPage.id,
       params: {
-        packageName: currentPage.packageName || undefined,
         sourcePageId: currentPage.id,
         sourcePageParams: currentPage.params || currentPage.dataset?.params,
       },

package/template/mp/common/widget.js

@@ -51,7 +51,7 @@ const EXTRA_PROPS_MAP = [
   return map;
 }, {});
 
-function resolveWidgetProp(props) {
+function resolveWidgetProp(props, widgetId) {
   let { classList = [], _staticResourceAttribute = ['src'], ...restProps } = props;
   const data = {};
   Object.keys(restProps).forEach((key) => {
@@ -64,7 +64,7 @@ function resolveWidgetProp(props) {
     data[key] = restProps[key];
   });
   data.style = styleToCss(restProps.style);
-  data.className = classList.join ? classList.join(' ') : classList;
+  data.className = `${widgetId ? `wd-comp-id-${widgetId}` : ''} ${classList.join ? classList.join(' ') : classList}`;
 
   _staticResourceAttribute?.forEach?.((property) => {
     processStaticResourceAttribute(data, undefined, property);
@@ -73,11 +73,11 @@ function resolveWidgetProp(props) {
 }
 
 // widget prop -> wxml data
-export function resolveWidgetData(props) {
+export function resolveWidgetData(props, widgetId) {
   if (!Array.isArray(props)) {
-    return resolveWidgetProp(props);
+    return resolveWidgetProp(props, widgetId);
   }
-  return props.map(resolveWidgetData);
+  return props.map(prop => resolveWidgetData(prop, widgetId));
 }
 
 export function createWidgets(widgetProps, dataBinds, ownerMpInst, widgetHolder) {
@@ -591,7 +591,7 @@ export function disposeWidget(widget, noRecursive = false) {
 export function createInitData(widgets, dataBinds, keyPrefix = '') {
   return Object.keys(widgets).reduce((result, id) => {
     if (!isWidgetInFor(id, widgets, dataBinds)) {
-      result[keyPrefix + id] = resolveWidgetData(widgets[id]);
+      result[keyPrefix + id] = resolveWidgetData(widgets[id], id);
     } else {
       result[keyPrefix + id] = [];
     }

package/template/mp/page/api.js

@@ -2,10 +2,8 @@ import { $w as baseAPI } from '<%= subLevelPath %>../../app/weapps-api'
 
 export const $page = {
   __internal__: {
-    active: false,
-    subAppId: '<%= subAppId %>',
+    active: false
   },
-  packageName: '<%= packageName %>',
   uuid: '<%= uuid %>',
   label: '<%= label %>',