From 86fa3520e826ce7d5c96d2d5b6f9f1c3494c8419 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=9C=E5=BE=97=E8=AE=A9=E4=BA=BA=E5=8F=91=E6=AF=9B?=
 <2328204591@qq.com>
Date: Tue, 25 Nov 2025 14:41:17 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat(image-viewer):=20=E6=96=B0=E5=A2=9EOIm?=
 =?UTF-8?q?ageViewer=EF=BC=88=E5=9B=BE=E7=89=87=E6=8B=96=E6=8B=BD=E7=BC=A9?=
 =?UTF-8?q?=E6=94=BE=EF=BC=89=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/figure/provide.ts     |   5 +
 .../src/image-viewer/OImageViewer.vue         | 293 ++++++++++++++++++
 packages/opendesign/src/image-viewer/index.ts |  11 +
 .../src/image-viewer/style/index.scss         |   2 +
 .../src/image-viewer/style/index.ts           |   2 +
 .../src/image-viewer/style/style.scss         |  80 +++++
 .../image-viewer/style/theme-ascend.index.ts  |   3 +
 .../src/image-viewer/style/theme-ascend.scss  |   1 +
 .../image-viewer/style/theme-kunpeng.index.ts |   3 +
 .../src/image-viewer/style/theme-kunpeng.scss |   1 +
 .../style/theme-openeuler.index.ts            |   3 +
 .../image-viewer/style/theme-openeuler.scss   |   1 +
 .../src/image-viewer/style/var.scss           |  13 +
 packages/opendesign/src/image-viewer/types.ts |  71 +++++
 14 files changed, 489 insertions(+)
 create mode 100644 packages/opendesign/src/figure/provide.ts
 create mode 100644 packages/opendesign/src/image-viewer/OImageViewer.vue
 create mode 100644 packages/opendesign/src/image-viewer/index.ts
 create mode 100644 packages/opendesign/src/image-viewer/style/index.scss
 create mode 100644 packages/opendesign/src/image-viewer/style/index.ts
 create mode 100644 packages/opendesign/src/image-viewer/style/style.scss
 create mode 100644 packages/opendesign/src/image-viewer/style/theme-ascend.index.ts
 create mode 100644 packages/opendesign/src/image-viewer/style/theme-ascend.scss
 create mode 100644 packages/opendesign/src/image-viewer/style/theme-kunpeng.index.ts
 create mode 100644 packages/opendesign/src/image-viewer/style/theme-kunpeng.scss
 create mode 100644 packages/opendesign/src/image-viewer/style/theme-openeuler.index.ts
 create mode 100644 packages/opendesign/src/image-viewer/style/theme-openeuler.scss
 create mode 100644 packages/opendesign/src/image-viewer/style/var.scss
 create mode 100644 packages/opendesign/src/image-viewer/types.ts

