@cloudbase/lowcode-builder 1.8.105 → 1.8.106

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/lowcode-builder",
-  "version": "1.8.105",
+  "version": "1.8.106",
   "description": "云开发 Tencent CloudBase Framework Low Code Plugin，将低码配置生成完整项目并一键部署云开发资源。",
   "author": "yhsunshining@gmail.com",
   "homepage": "https://github.com/TencentCloudBase/cloudbase-framework#readme",
@@ -47,7 +47,7 @@
   "dependencies": {
     "@babel/core": "7.21.4",
     "@babel/preset-env": "7.21.4",
-    "@cloudbase/cals": "^1.1.4",
+    "@cloudbase/cals": "^1.1.5",
     "@cloudbase/lowcode-generator": "^1.8.33",
     "axios": "^0.21.0",
     "browserfs": "^1.4.3",

package/template/mp/package.json

@@ -3,11 +3,11 @@
   "version": "1.0.8",
   "scripts": {},
   "dependencies": {<% if(importJSSDK) {%>
-		"@cloudbase/js-sdk": "2.5.42-beta.0",<%
+		"@cloudbase/js-sdk": "2.5.45-beta.0",<%
     } %>
-		"@cloudbase/oauth": "0.1.1-alpha.6",
+		"@cloudbase/oauth": "0.1.1-alpha.11",
     "@cloudbase/weda-client": "1.0.34",
-    "@cloudbase/weda-cloud-sdk": "1.0.61",
+    "@cloudbase/weda-cloud-sdk": "1.0.63",
     "mobx": "^5.15.4",
     "lodash.get": "^4.4.2",
     "lodash.set": "^4.3.2",

package/template/mp/packages/$wd_system/pages/login/components/captchaDialog/index.js

@@ -0,0 +1,115 @@
+import { app } from '../../../../../../app/weapps-api';
+import { EXTRA_API } from '../../../../../../common/cloud-sdk';
+
+async function getAuth() {
+  const cloudbase = await app.cloud.getCloudInstance();
+  const auth = cloudbase.authInstance || cloudbase.auth;
+  return auth;
+}
+
+Component({
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared',
+    multipleSlots: true,
+  },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    token: String,
+    captchaData: String,
+    state: String,
+    visible: { type: Boolean, value: false },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    message: '',
+    key: '',
+    loading: false,
+  },
+
+  lifetimes: {
+    attached: function () {
+      EXTRA_API.EVENT_BUS.on('CAPTCHA_DATA_CHANGE', ({ token, url, state }) => {
+        this.setData({
+          visible: true,
+          state,
+          token,
+          captchaData: url,
+        });
+      });
+    },
+    detached() {
+      EXTRA_API.EVENT_BUS.off('CAPTCHA_DATA_CHANGE');
+    },
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    async _createCaptchaData() {
+      const auth = await getAuth();
+      try {
+        const { token, data } = await auth.createCaptchaData({
+          state: this.properties.state,
+        });
+
+        this.setData({
+          key: '',
+          token,
+          captchaData: data,
+        });
+      } catch (e) {
+        console.error(e);
+        this.setData({ message: `错误：${e.error || ''} - ${e.error_description || e.message}` });
+      }
+    },
+    async onRefresh() {
+      this.setData({ message: '' });
+      await this._createCaptchaData();
+    },
+    async onVerifyCaptchaData() {
+      const auth = await getAuth();
+      try {
+        const res = await auth.verifyCaptchaData({
+          token: this.data.token,
+          key: this.data.key,
+        });
+        this.setData({
+          message: '验证成功',
+        });
+        this.triggerEvent('sunmit', res);
+        EXTRA_API.EVENT_BUS.emit('RESOLVE_CAPTCHA_DATA', res);
+        wx.nextTick(() => {
+          this.setData({
+            visible: false,
+          });
+        });
+      } catch (e) {
+        console.error(e);
+        this.setData({ message: `输入字符和图片不匹配` });
+        await this._createCaptchaData();
+      }
+    },
+    onChange(e) {
+      this.setData({
+        key: e.detail.value,
+      });
+    },
+  },
+  observers: {
+    visible: function (visible) {
+      if (visible && (!this.data.token || !this.data.captchaData)) {
+        this.setData({ loading: true });
+        this._createCaptchaData().catch((e) => {
+          this.setData({ loading: false });
+        });
+      }
+    },
+  },
+});

package/template/mp/packages/$wd_system/pages/login/components/captchaDialog/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "mp-dialog": "weui-miniprogram/dialog/dialog"
+  }
+}

package/template/mp/packages/$wd_system/pages/login/components/captchaDialog/index.wxml

@@ -0,0 +1,24 @@
+<mp-dialog title="{{loading?'验证码获取中...':'请输入你看到的字符:'}}" show="{{visible}}" bindbuttontap="tapDialogButton">
+    <view id="loading" style="height:40px;margin: 20px 0;position:relative;" wx:if="{{loading}}">
+        <view class="spinner"></view>
+    </view>
+    <view class="container" wx:if="{{!loading}}">
+        <view class="input_field captch_box" style="text-align: left;">
+            <image alt="captcha" src="{{captchaData}}"></image>
+            <button class="weda-ui weda-button weui-btn weui-btn_primary wd-event-tap refreshButton" bindtap="onRefresh">
+                <view class="icon-redo"></view>
+            </button>
+        </view>
+        <view class="input_field captch_input">
+            <input type="text" placeholder="输入字符" maxlength="6" bindinput="onChange" value="{{key}}"></input>
+        </view>
+        <view class="message" style="color: var(--wd-color-error); font-size:14px;display:block;">
+            {{message}}
+        </view>
+        <view class="input_field button">
+            <button class="weda-ui weda-button weui-btn weui-btn_primary wd-event-tap" bindtap="onVerifyCaptchaData">
+                确定
+            </button>
+        </view>
+    </view>
+</mp-dialog>

