@ray-js/t-agent-ui-ray 0.1.0-beta-3 → 0.1.0-beta-5

package/dist/tiles/ExecuteCardTile/index.js

@@ -0,0 +1,231 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/esnext.iterator.map.js";
+import { Image, Switch, Text, View } from '@ray-js/components';
+import React, { useMemo } from 'react';
+import { SceneType } from '@ray-js/t-agent-plugin-assistant';
+import './index.less';
+import { triggerRule } from '@ray-js/ray';
+import { routeScene } from '../../utils';
+import lockPng from '../OperateCardTile/lock.png';
+import bookmark from './bookmark.png';
+import { useTranslate } from '../../hooks';
+export default function ExecuteCardTile(props) {
+  const {
+    tile
+  } = props;
+  const {
+    deviceInfo,
+    sceneInfo,
+    deviceShareInfo
+  } = tile.data || {};
+  const t = useTranslate();
+  const {
+    cards
+  } = useMemo(() => {
+    const cards = [];
+    if (deviceInfo !== null && deviceInfo !== void 0 && deviceInfo.length) {
+      deviceInfo.forEach(i => {
+        const {
+          intent
+        } = i;
+        switch (intent) {
+          case 'controlDevice':
+            break;
+          default:
+            cards.push(_objectSpread(_objectSpread({}, i), {}, {
+              displayType: 'device'
+            }));
+            break;
+        }
+      });
+    }
+    if (sceneInfo !== null && sceneInfo !== void 0 && sceneInfo.length) {
+      sceneInfo.forEach(i => {
+        if (i.valid == null) {
+          i.valid = true;
+        }
+        const {
+          intent,
+          type
+        } = i;
+        const displayType = type === SceneType.EXECUTE ? 'execute' : 'scene';
+        switch (intent) {
+          case 'queryScene':
+          case 'updateScene':
+            cards.push(_objectSpread(_objectSpread({}, i), {}, {
+              displayType
+            }));
+            break;
+          case 'deleteScene':
+            if (!i.success) {
+              cards.push(_objectSpread(_objectSpread({}, i), {}, {
+                displayType
+              }));
+            }
+            break;
+          default:
+            break;
+        }
+      });
+    }
+    if (deviceShareInfo !== null && deviceShareInfo !== void 0 && deviceShareInfo.length) {
+      deviceShareInfo.forEach(i => {
+        cards.push(_objectSpread(_objectSpread({}, i), {}, {
+          displayType: 'device'
+        }));
+      });
+    }
+    return {
+      cards
+    };
+  }, [deviceInfo, sceneInfo]);
+  if (!cards.length) {
+    return null;
+  }
+  const handleTap = card => {
+    const {
+      deviceId,
+      intent
+    } = card;
+    if (intent === 'shareDevice') {
+      ty.router({
+        url: "tuyaSmart://thing_single_device_share?devId=".concat(deviceId),
+        fail(err) {
+          console.error('router thing_single_device_share fail', err);
+        }
+      });
+      return;
+    }
+    ty.openPanel({
+      deviceId,
+      fail() {
+        ty.showToast({
+          title: t('t-agent.execute-card-tile.execution.failed'),
+          icon: 'error'
+        });
+      }
+    });
+  };
+  const changeScene = (e, card) => {
+    const {
+      sceneId
+    } = card;
+  };
+  const deleteScene = (e, card) => {
+    var _e$origin;
+    e === null || e === void 0 || (_e$origin = e.origin) === null || _e$origin === void 0 || _e$origin.stopPropagation();
+    const {
+      sceneId
+    } = card;
+    ty.router({
+      url: "tuyaSmart://editScene?sceneId=".concat(sceneId, "&biz_type=ai_smart&action=delete"),
+      fail: console.error
+    });
+  };
+  const enterScene = card => {
+    const {
+      sceneId,
+      valid
+    } = card;
+    if (!valid) {
+      ty.showToast({
+        title: t('t-agent.execute-card-tile.scene.invalid'),
+        image: '/assets/images/notice.png'
+      });
+      return;
+    }
+    routeScene(sceneId);
+  };
+  const execute = (e, card) => {
+    var _e$origin2;
+    e === null || e === void 0 || (_e$origin2 = e.origin) === null || _e$origin2 === void 0 || _e$origin2.stopPropagation();
+    const {
+      sceneId
+    } = card;
+    triggerRule({
+      ruleId: sceneId
+    }).then(() => {
+      ty.showToast({
+        title: t('t-agent.execute-card-tile.execution.success'),
+        icon: 'success'
+      });
+    }).catch(() => {
+      ty.showToast({
+        title: t('t-agent.execute-card-tile.execution.failed'),
+        icon: 'error'
+      });
+    });
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-execute-card-tile"
+  }, cards.map(card => {
+    return /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-card"
+    }, card.displayType === 'device' && /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-device",
+      onClick: () => handleTap(card)
+    }, /*#__PURE__*/React.createElement(Image, {
+      src: card.icon,
+      mode: "widthFix",
+      className: "t-agent-execute-card-tile-device-icon"
+    }), /*#__PURE__*/React.createElement(View, null, card.name)), card.displayType === 'energy' && /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-energy",
+      onClick: () => handleTap(card)
+    }, /*#__PURE__*/React.createElement(Image, {
+      src: card.icon,
+      mode: "widthFix",
+      className: "t-agent-execute-card-tile-energy-icon"
+    }), /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-energy-content"
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-energy-content-title"
+    }, card.name), /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-energy-content-desc"
+    }, card.desc))), card.displayType === 'scene' && /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-scene",
+      onClick: () => enterScene(card)
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-scene-icon-wrapper",
+      style: {
+        backgroundColor: "#".concat(card.displayColor)
+      }
+    }, /*#__PURE__*/React.createElement(Image, {
+      src: card.icon || bookmark,
+      mode: "widthFix",
+      className: "t-agent-execute-card-tile-scene-icon"
+    })), /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-scene-name"
+    }, card.name, card.room && /*#__PURE__*/React.createElement(Text, null, "-", card.room)), card.valid && card.intent !== 'deleteScene' ? /*#__PURE__*/React.createElement(View, {
+      onClick: e => {
+        var _e$origin3;
+        return e === null || e === void 0 || (_e$origin3 = e.origin) === null || _e$origin3 === void 0 ? void 0 : _e$origin3.stopPropagation();
+      }
+    }, /*#__PURE__*/React.createElement(Switch, {
+      checked: card.enabled,
+      onChange: e => changeScene(e, card)
+    })) : /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-scene-delete",
+      onClick: e => deleteScene(e, card)
+    }, t('t-agent.execute-card-tile.delete'))), card.displayType === 'execute' && /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-execute ".concat(!card.valid ? 't-agent-execute-card-tile-execute-disabled' : ''),
+      style: {
+        backgroundColor: "#".concat(card.displayColor)
+      },
+      onClick: () => enterScene(card)
+    }, /*#__PURE__*/React.createElement(Image, {
+      src: card.icon || lockPng,
+      mode: "widthFix",
+      className: "t-agent-execute-card-tile-execute-icon"
+    }), /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-execute-name"
+    }, card.name, card.room && /*#__PURE__*/React.createElement(Text, null, "-", card.room)), /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-execute-card-tile-execute-button",
+      onClick: e => execute(e, card),
+      style: {
+        color: "#".concat(card.displayColor)
+      }
+    }, t('t-agent.execute-card-tile.execute'))));
+  }));
+}