diff --git a/packages/opendesign/src/figure/provide.ts b/packages/opendesign/src/figure/provide.ts
new file mode 100644
index 000000000..e8a4e759b
--- /dev/null
+++ b/packages/opendesign/src/figure/provide.ts
@@ -0,0 +1,5 @@
+import { InjectionKey } from 'vue';
+
+export const figureInjectKey: InjectionKey<{
+  updateDraggingStatus: (isDragging: boolean) => void;
+}> = Symbol('provide-figure');
diff --git a/packages/opendesign/src/image-viewer/OImageViewer.vue b/packages/opendesign/src/image-viewer/OImageViewer.vue
new file mode 100644
index 000000000..6ca0e7446
--- /dev/null
+++ b/packages/opendesign/src/image-viewer/OImageViewer.vue
@@ -0,0 +1,293 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, CSSProperties, inject } from 'vue';
+import { OIconZoomIn, OIconZoomOut, OIconOneToOne, OIconClose } from '../icon-components';
+import { imageViewerProps, ImageViewerAction } from './types';
+import { layerInjectKey } from '../layer/provide';
+import { figureInjectKey } from '../figure/provide';
+import { useScreen } from '../hooks';
+
+const props = defineProps(imageViewerProps);
+const layerInjection = inject(layerInjectKey, null);
+const figureInjection = inject(figureInjectKey, null);
+
+const emits = defineEmits<{
+  (e: 'zoom-drag', value: boolean): void;
+  (e: 'stop-preview', value: boolean): void;
+}>();
+
+const { isPhonePad } = useScreen();
+
+let startScale = 1;
+let touchStartX = 0;
+let touchStartY = 0;
+let startDistance = 0;
+const isDragging = ref(false);
+
+const isLoading = ref(true);
+const containerRefs = ref<Array<HTMLElement>>([]);
+const activeIndex = ref(props.initialIndex);
+
+const transform = ref({
+  scale: 1,
+  offsetX: 0,
+  offsetY: 0,
+});
+
+const lastTransform = ref({ ...transform.value });
+
+const hideActionArea = ref(!props.showActionArea);
+const hideZoomRatio = ref(true);
+
+const containerStyle = computed(() => {
+  const { scale, offsetX, offsetY } = transform.value;
+  const translateX = offsetX / scale;
+  const translateY = offsetY / scale;
+
+  const style: CSSProperties = {
+    transform: `scale(${scale}) translate(${translateX}px, ${translateY}px)`,
+  };
+
+  return style;
+});
+
+const zoomRatio = computed(() => {
+  return `${Math.round(transform.value.scale * 100)}%`;
+});
+
+const showActionArea = computed(() => {
+  return !hideActionArea.value && !isPhonePad.value;
+});
+
+const showZoomRatio = computed(() => {
+  return !hideZoomRatio.value && props.showZoomRatio;
+});
+
+const isSameObject = (a: Record<string, number>, b: Record<string, number>) => {
+  return !Object.keys(a).some((key) => a[key] !== b[key]);
+};
+
+const preventBubbling = computed(() => {
+  return !isSameObject(transform.value, lastTransform.value);
+});
+
+const stopPreview = () => {
+  layerInjection?.toggle(false);
+  emits('stop-preview', false);
+};
+
+const onImgLoaded = () => {
+  isLoading.value = false;
+};
+
+const onImgError = () => {
+  isLoading.value = false;
+};
+
+const onMouseDown = (e: MouseEvent) => {
+  if (e.button !== 0) return;
+
+  const { offsetX, offsetY } = transform.value;
+  const startX = e.pageX;
+  const startY = e.pageY;
+
+  lastTransform.value = { ...transform.value };
+  isDragging.value = true;
+
+  const onDragHandler = (ed: MouseEvent) => {
+    transform.value = {
+      ...transform.value,
+      offsetX: offsetX + ed.pageX - startX,
+      offsetY: offsetY + ed.pageY - startY,
+    };
+  };
+
+  const removeMouseEvent = () => {
+    isDragging.value = false;
+    document.removeEventListener('mousemove', onDragHandler);
+    figureInjection?.updateDraggingStatus(preventBubbling.value);
+    emits('zoom-drag', preventBubbling.value);
+  };
+
+  document.addEventListener('mousemove', onDragHandler);
+  document.addEventListener('mouseup', removeMouseEvent, { once: true });
+
+  e.preventDefault();
+};
+
+let timer: number | null;
+const toggleZoomRatioBubble = (delay: number = 500) => {
+  if (!props.showZoomRatio) return;
+  hideZoomRatio.value = false;
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+  timer = window.setTimeout(() => {
+    hideZoomRatio.value = true;
+    timer = null;
+  }, delay);
+};
+
+const onActionHandle = (action: ImageViewerAction) => {
+  if (isLoading.value) return;
+  const { minScale, maxScale, zoomRate } = props;
+  switch (action) {
+    case 'zoomOut':
+      if (transform.value.scale > minScale) {
+        const nextScale = Number.parseFloat((transform.value.scale / zoomRate).toFixed(3));
+        const currScale = Math.max(nextScale, minScale);
+        transform.value.scale = currScale;
+      }
+      break;
+    case 'zoomIn':
+      if (transform.value.scale < maxScale) {
+        const nextScale = Number.parseFloat((transform.value.scale * zoomRate).toFixed(3));
+        const currScale = Math.min(nextScale, maxScale);
+        transform.value.scale = currScale;
+      }
+      break;
+  }
+  toggleZoomRatioBubble(props.duration);
+};
+
+const mousewheelHandler = (e: WheelEvent) => {
+  const delta = e.deltaY || e.deltaX;
+  onActionHandle(delta < 0 ? 'zoomIn' : 'zoomOut');
+};
+
+const resetTransform = () => {
+  transform.value = {
+    scale: 1,
+    offsetX: 0,
+    offsetY: 0,
+  };
+};
+
+// touch start
+const getTouchDistance = (touches: TouchList) => {
+  const dx = Math.abs(touches[0].clientX - touches[1].clientX);
+  const dy = Math.abs(touches[0].clientY - touches[1].clientY);
+  return Math.sqrt(dx * dx + dy * dy);
+};
+
+const getTouchCenter = (touches: TouchList) => {
+  return {
+    x: (touches[0].clientX + touches[1].clientX) / 2,
+    y: (touches[0].clientY + touches[1].clientY) / 2,
+  };
+};
+
+const onTouchStart = (e: TouchEvent) => {
+  const touches = e.touches;
+  const fingerNum = touches.length;
+  if (fingerNum === 1) {
+    isDragging.value = true;
+
+    touchStartX = touches[0].clientX - transform.value.offsetX;
+    touchStartY = touches[0].clientY - transform.value.offsetY;
+  } else if (fingerNum === 2) {
+    isDragging.value = false;
+    startDistance = getTouchDistance(touches);
+  }
+};
+
+const onTouchMove = (e: TouchEvent) => {
+  const touches = e.touches;
+  const fingerNum = touches.length;
+  if (isDragging.value && fingerNum === 1) {
+    transform.value.offsetX = touches[0].clientX - touchStartX!;
+    transform.value.offsetY = touches[0].clientY - touchStartY!;
+  } else if (fingerNum === 2) {
+    if (startDistance) {
+      const { minScale, maxScale } = props;
+      const distance = getTouchDistance(touches);
+      const tempScale = Number.parseFloat((startScale * (distance / startDistance)).toFixed(3));
+
+      const newScale = Math.max(Math.min(tempScale, maxScale), minScale);
+
+      // 缩放中心
+      const touchCenter = getTouchCenter(touches);
+
+      // 调整位移保持缩放中心不变
+      const imageRect = containerRefs.value[activeIndex.value]?.getBoundingClientRect()!;
+      const centerXRelative = touchCenter.x - imageRect.left - imageRect.width / 2;
+      const centerYRelative = touchCenter.y - imageRect.top - imageRect.height / 2;
+
+      transform.value.offsetX = centerXRelative - (centerXRelative - transform.value.offsetX) * (newScale / startScale);
+      transform.value.offsetY = centerYRelative - (centerYRelative - transform.value.offsetY) * (newScale / startScale);
+
+      startDistance = distance;
+      startScale = newScale;
+      transform.value.scale = newScale;
+    }
+  }
+
+  e.preventDefault();
+};
+
+const onTouchEnd = (e: TouchEvent) => {
+  const touches = e.touches;
+  const fingerNum = touches.length;
+  if (fingerNum === 0) {
+    isDragging.value = false;
+    startDistance = 0;
+  } else if (fingerNum === 1) {
+    // 双指变单指
+    isDragging.value = true;
+    startDistance = 0;
+
+    touchStartX = touches[0].clientX - transform.value.offsetX;
+    touchStartY = touches[0].clientY - transform.value.offsetY;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('wheel', mousewheelHandler);
+});
+
+onUnmounted(() => {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+  document.removeEventListener('wheel', mousewheelHandler);
+});
+</script>
+<template>
+  <div class="o-image-viewer">
+    <div
+      v-for="(url, i) in previewList"
+      v-show="i === activeIndex"
+      :key="url"
+      :ref="(el) => (containerRefs[i] = el as HTMLImageElement)"
+      :style="containerStyle"
+      :class="{ 'o-image-viewer-dragging': isDragging }"
+      class="o-image-viewer-container"
+      @mousedown="onMouseDown"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+    >
+      <img class="o-image-viewer-img" :src="url" @load="onImgLoaded" @error="onImgError" />
+      <slot></slot>
+    </div>
+
+    <div v-show="showZoomRatio" class="o-image-zoom-ratio">{{ zoomRatio }}</div>
+
+    <div v-if="showActionArea" class="o-image-viewer-action" @click.stop="">
+      <div class="o-image-action-item" @click="onActionHandle('zoomIn')">
+        <OIconZoomIn class="o-image-action-icon" />
+      </div>
+      <div class="o-image-action-item" @click="onActionHandle('zoomOut')">
+        <OIconZoomOut class="o-image-action-icon" />
+      </div>
+
+      <div class="o-image-action-item" @click="resetTransform">
+        <OIconOneToOne class="o-image-action-icon" />
+      </div>
+      <div class="o-image-action-item" @click="stopPreview">
+        <OIconClose class="o-image-action-icon" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/opendesign/src/image-viewer/index.ts b/packages/opendesign/src/image-viewer/index.ts
new file mode 100644
index 000000000..f1f767c91
--- /dev/null
+++ b/packages/opendesign/src/image-viewer/index.ts
@@ -0,0 +1,11 @@
+import _OImageViewer from './OImageViewer.vue';
+import type { App } from 'vue';
+
+const OImageViewer = Object.assign(_OImageViewer, {
+  install(app: App) {
+    app.component('OImageViewer', _OImageViewer);
+  },
+});
+
+export { OImageViewer };
+export * from './types';
diff --git a/packages/opendesign/src/image-viewer/style/index.scss b/packages/opendesign/src/image-viewer/style/index.scss
new file mode 100644
index 000000000..b32f7e737
--- /dev/null
+++ b/packages/opendesign/src/image-viewer/style/index.scss
@@ -0,0 +1,2 @@
+@use './var.scss' as *;
+@use './style.scss' as *;
\ No newline at end of file
diff --git a/packages/opendesign/src/image-viewer/style/index.ts b/packages/opendesign/src/image-viewer/style/index.ts
new file mode 100644
index 000000000..786fce9c5
--- /dev/null
+++ b/packages/opendesign/src/image-viewer/style/index.ts
@@ -0,0 +1,2 @@
+import '../../_styles';
+import './index.scss';
diff --git a/packages/opendesign/src/image-viewer/style/style.scss b/packages/opendesign/src/image-viewer/style/style.scss
new file mode 100644
index 000000000..24f0d3351
--- /dev/null
+++ b/packages/opendesign/src/image-viewer/style/style.scss
@@ -0,0 +1,80 @@
+@use '../../_styles/mixin.scss' as *;
+
+.o-image-viewer {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.o-image-viewer-container {
+  position: relative;
+  user-select: none;
+  will-change: transform;
+}
+
+.o-image-viewer-dragging {
+  cursor: var(--image-viewer-cursor-type);
+}
+
+.o-image-viewer-img {
+  display: block;
+  max-width: 100vw;
+  max-height: 100vh;
+}
+
+.o-image-zoom-ratio {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  width: var(--image-viewer-ratio-width);
+  height: var(--image-viewer-ratio-height);
+  line-height: var(--image-viewer-ratio-height);
+  text-align: center;
+  font-weight: 500;
+  color: var(--image-viewer-ratio-color);
+  background-color: var(--image-viewer-ratio-bgc);
+  border-radius: var(--image-viewer-ratio-radius);
+  backdrop-filter: blur(var(--image-viewer-ratio-backdrop-filter));
+  user-select: none;
+}
+
+.o-image-viewer-action {
+  position: absolute;
+  left: 50%;
+  bottom: var(--image-viewer-action-bottom);
+  transform: translate3d(-50%, 0, 0);
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  padding: var(--image-viewer-action-padding);
+  background-color: var(--o-color-white);
+  border-radius: var(--o-radius-m);
+}
+
+.o-image-action-item {
+  cursor: pointer;
+
+  &:not(:first-child) {
+    margin-left: var(--image-viewer-action-item-gap);
+  }
+
+  &:last-child {
+    opacity: 0.8;
+  }
+
+  @include hover {
+    opacity: 1;
+
+    .o-image-action-icon {
+      color: var(--o-color-info1)
+    }
+  }
+}
+
+.o-image-action-icon {
+  display: block;
+  width: var(--o-control_size-s);
+  height: var(--o-control_size-s);
+  color: var(--o-color-info2)
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/image-viewer/style/theme-ascend.index.ts b/packages/opendesign/src/image-viewer/style/theme-ascend.index.ts
new file mode 100644
index 000000000..5bdacd9c6
--- /dev/null
+++ b/packages/opendesign/src/image-viewer/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/image-viewer/style/theme-ascend.scss b/packages/opendesign/src/image-viewer/style/theme-ascend.scss
new file mode 100644
index 000000000..e604f805c
--- /dev/null
+++ b/packages/opendesign/src/image-viewer/style/theme-ascend.scss
@@ -0,0 +1 @@
+@use '../../_styles/mixin.scss' as *;
\ No newline at end of file
diff --git a/packages/opendesign/src/image-viewer/style/theme-kunpeng.index.ts b/packages/opendesign/src/image-viewer/style/theme-kunpeng.index.ts
new file mode 100644
index 000000000..c2b4508ff
--- /dev/null
+++ b/packages/opendesign/src/image-viewer/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/image-viewer/style/theme-kunpeng.scss b/packages/opendesign/src/image-viewer/style/theme-kunpeng.scss
new file mode 100644
index 000000000..e604f805c
--- /dev/null
+++ b/packages/opendesign/src/image-viewer/style/theme-kunpeng.scss
@@ -0,0 +1 @@
+@use '../../_styles/mixin.scss' as *;
\ No newline at end of file
diff --git a/packages/opendesign/src/image-viewer/style/theme-openeuler.index.ts b/packages/opendesign/src/image-viewer/style/theme-openeuler.index.ts
new file mode 100644
index 000000000..5a4690a05
--- /dev/null
+++ b/packages/opendesign/src/image-viewer/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/image-viewer/style/theme-openeuler.scss b/packages/opendesign/src/image-viewer/style/theme-openeuler.scss
new file mode 100644
index 000000000..e604f805c
--- /dev/null
+++ b/packages/opendesign/src/image-viewer/style/theme-openeuler.scss
@@ -0,0 +1 @@
+@use '../../_styles/mixin.scss' as *;
\ No newline at end of file
diff --git a/packages/opendesign/src/image-viewer/style/var.scss b/packages/opendesign/src/image-viewer/style/var.scss
new file mode 100644
index 000000000..57418865e
--- /dev/null
+++ b/packages/opendesign/src/image-viewer/style/var.scss
@@ -0,0 +1,13 @@
+.o-image-viewer {
+  --image-viewer-ratio-width: 82px;
+  --image-viewer-ratio-height: 24px;
+  --image-viewer-ratio-bgc: var(--o-color-mask2);
+  --image-viewer-ratio-color: var(--o-color-white);
+  --image-viewer-ratio-radius: var(--o-radius-xs);
+  --image-viewer-ratio-backdrop-filter: 4px;
+
+  --image-viewer-action-bottom: 72px;
+  --image-viewer-action-padding: 16px 24px;
+  --image-viewer-action-item-gap: 40px;
+  --image-viewer-cursor-type: move;
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/image-viewer/types.ts b/packages/opendesign/src/image-viewer/types.ts
new file mode 100644
index 000000000..c1ee41e63
--- /dev/null
+++ b/packages/opendesign/src/image-viewer/types.ts
@@ -0,0 +1,71 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+export type ImageViewerAction = 'zoomIn' | 'zoomOut';
+
+export const imageViewerProps = {
+  /**
+   * @zh-CN 预览资源组
+   * @en-US Preview Resource Group.
+   */
+  previewList: {
+    type: Array as PropType<Array<string>>,
+    default: () => [],
+  },
+  /**
+   * @zh-CN 预览图片缩放的速率
+   * @en-US Preview the rate of image zooming.
+   */
+  zoomRate: {
+    type: Number,
+    default: 1.2,
+  },
+  /**
+   * @zh-CN 预览图片最小缩放比例
+   * @en-US Minimum zoom ratio for preview images.
+   */
+  minScale: {
+    type: Number,
+    default: 0.1,
+  },
+  /**
+   * @zh-CN 预览图片最大缩放比例
+   * @en-US Maximum zoom ratio for preview images.
+   */
+  maxScale: {
+    type: Number,
+    default: 8,
+  },
+  /**
+   * @zh-CN 展示预览图片实际缩放百分比
+   * @en-US Show the actual zoom percentage of the preview image.
+   */
+  showZoomRatio: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * @zh-CN 展示预览图片实际缩放百分比的持续时间
+   * @en-US Show the duration of the actual zoom percentage of the preview image.
+   */
+  duration: {
+    type: Number,
+    default: 500,
+  },
+  /**
+   * @zh-CN 展示预览操作区域
+   * @en-US Display the preview operation area.
+   */
+  showActionArea: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * @zh-CN 预览组起始预览图片的下标
+   * @en-US The index of the preview group's initial preview image.
+   */
+  initialIndex: {
+    type: Number,
+    default: 0,
+  },
+};
+export type ImageViewerPropsT = ExtractPropTypes<typeof imageViewerProps>;
-- 
Gitee


From d32a6b7ed52ccdff33784b461f697d39879b4c9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=9C=E5=BE=97=E8=AE=A9=E4=BA=BA=E5=8F=91=E6=AF=9B?=
 <2328204591@qq.com>
Date: Tue, 25 Nov 2025 14:46:34 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat(figure):=20figure=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E9=80=82=E9=85=8DOImageViewer=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/figure/OFigure.vue    | 49 +++++++++++++++++--
 packages/opendesign/src/figure/style/index.ts |  1 +
 .../opendesign/src/figure/style/media.scss    |  6 +++
 .../opendesign/src/figure/style/style.scss    |  4 ++
 packages/opendesign/src/figure/types.ts       |  2 +
 5 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/packages/opendesign/src/figure/OFigure.vue b/packages/opendesign/src/figure/OFigure.vue
index 5ef23e773..2479886c9 100644
--- a/packages/opendesign/src/figure/OFigure.vue
+++ b/packages/opendesign/src/figure/OFigure.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watchEffect } from 'vue';
+import { ref, computed, onMounted, watchEffect, provide } from 'vue';
 import { defaultPrestColorPool } from '../_utils/global';
 import HtmlTag from '../_components/html-tag';
 import { OLayer } from '../layer';
+import { OImageViewer } from '../image-viewer';
 import { IconImageError, IconVideoPlay } from '../_utils/icons';
 import { useIntersectionObserver } from '../hooks';
 
 import { figureProps } from './types';
-import { isObject } from '../_utils/is';
+import { figureInjectKey } from './provide';
+import { isArray, isObject } from '../_utils/is';
 import { requestImage } from '../_utils/helper';
 import { useScreen } from '../hooks';
 
@@ -25,8 +27,27 @@ const isLoading = ref(true);
 const isError = ref(false);
 const prestColor = props.colorful ? defaultPrestColorPool.value.pick() : '';
 
+const isDragging = ref(false); // 识别拖拽行为
 const imgSrc = ref<string | undefined>(undefined); // 当使用img标签时，图片地址
 const bgUrl = computed(() => (props.background && imgSrc.value ? `url(${imgSrc.value})` : undefined));
+
+const urlList = computed(() => {
+  const { previewList } = props;
+  let tempList = [imgSrc.value as string];
+  if (isArray(previewList) && previewList.length) {
+    tempList = previewList;
+  }
+  return tempList;
+});
+const imgIndex = computed(() => {
+  const { initialIndex } = props;
+  let previewIndex = initialIndex;
+  if (initialIndex > urlList.value.length - 1 || initialIndex < 0) {
+    previewIndex = 0;
+  }
+  return previewIndex;
+});
+
 const useObserver = (props.lazy && props.background) || isObject(props.lazy); // 使用IntersectionObserver检测是否开始加载图片
 
 const onImgLoaded = () => {
@@ -114,6 +135,9 @@ const onPreviewChange = (visible: boolean) => {
   emits('preview', visible);
 };
 const onPreviewImgClick = () => {
+  if (isDragging.value) {
+    return;
+  }
   if (isBodyClose.value) {
     previewVisible.value = false;
   }
@@ -125,6 +149,12 @@ const onFigureClick = () => {
   }
 };
 
+const updateDraggingStatus = (v: boolean) => {
+  isDragging.value = v;
+};
+
+provide(figureInjectKey, { updateDraggingStatus });
+
 defineExpose({
   preview,
 });
@@ -207,9 +237,20 @@ defineExpose({
       <div class="o-figure-preview-wrapper" @click="onPreviewImgClick">
         <slot name="preview" :image="imgSrc">
           <div class="o-figure-preview-img">
-            <img :src="imgSrc" />
+            <OImageViewer
+              class="o-figure-image-viewer"
+              :initial-index="imgIndex"
+              :preview-list="urlList"
+              :zoom-rate="props.zoomRate"
+              :min-scale="props.minScale"
+              :max-scale="props.maxScale"
+              :show-zoom-ratio="props.showZoomRatio"
+              :show-action-area="props.showActionArea"
+              :duration="props.duration"
+            >
+              <slot name="preview-extra"></slot>
+            </OImageViewer>
           </div>
-          <slot name="preview-extra"></slot>
         </slot>
       </div>
     </OLayer>
diff --git a/packages/opendesign/src/figure/style/index.ts b/packages/opendesign/src/figure/style/index.ts
index 5a959b183..557ca87ce 100644
--- a/packages/opendesign/src/figure/style/index.ts
+++ b/packages/opendesign/src/figure/style/index.ts
@@ -1,4 +1,5 @@
 import '../../_styles';
 import '../../icon/style';
 import '../../layer/style';
+import '../../image-viewer/style';
 import './index.scss';
diff --git a/packages/opendesign/src/figure/style/media.scss b/packages/opendesign/src/figure/style/media.scss
index edaa15fec..3bbc55082 100644
--- a/packages/opendesign/src/figure/style/media.scss
+++ b/packages/opendesign/src/figure/style/media.scss
@@ -52,3 +52,9 @@
     --layer-mask: var(--o-color-black);
   }
 }
+
+.o-figure-image-viewer {
+  @include respond-to('<=pad') {
+    height: auto;
+  }
+}
diff --git a/packages/opendesign/src/figure/style/style.scss b/packages/opendesign/src/figure/style/style.scss
index e5e921cf4..92b2bcb2a 100644
--- a/packages/opendesign/src/figure/style/style.scss
+++ b/packages/opendesign/src/figure/style/style.scss
@@ -126,6 +126,10 @@
   }
 }
 
+.o-figure-image-viewer {
+  height: 100vh;
+}
+
 .o-figure-error-wrap {
   position: absolute;
   left: 0;
diff --git a/packages/opendesign/src/figure/types.ts b/packages/opendesign/src/figure/types.ts
index 1a6ed3c76..e9c5138df 100644
--- a/packages/opendesign/src/figure/types.ts
+++ b/packages/opendesign/src/figure/types.ts
@@ -1,8 +1,10 @@
 import { ExtractPropTypes, PropType } from 'vue';
+import { imageViewerProps } from '../image-viewer/types';
 
 type PreviewCloseType = 'none' | 'button' | 'mask' | 'body';
 
 export const figureProps = {
+  ...imageViewerProps,
   /**
    * @zh-CN 资源地址
    * @en-US Resource address
-- 
Gitee


From 98dbe41084177c9374641f16cc34359cf794d432 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=9C=E5=BE=97=E8=AE=A9=E4=BA=BA=E5=8F=91=E6=AF=9B?=
 <2328204591@qq.com>
Date: Tue, 25 Nov 2025 15:06:29 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat(demo):=20=E6=96=B0=E5=A2=9EOImageViewe?=
 =?UTF-8?q?r=E7=A4=BA=E4=BE=8Bdemo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__demo__/ImageViewerBasic.vue             | 24 +++++++++++
 .../__demo__/ImageViewerInFigure.vue          | 33 +++++++++++++++
 .../__demo__/ImageViewerInLayer.vue           | 42 +++++++++++++++++++
 .../src/image-viewer/__demo__/TheIndex.vue    | 29 +++++++++++++
 packages/portal/src/router.ts                 |  8 ++++
 5 files changed, 136 insertions(+)
 create mode 100644 packages/opendesign/src/image-viewer/__demo__/ImageViewerBasic.vue
 create mode 100644 packages/opendesign/src/image-viewer/__demo__/ImageViewerInFigure.vue
 create mode 100644 packages/opendesign/src/image-viewer/__demo__/ImageViewerInLayer.vue
 create mode 100644 packages/opendesign/src/image-viewer/__demo__/TheIndex.vue

diff --git a/packages/opendesign/src/image-viewer/__demo__/ImageViewerBasic.vue b/packages/opendesign/src/image-viewer/__demo__/ImageViewerBasic.vue
new file mode 100644
index 000000000..479b44de7
--- /dev/null
+++ b/packages/opendesign/src/image-viewer/__demo__/ImageViewerBasic.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { OImageViewer } from '../index';
+const imgList = ['https://www.openeuler.org/img/banners/20230418-odd.png', 'https://www.hiascend.com/p/resource/202511/75b8f0b96d9645b4bd0533782f4b2213.JPG'];
+</script>
+<template>
+  <h4>基本</h4>
+  <section class="demo-wrap">
+    <OImageViewer
+      :preview-list="imgList"
+      :initial-index="0"
+      :zoom-rate="1.1"
+      :min-scale="0.6"
+      :max-scale="5"
+      :show-zoom-ratio="true"
+      :show-action-area="true"
+    />
+  </section>
+</template>
+<style lang="scss" scoped>
+.demo-wrap {
+  display: flex;
+  justify-content: center;
+}
+</style>
diff --git a/packages/opendesign/src/image-viewer/__demo__/ImageViewerInFigure.vue b/packages/opendesign/src/image-viewer/__demo__/ImageViewerInFigure.vue
new file mode 100644
index 000000000..8ee782857
--- /dev/null
+++ b/packages/opendesign/src/image-viewer/__demo__/ImageViewerInFigure.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { OImageViewer } from '../index';
+import { OFigure } from '../../figure';
+
+import '../../figure/style';
+const imgList = ['https://www.hiascend.com/p/resource/202511/75b8f0b96d9645b4bd0533782f4b2213.JPG', 'https://www.openeuler.org/img/banners/20230418-odd.png'];
+</script>
+<template>
+  <h4>搭配figure使用</h4>
+  <section class="demo-wrap">
+    <OFigure :src="imgList[1]" preview preview-close="body">
+      <template #preview>
+        <OImageViewer
+          class="o-figure-image-viewer"
+          :preview-list="imgList"
+          :initial-index="0"
+          :zoom-rate="1.1"
+          :min-scale="0.6"
+          :max-scale="5"
+          :show-zoom-ratio="true"
+          :show-action-area="true"
+          :duration="800"
+        />
+      </template>
+    </OFigure>
+  </section>
+</template>
+<style lang="scss" scoped>
+.demo-wrap {
+  display: flex;
+  justify-content: center;
+}
+</style>
diff --git a/packages/opendesign/src/image-viewer/__demo__/ImageViewerInLayer.vue b/packages/opendesign/src/image-viewer/__demo__/ImageViewerInLayer.vue
new file mode 100644
index 000000000..240df07d8
--- /dev/null
+++ b/packages/opendesign/src/image-viewer/__demo__/ImageViewerInLayer.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OImageViewer } from '../index';
+import { OLayer } from '../../layer';
+import { OButton } from '../../button';
+import '../../button/style';
+
+import '../../figure/style';
+const imgList = ['https://www.hiascend.com/p/resource/202511/75b8f0b96d9645b4bd0533782f4b2213.JPG', 'https://www.openeuler.org/img/banners/20230418-odd.png'];
+const previewVisible = ref(false);
+
+const onPreviewChange = (v: boolean) => {
+  previewVisible.value = v;
+};
+const onClickHandle = () => {
+  previewVisible.value = true;
+};
+</script>
+<template>
+  <h4>搭配layer使用</h4>
+  <section class="demo-wrap">
+    <OButton color="primary" variant="solid" @click="onClickHandle">点击预览图片</OButton>
+    <OLayer v-model:visible="previewVisible"  @change="onPreviewChange">
+      <OImageViewer
+        class="o-figure-image-viewer"
+        :preview-list="imgList"
+        :initial-index="0"
+        :zoom-rate="1.1"
+        :min-scale="0.6"
+        :max-scale="5"
+        :show-zoom-ratio="true"
+        :show-action-area="true"
+      />
+    </OLayer>
+  </section>
+</template>
+<style lang="scss" scoped>
+.demo-wrap {
+  display: flex;
+  justify-content: center;
+}
+</style>
diff --git a/packages/opendesign/src/image-viewer/__demo__/TheIndex.vue b/packages/opendesign/src/image-viewer/__demo__/TheIndex.vue
new file mode 100644
index 000000000..e7eb23268
--- /dev/null
+++ b/packages/opendesign/src/image-viewer/__demo__/TheIndex.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import ImageViewerBasic from './ImageViewerBasic.vue';
+import ImageViewerInFigure from './ImageViewerInFigure.vue';
+import ImageViewerInLayer from './ImageViewerInLayer.vue';
+import { OSwitch } from '../../switch';
+
+import '../style';
+import '../../switch/style';
+
+const showBaseDemo = ref(false);
+</script>
+<template>
+  <div class="page-demo">
+    <div class="demo-operation" style="display: flex; align-items: center">
+      <h3 style="margin-right: 16px">切换demo</h3>
+      <OSwitch v-model="showBaseDemo" round="pill" size="medium" />
+    </div>
+    <template v-if="!showBaseDemo">
+      <ImageViewerBasic />
+    </template>
+
+    <template v-else>
+      <ImageViewerInFigure />
+      <ImageViewerInLayer />
+    </template>
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 657cae2a4..1e94e1067 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -388,6 +388,14 @@ export const routes = [
       title: '骨架屏 Skeleton',
     },
   },
+  {
+    path: '/image-viewer',
+    name: 'ImageViewer',
+    component: () => import('@opendesign-src/image-viewer/__demo__/TheIndex.vue'),
+    meta: {
+      title: '图片形变 ImageViewer',
+    },
+  },
   {
     path: '/resize-observer',
     name: 'ResizeObserver',
-- 
Gitee