@ray-js/t-agent-ui-ray 0.1.0-beta-2 → 0.1.0-beta-4

package/dist/tiles/OperateCardTile/Expand.js

@@ -0,0 +1,169 @@
+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 { useRenderOptions } 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 {
+    i18nTranslate: t
+  } = useRenderOptions();
+  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;
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import './Tabs.less';
+export interface TabItem {
+    key: string;
+    title: string;
+    content: ReactNode;
+    badge?: number;
+}
+export interface TabsProps {
+    tabs: TabItem[];
+    defaultActiveKey?: string;
+    onChange?: (key: string) => void;
+    className?: string;
+}
+declare const Tabs: React.FC<TabsProps>;
+export default Tabs;

package/dist/tiles/OperateCardTile/Tabs.js

@@ -0,0 +1,39 @@
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.map.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import { View, Text } from '@ray-js/components';
+import React, { useState, useCallback } from 'react';
+import './Tabs.less';
+const Tabs = _ref => {
+  var _tabs$;
+  let {
+    tabs,
+    defaultActiveKey,
+    onChange,
+    className = ''
+  } = _ref;
+  const [activeKey, setActiveKey] = useState(defaultActiveKey || ((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key) || '');
+  const handleTabClick = useCallback(key => {
+    setActiveKey(key);
+    onChange === null || onChange === void 0 || onChange(key);
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-tabs ".concat(className)
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-tabs-header"
+  }, tabs.map(tab => /*#__PURE__*/React.createElement(View, {
+    key: tab.key,
+    className: "t-agent-tabs-tab ".concat(activeKey === tab.key ? 't-agent-tabs-tab--active' : ''),
+    onClick: () => handleTabClick(tab.key)
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "t-agent-tabs-tab-title"
+  }, tab.title), tab.badge !== undefined && tab.badge > 0 && /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-tabs-tab-badge"
+  }, tab.badge)))), /*#__PURE__*/React.createElement(View, {
+    className: "t-agent-tabs-content"
+  }, tabs.map(tab => /*#__PURE__*/React.createElement(View, {
+    key: tab.key,
+    className: "t-agent-tabs-pane ".concat(activeKey === tab.key ? 't-agent-tabs-pane--active' : 't-agent-tabs-pane--inactive')
+  }, tab.content))));
+};
+export default Tabs;

package/dist/tiles/OperateCardTile/Tabs.less

