fcr-ui-scene 3.5.1 → 3.6.1

package/lib/modules/dialog/components/confirm-leave-meeting/index.js

@@ -0,0 +1,86 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConfirmLeaveMeetingDialog = void 0;
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _constant = require("../../../../utilities/constant");
+var _useElectron = require("../../hooks/useElectron");
+var _env = require("agora-foundation/lib/utilities/env");
+var _dialogContainer = _interopRequireDefault(require("../dialog-container"));
+var _button = require("agora-ui-foundation/lib/components/button");
+var _jsxRuntime = require("react/jsx-runtime");
+var ConfirmLeaveMeetingDialog = exports.ConfirmLeaveMeetingDialog = function ConfirmLeaveMeetingDialog(_ref) {
+  var title = _ref.title,
+    onOk = _ref.onOk,
+    onCancel = _ref.onCancel;
+  var t = (0, _i18n.useI18n)();
+  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
+    dialogKey: _constant.FcrUIDialogKey.LEAVE_MEETING,
+    width: 255,
+    height: 138,
+    closable: false,
+    autoHeight: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-confirm-content-footer fcr-button-flex-column fcr-confirm-content-footer__center",
+      style: {
+        width: '215px',
+        margin: '12px auto'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
+        className: "fcr-dialog-container-header",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+          children: title
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        size: "XS",
+        styleType: "danger",
+        type: "primary",
+        shape: "rounded",
+        block: true,
+        onClick: onOk,
+        children: t('fmt_toolbar_leave_room_end_submit')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        size: "XS",
+        type: "secondary",
+        shape: "rounded",
+        block: true,
+        onClick: onCancel,
+        children: t('fmt_toolbar_tips_leave_room_end_cancel')
+      })]
+    })
+  });
+  if ((0, _env.isElectron)()) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfirmLeaveMeetingElectronDialog, {
+      title: title,
+      children: container
+    });
+  }
+  return container;
+};
+var ConfirmLeaveMeetingElectronDialog = function ConfirmLeaveMeetingElectronDialog(_ref2) {
+  var children = _ref2.children,
+    title = _ref2.title;
+  var transI18n = (0, _i18n.useI18n)();
+  var config = {
+    fullscreen: false,
+    maximizable: false,
+    width: 255,
+    height: 158,
+    title: transI18n('fmt_actionbar_labels_endmeeting'),
+    resizable: false
+  };
+  (0, _useElectron.useElectronDialog)({
+    dialogKey: _constant.FcrUIDialogKey.LEAVE_MEETING,
+    config: config,
+    onClose: function onClose(_ref3) {
+      var store = _ref3.store;
+      store.closeDialogByKey(_constant.FcrUIDialogKey.LEAVE_MEETING);
+    },
+    children: children
+  });
+  return null;
+};

package/lib/modules/dialog/components/control-bar/index.d.ts

@@ -1,4 +1,3 @@
-import { AgoraRtcScreenCaptureType, AgoraRtcWindowInfo } from 'agora-rte-sdk/lib/core/rtc/type';
 import { ControlBarUIModule } from '../../../control-bar';
 import { FcrUIShareSelectionDisplayProps } from '../../../share-screen/types';
 import { PropsWithChildren } from 'react';
@@ -8,4 +7,4 @@ export declare const ControlBarDialog: (props: PropsWithChildren<{
     params: FcrUIShareSelectionDisplayProps;
     module: ControlBarUIModule;
 }>) => null;
-export declare const setBounds: (currentShareId: string, currentShareType: AgoraRtcScreenCaptureType, currentShareBounds: CurrentShareBounds, browserWindow: Electron.BrowserWindow, allApplicationWindows: AgoraRtcWindowInfo[]) => Promise<void>;
+export declare const setBounds: (currentShareBounds: CurrentShareBounds, browserWindow: Electron.BrowserWindow) => Promise<void>;

package/lib/modules/dialog/components/control-bar/index.js

