fcr-ui-scene 3.7.9-alpha → 3.8.0-alpha

package/lib/modules/caption/view.js

@@ -0,0 +1,292 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CaptionView = exports.CaptionDraggableView = void 0;
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.timers.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _mobxReact = require("mobx-react");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _avatar = require("agora-ui-foundation/lib/components/avatar");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _captionMenu = require("../components/caption-menu");
+var _draggableContainer = require("./draggable-container");
+var _type2 = require("./type");
+var _store = require("./store");
+require("./view.css");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _useMouseMoveAnywhere = require("agora-ui-foundation/lib/hooks/use-mouse-move-anywhere");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var CaptionMessage = (0, _mobxReact.observer)(function (_ref) {
+  var captionMessage = _ref.captionMessage,
+    isExiting = _ref.isExiting;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    captionStyle = _useContext.captionStyle,
+    isTwoLineCaptionEnabled = _useContext.isTwoLineCaptionEnabled,
+    sourceLanguage = _useContext.sourceLanguage,
+    translateLanguage = _useContext.translateLanguage;
+  if (!captionMessage) {
+    return null;
+  }
+  var isShowOriginalText = !isTwoLineCaptionEnabled && (!translateLanguage || translateLanguage === sourceLanguage);
+  var isSameLanguage = translateLanguage && translateLanguage != sourceLanguage;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-caption-message-item ".concat(isExiting ? 'fcr-caption-exiting' : 'fcr-caption-entering'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-caption-avatar-container",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
+        size: 30,
+        nickName: captionMessage.username,
+        textSize: 14,
+        avatarImage: captionMessage.avatarUrl
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-caption-content-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-caption-username",
+        style: captionStyle.userName,
+        children: captionMessage.username
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-caption-text-content",
+        children: [(isTwoLineCaptionEnabled || isShowOriginalText) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-caption-original-text",
+          style: captionStyle.textStyle,
+          children: captionMessage.originalText
+        }), isSameLanguage && !isShowOriginalText && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-caption-translated-text",
+          style: captionStyle.textStyle,
+          children: captionMessage.translatedText
+        })]
+      })]
+    })]
+  });
+});
+var TooltipTips = (0, _mobxReact.observer)(function () {
+  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
+    isCaptionOpening = _useContext2.isCaptionOpening,
+    captionStyle = _useContext2.captionStyle,
+    isShowNoContentTips = _useContext2.isShowNoContentTips,
+    isShowListeningTips = _useContext2.isShowListeningTips;
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-caption-tips-container",
+    style: captionStyle.userName,
+    children: [isCaptionOpening && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_LOADING,
+        size: 20,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_white8)'
+        },
+        className: "fcr-caption-loading-icon"
+      }), transI18n('fmt_ai_subtitles_setting_label_turnon_subtitles')]
+    }), isShowNoContentTips && transI18n('fmt_ai_subtitles_setting_label_listening_no_content'), isShowListeningTips && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_VOLUME_HEAR,
+        size: 20,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_white8)'
+        }
+      }), transI18n('fmt_ai_subtitles_setting_label_listening')]
+    })]
+  });
+});
+var ActionButtons = (0, _mobxReact.observer)(function () {
+  var _useContext3 = (0, _react.useContext)(_store.StoreContext),
+    stopCaption = _useContext3.stopCaption,
+    captionSettingProps = _useContext3.captionSettingProps,
+    openSubtitlesHistoryDialog = _useContext3.openSubtitlesHistoryDialog;
+  var transI18n = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)({
+      transcribing: false,
+      permission: false,
+      close: false,
+      caption: false
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    buttonHover = _useState2[0],
+    setButtonHover = _useState2[1];
+  var handleButtonHover = function handleButtonHover(button, isHovering) {
+    setButtonHover(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2["default"])({}, button, isHovering));
+    });
+  };
+  var captionMenuProps = _objectSpread(_objectSpread({}, captionSettingProps), {}, {
+    isPrivilegeControlOptionsVisible: false,
+    isFontSizeAdjustmentVisible: true
+  });
+  var captionPermissionMenuProps = _objectSpread(_objectSpread({}, captionSettingProps), {}, {
+    isFontSizeAdjustmentVisible: false,
+    isTranslationOptionsVisible: false
+  });
+  var topButtonList = [{
+    id: _type2.FcrUICaptionButtonHoverType.transcribing,
+    icon: _type.FcrIconType.FCR_SUBTITIESHISTORY,
+    onClick: openSubtitlesHistoryDialog,
+    tooltip: transI18n('fmt_ai_transcriptions_toolbar_button_realtime_transcription')
+  }, {
+    id: _type2.FcrUICaptionButtonHoverType.caption,
+    icon: _type.FcrIconType.FCR_TRANSLATE1,
+    tooltip: transI18n('fmt_ai_subtitles_setting_label_translation_setting'),
+    popoverContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_captionMenu.CaptionMenu, _objectSpread({}, captionMenuProps))
+  }, {
+    id: _type2.FcrUICaptionButtonHoverType.permission,
+    icon: _type.FcrIconType.FCR_SETTING2,
+    tooltip: transI18n('fmt_ai_subtitles_setting_label_subtitle_setting'),
+    popoverContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_captionMenu.CaptionMenu, _objectSpread({}, captionPermissionMenuProps)),
+    isHidden: !captionPermissionMenuProps.isPrivilegeControlOptionsVisible
+  }, {
+    id: _type2.FcrUICaptionButtonHoverType.close,
+    icon: _type.FcrIconType.FCR_CLOSE,
+    onClick: stopCaption
+  }];
+  var preventDragOnTarget = function preventDragOnTarget(e) {
+    e.stopPropagation();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-caption-action-buttons",
+    onMouseDown: preventDragOnTarget,
+    onTouchStart: preventDragOnTarget,
+    onMouseMove: preventDragOnTarget,
+    children: topButtonList.map(function (item) {
+      return !item.isHidden && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        mouseEnterDelay: 0,
+        content: item.tooltip,
+        disable: !item.tooltip,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+          showArrow: false,
+          trigger: "click",
+          content: item.popoverContent,
+          disable: !item.popoverContent,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "fcr-caption-icon-button ".concat(buttonHover[item.id] ? 'fcr-caption-button-hovered' : ''),
+              onMouseEnter: function onMouseEnter() {
+                return handleButtonHover(item.id, true);
+              },
+              onMouseLeave: function onMouseLeave() {
+                return handleButtonHover(item.id, false);
+              },
+              onClick: item.onClick,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                type: item.icon,
+                size: 24,
+                colors: {
+                  iconPrimary: 'var(--fcr_ui_scene_white8)'
+                }
+              })
+            })
+          })
+        })
+      }, item.id);
+    })
+  });
+});
+var CaptionView = exports.CaptionView = (0, _mobxReact.observer)(function () {
+  var _useContext4 = (0, _react.useContext)(_store.StoreContext),
+    captionSentence = _useContext4.captionSentence,
+    clearPreCaptionSentence = _useContext4.clearPreCaptionSentence,
+    clearCaptionSentence = _useContext4.clearCaptionSentence,
+    preCaptionSentence = _useContext4.preCaptionSentence,
+    isCaptionVisible = _useContext4.isCaptionVisible,
+    isHovered = _useContext4.isHovered,
+    setIsHovered = _useContext4.setIsHovered;
+  var clearPreCaptionTimerRef = (0, _react.useRef)(null);
+  var clearCaptionTimerRef = (0, _react.useRef)(null);
+  var isShowMessage = captionSentence !== null;
+  (0, _react.useEffect)(function () {
+    if (preCaptionSentence) {
+      if (clearPreCaptionTimerRef.current) {
+        clearTimeout(clearPreCaptionTimerRef.current);
+        clearPreCaptionTimerRef.current = null;
+      }
+      clearPreCaptionTimerRef.current = setTimeout(function () {
+        clearPreCaptionTimerRef.current = null;
+        clearPreCaptionSentence();
+      }, 100);
+    }
+    return function () {
+      if (clearPreCaptionTimerRef.current) {
+        clearTimeout(clearPreCaptionTimerRef.current);
+        clearPreCaptionTimerRef.current = null;
+      }
+    };
+  }, [preCaptionSentence]);
+  (0, _react.useEffect)(function () {
+    if (captionSentence) {
+      if (clearCaptionTimerRef.current) {
+        clearTimeout(clearCaptionTimerRef.current);
+        clearCaptionTimerRef.current = null;
+      }
+      clearCaptionTimerRef.current = setTimeout(function () {
+        clearCaptionTimerRef.current = null;
+        clearCaptionSentence();
+      }, 4500);
+    }
+    return function () {
+      if (clearCaptionTimerRef.current) {
+        clearTimeout(clearCaptionTimerRef.current);
+        clearCaptionTimerRef.current = null;
+      }
+    };
+  }, [captionSentence]);
+  var handleMouseEnter = (0, _react.useCallback)(function () {
+    setIsHovered(false);
+  }, [setIsHovered]);
+  var mouseMoveRef = (0, _useMouseMoveAnywhere.useMouseMoveAnywhere)(handleMouseEnter, window);
+  if (!isCaptionVisible) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])('fcr-caption-viewport', {
+      'fcr-caption-hovered': isHovered
+    }),
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovered(true);
+    },
+    ref: mouseMoveRef,
+    children: [isHovered && /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButtons, {}), !isShowMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipTips, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CaptionMessage, {
+        captionMessage: captionSentence,
+        isExiting: false
+      })
+    })]
+  });
+});
+var CaptionDraggableView = exports.CaptionDraggableView = (0, _mobxReact.observer)(function () {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_draggableContainer.DraggableContainer, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CaptionView, {})
+  });
+});

