agora-ui-foundation 3.2.0 → 3.3.0

package/lib/components/watermark/index.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import './index.css';
+export type WaterMarkProps = {
+    /** 类名 */
+    className?: string;
+    /** 样式 */
+    style?: React.CSSProperties;
+    /** 水印样式 */
+    markStyle?: React.CSSProperties;
+    /** 水印类名 */
+    markClassName?: string;
+    /** 水印之间的水平间距 */
+    gapX?: number;
+    /** 水印之间的垂直间距 */
+    gapY?: number;
+    /** 追加的水印元素的z-index */
+    zIndex?: number;
+    /** 水印的宽度 */
+    width?: number;
+    /** 水印的高度 */
+    height?: number;
+    /** 水印在canvas 画布上绘制的垂直偏移量，正常情况下，水印绘制在中间位置, 即 offsetTop = gapY / 2 */
+    offsetTop?: number;
+    /** 水印在canvas 画布上绘制的水平偏移量, 正常情况下，水印绘制在中间位置, 即 offsetTop = gapX / 2 */
+    offsetLeft?: number;
+    /** 水印绘制时，旋转的角度，单位 ° */
+    rotate?: number;
+    /** ClassName 前缀 */
+    prefixCls?: string;
+    /** 高清印图片源, 为了高清屏幕显示，建议使用 2倍或3倍图，优先使用图片渲染水印。 */
+    image?: string;
+    /** 水印文字内容 */
+    content?: string | string[];
+    /** 文字颜色 */
+    fontColor?: string;
+    /** 文字样式 */
+    fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
+    /** 文字族 */
+    fontFamily?: string;
+    /** 文字粗细 */
+    fontWeight?: 'normal' | 'light' | 'weight' | number;
+    /** 文字大小 */
+    fontSize?: number | string;
+    children?: React.ReactNode;
+    multiLine?: boolean;
+};
+export declare const WaterMark: React.FC<WaterMarkProps>;

package/lib/components/watermark/index.js

