From 127d60d3fd4d6674941376d59137fc48133f3926 Mon Sep 17 00:00:00 2001
From: EthanShen10086 <ethanshen4work@gmail.com>
Date: Sun, 24 Aug 2025 21:45:31 +0800
Subject: [PATCH 01/12] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E7=9A=84trigger=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common                               |  2 +-
 .../components/image-viewer/image-viewer.tsx  | 33 +++++++++++++++++--
 packages/components/image-viewer/props.ts     |  2 +-
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/packages/common b/packages/common
index 6baed1be34..fcbb0bbdcf 160000
--- a/packages/common
+++ b/packages/common
@@ -1 +1 @@
-Subproject commit 6baed1be3426c881829d37d983fa5f355694383d
+Subproject commit fcbb0bbdcfaa4e67d85a90db30b01bbda54e31d4
diff --git a/packages/components/image-viewer/image-viewer.tsx b/packages/components/image-viewer/image-viewer.tsx
index 2b8b982c4d..1af9e67eef 100644
--- a/packages/components/image-viewer/image-viewer.tsx
+++ b/packages/components/image-viewer/image-viewer.tsx
@@ -1,4 +1,4 @@
-import { ChevronDownIcon, ChevronLeftIcon, CloseIcon } from 'tdesign-icons-vue-next';
+import { BrowseIcon, ChevronDownIcon, ChevronLeftIcon, CloseIcon } from 'tdesign-icons-vue-next';
 import { Teleport, Transition, computed, defineComponent, nextTick, ref, toRefs, watch } from 'vue';
 
 import {
@@ -226,11 +226,38 @@ export default defineComponent({
       );
     };
 
+    // 渲染默认trigger
+    // 原本需要手动配置 需要添加完template插槽之后设置DOM元素，现在添加默认DOM
+    const renderDefaultTrigger = () => {
+      if (props.trigger) {
+        return renderTNodeJSX('trigger', { params: { open: openHandler } });
+      }
+
+      // 如果没有提供trigger，则渲染默认的图片预览按钮
+      const firstImage = images.value[0];
+      if (!firstImage) return null;
+
+      const imageSrc =
+        typeof firstImage === 'string' ? firstImage : (firstImage as any).mainImage || (firstImage as any).thumbnail;
+
+      return (
+        <div class={`${COMPONENT_NAME.value}__trigger`}>
+          <img src={imageSrc} alt="preview" class={`${COMPONENT_NAME.value}__trigger--img`} />
+          <div class={`${COMPONENT_NAME.value}__trigger--hover`} onClick={openHandler}>
+            <span>
+              <BrowseIcon size="1.4em" class={`${COMPONENT_NAME.value}__trigger--icon`} />
+              预览
+            </span>
+          </div>
+        </div>
+      );
+    };
+
     return () => {
       if (props.mode === 'modeless') {
         return (
           <>
-            {renderTNodeJSX('trigger', { params: { open: openHandler } })}
+            {renderDefaultTrigger()}
             <TImageViewerModal
               zIndex={zIndexValue.value}
               visible={visibleValue.value}
@@ -258,7 +285,7 @@ export default defineComponent({
 
       return (
         <>
-          {renderTNodeJSX('trigger', { params: { open: openHandler } })}
+          {renderDefaultTrigger()}
           <Teleport disabled={!props.attach || !teleportElement.value} to={teleportElement.value}>
             <Transition>
               {(visibleValue.value || !animationEnd.value) && (
diff --git a/packages/components/image-viewer/props.ts b/packages/components/image-viewer/props.ts
index 1171399808..bc49a55d8a 100644
--- a/packages/components/image-viewer/props.ts
+++ b/packages/components/image-viewer/props.ts
@@ -54,7 +54,7 @@ export default {
   /** 图片数组。`mainImage` 表示主图，必传；`thumbnail` 表示缩略图，如果不存在，则使用主图显示；`download` 是否允许下载图片，默认允许下载。示例: `['img_url_1', 'img_url_2']`，`[{ thumbnail: 'small_image_url', mainImage: 'big_image_url', download: false }]` */
   images: {
     type: Array as PropType<TdImageViewerProps['images']>,
-    default: (): TdImageViewerProps['images'] => [],
+    default: (): TdImageViewerProps['images'] => ['https://tdesign.gtimg.com/demo/demo-image-1.png'],
   },
   /** 当前预览图片所在的下标 */
   index: {

From 68bdb48c68cdd8d3b2bba2acde95c709fadd321a Mon Sep 17 00:00:00 2001
From: EthanShen10086 <ethanshen4work@gmail.com>
Date: Sun, 7 Sep 2025 22:12:16 +0800
Subject: [PATCH 02/12] =?UTF-8?q?feat:=20=E6=A0=B9=E6=8D=AECR=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8DdefaultTrigger=E9=80=BB=E8=BE=91=E4=BB=A5=E5=8F=8A?=
 =?UTF-8?q?=E6=A0=B9=E6=8D=AECR=E4=BF=AE=E5=A4=8DBEM=E9=94=99=E8=AF=AF?=
 =?UTF-8?q?=E7=9A=84class=E5=91=BD=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/components/image-viewer/image-viewer.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/components/image-viewer/image-viewer.tsx b/packages/components/image-viewer/image-viewer.tsx
index 1af9e67eef..59d9e66029 100644
--- a/packages/components/image-viewer/image-viewer.tsx
+++ b/packages/components/image-viewer/image-viewer.tsx
@@ -242,10 +242,10 @@ export default defineComponent({
 
       return (
         <div class={`${COMPONENT_NAME.value}__trigger`}>
-          <img src={imageSrc} alt="preview" class={`${COMPONENT_NAME.value}__trigger--img`} />
-          <div class={`${COMPONENT_NAME.value}__trigger--hover`} onClick={openHandler}>
+          <img src={imageSrc} alt="preview" class={`${COMPONENT_NAME.value}__trigger-img`} />
+          <div class={`${COMPONENT_NAME.value}__trigger-hover`} onClick={openHandler}>
             <span>
-              <BrowseIcon size="1.4em" class={`${COMPONENT_NAME.value}__trigger--icon`} />
+              <BrowseIcon size="1.4em" class={`${COMPONENT_NAME.value}__trigger-icon`} />
               预览
             </span>
           </div>
@@ -257,7 +257,7 @@ export default defineComponent({
       if (props.mode === 'modeless') {
         return (
           <>
-            {renderDefaultTrigger()}
+            {renderTNodeJSX('trigger', { params: { open: openHandler } }) || renderDefaultTrigger()}
             <TImageViewerModal
               zIndex={zIndexValue.value}
               visible={visibleValue.value}
@@ -285,7 +285,7 @@ export default defineComponent({
 
       return (
         <>
-          {renderDefaultTrigger()}
+          {renderTNodeJSX('trigger', { params: { open: openHandler } }) || renderDefaultTrigger()}
           <Teleport disabled={!props.attach || !teleportElement.value} to={teleportElement.value}>
             <Transition>
               {(visibleValue.value || !animationEnd.value) && (

From 1bb42f8494003829f4c09ea0cf7270a8239cc5f8 Mon Sep 17 00:00:00 2001
From: EthanShen10086 <ethanshen4work@gmail.com>
Date: Mon, 8 Sep 2025 07:44:36 +0800
Subject: [PATCH 03/12] =?UTF-8?q?feat:=20renderDefaultTrigger=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8t-image=E6=96=B9=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/image-viewer/image-viewer.tsx     | 16 ++++------------
 packages/components/image-viewer/props.ts        |  2 +-
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/packages/components/image-viewer/image-viewer.tsx b/packages/components/image-viewer/image-viewer.tsx
index 59d9e66029..9d3bf2dcf7 100644
--- a/packages/components/image-viewer/image-viewer.tsx
+++ b/packages/components/image-viewer/image-viewer.tsx
@@ -226,23 +226,15 @@ export default defineComponent({
       );
     };
 
-    // 渲染默认trigger
-    // 原本需要手动配置 需要添加完template插槽之后设置DOM元素，现在添加默认DOM
     const renderDefaultTrigger = () => {
-      if (props.trigger) {
-        return renderTNodeJSX('trigger', { params: { open: openHandler } });
-      }
-
-      // 如果没有提供trigger，则渲染默认的图片预览按钮
-      const firstImage = images.value[0];
-      if (!firstImage) return null;
-
+      // 如果不存在图片 使用t-image 展示无法展示图片的错误
+      // images 的 vo 是 ImageInfo
+      const firstImage = images.value[0] || 'error url';
       const imageSrc =
         typeof firstImage === 'string' ? firstImage : (firstImage as any).mainImage || (firstImage as any).thumbnail;
-
       return (
         <div class={`${COMPONENT_NAME.value}__trigger`}>
-          <img src={imageSrc} alt="preview" class={`${COMPONENT_NAME.value}__trigger-img`} />
+          <t-image src={imageSrc} alt="preview" class={`${COMPONENT_NAME.value}__trigger-img`} onClick={openHandler} />
           <div class={`${COMPONENT_NAME.value}__trigger-hover`} onClick={openHandler}>
             <span>
               <BrowseIcon size="1.4em" class={`${COMPONENT_NAME.value}__trigger-icon`} />
diff --git a/packages/components/image-viewer/props.ts b/packages/components/image-viewer/props.ts
index bc49a55d8a..1171399808 100644
--- a/packages/components/image-viewer/props.ts
+++ b/packages/components/image-viewer/props.ts
@@ -54,7 +54,7 @@ export default {
   /** 图片数组。`mainImage` 表示主图，必传；`thumbnail` 表示缩略图，如果不存在，则使用主图显示；`download` 是否允许下载图片，默认允许下载。示例: `['img_url_1', 'img_url_2']`，`[{ thumbnail: 'small_image_url', mainImage: 'big_image_url', download: false }]` */
   images: {
     type: Array as PropType<TdImageViewerProps['images']>,
-    default: (): TdImageViewerProps['images'] => ['https://tdesign.gtimg.com/demo/demo-image-1.png'],
+    default: (): TdImageViewerProps['images'] => [],
   },
   /** 当前预览图片所在的下标 */
   index: {

From ac72120a96d2673f53d97a0f3e2a4f28e77f3b04 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Mon, 8 Sep 2025 02:20:05 +0000
Subject: [PATCH 04/12] chore: update snapshot

---
 .../__snapshots__/upload.test.tsx.snap        | 170 +++++++++++++++++-
 1 file changed, 168 insertions(+), 2 deletions(-)

diff --git a/packages/components/upload/__tests__/__snapshots__/upload.test.tsx.snap b/packages/components/upload/__tests__/__snapshots__/upload.test.tsx.snap
index d34c31c088..e7b37e1cc7 100644
--- a/packages/components/upload/__tests__/__snapshots__/upload.test.tsx.snap
+++ b/packages/components/upload/__tests__/__snapshots__/upload.test.tsx.snap
@@ -1117,7 +1117,90 @@ exports[`Upload Component > props.theme: theme=file-flow works fine 1`] = `
     </table>
     <!---->
     
-    <!---->
+    <div
+      class="t-image-viewer__trigger"
+    >
+      <div
+        class="t-image__wrapper t-image__wrapper--shape-square t-image-viewer__trigger-img"
+        fallback=""
+        referrerpolicy="strict-origin-when-cross-origin"
+      >
+        <!---->
+        <!---->
+        <!---->
+        <img
+          alt="preview"
+          class="t-image t-image--fit-fill t-image--position-center"
+          referrerpolicy="strict-origin-when-cross-origin"
+          src="error url"
+        />
+        <div
+          class="t-image__loading"
+        >
+          <div
+            class="t-space t-space-align-center t-space-vertical"
+            style="gap: 8px;"
+          >
+            
+            
+            <div
+              class="t-space-item"
+            >
+              <svg
+                class="t-icon t-icon-image"
+                fill="none"
+                height="1em"
+                style="font-size: 24px;"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M2 2H22V22H2V2ZM4 20H17.5858L9 11.4142L4 16.4142V20ZM20 19.5858V4H4V13.5858L9 8.58579L20 19.5858ZM15.5469 7C14.9946 7 14.5469 7.44772 14.5469 8C14.5469 8.55228 14.9946 9 15.5469 9C16.0992 9 16.5469 8.55228 16.5469 8C16.5469 7.44772 16.0992 7 15.5469 7ZM12.5469 8C12.5469 6.34315 13.89 5 15.5469 5C17.2037 5 18.5469 6.34315 18.5469 8C18.5469 9.65685 17.2037 11 15.5469 11C13.89 11 12.5469 9.65685 12.5469 8Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            <!---->
+            
+            
+            <div
+              class="t-space-item"
+            >
+              图片加载中
+            </div>
+            <!---->
+            
+            
+          </div>
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <div
+        class="t-image-viewer__trigger-hover"
+      >
+        <span>
+          <svg
+            class="t-icon t-icon-browse t-image-viewer__trigger-icon"
+            fill="none"
+            height="1em"
+            style="font-size: 1.4em;"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <g
+              clipPath="url(#clip0_8726_7319)"
+            >
+              <path
+                d="M2.09675 12C3.53842 16.0792 7.42915 19 11.9996 19C16.57 19 20.4607 16.0792 21.9024 12C20.4607 7.92079 16.57 5 11.9996 5C7.42915 5 3.53842 7.92079 2.09675 12ZM0.0892162 11.696C1.69842 6.65364 6.42102 3 11.9996 3C17.5781 3 22.3007 6.65364 23.9099 11.696L24.007 12L23.9099 12.304C22.3007 17.3464 17.5781 21 11.9996 21C6.42102 21 1.69842 17.3464 0.0892162 12.304L-0.0078125 12L0.0892162 11.696ZM11.9999 9C10.343 9 8.99989 10.3431 8.99989 12C8.99989 13.6569 10.343 15 11.9999 15C13.6567 15 14.9999 13.6569 14.9999 12C14.9999 10.3431 13.6567 9 11.9999 9ZM6.99989 12C6.99989 9.23858 9.23846 7 11.9999 7C14.7613 7 16.9999 9.23858 16.9999 12C16.9999 14.7614 14.7613 17 11.9999 17C9.23846 17 6.99989 14.7614 6.99989 12Z"
+                fill="currentColor"
+              />
+            </g>
+          </svg>
+          预览
+        </span>
+      </div>
+    </div>
     <!--teleport start-->
     <transition-stub
       appear="false"
@@ -1660,7 +1743,90 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
     <!---->
     <!---->
     
-    <!---->
+    <div
+      class="t-image-viewer__trigger"
+    >
+      <div
+        class="t-image__wrapper t-image__wrapper--shape-square t-image-viewer__trigger-img"
+        fallback=""
+        referrerpolicy="strict-origin-when-cross-origin"
+      >
+        <!---->
+        <!---->
+        <!---->
+        <img
+          alt="preview"
+          class="t-image t-image--fit-fill t-image--position-center"
+          referrerpolicy="strict-origin-when-cross-origin"
+          src="error url"
+        />
+        <div
+          class="t-image__loading"
+        >
+          <div
+            class="t-space t-space-align-center t-space-vertical"
+            style="gap: 8px;"
+          >
+            
+            
+            <div
+              class="t-space-item"
+            >
+              <svg
+                class="t-icon t-icon-image"
+                fill="none"
+                height="1em"
+                style="font-size: 24px;"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M2 2H22V22H2V2ZM4 20H17.5858L9 11.4142L4 16.4142V20ZM20 19.5858V4H4V13.5858L9 8.58579L20 19.5858ZM15.5469 7C14.9946 7 14.5469 7.44772 14.5469 8C14.5469 8.55228 14.9946 9 15.5469 9C16.0992 9 16.5469 8.55228 16.5469 8C16.5469 7.44772 16.0992 7 15.5469 7ZM12.5469 8C12.5469 6.34315 13.89 5 15.5469 5C17.2037 5 18.5469 6.34315 18.5469 8C18.5469 9.65685 17.2037 11 15.5469 11C13.89 11 12.5469 9.65685 12.5469 8Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            <!---->
+            
+            
+            <div
+              class="t-space-item"
+            >
+              图片加载中
+            </div>
+            <!---->
+            
+            
+          </div>
+        </div>
+        <!---->
+        <!---->
+      </div>
+      <div
+        class="t-image-viewer__trigger-hover"
+      >
+        <span>
+          <svg
+            class="t-icon t-icon-browse t-image-viewer__trigger-icon"
+            fill="none"
+            height="1em"
+            style="font-size: 1.4em;"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <g
+              clipPath="url(#clip0_8726_7319)"
+            >
+              <path
+                d="M2.09675 12C3.53842 16.0792 7.42915 19 11.9996 19C16.57 19 20.4607 16.0792 21.9024 12C20.4607 7.92079 16.57 5 11.9996 5C7.42915 5 3.53842 7.92079 2.09675 12ZM0.0892162 11.696C1.69842 6.65364 6.42102 3 11.9996 3C17.5781 3 22.3007 6.65364 23.9099 11.696L24.007 12L23.9099 12.304C22.3007 17.3464 17.5781 21 11.9996 21C6.42102 21 1.69842 17.3464 0.0892162 12.304L-0.0078125 12L0.0892162 11.696ZM11.9999 9C10.343 9 8.99989 10.3431 8.99989 12C8.99989 13.6569 10.343 15 11.9999 15C13.6567 15 14.9999 13.6569 14.9999 12C14.9999 10.3431 13.6567 9 11.9999 9ZM6.99989 12C6.99989 9.23858 9.23846 7 11.9999 7C14.7613 7 16.9999 9.23858 16.9999 12C16.9999 14.7614 14.7613 17 11.9999 17C9.23846 17 6.99989 14.7614 6.99989 12Z"
+                fill="currentColor"
+              />
+            </g>
+          </svg>
+          预览
+        </span>
+      </div>
+    </div>
     <!--teleport start-->
     <transition-stub
       appear="false"

From 819d259b55b7e6a018f5039613f8ec5cf49c7cd7 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Mon, 8 Sep 2025 11:40:27 +0000
Subject: [PATCH 05/12] chore: update common

---
 packages/common | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/common b/packages/common
index fcbb0bbdcf..adb567085e 160000
--- a/packages/common
+++ b/packages/common
@@ -1 +1 @@
-Subproject commit fcbb0bbdcfaa4e67d85a90db30b01bbda54e31d4
+Subproject commit adb567085e1b813b2f01e9fba3e3f4398b84fb4c

From fa0a01207d549c3af9e17db14c92b8f74653463e Mon Sep 17 00:00:00 2001
From: Wesley <985189328@qq.com>
Date: Tue, 9 Sep 2025 12:34:53 +0800
Subject: [PATCH 06/12] chore: optimize

---
 .../components/image-viewer/image-viewer.tsx    | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/components/image-viewer/image-viewer.tsx b/packages/components/image-viewer/image-viewer.tsx
index 9d3bf2dcf7..b3e23dfb34 100644
--- a/packages/components/image-viewer/image-viewer.tsx
+++ b/packages/components/image-viewer/image-viewer.tsx
@@ -227,15 +227,18 @@ export default defineComponent({
     };
 
     const renderDefaultTrigger = () => {
-      // 如果不存在图片 使用t-image 展示无法展示图片的错误
-      // images 的 vo 是 ImageInfo
-      const firstImage = images.value[0] || 'error url';
-      const imageSrc =
-        typeof firstImage === 'string' ? firstImage : (firstImage as any).mainImage || (firstImage as any).thumbnail;
+      const firstImage = images.value[0] || '';
+      const imageSrc = typeof firstImage === 'string' ? firstImage : firstImage.mainImage || firstImage.thumbnail;
       return (
         <div class={`${COMPONENT_NAME.value}__trigger`}>
-          <t-image src={imageSrc} alt="preview" class={`${COMPONENT_NAME.value}__trigger-img`} onClick={openHandler} />
-          <div class={`${COMPONENT_NAME.value}__trigger-hover`} onClick={openHandler}>
+          <Image
+            src={imageSrc}
+            alt="preview"
+            fit="contain"
+            class={`${COMPONENT_NAME.value}__trigger-img`}
+            onClick={openHandler}
+          />
+          <div class={`${COMPONENT_NAME.value}__trigger--hover`} onClick={openHandler}>
             <span>
               <BrowseIcon size="1.4em" class={`${COMPONENT_NAME.value}__trigger-icon`} />
               预览

From 7b99a0e4ab8599524289395e658f3e0c6b735e23 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Tue, 9 Sep 2025 04:44:20 +0000
Subject: [PATCH 07/12] chore: update snapshot

---
 .../__tests__/__snapshots__/upload.test.tsx.snap     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/components/upload/__tests__/__snapshots__/upload.test.tsx.snap b/packages/components/upload/__tests__/__snapshots__/upload.test.tsx.snap
index e7b37e1cc7..d9db9ad88a 100644
--- a/packages/components/upload/__tests__/__snapshots__/upload.test.tsx.snap
+++ b/packages/components/upload/__tests__/__snapshots__/upload.test.tsx.snap
@@ -1130,9 +1130,9 @@ exports[`Upload Component > props.theme: theme=file-flow works fine 1`] = `
         <!---->
         <img
           alt="preview"
-          class="t-image t-image--fit-fill t-image--position-center"
+          class="t-image t-image--fit-contain t-image--position-center"
           referrerpolicy="strict-origin-when-cross-origin"
-          src="error url"
+          src=""
         />
         <div
           class="t-image__loading"
@@ -1177,7 +1177,7 @@ exports[`Upload Component > props.theme: theme=file-flow works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-image-viewer__trigger-hover"
+        class="t-image-viewer__trigger--hover"
       >
         <span>
           <svg
@@ -1756,9 +1756,9 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
         <!---->
         <img
           alt="preview"
-          class="t-image t-image--fit-fill t-image--position-center"
+          class="t-image t-image--fit-contain t-image--position-center"
           referrerpolicy="strict-origin-when-cross-origin"
-          src="error url"
+          src=""
         />
         <div
           class="t-image__loading"
@@ -1803,7 +1803,7 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-image-viewer__trigger-hover"
+        class="t-image-viewer__trigger--hover"
       >
         <span>
           <svg

From 9d3504ea3d6682e11945f63073753becde2e3621 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Fri, 19 Sep 2025 05:41:20 +0000
Subject: [PATCH 08/12] chore: update common

---
 packages/common | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/common b/packages/common
index adb567085e..bdb417c8c6 160000
--- a/packages/common
+++ b/packages/common
@@ -1 +1 @@
-Subproject commit adb567085e1b813b2f01e9fba3e3f4398b84fb4c
+Subproject commit bdb417c8c61f90734ed11a9519a6cf0816c635c0

From a8ce5571289693356d87769faadfd410d64418d8 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Thu, 25 Sep 2025 15:50:00 +0800
Subject: [PATCH 09/12] chore: update demo

---
 .../image-viewer/_example-ts/base.vue         |  12 +-
 .../components/image-viewer/_example/base.vue |  13 +-
 .../__snapshots__/upload.test.tsx.snap        | 130 +++++++++++++++---
 3 files changed, 114 insertions(+), 41 deletions(-)

diff --git a/packages/components/image-viewer/_example-ts/base.vue b/packages/components/image-viewer/_example-ts/base.vue
index ec342fece2..40cb24a6ad 100644
--- a/packages/components/image-viewer/_example-ts/base.vue
+++ b/packages/components/image-viewer/_example-ts/base.vue
@@ -1,21 +1,11 @@
 <template>
   <div>
     <div class="tdesign-demo-image-viewer__base">
-      <t-image-viewer :images="[img]">
-        <template #trigger="{ open }">
-          <div class="tdesign-demo-image-viewer__ui-image">
-            <img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
-            <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
-              <span><BrowseIcon size="1.4em" /> 预览</span>
-            </div>
-          </div>
-        </template>
-      </t-image-viewer>
+      <t-image-viewer :images="[img]"></t-image-viewer>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { BrowseIcon } from 'tdesign-icons-vue-next';
 const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
 </script>
 <style scoped>
diff --git a/packages/components/image-viewer/_example/base.vue b/packages/components/image-viewer/_example/base.vue
index 51b6717119..6dc84bb93a 100644
--- a/packages/components/image-viewer/_example/base.vue
+++ b/packages/components/image-viewer/_example/base.vue
@@ -1,22 +1,11 @@
 <template>
   <div>
     <div class="tdesign-demo-image-viewer__base">
-      <t-image-viewer :images="[img]">
-        <template #trigger="{ open }">
-          <div class="tdesign-demo-image-viewer__ui-image">
-            <img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
-            <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
-              <span><BrowseIcon size="1.4em" /> 预览</span>
-            </div>
-          </div>
-        </template>
-      </t-image-viewer>
+      <t-image-viewer :images="[img]"></t-image-viewer>
     </div>
   </div>
 </template>
 <script setup>
-import { BrowseIcon } from 'tdesign-icons-vue-next';
-
 const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
 </script>
 <style scoped>
diff --git a/packages/components/upload/__tests__/__snapshots__/upload.test.tsx.snap b/packages/components/upload/__tests__/__snapshots__/upload.test.tsx.snap
index 85fd670f83..4c165749de 100644
--- a/packages/components/upload/__tests__/__snapshots__/upload.test.tsx.snap
+++ b/packages/components/upload/__tests__/__snapshots__/upload.test.tsx.snap
@@ -1301,14 +1301,40 @@ exports[`Upload Component > props.theme: theme=file-flow works fine 1`] = `
                 class="t-icon t-icon-image"
                 fill="none"
                 height="1em"
-                style="font-size: 24px;"
+                style="fill: none; font-size: 24px;"
                 viewBox="0 0 24 24"
                 width="1em"
               >
-                <path
-                  d="M2 2H22V22H2V2ZM4 20H17.5858L9 11.4142L4 16.4142V20ZM20 19.5858V4H4V13.5858L9 8.58579L20 19.5858ZM15.5469 7C14.9946 7 14.5469 7.44772 14.5469 8C14.5469 8.55228 14.9946 9 15.5469 9C16.0992 9 16.5469 8.55228 16.5469 8C16.5469 7.44772 16.0992 7 15.5469 7ZM12.5469 8C12.5469 6.34315 13.89 5 15.5469 5C17.2037 5 18.5469 6.34315 18.5469 8C18.5469 9.65685 17.2037 11 15.5469 11C13.89 11 12.5469 9.65685 12.5469 8Z"
-                  fill="currentColor"
-                />
+                <g
+                  id="image"
+                >
+                  <path
+                    d="M3 21H20L9 10L3 16V21Z"
+                    fill="transparent"
+                    id="fill1"
+                  />
+                  <circle
+                    cx="15.75"
+                    cy="8.25"
+                    fill="transparent"
+                    id="fill2"
+                    r="2"
+                  />
+                  <path
+                    d="M3 16V3H21V21H20M3 16V21H20M3 16L9 10L20 21"
+                    id="stroke1"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  />
+                  <circle
+                    cx="15.75"
+                    cy="8.25"
+                    id="stroke2"
+                    r="2"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  />
+                </g>
               </svg>
             </div>
             <!---->
@@ -1335,16 +1361,37 @@ exports[`Upload Component > props.theme: theme=file-flow works fine 1`] = `
             class="t-icon t-icon-browse t-image-viewer__trigger-icon"
             fill="none"
             height="1em"
-            style="font-size: 1.4em;"
+            style="fill: none; font-size: 1.4em;"
             viewBox="0 0 24 24"
             width="1em"
           >
             <g
-              clipPath="url(#clip0_8726_7319)"
+              clipPath="url(#clip0_543_7945)"
+              id="browse"
             >
               <path
-                d="M2.09675 12C3.53842 16.0792 7.42915 19 11.9996 19C16.57 19 20.4607 16.0792 21.9024 12C20.4607 7.92079 16.57 5 11.9996 5C7.42915 5 3.53842 7.92079 2.09675 12ZM0.0892162 11.696C1.69842 6.65364 6.42102 3 11.9996 3C17.5781 3 22.3007 6.65364 23.9099 11.696L24.007 12L23.9099 12.304C22.3007 17.3464 17.5781 21 11.9996 21C6.42102 21 1.69842 17.3464 0.0892162 12.304L-0.0078125 12L0.0892162 11.696ZM11.9999 9C10.343 9 8.99989 10.3431 8.99989 12C8.99989 13.6569 10.343 15 11.9999 15C13.6567 15 14.9999 13.6569 14.9999 12C14.9999 10.3431 13.6567 9 11.9999 9ZM6.99989 12C6.99989 9.23858 9.23846 7 11.9999 7C14.7613 7 16.9999 9.23858 16.9999 12C16.9999 14.7614 14.7613 17 11.9999 17C9.23846 17 6.99989 14.7614 6.99989 12Z"
-                fill="currentColor"
+                d="M11.9997 4C6.86881 4 2.52275 7.36017 1.04199 12C2.52275 16.6398 6.86881 20 11.9997 20C17.1306 20 21.4766 16.6398 22.9574 12C21.4766 7.36017 17.1306 4 11.9997 4Z"
+                fill="transparent"
+                id="fill1"
+              />
+              <path
+                d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
+                fill="transparent"
+                id="fill2"
+              />
+              <path
+                d="M11.9997 4C6.86881 4 2.52275 7.36017 1.04199 12C2.52275 16.6398 6.86881 20 11.9997 20C17.1306 20 21.4766 16.6398 22.9574 12C21.4766 7.36017 17.1306 4 11.9997 4Z"
+                id="stroke1"
+                stroke="currentColor"
+                stroke-linecap="square"
+                stroke-width="2"
+              />
+              <path
+                d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
+                id="stroke2"
+                stroke="currentColor"
+                stroke-linecap="square"
+                stroke-width="2"
               />
             </g>
           </svg>
@@ -2168,14 +2215,40 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
                 class="t-icon t-icon-image"
                 fill="none"
                 height="1em"
-                style="font-size: 24px;"
+                style="fill: none; font-size: 24px;"
                 viewBox="0 0 24 24"
                 width="1em"
               >
-                <path
-                  d="M2 2H22V22H2V2ZM4 20H17.5858L9 11.4142L4 16.4142V20ZM20 19.5858V4H4V13.5858L9 8.58579L20 19.5858ZM15.5469 7C14.9946 7 14.5469 7.44772 14.5469 8C14.5469 8.55228 14.9946 9 15.5469 9C16.0992 9 16.5469 8.55228 16.5469 8C16.5469 7.44772 16.0992 7 15.5469 7ZM12.5469 8C12.5469 6.34315 13.89 5 15.5469 5C17.2037 5 18.5469 6.34315 18.5469 8C18.5469 9.65685 17.2037 11 15.5469 11C13.89 11 12.5469 9.65685 12.5469 8Z"
-                  fill="currentColor"
-                />
+                <g
+                  id="image"
+                >
+                  <path
+                    d="M3 21H20L9 10L3 16V21Z"
+                    fill="transparent"
+                    id="fill1"
+                  />
+                  <circle
+                    cx="15.75"
+                    cy="8.25"
+                    fill="transparent"
+                    id="fill2"
+                    r="2"
+                  />
+                  <path
+                    d="M3 16V3H21V21H20M3 16V21H20M3 16L9 10L20 21"
+                    id="stroke1"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  />
+                  <circle
+                    cx="15.75"
+                    cy="8.25"
+                    id="stroke2"
+                    r="2"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  />
+                </g>
               </svg>
             </div>
             <!---->
@@ -2202,16 +2275,37 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             class="t-icon t-icon-browse t-image-viewer__trigger-icon"
             fill="none"
             height="1em"
-            style="font-size: 1.4em;"
+            style="fill: none; font-size: 1.4em;"
             viewBox="0 0 24 24"
             width="1em"
           >
             <g
-              clipPath="url(#clip0_8726_7319)"
+              clipPath="url(#clip0_543_7945)"
+              id="browse"
             >
               <path
-                d="M2.09675 12C3.53842 16.0792 7.42915 19 11.9996 19C16.57 19 20.4607 16.0792 21.9024 12C20.4607 7.92079 16.57 5 11.9996 5C7.42915 5 3.53842 7.92079 2.09675 12ZM0.0892162 11.696C1.69842 6.65364 6.42102 3 11.9996 3C17.5781 3 22.3007 6.65364 23.9099 11.696L24.007 12L23.9099 12.304C22.3007 17.3464 17.5781 21 11.9996 21C6.42102 21 1.69842 17.3464 0.0892162 12.304L-0.0078125 12L0.0892162 11.696ZM11.9999 9C10.343 9 8.99989 10.3431 8.99989 12C8.99989 13.6569 10.343 15 11.9999 15C13.6567 15 14.9999 13.6569 14.9999 12C14.9999 10.3431 13.6567 9 11.9999 9ZM6.99989 12C6.99989 9.23858 9.23846 7 11.9999 7C14.7613 7 16.9999 9.23858 16.9999 12C16.9999 14.7614 14.7613 17 11.9999 17C9.23846 17 6.99989 14.7614 6.99989 12Z"
-                fill="currentColor"
+                d="M11.9997 4C6.86881 4 2.52275 7.36017 1.04199 12C2.52275 16.6398 6.86881 20 11.9997 20C17.1306 20 21.4766 16.6398 22.9574 12C21.4766 7.36017 17.1306 4 11.9997 4Z"
+                fill="transparent"
+                id="fill1"
+              />
+              <path
+                d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
+                fill="transparent"
+                id="fill2"
+              />
+              <path
+                d="M11.9997 4C6.86881 4 2.52275 7.36017 1.04199 12C2.52275 16.6398 6.86881 20 11.9997 20C17.1306 20 21.4766 16.6398 22.9574 12C21.4766 7.36017 17.1306 4 11.9997 4Z"
+                id="stroke1"
+                stroke="currentColor"
+                stroke-linecap="square"
+                stroke-width="2"
+              />
+              <path
+                d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
+                id="stroke2"
+                stroke="currentColor"
+                stroke-linecap="square"
+                stroke-width="2"
               />
             </g>
           </svg>

From 37d8ef4fe0712bfa0cc9e036436a599dcfb249b3 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Thu, 25 Sep 2025 16:13:44 +0800
Subject: [PATCH 10/12] chore: simplify demo

---
 .../image-viewer/_example-ts/base.vue         | 73 +---------------
 .../image-viewer/_example-ts/modeless.vue     | 82 +-----------------
 .../components/image-viewer/_example/base.vue | 73 +---------------
 .../image-viewer/_example/modeless.vue        | 84 +------------------
 .../components/image-viewer/image-viewer.tsx  |  6 +-
 5 files changed, 9 insertions(+), 309 deletions(-)

diff --git a/packages/components/image-viewer/_example-ts/base.vue b/packages/components/image-viewer/_example-ts/base.vue
index 40cb24a6ad..1539c98aa8 100644
--- a/packages/components/image-viewer/_example-ts/base.vue
+++ b/packages/components/image-viewer/_example-ts/base.vue
@@ -1,81 +1,12 @@
 <template>
-  <div>
-    <div class="tdesign-demo-image-viewer__base">
-      <t-image-viewer :images="[img]"></t-image-viewer>
-    </div>
+  <div class="tdesign-demo-image-viewer__base">
+    <t-image-viewer :images="[img]"></t-image-viewer>
   </div>
 </template>
 <script lang="ts" setup>
 const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
 </script>
 <style scoped>
-.tdesign-demo-image-viewer__ui-image {
-  width: 100%;
-  height: 100%;
-  display: inline-flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--td-radius-small);
-  overflow: hidden;
-}
-
-.tdesign-demo-image-viewer__ui-image--hover {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: var(--td-text-color-anti);
-  line-height: 22px;
-  transition: 0.2s;
-}
-
-.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
-  opacity: 1;
-  cursor: pointer;
-}
-
-.tdesign-demo-image-viewer__ui-image--img {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
-  cursor: pointer;
-  position: absolute;
-}
-
-.tdesign-demo-image-viewer__ui-image--footer {
-  padding: 0 16px;
-  height: 56px;
-  width: 100%;
-  line-height: 56px;
-  font-size: 16px;
-  position: absolute;
-  bottom: 0;
-  color: var(--td-text-color-anti);
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
-  display: flex;
-  box-sizing: border-box;
-}
-
-.tdesign-demo-image-viewer__ui-image--title {
-  flex: 1;
-}
-
-.tdesign-demo-popup__reference {
-  margin-left: 16px;
-}
-
-.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
-  cursor: pointer;
-}
-
 .tdesign-demo-image-viewer__base {
   width: 160px;
   height: 160px;
diff --git a/packages/components/image-viewer/_example-ts/modeless.vue b/packages/components/image-viewer/_example-ts/modeless.vue
index e9a7b2efd3..8be31adbb4 100644
--- a/packages/components/image-viewer/_example-ts/modeless.vue
+++ b/packages/components/image-viewer/_example-ts/modeless.vue
@@ -1,94 +1,14 @@
 <template>
   <div class="tdesign-demo-image-viewer__base">
-    <t-image-viewer v-model:visible="visible" draggable mode="modeless" :images="[img]">
-      <template #trigger>
-        <div class="tdesign-demo-image-viewer__ui-image">
-          <img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
-          <div class="tdesign-demo-image-viewer__ui-image--hover" @click="onOpen">
-            <span><BrowseIcon size="1.4em" /> 预览</span>
-          </div>
-        </div>
-      </template>
-    </t-image-viewer>
+    <t-image-viewer draggable mode="modeless" :images="[img]"> </t-image-viewer>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { BrowseIcon } from 'tdesign-icons-vue-next';
 const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
-const visible = ref(false);
-const onOpen = () => (visible.value = true);
 </script>
 
 <style scoped>
-.tdesign-demo-image-viewer__ui-image {
-  width: 100%;
-  height: 100%;
-  display: inline-flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--td-radius-small);
-  overflow: hidden;
-}
-
-.tdesign-demo-image-viewer__ui-image--hover {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: var(--td-text-color-anti);
-  line-height: 22px;
-  transition: 0.2s;
-}
-
-.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
-  opacity: 1;
-  cursor: pointer;
-}
-
-.tdesign-demo-image-viewer__ui-image--img {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
-  cursor: pointer;
-  position: absolute;
-}
-
-.tdesign-demo-image-viewer__ui-image--footer {
-  padding: 0 16px;
-  height: 56px;
-  width: 100%;
-  line-height: 56px;
-  font-size: 16px;
-  position: absolute;
-  bottom: 0;
-  color: var(--td-text-color-anti);
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
-  display: flex;
-  box-sizing: border-box;
-}
-
-.tdesign-demo-image-viewer__ui-image--title {
-  flex: 1;
-}
-
-.tdesign-demo-popup__reference {
-  margin-left: 16px;
-}
-
-.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
-  cursor: pointer;
-}
-
 .tdesign-demo-image-viewer__base {
   width: 160px;
   height: 160px;
diff --git a/packages/components/image-viewer/_example/base.vue b/packages/components/image-viewer/_example/base.vue
index 6dc84bb93a..eb1d07001f 100644
--- a/packages/components/image-viewer/_example/base.vue
+++ b/packages/components/image-viewer/_example/base.vue
@@ -1,81 +1,12 @@
 <template>
-  <div>
-    <div class="tdesign-demo-image-viewer__base">
-      <t-image-viewer :images="[img]"></t-image-viewer>
-    </div>
+  <div class="tdesign-demo-image-viewer__base">
+    <t-image-viewer :images="[img]"></t-image-viewer>
   </div>
 </template>
 <script setup>
 const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
 </script>
 <style scoped>
-.tdesign-demo-image-viewer__ui-image {
-  width: 100%;
-  height: 100%;
-  display: inline-flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--td-radius-small);
-  overflow: hidden;
-}
-
-.tdesign-demo-image-viewer__ui-image--hover {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: var(--td-text-color-anti);
-  line-height: 22px;
-  transition: 0.2s;
-}
-
-.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
-  opacity: 1;
-  cursor: pointer;
-}
-
-.tdesign-demo-image-viewer__ui-image--img {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
-  cursor: pointer;
-  position: absolute;
-}
-
-.tdesign-demo-image-viewer__ui-image--footer {
-  padding: 0 16px;
-  height: 56px;
-  width: 100%;
-  line-height: 56px;
-  font-size: 16px;
-  position: absolute;
-  bottom: 0;
-  color: var(--td-text-color-anti);
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
-  display: flex;
-  box-sizing: border-box;
-}
-
-.tdesign-demo-image-viewer__ui-image--title {
-  flex: 1;
-}
-
-.tdesign-demo-popup__reference {
-  margin-left: 16px;
-}
-
-.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
-  cursor: pointer;
-}
-
 .tdesign-demo-image-viewer__base {
   width: 160px;
   height: 160px;
diff --git a/packages/components/image-viewer/_example/modeless.vue b/packages/components/image-viewer/_example/modeless.vue
index 85736484d6..76e5282e24 100644
--- a/packages/components/image-viewer/_example/modeless.vue
+++ b/packages/components/image-viewer/_example/modeless.vue
@@ -1,96 +1,14 @@
 <template>
   <div class="tdesign-demo-image-viewer__base">
-    <t-image-viewer v-model:visible="visible" draggable mode="modeless" :images="[img]">
-      <template #trigger>
-        <div class="tdesign-demo-image-viewer__ui-image">
-          <img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
-          <div class="tdesign-demo-image-viewer__ui-image--hover" @click="onOpen">
-            <span><BrowseIcon size="1.4em" /> 预览</span>
-          </div>
-        </div>
-      </template>
-    </t-image-viewer>
+    <t-image-viewer draggable mode="modeless" :images="[img]"> </t-image-viewer>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { BrowseIcon } from 'tdesign-icons-vue-next';
-
 const img = 'https://tdesign.gtimg.com/demo/demo-image-1.png';
-
-const visible = ref(false);
-const onOpen = () => (visible.value = true);
 </script>
 
 <style scoped>
-.tdesign-demo-image-viewer__ui-image {
-  width: 100%;
-  height: 100%;
-  display: inline-flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--td-radius-small);
-  overflow: hidden;
-}
-
-.tdesign-demo-image-viewer__ui-image--hover {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: var(--td-text-color-anti);
-  line-height: 22px;
-  transition: 0.2s;
-}
-
-.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
-  opacity: 1;
-  cursor: pointer;
-}
-
-.tdesign-demo-image-viewer__ui-image--img {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
-  cursor: pointer;
-  position: absolute;
-}
-
-.tdesign-demo-image-viewer__ui-image--footer {
-  padding: 0 16px;
-  height: 56px;
-  width: 100%;
-  line-height: 56px;
-  font-size: 16px;
-  position: absolute;
-  bottom: 0;
-  color: var(--td-text-color-anti);
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
-  display: flex;
-  box-sizing: border-box;
-}
-
-.tdesign-demo-image-viewer__ui-image--title {
-  flex: 1;
-}
-
-.tdesign-demo-popup__reference {
-  margin-left: 16px;
-}
-
-.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
-  cursor: pointer;
-}
-
 .tdesign-demo-image-viewer__base {
   width: 160px;
   height: 160px;
diff --git a/packages/components/image-viewer/image-viewer.tsx b/packages/components/image-viewer/image-viewer.tsx
index 40fca5f9c6..4a1c948ce8 100644
--- a/packages/components/image-viewer/image-viewer.tsx
+++ b/packages/components/image-viewer/image-viewer.tsx
@@ -94,7 +94,7 @@ export default defineComponent({
       props.onDownload ? props.onDownload(url) : downloadFile(url);
     };
 
-    const openHandler = (index: number) => {
+    const openHandler = (index?: number) => {
       if (isNumber(index)) {
         onImgClick(index);
       }
@@ -241,9 +241,9 @@ export default defineComponent({
             alt="preview"
             fit="contain"
             class={`${COMPONENT_NAME.value}__trigger-img`}
-            onClick={openHandler}
+            onClick={() => openHandler()}
           />
-          <div class={`${COMPONENT_NAME.value}__trigger--hover`} onClick={openHandler}>
+          <div class={`${COMPONENT_NAME.value}__trigger--hover`} onClick={() => openHandler()}>
             <span>
               <BrowseIcon size="1.4em" class={`${COMPONENT_NAME.value}__trigger-icon`} />
               预览

From e8dc6f6a2b02021898cde50e886fd24850720633 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Thu, 25 Sep 2025 16:26:27 +0800
Subject: [PATCH 11/12] chore: optimize docs

---
 packages/components/image-viewer/image-viewer.md | 2 +-
 packages/components/image-viewer/props.ts        | 2 +-
 packages/components/image-viewer/type.ts         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/image-viewer/image-viewer.md b/packages/components/image-viewer/image-viewer.md
index 21175d748a..70adb2eb19 100644
--- a/packages/components/image-viewer/image-viewer.md
+++ b/packages/components/image-viewer/image-viewer.md
@@ -20,7 +20,7 @@ mode | String | modal | 模态预览（modal）和非模态预览（modeless)。
 navigationArrow | Boolean / Slot / Function | true | 切换预览图片的左图标，可自定义。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 showOverlay | Boolean | undefined | 是否显示遮罩层。`mode=modal` 时，默认显示；`mode=modeless` 时，默认不显示 | N
 title | String / Slot / Function | - | 预览标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
-trigger | String / Slot / Function | - | 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义。TS 类型：`TNode \| TNode<{ open: (index?: number) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
+trigger | String / Slot / Function | - | 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义，默认为预览图片的缩略图。TS 类型：`TNode \| TNode<{ open: (index?: number) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 viewerScale | Object | - | 限制预览器缩放的最小宽度和最小高度，仅 `mode=modeless` 时有效。TS 类型：`ImageViewerScale` `interface ImageViewerScale { minWidth: number; minHeight: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/image-viewer/type.ts) | N
 visible | Boolean | false | 隐藏/显示预览。支持语法糖 `v-model` 或 `v-model:visible` | N
 defaultVisible | Boolean | false | 隐藏/显示预览。非受控属性 | N
diff --git a/packages/components/image-viewer/props.ts b/packages/components/image-viewer/props.ts
index 1171399808..8684a9d092 100644
--- a/packages/components/image-viewer/props.ts
+++ b/packages/components/image-viewer/props.ts
@@ -89,7 +89,7 @@ export default {
   title: {
     type: [String, Function] as PropType<TdImageViewerProps['title']>,
   },
-  /** 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义 */
+  /** 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义, 默认为预览图片的缩略图 */
   trigger: {
     type: [String, Function] as PropType<TdImageViewerProps['trigger']>,
   },
diff --git a/packages/components/image-viewer/type.ts b/packages/components/image-viewer/type.ts
index 7e91856a09..66087e9fe6 100644
--- a/packages/components/image-viewer/type.ts
+++ b/packages/components/image-viewer/type.ts
@@ -80,7 +80,7 @@ export interface TdImageViewerProps {
    */
   title?: string | TNode;
   /**
-   * 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义
+   * 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义，默认为预览图片的缩略图
    */
   trigger?: TNode | TNode<{ open: (index?: number) => void }>;
   /**

From 616d028bf0dbb8a8c3d795cb78164571f5004a83 Mon Sep 17 00:00:00 2001
From: tdesign-bot <tdesign@tencent.com>
Date: Thu, 25 Sep 2025 09:00:55 +0000
Subject: [PATCH 12/12] chore: stash changelog [ci skip]

---
 packages/tdesign-vue-next/.changelog/pr-5935.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 packages/tdesign-vue-next/.changelog/pr-5935.md

diff --git a/packages/tdesign-vue-next/.changelog/pr-5935.md b/packages/tdesign-vue-next/.changelog/pr-5935.md
new file mode 100644
index 0000000000..c9b242e1ae
--- /dev/null
+++ b/packages/tdesign-vue-next/.changelog/pr-5935.md
@@ -0,0 +1,6 @@
+---
+pr_number: 5935
+contributor: EthanShen10086
+---
+
+- feat(ImageViewer): 新增默认 trigger ，默认为当前使用的图片作为默认 trigger，降低组件的使用难度，具体参考相关示例改动 @EthanShen10086 ([#5935](https://github.com/Tencent/tdesign-vue-next/pull/5935))