@cloudbase/weda-ui-mp 3.29.0 → 3.30.0

package/components/echart/index.js

@@ -0,0 +1,156 @@
+import * as echarts from '../chart/common/lib/echarts.min';
+import { commonCompBehavior } from '../../utils/common-behavior';
+import equal from '../../utils/deepEqual';
+
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    id: {
+      type: String,
+      value: '',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    option: {
+      type: Object,
+      value: {},
+    },
+    dark: {
+      type: Boolean,
+      value: false,
+    },
+    opts: {
+      type: Object,
+      value: {},
+    },
+  },
+  data: {
+    ec: {},
+    echarts: null,
+    _prevOption: null,
+    _prevDark: null,
+    _theme: null, // 通过 setTheme API 设置的主题，优先级高于 dark 属性
+  },
+  lifetimes: {
+    attached() {
+      // 在组件实例进入页面节点树时执行
+      this.initData();
+      this.updateWidgetAPI();
+    },
+    detached() {
+      // 在组件实例被从页面节点树移除时执行
+    },
+  },
+  methods: {
+    updateWidgetAPI() {
+      const that = this;
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          setOption(params) {
+            if (that._chart && params) {
+              that._chart.setOption(params.option, params.opts);
+            }
+          },
+          setTheme(opts) {
+            // 切换主题需要 dispose 后重新 init
+            // theme 可能是 'dark'、'light' 等字符串，与 dark 属性是两种设置方式
+            if (opts?.theme !== undefined) {
+              that._setTheme(opts.theme);
+            }
+          },
+          echarts: that.data.echarts,
+          echartsInstance: that._chart,
+        });
+    },
+    initData() {
+      this.setData({
+        id: this.id,
+        ec: {
+          onInit: this.initChart.bind(this),
+        },
+      });
+    },
+    async initChart(canvas, width, height, dpr) {
+      // _theme 优先（通过 setTheme API 设置），否则根据 dark 属性判断
+      const theme = this.data._theme !== null ? this.data._theme : this.data.dark ? 'dark' : null;
+      const objEchart = echarts.init(canvas, theme, {
+        width,
+        height,
+        devicePixelRatio: dpr,
+      });
+      canvas.setChart(objEchart);
+      const options = this.data.option;
+      objEchart.setOption(options, true);
+      this._chart = objEchart;
+
+      this.setData({
+        echarts,
+        _prevDark: this.data.dark,
+      });
+
+      this.updateWidgetAPI();
+      this.triggerEvent('onReady', { echartsInstance: objEchart, echarts });
+
+      return objEchart;
+    },
+    // 通过 API 设置主题
+    _setTheme(theme) {
+      // 检查是否真正变化
+      if (this.data._theme === theme) {
+        return;
+      }
+      this.setData({ _theme: theme });
+      // 切换主题需要 dispose 后重新 init
+      if (this._chart) {
+        this._chart.dispose();
+        this._chart = null;
+        const canvas = this.selectComponent(`#canvas_${this.properties.id}`);
+        canvas?.init();
+      }
+    },
+  },
+  observers: {
+    // 当 option 变化时
+    option: async function (option) {
+      // 检查数据是否真正变化
+      const prevOption = this.data._prevOption;
+      if (prevOption && equal(option, prevOption)) {
+        return;
+      }
+      this.setData({ _prevOption: option });
+
+      const canvas = this.selectComponent(`#canvas_${this.properties.id}`);
+      canvas?.init();
+      this._chart && this._chart.setOption(option, true);
+    },
+    dark: function (dark) {
+      // 检查是否真正变化，避免初始化时重复触发
+      if (this.data._prevDark === dark) {
+        return;
+      }
+      this.setData({ _prevDark: dark });
+      // 如果已通过 setTheme API 设置主题，则 dark 属性不生效
+      if (this.data._theme !== null) {
+        return;
+      }
+      // 切换主题需要 dispose 后重新 init
+      if (this._chart) {
+        this._chart.dispose();
+        this._chart = null;
+        // 重新初始化
+        const canvas = this.selectComponent(`#canvas_${this.properties.id}`);
+        canvas?.init();
+      }
+    },
+  },
+});

