@lark-apaas/client-toolkit-lite 1.1.11-beta.2 → 1.1.11

package/dist/index.js

@@ -1995,16 +1995,15 @@ import * as PopoverPrimitive2 from "@radix-ui/react-popover";
 // src/components/AppContainer/doubao-watermark-asset.ts
 var CDN = "https://lf3-static.bytednsdoc.com/obj/eden-cn/LMfspH/ljhwZthlaukjlkulzlp/miaoda-ui";
 var DOUBAO_LOGO_SRC = `${CDN}/setting_voice.svg`;
-var DOUBAO_PILL_MOBILE_PNG = `${CDN}/Frame%202147223991%20(2).png`;
+var DOUBAO_CLOSE_SRC = `${CDN}/icon_close_outlined.svg`;
+var DOUBAO_REPORT_SRC = `${CDN}/%5BDBX%5DDropdown.svg`;
+var DOUBAO_PILL_MOBILE_SRC = `${CDN}/Frame%202147223991%20(4).svg`;
+var DOUBAO_REPORT_ITEM_SRC = `${CDN}/_Dropdown-item.svg`;
+var DOUBAO_DONTSHOW_ITEM_SRC = `${CDN}/_Dropdown-item%20(1).svg`;
 
 // src/components/AppContainer/Watermark.tsx
 var DOUBAO_SOURCE = "5";
 var REPORT_ENABLED = false;
