src/components/md-pin.tsx

@@ -6,7 +6,13 @@ customElement("md-pin", { x: 0, y: 0 }, (props, { element }) => {
 
   const [position, setPosition] = createSignal<{ top: string; left: string }>({ top: "0", left: "0" });
   const [visible, setVisible] = createSignal(false);
-  const [transformStyle, setTransformStyle] = createSignal<string>("");
+  const [containerStyle, setContainerStyle] = createSignal<{ position: string; top: string; left: string; width: string; height: string }>({
+    position: "absolute",
+    top: "0",
+    left: "0",
+    width: "0",
+    height: "0"
+  });
   const [showToast, setShowToast] = createSignal(false);
   const [toastMessage, setToastMessage] = createSignal("");
   let pinContainer: HTMLSpanElement | undefined;
@@ -51,14 +57,23 @@ customElement("md-pin", { x: 0, y: 0 }, (props, { element }) => {
     if (!targetImage || !pinContainer) return;
 
     const imgRect = targetImage.getBoundingClientRect();
-    const containerRect = pinContainer.parentElement.getBoundingClientRect();
+    const articleEl = element?.closest('article[data-src]');
+    const articleRect = articleEl?.getBoundingClientRect();
     
-    // 计算图片左上角相对于容器原始位置的偏移
-    const offsetX = imgRect.left - containerRect.left;
-    const offsetY = imgRect.top - containerRect.top;
+    if (!articleRect) return;
 
-    // 使用 transform 将容器移动到图片位置
-    setTransformStyle(`translate(${offsetX}px, ${offsetY}px)`);
+    // 计算图片相对于 article 的位置
+    const relativeTop = imgRect.top - articleRect.top;
+    const relativeLeft = imgRect.left - articleRect.left;
+
+    // 设置容器样式，使其定位到图片位置
+    setContainerStyle({
+      position: "absolute",
+      top: `${relativeTop}px`,
+      left: `${relativeLeft}px`,
+      width: `${imgRect.width}px`,
+      height: `${imgRect.height}px`
+    });
 
     // 计算 pin 在图片内的相对位置（x/y 是百分比）
     const x = typeof props.x === 'number' ? props.x : parseFloat(props.x) || 0;
@@ -78,6 +93,15 @@ customElement("md-pin", { x: 0, y: 0 }, (props, { element }) => {
     targetImage = findNearestImage();
     
     if (targetImage) {
+      // 确保图片容器是 relative 定位
+      const imgParent = targetImage.parentElement;
+      if (imgParent) {
+        const parentStyle = window.getComputedStyle(imgParent);
+        if (parentStyle.position === 'static') {
+          imgParent.style.position = 'relative';
+        }
+      }
+
       // 初始定位
       updatePosition();
       
@@ -102,11 +126,42 @@ customElement("md-pin", { x: 0, y: 0 }, (props, { element }) => {
     }
   });
 
+  // 处理点击，报告坐标并复制到剪贴板
+  const handleClick = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    if (!targetImage) return;
+
+    const imgRect = targetImage.getBoundingClientRect();
+    
+    // 计算点击位置相对于图片的百分比
+    const clickX = ((e.clientX - imgRect.left) / imgRect.width) * 100;
+    const clickY = ((e.clientY - imgRect.top) / imgRect.height) * 100;
+    
+    // 四舍五入到整数
+    const x = Math.round(clickX);
+    const y = Math.round(clickY);
+    
+    // 生成格式化的坐标字符串
+    const coordText = `:md-pin[${label || ''}]{x=${x} y=${y}}`;
+    
+    // 复制到剪贴板
+    navigator.clipboard.writeText(coordText).then(() => {
+      setToastMessage(`已复制：${coordText}`);
+      setShowToast(true);
+      setTimeout(() => setShowToast(false), 2000);
+    }).catch(err => {
+      console.error('复制失败:', err);
+    });
+  };
+
   return (
-    <div
+    <span 
       ref={pinContainer} 
       class="md-pin-container" 
-      style={{ transform: transformStyle(), 'transform-origin': 'top left' }}
+      style={{ display: 'inline', position: containerStyle().position, top: containerStyle().top, left: containerStyle().left, width: containerStyle().width, height: containerStyle().height }}
+      onClick={handleClick}
     >
       <Show when={visible() && targetImage}>
         <span
@@ -128,6 +183,6 @@ customElement("md-pin", { x: 0, y: 0 }, (props, { element }) => {
           {toastMessage()}
         </div>
       </Show>
-    </div>
+    </span>
   );
 });

src/components/table.tsx

@@ -186,7 +186,7 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
             <Show when={props.roll}>
               <button
                 onClick={handleRoll}
-                class="text-gray-500 hover:text-gray-700 flex-shrink-0 cursor-pointer"
+                class="text-gray-500 hover:text-gray-700 flex-shrink-0"
                 title="随机切换"
               >
                 🎲
@@ -197,7 +197,7 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
                 {(row, index) => (
                   <button
                     onClick={() => setActiveTab(index())}
-                    class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] cursor-pointer ${
+                    class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] ${
                       activeTab() === index()
                         ? 'text-blue-600 border-b-2 border-blue-600'
                         : 'text-gray-500 hover:text-gray-700'