package/dist/tiles/ExecuteCardTile/index.less

@@ -0,0 +1,154 @@
+.t-agent-execute-card-tile {
+  .t-agent-execute-card-tile-card {
+    .t-agent-execute-card-tile-device {
+      display: flex;
+      align-items: center;
+      min-height: 44px;
+      background-color: var(--app-B1);
+      padding: 12px;
+      border-radius: var(--app-C1_1);
+      margin-top: 8px;
+
+      .t-agent-execute-card-tile-device-icon {
+        width: 40px;
+        height: 40px;
+        margin-right: 10px;
+      }
+    }
+
+    .t-agent-execute-card-tile-energy {
+      display: flex;
+      align-items: center;
+      min-height: 44px;
+      background-color: var(--app-B1);
+      padding: 12px;
+      border-radius: var(--app-C1_1);
+      margin-top: 8px;
+
+      .t-agent-execute-card-tile-energy-icon {
+        width: 32px;
+        height: 32px;
+        border-radius: 4px;
+      }
+
+      .t-agent-execute-card-tile-energy-content {
+        margin-left: 8px;
+        flex: 1;
+        .t-agent-execute-card-tile-energy-content-title {
+          font-size: 16px;
+          color: var(--app-C1);
+          line-height: 22px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+
+        .t-agent-execute-card-tile-energy-content-desc {
+          font-size: 13px;
+          color: var(--app-B1-N3);
+          line-height: 18px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+
+    .t-agent-execute-card-tile-scene {
+      min-height: 44px;
+      background-color: var(--app-B1);
+      display: flex;
+      align-items: center;
+      padding: 12px;
+      border-radius: var(--app-C1_1);
+      margin-top: 8px;
+
+      .t-agent-execute-card-tile-scene-icon-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 32px;
+        height: 32px;
+        border-radius: 10px;
+        margin-right: 8px;
+        .t-agent-execute-card-tile-scene-icon {
+          width: 20px;
+          height: 20px;
+          filter: brightness(100);
+        }
+      }
+
+      .t-agent-execute-card-tile-scene-name {
+        flex: 1;
+        font-size: 16px;
+        line-height: 22px;
+        color: var(--app-C1);
+      }
+
+      .t-agent-execute-card-tile-scene-switch {
+        margin-left: auto;
+      }
+
+      .t-agent-execute-card-tile-scene-delete {
+        display: flex;
+        align-items: center;
+        height: 24px;
+        padding-right: 12px;
+        padding-left: 12px;
+        color: var(--app-M2);
+        background: #fff;
+        border-radius: var(--app-C1_1);
+        font-size: 12px;
+      }
+    }
+
+    .t-agent-execute-card-tile-execute {
+      display: flex;
+      align-items: center;
+      min-height: 44px;
+      background-color: #e36468;
+      padding: 12px;
+      border-radius: var(--app-C1_1);
+      margin-top: 8px;
+
+      &.t-agent-execute-card-tile-execute-disabled {
+        opacity: 0.3;
+      }
+
+      .t-agent-execute-card-tile-execute-icon {
+        width: 40px;
+        height: 40px;
+        margin-right: 10px;
+      }
+
+      .t-agent-execute-card-tile-execute-name {
+        font-size: 16px;
+        line-height: 22px;
+        color: #ffffff;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      .t-agent-execute-card-tile-execute-button {
+        margin-left: auto;
+        line-height: 18px;
+        padding: 3px 12px;
+        font-size: 12px;
+        font-weight: 600;
+        color: #e36468;
+        background-color: #ffffff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 18px;
+      }
+    }
+  }
+}

package/dist/tiles/OperateCardTile/Expand.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { DeviceInfoItem, SceneInfoItem, ChangeInfoItem } from '@ray-js/t-agent-plugin-assistant';
+import './Expand.less';
+export interface IOperations {
+    device: DeviceInfoItem[];
+    scene: SceneInfoItem[];
+    moreDevice: ChangeInfoItem[];
+    moreScene: ChangeInfoItem[];
+    more: ChangeInfoItem[];
+}
+interface ExpandProps {
+    operations?: IOperations;
+    tapDevice?: (e: any) => void;
+    tapScene?: (e: any) => void;
+}
+export default function Expand({ operations, tapDevice, tapScene, }: ExpandProps): React.JSX.Element;
+export {};

package/dist/tiles/OperateCardTile/Expand.js

@@ -0,0 +1,167 @@
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.map.js";
+import { View, Text, Image } from '@ray-js/components';
+import React from 'react';
+import { SceneType } from '@ray-js/t-agent-plugin-assistant';
+import Tabs from './Tabs';
+import './Expand.less';
+import bookmark from '../ExecuteCardTile/bookmark.png';
+import lockPng from './lock.png';
+import { useTranslate } from '../../hooks';
+import { formatMessage } from '../../utils';
+export default function Expand(_ref) {
+  var _operations$device, _operations$moreDevic, _operations$scene, _operations$moreScene, _operations$more;
+  let {
+    operations = {
+      device: [],
+      scene: [],
+      moreDevice: [],
+      moreScene: [],
+      more: []
+    },
+    tapDevice,
+    tapScene
+  } = _ref;
+  const t = useTranslate();
+  const deviceCount = (((_operations$device = operations.device) === null || _operations$device === void 0 ? void 0 : _operations$device.length) || 0) + (((_operations$moreDevic = operations.moreDevice) === null || _operations$moreDevic === void 0 ? void 0 : _operations$moreDevic.length) || 0);
+  const sceneCount = (((_operations$scene = operations.scene) === null || _operations$scene === void 0 ? void 0 : _operations$scene.length) || 0) + (((_operations$moreScene = operations.moreScene) === null || _operations$moreScene === void 0 ? void 0 : _operations$moreScene.length) || 0);
+  const moreCount = ((_operations$more = operations.more) === null || _operations$more === void 0 ? void 0 : _operations$more.length) || 0;
+  const tabs = [];
+  if (deviceCount > 0) {
+    var _operations$device2, _operations$moreDevic2;
+    tabs.push({
+      key: 'device',
+      title: t('t-agent.expand.tab.device'),
+      badge: deviceCount,
+      content: /*#__PURE__*/React.createElement(View, {
+        className: "t-agent-expand-device-list"
+      }, (_operations$device2 = operations.device) === null || _operations$device2 === void 0 ? void 0 : _operations$device2.map(device => {
+        return /*#__PURE__*/React.createElement(View, {
+          key: device.deviceId,
+          className: "t-agent-expand-device-item",
+          onClick: () => tapDevice === null || tapDevice === void 0 ? void 0 : tapDevice({
+            currentTarget: {
+              dataset: {
+                id: device.deviceId
+              }
+            }
+          })
+        }, /*#__PURE__*/React.createElement(Image, {
+          src: device.icon,
+          className: "t-agent-expand-device-icon"
+        }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+          className: "t-agent-expand-device-info"
+        }, /*#__PURE__*/React.createElement(View, {
+          className: "t-agent-expand-device-name"
+        }, device.name), device.room && /*#__PURE__*/React.createElement(Text, {
+          className: "t-agent-expand-device-room"
+        }, "-", device.room)), /*#__PURE__*/React.createElement(Text, {
+          className: "t-agent-expand-device-status"
+        }, device.success ? t('t-agent.expand.execution.success') : t('t-agent.expand.execution.failed'))));
+      }), (_operations$moreDevic2 = operations.moreDevice) === null || _operations$moreDevic2 === void 0 ? void 0 : _operations$moreDevic2.map(device => /*#__PURE__*/React.createElement(View, {
+        key: device.id,
+        className: "t-agent-expand-device-item",
+        onClick: () => tapDevice === null || tapDevice === void 0 ? void 0 : tapDevice({
+          currentTarget: {
+            dataset: {
+              id: device.id
+            }
+          }
+        })
+      }, /*#__PURE__*/React.createElement(Image, {
+        src: bookmark,
+        className: "t-agent-expand-device-icon"
+      }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+        className: "t-agent-expand-device-info"
+      }, /*#__PURE__*/React.createElement(View, {
+        className: "t-agent-expand-device-name"
+      }, formatMessage(t, 't-agent.expand.device.rename', {
+        oldName: device.fromData,
+        newName: device.toData
+      }))), /*#__PURE__*/React.createElement(Text, {
+        className: "t-agent-expand-device-status"
+      }, device.success ? t('t-agent.expand.execution.success') : t('t-agent.expand.execution.failed'))))))
+    });
+  }
+  if (sceneCount > 0) {
+    var _operations$scene2, _operations$moreScene2;
+    tabs.push({
+      key: 'scene',
+      title: t('t-agent.expand.tab.scene'),
+      badge: sceneCount,
+      content: /*#__PURE__*/React.createElement(View, {
+        className: "t-agent-expand-scene-list"
+      }, (_operations$scene2 = operations.scene) === null || _operations$scene2 === void 0 ? void 0 : _operations$scene2.map(scene => {
+        const isExecuteScene = scene.type === SceneType.EXECUTE;
+        const icon = isExecuteScene ? lockPng : bookmark;
+        return /*#__PURE__*/React.createElement(View, {
+          key: scene.sceneId,
+          className: "t-agent-expand-scene-item",
+          onClick: () => tapScene === null || tapScene === void 0 ? void 0 : tapScene({
+            currentTarget: {
+              dataset: {
+                id: scene.sceneId
+              }
+            }
+          })
+        }, /*#__PURE__*/React.createElement(Image, {
+          src: scene.icon || icon,
+          className: "t-agent-expand-scene-icon"
+        }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+          className: "t-agent-expand-scene-name"
+        }, isExecuteScene ? t('t-agent.expand.scene.one-click') : t('t-agent.expand.scene.auto'), ' ', scene.name), /*#__PURE__*/React.createElement(Text, {
+          className: "t-agent-expand-scene-status"
+        }, scene.success ? t('t-agent.expand.execution.success') : t('t-agent.expand.execution.failed'))));
+      }), (_operations$moreScene2 = operations.moreScene) === null || _operations$moreScene2 === void 0 ? void 0 : _operations$moreScene2.map(scene => /*#__PURE__*/React.createElement(View, {
+        key: scene.id,
+        className: "t-agent-expand-scene-item",
+        onClick: () => tapScene === null || tapScene === void 0 ? void 0 : tapScene({
+          currentTarget: {
+            dataset: {
+              id: scene.id
+            }
+          }
+        })
+      }, /*#__PURE__*/React.createElement(Image, {
+        src: bookmark,
+        className: "t-agent-expand-scene-icon"
+      }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+        className: "t-agent-expand-scene-name"
+      }, formatMessage(t, 't-agent.expand.scene.rename', {
+        oldName: scene.fromData,
+        newName: scene.toData
+      })), /*#__PURE__*/React.createElement(Text, {
+        className: "t-agent-expand-scene-status"
+      }, scene.success ? t('t-agent.expand.execution.success') : t('t-agent.expand.execution.failed'))))))
+    });
+  }
+  if (moreCount > 0) {
+    var _operations$more2;
+    tabs.push({
+      key: 'more',
+      title: t('t-agent.expand.tab.more'),
+      badge: moreCount,
+      content: /*#__PURE__*/React.createElement(View, {
+        className: "t-agent-expand-more-list"
+      }, (_operations$more2 = operations.more) === null || _operations$more2 === void 0 ? void 0 : _operations$more2.map(item => /*#__PURE__*/React.createElement(View, {
+        key: item.id,
+        className: "t-agent-expand-more-item"
+      }, /*#__PURE__*/React.createElement(Image, {
+        src: bookmark,
+        className: "t-agent-expand-more-icon"
+      }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+        className: "t-agent-expand-more-name"
+      }, item.desc), /*#__PURE__*/React.createElement(Text, {
+        className: "t-agent-expand-more-status"
+      }, item.success ? t('t-agent.expand.execution.success') : t('t-agent.expand.execution.failed'))))))
+    });
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-expand-container"
+  }, tabs.length > 0 ? /*#__PURE__*/React.createElement(Tabs, {
+    tabs: tabs,
+    defaultActiveKey: tabs[0].key
+  }) : /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-expand-empty"
+  }, /*#__PURE__*/React.createElement(Text, null, t('t-agent.expand.no.details'))));
+}

