@tbox.cn/app-module-member 0.9.1 → 0.9.2

package/dist/{chunk-34PVJEKH.js → chunk-GMHJMLRV.js}

@@ -5,12 +5,13 @@ import "./member-372B74DY.css";
 import { CalendarBlank, Phone, Tag, UserCircle } from "@phosphor-icons/react";
 
 // src/client/components/ImageWithFallback.tsx
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ImageSquare } from "@phosphor-icons/react";
 import { jsx } from "react/jsx-runtime";
 function ImageWithFallback(props) {
   const { src, alt, className, size = 40, loading = "lazy", fallback } = props;
   const [failed, setFailed] = useState(false);
+  useEffect(() => setFailed(false), [src]);
   if (!src || failed) {
     return /* @__PURE__ */ jsx("div", { className: `img-fallback ${className ?? ""}`.trim(), "aria-label": alt, role: "img", children: fallback ?? /* @__PURE__ */ jsx(ImageSquare, { weight: "duotone", size: Math.round(size * 0.45) }) });
   }
@@ -103,7 +104,7 @@ function MemberInfoCard(props) {
 var member_info_default = MemberInfoCard;
 
 // src/client/cards/member-card-summary/index.tsx
-import { useEffect, useMemo, useRef, useState as useState2 } from "react";
+import { useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
 import { X } from "@phosphor-icons/react";
 import { markSelfRendering, sendCardAction } from "@tbox.cn/app-agent-sdk-client";
@@ -158,7 +159,7 @@ function MemberCardSummaryCard(props) {
   const pointsRuleTriggerRef = useRef(null);
   const pointsRuleCloseRef = useRef(null);
   const pointsRuleCloseTimerRef = useRef();
-  useEffect(() => {
+  useEffect2(() => {
     if (!pointsRuleOpen) return;
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -173,7 +174,7 @@ function MemberCardSummaryCard(props) {
       window.removeEventListener("keydown", onKeyDown);
     };
   }, [pointsRuleOpen]);
-  useEffect(() => () => {
+  useEffect2(() => () => {
     window.clearTimeout(pointsRuleCloseTimerRef.current);
     window.clearTimeout(benefitActionCloseTimerRef.current);
   }, []);

package/dist/{chunk-K4VM7JZT.js → chunk-YQZ64C6P.js}

@@ -28,11 +28,14 @@ function cardFace(from, to) {
   const marks = '<rect x="58" y="52" width="210" height="42" rx="8" fill="%23000000" opacity="0.14"/><rect x="58" y="130" width="132" height="26" rx="6" fill="%23000000" opacity="0.10"/>';
   return `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="672" height="347"><defs><linearGradient id="f" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="%23${from}"/><stop offset="1" stop-color="%23${to}"/></linearGradient></defs><rect width="672" height="347" fill="url(%23f)"/><circle cx="548" cy="60" r="150" fill="%23ffffff" opacity="0.16"/>` + marks + "</svg>";
 }
+var BLACK_CARD_IMAGE = "https://mdn.alipayobjects.com/huamei_b00jk5/afts/img/A*sdTfQ5NaRN8AAAAAgEAAAAgAegitAQ/fmt.webp";
 var FACE = {
-  blue: cardFace("dce8fb", "aecdf5"),
+  blue: "https://mdn.alipayobjects.com/huamei_b00jk5/afts/img/A*OVn3SL73QbQAAAAAgDAAAAgAegitAQ/fmt.webp",
   silver: cardFace("eef1f7", "c4cddf"),
+  // gold 配浅金 SVG：恢复真实厂商世代叠字后金卡是浅底深字，黑金深图配金档=深字压深底不可读；
+  // 待世代规格（1344×694+透明边）浅金素材重制后再换平台 CDN 图。
   gold: cardFace("f9ecca", "e3c283"),
-  black: cardFace("1b1e26", "4a412c")
+  black: BLACK_CARD_IMAGE
 };
 var POINTS_RULE_IMAGE = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="750" height="1600"><rect width="750" height="1600" fill="%23fffdf8"/><rect x="60" y="80" width="380" height="44" rx="10" fill="%23e2c78f"/><rect x="60" y="180" width="630" height="24" rx="8" fill="%23ece7dd"/><rect x="60" y="230" width="560" height="24" rx="8" fill="%23ece7dd"/><rect x="60" y="280" width="610" height="24" rx="8" fill="%23ece7dd"/><rect x="60" y="700" width="630" height="24" rx="8" fill="%23ece7dd"/><rect x="60" y="1500" width="400" height="24" rx="8" fill="%23ece7dd"/></svg>';
 var ICON_COLORS = {
@@ -288,12 +291,12 @@ var meta2 = {
   sampleData: {
     userId: "u_1001",
     cardRef: "card:u_1001",
-    cardDisplay: "\u91D1\u5361\u4F1A\u5458",
+    cardDisplay: "\u9ED1\u5361\u4F1A\u5458",
     status: "active",
     availablePoints: 860,
-    cardImageUrl: "https://assets.example.com/member/gold-card.png",
+    cardImageUrl: BLACK_CARD_IMAGE,
     pointsRuleImageUrl: "https://assets.example.com/member/points-rule.jpg",
-    presentation: { variant: "gold", labelsEmbedded: true },
+    presentation: { variant: "black", labelsEmbedded: true },
     progress: {
       daySpentCents: 12345,
       yearSpentCents: 5e5,

package/dist/client/index.js

@@ -1,6 +1,6 @@
 import {
   clientModule
-} from "../chunk-34PVJEKH.js";
+} from "../chunk-GMHJMLRV.js";
 export {
   clientModule
 };

package/dist/index.js

@@ -7,10 +7,10 @@ import {
   resolveMemberEnrollmentPort,
   resolveMemberProfilePort,
   serverModule
-} from "./chunk-K4VM7JZT.js";
+} from "./chunk-YQZ64C6P.js";
 import {
   clientModule
-} from "./chunk-34PVJEKH.js";
+} from "./chunk-GMHJMLRV.js";
 export {
   InMemoryMemberService,
   clientModule,

package/dist/server/index.js

@@ -7,7 +7,7 @@ import {
   resolveMemberEnrollmentPort,
   resolveMemberProfilePort,
   serverModule
-} from "../chunk-K4VM7JZT.js";
+} from "../chunk-YQZ64C6P.js";
 export {
   InMemoryMemberService,
   memberCards,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tbox.cn/app-module-member",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "type": "module",
   "description": "商圈会员模块：会员账户、会员卡、积分流水与入会流程（codegen 源）。",
   "exports": {
@@ -19,9 +19,9 @@
   },
   "dependencies": {
     "@tbox.cn/app-contracts": "0.12.0",
-    "@tbox.cn/app-contracts-mall": "0.12.0",
-    "@tbox.cn/app-agent-sdk-client": "0.1.0",
-    "@tbox.cn/app-agent-sdk-server": "0.1.0"
+    "@tbox.cn/app-contracts-mall": "0.12.1",
+    "@tbox.cn/app-agent-sdk-client": "0.1.1",
+    "@tbox.cn/app-agent-sdk-server": "0.1.1"
   },
   "peerDependencies": {
     "zod": "3.25.76",

package/src/client/components/ImageWithFallback.tsx

@@ -2,7 +2,7 @@
  * 图片 + 加载失败占位（0.4.0 D6：模块自持 ~20 行，禁跨模块依赖/基元封顶不破）。
  * 源：POC shopping-guide 占位语义。src 缺省或加载失败 → 图标占位。
  */
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import type { ReactNode } from 'react';
 import { ImageSquare } from '@phosphor-icons/react';
 
@@ -18,6 +18,7 @@ export function ImageWithFallback(props: {
 }) {
   const { src, alt, className, size = 40, loading = 'lazy', fallback } = props;
   const [failed, setFailed] = useState(false);
+  useEffect(() => setFailed(false), [src]);
   if (!src || failed) {
     return (
       <div className={`img-fallback ${className ?? ''}`.trim()} aria-label={alt} role="img">

package/src/server/cards/member-card-summary/meta.ts

@@ -1,6 +1,6 @@
 import type { CardMeta } from '@tbox.cn/app-contracts';
 import { memberCardSummaryCardDataSchema } from '@tbox.cn/app-contracts-mall';
-import { samples } from './samples';
+import { BLACK_CARD_IMAGE, samples } from './samples';
 
 const meta: CardMeta<typeof memberCardSummaryCardDataSchema> = {
   cardType: 'member-card-summary',
@@ -10,12 +10,12 @@ const meta: CardMeta<typeof memberCardSummaryCardDataSchema> = {
   sampleData: {
     userId: 'u_1001',
     cardRef: 'card:u_1001',
-    cardDisplay: '金卡会员',
+    cardDisplay: '黑卡会员',
     status: 'active',
     availablePoints: 860,
-    cardImageUrl: 'https://assets.example.com/member/gold-card.png',
+    cardImageUrl: BLACK_CARD_IMAGE,
     pointsRuleImageUrl: 'https://assets.example.com/member/points-rule.jpg',
-    presentation: { variant: 'gold', labelsEmbedded: true },
+    presentation: { variant: 'black', labelsEmbedded: true },
     progress: {
       daySpentCents: 12_345,
       yearSpentCents: 500_000,

package/src/server/cards/member-card-summary/samples.ts

@@ -7,17 +7,21 @@
  * - 视觉等价的输入合并为一格，note 列全合并口径；
  * - 样本即契约：data 必须 dataSchema 校验通过且无 shape 外键（tests/samples.test.ts 双断言）。
  *
- * 素材中立化（画廊时期权益图标指向厂商 CDN，模块样本按仓库铁律净化）：
- * - 卡面底图/积分规则长图：无网络依赖的内联 SVG data URI（画廊原实现随行）；
+ * 素材边界（规范真源 = 厂商中立门禁：禁厂商租户字样/标识/深链——平台 CDN 演示素材不在禁列）：
+ * - 卡面底图：平台 CDN 演示素材（mdn.alipayobjects.com，预览/截图保真）。样本只服务预览，
+ *   运行时素材恒由 provider 下发（mock 发 dynamic face 与真实厂商集成同构，见 provider-mock
+ *   member）；silver 档保留内联 SVG 作「无外部素材占位」分支；
  * - 权益图标：内联 SVG 按变体分色——验证的是「图标配色压不压得住卡面底色」与四列网格
  *   换行（低两档 14 项、高两档 15 项的数量差异照实铺），不是图标的图案还原度
  *  （真实图标由 provider 运行时下发；图案语义兜底归组件内 ImageWithFallback）；
- * - 卡图/图标的外链失败分支刻意保留 example.com 占位（该分支本身是合法预览态）。
+ * - 卡图/图标的外链失败分支刻意保留 example.com 占位（该分支本身是合法预览态）；
+ * - 白名单由 tests/samples.test.ts 断言收口：卡面 URL 仅允许 mdn.alipayobjects.com /
+ *   example.com / data:image/svg+xml，厂商租户素材回潜即 fail。
  */
 import type { CardSample } from '@tbox.cn/app-contracts';
 import type { MemberCardSummaryCardData } from '@tbox.cn/app-contracts-mall';
 
-/** 卡面底图：底色随 variant 走（前三档浅底深字、black 深底浅字——与模块 CSS 叠字色配对） */
+/** 内联卡面底图：银/金档占位（浅底深字，与模块叠字配色配对）。 */
 function cardFace(from: string, to: string): string {
   // 真实卡图恒自带卡名与「我的积分」字样（labelsEmbedded 恒 true），前端只叠积分数字。
   // 两块半透明色块代表那两行字的占位——不写真文字是为了不依赖 SVG 内的中文字体，
@@ -36,11 +40,16 @@ function cardFace(from: string, to: string): string {
     + '</svg>';
 }
 
+export const BLACK_CARD_IMAGE
+  = 'https://mdn.alipayobjects.com/huamei_b00jk5/afts/img/A*sdTfQ5NaRN8AAAAAgEAAAAgAegitAQ/fmt.webp';
+
 const FACE = {
-  blue: cardFace('dce8fb', 'aecdf5'),
+  blue: 'https://mdn.alipayobjects.com/huamei_b00jk5/afts/img/A*OVn3SL73QbQAAAAAgDAAAAgAegitAQ/fmt.webp',
   silver: cardFace('eef1f7', 'c4cddf'),
+  // gold 配浅金 SVG：恢复真实厂商世代叠字后金卡是浅底深字，黑金深图配金档=深字压深底不可读；
+  // 待世代规格（1344×694+透明边）浅金素材重制后再换平台 CDN 图。
   gold: cardFace('f9ecca', 'e3c283'),
-  black: cardFace('1b1e26', '4a412c'),
+  black: BLACK_CARD_IMAGE,
 };
 
 /** 积分规则长图占位（弹层内容）：只需一张有高度的图验证弹层滚动与关闭 */

package/tests/samples.test.ts

@@ -44,6 +44,25 @@ describe('member samples 双断言（样本即契约）', () => {
     expect(Math.min(...counts.filter((n) => n >= 10))).toBe(14);
   });
 
+  it('卡面素材白名单：平台 CDN 演示素材 / example.com 失败分支 / 内联 SVG（厂商租户素材回潜即 fail）', () => {
+    const allowed = (url: string) =>
+      url.startsWith('https://mdn.alipayobjects.com/')
+      || url.startsWith('https://assets.example.com/')
+      || url.startsWith('data:image/svg+xml');
+    for (const s of meta.samples ?? []) {
+      const url = (s.data as { cardImageUrl?: string }).cardImageUrl;
+      if (url) expect(allowed(url), s.label).toBe(true);
+    }
+    const initial = (meta.sampleData as { cardImageUrl?: string }).cardImageUrl;
+    if (initial) expect(allowed(initial), '初始态').toBe(true);
+  });
+
+  it('初始态深卡配对：black 变体配深底卡图（恢复真实厂商世代叠字后浅金字压深底可读）', () => {
+    const data = meta.sampleData as { presentation?: { variant?: string }; cardImageUrl?: string };
+    expect(data.presentation?.variant).toBe('black');
+    expect(data.cardImageUrl).toMatch(/^https:\/\/mdn\.alipayobjects\.com\//);
+  });
+
   it('素材中立：权益图标全部为内联 SVG 分色占位或 example.com 占位', () => {
     const serialized = JSON.stringify(meta.samples ?? []);
     expect(serialized).toContain('data:image/svg+xml');