Merge pull request #904 from james-6-23/fix-pool-mode-retry

fix: OpenAI临时性400错误支持池模式同账号重试 & HelpTooltip层级修复

frontend/src/components/common/HelpTooltip.vue

@@ -1,18 +1,40 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, useTemplateRef, nextTick } from 'vue'
 
 defineProps<{
   content?: string
 }>()
 
 const show = ref(false)
+const triggerRef = useTemplateRef<HTMLElement>('trigger')
+const tooltipStyle = ref({ top: '0px', left: '0px' })
+
+function onEnter() {
+  show.value = true
+  nextTick(updatePosition)
+}
+
+function onLeave() {
+  show.value = false
+}
+
+function updatePosition() {
+  const el = triggerRef.value
+  if (!el) return
+  const rect = el.getBoundingClientRect()
+  tooltipStyle.value = {
+    top: `${rect.top + window.scrollY}px`,
+    left: `${rect.left + rect.width / 2 + window.scrollX}px`,
+  }
+}
 </script>
 
 <template>
   <div
+    ref="trigger"
     class="group relative ml-1 inline-flex items-center align-middle"
-    @mouseenter="show = true"
-    @mouseleave="show = false"
+    @mouseenter="onEnter"
+    @mouseleave="onLeave"
   >
     <!-- Trigger Icon -->
     <slot name="trigger">
@@ -31,14 +53,16 @@ const show = ref(false)
       </svg>
     </slot>
 
-    <!-- Popover Content -->
-    <div
-      v-show="show"
-      class="absolute bottom-full left-1/2 z-50 mb-2 w-64 -translate-x-1/2 rounded-lg bg-gray-900 p-3 text-xs leading-relaxed text-white shadow-xl ring-1 ring-white/10 opacity-0 transition-opacity duration-200 group-hover:opacity-100 dark:bg-gray-800"
-    >
-      <slot>{{ content }}</slot>
-      <div class="absolute -bottom-1 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 bg-gray-900 dark:bg-gray-800"></div>
-    </div>
+    <!-- Teleport to body to escape modal overflow clipping -->
+    <Teleport to="body">
+      <div
+        v-show="show"
+        class="fixed z-[99999] w-64 -translate-x-1/2 -translate-y-full rounded-lg bg-gray-900 p-3 text-xs leading-relaxed text-white shadow-xl ring-1 ring-white/10 dark:bg-gray-800"
+        :style="{ top: `calc(${tooltipStyle.top} - 8px)`, left: tooltipStyle.left }"
+      >
+        <slot>{{ content }}</slot>
+        <div class="absolute -bottom-1 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 bg-gray-900 dark:bg-gray-800"></div>
+      </div>
+    </Teleport>
   </div>
 </template>
-