@@ -37,8 +37,6 @@ var ControlBarDialog = exports.ControlBarDialog = (0, _mobxReact.observer)(funct
   var eventProvider = module.eventProvider;
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     currentShareId = _useContext.currentShareId,
-    currentShareType = _useContext.currentShareType,
-    deviceStore = _useContext.deviceStore,
     currentShareBounds = _useContext.currentShareBounds;
   var children = function children(browserWindow) {
     return module.getComponent({
@@ -48,20 +46,13 @@ var ControlBarDialog = exports.ControlBarDialog = (0, _mobxReact.observer)(funct
   };
   var setBoundsWithNewAppWindows = /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(browserWindow) {
-      var allApplicationWindows;
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            if (!browserWindow) {
-              _context.next = 5;
-              break;
+            if (browserWindow) {
+              setBounds(currentShareBounds, browserWindow);
             }
-            _context.next = 3;
-            return deviceStore.getWindowList();
-          case 3:
-            allApplicationWindows = _context.sent;
-            setBounds(currentShareId, currentShareType, currentShareBounds, browserWindow, allApplicationWindows);
-          case 5:
+          case 1:
           case "end":
             return _context.stop();
         }
@@ -92,15 +83,12 @@ var ControlBarDialog = exports.ControlBarDialog = (0, _mobxReact.observer)(funct
   return null;
 });
 var setBounds = exports.setBounds = /*#__PURE__*/function () {
-  var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(currentShareId, currentShareType, currentShareBounds, browserWindow, allApplicationWindows) {
+  var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(currentShareBounds, browserWindow) {
     var _getCurrentSharingWor, originWidth, originHeight, x, y, WINDOWS_SCREEN_BOUNDARY_WIDTH, width, height, firstBounds;
     return _regenerator["default"].wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
           _getCurrentSharingWor = (0, _tools.getCurrentSharingWorkArea)({
-            currentShareId: currentShareId,
-            currentShareType: currentShareType,
-            allApplicationWindows: allApplicationWindows,
             currentShareBounds: currentShareBounds
           }), originWidth = _getCurrentSharingWor.width, originHeight = _getCurrentSharingWor.height, x = _getCurrentSharingWor.x, y = _getCurrentSharingWor.y;
           /* 使用window.screen.availWidth在windows上会黑屏，详见jira:APAAS-5732
@@ -148,7 +136,7 @@ var setBounds = exports.setBounds = /*#__PURE__*/function () {
       }
     }, _callee2);
   }));
-  return function setBounds(_x2, _x3, _x4, _x5, _x6) {
+  return function setBounds(_x2, _x3) {
     return _ref3.apply(this, arguments);
   };
 }();

package/lib/modules/dialog/components/dialog-container/component/body.d.ts

@@ -5,4 +5,5 @@ export declare function DialogContainerBody(props: PropsWithChildren<{
     title?: string;
     actions?: React.ReactNode;
     autoHeight?: boolean;
+    closable?: boolean;
 }>): import("react/jsx-runtime").JSX.Element;

package/lib/modules/dialog/components/dialog-container/component/body.js

@@ -28,6 +28,7 @@ require("../index.css");
 var _env = require("agora-foundation/lib/utilities/env");
 var _ = require("..");
 var _useElectron = require("../../../hooks/useElectron");
+var _isBoolean = _interopRequireDefault(require("lodash/isBoolean"));
 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; }
@@ -36,7 +37,8 @@ function DialogContainerBody(props) {
     title = props.title,
     children = props.children,
     onClick = props.onClick,
-    autoHeight = props.autoHeight;
+    autoHeight = props.autoHeight,
+    closable = props.closable;
   var _useContext = (0, _react.useContext)(_.DialogContainerStore),
     bind = _useContext.bind;
   var _ref = (0, _env.isElectron)() ? (0, _react.useContext)(_useElectron.DialogInstanceContext) : {
@@ -67,7 +69,7 @@ function DialogContainerBody(props) {
         height: resizable ? 'calc(100% - 46px)' /* 当窗口需要拉伸时，会传值为 false 的 hasCustomShadow 过来，高度不需要自适应，所以内容区高度为 100vh 减去 title 高度 46px */ : (0, _env.isElectron)() ? autoHeight ? 'auto' : 'calc(100vh - 76px)' /* 76px 包含 46px 的 title 高度，和 30px 的阴影 */ : 'calc(100% - 46px)' /* 浏览器不需要减去阴影，高度需要 100% 减去 46px title */
       } : {},
       children: children
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+    }), (!(0, _isBoolean["default"])(closable) || closable) && /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
       className: "fcr-dialog-container-close",
       onClick: onClick,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/lib/modules/dialog/components/dialog-container/index.css

@@ -3,6 +3,22 @@
   position: relative;
   flex: 1;
   width: 100%;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji';
+  font-size: 14px;
 }
 
 .fcr-dialog-container_shadow {
@@ -27,9 +43,10 @@
   font-size: 16px;
   font-weight: 700;
   display: flex;
-  flex: 1;
+  flex: 3;
   align-items: center;
   justify-content: center;
+  color: var(--fcr_ui_scene_icontext1);
 }
 
 .fcr-dialog-container-actions {

package/lib/modules/dialog/components/dialog-container/index.d.ts

@@ -13,6 +13,7 @@ declare const DialogContainer: (props: PropsWithChildren<{
     closeInterception?: () => boolean;
     actions?: React.ReactNode;
     dialogId?: string;
+    closable?: boolean;
     autoHeight?: boolean;
 }>) => import("react/jsx-runtime").JSX.Element;
 export default DialogContainer;

package/lib/modules/dialog/components/dialog-container/index.js

@@ -35,7 +35,8 @@ var DialogContainer = (0, _mobxReact.observer)(function (props) {
     actions = props.actions,
     closeInterception = props.closeInterception,
     dialogId = props.dialogId,
-    autoHeight = props.autoHeight;
+    autoHeight = props.autoHeight,
+    closable = props.closable;
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     closeDialogByKey = _useContext.closeDialogByKey,
     closeDilaogByDialogId = _useContext.closeDilaogByDialogId;
@@ -53,6 +54,7 @@ var DialogContainer = (0, _mobxReact.observer)(function (props) {
     title: title,
     onClick: handleClose,
     actions: actions,
+    closable: closable,
     autoHeight: autoHeight,
     children: children
   });

package/lib/modules/dialog/components/participant/index.d.ts

@@ -1,3 +1,2 @@
 import { FC, PropsWithChildren } from 'react';
-export declare const ParticipantDialogContent: ({ children }: PropsWithChildren<{}>) => import("react/jsx-runtime").JSX.Element;
 export declare const ParticipantDialog: FC<PropsWithChildren<{}>>;

package/lib/modules/dialog/components/participant/index.js

@@ -5,10 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ParticipantDialogContent = exports.ParticipantDialog = void 0;
+exports.ParticipantDialog = void 0;
 require("core-js/modules/es.array.concat.js");
 var _env = require("agora-foundation/lib/utilities/env");
-var _windowHeader = require("agora-ui-foundation/lib/components/window-header");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _react = require("react");
 var _store = require("../../store");
@@ -18,36 +17,18 @@ var _dialogContainer = _interopRequireDefault(require("../dialog-container"));
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _iconButton = require("agora-ui-foundation/lib/components/icon-button");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _mobxReact = require("mobx-react");
 var _jsxRuntime = require("react/jsx-runtime");
-var ParticipantDialogContent = exports.ParticipantDialogContent = function ParticipantDialogContent(_ref) {
-  var children = _ref.children;
+var Container = (0, _mobxReact.observer)(function (props) {
   var store = (0, _react.useContext)(_store.StoreContext);
   var transI18n = (0, _i18n.useI18n)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "fcr-participant-dialog-wrapper",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
-      showClose: true,
-      title: "".concat(transI18n('fmt_participants_label_participants'), "(").concat(store.participantCount, ")"),
-      type: _windowHeader.WindowType.WINDOW,
-      onTypeChange: store.moveParticipantFromDialogToAside,
-      onClose: function onClose() {
-        return store.closeDialogByKey(_constant.FcrUIDialogKey.PARTICIPANT);
-      },
-      rootClassName: 'participant-can-draggable'
-    }), children]
-  });
-};
-var ParticipantDialog = exports.ParticipantDialog = function ParticipantDialog(_ref2) {
-  var children = _ref2.children;
-  var store = (0, _react.useContext)(_store.StoreContext);
-  var transI18n = (0, _i18n.useI18n)();
-  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
     title: "".concat(transI18n('fmt_participants_label_participants'), "(").concat(store.participantCount, ")"),
     width: 320,
     height: 560,
     dialogKey: _constant.FcrUIDialogKey.PARTICIPANT,
     onClose: store.closeParticipantDialog,
-    actions: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    actions: store.isSharingScreen ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
       content: transI18n('fmt_uimanager_option_mergeview'),
       mouseEnterDelay: 0,
       trigger: "hover",
@@ -62,6 +43,16 @@ var ParticipantDialog = exports.ParticipantDialog = function ParticipantDialog(_
     }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "fcr-participant-dialog-wrapper",
+      children: props.children
+    })
+  });
+});
+var ParticipantDialog = exports.ParticipantDialog = function ParticipantDialog(_ref) {
+  var children = _ref.children;
+  var store = (0, _react.useContext)(_store.StoreContext);
+  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
+    value: store,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
       children: children
     })
   });

