feat(subscription): support Stripe payment element

src/app/subscription/components/subscription-user-row.tsx

@@ -7,7 +7,7 @@
  *   - 头像右侧两行文本：用户名（16px/600）、副标题（12px/secondary）
  *   - 无头像时显示默认用户图标
  */
-import Image from "next/image";
+import { UserMessageAvatar } from "@/app/chat/components/user-message-avatar";
 
 import styles from "./subscription-user-row.module.css";
 
@@ -27,31 +27,11 @@ export function SubscriptionUserRow({
 }: SubscriptionUserRowProps) {
   return (
     <div className={[styles.row, className].filter(Boolean).join(" ")}>
-      <div className={styles.avatar} aria-hidden="true">
-        {avatarUrl ? (
-          <Image
-            src={avatarUrl}
-            alt=""
-            width={56}
-            height={56}
-            className={styles.avatarImg}
-          />
-        ) : (
-          <svg
-            width="28"
-            height="28"
-            viewBox="0 0 24 24"
-            fill="none"
-            className={styles.avatarIcon}
-          >
-            <circle cx="12" cy="8" r="4" fill="currentColor" />
-            <path
-              d="M4 20c0-4.418 3.582-7 8-7s8 2.582 8 7"
-              fill="currentColor"
-            />
-          </svg>
-        )}
-      </div>
+      <UserMessageAvatar
+        avatarUrl={avatarUrl}
+        className={styles.avatar}
+        size={56}
+      />
       <div className={styles.text}>
         <p className={styles.name}>{name}</p>
         <p className={styles.subtitle}>{subtitle}</p>