init

2026-06-30 10:33:56 +08:00
commit 6e047dc0a5
607 changed files with 65966 additions and 0 deletions
@@ -0,0 +1,54 @@
+import { useEffect, useState, type ImgHTMLAttributes } from 'react';
+
+type AppImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> & {
+  src?: string | null;
+  wrapperClassName?: string;
+  fit?: 'cover' | 'contain';
+};
+
+export default function AppImage({
+  src,
+  alt = '',
+  className = '',
+  wrapperClassName = '',
+  fit = 'cover',
+  ...rest
+}: AppImageProps) {
+  const [loaded, setLoaded] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const hasSrc = Boolean(src);
+
+  useEffect(() => {
+    setLoaded(false);
+    setFailed(!src);
+  }, [src]);
+
+  const showPlaceholder = !hasSrc || failed || !loaded;
+
+  return (
+    <div className={`app-image${wrapperClassName ? ` ${wrapperClassName}` : ''}`}>
+      {showPlaceholder && (
+        <div className="app-image-placeholder" aria-hidden>
+          {hasSrc && !failed ? (
+            <span className="app-image-spinner" />
+          ) : (
+            <span className="material-symbols-outlined app-image-fallback-icon">image</span>
+          )}
+        </div>
+      )}
+      {hasSrc && !failed && (
+        <img
+          {...rest}
+          src={src!}
+          alt={alt}
+          className={`app-image-img app-image-img--${fit}${loaded ? ' is-loaded' : ''}${className ? ` ${className}` : ''}`}
+          onLoad={() => setLoaded(true)}
+          onError={() => {
+            setFailed(true);
+            setLoaded(false);
+          }}
+        />
+      )}
+    </div>
+  );
+}