ImageViewer sfc to tsx，支持预加载，支持设置默认位置 (#1422)

* refactor(image-viewer): sfc to tsx，添加tsx文件

* feat(image-viewer): 添加图片预加载功能，节省资源

* feat(image-viewer): 支持设置图片对齐方式

* refactor(image-viewer): 删除无用文件

* refactor(image-viewer): 优化代码

* test(image-viewer): 更新测试代码

* docs(image-viewer): 更新文档

* refactor(image-viewer): 更新类型文件

* refactor(image-viewer): 删除无用的文件

* refactor(image-viewer): 优化代码使用useTNodeJSX

* test: update snapshots

* refactor(image-viewer): 更新_common索引

src/config-provider/__test__/__snapshots__/demo.test.jsx.snap

@@ -320,7 +320,7 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
             multiple=""
             type="file"
           />
-          <!--v-if-->
+          <!---->
         </div>
       </div>
       
@@ -7103,7 +7103,7 @@ exports[`ConfigProvider > ConfigProvider uploadEnVue demo works fine 1`] = `
         multiple=""
         type="file"
       />
-      <!--v-if-->
+      <!---->
     </div>
   </div>
   

src/form/__test__/__snapshots__/demo.test.jsx.snap

@@ -1502,7 +1502,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
               multiple=""
               type="file"
             />
-            <!--v-if-->
+            <!---->
           </div>
           
         </div>
@@ -3191,7 +3191,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                     multiple=""
                     type="file"
                   />
-                  <!--v-if-->
+                  <!---->
                 </div>
                 
               </div>
@@ -4733,7 +4733,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
               multiple=""
               type="file"
             />
-            <!--v-if-->
+            <!---->
           </div>
           
         </div>

src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap

@@ -21,7 +21,7 @@ exports[`ImageViewer > ImageViewer baseVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--v-if-->
+  <!---->
   
 </div>
 `;
@@ -82,21 +82,69 @@ exports[`ImageViewer > ImageViewer mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--v-if-->
+      <!---->
       
       
     </div>
   </div>
   <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    class="tdesign-mobile-demo-block"
+    data-v-ef8302fa=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        02 组件类型
+      </h2>
+      <p
+        class="tdesign-mobile-demo-block__summary"
+      >
+        图片预览类型，可设置垂直对齐方式
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot with-padding"
+    >
+      
+      
+      <button
+        aria-disabled="false"
+        class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        role="button"
+        type="button"
+      >
+        <!---->
+        <span
+          class="t-button__content"
+        >
+          
+           基础图片预览 + 对齐方式 
+          
+        </span>
+        <!---->
+      </button>
+      <!---->
+      
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block"
     data-v-ef8302fa=""
   >
     <div
       class="tdesign-mobile-demo-block__header"
     >
-      <!--v-if-->
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        03 组件类型
+      </h2>
       <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+        class="tdesign-mobile-demo-block__summary"
       >
         带操作图片预览
       </p>
@@ -122,7 +170,7 @@ exports[`ImageViewer > ImageViewer mobileVue demo works fine 1`] = `
         </span>
         <!---->
       </button>
-      <!--v-if-->
+      <!---->
       
       
     </div>
@@ -151,7 +199,7 @@ exports[`ImageViewer > ImageViewer operationVue demo works fine 1`] = `
     </span>
     <!---->
   </button>
-  <!--v-if-->
+  <!---->
   
 </div>
 `;

src/image-viewer/__test__/index.test.jsx

@@ -2,7 +2,7 @@ import { nextTick, ref } from 'vue';
 import { mount } from '@vue/test-utils';
 import { AddCircleIcon } from 'tdesign-icons-vue-next';
 import { describe, it, vi } from 'vitest';
-import ImageViewer from '../image-viewer.vue';
+import ImageViewer from '../image-viewer';
 import { Swiper } from '../../swiper';
 import { trigger, triggerZoom } from './touch';
 

src/image-viewer/demos/align.vue

@@ -0,0 +1,26 @@
+<template>
+  <t-button block size="large" variant="outline" theme="primary" @click="visible = true">
+    基础图片预览 + 对齐方式
+  </t-button>
+  <t-image-viewer v-model:images="images" v-model:visible="visible" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const visible = ref(false);
+const images = [
+  {
+    url: 'https://tdesign.gtimg.com/mobile/demos/swiper1.png',
+    align: 'start',
+  },
+  {
+    url: 'https://tdesign.gtimg.com/mobile/demos/swiper2.png',
+    align: 'end',
+  },
+  {
+    url: 'https://tdesign.gtimg.com/mobile/demos/swiper2.png',
+    align: 'center',
+  },
+];
+</script>

src/image-viewer/demos/mobile.vue

@@ -5,13 +5,17 @@
     <tdesign-demo-block title="01 组件类型" summary="图片预览类型" padding="true">
       <BaseDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="带操作图片预览" padding="true">
+    <tdesign-demo-block title="02 组件类型" summary="图片预览类型，可设置垂直对齐方式" padding="true">
+      <AlignDemo />
+    </tdesign-demo-block>
+    <tdesign-demo-block title="03 组件类型" summary="带操作图片预览" padding="true">
       <operationDemo />
     </tdesign-demo-block>
   </div>
 </template>
 <script lang="ts" setup>
 import BaseDemo from './base.vue';
+import AlignDemo from './align.vue';
 import operationDemo from './operation.vue';
 </script>
 

src/image-viewer/image-viewer-interface.ts

@@ -0,0 +1,4 @@
+export interface ImageInfo {
+  url: string;
+  align: 'start' | 'center' | 'end';
+}

src/image-viewer/image-viewer.en-US.md

@@ -1,18 +1,20 @@
 :: BASE_DOC ::
 
 ## API
+
 ### ImageViewer Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 closeBtn | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 deleteBtn | Boolean / Slot / Function | false | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-images | Array | [] | Typescript：`Array<string>` | N
+images | Array | [] | Typescript：`Array<string\|{url: string;align: 'start' \| 'center' \| 'end';}>` | N
 index | Number | - | `v-model:index` is supported | N
 defaultIndex | Number | - | uncontrolled property | N
 maxZoom | Number | 3 | Typescript：`Number` | N
 showIndex | Boolean | false | \- | N
-visible | Boolean | false | `v-model` and `v-model:visible` is supported | N
+visible | Boolean | false | hide or show image viewer。`v-model` and `v-model:visible` is supported | N
+defaultVisible | Boolean | false | hide or show image viewer。uncontrolled property | N
 onClose | Function |  | Typescript：`(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number }) => void`<br/> | N
 onDelete | Function |  | Typescript：`(index: Number) => void`<br/> | N
 onIndexChange | Function |  | Typescript：`(index: number, context: { trigger: 'prev' \| 'next' }) => void`<br/> | N

src/image-viewer/image-viewer.md

@@ -1,18 +1,20 @@
 :: BASE_DOC ::
 
 ## API
+
 ### ImageViewer Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 closeBtn | Boolean / Slot / Function | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 deleteBtn | Boolean / Slot / Function | false | 是否显示删除操作，前提需要开启页码。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-images | Array | [] | 图片数组。TS 类型：`Array<string>` | N
+images | Array | [] | 图片数组。TS 类型：`Array<string\|{url: string;align: 'start' \| 'center' \| 'end';}>` | N
 index | Number | - | 当前预览图片所在的下标。支持语法糖 `v-model:index` | N
 defaultIndex | Number | - | 当前预览图片所在的下标。非受控属性 | N
 maxZoom | Number | 3 | 【开发中】最大放大比例。TS 类型：`Number` | N
 showIndex | Boolean | false | 是否显示页码 | N
 visible | Boolean | false | 隐藏/显示预览。支持语法糖 `v-model` 或 `v-model:visible` | N
+defaultVisible | Boolean | false | 隐藏/显示预览。非受控属性 | N
 onClose | Function |  | TS 类型：`(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number }) => void`<br/>关闭时触发 | N
 onDelete | Function |  | TS 类型：`(index: Number) => void`<br/>点击删除操作按钮时触发 | N
 onIndexChange | Function |  | TS 类型：`(index: number, context: { trigger: 'prev' \| 'next' }) => void`<br/>预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 | N