package/lib/modules/dialog/components/pre-setting/electron.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare const DeviceSettingElectronDialog: ({ children }: PropsWithChildren<{}>) => null;

package/lib/modules/dialog/components/pre-setting/electron.js

@@ -0,0 +1,51 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeviceSettingElectronDialog = void 0;
+require("core-js/modules/web.timers.js");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _constant = require("../../../../utilities/constant");
+var _useElectron = require("../../hooks/useElectron");
+var DeviceSettingElectronDialog = exports.DeviceSettingElectronDialog = function DeviceSettingElectronDialog(_ref) {
+  var children = _ref.children;
+  var transI18n = (0, _i18n.useI18n)();
+  var config = {
+    fullscreen: false,
+    maximizable: false,
+    trafficLightPosition: {
+      x: 10,
+      y: 60
+    },
+    width: 580,
+    height: 600,
+    minWidth: 580,
+    minHeight: 600,
+    maxWidth: 670,
+    maxHeight: 800,
+    title: transI18n('fmt_settings_option_setting'),
+    resizable: false
+  };
+  var dialogKey = _constant.FcrUIDialogKey.DEVICE_SETTINGS;
+  (0, _useElectron.useElectronDialog)({
+    dialogKey: dialogKey,
+    config: config,
+    children: children,
+    onOpened: function onOpened(_ref2) {
+      var browserWindow = _ref2.browserWindow,
+        nearDisplayBounds = _ref2.nearDisplayBounds;
+      if (browserWindow) {
+        browserWindow.setAlwaysOnTop(true);
+        setTimeout(function () {
+          browserWindow.show();
+          browserWindow.setAlwaysOnTop(false);
+          browserWindow.moveTop();
+          browserWindow.focus();
+        }, 600);
+      }
+    }
+  });
+  return null;
+};

