diff --git a/src/views/virtual/index.vue b/src/views/virtual/index.vue
index 08aed46..4a8fbb1 100644
--- a/src/views/virtual/index.vue
+++ b/src/views/virtual/index.vue
@@ -43,46 +43,34 @@
draggable="false"
alt="overview"
/>
-
-
-
-
-
-
-
@@ -90,7 +78,6 @@
-
@@ -479,12 +466,15 @@
this.resetView()
},
- // 处理货架点击
- async handleShelfClick(shelf) {
+ // 处理货架点击(使用 Popover 展示)
+ async openShelfPopover(shelf) {
+ // 关闭其他弹层
+ this.shelves.forEach(s => this.$set(s, '_show', false))
this.selectedShelf = shelf
- // await this.fetchMaterialInfo(shelf.id);
await this.fetchMaterialInfo(shelf.id)
- this.showMaterialInfo = true
+ this.$nextTick(() => {
+ this.$set(shelf, '_show', true)
+ })
},
// 处理添加概览图
@@ -532,8 +522,6 @@
leftPx = margin
transform = 'translateX(0)'
}
- // 因为是 position absolute 仍相对预览容器定位
- leftPx = leftPx - containerRect.left
return { left: `${leftPx}px`, transform }
},
calculatePopupLeft(x) {
@@ -542,6 +530,48 @@
calculatePopupTransform(x) {
return this.getPopupMetrics(x).transform
},
+
+ // 固定定位样式,避免被父容器overflow裁切
+ getFixedPopupStyle(shelf) {
+ if (!shelf) return {}
+ const container = this.$el.querySelector('.preview-image')
+ const rect = container ? container.getBoundingClientRect() : {left: 0, top: 0, width: window.innerWidth, height: window.innerHeight}
+ const margin = 10
+ const popupWidth = Math.min(560, window.innerWidth * 0.8)
+ const popupHeight = 300
+ const xPercent = parseFloat(shelf.area_x)
+ const yPercent = parseFloat(shelf.area_y)
+ const anchorX = rect.left + (xPercent / 100) * rect.width
+ const anchorY = rect.top + (yPercent / 100) * rect.height
+
+ // 计算X(同getPopupMetrics逻辑)
+ let leftPx = anchorX
+ let transformX = 'translateX(-50%)'
+ if (anchorX + popupWidth / 2 > window.innerWidth - margin) {
+ leftPx = window.innerWidth - margin
+ transformX = 'translateX(-100%)'
+ } else if (anchorX - popupWidth / 2 < margin) {
+ leftPx = margin
+ transformX = 'translateX(0)'
+ }
+
+ // 计算Y:下方不够则显示在上方
+ let topPx = anchorY + 20
+ let transformY = ''
+ if (anchorY + 20 + popupHeight > window.innerHeight - margin) {
+ topPx = anchorY - (popupHeight + 20)
+ }
+ if (topPx < margin) topPx = margin
+
+ return {
+ position: 'fixed',
+ left: `${leftPx}px`,
+ top: `${topPx}px`,
+ transform: `${transformX} ${transformY}`.trim(),
+ maxWidth: '80vw',
+ zIndex: 10000
+ }
+ },
// 可选:添加窗口调整处理
handleResize() {