@tbox.cn/app-module-member 0.2.0 → 0.8.7

package/src/client/cards/member-card-summary/index.tsx

@@ -0,0 +1,375 @@
+/**
+ * member-card-summary 富卡：原型同款真实卡面 + 积分摘要。
+ * 会员卡名是 C 端卡名，不把 levelName 渲染成会员等级或权益。
+ */
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { ReactNode, SyntheticEvent, UIEvent } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from '@phosphor-icons/react';
+import { markSelfRendering, sendCardAction } from '@tbox.cn/app-sdk/client';
+import { Car, Confetti, Coins, Gift, Sparkle } from '@phosphor-icons/react';
+import { ImageWithFallback } from '../../components/ImageWithFallback';
+import { MEMBER_PREFERENCE_PROMPTS } from '@tbox.cn/app-contracts-mall';
+import type { MemberCardSummaryCardData } from '@tbox.cn/app-contracts-mall';
+
+// 仅校验支付宝 scheme 前缀 + 非空 authority，**不依赖 webview `new URL`**——
+// 安卓/UC 内核对 `alipays://` 非特殊 scheme 可能抛 TypeError 或解出非标字段，会让权益按钮（如积分换礼）
+// 在安卓上落成不可点的静态态。深链合法性由 resolveAlipayNavigation 进一步校验。
+function isProviderMiniappUrl(value: string): boolean {
+  return /^(alipays|alipayrisk):\/\/[^/?#]/u.test(value);
+}
+
+function renderBenefitText(text: string): ReactNode {
+  const parts = text.split(/(\d{3,4}-\d{7,8}|\d{7,12})/u);
+  return parts.map((part, index) => /^\d{3,4}-\d{7,8}$|^\d{7,12}$/u.test(part)
+    ? <a key={`${part}-${String(index)}`} href={`tel:${part.replace(/-/gu, '')}`}>{part}</a>
+    : <span key={`${String(index)}-${part}`}>{part}</span>);
+}
+
+function BenefitFallbackIcon({ name }: { name: string }) {
+  const props = {
+    'aria-hidden': true,
+    className: 'member-card-summary__benefit-icon-fallback',
+    size: 28,
+    weight: 'duotone' as const,
+  };
+  if (/停车|泊车/.test(name)) return <Car {...props} />;
+  if (/积分|消费/.test(name)) return <Coins {...props} />;
+  if (/活动|派对/.test(name)) return <Confetti {...props} />;
+  return <Gift {...props} />;
+}
+
+/** 一屏权益格数：四列 × 两行。超出的排到下一屏，横向翻页。 */
+const BENEFITS_PER_PAGE = 8;
+
+export function MemberCardSummaryCard(props: {
+  data: MemberCardSummaryCardData;
+  cardId?: string;
+  isHistory?: boolean;
+}) {
+  const { data, cardId = '', isHistory = false } = props;
+  const dynamicFace = data.presentation !== undefined;
+  const labelsEmbedded = data.presentation?.labelsEmbedded === true;
+  // 不截断：权益数量本身随等级变化（完整卡面 provider 的采集快照里，低两档 14 项、
+  // 高两档 15 项——高档多出的正是免费停车），截到固定条数会把「等级差异」这个卡面最该
+  // 体现的东西抹平。条数上限由契约的 benefits.max(20) 兜住。
+  // 但十来项铺成四行会把卡片撑得很长，故按「四列 × 两行」切页横向翻——一屏之内看完八项，
+  // 其余滑过去，卡片高度不随权益数变化。
+  const benefitPages = useMemo(() => {
+    const items = data.benefits;
+    if (!items?.length) return [];
+    const pages: (typeof items)[] = [];
+    for (let i = 0; i < items.length; i += BENEFITS_PER_PAGE) {
+      pages.push(items.slice(i, i + BENEFITS_PER_PAGE));
+    }
+    return pages;
+  }, [data.benefits]);
+  const [benefitPage, setBenefitPage] = useState(0);
+  // 翻页指示只跟随滚动，不反向驱动滚动——省一个 scrollTo 的受控回路，
+  // 用户用手指滑或用触控板都只有这一条数据流。
+  const onBenefitsScroll = (event: UIEvent<HTMLDivElement>) => {
+    const el = event.currentTarget;
+    if (el.clientWidth === 0) return;
+    const next = Math.round(el.scrollLeft / el.clientWidth);
+    setBenefitPage((prev) => (prev === next ? prev : next));
+  };
+  const preferencePrompts = data.preferencePrompts ?? MEMBER_PREFERENCE_PROMPTS;
+  const [pointsRuleOpen, setPointsRuleOpen] = useState(false);
+  const [pointsRuleClosing, setPointsRuleClosing] = useState(false);
+  const [benefitAction, setBenefitAction] = useState<{ name: string; url: string; title?: string; text?: string; closing?: boolean }>();
+  const benefitActionCloseTimerRef = useRef<number>();
+  const pointsRuleTriggerRef = useRef<HTMLButtonElement>(null);
+  const pointsRuleCloseRef = useRef<HTMLButtonElement>(null);
+  const pointsRuleCloseTimerRef = useRef<number>();
+
+  useEffect(() => {
+    if (!pointsRuleOpen) return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    pointsRuleCloseRef.current?.focus();
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+      closePointsRule();
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [pointsRuleOpen]);
+
+  useEffect(() => () => {
+    window.clearTimeout(pointsRuleCloseTimerRef.current);
+    window.clearTimeout(benefitActionCloseTimerRef.current);
+  }, []);
+
+  const closeBenefitAction = () => {
+    if (!benefitAction || benefitAction.closing) return;
+    setBenefitAction({ ...benefitAction, closing: true });
+    benefitActionCloseTimerRef.current = window.setTimeout(() => setBenefitAction(undefined), 180);
+  };
+
+  const finishClosePointsRule = () => {
+    window.clearTimeout(pointsRuleCloseTimerRef.current);
+    setPointsRuleOpen(false);
+    setPointsRuleClosing(false);
+    pointsRuleTriggerRef.current?.focus();
+  };
+
+  const closePointsRule = () => {
+    if (pointsRuleClosing) return;
+    setPointsRuleClosing(true);
+    pointsRuleCloseTimerRef.current = window.setTimeout(finishClosePointsRule, 220);
+  };
+
+  const openPointsRule = (event: SyntheticEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setPointsRuleClosing(false);
+    setPointsRuleOpen(true);
+  };
+
+  const pointsRuleTrigger = data.pointsRuleImageUrl || data.pointsRuleContent ? (
+    <button
+      ref={pointsRuleTriggerRef}
+      type="button"
+      className={labelsEmbedded
+        ? 'member-card-summary__rule-hotspot'
+        : 'member-card-summary__rule-trigger'}
+      aria-label="积分规则"
+      aria-haspopup="dialog"
+      onClick={openPointsRule}
+    >
+      {labelsEmbedded ? null : <span>积分规则</span>}
+    </button>
+  ) : null;
+
+  return (
+    <section className={`member-card member-card-summary${dynamicFace ? ` member-card-summary--dynamic member-card-summary--${data.presentation!.variant}` : ''}`}>
+      {dynamicFace ? (
+        <div
+          className={`member-card-summary__face member-card-summary__face--dynamic member-card-summary__face--${data.presentation!.variant}${labelsEmbedded ? ' member-card-summary__face--embedded' : ''}`}
+          aria-label={`${data.cardDisplay}，可用积分 ${String(data.availablePoints)}`}
+        >
+          {data.cardImageUrl ? (
+            <ImageWithFallback
+              src={data.cardImageUrl}
+              alt=""
+              className="member-card-summary__background"
+              size={96}
+              loading="eager"
+            />
+          ) : (
+            <span className="member-card-summary__background member-card-summary__background--fallback" />
+          )}
+          <div className="member-card-summary__overlay">
+            {!labelsEmbedded && (
+              <>
+                <strong className="member-card-summary__level">{data.cardDisplay}</strong>
+                {data.pointsUrl ? <button type="button" className="member-card-summary__points-label" onClick={() => sendCardAction(cardId, { type: 'openLink', url: data.pointsUrl! })}>我的积分 <span aria-hidden="true">&gt;</span></button> : <span className="member-card-summary__points-label">我的积分 <span aria-hidden="true">&gt;</span></span>}
+              </>
+            )}
+            <b className={`member-card-summary__balance${labelsEmbedded ? ' member-card-summary__balance--embedded' : ''}`}>{String(data.availablePoints)}</b>
+            {data.progress && (
+              <div className="member-card-summary__progress">
+                <div className={`member-card-summary__progress-text${data.progress.message.length > 24 ? ' member-card-summary__progress-text--scroll' : ''}`}>
+                  <span>{data.progress.message}</span>
+                </div>
+                <div
+                  className="member-card-summary__progress-track"
+                  role="progressbar"
+                  aria-label="会员等级消费进度"
+                  aria-valuemin={0}
+                  aria-valuemax={100}
+                  aria-valuenow={Math.round(data.progress.percent)}
+                >
+                  <span style={{ width: `${data.progress.percent}%` }} />
+                </div>
+              </div>
+            )}
+            {labelsEmbedded && data.pointsUrl && (
+              <button
+                type="button"
+                className="member-card-summary__points-hotspot"
+                aria-label="打开我的积分"
+                onClick={() => sendCardAction(cardId, { type: 'openLink', url: data.pointsUrl! })}
+              />
+            )}
+            {pointsRuleTrigger}
+          </div>
+        </div>
+      ) : data.cardImageUrl ? (
+        <ImageWithFallback
+          src={data.cardImageUrl}
+          alt={data.cardDisplay}
+          className="member-card-summary__face"
+          size={96}
+          loading="eager"
+        />
+      ) : (
+        <div className="member-card-summary__face member-card-summary__face--gradient">
+          <strong>{data.cardDisplay}</strong>
+        </div>
+      )}
+      {!dynamicFace && (
+        <div className="member-card-summary__metric">
+          <b className="member-card-summary__points-value">{String(data.availablePoints)}</b>
+          <span className="member-card-summary__metric-label">积分</span>
+          {data.status !== 'active' && (
+            <em className="member-card-summary__status">{data.status}</em>
+          )}
+          {pointsRuleTrigger}
+        </div>
+      )}
+      {benefitPages.length > 0 && (
+        <>
+          {/* 无区块标题：这张卡本身就是会员卡，图标加名称已经自解释，多一行「可享权益」
+              只是把卡片拉长。语义靠 pager 的 aria-label 交代，读屏不受影响。 */}
+          <div
+            className="member-card-summary__benefit-pager"
+            role="group"
+            aria-label="当前会员权益"
+            onScroll={benefitPages.length > 1 ? onBenefitsScroll : undefined}
+          >
+            {benefitPages.map((page) => (
+              <ul className="member-card-summary__benefits" key={page[0].benefitRef}>
+                {page.map((benefit) => (
+                  <li key={benefit.benefitRef}>
+                    {benefit.action?.kind === 'miniapp' && benefit.action.url && isProviderMiniappUrl(benefit.action.url) ? (
+                      <button
+                        type="button"
+                        className="member-card-summary__benefit-button"
+                        aria-label={`打开${benefit.name}`}
+                        onClick={() => sendCardAction(cardId, { type: 'openLink', url: benefit.action!.url! })}
+                      >
+                    <span className="member-card-summary__benefit-icon">
+                      <ImageWithFallback
+                        src={benefit.iconUrl}
+                        alt={`${benefit.name}权益图标`}
+                        size={48}
+                        // 与卡面底图同批加载：ImageWithFallback 默认 lazy，而权益图标挂在卡片
+                        // 下半部，实测滚进视口后仍长时间不触发请求，整排图标空着。它们是卡片主体
+                        // 的一部分（十来张 14KB 小图），没有延后的理由。
+                        loading="eager"
+                        fallback={<BenefitFallbackIcon name={benefit.name} />}
+                      />
+                    </span>
+                    <span className="member-card-summary__benefit-copy">
+                      <span>{benefit.name}</span>
+                      {benefit.description && (
+                        <small className="member-card-summary__benefit-description">{benefit.description}</small>
+                      )}
+                    </span>
+                      </button>
+                    ) : benefit.action?.kind === 'toast' ? (
+                      <button type="button" className="member-card-summary__benefit-button" onClick={() => sendCardAction(cardId, { type: 'toast', content: benefit.action?.text ?? '敬请期待~' })}>
+                        <span className="member-card-summary__benefit-icon"><ImageWithFallback src={benefit.iconUrl} alt={`${benefit.name}权益图标`} size={48} loading="eager" fallback={<BenefitFallbackIcon name={benefit.name} />} /></span>
+                        <span className="member-card-summary__benefit-copy"><span>{benefit.name}</span></span>
+                      </button>
+                    ) : benefit.action?.kind === 'dialog' ? (
+                      <button type="button" className="member-card-summary__benefit-button" onClick={() => setBenefitAction({ name: benefit.action?.title ?? benefit.name, url: '', title: benefit.action?.title, text: benefit.action?.text })}>
+                        <span className="member-card-summary__benefit-icon"><ImageWithFallback src={benefit.iconUrl} alt={`${benefit.name}权益图标`} size={48} loading="eager" fallback={<BenefitFallbackIcon name={benefit.name} />} /></span>
+                        <span className="member-card-summary__benefit-copy"><span>{benefit.name}</span></span>
+                      </button>
+                    ) : (
+                      <>
+                        <span className="member-card-summary__benefit-icon">
+                          <ImageWithFallback src={benefit.iconUrl} alt={`${benefit.name}权益图标`} size={48} loading="eager" fallback={<BenefitFallbackIcon name={benefit.name} />} />
+                        </span>
+                        <span className="member-card-summary__benefit-copy"><span>{benefit.name}</span>{benefit.description && <small className="member-card-summary__benefit-description">{benefit.description}</small>}</span>
+                      </>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            ))}
+          </div>
+          {benefitPages.length > 1 && (
+            <div className="member-card-summary__benefit-dots" aria-hidden="true">
+              {benefitPages.map((page, index) => (
+                <span key={page[0].benefitRef} data-active={index === benefitPage} />
+              ))}
+            </div>
+          )}
+        </>
+      )}
+      {/*
+        * 这三个按钮不是「换个话题」的快捷入口，而是偏好采集口：点击经 handler 的 intents
+        * 精确截获、确定性写入 kind=preference 记忆，再同轮续接导购（见 Agent Note
+        * 会员卡偏好三问与确定性记忆）。原标题「继续探索更多精彩吧」把这层意思整个盖住了，
+        * 当前说明同时提示选择偏好与直接表达两种输入方式，偏好采集行为保持不变。
+        */}
+      <div className="member-card-summary__preferences">
+        <strong>
+          {/* 跟随标题字号：size 走 SVG 属性、不经 rem 换算，不跟就会比标题还大。 */}
+          <Sparkle size={15} weight="fill" aria-hidden="true" />
+          <span>说说你的偏好</span>
+        </strong>
+        <p className="member-card-summary__preference-hint">请选择你的偏好，或直接告诉我</p>
+        <div className="member-card-summary__preference-list">
+          {preferencePrompts.map((prompt) => (
+            <button
+              key={prompt.value}
+              type="button"
+              disabled={isHistory || !cardId}
+              onClick={() => sendCardAction(cardId, {
+                type: 'sendMessage',
+                value: prompt.query,
+                displayText: prompt.value,
+                visible: true,
+              })}
+            >
+              <span>{prompt.value}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+      {pointsRuleOpen && (data.pointsRuleImageUrl || data.pointsRuleContent) && createPortal(
+        <div
+          className={`member-points-rule${pointsRuleClosing ? ' member-points-rule--closing' : ''}`}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="member-points-rule-title"
+          onAnimationEnd={(event) => {
+            if (pointsRuleClosing && event.target === event.currentTarget) finishClosePointsRule();
+          }}
+          onMouseDown={(event) => {
+            if (event.target === event.currentTarget) closePointsRule();
+          }}
+        >
+          <div className="member-points-rule__panel">
+            <header className="member-points-rule__header">
+              <strong id="member-points-rule-title">积分规则</strong>
+              <button
+                ref={pointsRuleCloseRef}
+                type="button"
+                className="member-points-rule__close"
+                aria-label="关闭积分规则"
+                onClick={closePointsRule}
+              >
+                <X size={20} weight="bold" aria-hidden="true" />
+              </button>
+            </header>
+            <div className="member-points-rule__body">
+              {data.pointsRuleImageUrl ? <ImageWithFallback src={data.pointsRuleImageUrl} alt="积分规则详情" className="member-points-rule__image" size={96} loading="eager" /> : <div className="member-points-rule__content">{renderBenefitText(data.pointsRuleContent ?? '')}</div>}
+            </div>
+          </div>
+        </div>,
+        document.body,
+      )}
+      {benefitAction && createPortal(
+        <div className="member-miniapp-dialog" role="dialog" aria-modal="true" aria-label={benefitAction.title ?? benefitAction.name} onMouseDown={(event) => { if (event.target === event.currentTarget) closeBenefitAction(); }}>
+          <div className={`member-miniapp-dialog__panel${benefitAction.url ? ' member-miniapp-dialog__panel--miniapp' : ' member-miniapp-dialog__panel--text'}${benefitAction.closing ? ' member-miniapp-dialog__panel--closing' : ''}`}>
+            <header className="member-miniapp-dialog__header"><strong>{benefitAction.title ?? benefitAction.name}</strong><button type="button" aria-label="关闭" onClick={closeBenefitAction}><X size={20} weight="bold" aria-hidden="true" /></button></header>
+            {benefitAction.url ? <iframe className="member-miniapp-dialog__frame" src={benefitAction.url} title={benefitAction.title ?? benefitAction.name} /> : <div className="member-miniapp-dialog__text">{renderBenefitText(benefitAction.text ?? '')}</div>}
+            {!benefitAction.url && <button type="button" className="member-miniapp-dialog__confirm" onClick={closeBenefitAction}>我知道了</button>}
+          </div>
+        </div>,
+        document.body,
+      )}
+    </section>
+  );
+}
+
+// 原型中的会员卡以权益区收口，不展示 SDK 默认的通用动作条。
+export default markSelfRendering(MemberCardSummaryCard);

package/src/client/cards/member-enrollment-cta/index.tsx

@@ -0,0 +1,61 @@
+/** member-enrollment-cta：只呈现真实跳转入口，不预告未由 Provider 返回的会员权益。 */
+import { useRef, useState } from 'react';
+import { ArrowSquareOut, IdentificationCard, ShieldCheck, WarningCircle } from '@phosphor-icons/react';
+import { sendCardAction } from '@tbox.cn/app-sdk/client';
+import type { MemberEnrollmentCtaCardData } from '@tbox.cn/app-contracts-mall';
+
+export function MemberEnrollmentCtaCard(props: {
+  data: MemberEnrollmentCtaCardData;
+  cardId: string;
+  isHistory: boolean;
+}) {
+  const { data, cardId, isHistory } = props;
+  const [opening, setOpening] = useState(false);
+  const openingRef = useRef(false);
+
+  function handleEnroll() {
+    // 深链为可选透传素材（schema optional）；无 URL 时不发 openLink（壳能力/门禁接管）
+    if (isHistory || openingRef.current || !data.enrollUrl) return;
+    openingRef.current = true;
+    setOpening(true);
+    sendCardAction(cardId, { type: 'openLink', url: data.enrollUrl });
+  }
+
+  return (
+    <section className="member-card member-enroll-cta">
+      <div className="member-enroll-cta__hero">
+        <span className="member-enroll-cta__icon" aria-hidden="true">
+          <IdentificationCard size={28} weight="duotone" />
+        </span>
+        <span className="member-enroll-cta__eyebrow">会员服务</span>
+        <h4>{data.title ?? '开卡入会'}</h4>
+        <p>前往支付宝会员页面完成开卡，结果以页面为准</p>
+      </div>
+
+      <div className="member-enroll-cta__footer">
+        <p className="member-enroll-cta__hint">
+          <ShieldCheck size={16} weight="fill" aria-hidden="true" />
+          登录状态不受入会结果影响，开卡结果以支付宝会员页面为准
+        </p>
+        <button
+          type="button"
+          className="member-enroll-cta__btn"
+          disabled={isHistory || opening || !data.enrollUrl}
+          onClick={handleEnroll}
+          aria-label={data.enrollUrl ? '立即开卡入会' : '入会暂不可用（请联系商场客服）'}
+        >
+          {opening ? '正在打开支付宝…' : data.enrollUrl ? '立即开卡入会' : '暂不可用（请联系商场客服）'}
+          {/* 有 URL 才暗示可跳转；无 URL（壳能力接管/未配置深链）用警示图标传达“不可点” */}
+          {data.enrollUrl ? (
+            <ArrowSquareOut size={18} weight="bold" aria-hidden="true" />
+          ) : (
+            <WarningCircle size={18} weight="fill" aria-hidden="true" />
+          )}
+        </button>
+        {isHistory && <p className="member-enroll-cta__history">历史卡片不可重复操作</p>}
+      </div>
+    </section>
+  );
+}
+
+export default MemberEnrollmentCtaCard;

package/src/client/cards/member-enrollment-form/index.tsx

@@ -0,0 +1,181 @@
+/**
+ * member-enrollment-form 富卡（0.4.0 D6/D10）：受控表单 + select 渲染 + readOnly 预填锁定
+ * + 用户显式授权（无 mount 副作用）+ 客户端必填/必选校验。
+ * payload 形状与 server inputSchema 一致（fieldValues Record / acceptedConsentIds / formVersion）。
+ */
+import { useRef, useState } from 'react';
+import { Lock, ShieldCheck, UserPlus } from '@phosphor-icons/react';
+import { sendCardAction, markSelfRendering } from '@tbox.cn/app-sdk/client';
+import type { MemberEnrollmentFormCardData } from '@tbox.cn/app-contracts-mall';
+
+const AUTO_AUTH_ACTION = 'member.request-alipay-authorization';
+
+export function MemberEnrollmentFormCard(props: {
+  data: MemberEnrollmentFormCardData;
+  cardId: string;
+  isHistory: boolean;
+  actionTokens?: Record<string, string>;
+}) {
+  const { data, cardId, isHistory, actionTokens } = props;
+  const [values, setValues] = useState<Record<string, string>>(() =>
+    Object.fromEntries(data.fields.map((f) => [f.fieldId, f.prefill ?? ''])),
+  );
+  const [consented, setConsented] = useState<Record<string, boolean>>({});
+  const [authRequesting, setAuthRequesting] = useState(false);
+  const [submitAttempted, setSubmitAttempted] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const authRequestingRef = useRef(false);
+  const submittingRef = useRef(false);
+
+  const authToken = actionTokens?.[AUTO_AUTH_ACTION];
+  const enrollToken = actionTokens?.['member.enroll'];
+
+  const fireAuth = () => {
+    if (!authToken || isHistory || authRequestingRef.current) return;
+    authRequestingRef.current = true;
+    setAuthRequesting(true);
+    sendCardAction(cardId, { type: 'moduleAction', actionId: AUTO_AUTH_ACTION, contextToken: authToken });
+  };
+
+  if (data.state === 'active') {
+    return (
+      <section className="member-card member-enrollment-form">
+        <div className="member-enrollment-form__done">
+          <span className="member-enrollment-form__done-icon"><ShieldCheck size={30} weight="duotone" /></span>
+          <span><small>会员状态</small><strong>您已是会员</strong></span>
+        </div>
+      </section>
+    );
+  }
+
+  const missingFields = data.fields.filter((field) => field.required && !(values[field.fieldId] ?? '').trim());
+  const missingConsents = data.consents.filter((consent) => consent.required && !consented[consent.consentId]);
+  const submit = () => {
+    if (!enrollToken || isHistory || submittingRef.current) return;
+    setSubmitAttempted(true);
+    if (missingFields.length > 0 || missingConsents.length > 0) return;
+    submittingRef.current = true;
+    setSubmitting(true);
+    sendCardAction(
+      cardId,
+      { type: 'moduleAction', actionId: 'member.enroll', contextToken: enrollToken },
+      {
+        fieldValues: values,
+        acceptedConsentIds: data.consents.filter((c) => consented[c.consentId]).map((c) => c.consentId),
+        formVersion: data.formVersion,
+      },
+    );
+  };
+
+  const authStatus = data.authorization.status;
+
+  return (
+    <section className="member-card member-enrollment-form">
+      <header className="member-enrollment-form__head">
+        <span className="member-enrollment-form__head-icon"><UserPlus size={22} weight="duotone" /></span>
+        <div>
+          <span>会员</span>
+          <strong>开卡入会</strong>
+        </div>
+      </header>
+      <p className="member-enrollment-form__subtitle">完善基础资料，开启会员服务</p>
+
+      {/* 授权条三态：授权只由用户显式点击触发，不在 mount 时拉起系统授权。 */}
+      <div className={`member-enrollment-form__auth member-enrollment-form__auth--${authStatus}`}>
+        {authStatus === 'authorized' ? (
+          <>
+            <ShieldCheck size={16} />
+            <span>
+              已通过支付宝授权预填手机号
+              {data.authorization.mobileMasked ? `（${data.authorization.mobileMasked}）` : ''}
+            </span>
+          </>
+        ) : authStatus === 'required' ? (
+          <button
+            type="button"
+            className="member-enrollment-form__auth-btn"
+            disabled={isHistory || !authToken || authRequesting}
+            onClick={fireAuth}
+          >
+            <ShieldCheck size={16} />
+            {authRequesting ? '正在请求支付宝授权…' : '支付宝授权并填充'}
+          </button>
+        ) : (
+          <span>支付宝授权不可用，请手动填写</span>
+        )}
+      </div>
+      {data.manualNotice && <p className="member-enrollment-form__notice">{data.manualNotice}</p>}
+
+      {data.fields.map((f) => (
+        <div key={f.fieldId} className="member-ef-field">
+          <label className="member-ef-field__label">
+            {f.label}
+            {f.required && <em>*</em>}
+          </label>
+          {f.type === 'select' ? (
+            <select
+              className="member-ef-field__control"
+              value={values[f.fieldId] ?? ''}
+              disabled={f.readOnly || isHistory}
+              onChange={(e) => setValues((v) => ({ ...v, [f.fieldId]: e.target.value }))}
+            >
+              <option value="">请选择</option>
+              {(f.options ?? []).map((opt) => (
+                <option key={opt} value={opt}>
+                  {opt}
+                </option>
+              ))}
+            </select>
+          ) : (
+            <input
+              className="member-ef-field__control"
+              type={f.type === 'tel' ? 'tel' : f.type === 'date' ? 'date' : 'text'}
+              value={values[f.fieldId] ?? ''}
+              readOnly={f.readOnly || isHistory}
+              placeholder={f.placeholder ?? ''}
+              onChange={(e) => setValues((v) => ({ ...v, [f.fieldId]: e.target.value }))}
+            />
+          )}
+          {f.readOnly && <Lock className="member-ef-field__lock" size={13} weight="fill" />}
+          {submitAttempted && f.required && !(values[f.fieldId] ?? '').trim() && (
+            <p className="member-ef-field__error" role="alert">请填写{f.label}</p>
+          )}
+        </div>
+      ))}
+
+      <div className="member-ef-consents">
+        {data.consents.map((c) => (
+          <label key={c.consentId} className="member-ef-consents__item">
+            <input
+              type="checkbox"
+              checked={!!consented[c.consentId]}
+              disabled={isHistory}
+              onChange={(e) => setConsented((s) => ({ ...s, [c.consentId]: e.target.checked }))}
+            />
+            <span>
+              {c.title}
+              {c.required && <em>（必选）</em>}
+            </span>
+          </label>
+        ))}
+      </div>
+      {submitAttempted && missingConsents.length > 0 && (
+        <p className="member-ef-validation" role="alert">
+          请先同意：{missingConsents.map((consent) => consent.title).join('、')}
+        </p>
+      )}
+
+      <button
+        type="button"
+        className="member-ef-submit"
+        disabled={isHistory || !enrollToken || submitting}
+        onClick={submit}
+      >
+        {submitting ? '正在提交…' : '提交入会'}
+      </button>
+    </section>
+  );
+}
+
+// 0.4.0 D10 评审补位：提交/授权按钮全在卡内（依赖表单/授权上下文），自持动作跳过 SDK 默认按钮条
+export default markSelfRendering(MemberEnrollmentFormCard);