@tbox.cn/app-module-promotion 0.2.0 → 0.9.4

package/src/client/components/ImageWithFallback.tsx

@@ -0,0 +1,39 @@
+/**
+ * 图片 + 加载失败占位（0.4.0 D6：模块自持 ~20 行，禁跨模块依赖/基元封顶不破）。
+ * 源：POC shopping-guide 占位语义。src 缺省或加载失败 → 图标占位。
+ */
+import { useState } from 'react';
+import { ImageSquare } from '@phosphor-icons/react';
+
+export function ImageWithFallback(props: {
+  src?: string;
+  alt: string;
+  className?: string;
+  /** 占位区尺寸（px，图标随比例缩小） */
+  size?: number;
+}) {
+  const { src, alt, className, size = 40 } = props;
+  const [failed, setFailed] = useState(false);
+  if (!src || failed) {
+    return (
+      <div
+        className={`img-fallback promotion-image--fallback ${className ?? ''}`.trim()}
+        aria-label={alt}
+        role="img"
+      >
+        <ImageSquare weight="duotone" size={Math.round(size * 0.45)} />
+      </div>
+    );
+  }
+  return (
+    <img
+      className={className}
+      src={src}
+      alt={alt}
+      loading="eager"
+      decoding="async"
+      referrerPolicy="no-referrer"
+      onError={() => setFailed(true)}
+    />
+  );
+}

package/src/client/index.ts

@@ -1,16 +1,35 @@
+/**
+ * module-promotion 客户端入口：9 个稳定传输卡型，renderer 内覆盖多个展示语义。
+ */
+import './styles/promotion.css'; // 0.4.0 D1：模块自持 CSS（副作用 import，首行保证先行加载）
+
 import type { CardComponent } from '@tbox.cn/app-contracts';
 import type { ClientContext, ClientModule } from '@tbox.cn/app-sdk/client';
-import { CouponCard } from './cards/coupon';
+import {
+  PromotionOfferListCard,
+  PromotionOfferDetailCard,
+  PromotionEntitlementListCard,
+  PromotionActivityListCard,
+  PromotionActivityDetailCard,
+  PromotionActivityCategoryListCard,
+  PromotionBestDealCard,
+} from './cards';
 
-/** 客户端卡片组件 map（key 约定 = cardType；CLI sync 装配读取） */
 const cards = {
-  coupon: CouponCard as CardComponent,
+  'promotion-offer-list': PromotionOfferListCard as CardComponent,
+  'promotion-offer-detail': PromotionOfferDetailCard as CardComponent,
+  'promotion-entitlement-list': PromotionEntitlementListCard as CardComponent,
+  'promotion-activity-list': PromotionActivityListCard as CardComponent,
+  'promotion-activity-detail': PromotionActivityDetailCard as CardComponent,
+  'promotion-activity-category-list': PromotionActivityCategoryListCard as CardComponent,
+  'promotion-best-deal': PromotionBestDealCard as CardComponent,
 } as const;
 
-/** 模块注册入口：自注册闭环（与服务端 serverModule 对称） */
 export const clientModule = {
   cards,
   register(ctx: ClientContext): void {
     ctx.cards.registerMap(cards);
   },
 } satisfies ClientModule;
+
+export { cards as promotionClientCards };