@lark-apaas/client-toolkit-lite 1.1.18 → 1.1.19-alpha.0

package/dist/index.cjs

@@ -2141,6 +2141,7 @@ var safety_default = Safety;
 
 // src/components/AppContainer/Watermark.tsx
 var import_react6 = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
 var PopoverPrimitive2 = __toESM(require("@radix-ui/react-popover"), 1);
 
 // src/components/AppContainer/doubao-watermark-asset.ts
@@ -2149,6 +2150,7 @@ var DOUBAO_LOGO_SRC = `${CDN}/setting_voice.svg`;
 var DOUBAO_PILL_MOBILE_PNG = `${CDN}/Frame%202147223991%20(3).png`;
 
 // src/components/AppContainer/Watermark.tsx
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react6.useLayoutEffect : import_react6.useEffect;
 var DOUBAO_SOURCE = "5";
 var REPORT_ENABLED = true;
 var BRAND_TEXT = "\u8C46\u5305 AI \u751F\u6210";
@@ -2156,6 +2158,7 @@ var POWERED_BY_TEXT = "\u7531\u98DE\u4E66\u5999\u642D\u63D0\u4F9B\u652F\u6301";
 var FONT_FAMILY2 = "'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif";
 var PILL_SHADOW = "0px 8px 32px rgba(0,0,0,0.08), 0px 4px 16px rgba(0,0,0,0.04), 0px 2px 4px rgba(0,0,0,0.02)";
 var CARD_SHADOW = "0px 4px 16px rgba(0,0,0,0.03), 0px 4px 10px rgba(0,0,0,0.03), 0px 2px 4px rgba(0,0,0,0.02)";