@@ -0,0 +1,195 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.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.async-iterator.filter.js");
+require("core-js/modules/esnext.iterator.filter.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.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WaterMark = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.is-array.js");
+require("core-js/modules/es.number.constructor.js");
+require("core-js/modules/es.object.to-string.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.for-each.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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; }
+/**
+ * 返回当前显示设备的物理像素分辨率与CSS像素分辨率之比
+ *
+ * @param context
+ * @see api 有些废弃了，其实类型 CanvasRenderingContext2D
+ */
+var getPixelRatio = function getPixelRatio(context) {
+  if (!context) {
+    return 1;
+  }
+  var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1;
+  return (window.devicePixelRatio || 1) / backingStore;
+};
+var getSingleFontSize = function getSingleFontSize(width) {
+  var fontSize = 50;
+  if (width > 1500) {
+    fontSize = 80;
+  } else if (width >= 400 && width < 600) {
+    fontSize = 24;
+  } else if (width >= 220 && width < 400) {
+    fontSize = 14;
+  } else if (width < 220) {
+    fontSize = 12;
+  }
+  return fontSize;
+};
+var getMultiFontSize = function getMultiFontSize(width) {
+  var fontSize = 24;
+  if (width < 600) {
+    fontSize = 16;
+  } else if (width >= 600 && width < 1000) {
+    fontSize = 20;
+  }
+  return fontSize;
+};
+var WaterMark = exports.WaterMark = function WaterMark(props) {
+  var _props$multiLine = props.multiLine,
+    multiLine = _props$multiLine === void 0 ? true : _props$multiLine,
+    children = props.children,
+    style = props.style,
+    className = props.className,
+    markStyle = props.markStyle,
+    markClassName = props.markClassName,
+    _props$zIndex = props.zIndex,
+    zIndex = _props$zIndex === void 0 ? 9 : _props$zIndex,
+    _props$gapX = props.gapX,
+    gapX = _props$gapX === void 0 ? multiLine ? 180 : 0 : _props$gapX,
+    _props$gapY = props.gapY,
+    gapY = _props$gapY === void 0 ? multiLine ? 190 : 0 : _props$gapY,
+    _props$width = props.width,
+    width = _props$width === void 0 ? 120 : _props$width,
+    _props$height = props.height,
+    height = _props$height === void 0 ? 64 : _props$height,
+    _props$rotate = props.rotate,
+    rotate = _props$rotate === void 0 ? -22 : _props$rotate,
+    image = props.image,
+    content = props.content,
+    offsetLeft = props.offsetLeft,
+    offsetTop = props.offsetTop,
+    _props$fontStyle = props.fontStyle,
+    fontStyle = _props$fontStyle === void 0 ? 'normal' : _props$fontStyle,
+    _props$fontWeight = props.fontWeight,
+    fontWeight = _props$fontWeight === void 0 ? 'normal' : _props$fontWeight,
+    _props$fontColor = props.fontColor,
+    fontColor = _props$fontColor === void 0 ? 'rgba(187,187,187,1)' : _props$fontColor,
+    _props$fontSize = props.fontSize,
+    fontSize = _props$fontSize === void 0 ? multiLine ? getMultiFontSize(width) : getSingleFontSize(width) : _props$fontSize,
+    _props$fontFamily = props.fontFamily,
+    fontFamily = _props$fontFamily === void 0 ? 'sans-serif' : _props$fontFamily,
+    customizePrefixCls = props.prefixCls;
+  var wrapperCls = (0, _classnames["default"])("fcr-watermark-wrapper", className);
+  var waterMakrCls = (0, _classnames["default"])('watermark', markClassName);
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    base64Url = _useState2[0],
+    setBase64Url = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (width == 0 || height == 0) {
+      return;
+    }
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d');
+    var ratio = getPixelRatio(ctx);
+    var widthNum = (gapX + width) * ratio;
+    var heightNum = (gapY + height) * ratio;
+    var canvasWidth = "".concat(widthNum, "px");
+    var canvasHeight = "".concat(heightNum, "px");
+    var canvasOffsetLeft = offsetLeft || gapX / 2;
+    var canvasOffsetTop = offsetTop || gapY / 2;
+    canvas.setAttribute('width', canvasWidth);
+    canvas.setAttribute('height', canvasHeight);
+    if (ctx) {
+      var markWidth = width * ratio;
+      var markHeight = height * ratio;
+      // 旋转字符 rotate
+      if (multiLine) {
+        ctx.translate(canvasOffsetLeft * ratio, canvasOffsetTop * ratio);
+      } else {
+        ctx.translate(markWidth / 2, markHeight / 2);
+      }
+      ctx.rotate(Math.PI / 180 * Number(rotate));
+      if (image) {
+        var img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.referrerPolicy = 'no-referrer';
+        img.src = image;
+        img.onload = function () {
+          ctx.drawImage(img, 0, 0, markWidth, markHeight);
+          setBase64Url(canvas.toDataURL());
+        };
+      } else if (content) {
+        var markSize = Number(fontSize) * ratio;
+        ctx.font = "".concat(fontStyle, " normal ").concat(fontWeight, " ").concat(markSize, "px/").concat(markHeight, "px ").concat(fontFamily);
+        ctx.fillStyle = fontColor;
+        if (Array.isArray(content)) {
+          content === null || content === void 0 || content.forEach(function (item, index) {
+            if (multiLine) {
+              ctx.fillText(item, 0, index * Number(fontSize) * 2);
+            } else {
+              var textMe = ctx.measureText(item);
+              ctx.fillText(item, -textMe.width / 2, index * Number(fontSize) * 2);
+            }
+          });
+        } else {
+          ctx.fillText(content, 0, 0);
+        }
+        setBase64Url(canvas.toDataURL());
+      }
+    } else {
+      console.error('当前环境不支持Canvas');
+    }
+  }, [gapX, gapY, offsetLeft, offsetTop, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, content, fontSize]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: _objectSpread({}, style),
+    className: wrapperCls,
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: waterMakrCls,
+      style: _objectSpread({
+        zIndex: zIndex,
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        width: '100%',
+        height: '100%',
+        backgroundSize: "".concat(gapX + width, "px"),
+        pointerEvents: 'none',
+        backgroundRepeat: 'repeat',
+        backgroundImage: "url('".concat(base64Url, "')")
+      }, markStyle)
+    })]
+  });
+};