package/components/echart/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "ec-canvas": "../chart/ec-canvas/ec-canvas"
+  }
+}

package/components/echart/index.wxml

@@ -0,0 +1 @@
+<view wx:if="ec" class="{{className}} ec_container" style="{{style}}" id="{{id}}"> <ec-canvas id="{{'canvas_'+id}}" canvasId="{{'canvas_'+id}}" ec="{{ ec }}" /> </view>

package/components/echart/index.wxss

@@ -0,0 +1,9 @@
+/**index.wxss**/
+ec-canvas {
+  width: 100%;
+  height: 100%;
+}
+.ec_container {
+  width: 100%;
+  height: 380px;
+}

package/components/form/location/index.js

@@ -1,8 +1,36 @@
-import { callDataSource } from '../../../utils/tcb';
+import { callDataSource, getOpenApi } from '../../../utils/tcb';
 import classNames from '../../../utils/classnames';
 import customInfo from '../../../utils/getCustomInfo';
 import { errorHandler } from '../../../utils/error';
 
+/**
+ * 通过 APIs 连接器获取 API Key (qqmapV2)
+ * @param {string} userAPIsID - APIs 连接器 ID
+ * @returns {Promise<string>} API Key
+ */
+function getApiKeyByOpenApi(userAPIsID) {
+  return getOpenApi({ userAPIsID, path: '/getApiKey' }, true).then((res) => {
+    if (!res?.result?.apiKey) {
+      throw new Error(JSON.stringify(res));
+    }
+    return res.result.apiKey;
+  });
+}
+
+/**
+ * 通过数据源获取 API Key
+ * @param {string} dataSourceName - 数据源名称
+ * @returns {Promise<string>} API Key
+ */
+function getApiKeyByDataSource(dataSourceName) {
+  return callDataSource({ dataSourceName, methodName: 'getApiKey' }).then((res) => {
+    if (!res?.apiKey) {
+      throw new Error(JSON.stringify(res));
+    }
+    return res.apiKey;
+  });
+}
+
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 let QQMapWX = require('../../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk');
 let qqmapsdk;