+var HOST_TAG = "doubao-watermark";
 var reportDomainByEnv = /* @__PURE__ */ __name((env) => {
   if (env === "boe") return "tns.feishu-boe.cn";
   if (env === "pre") return "tns.feishu-pre.cn";
@@ -2220,8 +2223,6 @@ var Avatar = /* @__PURE__ */ __name(({ size }) => /* @__PURE__ */ import_react6.
   style: {
     width: size,
     height: size,
-    maxWidth: "none",
-    maxHeight: "none",
     borderRadius: 100,
     flexShrink: 0,
     display: "block"
@@ -2347,7 +2348,7 @@ var MenuCard = /* @__PURE__ */ __name(({ items, fontSize, footerFontSize, minWid
     whiteSpace: "nowrap"
   }
 }, POWERED_BY_TEXT)), "MenuCard");
-var MobileWatermark = /* @__PURE__ */ __name(({ onDontShow }) => {
+var MobileWatermark = /* @__PURE__ */ __name(({ onDontShow, portalContainer }) => {
   const [open, setOpen] = (0, import_react6.useState)(false);
   const items = [];
   if (REPORT_ENABLED) {
@@ -2373,12 +2374,9 @@ var MobileWatermark = /* @__PURE__ */ __name(({ onDontShow }) => {
   }, /* @__PURE__ */ import_react6.default.createElement("div", {
     "data-custom-element": "doubao-watermark-mobile",
     style: {
-      position: "fixed",
-      right: 12,
-      bottom: 12,
+      position: "relative",
       width: 122,
       height: 30,
-      zIndex: 9999,
       cursor: "pointer"
     }
   }, /* @__PURE__ */ import_react6.default.createElement("img", {
@@ -2392,12 +2390,12 @@ var MobileWatermark = /* @__PURE__ */ __name(({ onDontShow }) => {
       bottom: -40,
       width: 166,
       height: 94,
-      maxWidth: "none",
-      maxHeight: "none",
       display: "block",
       pointerEvents: "none"
     }
-  }))), /* @__PURE__ */ import_react6.default.createElement(PopoverPrimitive2.Portal, null, /* @__PURE__ */ import_react6.default.createElement(PopoverPrimitive2.Content, {
+  }))), /* @__PURE__ */ import_react6.default.createElement(PopoverPrimitive2.Portal, {
+    container: portalContainer
+  }, /* @__PURE__ */ import_react6.default.createElement(PopoverPrimitive2.Content, {
     side: "top",
     align: "end",
     sideOffset: 8,
@@ -2411,16 +2409,16 @@ var MobileWatermark = /* @__PURE__ */ __name(({ onDontShow }) => {
     minWidth: 160
   }))));
 }, "MobileWatermark");
-var Watermark = /* @__PURE__ */ __name(() => {
-  const [closed, setClosed] = (0, import_react6.useState)(false);
+var WatermarkContent = /* @__PURE__ */ __name(({ isMobile: isMobile2, onClose, portalContainer }) => {
   const [open, setOpen] = (0, import_react6.useState)(false);
   const timer = (0, import_react6.useRef)(null);
-  const isMobile2 = useIsMobile();
-  if (String(process.env.MIAODA_APP_SOURCE) !== DOUBAO_SOURCE) return null;
-  if (closed) return null;
+  (0, import_react6.useEffect)(() => () => {
+    if (timer.current) clearTimeout(timer.current);
+  }, []);
   if (isMobile2) {
     return /* @__PURE__ */ import_react6.default.createElement(MobileWatermark, {
-      onDontShow: /* @__PURE__ */ __name(() => setClosed(true), "onDontShow")
+      onDontShow: onClose,
+      portalContainer
     });
   }
   const enter = /* @__PURE__ */ __name(() => {
@@ -2443,10 +2441,6 @@ var Watermark = /* @__PURE__ */ __name(() => {
     onMouseEnter: enter,
     onMouseLeave: leave,
     style: {
-      position: "fixed",
-      right: 12,
-      bottom: 12,
-      zIndex: 9999,
       display: "flex",
       flexDirection: "column",
       alignItems: "flex-end",
@@ -2459,9 +2453,45 @@ var Watermark = /* @__PURE__ */ __name(() => {
     minWidth: 144
   }), /* @__PURE__ */ import_react6.default.createElement(Pill, {
     variant: "desktop",
-    onClose: /* @__PURE__ */ __name(() => setClosed(true), "onClose"),
+    onClose,
     showClose: open
   }));
+}, "WatermarkContent");
+var Watermark = /* @__PURE__ */ __name(() => {
+  const [closed, setClosed] = (0, import_react6.useState)(false);
+  const [shadowRoot, setShadowRoot] = (0, import_react6.useState)(null);
+  const hostRef = (0, import_react6.useRef)(null);
+  const isMobile2 = useIsMobile();
+  useIsomorphicLayoutEffect(() => {
+    if (!hostRef.current) return;
+    const root = hostRef.current.shadowRoot ?? hostRef.current.attachShadow({
+      mode: "open"
+    });
+    setShadowRoot(root);
+  }, []);
+  if (String(process.env.MIAODA_APP_SOURCE) !== DOUBAO_SOURCE) return null;
+  if (closed) return null;
+  const hostStyle = {
+    all: "initial",
+    position: "fixed",
+    right: 12,
+    bottom: 12,
+    // 32-bit 有符号整数上限,盖过绝大多数应用 z-index 竞争。
+    zIndex: 2147483647,
+    // 自定义元素默认 display:inline,shadow 内 flex 布局需要 block/inline-block。
+    display: "block",
+    width: "auto",
+    height: "auto"
+  };
+  const content = /* @__PURE__ */ import_react6.default.createElement(WatermarkContent, {
+    isMobile: isMobile2,
+    onClose: /* @__PURE__ */ __name(() => setClosed(true), "onClose"),
+    portalContainer: shadowRoot
+  });
+  return /* @__PURE__ */ import_react6.default.createElement(HOST_TAG, {
+    ref: hostRef,
+    style: hostStyle
+  }, shadowRoot ? /* @__PURE__ */ (0, import_react_dom.createPortal)(content, shadowRoot) : content);
 }, "Watermark");
 var Watermark_default = Watermark;