package/dist/tiles/OperateCardTile/Expand.less

@@ -0,0 +1,135 @@
+.t-agent-expand {
+  &-container {
+    padding: 16px;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    margin-top: 12px;
+  }
+
+  &-empty {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100px;
+    color: #999;
+  }
+
+  &-device {
+    &-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    &-item {
+      display: flex;
+      align-items: center;
+      padding: 12px;
+      background-color: #f5f5f5;
+      border-radius: 6px;
+
+      &:active {
+        opacity: 0.8;
+      }
+    }
+
+    &-icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 12px;
+      margin-right: 5px;
+    }
+
+    &-info {
+      display: flex;
+      align-items: center;
+    }
+
+    &-name {
+      font-size: 14px;
+      font-weight: 500;
+      color: #333;
+    }
+
+    &-room {
+      font-size: 12px;
+      color: #666;
+      margin-left: 4px;
+    }
+
+    &-status {
+      font-size: 12px;
+      color: #0089ff;
+    }
+  }
+
+  &-scene {
+    &-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    &-item {
+      display: flex;
+      align-items: center;
+      padding: 12px;
+      background-color: #f5f5f5;
+      border-radius: 6px;
+
+      &:active {
+        opacity: 0.8;
+      }
+    }
+
+    &-icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 12px;
+      margin-right: 5px;
+    }
+
+    &-name {
+      font-size: 14px;
+      font-weight: 500;
+      color: #333;
+    }
+
+    &-status {
+      font-size: 12px;
+      color: #0089ff;
+    }
+  }
+
+  &-more {
+    &-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    &-item {
+      display: flex;
+      align-items: center;
+      padding: 12px;
+      background-color: #f5f5f5;
+      border-radius: 6px;
+
+      &:active {
+        opacity: 0.8;
+      }
+    }
+
+    &-name {
+      font-size: 14px;
+      font-weight: 500;
+      color: #333;
+    }
+
+    &-status {
+      font-size: 12px;
+      color: #0089ff;
+    }
+  }
+}