package/lib/modules/chat/chat-room-store.d.ts

@@ -20,7 +20,7 @@ export declare class ChatRoomStore implements FcrUIManagedObject {
         msgId: string;
     };
     lastScrollTop: undefined | number;
-    protected logger: import("agora-foundation/lib/logger").Logger;
+    protected logger: import("fcr-core/lib/imports").Logger;
     private _messageProvider;
     private _userControl;
     private _chatRoomControl;

package/lib/modules/chat/chat-room-store.js

@@ -544,27 +544,27 @@ var ChatRoomStore = exports.ChatRoomStore = /*#__PURE__*/function () {
   }, {
     key: "allowChat",
     get: function get() {
-      return this._privilegeProvider.allowChat();
+      return this._privilegeProvider.isChatAllowed();
     }
   }, {
     key: "allowedAllChat",
     get: function get() {
-      return this._privilegeProvider.allowedAllChat();
+      return this._privilegeProvider.isAllChatAllowed();
     }
   }, {
     key: "allowedPublicChatAndDisallowedPrivateChat",
     get: function get() {
-      return this._privilegeProvider.allowedPublicChatAndDisallowedPrivateChat();
+      return this._privilegeProvider.isPublicChatAllowedAndPrivateChatDisallowed();
     }
   }, {
     key: "disallowedPublicChatAndDisallowedPrivateChatToParticipant",
     get: function get() {
-      return this._privilegeProvider.disallowedPublicChatAndDisallowedPrivateChatToParticipant();
+      return this._privilegeProvider.isPublicChatAndPrivateChatToParticipantDisallowed();
     }
   }, {
     key: "disallowedAllChat",
     get: function get() {
-      return this._privilegeProvider.disallowedAllChat();
+      return this._privilegeProvider.isAllChatDisallowed();
     }
   }, {
     key: "hasSendMessagePermission",
@@ -830,7 +830,7 @@ var ChatRoomStore = exports.ChatRoomStore = /*#__PURE__*/function () {
   }, {
     key: "privilegeOperator",
     get: function get() {
-      return this._privilegeProvider.privilegeOperator;
+      return this._privilegeProvider.getPrivilegeOperator();
     }
   }, {
     key: "updateChatTextMsg",

package/lib/modules/chat/components/message-list/message-item/index.js

@@ -91,34 +91,76 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
   var isManager = publisherRole === 'host' || publisherRole === 'union-host';
   var isFile = datum !== null && datum !== void 0 && datum.img ? true : false;
   (0, _react.useEffect)(function () {
-    // 标点符号特殊处理
-    // 如果是自己发的消息 由于有flex-end 如果标点符号大于1行, 则设置为100% （不然没法换行）
-    // 如果不是自己发的消息，每条都设置为100%
-    if (messageContainerRef.current && messageItemRef.current) {
+    var adjustMessageWidth = function adjustMessageWidth() {
+      if (!messageContainerRef.current || !messageItemRef.current) {
+        return;
+      }
       var messageContainerWidth = messageContainerRef.current.offsetWidth;
-      var messageItemWidth = messageItemRef.current.offsetWidth;
+      if (messageContainerWidth === 0) {
+        return;
+      }
+      var widthChanged = false;
+      var prevItemWidth = messageItemRef.current.style.width;
+      messageItemRef.current.style.width = '';
+      var naturalItemWidth = messageItemRef.current.offsetWidth;
+      var nextItemWidth = '';
       if (publisherIsSelf) {
-        if (messageItemWidth > messageContainerWidth) {
-          messageItemRef.current.style.width = '100%';
-          // 由于动态计算了宽度，导致高度不对，所以需要重新计算高度
-          cache.clear(idx, 0);
-          list === null || list === void 0 || list.recomputeRowHeights(idx);
+        if (naturalItemWidth > messageContainerWidth) {
+          nextItemWidth = '100%';
         }
       } else {
-        messageItemRef.current.style.width = '100%';
+        nextItemWidth = '100%';
+      }
+      if (nextItemWidth !== prevItemWidth) {
+        messageItemRef.current.style.width = nextItemWidth;
+        widthChanged = true;
+      } else {
+        messageItemRef.current.style.width = prevItemWidth;
+      }
+      if (!publisherIsSelf) {
         var childElement = messageItemRef.current.firstElementChild;
         if (childElement) {
-          // 消息不是本人发的 有头像 如果长度大于父容器需要减去34px
-          if (childElement.offsetWidth > messageContainerWidth - 34) {
-            childElement.style.width = 'calc(100% - 34px)';
-            // 由于动态计算了宽度，导致高度不对，所以需要重新计算高度
-            cache.clear(idx, 0);
-            list === null || list === void 0 || list.recomputeRowHeights(idx);
+          var prevChildWidth = childElement.style.width;
+          childElement.style.width = '';
+          var avatarOffset = publisherUid !== localUserId && !multiSelectActive ? 34 : 0;
+          var availableWidth = Math.max(messageContainerWidth - avatarOffset, 0);
+          var naturalChildWidth = childElement.offsetWidth;
+          var nextChildWidth = '';
+          if (naturalChildWidth > availableWidth) {
+            nextChildWidth = avatarOffset > 0 ? "calc(100% - ".concat(avatarOffset, "px)") : '100%';
+          }
+          if (nextChildWidth !== prevChildWidth) {
+            childElement.style.width = nextChildWidth;
+            widthChanged = true;
+          } else {
+            childElement.style.width = prevChildWidth;
           }
         }
       }
+      if (widthChanged) {
+        cache.clear(idx, 0);
+        list === null || list === void 0 || list.recomputeRowHeights(idx);
+      }
+    };
+    adjustMessageWidth();
+    var container = messageContainerRef.current;
+    if (!container) {
+      return;
     }
-  }, []);
+    if (typeof ResizeObserver !== 'undefined') {
+      var _observer = new ResizeObserver(function () {
+        adjustMessageWidth();
+      });
+      _observer.observe(container);
+      return function () {
+        return _observer.disconnect();
+      };
+    }
+    window.addEventListener('resize', adjustMessageWidth);
+    return function () {
+      return window.removeEventListener('resize', adjustMessageWidth);
+    };
+  }, [cache, idx, list, multiSelectActive, publisherIsSelf, publisherUid, localUserId]);
   var handleCopyMsg = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(msg, time, publisherNickName, targetNickname) {
       return _regenerator["default"].wrap(function (_context) {

package/lib/modules/chat/index.css

@@ -108,6 +108,13 @@
   width: 100%;
 }
 
+.fcr-chat-container-box-web,
+.fcr-chat-container-box-electron {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
 .fcr-chat-container-box-web {
   height: 100%;
 }

package/lib/modules/chat/store.js

@@ -233,7 +233,7 @@ var ChatStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "hasWaitingRoomPermission",
     value: function hasWaitingRoomPermission() {
-      return this._privilegeProvider.isWaitingRoomEnabled() && this._privilegeProvider.hasWaitingRoomPermission();
+      return this._privilegeProvider.isWaitingRoomEnabled() && this._privilegeProvider.hasEnableWaitingRoomPermission();
     }
   }, {
     key: "handlerActiveTab",

package/lib/modules/components/apps/app-item/index.css

@@ -3,7 +3,22 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding-top: 22px;
+  margin-top: 22px;
+}
+
+.fcr-action-apps-item-wrapper .fcr-action-apps-item-extra-icon {
+  width: 12px;
+  height: 32px;
+  min-width: 12px;
+  padding: 0;
+  border: none !important;
+  overflow: hidden;
+}
+.fcr-action-apps-item-wrapper_hover .fcr-action-apps-item-extra-icon:hover path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-action-apps-item-wrapper_hover .fcr-action-apps-item-icon-wrapper:hover path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
 }
 .fcr-action-apps-item-icon {
   margin: 0px 16px 8px;

package/lib/modules/components/apps/app-item/index.js

@@ -19,52 +19,119 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Appitem = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 require("core-js/modules/es.function.name.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _button = require("agora-ui-foundation/lib/components/button");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _jsxRuntime = require("react/jsx-runtime");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var size = 32;
+var MoreBtn = function MoreBtn(props) {
+  var config = props.config,
+    disabled = props.disabled;
+  var Component = config.component,
+    componentProps = config.componentProps;
+  var handleClick = function handleClick(e) {
+    if (!disabled) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+    showArrow: false,
+    trigger: "click",
+    disable: disabled,
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread({}, componentProps)),
+    placement: "topLeft",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      onClick: handleClick,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        className: "fcr-action-apps-item-extra-icon",
+        type: "text",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_DROPUP4,
+          size: 24,
+          colors: {
+            iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+          }
+        })
+      })
+    })
+  });
+};
+var Icon = function Icon(props) {
+  var size = 32;
+  var imgSrc = props.imgSrc,
+    fcrIconProps = props.fcrIconProps,
+    name = props.name;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-action-apps-item-icon-wrapper",
+    children: imgSrc ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      style: {
+        width: size,
+        height: size
+      },
+      src: imgSrc,
+      alt: name
+    }) : fcrIconProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, _objectSpread({
+      size: size,
+      colors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    }, fcrIconProps))
+  });
+};
 var Appitem = exports.Appitem = function Appitem(props) {
   var name = props.name,
     onClick = props.onClick,
-    fcrToolTipProps = props.fcrToolTipProps,
     fcrIconProps = props.fcrIconProps,
-    imgSrc = props.imgSrc;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames["default"])('fcr-action-apps-item-wrapper'),
-    onClick: onClick,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, _objectSpread(_objectSpread({
-      mouseEnterDelay: 0
-    }, fcrToolTipProps ? fcrToolTipProps : {
-      visible: false
-    }), {}, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "fcr-action-apps-item-icon",
-          children: imgSrc ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            style: {
-              width: size,
-              height: size
-            },
-            src: imgSrc,
-            alt: name
-          }) : fcrIconProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, _objectSpread(_objectSpread({
-            size: size
-          }, fcrIconProps), {}, {
-            colors: {
-              iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
-            }
-          }))
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "fcr-action-apps-item-text",
-          children: name
+    imgSrc = props.imgSrc,
+    disabledConfig = props.disabledConfig,
+    moreBtnConfig = props.moreBtnConfig;
+  var _ref = disabledConfig || {
+      disabled: false,
+      onDisabledClick: function onDisabledClick() {}
+    },
+    onDisabledClick = _ref.onDisabledClick,
+    disabled = _ref.disabled;
+  var fcrToolTipProps = props.fcrToolTipProps || {
+    visible: false
+  };
+  var handleClick = function handleClick(e) {
+    if (disabled) {
+      e.stopPropagation();
+      onDisabledClick();
+      return;
+    }
+    onClick(e);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, _objectSpread(_objectSpread({
+    mouseEnterDelay: 0
+  }, fcrToolTipProps), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])('fcr-action-apps-item-wrapper', {
+        // 'fcr-action-apps-item-wrapper_hover': true,
+      }),
+      onClick: handleClick,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-action-apps-item-icon",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          imgSrc: imgSrc,
+          fcrIconProps: fcrIconProps,
+          name: name
+        }), moreBtnConfig && /*#__PURE__*/(0, _jsxRuntime.jsx)(MoreBtn, {
+          config: moreBtnConfig,
+          disabled: disabled
         })]
-      })
-    }))
-  });
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-action-apps-item-text",
+        children: name
+      })]
+    })
+  }));
 };