vue2-client 1.22.32 → 1.22.33

package/src/base-client/components/his/XImageReport/ImagePreview.vue

@@ -6,99 +6,247 @@
       @click.self="closePreview"
       ref="previewContainer"
     >
+      <!-- 顶部栏 -->
+      <div class="top-bar">
+        <div class="top-left"></div>
+        <div class="top-center">
+          <!-- 影像胶片按钮 -->
+          <a-button
+            type="primary"
+            :style="{
+    backgroundColor: !compareMode ? '#0057FE' : 'transparent',
+    color: !compareMode ? 'white' : '#aaa',
+    borderBottomRightRadius: '0',
+          borderBottomLeftRadius: '0',
+    border: '0'
 
-      <a-row>
-        <a-col :span="4">
-        </a-col>
-        <a-col :span="16" class="preview-toolbar" style="padding-bottom: 0px; border-bottom: solid #0057FE;">
-          <a-button type="primary" style="background-color: #0057FE; color:white ;">影像胶片</a-button>
-        </a-col>
-        <a-col :span="4">
-          <!-- 顶部功能区 -->
-          <div class="preview-toolbar">
-            <button @click="zoomIn" title="放大">+</button>
-            <button @click="zoomOut" title="缩小">-</button>
-            <button @click="rotateLeft" title="左旋转">↺</button>
-            <button @click="rotateRight" title="右旋转">↻</button>
-            <button @click="resetTransform" title="重置">↻</button>
-            <button @click="closePreview" title="关闭" class="close-btn">×</button>
+  }"
+            @click="switchToFilm"
+          >
+            影像胶片
+          </a-button>
+
+          <!-- 影像对比按钮（仅当有对比数据时显示） -->
+          <a-button
+            v-if="hasCompare"
+            type="primary"
+            :style="{
+    backgroundColor: compareMode ? '#0057FE' : 'transparent',
+    color: compareMode ? 'white' : '#aaa',
+    borderBottomRightRadius: '0',
+          borderBottomLeftRadius: '0',
+    border: '0'
+  }"
+            @click="switchToCompare"
+          >
+            影像对比
+          </a-button>
+        </div>
+        <div class="top-right">
+          <!-- 功能按钮：对比模式下隐藏但保留占位 -->
+          <button
+            v-for="(btn, idx) in funcButtons"
+            :key="idx"
+            :style="{ visibility: compareMode ? 'hidden' : 'visible', pointerEvents: compareMode ? 'none' : 'auto' }"
+            @click="btn.handler"
+            :title="btn.title"
+          >{{ btn.label }}</button>
+          <!-- 关闭按钮 -->
+          <button @click="closePreview" title="关闭" class="close-btn">×</button>
+        </div>
+      </div>
+
+      <!-- 对比模式下的左右操作栏 -->
+      <div v-if="compareMode" class="compare-toolbar">
+        <div class="compare-panel">
+          <div class="compare-panel-title">当前胶片</div>
+          <a-date-picker
+            show-time
+            size="small"
+            class="compare-date-picker"
+            :value="leftDate"
+            disabled
+          >
+            <template #renderExtraFooter>extra footer</template>
+          </a-date-picker>
+          <span v-if="getFilmTime('left')" class="film-time">{{ getFilmTime('left') }}</span>
+          <button class="pacs-btn" @click="handlePacsSync('left')">PACS同步查看胶片</button>
+          <div class="toolbar-group left-toolbar">
+            <button @click="zoomIn('left')" title="放大">+</button>
+            <button @click="zoomOut('left')" title="缩小">-</button>
+            <button @click="rotateLeft('left')" title="左旋转">↺</button>
+            <button @click="rotateRight('left')" title="右旋转">↻</button>
+            <button @click="resetTransform('left')" title="重置">↻</button>
+          </div>
+        </div>
+        <div class="compare-panel">
+          <div class="compare-panel-title">历史胶片</div>
+          <a-date-picker
+            show-time
+            size="small"
+            class="compare-date-picker"
+            :value="rightDate"
+            disabled
+          >
+            <template #renderExtraFooter>extra footer</template>
+          </a-date-picker>
+          <span v-if="getFilmTime('right')" class="film-time">{{ getFilmTime('right') }}</span>
+          <button class="pacs-btn" @click="handlePacsSync('right')">PACS同步查看胶片</button>
+          <div class="toolbar-group right-toolbar">
+            <button @click="zoomIn('right')" title="放大">+</button>
+            <button @click="zoomOut('right')" title="缩小">-</button>
+            <button @click="rotateLeft('right')" title="左旋转">↺</button>
+            <button @click="rotateRight('right')" title="右旋转">↻</button>
+            <button @click="resetTransform('right')" title="重置">↻</button>
           </div>
