@aipanel/ui 1.3.8 → 1.3.10

package/es/AI-panel-widget/composables/use-inspector.d.ts

@@ -7,6 +7,7 @@ interface UseInspectorOptions {
 }
 export declare function useInspector(options: UseInspectorOptions): {
     highlightVisible: Ref<boolean, boolean>;
+    highlightBreathing: Ref<boolean, boolean>;
     highlightStyle: Ref<Record<string, string>, Record<string, string>>;
     tooltipVisible: Ref<boolean, boolean>;
     tooltipStyle: Ref<{
@@ -29,5 +30,6 @@ export declare function useInspector(options: UseInspectorOptions): {
         description: string;
         fileInfo: string;
     }>;
+    flashElement: (target: Element) => void;
 };
 export {};

package/es/AI-panel-widget/composables/use-inspector.mjs

@@ -1,6 +1,7 @@
 import { ref, watch, onMounted, onUnmounted, nextTick } from "vue";
 import {
   INSPECTOR_CHECK_INTERVAL,
+  fileNameOf,
   listInspectorAdapters,
   resolveInspectorAdapter,
   truncate
@@ -107,6 +108,7 @@ function getTargetElement(e) {
 }
 function useInspector(options) {
   const highlightVisible = ref(false);
+  const highlightBreathing = ref(false);
   const highlightStyle = ref({
     top: "0px",
     left: "0px",
@@ -117,8 +119,61 @@ function useInspector(options) {
   const tooltipStyle = ref({ top: "0px", left: "0px" });
   const tooltipContent = ref({ description: "", fileInfo: "" });
   let inspectorCheckTimer = null;
+  let breathTimer = null;
+  let followTarget = null;
   let currentPrimary = "#4176e6";
   let currentPrimaryBg = "rgba(65, 118, 230, 0.1)";
+  function positionHighlight(target) {
+    const widget = document.querySelector(".aipanel-widget");
+    if (widget) {
+      const style = getComputedStyle(widget);
+      currentPrimary = style.getPropertyValue("--ap-accent").trim() || currentPrimary;
+      currentPrimaryBg = style.getPropertyValue("--ap-accent-bg").trim() || currentPrimaryBg;
+    }
+    const rect = target.getBoundingClientRect();
+    const next = {
+      top: `${rect.top}px`,
+      left: `${rect.left}px`,
+      width: `${rect.width}px`,
+      height: `${rect.height}px`,
+      border: `2px solid ${currentPrimary}`,
+      background: currentPrimaryBg
+    };
+    const current = highlightStyle.value;
+    const moved = current.top !== next.top || current.left !== next.left || current.width !== next.width || current.height !== next.height || current.border !== next.border;
+    if (!moved) return;
+    highlightStyle.value = next;
+  }
+  function handleViewportChange() {
+    if (followTarget) positionHighlight(followTarget);
+  }
+  function startFollowing(target) {
+    stopFollowing();
+    followTarget = target;
+    window.addEventListener("scroll", handleViewportChange, { passive: true, capture: true });
+    window.addEventListener("resize", handleViewportChange, { passive: true });
+  }
+  function stopFollowing() {
+    if (followTarget) {
+      window.removeEventListener("scroll", handleViewportChange, true);
+      window.removeEventListener("resize", handleViewportChange);
+    }
+    followTarget = null;
+  }
+  function flashElement(target) {
+    target.scrollIntoView({ block: "center" });
+    positionHighlight(target);
+    highlightVisible.value = true;
+    highlightBreathing.value = true;
+    startFollowing(target);
+    if (breathTimer !== null) window.clearTimeout(breathTimer);
+    breathTimer = window.setTimeout(() => {
+      breathTimer = null;
+      stopFollowing();
+      highlightBreathing.value = false;
+      highlightVisible.value = false;
+    }, 4e3);
+  }
   function setPointerEventsNone(elements) {
     elements.forEach((el) => {
       if (el) el.style.pointerEvents = "none";
@@ -141,14 +196,9 @@ function useInspector(options) {
     const fileInfo = resolveElementSourceLocation(elementToHighlight);
     setPointerEventsAuto(uiElements);
     if (elementToHighlight) {
-      const widget = document.querySelector(".aipanel-widget");
-      if (widget) {
-        const style = getComputedStyle(widget);
-        currentPrimary = style.getPropertyValue("--ap-accent").trim() || currentPrimary;
-        currentPrimaryBg = style.getPropertyValue("--ap-accent-bg").trim() || currentPrimaryBg;
-      }
+      positionHighlight(elementToHighlight);
       const description = getElementDescription(elementToHighlight);
-      const fileName = fileInfo?.file ? fileInfo.file.split("/").pop() : "";
+      const fileName = fileInfo?.file ? fileNameOf(fileInfo.file) : "";
       let lineInfo = "";
       if (fileInfo?.line) {
         lineInfo = `:${fileInfo.line}`;
@@ -161,21 +211,6 @@ function useInspector(options) {
         description,
         fileInfo: fileInfoText
       };
-      const rect = elementToHighlight.getBoundingClientRect();
-      const newTop = `${rect.top}px`;
-      const newLeft = `${rect.left}px`;
-      const newWidth = `${rect.width}px`;
-      const newHeight = `${rect.height}px`;
-      if (highlightStyle.value.top !== newTop || highlightStyle.value.left !== newLeft || highlightStyle.value.width !== newWidth || highlightStyle.value.height !== newHeight) {
-        highlightStyle.value = {
-          top: newTop,
-          left: newLeft,
-          width: newWidth,
-          height: newHeight,
-          border: `2px solid ${currentPrimary}`,
-          background: currentPrimaryBg
-        };
-      }
       highlightVisible.value = true;
       tooltipVisible.value = true;
       void nextTick(() => {
@@ -184,6 +219,7 @@ function useInspector(options) {
         const tooltipWidth = tooltipEl.offsetWidth;
         const tooltipHeight = tooltipEl.offsetHeight;
         if (tooltipWidth === 0 || tooltipHeight === 0) return;
+        const rect = elementToHighlight.getBoundingClientRect();
         const margin = 10;
         const gap = 4;
         const viewportWidth = window.innerWidth;
@@ -294,6 +330,7 @@ function useInspector(options) {
   watch(options.selectMode, (newVal) => {
     resolveInspectorAdapter()?.setEnabled(newVal);
     if (newVal) {
+      stopFollowing();
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("keydown", handleKeydown, true);
     } else {
@@ -317,15 +354,22 @@ function useInspector(options) {
     if (inspectorCheckTimer) {
       window.clearInterval(inspectorCheckTimer);
     }
+    if (breathTimer !== null) {
+      window.clearTimeout(breathTimer);
+      breathTimer = null;
+    }
+    stopFollowing();
     document.removeEventListener("mousemove", handleMouseMove);
     document.removeEventListener("keydown", handleKeydown, true);
   });
   return {
     highlightVisible,
+    highlightBreathing,
     highlightStyle,
     tooltipVisible,
     tooltipStyle,
-    tooltipContent
+    tooltipContent,
+    flashElement
   };
 }
 export {

package/es/AI-panel-widget/composables/use-selection.d.ts

@@ -7,13 +7,26 @@ export interface UseSelectionOptions {
     onRemoveSelectedNode: (payload: AIPanelRemoveSelectedPayload) => void;
     onClearSelectedNodes: () => void;
     showConfirmDialog: (message: string) => Promise<boolean>;
+    /**
+     * 是否在页面内定位（默认 true；可传 getter，显示模式运行时可变）。
+     * 扩展模式下挂件在侧栏、页面不在本上下文，置 false 以免去操作侧栏自身的 document。
+     */
+    locateInPage?: boolean | (() => boolean);
+    /** 高亮元素：复用选择模式的高亮框闪烁（由挂件的 inspector 提供） */
+    flashHighlight?: (element: Element) => void;
+    /** 跳转到目标页（默认 window.location.assign；测试可注入） */
+    navigate?: (url: string) => void;
+    /** 轻提示（定位失败时给出原因） */
+    notify?: (message: string) => void;
 }
 export declare function useSelection(options: UseSelectionOptions): {
     bubbleVisible: import("vue").ComputedRef<boolean>;
     hasSelectedElements: import("vue").ComputedRef<boolean>;
     selectedElementItems: import("vue").ComputedRef<AIPanelSelectedElementItem[]>;
+    consumePendingLocate: () => Promise<void>;
     handleClearSelectedNodes: () => Promise<void>;
     handleClickSelectedNode: (item: AIPanelSelectedElementItem) => void;
+    handleLocateSelectedElement: (element: AIPanelSelectedElement) => void;
     handleRemoveSelectedNode: (item: AIPanelSelectedElementItem, index: number, source: AIPanelRemoveSelectedPayload["source"]) => void;
     handleToggleSelectMode: () => void;
 };

package/es/AI-panel-widget/composables/use-selection.mjs

@@ -1,24 +1,66 @@
 import { computed } from "vue";
-import { truncate } from "@aipanel/core";
+import { fileNameOf, sleep, truncate } from "@aipanel/core";
 function getElementKey(element, index) {
   if (element.filePath && element.line) {
     return `${element.filePath}:${element.line}:${element.column ?? 0}`;
   }
   return `${element.description}-${index}`;
 }
+function takePendingLocate() {
+  try {
+    const selector = sessionStorage.getItem("__aipanel_pending_locate__");
+    sessionStorage.removeItem("__aipanel_pending_locate__");
+    return selector || null;
+  } catch {
+    return null;
+  }
+}
+function stashPendingLocate(selector) {
+  try {
+    sessionStorage.setItem("__aipanel_pending_locate__", selector);
+  } catch {
+  }
+}
+function isDifferentPage(a, b) {
+  try {
+    return new URL(a, window.location.href).href !== new URL(b, window.location.href).href;
+  } catch {
+    return a !== b;
+  }
+}
+function isHashOnlyChange(a, b) {
+  try {
+    const next = new URL(a, window.location.href);
+    const current = new URL(b, window.location.href);
+    return next.origin === current.origin && next.pathname === current.pathname && next.search === current.search;
+  } catch {
+    return false;
+  }
+}
+function queryPageElement(selector) {
+  try {
+    return document.querySelector(selector);
+  } catch {
+    return null;
+  }
+}
 function getBubbleFileText(element) {
-  const fileName = element.filePath?.split("/").pop() || "";
+  const fileName = element.filePath ? fileNameOf(element.filePath) : "";
   const lineInfo = element.line ? `:${element.line}${element.column ? `:${element.column}` : ""}` : "";
   return `${fileName}${lineInfo}`;
 }
 function getPanelFileText(element) {
-  const fileName = element.filePath?.split("/").pop() || "\u672A\u77E5\u6587\u4EF6";
+  const fileName = element.filePath && fileNameOf(element.filePath) || "\u672A\u77E5\u6587\u4EF6";
   const lineInfo = element.line ? `:${element.line}${element.column ? `:${element.column}` : ""}` : "";
   const textPreview = element.innerText?.trim() ? `${truncate(element.innerText.trim(), 30)} \xB7 ` : "";
   return `${textPreview}${fileName}${lineInfo}`;
 }
 function useSelection(options) {
   const bubbleVisible = computed(() => options.selectMode.value);
+  function shouldLocateInPage() {
+    const value = options.locateInPage;
+    return typeof value === "function" ? value() : value !== false;
+  }
   const selectedElementItems = computed(
     () => (options.selectedElements.value || []).map(
       (element, index) => ({
@@ -34,57 +76,49 @@ function useSelection(options) {
   function handleToggleSelectMode() {
     options.onToggleSelectMode(!options.selectMode.value);
   }
-  function handleClickSelectedNode(item) {
-    const description = item.element.description;
-    if (!description) return;
-    let targetElement = null;
-    if (description.includes("#")) {
-      const idMatch = description.match(/#([^.[\s]+)/);
-      if (idMatch) {
-        targetElement = document.getElementById(idMatch[1]);
+  function handleLocateSelectedElement(element) {
+    if (!shouldLocateInPage()) return;
+    const selector = element.description?.trim();
+    if (!selector) return;
+    const navigate = options.navigate ?? ((to) => window.location.assign(to));
+    const url = element.previewPageUrl;
+    if (url && isDifferentPage(url, window.location.href)) {
+      if (isHashOnlyChange(url, window.location.href)) {
+        navigate(url);
+        void flashWhenRendered(selector);
+        return;
       }
+      stashPendingLocate(selector);
+      navigate(url);
+      return;
     }
-    if (!targetElement && description.includes(".")) {
-      const classMatch = description.match(/^([a-z]+)\.([^[\s]+)/i);
-      if (classMatch) {
-        const tagName = classMatch[1];
-        const classes = classMatch[2].split(".").filter(Boolean);
-        const selector = `${tagName}.${classes.join(".")}`;
-        targetElement = document.querySelector(selector);
-      }
-    }
-    if (!targetElement) {
-      const tagMatch = description.match(/^([a-z]+)/i);
-      if (tagMatch) {
-        const simpleSelector = description.split(/[.[\s]/)[0];
-        targetElement = document.querySelector(simpleSelector);
-      }
+    const target = queryPageElement(selector);
+    if (!target) {
+      options.notify?.("\u672A\u627E\u5230\u8BE5\u8282\u70B9\uFF0C\u9875\u9762\u53EF\u80FD\u5DF2\u53D8\u5316");
+      return;
     }
-    if (targetElement) {
-      targetElement.scrollIntoView({ behavior: "smooth", block: "center" });
-      const highlightOverlay = document.createElement("div");
-      highlightOverlay.className = "aipanel-element-highlight-temp";
-      const widget = document.querySelector(".aipanel-widget");
-      let primary = "#4176e6";
-      let primaryBg = "rgba(65, 118, 230, 0.1)";
-      if (widget) {
-        const style = getComputedStyle(widget);
-        primary = style.getPropertyValue("--ap-accent").trim() || primary;
-        primaryBg = style.getPropertyValue("--ap-accent-bg").trim() || primaryBg;
+    options.flashHighlight?.(target);
+  }
+  function handleClickSelectedNode(item) {
+    handleLocateSelectedElement(item.element);
+  }
+  async function flashWhenRendered(selector) {
+    const deadline = Date.now() + 2e3;
+    for (; ; ) {
+      const target = queryPageElement(selector);
+      if (target) {
+        options.flashHighlight?.(target);
+        return true;
       }
-      highlightOverlay.style.border = `2px solid ${primary}`;
-      highlightOverlay.style.background = primaryBg;
-      const rect = targetElement.getBoundingClientRect();
-      highlightOverlay.style.top = `${rect.top + window.scrollY}px`;
-      highlightOverlay.style.left = `${rect.left + window.scrollX}px`;
-      highlightOverlay.style.width = `${rect.width}px`;
-      highlightOverlay.style.height = `${rect.height}px`;
-      document.body.appendChild(highlightOverlay);
-      setTimeout(() => {
-        highlightOverlay.remove();
-      }, 2e3);
+      if (Date.now() >= deadline) return false;
+      await sleep(50);
     }
   }
+  async function consumePendingLocate() {
+    if (!shouldLocateInPage()) return;
+    const selector = takePendingLocate();
+    if (selector) await flashWhenRendered(selector);
+  }
   function handleRemoveSelectedNode(item, index, source) {
     options.onRemoveSelectedNode({ element: item.element, index, source });
   }
@@ -101,8 +135,10 @@ function useSelection(options) {
     bubbleVisible,
     hasSelectedElements,
     selectedElementItems,
+    consumePendingLocate,
     handleClearSelectedNodes,
     handleClickSelectedNode,
+    handleLocateSelectedElement,
     handleRemoveSelectedNode,
     handleToggleSelectMode
   };

package/es/AI-panel-widget/src/components/SessionList-sfc.css

@@ -1 +1 @@
-.aipanel-session-list{width:236px;background:var(--ap-bg-secondary);border-right:1px solid var(--ap-border-faint);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease}.aipanel-session-list.collapsed{width:0;overflow:hidden}.aipanel-session-list.collapsed .aipanel-session-list-header,.aipanel-session-list.collapsed .aipanel-session-list-content{display:none}.aipanel-session-list-header{padding:10px 8px 8px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--ap-bg-secondary);border-bottom:1px solid var(--ap-border-faint)}.aipanel-session-list-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.02em;line-height:18px;color:var(--ap-text-tertiary)}.aipanel-new-session-btn{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--ap-border-secondary);background:var(--ap-elevated-fill);color:var(--ap-text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease,color .2s ease}.aipanel-new-session-btn svg{display:block}.aipanel-new-session-btn:hover{background:var(--ap-elevated-hover);color:var(--ap-text-primary)}.aipanel-new-session-btn:active{background:var(--ap-press-bg)}.aipanel-new-session-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ap-accent-bg)}.aipanel-session-list-content{flex:1;min-height:0;overflow-y:auto;padding:8px;position:relative;display:flex;flex-direction:column;gap:2px}.aipanel-session-item{position:relative;box-sizing:border-box;display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;border-radius:8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--ap-text-primary);transition:background-color .15s ease}.aipanel-session-item:hover{background:var(--ap-hover-bg)}.aipanel-session-item:active{background:var(--ap-press-bg)}.aipanel-session-item.active{background:var(--ap-hover-bg)}.aipanel-session-title-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:400;line-height:20px}.aipanel-session-meta{flex:none;margin-left:auto;font-size:12px;line-height:20px;color:var(--ap-text-tertiary);white-space:nowrap;transition:opacity .15s ease}.aipanel-session-item:hover .aipanel-session-meta{opacity:0}.aipanel-session-delete-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:16px;height:16px;border:none;border-radius:4px;background:transparent;color:var(--ap-text-tertiary);font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease,background-color .15s ease,color .15s ease}.aipanel-session-item:hover .aipanel-session-delete-btn{opacity:1}.aipanel-session-delete-btn:hover{background:transparent;color:var(--ap-text-primary)}.aipanel-session-state{position:relative;flex:none;width:10px;height:10px;margin-right:-2px}.aipanel-session-state-pending:before,.aipanel-session-state-completed:before{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:.1}.aipanel-session-state-pending:after,.aipanel-session-state-completed:after{content:"";position:absolute;inset:20%;border-radius:50%;background:currentColor}.aipanel-session-state-pending{color:var(--ap-state-pending)}.aipanel-session-state-completed{color:var(--ap-state-completed)}.aipanel-session-state-ongoing{color:var(--ap-state-ongoing)}.aipanel-session-ongoing-cell{fill:currentColor;opacity:.15;animation:aipanel-ongoing-chase 1s infinite}@keyframes aipanel-ongoing-chase{0%,12.4%{opacity:1}12.5%,24.9%{opacity:.6}25%,37.4%{opacity:.35}37.5%,to{opacity:.15}}.aipanel-session-item.active .aipanel-session-state-pending{color:var(--ap-state-pending)}.aipanel-session-item.active .aipanel-session-state-completed{color:var(--ap-state-completed)}.aipanel-session-item.active .aipanel-session-state-ongoing{color:var(--ap-accent)}.aipanel-session-header-skeleton{padding:10px 12px 8px;border-bottom:1px solid var(--ap-border-faint);display:none;align-items:center;gap:8px}.aipanel-session-header-skeleton.visible{display:flex}.aipanel-skeleton-header-title{flex:1;height:12px;width:48px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.aipanel-skeleton-header-btn{width:24px;height:24px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:50%}.aipanel-session-skeleton{flex:1;min-height:0;overflow-y:auto;padding:8px;display:none}.aipanel-session-skeleton.visible{display:block}.aipanel-skeleton-item{display:flex;align-items:center;gap:8px;height:32px;box-sizing:border-box;padding:0 8px;border-radius:8px;margin-bottom:2px;background:var(--ap-skeleton-bg)}.aipanel-skeleton-title{flex:1 1 auto;height:13px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.aipanel-skeleton-meta{flex:none;width:32px;height:12px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.aipanel-session-empty{padding:32px 16px;text-align:center;color:var(--ap-text-tertiary);font-size:12px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}
+.aipanel-session-list{width:236px;background:var(--ap-bg-secondary);border-right:1px solid var(--ap-border-faint);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease}.aipanel-session-list.collapsed{width:0;overflow:hidden}.aipanel-session-list.collapsed .aipanel-session-list-header,.aipanel-session-list.collapsed .aipanel-session-list-content{display:none}.aipanel-session-list-header{padding:10px 8px 8px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--ap-bg-secondary);border-bottom:1px solid var(--ap-border-faint)}.aipanel-session-list-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.02em;line-height:18px;color:var(--ap-text-tertiary)}.aipanel-new-session-btn{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--ap-border-secondary);background:var(--ap-elevated-fill);color:var(--ap-text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease,color .2s ease}.aipanel-new-session-btn svg{display:block}.aipanel-new-session-btn:hover{background:var(--ap-elevated-hover);color:var(--ap-text-primary)}.aipanel-new-session-btn:active{background:var(--ap-press-bg)}.aipanel-new-session-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ap-accent-bg)}.aipanel-session-list-content{flex:1;min-height:0;overflow-y:auto;padding:8px;position:relative;display:flex;flex-direction:column;gap:2px}.aipanel-session-item{position:relative;box-sizing:border-box;display:flex;align-items:center;gap:8px;flex:none;height:32px;padding:0 8px;border-radius:8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--ap-text-primary);transition:background-color .15s ease}.aipanel-session-item:hover{background:var(--ap-hover-bg)}.aipanel-session-item:active{background:var(--ap-press-bg)}.aipanel-session-item.active{background:var(--ap-hover-bg)}.aipanel-session-title-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:400;line-height:20px}.aipanel-session-meta{flex:none;margin-left:auto;font-size:12px;line-height:20px;color:var(--ap-text-tertiary);white-space:nowrap;transition:opacity .15s ease}.aipanel-session-item:hover .aipanel-session-meta{opacity:0}.aipanel-session-delete-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:16px;height:16px;border:none;border-radius:4px;background:transparent;color:var(--ap-text-tertiary);font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease,background-color .15s ease,color .15s ease}.aipanel-session-item:hover .aipanel-session-delete-btn{opacity:1}.aipanel-session-delete-btn:hover{background:transparent;color:var(--ap-text-primary)}.aipanel-session-state{position:relative;flex:none;width:10px;height:10px;margin-right:-2px}.aipanel-session-state-pending:before,.aipanel-session-state-completed:before{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:.1}.aipanel-session-state-pending:after,.aipanel-session-state-completed:after{content:"";position:absolute;inset:20%;border-radius:50%;background:currentColor}.aipanel-session-state-pending{color:var(--ap-state-pending)}.aipanel-session-state-completed{color:var(--ap-state-completed)}.aipanel-session-state-ongoing{color:var(--ap-state-ongoing)}.aipanel-session-ongoing-cell{fill:currentColor;opacity:.15;animation:aipanel-ongoing-chase 1s infinite}@keyframes aipanel-ongoing-chase{0%,12.4%{opacity:1}12.5%,24.9%{opacity:.6}25%,37.4%{opacity:.35}37.5%,to{opacity:.15}}.aipanel-session-item.active .aipanel-session-state-pending{color:var(--ap-state-pending)}.aipanel-session-item.active .aipanel-session-state-completed{color:var(--ap-state-completed)}.aipanel-session-item.active .aipanel-session-state-ongoing{color:var(--ap-accent)}.aipanel-session-header-skeleton{padding:10px 12px 8px;border-bottom:1px solid var(--ap-border-faint);display:none;align-items:center;gap:8px}.aipanel-session-header-skeleton.visible{display:flex}.aipanel-skeleton-header-title{flex:1;height:12px;width:48px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.aipanel-skeleton-header-btn{width:24px;height:24px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:50%}.aipanel-session-skeleton{flex:1;min-height:0;overflow-y:auto;padding:8px;display:none}.aipanel-session-skeleton.visible{display:block}.aipanel-skeleton-item{display:flex;align-items:center;gap:8px;height:32px;box-sizing:border-box;padding:0 8px;border-radius:8px;margin-bottom:2px;background:var(--ap-skeleton-bg)}.aipanel-skeleton-title{flex:1 1 auto;height:13px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.aipanel-skeleton-meta{flex:none;width:32px;height:12px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.aipanel-session-empty{padding:32px 16px;text-align:center;color:var(--ap-text-tertiary);font-size:12px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}

package/es/AI-panel-widget/src/index-sfc.css

@@ -1 +1 @@
-.aipanel-widget{--ap-bg-main: #ffffff;--ap-bg-secondary: #f9fafb;--ap-bg-tertiary: #ebeef2;--ap-overlay-bg: rgba(249, 250, 251, .92);--ap-text-primary: #0f1115;--ap-text-secondary: #61666b;--ap-text-tertiary: #81858c;--ap-text-placeholder: #adb2b8;--ap-border-faint: rgba(15, 17, 21, .04);--ap-border-primary: rgba(15, 17, 21, .1);--ap-border-secondary: rgba(15, 17, 21, .12);--ap-hover-bg: rgba(38, 49, 72, .06);--ap-elevated-fill: #ffffff;--ap-elevated-hover: #f1f3f5;--ap-press-bg: rgba(38, 49, 72, .1);--ap-primary: #0f1115;--ap-primary-hover: #43454a;--ap-on-primary: #ffffff;--ap-accent: #4176e6;--ap-accent-hover: #5686fe;--ap-accent-bg: rgba(65, 118, 230, .1);--ap-danger: #ec1313;--ap-danger-hover: #c40f0f;--ap-state-pending: #f59e0b;--ap-state-completed: #22c55e;--ap-state-ongoing: #5686fe;--ap-tooltip-bg: #1e1e1e;--ap-dialog-overlay: rgba(0, 0, 0, .24);--ap-dialog-bg: #ffffff;--ap-scrollbar-thumb: #e5e5e5;--ap-scrollbar-thumb-hover: #d4d4d4;--ap-thinking-glow: rgba(86, 134, 254, .3);--ap-thinking-glow-strong: rgba(86, 134, 254, .55);--ap-skeleton-bg: rgba(15, 17, 21, .06);--ap-skeleton-gradient: linear-gradient( 90deg, rgba(15, 17, 21, .04) 25%, rgba(15, 17, 21, .1) 50%, rgba(15, 17, 21, .04) 75% );--ap-shadow-sm: 0 1px 2px rgba(15, 17, 21, .04), 0 1px 3px rgba(15, 17, 21, .06);--ap-shadow-md: 0 2px 8px rgba(15, 17, 21, .06), 0 4px 16px rgba(15, 17, 21, .06);--ap-shadow-lg: 0 0 0 .5px rgba(15, 17, 21, .06), 0 4px 16px rgba(15, 17, 21, .08), 0 16px 48px rgba(15, 17, 21, .1);--ap-shadow-xl: 0 0 0 .5px rgba(15, 17, 21, .08), 0 8px 32px rgba(15, 17, 21, .12), 0 24px 72px rgba(15, 17, 21, .14);--ap-shadow-accent: 0 1px 2px rgba(65, 118, 230, .14), 0 0 0 1px rgba(65, 118, 230, .18);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.aipanel-widget.aipanel-theme-dark{--ap-bg-main: #151517;--ap-bg-secondary: #1b1b1c;--ap-bg-tertiary: #2c2c2e;--ap-overlay-bg: rgba(21, 21, 23, .92);--ap-text-primary: #f9fafb;--ap-text-secondary: #cfd3d6;--ap-text-tertiary: #adb2b8;--ap-text-placeholder: #81858c;--ap-border-faint: rgba(255, 255, 255, .06);--ap-border-primary: rgba(255, 255, 255, .12);--ap-border-secondary: rgba(255, 255, 255, .16);--ap-hover-bg: rgba(255, 255, 255, .08);--ap-elevated-fill: #43454a;--ap-elevated-hover: #353638;--ap-press-bg: rgba(255, 255, 255, .14);--ap-primary: #f9fafb;--ap-primary-hover: #ebeef2;--ap-on-primary: #0f1115;--ap-accent: #679efe;--ap-accent-hover: #5686fe;--ap-accent-bg: rgba(103, 158, 254, .16);--ap-danger: #f25a5a;--ap-danger-hover: #ff8383;--ap-state-pending: #f59e0b;--ap-state-completed: #22c55e;--ap-state-ongoing: #5686fe;--ap-tooltip-bg: #282828;--ap-dialog-overlay: rgba(0, 0, 0, .5);--ap-dialog-bg: #2c2c2e;--ap-scrollbar-thumb: #3c3c3d;--ap-scrollbar-thumb-hover: #545557;--ap-thinking-glow: rgba(103, 158, 254, .35);--ap-thinking-glow-strong: rgba(103, 158, 254, .6);--ap-skeleton-bg: rgba(255, 255, 255, .07);--ap-skeleton-gradient: linear-gradient( 90deg, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, .05) 75% );--ap-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .24);--ap-shadow-md: 0 2px 8px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .2);--ap-shadow-lg: 0 0 0 .5px rgba(255, 255, 255, .06), 0 4px 16px rgba(0, 0, 0, .3), 0 16px 48px rgba(0, 0, 0, .25);--ap-shadow-xl: 0 0 0 .5px rgba(255, 255, 255, .08), 0 8px 32px rgba(0, 0, 0, .36), 0 24px 72px rgba(0, 0, 0, .3);--ap-shadow-accent: 0 1px 2px rgba(103, 158, 254, .2), 0 0 0 1px rgba(103, 158, 254, .25)}@supports not selector(::-webkit-scrollbar){.aipanel-widget,.aipanel-widget *{scrollbar-width:thin;scrollbar-color:var(--ap-scrollbar-thumb) transparent}}.aipanel-widget ::-webkit-scrollbar,.aipanel-widget *::-webkit-scrollbar{width:8px;height:8px}.aipanel-widget ::-webkit-scrollbar-track,.aipanel-widget *::-webkit-scrollbar-track{background:transparent}.aipanel-widget ::-webkit-scrollbar-thumb,.aipanel-widget *::-webkit-scrollbar-thumb{border-radius:4px;background:var(--ap-scrollbar-thumb)}.aipanel-widget ::-webkit-scrollbar-thumb:hover,.aipanel-widget *::-webkit-scrollbar-thumb:hover{background:var(--ap-scrollbar-thumb-hover)}.aipanel-widget ::-webkit-scrollbar-corner,.aipanel-widget *::-webkit-scrollbar-corner{background:transparent}.aipanel-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--ap-bg-main);border-radius:16px;box-shadow:var(--ap-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translate3d(var(---chatAnimationOrigin\.x),var(---chatAnimationOrigin\.y),0) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.aipanel-chat.open{opacity:1;visibility:visible;transform:translateZ(0) scale(1)}.aipanel-chat.no-transition,.aipanel-chat.no-transition.open{transition:none!important}.aipanel-chat.minimized{width:320px;height:320px}.aipanel-chat.minimized .aipanel-iframe-container{margin-top:-146px}.aipanel-chat-content{display:flex;flex:1;overflow:hidden}.aipanel-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:10000000;display:flex;align-items:center;gap:10px}.aipanel-notification:before{content:"\1f4a1";font-size:16px}.aipanel-dialog-overlay{position:fixed;inset:0;background:var(--ap-dialog-overlay);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:9999999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.aipanel-dialog{width:min(380px,100%);background:var(--ap-dialog-bg);border-radius:24px;padding:24px 24px 20px;box-shadow:var(--ap-shadow-xl);animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.aipanel-dialog-content{margin-bottom:20px}.aipanel-dialog-message{font-size:14px;line-height:22px;font-weight:400;color:var(--ap-text-primary)}.aipanel-dialog-actions{display:flex;gap:8px;justify-content:flex-end}.aipanel-dialog-btn{height:36px;padding:0 20px;border-radius:999px;border:1px solid transparent;font-size:14px;line-height:22px;font-weight:500;cursor:pointer;transition:all .2s}.aipanel-dialog-btn.cancel{background:transparent;border-color:var(--ap-border-primary);color:var(--ap-text-secondary)}.aipanel-dialog-btn.cancel:hover{background:var(--ap-hover-bg);color:var(--ap-text-primary)}.aipanel-dialog-btn.confirm{background:var(--ap-danger);color:#fff}.aipanel-dialog-btn.confirm:hover{background:var(--ap-danger-hover)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.aipanel-page-notification{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:2147483647;display:flex;align-items:center;gap:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.aipanel-page-notification:before{content:"\1f4a1";font-size:16px}.aipanel-element-highlight{position:fixed;pointer-events:none;z-index:999998;border-radius:4px}#vue-inspector-container{display:none!important}.aipanel-element-tooltip{position:fixed;background:var(--ap-tooltip-bg);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;z-index:9999998;box-shadow:var(--ap-shadow-md);max-width:300px;pointer-events:none;line-height:1}.aipanel-tooltip-tag{font-weight:500;margin-bottom:4px;word-break:break-all}.aipanel-tooltip-file{font-size:11px;color:var(--ap-text-placeholder);word-break:break-all}.aipanel-element-highlight-temp{position:absolute;pointer-events:none;z-index:999998;border-radius:4px;animation:highlight-pulse 2s ease-out forwards}@keyframes highlight-pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}to{opacity:0;transform:scale(1)}}@media(max-width:768px){.aipanel-chat{width:calc(100vw - 40px);height:calc(100vh - 100px)}}body.has-aipanel-split{transition:padding .3s ease;min-width:auto}body.has-aipanel-split-right{padding-right:var(--aipanel-split-width, 500px)}body.has-aipanel-split-left{padding-left:var(--aipanel-split-width, 500px)}.aipanel-widget.extension-mode{position:relative;width:100%;height:100%;display:flex}.aipanel-widget.extension-mode .aipanel-select-mode-hint,.aipanel-widget.extension-mode .aipanel-dialog-overlay{position:absolute}
+.aipanel-widget{--ap-bg-main: #ffffff;--ap-bg-secondary: #f9fafb;--ap-bg-tertiary: #ebeef2;--ap-overlay-bg: rgba(249, 250, 251, .92);--ap-text-primary: #0f1115;--ap-text-secondary: #61666b;--ap-text-tertiary: #81858c;--ap-text-placeholder: #adb2b8;--ap-border-faint: rgba(15, 17, 21, .04);--ap-border-primary: rgba(15, 17, 21, .1);--ap-border-secondary: rgba(15, 17, 21, .12);--ap-hover-bg: rgba(38, 49, 72, .06);--ap-elevated-fill: #ffffff;--ap-elevated-hover: #f1f3f5;--ap-press-bg: rgba(38, 49, 72, .1);--ap-primary: #0f1115;--ap-primary-hover: #43454a;--ap-on-primary: #ffffff;--ap-accent: #4176e6;--ap-accent-hover: #5686fe;--ap-accent-bg: rgba(65, 118, 230, .1);--ap-danger: #ec1313;--ap-danger-hover: #c40f0f;--ap-state-pending: #f59e0b;--ap-state-completed: #22c55e;--ap-state-ongoing: #5686fe;--ap-tooltip-bg: #1e1e1e;--ap-dialog-overlay: rgba(0, 0, 0, .24);--ap-dialog-bg: #ffffff;--ap-scrollbar-thumb: #e5e5e5;--ap-scrollbar-thumb-hover: #d4d4d4;--ap-thinking-glow: rgba(86, 134, 254, .3);--ap-thinking-glow-strong: rgba(86, 134, 254, .55);--ap-skeleton-bg: rgba(15, 17, 21, .06);--ap-skeleton-gradient: linear-gradient( 90deg, rgba(15, 17, 21, .04) 25%, rgba(15, 17, 21, .1) 50%, rgba(15, 17, 21, .04) 75% );--ap-shadow-sm: 0 1px 2px rgba(15, 17, 21, .04), 0 1px 3px rgba(15, 17, 21, .06);--ap-shadow-md: 0 2px 8px rgba(15, 17, 21, .06), 0 4px 16px rgba(15, 17, 21, .06);--ap-shadow-lg: 0 0 0 .5px rgba(15, 17, 21, .06), 0 4px 16px rgba(15, 17, 21, .08), 0 16px 48px rgba(15, 17, 21, .1);--ap-shadow-xl: 0 0 0 .5px rgba(15, 17, 21, .08), 0 8px 32px rgba(15, 17, 21, .12), 0 24px 72px rgba(15, 17, 21, .14);--ap-shadow-accent: 0 1px 2px rgba(65, 118, 230, .14), 0 0 0 1px rgba(65, 118, 230, .18);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.aipanel-widget.aipanel-theme-dark{--ap-bg-main: #151517;--ap-bg-secondary: #1b1b1c;--ap-bg-tertiary: #2c2c2e;--ap-overlay-bg: rgba(21, 21, 23, .92);--ap-text-primary: #f9fafb;--ap-text-secondary: #cfd3d6;--ap-text-tertiary: #adb2b8;--ap-text-placeholder: #81858c;--ap-border-faint: rgba(255, 255, 255, .06);--ap-border-primary: rgba(255, 255, 255, .12);--ap-border-secondary: rgba(255, 255, 255, .16);--ap-hover-bg: rgba(255, 255, 255, .08);--ap-elevated-fill: #43454a;--ap-elevated-hover: #353638;--ap-press-bg: rgba(255, 255, 255, .14);--ap-primary: #f9fafb;--ap-primary-hover: #ebeef2;--ap-on-primary: #0f1115;--ap-accent: #679efe;--ap-accent-hover: #5686fe;--ap-accent-bg: rgba(103, 158, 254, .16);--ap-danger: #f25a5a;--ap-danger-hover: #ff8383;--ap-state-pending: #f59e0b;--ap-state-completed: #22c55e;--ap-state-ongoing: #5686fe;--ap-tooltip-bg: #282828;--ap-dialog-overlay: rgba(0, 0, 0, .5);--ap-dialog-bg: #2c2c2e;--ap-scrollbar-thumb: #3c3c3d;--ap-scrollbar-thumb-hover: #545557;--ap-thinking-glow: rgba(103, 158, 254, .35);--ap-thinking-glow-strong: rgba(103, 158, 254, .6);--ap-skeleton-bg: rgba(255, 255, 255, .07);--ap-skeleton-gradient: linear-gradient( 90deg, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, .05) 75% );--ap-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .24);--ap-shadow-md: 0 2px 8px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .2);--ap-shadow-lg: 0 0 0 .5px rgba(255, 255, 255, .06), 0 4px 16px rgba(0, 0, 0, .3), 0 16px 48px rgba(0, 0, 0, .25);--ap-shadow-xl: 0 0 0 .5px rgba(255, 255, 255, .08), 0 8px 32px rgba(0, 0, 0, .36), 0 24px 72px rgba(0, 0, 0, .3);--ap-shadow-accent: 0 1px 2px rgba(103, 158, 254, .2), 0 0 0 1px rgba(103, 158, 254, .25)}@supports not selector(::-webkit-scrollbar){.aipanel-widget,.aipanel-widget *{scrollbar-width:thin;scrollbar-color:var(--ap-scrollbar-thumb) transparent}}.aipanel-widget ::-webkit-scrollbar,.aipanel-widget *::-webkit-scrollbar{width:8px;height:8px}.aipanel-widget ::-webkit-scrollbar-track,.aipanel-widget *::-webkit-scrollbar-track{background:transparent}.aipanel-widget ::-webkit-scrollbar-thumb,.aipanel-widget *::-webkit-scrollbar-thumb{border-radius:4px;background:var(--ap-scrollbar-thumb)}.aipanel-widget ::-webkit-scrollbar-thumb:hover,.aipanel-widget *::-webkit-scrollbar-thumb:hover{background:var(--ap-scrollbar-thumb-hover)}.aipanel-widget ::-webkit-scrollbar-corner,.aipanel-widget *::-webkit-scrollbar-corner{background:transparent}.aipanel-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--ap-bg-main);border-radius:16px;box-shadow:var(--ap-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translate3d(var(---chatAnimationOrigin\.x),var(---chatAnimationOrigin\.y),0) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.aipanel-chat.open{opacity:1;visibility:visible;transform:translateZ(0) scale(1)}.aipanel-chat.no-transition,.aipanel-chat.no-transition.open{transition:none!important}.aipanel-chat.minimized{width:320px;height:320px}.aipanel-chat.minimized .aipanel-iframe-container{margin-top:-146px}.aipanel-chat-content{display:flex;flex:1;overflow:hidden}.aipanel-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:10000000;display:flex;align-items:center;gap:10px}.aipanel-notification:before{content:"\1f4a1";font-size:16px}.aipanel-dialog-overlay{position:fixed;inset:0;background:var(--ap-dialog-overlay);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:9999999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.aipanel-dialog{width:min(380px,100%);background:var(--ap-dialog-bg);border-radius:24px;padding:24px 24px 20px;box-shadow:var(--ap-shadow-xl);animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.aipanel-dialog-content{margin-bottom:20px}.aipanel-dialog-message{font-size:14px;line-height:22px;font-weight:400;color:var(--ap-text-primary)}.aipanel-dialog-actions{display:flex;gap:8px;justify-content:flex-end}.aipanel-dialog-btn{height:36px;padding:0 20px;border-radius:999px;border:1px solid transparent;font-size:14px;line-height:22px;font-weight:500;cursor:pointer;transition:all .2s}.aipanel-dialog-btn.cancel{background:transparent;border-color:var(--ap-border-primary);color:var(--ap-text-secondary)}.aipanel-dialog-btn.cancel:hover{background:var(--ap-hover-bg);color:var(--ap-text-primary)}.aipanel-dialog-btn.confirm{background:var(--ap-danger);color:#fff}.aipanel-dialog-btn.confirm:hover{background:var(--ap-danger-hover)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.aipanel-page-notification{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:2147483647;display:flex;align-items:center;gap:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.aipanel-page-notification:before{content:"\1f4a1";font-size:16px}.aipanel-element-highlight{position:fixed;pointer-events:none;z-index:999998;border-radius:4px}.aipanel-element-highlight.breathing{animation:aipanel-highlight-breath 2s ease-in-out 2}@keyframes aipanel-highlight-breath{0%,to{opacity:.25;transform:scale(1)}50%{opacity:1;transform:scale(1.01)}}#vue-inspector-container{display:none!important}.aipanel-element-tooltip{position:fixed;background:var(--ap-tooltip-bg);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;z-index:9999998;box-shadow:var(--ap-shadow-md);max-width:300px;pointer-events:none;line-height:1}.aipanel-tooltip-tag{font-weight:500;margin-bottom:4px;word-break:break-all}.aipanel-tooltip-file{font-size:11px;color:var(--ap-text-placeholder);word-break:break-all}@media(max-width:768px){.aipanel-chat{width:calc(100vw - 40px);height:calc(100vh - 100px)}}body.has-aipanel-split{transition:padding .3s ease;min-width:auto}body.has-aipanel-split-right{padding-right:var(--aipanel-split-width, 500px)}body.has-aipanel-split-left{padding-left:var(--aipanel-split-width, 500px)}.aipanel-widget.extension-mode{position:relative;width:100%;height:100%;display:flex}.aipanel-widget.extension-mode .aipanel-select-mode-hint,.aipanel-widget.extension-mode .aipanel-dialog-overlay{position:absolute}

package/es/AI-panel-widget/src/index.vue.d.ts

@@ -1,4 +1,5 @@
 import type { AIPanelWidgetProps } from "./types";
+import { type AIPanelSelectedElement } from "@aipanel/core";
 declare var __VLS_13: {}, __VLS_29: {}, __VLS_32: {}, __VLS_35: {}, __VLS_38: {}, __VLS_41: {}, __VLS_44: {}, __VLS_47: {}, __VLS_50: {};
 type __VLS_Slots = {} & {
     'button-icon'?: (props: typeof __VLS_13) => any;
@@ -57,7 +58,7 @@ declare const __VLS_base: import("vue").DefineComponent<AIPanelWidgetProps, {
     hotkeyLabel: string;
     splitPanelWidth: number;
     currentSessionId: string | null;
-    selectedElements: import("@aipanel/core").AIPanelSelectedElement[];
+    selectedElements: AIPanelSelectedElement[];
     splitMode: import("@aipanel/core").SplitModeOptions;
     hideBubble: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/es/AI-panel-widget/src/index.vue.mjs

@@ -49,7 +49,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
     providerSidebar: { type: Boolean, required: false, default: false },
     sidebarCollapseControl: { type: String, required: false, default: "host" }
   },
-  emits: ["update:open", "update:selectMode", "update:sessionListCollapsed", "update:currentSessionId", "update:selectedElements", "update:theme", "update:thinking", "update:splitPanelWidth", "toggle", "close", "toggle-session-list", "toggle-select-mode", "toggle-theme", "create-session", "select-session", "delete-session", "click-selected-node", "remove-selected-node", "clear-selected-nodes", "empty-action", "frame-loaded", "thinking-change", "split-panel-width-change"],
+  emits: ["update:open", "update:selectMode", "update:sessionListCollapsed", "update:currentSessionId", "update:selectedElements", "update:theme", "update:thinking", "update:splitPanelWidth", "toggle", "close", "toggle-session-list", "toggle-select-mode", "toggle-theme", "create-session", "select-session", "delete-session", "click-selected-node", "locate-node", "remove-selected-node", "clear-selected-nodes", "empty-action", "frame-loaded", "thinking-change", "split-panel-width-change"],
   setup(__props, { expose: __expose, emit: __emit }) {
     _useCssVars((_ctx) => ({
       "-chatAnimationOrigin.x": chatAnimationOrigin.value.x,
@@ -213,12 +213,32 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
       onDeleteSession: (session) => emit("delete-session", session),
       showConfirmDialog
     });
+    const {
+      highlightVisible,
+      highlightBreathing,
+      highlightStyle,
+      tooltipVisible,
+      tooltipStyle,
+      tooltipContent,
+      flashElement
+    } = useInspector({
+      selectMode: toRef(props, "selectMode"),
+      onAddSelectedNode: (element) => {
+        emit("click-selected-node", element);
+      },
+      onExitSelectMode: () => {
+        emit("update:selectMode", false);
+        emit("toggle-select-mode", false);
+      }
+    });
     const {
       bubbleVisible,
       hasSelectedElements,
       selectedElementItems,
+      consumePendingLocate,
       handleClearSelectedNodes,
       handleClickSelectedNode,
+      handleLocateSelectedElement,
       handleRemoveSelectedNode,
       handleToggleSelectMode
     } = useSelection({
@@ -238,17 +258,11 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
         emit("clear-selected-nodes");
         emit("update:selectedElements", []);
       },
-      showConfirmDialog
-    });
-    const { highlightVisible, highlightStyle, tooltipVisible, tooltipStyle, tooltipContent } = useInspector({
-      selectMode: toRef(props, "selectMode"),
-      onAddSelectedNode: (element) => {
-        emit("click-selected-node", element);
-      },
-      onExitSelectMode: () => {
-        emit("update:selectMode", false);
-        emit("toggle-select-mode", false);
-      }
+      showConfirmDialog,
+      // 点已选节点时复用选择模式的高亮框闪烁；扩展模式下挂件在侧栏，不操作页面
+      flashHighlight: flashElement,
+      locateInPage: () => !isExtensionMode.value,
+      notify: (message) => showNotification(message)
     });
     const bubbleOffset = ref(void 0);
     const {
@@ -383,12 +397,21 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
           }
         }
       }
+      if (event.data?.type === WIDGET_MSG.LOCATE_NODE && event.data.element) {
+        const element = event.data.element;
+        if (localDisplayMode.value === "extension") {
+          emit("locate-node", element);
+        } else {
+          handleLocateSelectedElement(element);
+        }
+      }
     };
     onMounted(() => {
       if (typeof window !== "undefined") {
         window.addEventListener("resize", handleWindowResize);
         window.addEventListener("message", handleIframeMessage);
       }
+      void consumePendingLocate();
     });
     onUnmounted(() => {
       if (typeof window !== "undefined") {
@@ -577,7 +600,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
       return dialogResolve;
     }, set dialogResolve(v) {
       dialogResolve = v;
-    }, showConfirmDialog, handleDialogConfirm, handleDialogCancel, frameRef, triggerRef, sendMessageToIframe, localSessionListCollapsed, localDisplayMode, localSplitPosition, minimized, promptDockVisible, reviewPanelVisible, isRestoring, iframeLoaded, iframeReady, splitPanelWidth, syncStateToIframe, handleFrameLoaded, handleToggleDisplayMode, buttonActive, containerClasses, iframeSource, sessionListTitle, resolvedTheme, handleClose, handleEmptyAction, handleToggle, handleToggleSessionList, handleToggleTheme, sessionItems, handleCreateSession, handleDeleteSession, handleSelectSession, bubbleVisible, hasSelectedElements, selectedElementItems, handleClearSelectedNodes, handleClickSelectedNode, handleRemoveSelectedNode, handleToggleSelectMode, highlightVisible, highlightStyle, tooltipVisible, tooltipStyle, tooltipContent, bubbleOffset, effectiveMode, isSplitMode, isExtensionMode, panelWidth, splitConfig, splitPosition, handleResize, handleSplitToggle, handleTogglePosition, handleToggleMinimize, handleTogglePromptDock, handleToggleReviewPanel, handleRefresh, windowWidth, windowHeight, handleWindowResize, handleIframeMessage, bubbleQuadrant, isBubbleOnRightSide, chatPositionStyle, handleBubbleOffsetChange, handleResizeStart, handleResizeEnd, chatAnimationOrigin, isDragging, get wasOpenBeforeDrag() {
+    }, showConfirmDialog, handleDialogConfirm, handleDialogCancel, frameRef, triggerRef, sendMessageToIframe, localSessionListCollapsed, localDisplayMode, localSplitPosition, minimized, promptDockVisible, reviewPanelVisible, isRestoring, iframeLoaded, iframeReady, splitPanelWidth, syncStateToIframe, handleFrameLoaded, handleToggleDisplayMode, buttonActive, containerClasses, iframeSource, sessionListTitle, resolvedTheme, handleClose, handleEmptyAction, handleToggle, handleToggleSessionList, handleToggleTheme, sessionItems, handleCreateSession, handleDeleteSession, handleSelectSession, highlightVisible, highlightBreathing, highlightStyle, tooltipVisible, tooltipStyle, tooltipContent, flashElement, bubbleVisible, hasSelectedElements, selectedElementItems, consumePendingLocate, handleClearSelectedNodes, handleClickSelectedNode, handleLocateSelectedElement, handleRemoveSelectedNode, handleToggleSelectMode, bubbleOffset, effectiveMode, isSplitMode, isExtensionMode, panelWidth, splitConfig, splitPosition, handleResize, handleSplitToggle, handleTogglePosition, handleToggleMinimize, handleTogglePromptDock, handleToggleReviewPanel, handleRefresh, windowWidth, windowHeight, handleWindowResize, handleIframeMessage, bubbleQuadrant, isBubbleOnRightSide, chatPositionStyle, handleBubbleOffsetChange, handleResizeStart, handleResizeEnd, chatAnimationOrigin, isDragging, get wasOpenBeforeDrag() {
       return wasOpenBeforeDrag;
     }, set wasOpenBeforeDrag(v) {
       wasOpenBeforeDrag = v;
@@ -586,7 +609,7 @@ const __vue_sfc__ = /* @__PURE__ */ _defineComponent({
     return __returned__;
   }
 });
-import { renderSlot as _renderSlot, withCtx as _withCtx, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, createVNode as _createVNode, Fragment as _Fragment, createElementBlock as _createElementBlock, vShow as _vShow, normalizeStyle as _normalizeStyle, withDirectives as _withDirectives, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, Teleport as _Teleport } from "vue";
+import { renderSlot as _renderSlot, withCtx as _withCtx, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, createVNode as _createVNode, Fragment as _Fragment, createElementBlock as _createElementBlock, vShow as _vShow, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, withDirectives as _withDirectives, toDisplayString as _toDisplayString, Teleport as _Teleport } from "vue";
 const _hoisted_1 = { class: "aipanel-tooltip-tag" };
 const _hoisted_2 = { class: "aipanel-tooltip-file" };
 const _hoisted_3 = {
@@ -729,12 +752,12 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
       _withDirectives(_createElementVNode(
         "div",
         {
-          class: "aipanel-element-highlight",
+          class: _normalizeClass(["aipanel-element-highlight", { breathing: $setup.highlightBreathing }]),
           style: _normalizeStyle($setup.highlightStyle)
         },
         null,
-        4
-        /* STYLE */
+        6
+        /* CLASS, STYLE */
       ), [
         [_vShow, $setup.highlightVisible]
       ]),

package/es/index.d.ts

@@ -1,5 +1,5 @@
 import type { App } from 'vue';
-declare const version = "1.3.8";
+declare const version = "1.3.10";
 declare function install(app: App<any>, options?: any): void;
 export { install, version, };
 export * from './AI-panel-widget';

package/es/index.mjs

@@ -1,5 +1,5 @@
 import { AIPanelWidget } from "./AI-panel-widget/index.mjs";
-const version = "1.3.8";
+const version = "1.3.10";
 function install(app, options) {
   const components = [
     AIPanelWidget

package/lib/AI-panel-widget/composables/use-inspector.cjs

@@ -134,6 +134,7 @@ function getTargetElement(e) {
 }
 function useInspector(options) {
   const highlightVisible = (0, import_vue.ref)(false);
+  const highlightBreathing = (0, import_vue.ref)(false);
   const highlightStyle = (0, import_vue.ref)({
     top: "0px",
     left: "0px",
@@ -144,8 +145,61 @@ function useInspector(options) {
   const tooltipStyle = (0, import_vue.ref)({ top: "0px", left: "0px" });
   const tooltipContent = (0, import_vue.ref)({ description: "", fileInfo: "" });
   let inspectorCheckTimer = null;
+  let breathTimer = null;
+  let followTarget = null;
   let currentPrimary = "#4176e6";
   let currentPrimaryBg = "rgba(65, 118, 230, 0.1)";
+  function positionHighlight(target) {
+    const widget = document.querySelector(".aipanel-widget");
+    if (widget) {
+      const style = getComputedStyle(widget);
+      currentPrimary = style.getPropertyValue("--ap-accent").trim() || currentPrimary;
+      currentPrimaryBg = style.getPropertyValue("--ap-accent-bg").trim() || currentPrimaryBg;
+    }
+    const rect = target.getBoundingClientRect();
+    const next = {
+      top: `${rect.top}px`,
+      left: `${rect.left}px`,
+      width: `${rect.width}px`,
+      height: `${rect.height}px`,
+      border: `2px solid ${currentPrimary}`,
+      background: currentPrimaryBg
+    };
+    const current = highlightStyle.value;
+    const moved = current.top !== next.top || current.left !== next.left || current.width !== next.width || current.height !== next.height || current.border !== next.border;
+    if (!moved) return;
+    highlightStyle.value = next;
+  }
+  function handleViewportChange() {
+    if (followTarget) positionHighlight(followTarget);
+  }
+  function startFollowing(target) {
+    stopFollowing();
+    followTarget = target;
+    window.addEventListener("scroll", handleViewportChange, { passive: true, capture: true });
+    window.addEventListener("resize", handleViewportChange, { passive: true });
+  }
+  function stopFollowing() {
+    if (followTarget) {
+      window.removeEventListener("scroll", handleViewportChange, true);
+      window.removeEventListener("resize", handleViewportChange);
+    }
+    followTarget = null;
+  }
+  function flashElement(target) {
+    target.scrollIntoView({ block: "center" });
+    positionHighlight(target);
+    highlightVisible.value = true;
+    highlightBreathing.value = true;
+    startFollowing(target);
+    if (breathTimer !== null) window.clearTimeout(breathTimer);
+    breathTimer = window.setTimeout(() => {
+      breathTimer = null;
+      stopFollowing();
+      highlightBreathing.value = false;
+      highlightVisible.value = false;
+    }, 4e3);
+  }
   function setPointerEventsNone(elements) {
     elements.forEach((el) => {
       if (el) el.style.pointerEvents = "none";
@@ -168,14 +222,9 @@ function useInspector(options) {
     const fileInfo = resolveElementSourceLocation(elementToHighlight);
     setPointerEventsAuto(uiElements);
     if (elementToHighlight) {
-      const widget = document.querySelector(".aipanel-widget");
-      if (widget) {
-        const style = getComputedStyle(widget);
-        currentPrimary = style.getPropertyValue("--ap-accent").trim() || currentPrimary;
-        currentPrimaryBg = style.getPropertyValue("--ap-accent-bg").trim() || currentPrimaryBg;
-      }
+      positionHighlight(elementToHighlight);
       const description = getElementDescription(elementToHighlight);
-      const fileName = fileInfo?.file ? fileInfo.file.split("/").pop() : "";
+      const fileName = fileInfo?.file ? (0, import_core.fileNameOf)(fileInfo.file) : "";
       let lineInfo = "";
       if (fileInfo?.line) {
         lineInfo = `:${fileInfo.line}`;
@@ -188,21 +237,6 @@ function useInspector(options) {
         description,
         fileInfo: fileInfoText
       };
-      const rect = elementToHighlight.getBoundingClientRect();
-      const newTop = `${rect.top}px`;
-      const newLeft = `${rect.left}px`;
-      const newWidth = `${rect.width}px`;
-      const newHeight = `${rect.height}px`;
-      if (highlightStyle.value.top !== newTop || highlightStyle.value.left !== newLeft || highlightStyle.value.width !== newWidth || highlightStyle.value.height !== newHeight) {
-        highlightStyle.value = {
-          top: newTop,
-          left: newLeft,
-          width: newWidth,
-          height: newHeight,
-          border: `2px solid ${currentPrimary}`,
-          background: currentPrimaryBg
-        };
-      }
       highlightVisible.value = true;
       tooltipVisible.value = true;
       void (0, import_vue.nextTick)(() => {
@@ -211,6 +245,7 @@ function useInspector(options) {
         const tooltipWidth = tooltipEl.offsetWidth;
         const tooltipHeight = tooltipEl.offsetHeight;
         if (tooltipWidth === 0 || tooltipHeight === 0) return;
+        const rect = elementToHighlight.getBoundingClientRect();
         const margin = 10;
         const gap = 4;
         const viewportWidth = window.innerWidth;
@@ -321,6 +356,7 @@ function useInspector(options) {
   (0, import_vue.watch)(options.selectMode, (newVal) => {
     (0, import_core.resolveInspectorAdapter)()?.setEnabled(newVal);
     if (newVal) {
+      stopFollowing();
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("keydown", handleKeydown, true);
     } else {
@@ -344,14 +380,21 @@ function useInspector(options) {
     if (inspectorCheckTimer) {
       window.clearInterval(inspectorCheckTimer);
     }
+    if (breathTimer !== null) {
+      window.clearTimeout(breathTimer);
+      breathTimer = null;
+    }
+    stopFollowing();
     document.removeEventListener("mousemove", handleMouseMove);
     document.removeEventListener("keydown", handleKeydown, true);
   });
   return {
     highlightVisible,
+    highlightBreathing,
     highlightStyle,
     tooltipVisible,
     tooltipStyle,
-    tooltipContent
+    tooltipContent,
+    flashElement
   };
 }

package/lib/AI-panel-widget/composables/use-inspector.d.ts

@@ -7,6 +7,7 @@ interface UseInspectorOptions {
 }
 export declare function useInspector(options: UseInspectorOptions): {
     highlightVisible: Ref<boolean, boolean>;
+    highlightBreathing: Ref<boolean, boolean>;
     highlightStyle: Ref<Record<string, string>, Record<string, string>>;
     tooltipVisible: Ref<boolean, boolean>;
     tooltipStyle: Ref<{
@@ -29,5 +30,6 @@ export declare function useInspector(options: UseInspectorOptions): {
         description: string;
         fileInfo: string;
     }>;
+    flashElement: (target: Element) => void;
 };
 export {};

package/lib/AI-panel-widget/composables/use-selection.cjs

@@ -28,19 +28,61 @@ function getElementKey(element, index) {
   }
   return `${element.description}-${index}`;
 }
+function takePendingLocate() {
+  try {
+    const selector = sessionStorage.getItem("__aipanel_pending_locate__");
+    sessionStorage.removeItem("__aipanel_pending_locate__");
+    return selector || null;
+  } catch {
+    return null;
+  }
+}
+function stashPendingLocate(selector) {
+  try {
+    sessionStorage.setItem("__aipanel_pending_locate__", selector);
+  } catch {
+  }
+}
+function isDifferentPage(a, b) {
+  try {
+    return new URL(a, window.location.href).href !== new URL(b, window.location.href).href;
+  } catch {
+    return a !== b;
+  }
+}
+function isHashOnlyChange(a, b) {
+  try {
+    const next = new URL(a, window.location.href);
+    const current = new URL(b, window.location.href);
+    return next.origin === current.origin && next.pathname === current.pathname && next.search === current.search;
+  } catch {
+    return false;
+  }
+}
+function queryPageElement(selector) {
+  try {
+    return document.querySelector(selector);
+  } catch {
+    return null;
+  }
+}
 function getBubbleFileText(element) {
-  const fileName = element.filePath?.split("/").pop() || "";
+  const fileName = element.filePath ? (0, import_core.fileNameOf)(element.filePath) : "";
   const lineInfo = element.line ? `:${element.line}${element.column ? `:${element.column}` : ""}` : "";
   return `${fileName}${lineInfo}`;
 }
 function getPanelFileText(element) {
-  const fileName = element.filePath?.split("/").pop() || "\u672A\u77E5\u6587\u4EF6";
+  const fileName = element.filePath && (0, import_core.fileNameOf)(element.filePath) || "\u672A\u77E5\u6587\u4EF6";
   const lineInfo = element.line ? `:${element.line}${element.column ? `:${element.column}` : ""}` : "";
   const textPreview = element.innerText?.trim() ? `${(0, import_core.truncate)(element.innerText.trim(), 30)} \xB7 ` : "";
   return `${textPreview}${fileName}${lineInfo}`;
 }
 function useSelection(options) {
   const bubbleVisible = (0, import_vue.computed)(() => options.selectMode.value);
+  function shouldLocateInPage() {
+    const value = options.locateInPage;
+    return typeof value === "function" ? value() : value !== false;
+  }
   const selectedElementItems = (0, import_vue.computed)(
     () => (options.selectedElements.value || []).map(
       (element, index) => ({
@@ -56,57 +98,49 @@ function useSelection(options) {
   function handleToggleSelectMode() {
     options.onToggleSelectMode(!options.selectMode.value);
   }
-  function handleClickSelectedNode(item) {
-    const description = item.element.description;
-    if (!description) return;
-    let targetElement = null;
-    if (description.includes("#")) {
-      const idMatch = description.match(/#([^.[\s]+)/);
-      if (idMatch) {
-        targetElement = document.getElementById(idMatch[1]);
+  function handleLocateSelectedElement(element) {
+    if (!shouldLocateInPage()) return;
+    const selector = element.description?.trim();
+    if (!selector) return;
+    const navigate = options.navigate ?? ((to) => window.location.assign(to));
+    const url = element.previewPageUrl;
+    if (url && isDifferentPage(url, window.location.href)) {
+      if (isHashOnlyChange(url, window.location.href)) {
+        navigate(url);
+        void flashWhenRendered(selector);
+        return;
       }
+      stashPendingLocate(selector);
+      navigate(url);
+      return;
     }
-    if (!targetElement && description.includes(".")) {
-      const classMatch = description.match(/^([a-z]+)\.([^[\s]+)/i);
-      if (classMatch) {
-        const tagName = classMatch[1];
-        const classes = classMatch[2].split(".").filter(Boolean);
-        const selector = `${tagName}.${classes.join(".")}`;
-        targetElement = document.querySelector(selector);
-      }
-    }
-    if (!targetElement) {
-      const tagMatch = description.match(/^([a-z]+)/i);
-      if (tagMatch) {
-        const simpleSelector = description.split(/[.[\s]/)[0];
-        targetElement = document.querySelector(simpleSelector);
-      }
+    const target = queryPageElement(selector);
+    if (!target) {
+      options.notify?.("\u672A\u627E\u5230\u8BE5\u8282\u70B9\uFF0C\u9875\u9762\u53EF\u80FD\u5DF2\u53D8\u5316");
+      return;
     }
-    if (targetElement) {
-      targetElement.scrollIntoView({ behavior: "smooth", block: "center" });
-      const highlightOverlay = document.createElement("div");
-      highlightOverlay.className = "aipanel-element-highlight-temp";
-      const widget = document.querySelector(".aipanel-widget");
-      let primary = "#4176e6";
-      let primaryBg = "rgba(65, 118, 230, 0.1)";
-      if (widget) {
-        const style = getComputedStyle(widget);
-        primary = style.getPropertyValue("--ap-accent").trim() || primary;
-        primaryBg = style.getPropertyValue("--ap-accent-bg").trim() || primaryBg;
+    options.flashHighlight?.(target);
+  }
+  function handleClickSelectedNode(item) {
+    handleLocateSelectedElement(item.element);
+  }
+  async function flashWhenRendered(selector) {
+    const deadline = Date.now() + 2e3;
+    for (; ; ) {
+      const target = queryPageElement(selector);
+      if (target) {
+        options.flashHighlight?.(target);
+        return true;
       }
-      highlightOverlay.style.border = `2px solid ${primary}`;
-      highlightOverlay.style.background = primaryBg;
-      const rect = targetElement.getBoundingClientRect();
-      highlightOverlay.style.top = `${rect.top + window.scrollY}px`;
-      highlightOverlay.style.left = `${rect.left + window.scrollX}px`;
-      highlightOverlay.style.width = `${rect.width}px`;
-      highlightOverlay.style.height = `${rect.height}px`;
-      document.body.appendChild(highlightOverlay);
-      setTimeout(() => {
-        highlightOverlay.remove();
-      }, 2e3);
+      if (Date.now() >= deadline) return false;
+      await (0, import_core.sleep)(50);
     }
   }
+  async function consumePendingLocate() {
+    if (!shouldLocateInPage()) return;
+    const selector = takePendingLocate();
+    if (selector) await flashWhenRendered(selector);
+  }
   function handleRemoveSelectedNode(item, index, source) {
     options.onRemoveSelectedNode({ element: item.element, index, source });
   }
@@ -123,8 +157,10 @@ function useSelection(options) {
     bubbleVisible,
     hasSelectedElements,
     selectedElementItems,
+    consumePendingLocate,
     handleClearSelectedNodes,
     handleClickSelectedNode,
+    handleLocateSelectedElement,
     handleRemoveSelectedNode,
     handleToggleSelectMode
   };

package/lib/AI-panel-widget/composables/use-selection.d.ts

@@ -7,13 +7,26 @@ export interface UseSelectionOptions {
     onRemoveSelectedNode: (payload: AIPanelRemoveSelectedPayload) => void;
     onClearSelectedNodes: () => void;
     showConfirmDialog: (message: string) => Promise<boolean>;
+    /**
+     * 是否在页面内定位（默认 true；可传 getter，显示模式运行时可变）。
+     * 扩展模式下挂件在侧栏、页面不在本上下文，置 false 以免去操作侧栏自身的 document。
+     */
+    locateInPage?: boolean | (() => boolean);
+    /** 高亮元素：复用选择模式的高亮框闪烁（由挂件的 inspector 提供） */
+    flashHighlight?: (element: Element) => void;
+    /** 跳转到目标页（默认 window.location.assign；测试可注入） */
+    navigate?: (url: string) => void;
+    /** 轻提示（定位失败时给出原因） */
+    notify?: (message: string) => void;
 }
 export declare function useSelection(options: UseSelectionOptions): {
     bubbleVisible: import("vue").ComputedRef<boolean>;
     hasSelectedElements: import("vue").ComputedRef<boolean>;
     selectedElementItems: import("vue").ComputedRef<AIPanelSelectedElementItem[]>;
+    consumePendingLocate: () => Promise<void>;
     handleClearSelectedNodes: () => Promise<void>;
     handleClickSelectedNode: (item: AIPanelSelectedElementItem) => void;
+    handleLocateSelectedElement: (element: AIPanelSelectedElement) => void;
     handleRemoveSelectedNode: (item: AIPanelSelectedElementItem, index: number, source: AIPanelRemoveSelectedPayload["source"]) => void;
     handleToggleSelectMode: () => void;
 };

package/lib/AI-panel-widget/src/components/SessionList-sfc.css

@@ -1 +1 @@
-.aipanel-session-list{width:236px;background:var(--ap-bg-secondary);border-right:1px solid var(--ap-border-faint);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease}.aipanel-session-list.collapsed{width:0;overflow:hidden}.aipanel-session-list.collapsed .aipanel-session-list-header,.aipanel-session-list.collapsed .aipanel-session-list-content{display:none}.aipanel-session-list-header{padding:10px 8px 8px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--ap-bg-secondary);border-bottom:1px solid var(--ap-border-faint)}.aipanel-session-list-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.02em;line-height:18px;color:var(--ap-text-tertiary)}.aipanel-new-session-btn{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--ap-border-secondary);background:var(--ap-elevated-fill);color:var(--ap-text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease,color .2s ease}.aipanel-new-session-btn svg{display:block}.aipanel-new-session-btn:hover{background:var(--ap-elevated-hover);color:var(--ap-text-primary)}.aipanel-new-session-btn:active{background:var(--ap-press-bg)}.aipanel-new-session-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ap-accent-bg)}.aipanel-session-list-content{flex:1;min-height:0;overflow-y:auto;padding:8px;position:relative;display:flex;flex-direction:column;gap:2px}.aipanel-session-item{position:relative;box-sizing:border-box;display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;border-radius:8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--ap-text-primary);transition:background-color .15s ease}.aipanel-session-item:hover{background:var(--ap-hover-bg)}.aipanel-session-item:active{background:var(--ap-press-bg)}.aipanel-session-item.active{background:var(--ap-hover-bg)}.aipanel-session-title-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:400;line-height:20px}.aipanel-session-meta{flex:none;margin-left:auto;font-size:12px;line-height:20px;color:var(--ap-text-tertiary);white-space:nowrap;transition:opacity .15s ease}.aipanel-session-item:hover .aipanel-session-meta{opacity:0}.aipanel-session-delete-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:16px;height:16px;border:none;border-radius:4px;background:transparent;color:var(--ap-text-tertiary);font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease,background-color .15s ease,color .15s ease}.aipanel-session-item:hover .aipanel-session-delete-btn{opacity:1}.aipanel-session-delete-btn:hover{background:transparent;color:var(--ap-text-primary)}.aipanel-session-state{position:relative;flex:none;width:10px;height:10px;margin-right:-2px}.aipanel-session-state-pending:before,.aipanel-session-state-completed:before{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:.1}.aipanel-session-state-pending:after,.aipanel-session-state-completed:after{content:"";position:absolute;inset:20%;border-radius:50%;background:currentColor}.aipanel-session-state-pending{color:var(--ap-state-pending)}.aipanel-session-state-completed{color:var(--ap-state-completed)}.aipanel-session-state-ongoing{color:var(--ap-state-ongoing)}.aipanel-session-ongoing-cell{fill:currentColor;opacity:.15;animation:aipanel-ongoing-chase 1s infinite}@keyframes aipanel-ongoing-chase{0%,12.4%{opacity:1}12.5%,24.9%{opacity:.6}25%,37.4%{opacity:.35}37.5%,to{opacity:.15}}.aipanel-session-item.active .aipanel-session-state-pending{color:var(--ap-state-pending)}.aipanel-session-item.active .aipanel-session-state-completed{color:var(--ap-state-completed)}.aipanel-session-item.active .aipanel-session-state-ongoing{color:var(--ap-accent)}.aipanel-session-header-skeleton{padding:10px 12px 8px;border-bottom:1px solid var(--ap-border-faint);display:none;align-items:center;gap:8px}.aipanel-session-header-skeleton.visible{display:flex}.aipanel-skeleton-header-title{flex:1;height:12px;width:48px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.aipanel-skeleton-header-btn{width:24px;height:24px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:50%}.aipanel-session-skeleton{flex:1;min-height:0;overflow-y:auto;padding:8px;display:none}.aipanel-session-skeleton.visible{display:block}.aipanel-skeleton-item{display:flex;align-items:center;gap:8px;height:32px;box-sizing:border-box;padding:0 8px;border-radius:8px;margin-bottom:2px;background:var(--ap-skeleton-bg)}.aipanel-skeleton-title{flex:1 1 auto;height:13px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.aipanel-skeleton-meta{flex:none;width:32px;height:12px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.aipanel-session-empty{padding:32px 16px;text-align:center;color:var(--ap-text-tertiary);font-size:12px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}
+.aipanel-session-list{width:236px;background:var(--ap-bg-secondary);border-right:1px solid var(--ap-border-faint);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s ease}.aipanel-session-list.collapsed{width:0;overflow:hidden}.aipanel-session-list.collapsed .aipanel-session-list-header,.aipanel-session-list.collapsed .aipanel-session-list-content{display:none}.aipanel-session-list-header{padding:10px 8px 8px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--ap-bg-secondary);border-bottom:1px solid var(--ap-border-faint)}.aipanel-session-list-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.02em;line-height:18px;color:var(--ap-text-tertiary)}.aipanel-new-session-btn{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--ap-border-secondary);background:var(--ap-elevated-fill);color:var(--ap-text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease,color .2s ease}.aipanel-new-session-btn svg{display:block}.aipanel-new-session-btn:hover{background:var(--ap-elevated-hover);color:var(--ap-text-primary)}.aipanel-new-session-btn:active{background:var(--ap-press-bg)}.aipanel-new-session-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ap-accent-bg)}.aipanel-session-list-content{flex:1;min-height:0;overflow-y:auto;padding:8px;position:relative;display:flex;flex-direction:column;gap:2px}.aipanel-session-item{position:relative;box-sizing:border-box;display:flex;align-items:center;gap:8px;flex:none;height:32px;padding:0 8px;border-radius:8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--ap-text-primary);transition:background-color .15s ease}.aipanel-session-item:hover{background:var(--ap-hover-bg)}.aipanel-session-item:active{background:var(--ap-press-bg)}.aipanel-session-item.active{background:var(--ap-hover-bg)}.aipanel-session-title-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:400;line-height:20px}.aipanel-session-meta{flex:none;margin-left:auto;font-size:12px;line-height:20px;color:var(--ap-text-tertiary);white-space:nowrap;transition:opacity .15s ease}.aipanel-session-item:hover .aipanel-session-meta{opacity:0}.aipanel-session-delete-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:16px;height:16px;border:none;border-radius:4px;background:transparent;color:var(--ap-text-tertiary);font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease,background-color .15s ease,color .15s ease}.aipanel-session-item:hover .aipanel-session-delete-btn{opacity:1}.aipanel-session-delete-btn:hover{background:transparent;color:var(--ap-text-primary)}.aipanel-session-state{position:relative;flex:none;width:10px;height:10px;margin-right:-2px}.aipanel-session-state-pending:before,.aipanel-session-state-completed:before{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:.1}.aipanel-session-state-pending:after,.aipanel-session-state-completed:after{content:"";position:absolute;inset:20%;border-radius:50%;background:currentColor}.aipanel-session-state-pending{color:var(--ap-state-pending)}.aipanel-session-state-completed{color:var(--ap-state-completed)}.aipanel-session-state-ongoing{color:var(--ap-state-ongoing)}.aipanel-session-ongoing-cell{fill:currentColor;opacity:.15;animation:aipanel-ongoing-chase 1s infinite}@keyframes aipanel-ongoing-chase{0%,12.4%{opacity:1}12.5%,24.9%{opacity:.6}25%,37.4%{opacity:.35}37.5%,to{opacity:.15}}.aipanel-session-item.active .aipanel-session-state-pending{color:var(--ap-state-pending)}.aipanel-session-item.active .aipanel-session-state-completed{color:var(--ap-state-completed)}.aipanel-session-item.active .aipanel-session-state-ongoing{color:var(--ap-accent)}.aipanel-session-header-skeleton{padding:10px 12px 8px;border-bottom:1px solid var(--ap-border-faint);display:none;align-items:center;gap:8px}.aipanel-session-header-skeleton.visible{display:flex}.aipanel-skeleton-header-title{flex:1;height:12px;width:48px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.aipanel-skeleton-header-btn{width:24px;height:24px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:50%}.aipanel-session-skeleton{flex:1;min-height:0;overflow-y:auto;padding:8px;display:none}.aipanel-session-skeleton.visible{display:block}.aipanel-skeleton-item{display:flex;align-items:center;gap:8px;height:32px;box-sizing:border-box;padding:0 8px;border-radius:8px;margin-bottom:2px;background:var(--ap-skeleton-bg)}.aipanel-skeleton-title{flex:1 1 auto;height:13px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.aipanel-skeleton-meta{flex:none;width:32px;height:12px;background:var(--ap-skeleton-gradient);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}.aipanel-session-empty{padding:32px 16px;text-align:center;color:var(--ap-text-tertiary);font-size:12px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}

package/lib/AI-panel-widget/src/index-sfc.css

@@ -1 +1 @@
-.aipanel-widget{--ap-bg-main: #ffffff;--ap-bg-secondary: #f9fafb;--ap-bg-tertiary: #ebeef2;--ap-overlay-bg: rgba(249, 250, 251, .92);--ap-text-primary: #0f1115;--ap-text-secondary: #61666b;--ap-text-tertiary: #81858c;--ap-text-placeholder: #adb2b8;--ap-border-faint: rgba(15, 17, 21, .04);--ap-border-primary: rgba(15, 17, 21, .1);--ap-border-secondary: rgba(15, 17, 21, .12);--ap-hover-bg: rgba(38, 49, 72, .06);--ap-elevated-fill: #ffffff;--ap-elevated-hover: #f1f3f5;--ap-press-bg: rgba(38, 49, 72, .1);--ap-primary: #0f1115;--ap-primary-hover: #43454a;--ap-on-primary: #ffffff;--ap-accent: #4176e6;--ap-accent-hover: #5686fe;--ap-accent-bg: rgba(65, 118, 230, .1);--ap-danger: #ec1313;--ap-danger-hover: #c40f0f;--ap-state-pending: #f59e0b;--ap-state-completed: #22c55e;--ap-state-ongoing: #5686fe;--ap-tooltip-bg: #1e1e1e;--ap-dialog-overlay: rgba(0, 0, 0, .24);--ap-dialog-bg: #ffffff;--ap-scrollbar-thumb: #e5e5e5;--ap-scrollbar-thumb-hover: #d4d4d4;--ap-thinking-glow: rgba(86, 134, 254, .3);--ap-thinking-glow-strong: rgba(86, 134, 254, .55);--ap-skeleton-bg: rgba(15, 17, 21, .06);--ap-skeleton-gradient: linear-gradient( 90deg, rgba(15, 17, 21, .04) 25%, rgba(15, 17, 21, .1) 50%, rgba(15, 17, 21, .04) 75% );--ap-shadow-sm: 0 1px 2px rgba(15, 17, 21, .04), 0 1px 3px rgba(15, 17, 21, .06);--ap-shadow-md: 0 2px 8px rgba(15, 17, 21, .06), 0 4px 16px rgba(15, 17, 21, .06);--ap-shadow-lg: 0 0 0 .5px rgba(15, 17, 21, .06), 0 4px 16px rgba(15, 17, 21, .08), 0 16px 48px rgba(15, 17, 21, .1);--ap-shadow-xl: 0 0 0 .5px rgba(15, 17, 21, .08), 0 8px 32px rgba(15, 17, 21, .12), 0 24px 72px rgba(15, 17, 21, .14);--ap-shadow-accent: 0 1px 2px rgba(65, 118, 230, .14), 0 0 0 1px rgba(65, 118, 230, .18);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.aipanel-widget.aipanel-theme-dark{--ap-bg-main: #151517;--ap-bg-secondary: #1b1b1c;--ap-bg-tertiary: #2c2c2e;--ap-overlay-bg: rgba(21, 21, 23, .92);--ap-text-primary: #f9fafb;--ap-text-secondary: #cfd3d6;--ap-text-tertiary: #adb2b8;--ap-text-placeholder: #81858c;--ap-border-faint: rgba(255, 255, 255, .06);--ap-border-primary: rgba(255, 255, 255, .12);--ap-border-secondary: rgba(255, 255, 255, .16);--ap-hover-bg: rgba(255, 255, 255, .08);--ap-elevated-fill: #43454a;--ap-elevated-hover: #353638;--ap-press-bg: rgba(255, 255, 255, .14);--ap-primary: #f9fafb;--ap-primary-hover: #ebeef2;--ap-on-primary: #0f1115;--ap-accent: #679efe;--ap-accent-hover: #5686fe;--ap-accent-bg: rgba(103, 158, 254, .16);--ap-danger: #f25a5a;--ap-danger-hover: #ff8383;--ap-state-pending: #f59e0b;--ap-state-completed: #22c55e;--ap-state-ongoing: #5686fe;--ap-tooltip-bg: #282828;--ap-dialog-overlay: rgba(0, 0, 0, .5);--ap-dialog-bg: #2c2c2e;--ap-scrollbar-thumb: #3c3c3d;--ap-scrollbar-thumb-hover: #545557;--ap-thinking-glow: rgba(103, 158, 254, .35);--ap-thinking-glow-strong: rgba(103, 158, 254, .6);--ap-skeleton-bg: rgba(255, 255, 255, .07);--ap-skeleton-gradient: linear-gradient( 90deg, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, .05) 75% );--ap-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .24);--ap-shadow-md: 0 2px 8px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .2);--ap-shadow-lg: 0 0 0 .5px rgba(255, 255, 255, .06), 0 4px 16px rgba(0, 0, 0, .3), 0 16px 48px rgba(0, 0, 0, .25);--ap-shadow-xl: 0 0 0 .5px rgba(255, 255, 255, .08), 0 8px 32px rgba(0, 0, 0, .36), 0 24px 72px rgba(0, 0, 0, .3);--ap-shadow-accent: 0 1px 2px rgba(103, 158, 254, .2), 0 0 0 1px rgba(103, 158, 254, .25)}@supports not selector(::-webkit-scrollbar){.aipanel-widget,.aipanel-widget *{scrollbar-width:thin;scrollbar-color:var(--ap-scrollbar-thumb) transparent}}.aipanel-widget ::-webkit-scrollbar,.aipanel-widget *::-webkit-scrollbar{width:8px;height:8px}.aipanel-widget ::-webkit-scrollbar-track,.aipanel-widget *::-webkit-scrollbar-track{background:transparent}.aipanel-widget ::-webkit-scrollbar-thumb,.aipanel-widget *::-webkit-scrollbar-thumb{border-radius:4px;background:var(--ap-scrollbar-thumb)}.aipanel-widget ::-webkit-scrollbar-thumb:hover,.aipanel-widget *::-webkit-scrollbar-thumb:hover{background:var(--ap-scrollbar-thumb-hover)}.aipanel-widget ::-webkit-scrollbar-corner,.aipanel-widget *::-webkit-scrollbar-corner{background:transparent}.aipanel-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--ap-bg-main);border-radius:16px;box-shadow:var(--ap-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translate3d(var(---chatAnimationOrigin\.x),var(---chatAnimationOrigin\.y),0) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.aipanel-chat.open{opacity:1;visibility:visible;transform:translateZ(0) scale(1)}.aipanel-chat.no-transition,.aipanel-chat.no-transition.open{transition:none!important}.aipanel-chat.minimized{width:320px;height:320px}.aipanel-chat.minimized .aipanel-iframe-container{margin-top:-146px}.aipanel-chat-content{display:flex;flex:1;overflow:hidden}.aipanel-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:10000000;display:flex;align-items:center;gap:10px}.aipanel-notification:before{content:"\1f4a1";font-size:16px}.aipanel-dialog-overlay{position:fixed;inset:0;background:var(--ap-dialog-overlay);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:9999999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.aipanel-dialog{width:min(380px,100%);background:var(--ap-dialog-bg);border-radius:24px;padding:24px 24px 20px;box-shadow:var(--ap-shadow-xl);animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.aipanel-dialog-content{margin-bottom:20px}.aipanel-dialog-message{font-size:14px;line-height:22px;font-weight:400;color:var(--ap-text-primary)}.aipanel-dialog-actions{display:flex;gap:8px;justify-content:flex-end}.aipanel-dialog-btn{height:36px;padding:0 20px;border-radius:999px;border:1px solid transparent;font-size:14px;line-height:22px;font-weight:500;cursor:pointer;transition:all .2s}.aipanel-dialog-btn.cancel{background:transparent;border-color:var(--ap-border-primary);color:var(--ap-text-secondary)}.aipanel-dialog-btn.cancel:hover{background:var(--ap-hover-bg);color:var(--ap-text-primary)}.aipanel-dialog-btn.confirm{background:var(--ap-danger);color:#fff}.aipanel-dialog-btn.confirm:hover{background:var(--ap-danger-hover)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.aipanel-page-notification{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:2147483647;display:flex;align-items:center;gap:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.aipanel-page-notification:before{content:"\1f4a1";font-size:16px}.aipanel-element-highlight{position:fixed;pointer-events:none;z-index:999998;border-radius:4px}#vue-inspector-container{display:none!important}.aipanel-element-tooltip{position:fixed;background:var(--ap-tooltip-bg);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;z-index:9999998;box-shadow:var(--ap-shadow-md);max-width:300px;pointer-events:none;line-height:1}.aipanel-tooltip-tag{font-weight:500;margin-bottom:4px;word-break:break-all}.aipanel-tooltip-file{font-size:11px;color:var(--ap-text-placeholder);word-break:break-all}.aipanel-element-highlight-temp{position:absolute;pointer-events:none;z-index:999998;border-radius:4px;animation:highlight-pulse 2s ease-out forwards}@keyframes highlight-pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}to{opacity:0;transform:scale(1)}}@media(max-width:768px){.aipanel-chat{width:calc(100vw - 40px);height:calc(100vh - 100px)}}body.has-aipanel-split{transition:padding .3s ease;min-width:auto}body.has-aipanel-split-right{padding-right:var(--aipanel-split-width, 500px)}body.has-aipanel-split-left{padding-left:var(--aipanel-split-width, 500px)}.aipanel-widget.extension-mode{position:relative;width:100%;height:100%;display:flex}.aipanel-widget.extension-mode .aipanel-select-mode-hint,.aipanel-widget.extension-mode .aipanel-dialog-overlay{position:absolute}
+.aipanel-widget{--ap-bg-main: #ffffff;--ap-bg-secondary: #f9fafb;--ap-bg-tertiary: #ebeef2;--ap-overlay-bg: rgba(249, 250, 251, .92);--ap-text-primary: #0f1115;--ap-text-secondary: #61666b;--ap-text-tertiary: #81858c;--ap-text-placeholder: #adb2b8;--ap-border-faint: rgba(15, 17, 21, .04);--ap-border-primary: rgba(15, 17, 21, .1);--ap-border-secondary: rgba(15, 17, 21, .12);--ap-hover-bg: rgba(38, 49, 72, .06);--ap-elevated-fill: #ffffff;--ap-elevated-hover: #f1f3f5;--ap-press-bg: rgba(38, 49, 72, .1);--ap-primary: #0f1115;--ap-primary-hover: #43454a;--ap-on-primary: #ffffff;--ap-accent: #4176e6;--ap-accent-hover: #5686fe;--ap-accent-bg: rgba(65, 118, 230, .1);--ap-danger: #ec1313;--ap-danger-hover: #c40f0f;--ap-state-pending: #f59e0b;--ap-state-completed: #22c55e;--ap-state-ongoing: #5686fe;--ap-tooltip-bg: #1e1e1e;--ap-dialog-overlay: rgba(0, 0, 0, .24);--ap-dialog-bg: #ffffff;--ap-scrollbar-thumb: #e5e5e5;--ap-scrollbar-thumb-hover: #d4d4d4;--ap-thinking-glow: rgba(86, 134, 254, .3);--ap-thinking-glow-strong: rgba(86, 134, 254, .55);--ap-skeleton-bg: rgba(15, 17, 21, .06);--ap-skeleton-gradient: linear-gradient( 90deg, rgba(15, 17, 21, .04) 25%, rgba(15, 17, 21, .1) 50%, rgba(15, 17, 21, .04) 75% );--ap-shadow-sm: 0 1px 2px rgba(15, 17, 21, .04), 0 1px 3px rgba(15, 17, 21, .06);--ap-shadow-md: 0 2px 8px rgba(15, 17, 21, .06), 0 4px 16px rgba(15, 17, 21, .06);--ap-shadow-lg: 0 0 0 .5px rgba(15, 17, 21, .06), 0 4px 16px rgba(15, 17, 21, .08), 0 16px 48px rgba(15, 17, 21, .1);--ap-shadow-xl: 0 0 0 .5px rgba(15, 17, 21, .08), 0 8px 32px rgba(15, 17, 21, .12), 0 24px 72px rgba(15, 17, 21, .14);--ap-shadow-accent: 0 1px 2px rgba(65, 118, 230, .14), 0 0 0 1px rgba(65, 118, 230, .18);position:fixed;z-index:999999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.aipanel-widget.aipanel-theme-dark{--ap-bg-main: #151517;--ap-bg-secondary: #1b1b1c;--ap-bg-tertiary: #2c2c2e;--ap-overlay-bg: rgba(21, 21, 23, .92);--ap-text-primary: #f9fafb;--ap-text-secondary: #cfd3d6;--ap-text-tertiary: #adb2b8;--ap-text-placeholder: #81858c;--ap-border-faint: rgba(255, 255, 255, .06);--ap-border-primary: rgba(255, 255, 255, .12);--ap-border-secondary: rgba(255, 255, 255, .16);--ap-hover-bg: rgba(255, 255, 255, .08);--ap-elevated-fill: #43454a;--ap-elevated-hover: #353638;--ap-press-bg: rgba(255, 255, 255, .14);--ap-primary: #f9fafb;--ap-primary-hover: #ebeef2;--ap-on-primary: #0f1115;--ap-accent: #679efe;--ap-accent-hover: #5686fe;--ap-accent-bg: rgba(103, 158, 254, .16);--ap-danger: #f25a5a;--ap-danger-hover: #ff8383;--ap-state-pending: #f59e0b;--ap-state-completed: #22c55e;--ap-state-ongoing: #5686fe;--ap-tooltip-bg: #282828;--ap-dialog-overlay: rgba(0, 0, 0, .5);--ap-dialog-bg: #2c2c2e;--ap-scrollbar-thumb: #3c3c3d;--ap-scrollbar-thumb-hover: #545557;--ap-thinking-glow: rgba(103, 158, 254, .35);--ap-thinking-glow-strong: rgba(103, 158, 254, .6);--ap-skeleton-bg: rgba(255, 255, 255, .07);--ap-skeleton-gradient: linear-gradient( 90deg, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, .05) 75% );--ap-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .24);--ap-shadow-md: 0 2px 8px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .2);--ap-shadow-lg: 0 0 0 .5px rgba(255, 255, 255, .06), 0 4px 16px rgba(0, 0, 0, .3), 0 16px 48px rgba(0, 0, 0, .25);--ap-shadow-xl: 0 0 0 .5px rgba(255, 255, 255, .08), 0 8px 32px rgba(0, 0, 0, .36), 0 24px 72px rgba(0, 0, 0, .3);--ap-shadow-accent: 0 1px 2px rgba(103, 158, 254, .2), 0 0 0 1px rgba(103, 158, 254, .25)}@supports not selector(::-webkit-scrollbar){.aipanel-widget,.aipanel-widget *{scrollbar-width:thin;scrollbar-color:var(--ap-scrollbar-thumb) transparent}}.aipanel-widget ::-webkit-scrollbar,.aipanel-widget *::-webkit-scrollbar{width:8px;height:8px}.aipanel-widget ::-webkit-scrollbar-track,.aipanel-widget *::-webkit-scrollbar-track{background:transparent}.aipanel-widget ::-webkit-scrollbar-thumb,.aipanel-widget *::-webkit-scrollbar-thumb{border-radius:4px;background:var(--ap-scrollbar-thumb)}.aipanel-widget ::-webkit-scrollbar-thumb:hover,.aipanel-widget *::-webkit-scrollbar-thumb:hover{background:var(--ap-scrollbar-thumb-hover)}.aipanel-widget ::-webkit-scrollbar-corner,.aipanel-widget *::-webkit-scrollbar-corner{background:transparent}.aipanel-chat{position:fixed;bottom:20px;width:700px;height:86vh;max-height:calc(100vh - 40px);background:var(--ap-bg-main);border-radius:16px;box-shadow:var(--ap-shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translate3d(var(---chatAnimationOrigin\.x),var(---chatAnimationOrigin\.y),0) scale(.95);transition:all .3s ease;display:flex;flex-direction:column;z-index:99999}.aipanel-chat.open{opacity:1;visibility:visible;transform:translateZ(0) scale(1)}.aipanel-chat.no-transition,.aipanel-chat.no-transition.open{transition:none!important}.aipanel-chat.minimized{width:320px;height:320px}.aipanel-chat.minimized .aipanel-iframe-container{margin-top:-146px}.aipanel-chat-content{display:flex;flex:1;overflow:hidden}.aipanel-notification{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:10000000;display:flex;align-items:center;gap:10px}.aipanel-notification:before{content:"\1f4a1";font-size:16px}.aipanel-dialog-overlay{position:fixed;inset:0;background:var(--ap-dialog-overlay);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:9999999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.aipanel-dialog{width:min(380px,100%);background:var(--ap-dialog-bg);border-radius:24px;padding:24px 24px 20px;box-shadow:var(--ap-shadow-xl);animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.aipanel-dialog-content{margin-bottom:20px}.aipanel-dialog-message{font-size:14px;line-height:22px;font-weight:400;color:var(--ap-text-primary)}.aipanel-dialog-actions{display:flex;gap:8px;justify-content:flex-end}.aipanel-dialog-btn{height:36px;padding:0 20px;border-radius:999px;border:1px solid transparent;font-size:14px;line-height:22px;font-weight:500;cursor:pointer;transition:all .2s}.aipanel-dialog-btn.cancel{background:transparent;border-color:var(--ap-border-primary);color:var(--ap-text-secondary)}.aipanel-dialog-btn.cancel:hover{background:var(--ap-hover-bg);color:var(--ap-text-primary)}.aipanel-dialog-btn.confirm{background:var(--ap-danger);color:#fff}.aipanel-dialog-btn.confirm:hover{background:var(--ap-danger-hover)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.aipanel-page-notification{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 4px 16px #3b82f666,0 0 0 2px #3b82f633;animation:slideDown .3s ease;z-index:2147483647;display:flex;align-items:center;gap:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.aipanel-page-notification:before{content:"\1f4a1";font-size:16px}.aipanel-element-highlight{position:fixed;pointer-events:none;z-index:999998;border-radius:4px}.aipanel-element-highlight.breathing{animation:aipanel-highlight-breath 2s ease-in-out 2}@keyframes aipanel-highlight-breath{0%,to{opacity:.25;transform:scale(1)}50%{opacity:1;transform:scale(1.01)}}#vue-inspector-container{display:none!important}.aipanel-element-tooltip{position:fixed;background:var(--ap-tooltip-bg);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;z-index:9999998;box-shadow:var(--ap-shadow-md);max-width:300px;pointer-events:none;line-height:1}.aipanel-tooltip-tag{font-weight:500;margin-bottom:4px;word-break:break-all}.aipanel-tooltip-file{font-size:11px;color:var(--ap-text-placeholder);word-break:break-all}@media(max-width:768px){.aipanel-chat{width:calc(100vw - 40px);height:calc(100vh - 100px)}}body.has-aipanel-split{transition:padding .3s ease;min-width:auto}body.has-aipanel-split-right{padding-right:var(--aipanel-split-width, 500px)}body.has-aipanel-split-left{padding-left:var(--aipanel-split-width, 500px)}.aipanel-widget.extension-mode{position:relative;width:100%;height:100%;display:flex}.aipanel-widget.extension-mode .aipanel-select-mode-hint,.aipanel-widget.extension-mode .aipanel-dialog-overlay{position:absolute}

package/lib/AI-panel-widget/src/index.vue.cjs

@@ -82,7 +82,7 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
     providerSidebar: { type: Boolean, required: false, default: false },
     sidebarCollapseControl: { type: String, required: false, default: "host" }
   },
-  emits: ["update:open", "update:selectMode", "update:sessionListCollapsed", "update:currentSessionId", "update:selectedElements", "update:theme", "update:thinking", "update:splitPanelWidth", "toggle", "close", "toggle-session-list", "toggle-select-mode", "toggle-theme", "create-session", "select-session", "delete-session", "click-selected-node", "remove-selected-node", "clear-selected-nodes", "empty-action", "frame-loaded", "thinking-change", "split-panel-width-change"],
+  emits: ["update:open", "update:selectMode", "update:sessionListCollapsed", "update:currentSessionId", "update:selectedElements", "update:theme", "update:thinking", "update:splitPanelWidth", "toggle", "close", "toggle-session-list", "toggle-select-mode", "toggle-theme", "create-session", "select-session", "delete-session", "click-selected-node", "locate-node", "remove-selected-node", "clear-selected-nodes", "empty-action", "frame-loaded", "thinking-change", "split-panel-width-change"],
   setup(__props, { expose: __expose, emit: __emit }) {
     (0, import_vue.useCssVars)((_ctx) => ({
       "-chatAnimationOrigin.x": chatAnimationOrigin.value.x,
@@ -246,12 +246,32 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       onDeleteSession: (session) => emit("delete-session", session),
       showConfirmDialog
     });
+    const {
+      highlightVisible,
+      highlightBreathing,
+      highlightStyle,
+      tooltipVisible,
+      tooltipStyle,
+      tooltipContent,
+      flashElement
+    } = (0, import_use_inspector.useInspector)({
+      selectMode: (0, import_vue2.toRef)(props, "selectMode"),
+      onAddSelectedNode: (element) => {
+        emit("click-selected-node", element);
+      },
+      onExitSelectMode: () => {
+        emit("update:selectMode", false);
+        emit("toggle-select-mode", false);
+      }
+    });
     const {
       bubbleVisible,
       hasSelectedElements,
       selectedElementItems,
+      consumePendingLocate,
       handleClearSelectedNodes,
       handleClickSelectedNode,
+      handleLocateSelectedElement,
       handleRemoveSelectedNode,
       handleToggleSelectMode
     } = (0, import_use_selection.useSelection)({
@@ -271,17 +291,11 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
         emit("clear-selected-nodes");
         emit("update:selectedElements", []);
       },
-      showConfirmDialog
-    });
-    const { highlightVisible, highlightStyle, tooltipVisible, tooltipStyle, tooltipContent } = (0, import_use_inspector.useInspector)({
-      selectMode: (0, import_vue2.toRef)(props, "selectMode"),
-      onAddSelectedNode: (element) => {
-        emit("click-selected-node", element);
-      },
-      onExitSelectMode: () => {
-        emit("update:selectMode", false);
-        emit("toggle-select-mode", false);
-      }
+      showConfirmDialog,
+      // 点已选节点时复用选择模式的高亮框闪烁；扩展模式下挂件在侧栏，不操作页面
+      flashHighlight: flashElement,
+      locateInPage: () => !isExtensionMode.value,
+      notify: (message) => showNotification(message)
     });
     const bubbleOffset = (0, import_vue2.ref)(void 0);
     const {
@@ -416,12 +430,21 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
           }
         }
       }
+      if (event.data?.type === import_core.WIDGET_MSG.LOCATE_NODE && event.data.element) {
+        const element = event.data.element;
+        if (localDisplayMode.value === "extension") {
+          emit("locate-node", element);
+        } else {
+          handleLocateSelectedElement(element);
+        }
+      }
     };
     (0, import_vue2.onMounted)(() => {
       if (typeof window !== "undefined") {
         window.addEventListener("resize", handleWindowResize);
         window.addEventListener("message", handleIframeMessage);
       }
+      void consumePendingLocate();
     });
     (0, import_vue2.onUnmounted)(() => {
       if (typeof window !== "undefined") {
@@ -610,7 +633,7 @@ const __vue_sfc__ = /* @__PURE__ */ (0, import_vue.defineComponent)({
       return dialogResolve;
     }, set dialogResolve(v) {
       dialogResolve = v;
-    }, showConfirmDialog, handleDialogConfirm, handleDialogCancel, frameRef, triggerRef, sendMessageToIframe, localSessionListCollapsed, localDisplayMode, localSplitPosition, minimized, promptDockVisible, reviewPanelVisible, isRestoring, iframeLoaded, iframeReady, splitPanelWidth, syncStateToIframe, handleFrameLoaded, handleToggleDisplayMode, buttonActive, containerClasses, iframeSource, sessionListTitle, resolvedTheme, handleClose, handleEmptyAction, handleToggle, handleToggleSessionList, handleToggleTheme, sessionItems, handleCreateSession, handleDeleteSession, handleSelectSession, bubbleVisible, hasSelectedElements, selectedElementItems, handleClearSelectedNodes, handleClickSelectedNode, handleRemoveSelectedNode, handleToggleSelectMode, highlightVisible, highlightStyle, tooltipVisible, tooltipStyle, tooltipContent, bubbleOffset, effectiveMode, isSplitMode, isExtensionMode, panelWidth, splitConfig, splitPosition, handleResize, handleSplitToggle, handleTogglePosition, handleToggleMinimize, handleTogglePromptDock, handleToggleReviewPanel, handleRefresh, windowWidth, windowHeight, handleWindowResize, handleIframeMessage, bubbleQuadrant, isBubbleOnRightSide, chatPositionStyle, handleBubbleOffsetChange, handleResizeStart, handleResizeEnd, chatAnimationOrigin, isDragging, get wasOpenBeforeDrag() {
+    }, showConfirmDialog, handleDialogConfirm, handleDialogCancel, frameRef, triggerRef, sendMessageToIframe, localSessionListCollapsed, localDisplayMode, localSplitPosition, minimized, promptDockVisible, reviewPanelVisible, isRestoring, iframeLoaded, iframeReady, splitPanelWidth, syncStateToIframe, handleFrameLoaded, handleToggleDisplayMode, buttonActive, containerClasses, iframeSource, sessionListTitle, resolvedTheme, handleClose, handleEmptyAction, handleToggle, handleToggleSessionList, handleToggleTheme, sessionItems, handleCreateSession, handleDeleteSession, handleSelectSession, highlightVisible, highlightBreathing, highlightStyle, tooltipVisible, tooltipStyle, tooltipContent, flashElement, bubbleVisible, hasSelectedElements, selectedElementItems, consumePendingLocate, handleClearSelectedNodes, handleClickSelectedNode, handleLocateSelectedElement, handleRemoveSelectedNode, handleToggleSelectMode, bubbleOffset, effectiveMode, isSplitMode, isExtensionMode, panelWidth, splitConfig, splitPosition, handleResize, handleSplitToggle, handleTogglePosition, handleToggleMinimize, handleTogglePromptDock, handleToggleReviewPanel, handleRefresh, windowWidth, windowHeight, handleWindowResize, handleIframeMessage, bubbleQuadrant, isBubbleOnRightSide, chatPositionStyle, handleBubbleOffsetChange, handleResizeStart, handleResizeEnd, chatAnimationOrigin, isDragging, get wasOpenBeforeDrag() {
       return wasOpenBeforeDrag;
     }, set wasOpenBeforeDrag(v) {
       wasOpenBeforeDrag = v;
@@ -761,12 +784,12 @@ function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
       (0, import_vue3.withDirectives)((0, import_vue3.createElementVNode)(
         "div",
         {
-          class: "aipanel-element-highlight",
+          class: (0, import_vue3.normalizeClass)(["aipanel-element-highlight", { breathing: $setup.highlightBreathing }]),
           style: (0, import_vue3.normalizeStyle)($setup.highlightStyle)
         },
         null,
-        4
-        /* STYLE */
+        6
+        /* CLASS, STYLE */
       ), [
         [import_vue3.vShow, $setup.highlightVisible]
       ]),

package/lib/AI-panel-widget/src/index.vue.d.ts

@@ -1,4 +1,5 @@
 import type { AIPanelWidgetProps } from "./types";
+import { type AIPanelSelectedElement } from "@aipanel/core";
 declare var __VLS_13: {}, __VLS_29: {}, __VLS_32: {}, __VLS_35: {}, __VLS_38: {}, __VLS_41: {}, __VLS_44: {}, __VLS_47: {}, __VLS_50: {};
 type __VLS_Slots = {} & {
     'button-icon'?: (props: typeof __VLS_13) => any;
@@ -57,7 +58,7 @@ declare const __VLS_base: import("vue").DefineComponent<AIPanelWidgetProps, {
     hotkeyLabel: string;
     splitPanelWidth: number;
     currentSessionId: string | null;
-    selectedElements: import("@aipanel/core").AIPanelSelectedElement[];
+    selectedElements: AIPanelSelectedElement[];
     splitMode: import("@aipanel/core").SplitModeOptions;
     hideBubble: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/lib/index.cjs

@@ -26,7 +26,7 @@ module.exports = __toCommonJS(lib_exports);
 var import_AI_panel_widget = require("./AI-panel-widget/index.cjs");
 __reExport(lib_exports, require("./AI-panel-widget/index.cjs"), module.exports);
 __reExport(lib_exports, require("./setup.cjs"), module.exports);
-const version = "1.3.8";
+const version = "1.3.10";
 function install(app, options) {
   const components = [
     import_AI_panel_widget.AIPanelWidget

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 import type { App } from 'vue';
-declare const version = "1.3.8";
+declare const version = "1.3.10";
 declare function install(app: App<any>, options?: any): void;
 export { install, version, };
 export * from './AI-panel-widget';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aipanel/ui",
-  "version": "1.3.8",
+  "version": "1.3.10",
   "description": "Reusable AIPanel widget components built with Pagoda CLI",
   "type": "module",
   "main": "lib/index.cjs",
@@ -30,7 +30,7 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "@aipanel/core": "1.3.8",
+    "@aipanel/core": "1.3.10",
     "css-selector-generator": "^3.9.2"
   },
   "scripts": {