feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/studio/components/src/card-thumbnail-popover/index.module.less

@@ -0,0 +1,30 @@
+.popover-content {
+  overflow: hidden;
+  box-sizing: border-box;
+  max-width: 400px;
+}
+
+.popover-card-title {
+  margin-bottom: 24px;
+
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px;
+  color: #1C1D24;
+  word-wrap: break-word;
+}
+
+.popover-card-img {
+  max-width: 360px;
+  border: 1px solid #E5E5E5;
+  border-radius: 8px;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.popover-card-icon {
+  color: rgba(29, 28, 35, 35%)
+}

frontend/packages/studio/components/src/card-thumbnail-popover/index.tsx

@@ -0,0 +1,75 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { type PropsWithChildren, useRef, useCallback } from 'react';
+
+import { get } from 'lodash-es';
+import cls from 'classnames';
+import { type PopoverProps } from '@coze-arch/bot-semi/Popover';
+import { type ImageProps } from '@coze-arch/bot-semi/Image';
+import { Popover, Image } from '@coze-arch/bot-semi';
+import { IconGroupCardOutlined } from '@coze-arch/bot-icons';
+
+import s from './index.module.less';
+
+interface CardThumbnailPopoverProps extends PopoverProps {
+  title?: string;
+  url?: string;
+  className?: string;
+  imgProps?: ImageProps;
+}
+
+export const CardThumbnailPopover: React.FC<
+  PropsWithChildren<CardThumbnailPopoverProps>
+> = ({ children, url, title = '卡片预览', className, imgProps, ...props }) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const popoverRef = useRef<any>();
+
+  const onImageLoad = useCallback(() => {
+    const calcPosition = get(
+      popoverRef.current,
+      'tooltipRef.current.foundation.calcPosition',
+    );
+    if (typeof calcPosition === 'function') {
+      calcPosition?.();
+    }
+  }, []);
+
+  return (
+    <Popover
+      position="top"
+      showArrow
+      ref={popoverRef}
+      content={
+        <div className={s['popover-content']}>
+          <div className={s['popover-card-title']}>{title}</div>
+          {url && (
+            <div className={s['popover-card-img']}>
+              <Image src={url} {...imgProps} onLoad={onImageLoad} />
+            </div>
+          )}
+        </div>
+      }
+      {...props}
+    >
+      {children || (
+        <IconGroupCardOutlined
+          className={cls(className, s['popover-card-icon'])}
+        />
+      )}
+    </Popover>
+  );
+};