@@ -107,7 +135,7 @@ Component({
       const { locationType, dataSource } = this.properties;
       const getReverseGeocoder = async (location) => {
         const { isApikeyStatus } = this.data;
-        let key = isApikeyStatus.apiKey ? isApikeyStatus.apiKey : await this.getApikey(dataSource.name, 'get');
+        let key = isApikeyStatus.apiKey ? isApikeyStatus.apiKey : await this.getApikey(dataSource, 'get');
         if (key) {
           qqmapsdk = new QQMapWX({
             key: key,
@@ -262,7 +290,7 @@ Component({
       }
       // 获取腾讯地图apikey
       if (dataSource?.name) {
-        this.getApikey(dataSource.name);
+        this.getApikey(dataSource);
       } else {
         this.setData({
           isApikeyStatus: {
@@ -311,9 +339,9 @@ Component({
    * 组件的方法列表
    */
   methods: {
-    async getApikey(dataSourceName, type) {
+    async getApikey(dataSource, type) {
       try {
-        if (!dataSourceName) {
+        if (!dataSource?.name) {
           this.setData({
             isApikeyStatus: {
               status: false,
@@ -323,19 +351,21 @@ Component({
           });
           return;
         }
-        const res = await callDataSource({
-          dataSourceName: dataSourceName,
-          methodName: 'getApiKey',
-        });
-        if (res.apiKey) {
+
+        const apiKey =
+          dataSource.templateCode === 'qqmapV2'
+            ? await getApiKeyByOpenApi(dataSource.name)
+            : await getApiKeyByDataSource(dataSource.name);
+
+        if (apiKey) {
           if (type === 'get') {
-            return res.apiKey;
+            return apiKey;
           }
           this.setData({
             isApikeyStatus: {
               status: true,
               message: '',
-              apiKey: res.apiKey,
+              apiKey: apiKey,
             },
           });
         }
@@ -445,9 +475,9 @@ Component({
       wx.openLocation({
         latitude: e.detail.latitude,
         longitude: e.detail.longitude,
-        scale: 18
+        scale: 18,
       });
-    }
+    },
   },
   observers: {
     value: function (value) {
@@ -456,7 +486,7 @@ Component({
         this.setData({
           currentLocations: {},
           location: {},
-          isAddrShow: false
+          isAddrShow: false,
         });
         return;
       }

package/components/wd-input/inner-input/index.js

@@ -106,13 +106,14 @@ Component({
       const counter = typeof currentInputValue === 'string' ? currentInputValue.length : 0;
       this.setData({ _hasClearIcon, counter });
     },
-    'disabled,size,classRoot,wrapClassName,before,after': function (
+    'disabled,size,classRoot,wrapClassName,before,after,isFocus': function (
       disabled,
       size,
       classRoot,
       wrapClassName,
       before,
       after,
+      isFocus,
     ) {
       const _size = convertSize(size);
       const iconSize = convertIconSize(_size);
@@ -132,6 +133,7 @@ Component({
           [`${inputWrap}--no-radius-left`]: before,
           [`${inputWrap}--no-radius-right`]: after,
           [`${inputWrap}--no-radius`]: before && after,
+          'is-focused': isFocus,
         },
       );
       const countCls = `${classPrefix}-input__limit-number`;

package/components/wd-modal/wd-modal.wxss

@@ -209,8 +209,8 @@
 }
 
 .weda-modal-new {
-  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: max(constant(safe-area-inset-bottom, 0px), 48rpx);
   /* 兼容 iOS < 11.2 */
-  padding-bottom: env(safe-area-inset-bottom);
+  padding-bottom: max(env(safe-area-inset-bottom, 0px), 48rpx);
   /* 兼容 iOS >= 11.2 */
 }

package/index.json

@@ -126,7 +126,8 @@
     "WdUploadFile": "components/wd-upload-file/index",
     "WdCalendar": "components/wd-calendar/index",
     "WdTag": "components/wd-tag/index",
-    "WdTagSelect": "components/wd-tag-select/index"
+    "WdTagSelect": "components/wd-tag-select/index",
+    "ECharts": "components/echart/index"
   },
   "actions": {
     "showToast": "actions/showToast/index",

package/package.json

@@ -3,7 +3,7 @@
   "miniprogram": "./",
   "packageManager": "yarn@3.0.2",
   "dependencies": {},
-  "version": "3.29.0",
+  "version": "3.30.0",
   "main": "./",
   "publishConfig": {
     "access": "public"

package/utils/tcb.js

@@ -184,3 +184,36 @@ export const getDefaultUploadPath = async (uploadPath) => {
   const _uploadPath = WeAppName ? `${uploadPath}/${WeAppName}` : uploadPath;
   return _uploadPath;
 };
+
+/**
+ * 开放APIs 查询 (apis v2)
+ * @param param.userAPIsID - APIs 连接器 ID
+ * @param param.path - 请求路径
+ * @param param.method - 请求方法，默认 'get'
+ * @param param.data - 请求数据（可选）
+ * @param param.headers - 请求头（可选）
+ * @param throwError - 是否抛出错误，默认 false
+ */
+export async function getOpenApi(param, throwError = false) {
+  const { userAPIsID, path, method = 'get', data, headers } = param;
+
+  try {
+    const app = await getCloudInstance();
+    if (!app?.apis?.[userAPIsID]) {
+      throw new Error(`APIs connector "${userAPIsID}" not found`);
+    }
+
+    const result = await app.apis[userAPIsID].request({
+      method,
+      path,
+      ...(data && { data }),
+      ...(headers && { headers }),
+    });
+
+    return result;
+  } catch (error) {
+    errorHandler({ code: 'GetOpenApi', error });
+    if (throwError) throw error;
+    return {};
+  }
+}