feat: 添加默认的trigger代码

Author: EthanShen10086

packages/common

@@ -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) && (

packages/components/image-viewer/image-viewer.tsx

@@ -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: {