feat(image): esc keyboard support & dblclick event (#1247)

* feat(image):support `Escape` shortcut key

* feat(image):modify `n-image-preview-container` css `position` to `fixed`

* feat(image):support `Escape` shortcut key

* feat(image):support `double-click` zoom in and out

* feat(image):support `double-click` zoom in and out

* feat(image):support `double-click` zoom in and out

src/image/src/ImagePreview.tsx

@@ -81,6 +81,9 @@ export default defineComponent({
         case 'ArrowRight':
           props.onNext?.()
           break
+        case 'Escape':
+          toggleShow()
+          break
       }
     }
 
@@ -149,6 +152,10 @@ export default defineComponent({
       on('mousemove', document, handleMouseMove)
       on('mouseup', document, handleMouseUp)
     }
+    function handlePreviewDblclick (): void {
+      scale = scale === 1 ? 2 : 1
+      derivePreviewStyle()
+    }
 
     let scale = 1
     let rotate = 0
@@ -230,6 +237,7 @@ export default defineComponent({
       appear: useIsMounted(),
       displayed: displayedRef,
       handlePreviewMousedown,
+      handlePreviewDblclick,
       syncTransformOrigin,
       handleAfterLeave: () => {
         rotate = 0
@@ -363,6 +371,7 @@ export default defineComponent({
                                 <img
                                   draggable={false}
                                   onMousedown={this.handlePreviewMousedown}
+                                  onDblclick={this.handlePreviewDblclick}
                                   class={`${clsPrefix}-image-preview`}
                                   key={this.previewSrc}
                                   src={this.previewSrc}

src/image/src/styles/index.cssr.ts

@@ -10,7 +10,7 @@ export default c([
     cB('image-container', 'position: fixed;')
   ]),
   cB('image-preview-container', `
-    position: absolute;
+    position: fixed;
     left: 0;
     right: 0;
     top: 0;