package/lib/components/window-header/index.js

@@ -61,20 +61,15 @@ var FcrWindowHeader = exports.FcrWindowHeader = function FcrWindowHeader(props)
       onReduction: onReduction
     }), showInMacAndWeb && showClose && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "frc-window-header-mac-control",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-        content: t('fmt_uimanager_button_close'),
-        mouseEnterDelay: 0,
-        trigger: "hover",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "frc-window-header-mac_button frc-window-header-mac_close",
-          onClick: onClose,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-            className: "frc-window-header-mac-icon frc-window-header-mac_close-icon",
-            type: _type.FcrIconType.FCR_CLOSE,
-            colors: {
-              iconPrimary: 'var(--fcr_ui_scene_black9_5)'
-            }
-          })
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "frc-window-header-mac_button frc-window-header-mac_close",
+        onClick: onClose,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          className: "frc-window-header-mac-icon frc-window-header-mac_close-icon",
+          type: _type.FcrIconType.FCR_CLOSE,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_black9_5)'
+          }
         })
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/theme/fcr-ui-config.d.ts

@@ -15,7 +15,6 @@ export declare class FcrUILightColors {
     fcrMobileUiSceneBottomnavigation2: string;
     fcrMobileUiSceneColorPopupFill1: string;
     fcrMobileUiSceneColorPopupFill2: string;
-    fcrMobileUiSceneColorPopupBlock1: string;
     fcrMobileUiSceneColorPopupBlock2: string;
     fcrMobileUiSceneToast1: string;
     fcrUiSceneIcontext1: string;
@@ -25,7 +24,6 @@ export declare class FcrUILightColors {
     fcrUiSceneLine1: string;
     fcrUiSceneLine2: string;
     fcrUiSceneInput: string;
-    fcrUiSceneRampBrand0: string;
     fcrUiSceneRampBrand1: string;
     fcrUiSceneRampBrand2: string;
     fcrUiSceneRampBrand3: string;
@@ -166,7 +164,44 @@ export declare class FcrUILightColors {
     fcrOrange6: string;
     fcrUiSceneRampOrange7: string;
     fcrUiSceneRampGreen7: string;
+    fcrUiSceneRampBrand0: string;
+    fcrUiSceneHover: string;
+    fcrMobileUiSceneBigbg: string;
+    fcrMobileUiSceneColorPopupFill4: string;
+    fcrMobileUiSceneColorPopupBlock1: string;
+    fcrUiSceneCard1: string;
+    fcrUiSceneCard2: string;
+    fcrHomepageFill1: string;
+    fcrHomepageFill2: string;
+    fcrHomepageCell: string;
+    fcrHomepageControl: string;
+    fcrHomepageControlBlock: string;
+    fcrHomepageTexture1: string;
+    fcrHomepageTexture2: string;
+    fcrHomepageTexture3: string;
+    fcrHomepageBrand6: string;
+    fcrHomepageBrand7: string;
+    fcrHomepageRed6: string;
+    fcrHomepageWhite10: string;
+    fcrHomepageIconGreen: string;
+    fcrHomepageIconGreenBg: string;
+    fcrHomepageColorGreen: string;
+    fcrHomepageIconBlue: string;
+    fcrHomepageColorBlue: string;
+    fcrHomepageIconBlueBg: string;
+    fcrHomepageLine: string;
+    fcrHomepageInput: string;
+    fcrHomepageFill3: string;
+    fcrHomepageGreenBg2: string;
+    fcrHomepageBlueBg2: string;
+    fcrHomepageTap: string;
+    fcrHomepageDark10: string;
+    fcrHomepageControlBlock2: string;
+    fcrHomepageBrand5: string;
+    fcrUiSceneInput3Forstartmeeting: string;
+    fcrUiSceneCard3: string;
     fcrWebLightDropup: string;
+    fcrWebLightDropupL: string;
     fcrWebLightDropupM: string;
     fcrWebLightDropupS: string;
 }
@@ -178,7 +213,6 @@ export declare class FcrUIDarkColors {
     fcrMobileUiSceneBottomnavigation2: string;
     fcrMobileUiSceneColorPopupFill1: string;
     fcrMobileUiSceneColorPopupFill2: string;
-    fcrMobileUiSceneColorPopupBlock1: string;
     fcrMobileUiSceneColorPopupBlock2: string;
     fcrMobileUiSceneToast1: string;
     fcrUiSceneIcontext1: string;
@@ -188,7 +222,6 @@ export declare class FcrUIDarkColors {
     fcrUiSceneLine1: string;
     fcrUiSceneLine2: string;
     fcrUiSceneInput: string;
-    fcrUiSceneRampBrand0: string;
     fcrUiSceneRampBrand1: string;
     fcrUiSceneRampBrand2: string;
     fcrUiSceneRampBrand3: string;
@@ -329,7 +362,44 @@ export declare class FcrUIDarkColors {
     fcrOrange6: string;
     fcrUiSceneRampOrange7: string;
     fcrUiSceneRampGreen7: string;
+    fcrUiSceneRampBrand0: string;
+    fcrUiSceneHover: string;
+    fcrMobileUiSceneBigbg: string;
+    fcrMobileUiSceneColorPopupFill4: string;
+    fcrMobileUiSceneColorPopupBlock1: string;
+    fcrUiSceneCard1: string;
+    fcrUiSceneCard2: string;
+    fcrHomepageFill1: string;
+    fcrHomepageFill2: string;
+    fcrHomepageCell: string;
+    fcrHomepageControl: string;
+    fcrHomepageControlBlock: string;
+    fcrHomepageTexture1: string;
+    fcrHomepageTexture2: string;
+    fcrHomepageTexture3: string;
+    fcrHomepageBrand6: string;
+    fcrHomepageBrand7: string;
+    fcrHomepageRed6: string;
+    fcrHomepageWhite10: string;
+    fcrHomepageIconGreen: string;
+    fcrHomepageIconGreenBg: string;
+    fcrHomepageColorGreen: string;
+    fcrHomepageIconBlue: string;
+    fcrHomepageColorBlue: string;
+    fcrHomepageIconBlueBg: string;
+    fcrHomepageLine: string;
+    fcrHomepageInput: string;
+    fcrHomepageFill3: string;
+    fcrHomepageGreenBg2: string;
+    fcrHomepageBlueBg2: string;
+    fcrHomepageTap: string;
+    fcrHomepageDark10: string;
+    fcrHomepageControlBlock2: string;
+    fcrHomepageBrand5: string;
+    fcrUiSceneInput3Forstartmeeting: string;
+    fcrUiSceneCard3: string;
     fcrWebLightDropup: string;
+    fcrWebLightDropupL: string;
     fcrWebLightDropupM: string;
     fcrWebLightDropupS: string;
 }
@@ -348,9 +418,7 @@ export declare class FcrUIRadius {
     fcrCornerradiusXxxxl: number;
 }
 declare class FcrUIFont {
-    fcrFontWeightXXL: number;
     fcrFontWeightX: number;
-    fcrFontWeightL: number;
     fcrFontWeightM: number;
     fcrFontWeightS: number;
 }

package/lib/theme/fcr-ui-config.js

@@ -29,7 +29,6 @@ var FcrUILightColors = exports.FcrUILightColors = /*#__PURE__*/(0, _createClass2
   (0, _defineProperty2["default"])(this, "fcrMobileUiSceneBottomnavigation2", '#ffffff80');
   (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupFill1", '#f5f6faf7');
   (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupFill2", '#ffffffff');
-  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupBlock1", '#fffffff2');
   (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupBlock2", '#f1f3f8ff');
   (0, _defineProperty2["default"])(this, "fcrMobileUiSceneToast1", '#2f2f2fcc');
   (0, _defineProperty2["default"])(this, "fcrUiSceneIcontext1", '#373c42ff');
@@ -39,7 +38,6 @@ var FcrUILightColors = exports.FcrUILightColors = /*#__PURE__*/(0, _createClass2
   (0, _defineProperty2["default"])(this, "fcrUiSceneLine1", '#e3e7efff');
   (0, _defineProperty2["default"])(this, "fcrUiSceneLine2", '#d8d8d880');
   (0, _defineProperty2["default"])(this, "fcrUiSceneInput", '#f9f9fcff');
-  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand0", '#4262FF12');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand1", '#4262ff1a');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand2", '#4262ff33');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand3", '#4262ff66');
@@ -117,7 +115,7 @@ var FcrUILightColors = exports.FcrUILightColors = /*#__PURE__*/(0, _createClass2
   (0, _defineProperty2["default"])(this, "fcrWebUiSceneFill1", '#f2f2faff');
   (0, _defineProperty2["default"])(this, "fcrWebUiSceneFill2", '#ffffffd9');
   (0, _defineProperty2["default"])(this, "fcrWebUiSceneFill3", '#f7f7fae5');
-  (0, _defineProperty2["default"])(this, "fcrWebUiSceneFill4Popup", '#f4f5f5ff');
+  (0, _defineProperty2["default"])(this, "fcrWebUiSceneFill4Popup", '#f3f7fbe5');
   (0, _defineProperty2["default"])(this, "fcrWebUiSceneFill5", '#e5eaf3e5');
   (0, _defineProperty2["default"])(this, "fcrUiSceneWhiteground", '#ffffffff');
   (0, _defineProperty2["default"])(this, "fcrWebUiSceneMainicon1", '#484957e5');
@@ -158,7 +156,7 @@ var FcrUILightColors = exports.FcrUILightColors = /*#__PURE__*/(0, _createClass2
   (0, _defineProperty2["default"])(this, "fcrWebUiSceneMainicon1Block", '#3c3d40ff');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed3", '#f5655c80');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed7", '#e55e56ff');
-  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack0", '#00000003');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack0", '#0000000d');
   (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupBlock5", '#f1f3f866');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed2", '#f5655c4d');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed1", '#f5655c1a');
@@ -180,7 +178,44 @@ var FcrUILightColors = exports.FcrUILightColors = /*#__PURE__*/(0, _createClass2
   (0, _defineProperty2["default"])(this, "fcrOrange6", '#ff8c38ff');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampOrange7", '#e86e16ff');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampGreen7", '#07b78dff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand0", '#4262ff12');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneHover", '#4262ff1a');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneBigbg", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupFill4", '#f5f6fafc');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupBlock1", '#fffffff2');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneCard1", '#67d569ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneCard2", '#a19fffff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageFill1", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageFill2", '#f7f7feff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageCell", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageControl", '#f8f8fbff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageControlBlock", '#edf0f6ff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageTexture1", '#000000ff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageTexture2", '#6d6a77ff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageTexture3", '#9f9caaff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageBrand6", '#4262ffff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageBrand7", '#3a55deff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageRed6", '#f5655cff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageWhite10", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageIconGreen", '#16d1a4ff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageIconGreenBg", '#b4f8b54d');
+  (0, _defineProperty2["default"])(this, "fcrHomepageColorGreen", '#16d1a4ff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageIconBlue", '#4262ffff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageColorBlue", '#4262ffff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageIconBlueBg", '#4262ff1a');
+  (0, _defineProperty2["default"])(this, "fcrHomepageLine", '#e3e7efff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageInput", '#f4f5fbff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageFill3", '#ffffffd9');
+  (0, _defineProperty2["default"])(this, "fcrHomepageGreenBg2", '#cefacfff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageBlueBg2", '#e1e6ffff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageTap", '#7c79ffff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageDark10", '#151414ff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageControlBlock2", '#e0e8fcb2');
+  (0, _defineProperty2["default"])(this, "fcrHomepageBrand5", '#4262ff99');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneInput3Forstartmeeting", '#f3f4f9ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneCard3", '#1ac3d5ff');
   (0, _defineProperty2["default"])(this, "fcrWebLightDropup", '0px 0px 15px 0px rgba(151, 151, 151, 0.25)');
+  (0, _defineProperty2["default"])(this, "fcrWebLightDropupL", '0px 0px 15px 10px rgba(143, 143, 143, 0.20)');
   (0, _defineProperty2["default"])(this, "fcrWebLightDropupM", '0px 0px 15px 0px rgba(143, 143, 143, 0.15)');
   (0, _defineProperty2["default"])(this, "fcrWebLightDropupS", '0px 0px 4px 0px rgba(0, 0, 0, 0.25)');
 });
@@ -193,7 +228,6 @@ var FcrUIDarkColors = exports.FcrUIDarkColors = /*#__PURE__*/(0, _createClass2["
   (0, _defineProperty2["default"])(this, "fcrMobileUiSceneBottomnavigation2", '#32354580');
   (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupFill1", '#1f2327f7');
   (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupFill2", '#3c3c3cff');
-  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupBlock1", '#292e33f2');
   (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupBlock2", '#353638f2');
   (0, _defineProperty2["default"])(this, "fcrMobileUiSceneToast1", '#fffffff2');
   (0, _defineProperty2["default"])(this, "fcrUiSceneIcontext1", '#ffffffff');
@@ -203,13 +237,12 @@ var FcrUIDarkColors = exports.FcrUIDarkColors = /*#__PURE__*/(0, _createClass2["
   (0, _defineProperty2["default"])(this, "fcrUiSceneLine1", '#4a4c5f80');
   (0, _defineProperty2["default"])(this, "fcrUiSceneLine2", '#40404033');
   (0, _defineProperty2["default"])(this, "fcrUiSceneInput", '#3d404bff');
-  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand0", '#C9CFE04D');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand1", '#4262ff33');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand2", '#4262ff4d');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand3", '#4262ff66');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand4", '#4262ff99');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand5", '#4262ffcc');
-  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand6", '#4262ffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand6", '#506effff');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand7", '#354eccff');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand8", '#283b99ff');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand9", '#1a2766ff');
@@ -219,7 +252,7 @@ var FcrUIDarkColors = exports.FcrUIDarkColors = /*#__PURE__*/(0, _createClass2["
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple3", '#7c79ff66');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple4", '#7c79ff99');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple5", '#7c79ffcc');
-  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple6", '#7c79ffff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple6", '#7e7bffff');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple8", '#4a4999ff');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple9", '#323066ff');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampPurple10", '#191833ff');
@@ -322,7 +355,7 @@ var FcrUIDarkColors = exports.FcrUIDarkColors = /*#__PURE__*/(0, _createClass2["
   (0, _defineProperty2["default"])(this, "fcrWebUiSceneMainicon1Block", '#e1e1e7ff');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed3", '#fb584e80');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed7", '#e34d43ff');
-  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack0", '#00000003');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneBlack0", '#0000000d');
   (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupBlock5", '#2f2f2fa6');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed2", '#fb584e4d');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampRed1", '#fb584e1a');
@@ -344,7 +377,44 @@ var FcrUIDarkColors = exports.FcrUIDarkColors = /*#__PURE__*/(0, _createClass2["
   (0, _defineProperty2["default"])(this, "fcrOrange6", '#ffa216ff');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampOrange7", '#e86e16ff');
   (0, _defineProperty2["default"])(this, "fcrUiSceneRampGreen7", '#00a703ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneRampBrand0", '#4262ff12');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneHover", '#6666664d');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneBigbg", '#26282cff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupFill4", '#000000ff');
+  (0, _defineProperty2["default"])(this, "fcrMobileUiSceneColorPopupBlock1", '#292e33f2');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneCard1", '#e2f458ff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneCard2", '#a19fffff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageFill1", '#121114ff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageFill2", '#26282cff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageCell", '#383e4fff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageControl", '#201f23ff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageControlBlock", '#383e4fff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageTexture1", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageTexture2", '#ffffffcc');
+  (0, _defineProperty2["default"])(this, "fcrHomepageTexture3", '#ffffffb2');
+  (0, _defineProperty2["default"])(this, "fcrHomepageBrand6", '#4262ffff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageBrand7", '#3a55deff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageRed6", '#fb584eff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageWhite10", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageIconGreen", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageIconGreenBg", '#16d1a4ff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageColorGreen", '#16d1a4ff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageIconBlue", '#ffffffff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageColorBlue", '#4262ffff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageIconBlueBg", '#4262ffff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageLine", '#ffffff33');
+  (0, _defineProperty2["default"])(this, "fcrHomepageInput", '#3d404bff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageFill3", '#404043d9');
+  (0, _defineProperty2["default"])(this, "fcrHomepageGreenBg2", '#26c19cff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageBlueBg2", '#2f43a8ff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageTap", '#ffb700ff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageDark10", '#151414ff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageControlBlock2", '#515971ff');
+  (0, _defineProperty2["default"])(this, "fcrHomepageBrand5", '#4262ff99');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneInput3Forstartmeeting", '#3d404bff');
+  (0, _defineProperty2["default"])(this, "fcrUiSceneCard3", '#00cae0ff');
   (0, _defineProperty2["default"])(this, "fcrWebLightDropup", '0px 0px 15px 0px rgba(0, 0, 0, 0.25)');
+  (0, _defineProperty2["default"])(this, "fcrWebLightDropupL", '0px 0px 15px 0px rgba(143, 143, 143, 0.2)');
   (0, _defineProperty2["default"])(this, "fcrWebLightDropupM", '0px 2px 50px 5px rgba(143, 143, 143, 0.2)');
   (0, _defineProperty2["default"])(this, "fcrWebLightDropupS", '0px 2px 8px 5px rgba(255, 255, 255, 0.1)');
 });
@@ -365,9 +435,7 @@ var FcrUIRadius = exports.FcrUIRadius = /*#__PURE__*/(0, _createClass2["default"
 });
 var FcrUIFont = /*#__PURE__*/(0, _createClass2["default"])(function FcrUIFont() {
   (0, _classCallCheck2["default"])(this, FcrUIFont);
-  (0, _defineProperty2["default"])(this, "fcrFontWeightXXL", 900);
   (0, _defineProperty2["default"])(this, "fcrFontWeightX", 800);
-  (0, _defineProperty2["default"])(this, "fcrFontWeightL", 700);
   (0, _defineProperty2["default"])(this, "fcrFontWeightM", 600);
   (0, _defineProperty2["default"])(this, "fcrFontWeightS", 400);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-ui-foundation",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "license": "MIT",
   "files": [
     "lib",
@@ -16,6 +16,7 @@
     "patch-package": "^8.0.0",
     "rc-dialog": "^8",
     "rc-tooltip": "5.1.1",
+    "rc-notification": "5.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^14.1.0",
@@ -24,7 +25,7 @@
     "react-transition-group": "^4.4.2",
     "react-virtualized": "^9.22.5",
     "tinycolor2": "^1.6.0",
-    "agora-foundation": "^3.2.0"
+    "agora-foundation": "^3.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.5",
@@ -56,7 +57,7 @@
     "tslib": "^2.6.2",
     "typescript": "^5.4.3",
     "vite": "^5.2.7",
-    "agora-toolchain": "^3.2.0"
+    "agora-toolchain": "^3.3.0"
   },
   "scripts": {
     "build": "agora-tc-transpile",

package/patches/rc-notification+5.6.2.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/rc-notification/es/hooks/useNotification.js b/node_modules/rc-notification/es/hooks/useNotification.js
+index 6b1199f..cccebd7 100644
+--- a/node_modules/rc-notification/es/hooks/useNotification.js
++++ b/node_modules/rc-notification/es/hooks/useNotification.js
+@@ -44,7 +44,7 @@ export default function useNotification() {
+     setContainer = _React$useState2[1];
+   var notificationsRef = React.useRef();
+   var contextHolder = /*#__PURE__*/React.createElement(Notifications, {
+-    container: container,
++    container: getContainer(),
+     ref: notificationsRef,
+     prefixCls: prefixCls,
+     motion: motion,