test(api): ✅ 测试流式接口返回

2025-06-02 11:31:50 +08:00
parent 165a4748bb
commit 1d5e519fb4
7 changed files with 473 additions and 134 deletions
@@ -28,6 +28,10 @@ const popoverStyle = ref({
  width: '200px',
  padding: '4px',
  height: 'fit-content',
+  background: 'var(--el-bg-color, #fff)',
+  border: '1px solid var(--el-border-color-light)',
+  borderRadius: '8px',
+  boxShadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
 });
 const popoverRef = ref();

@@ -45,25 +49,25 @@ function handleClick(item: GetSessionListVO) {
 </script>

 <template>
-  <div class="model-switch">
+  <div class="model-select">
    <Popover
      ref="popoverRef"
-      position="top-start"
-      :offset="[-14, 10]"
-      :trigger-style="{ cursor: 'pointer' }"
+      placement="top-start"
+      :offset="[4, 0]"
      popover-class="popover-content"
      :popover-style="popoverStyle"
+      trigger="clickTarget"
      @show="showPopover"
    >
      <!-- 触发元素插槽 -->
      <template #trigger>
        <div
-          class="model-switch-box select-none flex items-center gap-4px p-10px rounded-10px cursor-pointer font-size-12px border-[rgba()]"
+          class="model-select-box select-none flex items-center gap-4px p-10px rounded-10px cursor-pointer font-size-12px border-[rgba()]"
        >
-          <div class="model-switch-box-icon">
+          <div class="model-select-box-icon">
            <SvgIcon name="models" size="12" />
          </div>
-          <div class="model-switch-box-text font-size-12px">
+          <div class="model-select-box-text font-size-12px">
            {{ currentModelName }}
          </div>
        </div>
@@ -73,30 +77,30 @@ function handleClick(item: GetSessionListVO) {
        <div
          v-for="item in popoverList"
          :key="item.id"
-          class="popover-content-box-items flex rounded-8px select-none transition-all transition-duration-300 flex items-center gap-8px p-4px hover:cursor-pointer hover:bg-[rgba(0,0,0,.04)]"
+          class="popover-content-box-items w-full rounded-8px select-none transition-all transition-duration-300 flex items-center hover:cursor-pointer hover:bg-[rgba(0,0,0,.04)]"
        >
-          <el-tooltip
-            popper-class="rounded-tooltip"
-            effect="dark"
+          <Popover
+            trigger-class="popover-trigger-item-text"
+            popover-class="rounded-tooltip"
            placement="right"
            trigger="hover"
-            :offset="10"
-            :show-arrow="false"
-            transition="zoom-fade"
+            :offset="[12, 0]"
          >
-            <template #content>
-              <div class="popover-content-box-item-text text-wrap max-w-200px rounded-lg">
-                {{ item.remark }}
+            <template #trigger>
+              <div
+                class="popover-content-box-item p-4px font-size-12px text-overflow line-height-16px"
+                :class="{ 'bg-[rgba(0,0,0,.04)] is-select': item.modelName === currentModelName }"
+                @click="handleClick(item)"
+              >
+                {{ item.modelName }}
              </div>
            </template>
            <div
-              class="popover-content-box-item font-size-12px text-overflow w-full line-height-16px"
-              :class="{ 'bg-[rgba(0,0,0,.04)] is-select': item.modelName === currentModelName }"
-              @click="handleClick(item)"
+              class="popover-content-box-item-text text-wrap max-w-200px rounded-lg p-8px font-size-12px line-height-tight"
            >
-              {{ item.modelName }}
+              {{ item.remark }}
            </div>
-          </el-tooltip>
+          </Popover>
        </div>
      </div>
    </Popover>
@@ -104,7 +108,7 @@ function handleClick(item: GetSessionListVO) {
 </template>

 <style scoped lang="scss">
-.model-switch-box {
+.model-select-box {
  color: var(--el-color-primary, #409eff);
  border: 1px solid var(--el-color-primary, #409eff);
  border-radius: 10px;
@@ -116,20 +120,35 @@ function handleClick(item: GetSessionListVO) {
 }

 .popover-content-box {
-  // background-color: red;
  height: 200px;
+  gap: 4px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;

+  .popover-content-box-items {
+    :deep() {
+      .popover-trigger-item-text {
+        width: 100%;
+      }
+    }
+  }
+
+  .popover-content-box-item-text {
+    background-color: black;
+    color: white;
+  }
+
  // 滚动条样式
  &::-webkit-scrollbar {
    width: 4px;
  }
+
  &::-webkit-scrollbar-track {
    background: #f5f5f5;
  }
+
  &::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
@@ -1,31 +1,9 @@
-<!-- Popover 弹框 -->
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
-import { flip, offset, shift, useFloating } from '@floating-ui/vue';
+import { arrow, autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue';
+import { onClickOutside } from '@vueuse/core';

-const props = withDefaults(defineProps<PopoverProps>(), {
-  position: 'bottom',
-  offset: () => [8, 8],
-  boundary: 'viewport',
-  closeOnContentClick: false,
-  closeOnTriggerClick: false,
-  triggerStyle: () => ({}),
-  popoverStyle: () => ({}),
-  popoverClass: '',
-});
-const emits = defineEmits<{
-  (e: 'show'): void;
-  (e: 'hide'): void;
-  (e: 'positionChange', pos: PopoverPosition): void;
-}>();
-const reference = ref();
-const floating = ref(null);
-const { floatingStyles } = useFloating(reference, floating, {
-  placement: props.position,
-  middleware: [offset(props.offset[0]), flip(), shift()],
-});
-
-type PopoverPosition =
+export type PopoverPlacement =
  | 'top'
  | 'top-start'
  | 'top-end'
@@ -39,54 +17,189 @@ type PopoverPosition =
  | 'right-start'
  | 'right-end';

-type Offset = [number, number];
-interface PopoverProps {
-  position?: PopoverPosition;
+export type Offset = [number, number];
+
+export interface PopoverProps {
+  placement?: PopoverPlacement;
  offset?: Offset;
-  triggerStyle?: CSSProperties;
  popoverStyle?: CSSProperties;
  popoverClass?: string;
-  boundary?: 'viewport' | HTMLElement;
-  closeOnContentClick?: boolean;
-  closeOnTriggerClick?: boolean;
+  trigger?: 'hover' | 'click' | 'clickTarget';
+  triggerStyle?: CSSProperties;
+  triggerClass?: string;
+  hoverDelay?: number; // 悬停延迟关闭时间（ms）
 }

-const showPoperContent = ref(false);
+const props = withDefaults(defineProps<PopoverProps>(), {
+  placement: 'bottom',
+  offset: () => [0, 0],
+  trigger: 'hover',
+  hoverDelay: 0, // 默认300ms延迟关闭
+});

-function handleTriggerClick() {
-  showPoperContent.value = !showPoperContent.value;
-  if (showPoperContent.value) {
+const emits = defineEmits<{
+  (e: 'show'): void;
+  (e: 'hide'): void;
+}>();
+
+const triggerRef = ref<HTMLElement | null>(null);
+const popoverRef = ref<HTMLElement | null>(null);
+const floatingArrow = ref<HTMLElement | null>(null);
+const showPopover = ref(false);
+let hideTimeout: ReturnType<typeof setTimeout> | null = null;
+// 新增：记录鼠标是否在触发元素或内容区域内
+const isHovering = ref(false);
+
+const { floatingStyles } = useFloating(triggerRef, popoverRef, {
+  placement: props.placement,
+  transform: false,
+  whileElementsMounted: autoUpdate,
+  middleware: [
+    shift(),
+    flip(),
+    arrow({ element: floatingArrow }),
+    offset({
+      mainAxis: props.offset[0],
+      crossAxis: props.offset[1],
+    }),
+  ],
+});
+
+function show() {
+  if (!showPopover.value) {
+    showPopover.value = true;
    emits('show');
  }
-  else {
+  // 显示时强制清除定时器（无论是否在悬停）
+  if (hideTimeout)
+    clearTimeout(hideTimeout);
+  hideTimeout = null;
+}
+
+function hide() {
+  if (showPopover.value) {
+    showPopover.value = false;
    emits('hide');
  }
+  hideTimeout = null;
+}
+
+defineExpose({ show, hide });
+
+watch(showPopover, (newValue) => {
+  if (newValue && props.trigger !== 'hover') {
+    onClickOutside(popoverRef, () => hide(), {
+      ignore: [triggerRef] as any[],
+    });
+  }
+});
+
+// 触发元素鼠标事件调整（同步isHovering状态）
+function handleTriggerMouseEnter() {
+  if (props.trigger === 'hover') {
+    isHovering.value = true; // 进入触发元素
+    show();
+  }
+}
+
+function handleTriggerMouseLeave() {
+  if (props.trigger === 'hover') {
+    isHovering.value = false; // 离开触发元素
+    // 仅当鼠标不在内容区域时，才设置延迟关闭
+    scheduleHideIfNeeded();
+  }
+}
+
+// 内容区域鼠标事件调整（同步isHovering状态）
+function handlePopoverMouseEnter() {
+  if (props.trigger === 'hover') {
+    isHovering.value = true; // 进入内容区域
+    if (hideTimeout)
+      clearTimeout(hideTimeout); // 取消关闭
+  }
+}
+
+function handlePopoverMouseLeave() {
+  if (props.trigger === 'hover') {
+    isHovering.value = false; // 离开内容区域
+    // 仅当鼠标不在触发元素时，才设置延迟关闭
+    scheduleHideIfNeeded();
+  }
+}
+
+// 新增：统一延迟关闭逻辑（仅当完全离开两个区域时触发）
+function scheduleHideIfNeeded() {
+  // 如果鼠标仍在任一区域（isHovering为true），不关闭
+  if (isHovering.value)
+    return;
+
+  // 否则设置延迟关闭
+  hideTimeout = setTimeout(() => {
+    if (!isHovering.value) {
+      // 再次确认是否仍离开
+      hide();
+    }
+  }, props.hoverDelay);
+}
+
+function handleClick() {
+  if (props.trigger === 'click') {
+    showPopover.value ? hide() : show();
+  }
+  else if (props.trigger === 'clickTarget' && !showPopover.value) {
+    show();
+  }
 }
 </script>

 <template>
-  <div>
-    <div ref="reference" :style="props.triggerStyle" @click.stop="handleTriggerClick">
-      <slot name="trigger" />
-    </div>
+  <div
+    ref="triggerRef"
+    class="popover-trigger"
+    :class="[props.triggerClass]"
+    :style="[props.triggerStyle]"
+    @mouseenter="handleTriggerMouseEnter"
+    @mouseleave="handleTriggerMouseLeave"
+    @click="handleClick"
+  >
+    <slot name="trigger" />
+  </div>

+  <Teleport to="body">
    <Transition name="popover-fade">
      <div
-        v-if="showPoperContent"
-        ref="floating"
-        class="popover-content"
-        :style="{
-          ...floatingStyles,
-          ...props.popoverStyle,
-        }"
+        v-if="showPopover"
+        ref="popoverRef"
+        :style="[floatingStyles, props.popoverStyle]"
+        class="popover-content-box"
        :class="[props.popoverClass]"
+        @mouseenter="handlePopoverMouseEnter"
+        @mouseleave="handlePopoverMouseLeave"
      >
-        <slot name="header" />
        <slot />
-        <slot name="footer" />
      </div>
    </Transition>
-  </div>
+  </Teleport>
 </template>

-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.popover-fade-enter-active,
+.popover-fade-leave-active {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+  will-change: transform, opacity;
+}
+
+.popover-fade-enter-from,
+.popover-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.popover-fade-enter-to,
+.popover-fade-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+</style>