init

2026-06-30 10:33:56 +08:00
commit 6e047dc0a5
607 changed files with 65966 additions and 0 deletions
@@ -0,0 +1,74 @@
+import { useRef, useState } from 'react';
+import AppImage from '@dukang/shared-ui/AppImage';
+
+type Props = {
+  images: string[];
+  alt: string;
+  variant?: 'home' | 'detail' | 'store';
+};
+
+export default function ProductCarousel({ images, alt, variant = 'home' }: Props) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const slides = images.length > 0 ? images : [''];
+
+  function onScroll() {
+    const el = scrollRef.current;
+    if (!el || el.offsetWidth === 0) return;
+    setActiveIndex(Math.round(el.scrollLeft / el.offsetWidth));
+  }
+
+  const wrapClass =
+    variant === 'store'
+      ? 'store-detail-carousel-wrap'
+      : variant === 'detail'
+        ? 'detail-carousel-wrap'
+        : 'home-carousel-wrap';
+  const trackClass =
+    variant === 'store'
+      ? 'store-detail-carousel'
+      : variant === 'detail'
+        ? 'detail-carousel'
+        : 'home-carousel';
+  const dotClass =
+    variant === 'store'
+      ? 'store-detail-carousel-dot'
+      : variant === 'detail'
+        ? 'detail-carousel-dot'
+        : 'home-carousel-dot';
+  const itemClass =
+    variant === 'store'
+      ? 'store-detail-carousel-item'
+      : variant === 'detail'
+        ? 'detail-carousel-item'
+        : 'home-carousel-item';
+  const placeholderClass =
+    variant === 'store'
+      ? 'store-detail-carousel-placeholder'
+      : variant === 'detail'
+        ? 'detail-carousel-placeholder'
+        : 'home-carousel-placeholder';
+
+  return (
+    <div className={wrapClass}>
+      <div className={trackClass} ref={scrollRef} onScroll={onScroll}>
+        {slides.map((src, i) => (
+          <div key={i} className={itemClass}>
+            {src ? (
+              <AppImage src={src} alt={alt} wrapperClassName="app-image--fill" />
+            ) : (
+              <div className={placeholderClass} />
+            )}
+          </div>
+        ))}
+      </div>
+      {slides.length > 1 && (
+        <div className={variant === 'store' ? 'store-detail-carousel-dots' : variant === 'detail' ? 'detail-carousel-dots' : 'home-carousel-dots'}>
+          {slides.map((_, i) => (
+            <span key={i} className={`${dotClass}${i === activeIndex ? ' active' : ''}`} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,15 @@
+type SubPageHeaderProps = {
+  title: string;
+  onBack: () => void;
+};
+
+export default function SubPageHeader({ title, onBack }: SubPageHeaderProps) {
+  return (
+    <header className="sub-page-header">
+      <button type="button" className="sub-page-header-back" aria-label="返回" onClick={onBack}>
+        <span className="material-symbols-outlined">arrow_back</span>
+      </button>
+      <h1 className="app-page-title">{title}</h1>
+    </header>
+  );
+}
@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+
+type TabMainHeaderProps = {
+  title: string;
+  extra?: ReactNode;
+  className?: string;
+};
+
+export default function TabMainHeader({ title, extra, className = '' }: TabMainHeaderProps) {
+  return (
+    <header className={`tab-main-header${className ? ` ${className}` : ''}`}>
+      <h1 className="app-page-title">{title}</h1>
+      {extra ? <div className="tab-main-header-extra">{extra}</div> : null}
+    </header>
+  );
+}