package/lib/modules/dialog/components/pre-setting/index.css

@@ -0,0 +1,26 @@
+.fcr-device-setting-dialog-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  border-radius: 16px;
+  box-shadow: var(--fcr_web_light_dropup);
+  border: 1px solid var(--fcr_ui_scene_line1);
+}
+
+.fcr-device-setting-dialog-wrapper .frc-window-header {
+  cursor: move;
+  height: 46px;
+}
+
+.fcr-device-setting-dialog-wrapper .fcr-device-settings {
+  height: calc(100% - 46px);
+}
+.fcr-device-setting-dialog-wrapper .fcr-device-settings-audio {
+  padding: 0;
+}
+
+.fcr-device-setting-dialog-wrapper .frc-window-header .frc-window-header__title {
+  height: 46px;
+  line-height: 46px;
+}

package/lib/modules/dialog/components/pre-setting/index.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import './index.css';
+declare const DeviceSettingDialog: ({ children, onClose }: PropsWithChildren<{
+    onClose: () => void;
+}>) => import("react/jsx-runtime").JSX.Element;
+export default DeviceSettingDialog;

package/lib/modules/dialog/components/pre-setting/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _env = require("agora-foundation/lib/utilities/env");
+var _electron = require("./electron");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+require("./index.css");
+var _constant = require("../../../../utilities/constant");
+var _preSettingContainer = _interopRequireDefault(require("../pre-setting-container"));
+var _jsxRuntime = require("react/jsx-runtime");
+var ELECTRON_HEIGHT = 556;
+var WEB_HEIGHT = 600;
+var DeviceSettingDialog = function DeviceSettingDialog(_ref) {
+  var children = _ref.children,
+    onClose = _ref.onClose;
+  var t = (0, _i18n.useI18n)();
+  var height = (0, _env.isElectron)() ? ELECTRON_HEIGHT : WEB_HEIGHT;
+  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_preSettingContainer["default"], {
+    title: t('fmt_modules_labels_devicesettings'),
+    width: 580,
+    height: height,
+    dialogKey: _constant.FcrUIDialogKey.DEVICE_SETTINGS,
+    onClose: onClose,
+    children: children
+  });
+  if ((0, _env.isElectron)()) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron.DeviceSettingElectronDialog, {
+      children: container
+    });
+  }
+  return container;
+};
+var _default = exports["default"] = DeviceSettingDialog;

package/lib/modules/dialog/components/pre-setting-container/component/body.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import '../index.css';
+export declare function DialogContainerBody(props: PropsWithChildren<{
+    onClick: () => void;
+    title?: string;
+    actions?: React.ReactNode;
+    autoHeight?: boolean;
+}>): import("react/jsx-runtime").JSX.Element;

package/lib/modules/dialog/components/pre-setting-container/component/body.js

