feat: enhance image preview functionality

packages/web-vue/components/image/README.en-US.md

@@ -80,6 +80,11 @@ description: Used to show and preview pictures.
 |closable|Whether to show close button|`boolean`|`true`|
 |actions-layout|Layout of action list|`string[]`|`[  'fullScreen',  'rotateRight',  'rotateLeft',  'zoomIn',  'zoomOut',  'originalSize',]`|
 |popup-container|Set the mount point of the pop-up box, the same as the `to` of `teleport`, the default value is document.body|`HTMLElement`|`-`|
+|esc-to-close|Whether to support the ESC key to close the preview|`boolean`|`true`|
+|wheel-zoom|Whether to enable wheel zoom|`boolean`|`true`|
+|keyboard|Whether to enable keyboard shortcuts|`boolean`|`true`|
+|default-scale|Default scale|`number`|`1`|
+|zoom-rate|Zoom rate, only for scroll zoom|`number`|`1.1`|
 ### `<image-preview>` Events
 
 |Event Name|Description|Parameters|
@@ -131,3 +136,23 @@ description: Used to show and preview pictures.
 |disabled|Whether to disable the action|`boolean`|`false`|
 
 
+
+## FAQ
+
+### Property Description for `image-preview`
+
+**1. Keyboard Shortcuts - `keyboard`**
+Setting this property to `true` enables corresponding keyboard shortcuts based on the `actions-layout` settings.
+
+- `esc`: Close preview
+- `left`: Switch to the previous image
+- `right`: Switch to the next image
+- `up`: Zoom in on the image
+- `down`: Zoom out on the image
+- `space`: Restore to original size
+
+**2. Default Scaling - `defaultScale`**
+This property defines the default scaling factor for images. For instance, when set to 1.5, images will be enlarged by 1.5 times their original size by default.
+
+**3. Scroll Zoom Rate - `zoomSate`**
+The `zoomSate` property controls the scaling rate of images during scrolling. Taking 1.3 as an example, each scrolling action will result in an image zoom-in or zoom-out by a factor of 1.3.

packages/web-vue/components/image/README.zh-CN.md

@@ -78,6 +78,11 @@ description: 展示和预览图片。
 |closable|是否显示关闭按钮|`boolean`|`true`|
 |actions-layout|操作项的布局|`string[]`|`[  'fullScreen',  'rotateRight',  'rotateLeft',  'zoomIn',  'zoomOut',  'originalSize',]`|
 |popup-container|设置弹出框的挂载点，同 `teleport` 的 `to`，缺省值是 document.body|`HTMLElement`|`-`|
+|esc-to-close|是否支持 ESC 键关闭预览|`boolean`|`true`|
+|wheel-zoom|是否开启滚轮缩放|`boolean`|`true`|
+|keyboard|是否开启键盘控制|`boolean`|`true`|
+|default-scale|默认缩放比|`number`|`1`|
+|zoom-rate|缩放速率，仅对滚动缩放生效|`number`|`1.1`|
 ### `<image-preview>` Events
 
 |事件名|描述|参数|
@@ -129,3 +134,19 @@ description: 展示和预览图片。
 |disabled|是否禁用|`boolean`|`false`|
 
 
+
+## FAQ
+
+### 关于 `image-preview` 的属性说明
+
+1. 键盘快捷键 `keyboard` 设置此属性为 `true` 后，将根据 `actions-layout` 操作项来启用相应的快捷键操作。
+- `esc`: 关闭预览
+- `left`: 切换至上一张图片
+- `right`: 切换至下一张图片
+- `up`: 放大图片
+- `down`: 缩小图片
+- `space`: 还原至原始大小
+
+2. 默认缩放比例 `defaultScale` 此属性定义了默认的图片缩放比例。例如，当设置为 1.5 时，图片将默认放大到原始大小的 1.5 倍。
+
+3. 滚动缩放速率 `zoomSate` 属性控制了在滚动操作时图片的缩放速率。以 1.3 为例，每次滚动操作都会使图片放大或缩小 1.3 倍。

packages/web-vue/components/image/TEMPLATE.md

@@ -48,3 +48,42 @@ description: Used to show and preview pictures.
 %%API(preview-group.vue)%%
 
 %%API(preview-action.tsx)%%
+
+## FAQ
+
+## zh-CN
+### 关于 `image-preview` 的属性说明
+
+1. 键盘快捷键 `keyboard` 设置此属性为 `true` 后，将根据 `actions-layout` 操作项来启用相应的快捷键操作。
+- `esc`: 关闭预览
+- `left`: 切换至上一张图片
+- `right`: 切换至下一张图片
+- `up`: 放大图片
+- `down`: 缩小图片
+- `space`: 还原至原始大小
+
+2. 默认缩放比例 `defaultScale` 此属性定义了默认的图片缩放比例。例如，当设置为 1.5 时，图片将默认放大到原始大小的 1.5 倍。
+
+3. 滚动缩放速率 `zoomSate` 属性控制了在滚动操作时图片的缩放速率。以 1.3 为例，每次滚动操作都会使图片放大或缩小 1.3 倍。
+
+---
+## en-US
+### Property Description for `image-preview`
+
+**1. Keyboard Shortcuts - `keyboard`**
+Setting this property to `true` enables corresponding keyboard shortcuts based on the `actions-layout` settings.
+
+- `esc`: Close preview
+- `left`: Switch to the previous image
+- `right`: Switch to the next image
+- `up`: Zoom in on the image
+- `down`: Zoom out on the image
+- `space`: Restore to original size
+
+**2. Default Scaling - `defaultScale`**
+This property defines the default scaling factor for images. For instance, when set to 1.5, images will be enlarged by 1.5 times their original size by default.
+
+**3. Scroll Zoom Rate - `zoomSate`**
+The `zoomSate` property controls the scaling rate of images during scrolling. Taking 1.3 as an example, each scrolling action will result in an image zoom-in or zoom-out by a factor of 1.3.
+
+---

packages/web-vue/components/image/image.vue

@@ -19,7 +19,9 @@
               <IconImageClose />
             </slot>
           </div>
-          <div v-if="alt || description" :class="`${prefixCls}-error-alt`">{{ alt || description }}</div>
+          <div v-if="alt || description" :class="`${prefixCls}-error-alt`">
+            {{ alt || description }}
+          </div>
         </div>
       </slot>
       <slot v-if="isLoading && (showLoader || $slots.loader)" name="loader">

packages/web-vue/components/image/interface.ts

@@ -29,6 +29,12 @@ export interface ImagePreviewProps {
   closable: boolean;
   actionsLayout: string[];
   popupContainer?: HTMLElement | string;
+  escToClose: boolean;
+  keyboard: boolean;
+  wheelZoom: boolean;
+  defaultScale: number;
+  zoomRate: number;
+  groupArrowProps: Record<string, any>;
   onClose?: () => void;
 }
 

packages/web-vue/components/image/preview-toolbar.vue

@@ -23,7 +23,7 @@ interface ActionType {
   name: string;
   content: RenderFunc;
   onClick: () => void;
-  disabled: boolean;
+  disabled?: boolean;
 }
 
 export default defineComponent({