@@ -0,0 +1,72 @@
+.t-agent-tabs {
+  width: 100%;
+
+  &-header {
+    display: flex;
+    border-bottom: 1px solid #e6e6e6;
+    margin-bottom: 16px;
+  }
+
+  &-tab {
+    position: relative;
+    padding: 12px 16px;
+    margin-right: 8px;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &--active {
+      color: #0089ff;
+      font-weight: 500;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: #0089ff;
+      }
+    }
+
+    &-title {
+      font-size: 14px;
+    }
+
+    &-badge {
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      min-width: 16px;
+      height: 16px;
+      padding: 0 4px;
+      background-color: #ff4d4f;
+      border-radius: 8px;
+      color: #fff;
+      font-size: 12px;
+      line-height: 16px;
+      text-align: center;
+    }
+  }
+
+  &-content {
+    position: relative;
+    width: 100%;
+  }
+
+  &-pane {
+    width: 100%;
+
+    &--active {
+      display: block;
+    }
+
+    &--inactive {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import './index.less';
+import { ChangeInfoItem, DeviceInfoItem, SceneInfoItem } from '@ray-js/t-agent-plugin-assistant';
+import { TileProps } from '../../types';
+import { IOperations } from './Expand';
+export interface OperateCardTileData {
+    deviceInfo: DeviceInfoItem[];
+    sceneInfo: SceneInfoItem[];
+    changeInfo: ChangeInfoItem[];
+}
+export interface OperateCardTileProps extends TileProps {
+    data: OperateCardTileData;
+    /** 自定义详情内容渲染函数 */
+    renderDetail?: (props: {
+        operations: IOperations;
+        tapDevice: (e: any) => void;
+        tapScene: (e: any) => void;
+        show: boolean;
+    }) => React.ReactNode;
+}
+export default function OperateCardTile({ data, renderDetail }: OperateCardTileProps): React.JSX.Element | null;

package/dist/tiles/OperateCardTile/index.js

@@ -0,0 +1,228 @@
+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/web.dom-collections.iterator.js";
+import { Text, View } from '@ray-js/components';
+import React, { useMemo, useState } from 'react';
+import './index.less';
+import { useRenderOptions } from '../../hooks';
+import Expand from './Expand';
+import { formatMessage } from '../../utils';
+const handleDesc = (detail, t) => {
+  const {
+    device,
+    moreDevice,
+    scene,
+    moreScene,
+    more
+  } = detail;
+  const desc = [];
+  let deviceNum = device.length + moreDevice.length;
+  const sceneNum = scene.length + moreScene.length;
+  let homeNum = 0;
+  let roomNum = 0;
+  let groupNum = 0;
+  if (more.length) {
+    more.forEach(i => {
+      switch (i.type) {
+        case 'home':
+          homeNum += 1;
+          break;
+        case 'room':
+          roomNum += 1;
+          break;
+        case 'group':
+          groupNum += 1;
+          break;
+        case 'deviceRoom':
+          deviceNum += 1;
+          break;
+        default:
+          break;
+      }
+    });
+  }
+  if (deviceNum) {
+    desc.push(formatMessage(t, 't-agent.operate-card-tile.device.count', {
+      count: deviceNum
+    }));
+  }
+  if (sceneNum) {
+    desc.push(formatMessage(t, 't-agent.operate-card-tile.scene.count', {
+      count: sceneNum
+    }));
+  }
+  if (homeNum) {
+    desc.push(formatMessage(t, 't-agent.operate-card-tile.home.count', {
+      count: homeNum
+    }));
+  }
+  if (roomNum) {
+    desc.push(formatMessage(t, 't-agent.operate-card-tile.room.count', {
+      count: roomNum
+    }));
+  }
+  if (groupNum) {
+    desc.push(formatMessage(t, 't-agent.operate-card-tile.group.count', {
+      count: groupNum
+    }));
+  }
+  return formatMessage(t, 't-agent.operate-card-tile.description.format', {
+    items: desc.join(t('t-agent.operate-card-tile.description.separator'))
+  });
+};
+export default function OperateCardTile(_ref) {
+  let {
+    data,
+    renderDetail
+  } = _ref;
+  const {
+    deviceInfo = [],
+    sceneInfo = [],
+    changeInfo = []
+  } = data || {};
+  const {
+    i18nTranslate: t
+  } = useRenderOptions();
+  const [show, setShow] = useState(false);
+  const [showDetail, setShowDetail] = useState(false);
+  const tapDevice = e => {
+    const deviceId = e.currentTarget.dataset.id;
+    ty.openPanel({
+      deviceId,
+      fail: () => {
+        ty.showToast({
+          title: t('t-agent.operate-card-tile.open.device.failed'),
+          icon: 'error'
+        });
+      }
+    });
+  };
+  const tapScene = e => {
+    const sceneId = e.currentTarget.dataset.id;
+    ty.router({
+      url: "tuyaSmart://editScene?sceneId=".concat(sceneId, "&biz_type=ai_smart&action=edit"),
+      fail: () => {
+        ty.showToast({
+          title: t('t-agent.operate-card-tile.open.scene.failed'),
+          icon: 'error'
+        });
+      }
+    });
+  };
+  const {
+    operations
+  } = useMemo(() => {
+    let isShow = show;
+    const operations = {
+      device: [],
+      scene: [],
+      moreDevice: [],
+      moreScene: [],
+      more: []
+    };
+    if (deviceInfo !== null && deviceInfo !== void 0 && deviceInfo.length) {
+      deviceInfo.forEach(i => {
+        const {
+          intent
+        } = i;
+        switch (intent) {
+          case 'controlDevice':
+            isShow = true;
+            operations.device.push(i);
+            break;
+          default:
+            break;
+        }
+      });
+    }
+    if (sceneInfo !== null && sceneInfo !== void 0 && sceneInfo.length) {
+      sceneInfo.forEach(i => {
+        if (i.valid == null) {
+          i.valid = true;
+        }
+        const {
+          intent
+        } = i;
+        switch (intent) {
+          case 'queryScene':
+          case 'updateScene':
+            break;
+          case 'deleteScene':
+            if (i.success) {
+              isShow = true;
+              operations.scene.push(i);
+            }
+            break;
+          default:
+            isShow = true;
+            operations.scene.push(_objectSpread(_objectSpread({}, i), {}, {
+              displayType: 'execute'
+            }));
+            break;
+        }
+      });
+    }
+    if (changeInfo !== null && changeInfo !== void 0 && changeInfo.length) {
+      isShow = true;
+      changeInfo.forEach(i => {
+        switch (i.type) {
+          case 'scene':
+            operations.moreScene.push(i);
+            break;
+          case 'device':
+            operations.moreDevice.push(i);
+            break;
+          default:
+            {
+              let desc = '';
+              if (i.type === 'deviceRoom') {
+                desc = formatMessage(t, 't-agent.operate-card-tile.device.move.desc', {
+                  device: i.fromData,
+                  room: i.toData
+                });
+              } else {
+                desc = formatMessage(t, 't-agent.operate-card-tile.device.rename.desc', {
+                  oldName: i.fromData,
+                  newName: i.toData
+                });
+              }
+              i.desc = desc;
+              operations.more.push(i);
+            }
+            break;
+        }
+      });
+    }
+    if (isShow && !show) {
+      setShow(true);
+    }
+    return {
+      operations
+    };
+  }, [deviceInfo, sceneInfo, changeInfo, show, t]);
+  const desc = useMemo(() => handleDesc(operations, t), [operations, t]);
+  const toggleDetail = () => {
+    setShowDetail(!showDetail);
+  };
+  if (show) {
+    return /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-scene-control-tile"
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "t-agent-scene-control-tile-summary"
+    }, t('t-agent.operate-card-tile.operation.impact'), desc, /*#__PURE__*/React.createElement(Text, {
+      className: "t-agent-scene-control-tile-summary-detail",
+      onClick: toggleDetail
+    }, showDetail ? t('t-agent.operate-card-tile.hide.details') : t('t-agent.operate-card-tile.view.details'))), renderDetail && renderDetail({
+      operations,
+      tapDevice,
+      tapScene,
+      show: showDetail
+    }), showDetail && !renderDetail && /*#__PURE__*/React.createElement(Expand, {
+      operations: operations,
+      tapDevice: tapDevice,
+      tapScene: tapScene
+    }));
+  }
+  return null;
+}

package/dist/tiles/OperateCardTile/index.less

@@ -0,0 +1,18 @@
+.t-agent-scene-control-tile {
+  transition: all 0.3s ease;
+  &-summary {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding-top: 8px;
+    margin-top: 8px;
+    border-top: 1px solid var(--app-B3-N7);
+    font-size: 12px;
+    color: var(--app-B3-N3);
+    line-height: 18px;
+
+    &-detail {
+      color: var(--app-M4);
+    }
+  }
+}