-        </a-col>
-      </a-row>
-      <!-- 主图片区域 -->
-      <div
-        class="preview-content"
-        @mousedown="startDrag"
-        @mousemove="onDrag"
-        @mouseup="stopDrag"
-        @touchstart="handleTouchStart"
-        @touchmove="handleTouchMove"
-        @touchend="stopDrag"
-      >
+        </div>
+      </div>
+
+      <!-- 主内容区域 -->
+      <!-- 非对比模式 -->
+      <div v-if="!compareMode" class="preview-content single-mode" ref="previewContent">
         <div v-if="isLoading" class="loading-indicator">加载中...</div>
         <img
-          :src="currentImage"
-          :style="imageStyle"
+          :src="currentLeftImage"
+          :style="getImageStyle('left')"
           class="preview-image"
-          @wheel.prevent="handleWheel"
+          @wheel.prevent="handleWheel($event, 'left')"
+          @mousedown="startDrag($event, 'left')"
+          @mousemove="onDrag($event, 'left')"
+          @mouseup="stopDrag('left')"
+          @touchstart="handleTouchStart($event, 'left')"
+          @touchmove="handleTouchMove($event, 'left')"
+          @touchend="stopDrag('left')"
           @load="isLoading = false"
           @error="handleImageError"
         />
+        <div class="thumbnail-navigation single-thumb">
+          <div
+            v-for="(item, index) in imgList"
+            :key="index"
+            :class="['thumbnail-nav-item', { active: leftIndex === index }]"
+            @click="switchLeftImage(index)"
+          >
+            <img :src="getImageUrl(item)" class="thumbnail-nav-image" alt="缩略图" />
+          </div>
+        </div>
+        <div class="thumbnail-description">
+          <p>当前查看第<span class="thumbnail-description-span">{{ leftIndex + 1 }}</span>张胶片，共<span class="thumbnail-description-span">{{ imgList.length }}</span>张胶片</p>
+        </div>
       </div>
 
-      <!-- 底部缩略图导航 -->
-      <div class="thumbnail-navigation">
-        <div
-          v-for="(img, index) in imgList"
-          :key="index"
-          :class="['thumbnail-nav-item', { active: currentIndex === index }]"
-          @click="switchImage(index)"
-        >
-          <img :src="img" class="thumbnail-nav-image" alt="缩略图" v-lazy="img" />
+      <!-- 对比模式 -->
+      <div v-else class="compare-wrapper">
+        <div class="compare-side left-side" ref="compareLeft">
+          <div class="compare-image-wrapper">
+            <img
+              :src="currentLeftImage"
+              :style="getImageStyle('left')"
+              class="preview-image compare-image"
+              @wheel.prevent="handleWheel($event, 'left')"
+              @mousedown="startDrag($event, 'left')"
+              @mousemove="onDrag($event, 'left')"
+              @mouseup="stopDrag('left')"
+              @touchstart="handleTouchStart($event, 'left')"
+              @touchmove="handleTouchMove($event, 'left')"
+              @touchend="stopDrag('left')"
+              @load="isLoading = false"
+              @error="handleImageError"
+            />
+          </div>
+          <div class="thumbnail-navigation side-thumb">
+            <div
+              v-for="(item, index) in imgList"
+              :key="'l' + index"
+              :class="['thumbnail-nav-item', { active: leftIndex === index }]"
+              @click="switchLeftImage(index)"
+            >
+              <img :src="getImageUrl(item)" class="thumbnail-nav-image" alt="缩略图" />
+            </div>
+          </div>
+          <div class="side-description">
+            当前查看第 <span class="thumbnail-description-span">{{ leftIndex + 1 }}</span> 张胶片，共 {{ imgList.length }} 张胶片
+          </div>
+        </div>
+
+        <div class="compare-side right-side" ref="compareRight">
+          <div class="compare-image-wrapper">
+            <img
+              :src="currentRightImage"
+              :style="getImageStyle('right')"
+              class="preview-image compare-image"
+              @wheel.prevent="handleWheel($event, 'right')"
+              @mousedown="startDrag($event, 'right')"
+              @mousemove="onDrag($event, 'right')"
+              @mouseup="stopDrag('right')"
+              @touchstart="handleTouchStart($event, 'right')"
+              @touchmove="handleTouchMove($event, 'right')"
+              @touchend="stopDrag('right')"
+              @load="isLoading = false"
+              @error="handleImageError"
+            />
+          </div>
+          <div class="thumbnail-navigation side-thumb">
+            <div
+              v-for="(item, index) in compareList"
+              :key="'r' + index"
+              :class="['thumbnail-nav-item', { active: rightIndex === index }]"
+              @click="switchRightImage(index)"
+            >
+              <img :src="getImageUrl(item)" class="thumbnail-nav-image" alt="缩略图" />
+            </div>
+          </div>
+          <div class="side-description">
+            当前查看第 <span class="thumbnail-description-span">{{ rightIndex + 1 }}</span> 张胶片，共 {{ compareList.length }} 张胶片
+          </div>
         </div>