-var BRAND_TEXT = "\u8C46\u5305AI";
-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 reportDomainByEnv = /* @__PURE__ */ __name((env) => {
   if (env === "boe") return "tns.feishu-boe.cn";
   if (env === "pre") return "tns.feishu-pre.cn";
@@ -2021,199 +2020,51 @@ var openDoubaoReport = /* @__PURE__ */ __name(() => {
   const url = `https://${domain}/cust/lark_report/?type=common&params=${encodeURIComponent(params)}&lang=zh-CN`;
   window.open(url, "_blank", "noopener,noreferrer");
 }, "openDoubaoReport");
-var FeedbackIcon = /* @__PURE__ */ __name(() => /* @__PURE__ */ React3.createElement("svg", {
-  width: 16,
-  height: 16,
-  viewBox: "0 0 16 16",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-  style: {
-    display: "block",
-    flexShrink: 0
-  }
-}, /* @__PURE__ */ React3.createElement("path", {
-  d: "M12.6667 2H3.33333V14H6.66667V15.3334H3.33333C2.59695 15.3334 2 14.7364 2 14V2C2 1.26364 2.59695 0.666687 3.33333 0.666687H12.6667C13.403 0.666687 14 1.26364 14 2V7.33335H12.6667V2Z",
-  fill: "currentColor"
-}), /* @__PURE__ */ React3.createElement("path", {
-  d: "M5.33333 4.66669C4.96514 4.66669 4.66667 4.96516 4.66667 5.33335C4.66667 5.70154 4.96514 6 5.33333 6H10.6667C11.0349 6 11.3333 5.70154 11.3333 5.33335C11.3333 4.96516 11.0349 4.66669 10.6667 4.66669H5.33333Z",
-  fill: "currentColor"
-}), /* @__PURE__ */ React3.createElement("path", {
-  d: "M4.66667 8.33335C4.66667 7.96516 4.96514 7.66669 5.33333 7.66669H8C8.36819 7.66669 8.66667 7.96516 8.66667 8.33335C8.66667 8.70154 8.36819 9 8 9H5.33333C4.96514 9 4.66667 8.70154 4.66667 8.33335Z",
-  fill: "currentColor"
-}), /* @__PURE__ */ React3.createElement("path", {
-  d: "M13.5523 8.70017C13.9428 8.30964 14.576 8.30964 14.9665 8.70017C15.357 9.09069 15.357 9.72386 14.9665 10.1144L14.2594 10.8215L12.8452 9.40728L13.5523 8.70017Z",
-  fill: "currentColor"
-}), /* @__PURE__ */ React3.createElement("path", {
-  d: "M12.1381 10.1144L13.5523 11.5286L10.2309 14.85C10.0916 14.9892 9.91229 15.0815 9.71798 15.1138L8.45737 15.3234C8.42136 15.3294 8.38467 15.3177 8.35885 15.2918C8.33271 15.2657 8.32099 15.2284 8.32749 15.192L8.55128 13.9374C8.58465 13.7502 8.6746 13.5779 8.80901 13.4435L12.1381 10.1144Z",
-  fill: "currentColor"
-})), "FeedbackIcon");
-var CloseIcon = /* @__PURE__ */ __name(({ size }) => /* @__PURE__ */ React3.createElement("svg", {
-  width: size,
-  height: size,
-  viewBox: "0 0 10 10",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-  style: {
-    display: "block",
-    flexShrink: 0
-  }
-}, /* @__PURE__ */ React3.createElement("path", {
-  d: "M8.08312 8.08298C8.2384 7.92769 8.23953 7.67705 8.08424 7.52176L5.3625 4.80002L8.08422 2.07829C8.23951 1.92301 8.23839 1.67236 8.0831 1.51708C7.92781 1.36179 7.67717 1.36066 7.52188 1.51595C7.36659 1.67124 4.80016 4.23767 4.80016 4.23767L2.07841 1.51593C1.92313 1.36064 1.67248 1.36177 1.5172 1.51705C1.36191 1.67234 1.36078 1.92298 1.51607 2.07827L4.23782 4.80002L1.51605 7.52178C1.36076 7.67707 1.36189 7.92771 1.51718 8.083C1.67246 8.23829 1.92311 8.23941 2.07839 8.08412L4.80016 5.36236L7.5219 8.0841C7.67719 8.23939 7.92783 8.23826 8.08312 8.08298Z",
-  fill: "currentColor"
-})), "CloseIcon");
-var Avatar = /* @__PURE__ */ __name(({ size }) => /* @__PURE__ */ React3.createElement("img", {
-  src: DOUBAO_LOGO_SRC,
-  width: size,
-  height: size,
-  alt: "",
-  style: {
-    width: size,
-    height: size,
-    maxWidth: "none",
-    maxHeight: "none",
-    borderRadius: 100,
-    flexShrink: 0,
-    display: "block"
-  }
-}), "Avatar");
-var Pill = /* @__PURE__ */ __name(({ variant, onClose }) => {
-  const isDesktop = variant === "desktop";
-  return /* @__PURE__ */ React3.createElement("div", {
-    style: {
-      boxSizing: "border-box",
-      display: "inline-flex",
-      alignItems: "center",
-      gap: isDesktop ? 4 : 6,
-      padding: isDesktop ? "6px 12px 6px 8px" : "4px 12px 4px 8px",
-      background: "#363636",
-      border: "0.5px solid rgba(255,255,255,0.1)",
-      borderRadius: 100,
-      boxShadow: PILL_SHADOW,
-      cursor: "pointer"
-    }
-  }, /* @__PURE__ */ React3.createElement(Avatar, {
-    size: isDesktop ? 16 : 18
-  }), /* @__PURE__ */ React3.createElement("span", {
-    style: {
-      fontFamily: FONT_FAMILY2,
-      fontSize: isDesktop ? 12 : 14,
-      lineHeight: isDesktop ? "18px" : "22px",
-      color: "rgba(255,255,255,0.85)",
-      whiteSpace: "nowrap"
-    }
-  }, BRAND_TEXT), isDesktop && onClose && /* @__PURE__ */ React3.createElement("span", {
-    role: "button",
-    "aria-label": "\u5173\u95ED",
-    onClick: /* @__PURE__ */ __name((e) => {
-      e.stopPropagation();
-      onClose();
-    }, "onClick"),
-    style: {
-      display: "inline-flex",
-      alignItems: "center",
-      cursor: "pointer",
-      flexShrink: 0,
-      color: "rgba(255,255,255,0.5)"
-    }
-  }, /* @__PURE__ */ React3.createElement(CloseIcon, {
-    size: 10
-  })));
-}, "Pill");
-var MenuRow = /* @__PURE__ */ __name(({ icon, label, fontSize, onClick }) => {
-  const [hover, setHover] = useState5(false);
-  return /* @__PURE__ */ React3.createElement("div", {
-    role: "menuitem",
-    "data-label": label,
-    onClick,
-    onMouseEnter: /* @__PURE__ */ __name(() => setHover(true), "onMouseEnter"),
-    onMouseLeave: /* @__PURE__ */ __name(() => setHover(false), "onMouseLeave"),
-    style: {
-      boxSizing: "border-box",
-      display: "flex",
-      alignItems: "center",
-      gap: 8,
-      padding: "4px 10px",
-      borderRadius: 6,
-      cursor: "pointer",
-      color: "#000000",
-      background: hover ? "rgba(0,0,0,0.04)" : "transparent"
-    }
-  }, /* @__PURE__ */ React3.createElement("span", {
-    style: {
-      display: "inline-flex",
-      width: 16,
-      height: 16,
-      flexShrink: 0,
-      color: "#000000"
-    }
-  }, icon === "feedback" ? /* @__PURE__ */ React3.createElement(FeedbackIcon, null) : /* @__PURE__ */ React3.createElement(CloseIcon, {
-    size: 16
-  })), /* @__PURE__ */ React3.createElement("span", {
-    style: {
-      fontFamily: FONT_FAMILY2,
-      fontSize,
-      lineHeight: `${fontSize + 8}px`,
-      color: "#000000",
-      whiteSpace: "nowrap"
-    }
-  }, label));
-}, "MenuRow");
-var MenuCard = /* @__PURE__ */ __name(({ items, fontSize, footerFontSize, minWidth, style }) => /* @__PURE__ */ React3.createElement("div", {
-  style: {
-    boxSizing: "border-box",
-    display: "flex",
-    flexDirection: "column",
-    minWidth,
-    background: "#ffffff",
-    border: "0.5px solid rgba(0,0,0,0.1)",
-    borderRadius: 10,
-    boxShadow: CARD_SHADOW,
-    overflow: "hidden",
-    // radix Content 打开时获取焦点，去掉浏览器默认 focus 描边
-    outline: "none",
-    ...style
-  }
-}, items.length > 0 && /* @__PURE__ */ React3.createElement("div", {
-  style: {
-    boxSizing: "border-box",
-    padding: 4
-  }
-}, items.map((it) => /* @__PURE__ */ React3.createElement(MenuRow, {
-  key: it.label,
-  icon: it.icon,
-  label: it.label,
-  fontSize,
-  onClick: it.onClick
-}))), /* @__PURE__ */ React3.createElement("div", {
-  style: {
-    boxSizing: "border-box",
-    background: "#f9f9f9",
-    padding: "8px 14px",
-    fontFamily: FONT_FAMILY2,
-    fontSize: footerFontSize,
-    lineHeight: `${footerFontSize + 8}px`,
-    color: "rgba(0,0,0,0.35)",
-    whiteSpace: "nowrap"
-  }
-}, POWERED_BY_TEXT)), "MenuCard");
+var mobilePillWrapper = {
+  position: "fixed",
+  right: 12,
+  bottom: 12,
+  width: 85,
+  height: 30,
+  zIndex: 9999,
+  cursor: "pointer"
+};
+var mobilePillImg = {
+  position: "absolute",
+  right: -12,
+  bottom: -40,
+  width: 129,
+  height: 94,
+  // 钉死尺寸：宿主页常带 Tailwind preflight 的 `img{max-width:100%;height:auto}`，
+  // 会把这张 129x94 的图压进 85x30 包裹层导致缩水变形 + 负偏移对齐错位。
+  // 内联 style 特异度高于 element 选择器，可盖过 preflight。
+  maxWidth: "none",
+  maxHeight: "none",
+  display: "block",
+  pointerEvents: "none"
+};
+var mobileMenu = {
+  display: "flex",
+  flexDirection: "column",
+  background: "#fff",
+  borderRadius: 12,
+  padding: 4,
+  boxShadow: "0px 6px 16px rgba(0,0,0,0.12)",
+  zIndex: 1e4,
+  // radix Content 打开时获取焦点，去掉浏览器默认 focus 描边（同 Safety sheetContent）
+  outline: "none"
+};
+var mobileMenuItem = {
+  display: "block",
+  // 同药丸：钉死尺寸盖过宿主 Tailwind preflight 的 img{max-width:100%;height:auto}
+  width: 132,
+  height: 38,
+  maxWidth: "none",
+  maxHeight: "none",
+  cursor: "pointer"
+};
 var MobileWatermark = /* @__PURE__ */ __name(({ onDontShow }) => {
   const [open, setOpen] = useState5(false);
-  const items = [];
-  if (REPORT_ENABLED) {
-    items.push({
-      icon: "feedback",
-      label: "\u6295\u8BC9\u4E0E\u4E3E\u62A5",
-      onClick: openDoubaoReport
-    });
-  }
-  items.push({
-    icon: "close",
-    label: "\u4E0D\u518D\u5C55\u793A",
-    onClick: /* @__PURE__ */ __name(() => {
-      setOpen(false);
-      onDontShow();
-    }, "onClick")
-  });
   return /* @__PURE__ */ React3.createElement(PopoverPrimitive2.Root, {
     open,
     onOpenChange: setOpen
@@ -2221,43 +2072,34 @@ var MobileWatermark = /* @__PURE__ */ __name(({ onDontShow }) => {
     asChild: true
   }, /* @__PURE__ */ React3.createElement("div", {
     "data-custom-element": "doubao-watermark-mobile",
-    style: {
-      position: "fixed",
-      right: 12,
-      bottom: 12,
-      width: 85,
-      height: 30,
-      zIndex: 9999,
-      cursor: "pointer"
-    }
+    style: mobilePillWrapper
   }, /* @__PURE__ */ React3.createElement("img", {
-    src: DOUBAO_PILL_MOBILE_PNG,
+    src: DOUBAO_PILL_MOBILE_SRC,
     width: 129,
     height: 94,
-    alt: "\u8C46\u5305AI",
-    style: {
-      position: "absolute",
-      right: -12,
-      bottom: -40,
-      width: 129,
-      height: 94,
-      maxWidth: "none",
-      maxHeight: "none",
-      display: "block",
-      pointerEvents: "none"
-    }
+    alt: "\u8C46\u5305 AI \u751F\u6210",
+    style: mobilePillImg
   }))), /* @__PURE__ */ React3.createElement(PopoverPrimitive2.Portal, null, /* @__PURE__ */ React3.createElement(PopoverPrimitive2.Content, {
     side: "top",
     align: "end",
     sideOffset: 8,
-    style: {
-      outline: "none"
-    }
-  }, /* @__PURE__ */ React3.createElement(MenuCard, {
-    items,
-    fontSize: 16,
-    footerFontSize: 14,
-    minWidth: 160
+    style: mobileMenu
+  }, /* @__PURE__ */ React3.createElement("img", {
+    src: DOUBAO_REPORT_ITEM_SRC,
+    width: 132,
+    height: 38,
+    alt: "\u6295\u8BC9\u4E0E\u4E3E\u62A5",
+    style: mobileMenuItem
+  }), /* @__PURE__ */ React3.createElement("img", {
+    src: DOUBAO_DONTSHOW_ITEM_SRC,
+    width: 132,
+    height: 38,
+    alt: "\u4E0D\u518D\u5C55\u793A",
+    style: mobileMenuItem,
+    onClick: /* @__PURE__ */ __name(() => {
+      setOpen(false);
+      onDontShow();
+    }, "onClick")
   }))));
 }, "MobileWatermark");
 var Watermark = /* @__PURE__ */ __name(() => {
@@ -2279,14 +2121,6 @@ var Watermark = /* @__PURE__ */ __name(() => {
   const leave = /* @__PURE__ */ __name(() => {
     timer.current = setTimeout(() => setOpen(false), 100);
   }, "leave");
-  const desktopItems = [];
-  if (REPORT_ENABLED) {
-    desktopItems.push({
-      icon: "feedback",
-      label: "\u6295\u8BC9\u4E0E\u4E3E\u62A5",
-      onClick: openDoubaoReport
-    });
-  }
   return /* @__PURE__ */ React3.createElement("div", {
     "data-custom-element": "doubao-watermark",
     onMouseEnter: enter,
@@ -2298,18 +2132,72 @@ var Watermark = /* @__PURE__ */ __name(() => {
       zIndex: 9999,
       display: "flex",
       flexDirection: "column",
-      alignItems: "flex-end",
-      gap: 8
-    }
-  }, open && /* @__PURE__ */ React3.createElement(MenuCard, {
-    items: desktopItems,
-    fontSize: 14,
-    footerFontSize: 12,
-    minWidth: 144
-  }), /* @__PURE__ */ React3.createElement(Pill, {
-    variant: "desktop",
-    onClose: /* @__PURE__ */ __name(() => setClosed(true), "onClose")
-  }));
+      alignItems: "flex-end"
+    }
+  }, REPORT_ENABLED && open && /* @__PURE__ */ React3.createElement("img", {
+    src: DOUBAO_REPORT_SRC,
+    width: 168,
+    height: 78,
+    alt: "\u6295\u8BC9\u4E0E\u4E3E\u62A5",
+    onClick: openDoubaoReport,
+    style: {
+      display: "block",
+      cursor: "pointer",
+      marginBottom: -8,
+      marginRight: -12
+    }
+  }), /* @__PURE__ */ React3.createElement("div", {
+    style: {
+      boxSizing: "border-box",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 4,
+      padding: "6px 12px 6px 8px",
+      background: "#363636",
+      border: "0.5px solid rgba(255,255,255,0.1)",
+      borderRadius: 100,
+      boxShadow: "0px 2px 2px rgba(0,0,0,0.02), 0px 4px 8px rgba(0,0,0,0.04), 0px 8px 16px rgba(0,0,0,0.08)"
+    }
+  }, /* @__PURE__ */ React3.createElement("img", {
+    src: DOUBAO_LOGO_SRC,
+    width: 16,
+    height: 16,
+    alt: "",
+    style: {
+      borderRadius: 100,
+      flexShrink: 0,
+      display: "block"
+    }
+  }), /* @__PURE__ */ React3.createElement("span", {
+    style: {
+      fontFamily: "'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif",
+      fontSize: 12,
+      lineHeight: "18px",
+      color: "rgba(255,255,255,0.85)",
+      whiteSpace: "nowrap"
+    }
+  }, "\u7531 \u8C46\u5305AI \u751F\u6210"), /* @__PURE__ */ React3.createElement("span", {
+    role: "button",
+    "aria-label": "\u5173\u95ED",
+    onClick: /* @__PURE__ */ __name((e) => {
+      e.stopPropagation();
+      setClosed(true);
+    }, "onClick"),
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      cursor: "pointer",
+      flexShrink: 0
+    }
+  }, /* @__PURE__ */ React3.createElement("img", {
+    src: DOUBAO_CLOSE_SRC,
+    width: 10,
+    height: 10,
+    alt: "",
+    style: {
+      display: "block"
+    }
+  }))));
 }, "Watermark");
 var Watermark_default = Watermark;