feat: Add Oss image resizeScale params

apps/mibao-ui-docs/src/app/pages/image.stories.tsx

@@ -41,12 +41,13 @@ const Template: Story = (args) =>
 
 export const Image = Template.bind({})
 Image.args = {
-  src: 'https://images.pexels.com/photos/2635817/pexels-photo-2635817.jpeg',
+  src: 'https://oss.jinse.cc/production/bd7c7508-026e-4fcd-abf8-1fa1061f4d6c.png',
   alt: '',
   aspectRatio: true,
   width: '200px',
   height: '',
   objectFit: 'cover',
   crossOrigin: '',
-  disableContextMenu: false
+  disableContextMenu: false,
+  resizeScale: 200
 }

libs/mibao-ui/src/constants/env.ts

@@ -0,0 +1,9 @@
+export const OSS_IMG_PROCESS_QUERY_KEY = process.env.OSS_IMG_PROCESS_QUERY_KEY ?? 'x-oss-process'
+export const OSS_IMG_PROCESS_QUERY_KEY_SCALE = process.env.OSS_IMG_PROCESS_QUERY_KEY_SCALE ?? 'image/resize,s_'
+export const OSS_IMG_PROCESS_QUERY_KEY_FORMAT_WEBP = process.env.OSS_IMG_PROCESS_QUERY_KEY_FORMAT_WEBP ?? '/format,webp'
+export const OSS_IMG_HOSTS = process.env.OSS_IMG_HOSTS
+  ? process.env.OSS_IMG_HOSTS.split(',')
+  : [
+      'https://oss.jinse.cc',
+      'https://goldenlegend.oss-accelerate.aliyuncs.com'
+    ]

libs/mibao-ui/src/lib/image/image.tsx

@@ -2,13 +2,14 @@ import { Box, Image as ChakraImage, ImageProps as ChakraImageProps, Skeleton } f
 import styles from './image.module.scss'
 import { useState, useMemo, useEffect, useCallback, ReactNode } from 'react'
 import FALLBACK_SRC from '../../../assets/images/fallback.svg'
-import { addParamsToUrl, disableImageContext, omit } from '../../utils'
+import { addParamsToUrl, disableImageContext, getImagePreviewUrl, omit } from '../../utils'
 
 export interface ImageProps extends ChakraImageProps {
   aspectRatio?: boolean
   loader?: ReactNode
   srcQueryParams?: Record<string, string | number>
   disableContextMenu?: boolean
+  resizeScale?: number // Specifies the shortest edge of the target zoom graph.
 }
 
 export const Image = (props: ImageProps) => {
@@ -22,14 +23,19 @@ export const Image = (props: ImageProps) => {
   }, [props.loader])
   // src
   const imageSrc = useMemo(() => {
-    if (!props.srcQueryParams || !props.src) return props.src
-    return addParamsToUrl(props.src, props.srcQueryParams)
+    if (!props.src) return props.src
+    const srcQueryParams = props.srcQueryParams ?? {}
+    if (props.resizeScale) {
+      return addParamsToUrl(getImagePreviewUrl(props.src, props.resizeScale), srcQueryParams)
+    }
+    return addParamsToUrl(props.src, srcQueryParams)
   }, [props])
   // omit props
   const imageProps = useMemo(() => omit(props, [
     'aspectRatio',
     'loader',
-    'srcQueryParams'
+    'srcQueryParams',
+    'resizeScale'
   ]), [props])
 
   useEffect(() => {

libs/mibao-ui/src/utils/index.ts

@@ -1,3 +1,9 @@
+import {
+  OSS_IMG_HOSTS,
+  OSS_IMG_PROCESS_QUERY_KEY,
+  OSS_IMG_PROCESS_QUERY_KEY_SCALE
+} from '../constants/env'
+
 export function addParamsToUrl (
   url: string,
   params: Record<string, string | number>,
@@ -18,6 +24,24 @@ export function addParamsToUrl (
   return decodeURI(urlObj.toString())
 }
 
+export function getImagePreviewUrl<U extends string | undefined> (
+  url: U,
+  size = 300
+): U {
+  if (!url) {
+    return url
+  }
+  const urlObj = new URL(url)
+  const isOssHost = OSS_IMG_HOSTS.some((host) => url?.startsWith(host))
+  const isSvgOrWebp = /\.(svg|webp)$/i.test(urlObj.pathname)
+  if (!isOssHost || isSvgOrWebp) {
+    return url
+  }
+  const params: Record<string, string | number> = {}
+  params[OSS_IMG_PROCESS_QUERY_KEY] = `${OSS_IMG_PROCESS_QUERY_KEY_SCALE}${size}`
+  return addParamsToUrl(url, params) as U
+}
+
 export function omit<T extends {[key: string]: any}, K extends keyof T> (obj: T, keys: K[]): Omit<T, K> {
   return keys.reduce((acc, key) => ({ ...acc, [key]: undefined }), obj)
 }