@@ -0,0 +1,80 @@
+"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.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.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.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/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogContainerBody = DialogContainerBody;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.function.bind.js");
+var _react = require("react");
+require("../index.css");
+var _env = require("agora-foundation/lib/utilities/env");
+var _ = require("..");
+var _useElectron = require("../../../hooks/useElectron");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+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; }
+function DialogContainerBody(props) {
+  var actions = props.actions,
+    title = props.title,
+    children = props.children,
+    onClick = props.onClick,
+    autoHeight = props.autoHeight;
+  var _useContext = (0, _react.useContext)(_.DialogContainerStore),
+    bind = _useContext.bind;
+  var t = (0, _i18n.useI18n)();
+  var _ref = (0, _env.isElectron)() ? (0, _react.useContext)(_useElectron.DialogInstanceContext) : {
+      resizable: false
+    },
+    resizable = _ref.resizable;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-dialog-container ".concat(!resizable && 'fcr-dialog-container_shadow'),
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    children: [(title || actions) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("header", _objectSpread(_objectSpread({
+      className: "fcr-dialog-container-header"
+    }, bind === null || bind === void 0 ? void 0 : bind()), {}, {
+      children: [actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          flex: 1
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        children: t('fmt_modules_labels_devicesettings')
+      }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-dialog-container-actions",
+        children: actions
+      })]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
+      className: "fcr-dialog-container-content",
+      style: title || actions ? {
+        height: resizable ? 'calc(100% - 46px)' /* 当窗口需要拉伸时，会传值为 false 的 hasCustomShadow 过来，高度不需要自适应，所以内容区高度为 100vh 减去 title 高度 46px */ : (0, _env.isElectron)() ? autoHeight ? 'auto' : 'calc(100vh - 76px)' /* 76px 包含 46px 的 title 高度，和 30px 的阴影 */ : 'calc(100% - 46px)' /* 浏览器不需要减去阴影，高度需要 100% 减去 46px title */
+      } : {},
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+      className: "fcr-dialog-container-close",
+      onClick: onClick,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: "\xD7"
+      })
+    })]
+  });
+}

package/lib/modules/dialog/components/pre-setting-container/index.css

@@ -0,0 +1,82 @@
+.fcr-dialog-container {
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  position: relative;
+  flex: 1;
+  width: 100%;
+}
+
+.fcr-dialog-container_shadow {
+  box-shadow: var(--fcr_web_light_dropup);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  border-radius: var(--fcr_cornerradius_xl);
+}
+
+.fcr-dialog-container-header {
+  width: 100%;
+  height: 46px;
+  display: flex;
+  align-items: center;
+  -webkit-app-region: drag;
+  color: var(--fcr_ui_scene_icontext1);
+  justify-content: center;
+  cursor: move;
+  border-radius: var(--fcr_cornerradius_xl);
+}
+
+.fcr-dialog-container-header h2 {
+  font-size: 16px;
+  font-weight: 700;
+  display: flex;
+  flex: 3;
+  align-items: center;
+  justify-content: center;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-dialog-container-actions {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-right: 10px;
+}
+
+.fcr-dialog-container-content {
+  position: relative;
+  border-bottom-left-radius: var(--fcr_cornerradius_xl);
+  border-bottom-right-radius: var(--fcr_cornerradius_xl);
+  overflow: hidden;
+}
+
+.fcr-dialog-container .fcr-dialog-container-content:first-child {
+  border-top-left-radius: var(--fcr_cornerradius_xl);
+  border-top-right-radius: var(--fcr_cornerradius_xl);
+}
+
+.fcr-dialog-container-close {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--fcr_ui_scene_ramp_red6);
+  position: absolute;
+  left: 15px;
+  top: 15px;
+  display: block;
+  cursor: pointer;
+  -webkit-app-region: no-drag;
+  text-align: center;
+  line-height: 13px;
+}
+
+.fcr-dialog-container-close span {
+  display: none;
+}
+
+.fcr-dialog-container-close:hover span {
+  display: block;
+  color: #fff;
+}
+
+.fcr-dialog-container-close:hover {
+  color: var(--fcr_ui_scene_ramp_red7);
+}

package/lib/modules/dialog/components/pre-setting-container/index.d.ts

@@ -0,0 +1,18 @@
+import { PropsWithChildren } from 'react';
+import { FcrUIDialogKey } from '../../../../utilities/constant';
+import React from 'react';
+export declare const DialogContainerStore: React.Context<{
+    bind: () => object;
+}>;
+declare const DialogContainer: (props: PropsWithChildren<{
+    width?: number;
+    height?: number;
+    dialogKey: FcrUIDialogKey;
+    title?: string;
+    onClose?: () => void;
+    closeInterception?: () => boolean;
+    actions?: React.ReactNode;
+    dialogId?: string;
+    autoHeight?: boolean;
+}>) => import("react/jsx-runtime").JSX.Element;
+export default DialogContainer;