-      </div>
-      <div class="thumbnail-description">
-        <p>当前查看第<span class="thumbnail-description-sapn">{{ currentIndex + 1 }}</span>张胶片，共<span class="thumbnail-description-sapn">{{ imgList.length }}</span>张胶片</p>
       </div>
     </div>
   </transition>
 </template>
 
 <script>
-
 export default {
   name: 'ImagePreview',
   props: {
     visible: { type: Boolean, default: false },
     imgList: { type: Array, default: () => [] },
+    compareList: { type: Array, default: () => [] },
     initialIndex: { type: Number, default: 0 }
   },
   data () {
     return {
-      currentIndex: this.initialIndex,
-      scale: 1,
-      rotate: 0,
-      position: { x: 0, y: 0 },
-      isDragging: false,
-      startDragPosition: { x: 0, y: 0 },
-      touchStartX: 0,
-      touchStartY: 0,
-      initialDistance: null,
+      leftIndex: this.initialIndex,
+      rightIndex: this.initialIndex,
+      leftState: { scale: 1, rotate: 0, pos: { x: 0, y: 0 } },
+      rightState: { scale: 1, rotate: 0, pos: { x: 0, y: 0 } },
+      leftDrag: { isDragging: false, startPos: { x: 0, y: 0 }, maxX: 0, maxY: 0 },
+      rightDrag: { isDragging: false, startPos: { x: 0, y: 0 }, maxX: 0, maxY: 0 },
+      touchData: { left: { initialDist: null }, right: { initialDist: null } },
       isLoading: true,
-      maxDragX: 0,
-      maxDragY: 0
+      compareMode: false,
+      leftDate: null,
+      rightDate: null
     }
   },
   computed: {
-    currentImage () {
-      return this.imgList[this.currentIndex] || ''
+    hasCompare () {
+      return this.compareList && this.compareList.length > 0
     },
-    imageStyle () {
-      return {
-        transform: `scale(${this.scale}) rotate(${this.rotate}deg) translate(${this.position.x}px, ${this.position.y}px)`,
-        transition: this.isDragging ? 'none' : 'transform 0.3s ease',
-        cursor: this.isDragging ? 'grabbing' : 'grab'
-      }
+    currentLeftImage () {
+      return this.getImageUrl(this.imgList[this.leftIndex] || '')
+    },
+    currentRightImage () {
+      return this.getImageUrl(this.compareList[this.rightIndex] || '')
+    },
+    funcButtons () {
+      return [
+        { label: '+', title: '放大', handler: () => this.zoomIn('left') },
+        { label: '-', title: '缩小', handler: () => this.zoomOut('left') },
+        { label: '↺', title: '左旋转', handler: () => this.rotateLeft('left') },
+        { label: '↻', title: '右旋转', handler: () => this.rotateRight('left') },
+        { label: '↻', title: '重置', handler: () => this.resetTransform('left') }
+      ]
     }
   },
   watch: {
@@ -106,159 +254,258 @@ export default {
       if (newVal) {
         document.body.style.overflow = 'hidden'
         document.addEventListener('keydown', this.handleKeyDown)
-        // 计算最大拖拽边界
-        this.$nextTick(() => {
-          const container = this.$refs.previewContainer
-          if (container) {
-            this.maxDragX = (container.clientWidth * this.scale - container.clientWidth) / 2
-            this.maxDragY = (container.clientHeight * this.scale - container.clientHeight) / 2
-          }
-        })
+        this.$nextTick(() => this.updateAllMaxDrag())
       } else {
         document.body.style.overflow = ''
         document.removeEventListener('keydown', this.handleKeyDown)
       }
     },
-    scale (newScale) {
-      // 缩放时更新拖拽边界
-      this.$nextTick(() => {
-        const container = this.$refs.previewContainer
-        if (container) {
-          this.maxDragX = (container.clientWidth * newScale - container.clientWidth) / 2
-          this.maxDragY = (container.clientHeight * newScale - container.clientHeight) / 2
-          // 确保图片位置在边界内
-          this.position.x = Math.max(-this.maxDragX, Math.min(this.maxDragX, this.position.x))
-          this.position.y = Math.max(-this.maxDragY, Math.min(this.maxDragY, this.position.y))
-        }
-      })
+    compareMode () {
+      this.$nextTick(() => this.updateAllMaxDrag())
     }
   },
   methods: {
-    // 变换控制
-    zoomIn () {
-      this.scale = Math.min(5, this.scale + 0.2)
+    // ---------- 模式切换（新增） ----------
+    switchToFilm () {
+      if (!this.compareMode) return // 已经是胶片模式，不操作
+      this.compareMode = false
+      this.resetTransform('left')
+      this.resetTransform('right')
+      // 如有需要可重置右侧索引，但保持原样
+      this.$nextTick(() => this.updateAllMaxDrag())
+    },
+    switchToCompare () {
+      if (this.compareMode) return // 已经是对比模式，不操作
+      this.compareMode = true
+      this.resetTransform('left')
+      this.resetTransform('right')
+      this.leftDate = this.getUploadDate('left')
+      this.rightDate = this.getUploadDate('right')
+      if (this.rightIndex >= this.compareList.length) {
+        this.rightIndex = 0
+      }
+      this.$nextTick(() => this.updateAllMaxDrag())
+    },
+    // ---------- 原有方法 ----------
+    getImageUrl (item) {
+      if (!item) return ''
+      if (typeof item === 'string') return item
+      if (typeof item === 'object' && item.url) return item.url
+      return ''
+    },
+    getState (side) {
+      return side === 'left' ? this.leftState : this.rightState
+    },
+    getDragState (side) {
+      return side === 'left' ? this.leftDrag : this.rightDrag
     },
-    zoomOut () {
-      this.scale = Math.max(0.2, this.scale - 0.2)
+    getTouchData (side) {
+      return this.touchData[side]
     },
-    rotateLeft () {
-      this.rotate -= 90
+    getImageStyle (side) {
+      const state = this.getState(side)
+      const drag = this.getDragState(side)
+      return {
+        transform: `scale(${state.scale}) rotate(${state.rotate}deg) translate(${state.pos.x}px, ${state.pos.y}px)`,
+        transition: drag.isDragging ? 'none' : 'transform 0.3s ease',
+        cursor: drag.isDragging ? 'grabbing' : 'grab'
+      }
     },
-    rotateRight () {
-      this.rotate += 90
+
+    applyZoom (side, delta) {
+      const state = this.getState(side)
+      const prevScale = state.scale
+      const newScale = Math.max(0.2, Math.min(5, prevScale + delta))
+      if (newScale === prevScale) return
+      const ratio = newScale / prevScale
+      state.pos.x *= ratio
+      state.pos.y *= ratio
+      state.scale = newScale
+      this.$nextTick(() => this.updateMaxDrag(side))
     },
-    resetTransform () {
-      this.scale = 1
-      this.rotate = 0
-      this.position = { x: 0, y: 0 }
+    zoomIn (side) { this.applyZoom(side, 0.2) },
+    zoomOut (side) { this.applyZoom(side, -0.2) },
+
+    rotateSide (side, deg) {
+      this.getState(side).rotate += deg
     },
+    rotateLeft (side) { this.rotateSide(side, -90) },
+    rotateRight (side) { this.rotateSide(side, 90) },
 
-    // 图片导航
-    switchImage (index) {
-      this.currentIndex = index
-      this.resetTransform()
-      this.isLoading = true // 切换图片时显示加载状态
+    resetTransform (side) {
+      const state = this.getState(side)
+      state.scale = 1
+      state.rotate = 0
+      state.pos = { x: 0, y: 0 }
+      this.$nextTick(() => this.updateMaxDrag(side))
     },
-    prevImage () {
-      this.currentIndex = (this.currentIndex - 1 + this.imgList.length) % this.imgList.length
-      this.resetTransform()
+
+    switchLeftImage (index) {
+      this.leftIndex = index
+      this.resetTransform('left')
+      this.leftDate = this.getUploadDate('left')
+      this.isLoading = true
     },
-    nextImage () {
-      this.currentIndex = (this.currentIndex + 1) % this.imgList.length
-      this.resetTransform()
+    switchRightImage (index) {
+      this.rightIndex = index
+      this.resetTransform('right')
+      this.rightDate = this.getUploadDate('right')
+      this.isLoading = true
     },
 
-    // 拖拽控制
-    startDrag (e) {
-      this.isDragging = true
+    startDrag (e, side) {
+      const drag = this.getDragState(side)
+      drag.isDragging = true
       const clientX = e.clientX || e.touches?.[0]?.clientX
       const clientY = e.clientY || e.touches?.[0]?.clientY
-      this.startDragPosition = {
-        x: clientX - this.position.x,
-        y: clientY - this.position.y
+      const state = this.getState(side)
+      drag.startPos = {
+        x: clientX - state.pos.x,
+        y: clientY - state.pos.y
       }
     },
-    onDrag (e) {
-      if (!this.isDragging || e.touches?.length > 1) return
+    onDrag (e, side) {
+      const drag = this.getDragState(side)
+      if (!drag.isDragging || e.touches?.length > 1) return
       const clientX = e.clientX || e.touches?.[0]?.clientX
       const clientY = e.clientY || e.touches?.[0]?.clientY
       if (clientX === undefined || clientY === undefined) return
-      const newX = clientX - this.startDragPosition.x
-      const newY = clientY - this.startDragPosition.y
-      // 限制拖拽边界
-      this.position = {
-        x: Math.max(-this.maxDragX, Math.min(this.maxDragX, newX)),
-        y: Math.max(-this.maxDragY, Math.min(this.maxDragY, newY))
+      const state = this.getState(side)
+      const newX = clientX - drag.startPos.x
+      const newY = clientY - drag.startPos.y
+      state.pos = {
+        x: Math.max(-drag.maxX, Math.min(drag.maxX, newX)),
+        y: Math.max(-drag.maxY, Math.min(drag.maxY, newY))
       }
     },
-    stopDrag () {
-      this.isDragging = false
-      this.initialDistance = null // 重置双指距离
+    stopDrag (side) {
+      this.getDragState(side).isDragging = false
+      this.getTouchData(side).initialDist = null
     },
 
-    // 触摸支持
-    handleTouchStart (e) {
+    handleTouchStart (e, side) {
       if (e.touches.length === 1) {
-        this.touchStartX = e.touches[0].clientX
-        this.touchStartY = e.touches[0].clientY
-        this.startDrag(e)
+        this.startDrag(e, side)
       } else if (e.touches.length === 2) {
-        // 双指触摸开始，记录初始距离
-        this.initialDistance = Math.hypot(
+        const touch = this.getTouchData(side)
+        touch.initialDist = Math.hypot(
           e.touches[1].clientX - e.touches[0].clientX,
           e.touches[1].clientY - e.touches[0].clientY
         )
       }
     },
-    handleTouchMove (e) {
+    handleTouchMove (e, side) {
       if (e.touches.length === 1) {
-        // 单指拖动
-        this.onDrag(e)
-      } else if (e.touches.length === 2 && this.initialDistance) {
-        // 双指缩放
+        this.onDrag(e, side)
+      } else if (e.touches.length === 2) {
+        const touch = this.getTouchData(side)
+        if (!touch.initialDist) return
         e.preventDefault()
-        const currentDistance = Math.hypot(
+        const currentDist = Math.hypot(
           e.touches[1].clientX - e.touches[0].clientX,
           e.touches[1].clientY - e.touches[0].clientY
         )
-        const scaleFactor = currentDistance / this.initialDistance
-        this.scale = Math.max(0.2, Math.min(5, this.scale * scaleFactor))
-        this.initialDistance = currentDistance // 更新距离基准
+        const scaleFactor = currentDist / touch.initialDist
+        const state = this.getState(side)
+        const newScale = Math.max(0.2, Math.min(5, state.scale * scaleFactor))
+        const ratio = newScale / state.scale
+        state.pos.x *= ratio
+        state.pos.y *= ratio
+        state.scale = newScale
+        touch.initialDist = currentDist
+        this.$nextTick(() => this.updateMaxDrag(side))
+      }
+    },
+
+    handleWheel (e, side) {
+      e.preventDefault()
+      const delta = e.deltaY > 0 ? -0.1 : 0.1
+      this.applyZoom(side, delta)
+    },
+
+    updateMaxDrag (side) {
+      const container = this.$refs.previewContainer
+      if (!container) return
+      const state = this.getState(side)
+      const drag = this.getDragState(side)
+      let el = null
+      if (this.compareMode) {
+        el = side === 'left' ? this.$refs.compareLeft : this.$refs.compareRight
+      } else {
+        el = this.$refs.previewContent
       }
+      if (!el) el = container
+      const rect = el.getBoundingClientRect()
+      const w = rect.width
+      const h = rect.height
+      drag.maxX = Math.max(0, (w * state.scale - w) / 2)
+      drag.maxY = Math.max(0, (h * state.scale - h) / 2)
+      state.pos.x = Math.max(-drag.maxX, Math.min(drag.maxX, state.pos.x))
+      state.pos.y = Math.max(-drag.maxY, Math.min(drag.maxY, state.pos.y))
+    },
+    updateAllMaxDrag () {
+      this.updateMaxDrag('left')
+      this.updateMaxDrag('right')
     },
 
-    // 键盘支持
     handleKeyDown (e) {
       switch (e.key) {
         case 'Escape': this.closePreview(); break
         case 'ArrowLeft':
-          e.shiftKey ? this.rotateLeft() : this.prevImage()
+          if (this.compareMode) {
+            e.shiftKey ? this.rotateLeft('left') : this.switchLeftImage(Math.max(0, this.leftIndex - 1))
+          } else {
+            e.shiftKey ? this.rotateLeft('left') : this.switchLeftImage(Math.max(0, this.leftIndex - 1))
+          }
           break
         case 'ArrowRight':
-          e.shiftKey ? this.rotateRight() : this.nextImage()
+          if (this.compareMode) {
+            e.shiftKey ? this.rotateRight('left') : this.switchLeftImage(Math.min(this.imgList.length - 1, this.leftIndex + 1))
+          } else {
+            e.shiftKey ? this.rotateRight('left') : this.switchLeftImage(Math.min(this.imgList.length - 1, this.leftIndex + 1))
+          }
           break
-        case '+': this.zoomIn(); break
-        case '-': this.zoomOut(); break
-        case 'r': this.resetTransform(); break
+        case '+': this.zoomIn('left'); break
+        case '-': this.zoomOut('left'); break
+        case 'r': this.resetTransform('left'); break
       }
     },
 
-    // 滚轮缩放
-    handleWheel (e) {
-      e.preventDefault()
-      const delta = e.deltaY > 0 ? -0.1 : 0.1
-      this.scale = Math.max(0.2, Math.min(5, this.scale + delta))
-    },
-
-    // 图片加载失败处理
     handleImageError () {
-      console.error('图片加载失败:', this.currentImage)
+      console.error('图片加载失败')
       this.isLoading = false
     },
 
-    // 关闭预览
     closePreview () {
       this.$emit('close')
+    },
+    getFilmTime (side) {
+      const list = side === 'left' ? this.imgList : this.compareList
+      const index = side === 'left' ? this.leftIndex : this.rightIndex
+      const item = list[index]
+      if (!item || typeof item !== 'object') return ''
+      return item.filmTime || item.imageTime || item.createTime || ''
+    },
+    getUploadDate (side) {
+      const list = side === 'left' ? this.imgList : this.compareList
+      const index = side === 'left' ? this.leftIndex : this.rightIndex
+      const item = list[index]
+      if (!item || typeof item !== 'object') return null
+      return item.f_upload_date || null
+    },
+    handlePacsSync (side) {
+      const eventName = 'pacs-sync-view'
+      if (this.$listeners[eventName]) {
+        let image = {}
+        if(side === 'left') {
+          image = this.imgList[this.leftIndex]
+        } else {
+          image = this.compareList[this.rightIndex]
+        }
+        this.$emit(eventName, { side, image })
+      } else {
+        this.$message?.warn?.(`未实现事件函数 [${eventName}]`)
+      }
     }
   },
   beforeUnmount () {
@@ -268,6 +515,7 @@ export default {
 </script>
 
 <style scoped>
+/* 样式未变，保持原样 */
 /* 过渡动画 */
 .fade-enter-active, .fade-leave-active {
   transition: opacity 0.3s;
@@ -290,78 +538,264 @@ export default {
   touch-action: none; /* 禁用浏览器默认触摸行为 */
 }
 
-/* 顶部工具栏 */
-.preview-toolbar {
-  padding: 15px;
+/* 顶部栏 */
+.top-bar {
   display: flex;
+  align-items: center;
+  padding: 10px 16px;
+  padding-bottom:0px ;
+  background: rgba(0,0,0,0.4);
+  flex-shrink: 0;
+}
+.top-left {
+  width: 15%;
+}
+.top-center {
+  flex: 1;
+  display: flex;
+  margin-left: 20px;
+  margin-right: 20px;
+  border-bottom: 2px solid #0057FE;
   justify-content: center;
-  gap: 4px;
-  z-index: 1001;
-  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+.top-center .ant-btn {
+  font-weight: 500;
+}
+.top-right {
+  width: 15%;
+  justify-content: right;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
 }
-.preview-toolbar button {
-  padding: 2px 10px;
-  min-width: 24px;
-  min-height: 24px;
-  margin: 0px;
-  background: #E5E9F0;
+.top-right button {
+  background: white;
   color: #5D5C5C;
   border: none;
   border-radius: 4px;
   cursor: pointer;
-  font-size: 18px;
+  font-size: 14px;
+  min-width: 25px;
+  height: 25px;
   transition: background 0.3s;
 }
-.preview-toolbar button:hover {
+.top-right button:hover {
   color: #3362DA;
 }
-.close-btn {
+.top-right .close-btn {
   color: #94979E !important;
+  font-size: 24px;
+  padding: 0 6px;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: black;
+}
+.top-right .close-btn:hover {
+  color: #fff !important;
+}
+
+/* 对比模式操作栏 */
+.compare-toolbar {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: stretch;
+  padding: 8px 16px;
+  background: rgba(0,0,0,0.3);
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  flex-shrink: 0;
+  gap: 12px;
+}
+.compare-toolbar > div {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
+.toolbar-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  justify-content: flex-end;
+  margin-right: 0;
+}
+.film-time {
+  color: #9E9E9E;
+  font-size: 12px;
+  margin-left: 8px;
+}
+.toolbar-group button {
+  background: white;
+  color: #5D5C5C;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  min-width: 25px;
+  height: 25px;
+  transition: background 0.3s;
+  box-sizing: border-box;
+  line-height: 1;
+}
+.toolbar-group button:hover {
+  color: #3362DA;
 }
 
-/* 主图片区域 */
-.preview-content {
+.compare-panel {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  min-height: 0;
+  width: 100%;
+  flex-wrap: nowrap;
+}
+.compare-panel-title {
+  font-weight: 500;
+  color: #ddd;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  max-width: 120px;
+  flex-shrink: 0;
+}
+.compare-panel .film-time {
+  flex-shrink: 0;
+}
+.compare-panel .toolbar-group {
+  margin-left: auto;
+}
+.compare-panel .compare-date-picker {
+  flex-shrink: 0;
+}
+.compare-panel .compare-date-picker .ant-input {
+  background: rgba(255, 255, 255, 0.08);
+  color: #ddd;
+  cursor: default;
+}
+.pacs-btn {
+  background: white;
+  color: #5D5C5C;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  line-height: 22px;
+  white-space: nowrap;
+}
+.pacs-btn:hover {
+  color: #3362DA;
+}
+
+/* 非对比模式 */
+.preview-content.single-mode {
   flex: 1;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   position: relative;
 }
-.preview-image {
+.single-mode .preview-image {
   max-width: 95%;
-  max-height: 80vh;
+  max-height: 65vh;
   object-fit: contain;
   transform-origin: center center;
-  will-change: transform; /* 优化动画性能 */
+  will-change: transform;
+  user-select: none;
 }
-.loading-indicator {
-  position: absolute;
-  color: white;
-  font-size: 1.2rem;
-  z-index: 10;
+.single-mode .thumbnail-navigation.single-thumb {
+  padding: 12px 0 6px 0;
+  display: flex;
+  justify-content: center;
+  overflow-x: auto;
+  gap: 10px;
+  width: 100%;
+  flex-wrap: nowrap;
+}
+.single-mode .thumbnail-description {
+  color: #9E9E9E;
+  text-align: center;
+  padding: 2px 0 10px 0;
+  font-size: 14px;
+  margin: 0;
+}
+
+/* 对比模式 */
+.compare-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  min-height: 0;
+  padding-bottom: 20px;
+}
+.compare-side {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+  position: relative;
+}
+.left-side {
+  border-right: 1px solid rgba(255,255,255,0.12);
+}
+.compare-image-wrapper {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+  min-height: 0;
 }
 
-/* 底部缩略图导航 */
-.thumbnail-navigation {
+.compare-image-wrapper .preview-image.compare-image {
+  max-width: 92%;
+  max-height: 60vh;
+  object-fit: contain;
+  transform-origin: center center;
+  will-change: transform;
+  user-select: none;
+}
+
+.thumbnail-navigation.side-thumb {
   display: flex;
   justify-content: center;
-  padding: 15px 0;
   overflow-x: auto;
-  gap: 10px;
+  gap: 8px;
+  padding: 8px 10px 4px 10px;
+  margin-right: 40px;
+  margin-left: 40px;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  background: rgba(0,0,0,0.2);
+  min-height: 70px;
+  align-items: center;
 }
+
 .thumbnail-nav-item {
-  width: 60px;
-  height: 60px;
+  width: 50px;
+  height: 50px;
   border: 2px solid transparent;
   border-radius: 4px;
   overflow: hidden;
   cursor: pointer;
-  opacity: 0.6;
+  opacity: 0.5;
   transition: all 0.3s;
   flex-shrink: 0;
 }
-.thumbnail-nav-item:hover, .thumbnail-nav-item.active {
+.thumbnail-nav-item:hover,
+.thumbnail-nav-item.active {
   opacity: 1;
   border-color: #1890ff;
 }
@@ -370,24 +804,90 @@ export default {
   height: 100%;
   object-fit: cover;
 }
-/* 底部描述 */
-.thumbnail-description {
+
+.side-description {
   color: #9E9E9E;
-  margin: auto;
+  text-align: center;
+  font-size: 13px;
+  padding: 2px 0 8px 0;
+  flex-shrink: 0;
+  background: rgba(0,0,0,0.15);
 }
-.thumbnail-description-sapn {
+.thumbnail-description-span {
   color: #3362DA;
+  font-weight: bold;
+}
+
+.loading-indicator {
+  position: absolute;
+  color: white;
+  font-size: 1.2rem;
+  z-index: 10;
 }
 
-/* 移动端优化 */
 @media (max-width: 768px) {
-  .preview-toolbar {
-    padding: 10px;
-    gap: 8px;
+  .top-bar {
+    padding: 6px 10px;
+    flex-wrap: wrap;
+  }
+  .top-left {
+    flex: 0 0 10%;
+  }
+  .top-center {
+    gap: 6px;
+    font-size: 14px;
   }
-  .preview-toolbar button {
-    padding: 10px 16px;
+  .top-center .ant-btn {
+    font-size: 14px;
+    padding: 0 12px;
+    height: 30px;
+  }
+  .top-right button {
     font-size: 16px;
+    padding: 2px 6px;
+    min-width: 26px;
+    height: 26px;
+  }
+  .top-right .close-btn {
+    font-size: 20px;
+  }
+  .compare-toolbar {
+    padding: 4px 8px;
+    gap: 6px;
+  }
+  .toolbar-group button {
+    font-size: 14px;
+    padding: 2px 6px;
+    min-width: 24px;
+    height: 24px;
+  }
+  .compare-image-wrapper .preview-image.compare-image {
+    max-width: 88%;
+    max-height: 50vh;
+  }
+  .thumbnail-nav-item {
+    width: 40px;
+    height: 40px;
+  }
+  .thumbnail-navigation.side-thumb {
+    gap: 6px;
+    padding: 6px 6px 2px 6px;
+    min-height: 56px;
+  }
+  .side-description {
+    font-size: 11px;
+    padding: 1px 0 6px 0;
+  }
+  .single-mode .preview-image {
+    max-height: 55vh;
+  }
+  .single-mode .thumbnail-navigation.single-thumb {
+    gap: 6px;
+    padding: 8px 0 4px 0;
+  }
+  .single-mode .thumbnail-description {
+    font-size: 12px;
+    padding: 0 0 6px 0;
   }
 }
 </style>