package/template/mp/packages/$wd_system/pages/login/components/captchaDialog/index.wxss

@@ -0,0 +1,165 @@
+#loader {
+  background: #fff;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 9;
+}
+.spinner {
+  animation: 1s linear infinite spin;
+  border: 3px solid rgba(2, 158, 249, 0.2);
+  border-radius: 50%;
+  border-top-color: #029ef9;
+  bottom: 0;
+  height: 40px;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 40px;
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.input_field {
+  position: relative;
+  width: 100%;
+  height: 45px;
+  margin-top: 15px;
+}
+.input_field.captch_box {
+  height: 80px;
+}
+
+.captch_box image {
+  height: 70px;
+  width: 210px;
+  pointer-events: none;
+}
+
+.icon-redo,
+.icon-redo::before {
+  box-sizing: border-box;
+}
+body {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: 0 0;
+}
+.button button,
+.input_field input {
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  outline: 0;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+}
+.input_field input {
+  padding: 0 15px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+.refresh_button {
+  position: absolute;
+  top: 50%;
+  right: 5px;
+  transform: translateY(-50%);
+  padding-left: 12px;
+  height: 40px;
+  width: 40px;
+  border: none;
+  border-radius: 4px;
+}
+.refresh_button:active {
+  transform: translateY(-50%) scale(0.98);
+}
+.captch_input input:focus {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
+}
+.message {
+  font-size: 14px;
+  margin: 14px 0;
+  color: #347eff;
+  display: none;
+}
+.icon-redo,
+.message.active {
+  display: block;
+}
+.button button {
+  user-select: none;
+}
+.button button:active {
+  transform: scale(0.99);
+}
+.button.disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.icon-redo {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  border: 2px solid;
+  border-right-color: transparent;
+  border-radius: 100px;
+}
+.icon-redo::before {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-top: 2px solid;
+  border-right: 2px solid;
+  top: -3px;
+  right: -1px;
+  transform: rotate(68deg);
+}
+
+.wd-devtools-highlight {
+  position: absolute;
+  background-color: #52d959;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+.refreshButton {
+  position: relative;
+  box-sizing: border-box;
+  max-width: 40px;
+  height: 40px;
+  padding: 0;
+}
+
+.captch_box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.container {
+  text-align: left;
+}
+
+.message {
+  padding-left: 5px;
+}
+.icon-redo {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+}

package/template/mp/packages/$wd_system/pages/login/components/input/index.js

@@ -2,7 +2,8 @@
 Component({
   options: {
     virtualHost: true,
-    styleIsolation: 'shared'
+    styleIsolation: 'shared',
+    multipleSlots: true,
   },
   behaviors: ['wx://form-field'],
 
@@ -10,15 +11,29 @@ Component({
    * 组件的属性列表
    */
   properties: {
+    style: {
+      type: String,
+      value: '',
+    },
     type: String,
-    placeholder: String
+    placeholder: String,
+    maxlength: { type: Number, value: 140 },
+    defaultValue: String,
   },
 
   /**
    * 组件的初始数据
    */
   data: {
-    name: ''
+    name: '',
+  },
+  lifetimes: {
+    attached: function () {
+      if (this.properties.defaultValue) {
+        this.setData({ value: this.properties.defaultValue });
+      }
+      // 在组件实例进入页面节点树时执行
+    },
   },
 
   /**
@@ -26,15 +41,16 @@ Component({
    */
   methods: {
     focus(e) {
-      this.triggerEvent('focus', e.detail)
+      this.triggerEvent('focus', e.detail);
     },
     blur(e) {
-      this.triggerEvent('blur', e.detail)
+      this.triggerEvent('blur', e.detail);
     },
     setValue(e) {
       this.setData({
-        value: e.detail
-      })
-    }
-  }
-})
+        value: e.detail.value,
+      });
+      this.triggerEvent('change', e.detail);
+    },
+  },
+});

package/template/mp/packages/$wd_system/pages/login/components/input/index.wxml

@@ -1,9 +1,11 @@
 <view class="weda-ui weda-ui-to-wd">
-  <view style="border-width:0 0 1px 0;border-style:solid;border-color:rgba(0, 0, 0, 0.25); padding: 0 16px;" class="weda-ui weda-input wd-comp-id-input1 wd-event-focus wd-event-blur">
+  <view style="border-width:0 0 1px 0;border-style:solid;border-color:rgba(0, 0, 0, 0.25);" class="weda-ui weda-input wd-comp-id-input1 wd-event-focus wd-event-blur">
     <view class="weda-ui weui-cells weui-cells_forms weui-flex">
       <view class="weui-flex__item">
-        <view class="weui-cell__bd weui-flex">
-          <input maxlength="140" placeholder="{{placeholder}}" name="{{name}}"placeholder-class="weui-input__placeholder" type="{{type}}" class="weui-input" bind:focus="focus" bind:blur="blur" bindinput="setValue" />
+        <view class="weui-cell__bd weui-flex" style="justify-content: space-between;align-items:center;">
+          <slot name="prefix"></slot>
+          <input maxlength="{{maxlength}}" value="{{value}}" style="padding-left: 16px; padding-right: 16px;" placeholder="{{placeholder}}" name="{{name}}" placeholder-class="weui-input__placeholder" type="{{type}}" class="weui-input" bind:focus="focus" bind:blur="blur" bindinput="setValue" />
+          <slot name="suffix"></slot>
         </view>
       </view>
     </view>