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

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,226 @@
+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 { useTranslate } 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 t = useTranslate();
+  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);
+    }
+  }
+}

package/dist/tiles/map.js

@@ -9,6 +9,9 @@ import RecommendationsTile from './RecommendationsTile';
 import CardTile from './CardTile';
 import WorkflowTile from './WorkflowTile';
 import DocumentsTile from './DocumentsTile';
+import OperateCardTile from './OperateCardTile';
+import ExecuteCardTile from './ExecuteCardTile';
+import DividerTile from './DividerTile';
 export const tileMap = {
   bubble: BubbleTile,
   image: ImageTile,
@@ -20,5 +23,8 @@ export const tileMap = {
   recommendations: RecommendationsTile,
   card: CardTile,
   workflow: WorkflowTile,
-  documents: DocumentsTile
+  documents: DocumentsTile,
+  operateCard: OperateCardTile,
+  executeCard: ExecuteCardTile,
+  divider: DividerTile
 };

package/dist/utils/formatMessage.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 用于处理多语言文本中的变量替换
+ * @param t i18n翻译函数
+ * @param key 多语言键名
+ * @param params 需要替换的变量对象，如 {name: '小明', age: 18}
+ * @returns 替换变量后的文本
+ *
+ * 使用示例：
+ * formatMessage(t, 'greet', {name: '小明'}) // 假设 'greet' 对应的文本是 "你好，{name}"，将返回 "你好，小明"
+ */
+export declare const formatMessage: (t: (key: string) => string, key: string, params?: Record<string, string | number>) => string;

package/dist/utils/formatMessage.js

@@ -0,0 +1,28 @@
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.replace.js";
+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";
+/**
+ * 用于处理多语言文本中的变量替换
+ * @param t i18n翻译函数
+ * @param key 多语言键名
+ * @param params 需要替换的变量对象，如 {name: '小明', age: 18}
+ * @returns 替换变量后的文本
+ *
+ * 使用示例：
+ * formatMessage(t, 'greet', {name: '小明'}) // 假设 'greet' 对应的文本是 "你好，{name}"，将返回 "你好，小明"
+ */
+export const formatMessage = (t, key, params) => {
+  if (!params) {
+    return t(key);
+  }
+  let message = t(key);
+
+  // 替换所有的变量
+  Object.entries(params).forEach(_ref => {
+    let [paramKey, paramValue] = _ref;
+    message = message.replace("{".concat(paramKey, "}"), String(paramValue));
+  });
+  return message;
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export declare function routeScene(sceneId: string): void;
+export * from './formatMessage';

package/dist/utils/index.js

@@ -0,0 +1,13 @@
+export function routeScene(sceneId) {
+  ty.router({
+    url: "tuyaSmart://editScene?sceneId=".concat(sceneId, "&biz_type=ai_smart&action=edit"),
+    fail: err => {
+      console.error('router fail', sceneId, err);
+      ty.showToast({
+        title: err.errorMsg || I18n.t('execute_fail'),
+        icon: 'error'
+      });
+    }
+  });
+}
+export * from './formatMessage';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/t-agent-ui-ray",
-  "version": "0.1.0-beta-3",
+  "version": "0.1.0-beta-5",
   "author": "Tuya.inc",
   "license": "MIT",
   "private": false,
@@ -41,5 +41,5 @@
     "@types/echarts": "^4.9.22",
     "@types/markdown-it": "^14.1.1"
   },
-  "gitHead": "afafdb05637f3c9cb46ef3ef518319baa748199e"
+  "gitHead": "061c94dea1a6668848c37f8f75efa0fa26329636"
 }