初始化模版工程

components/ui/image.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react'
+import { cn } from '@/utils/cn'
+
+export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  /** 图片源 */
+  src: string
+  /** 替代文本 */
+  alt: string
+  /** 是否可点击预览 */
+  preview?: boolean
+  /** 点击回调 */
+  onClick?: () => void
+}
+
+/**
+ * Image 组件 - 基于 shadcn 风格的图片组件
+ */
+const Image = React.forwardRef<HTMLImageElement, ImageProps>(
+  ({ className, src, alt, preview, onClick, ...props }, ref) => {
+    const handleClick = () => {
+      if (preview || onClick) {
+        onClick?.()
+      }
+    }
+
+    return (
+      <img
+        ref={ref}
+        src={src}
+        alt={alt}
+        className={cn(
+          'max-w-full object-contain',
+          (preview || onClick) && 'cursor-pointer hover:opacity-90 transition-opacity',
+          className
+        )}
+        onClick={handleClick}
+        loading="lazy"
+        {...props}
+      />
+    )
+  }
+)
+
+Image.displayName = 'Image'
+
+export { Image }
+