@pisell/materials 1.0.678 → 1.0.680

package/lib/components/walletCard/index.js

@@ -64,25 +64,7 @@ var DEFAULT_PROPS = {
   discountCardValue: 0,
   items: []
 };
-var WalletCard = (props) => {
-  const {
-    mode = DEFAULT_PROPS.mode,
-    cardStyle = DEFAULT_PROPS.cardStyle,
-    codeType = DEFAULT_PROPS.codeType,
-    platform = DEFAULT_PROPS.platform,
-    codeDirection = DEFAULT_PROPS.codeDirection,
-    customBackgroundImage,
-    icon,
-    walletName = DEFAULT_PROPS.walletName,
-    shopName = "",
-    isShowShopName = DEFAULT_PROPS.isShowShopName,
-    cardNo = "",
-    isShowCardNo = DEFAULT_PROPS.isShowCardNo,
-    showCode = DEFAULT_PROPS.showCode,
-    items = DEFAULT_PROPS.items,
-    onCodeClick,
-    symbol
-  } = props;
+var useCodeModal = (cardNo, onCodeClick) => {
   const [isModalOpen, setIsModalOpen] = (0, import_react.useState)(false);
   const handleCodeClick = (e) => {
     e.stopPropagation();
@@ -92,87 +74,175 @@ var WalletCard = (props) => {
       setIsModalOpen(true);
     }
   };
-  const handleButtonClick = (e) => {
-    e.stopPropagation();
+  const closeModal = (e) => {
+    e == null ? void 0 : e.stopPropagation();
     setIsModalOpen(false);
   };
-  const renderCode = (0, import_react.useMemo)(() => /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-code", style: { textAlign: "center" } }, codeType === "barCode" ? /* @__PURE__ */ import_react.default.createElement(import_react_barcode.default, { value: cardNo, height: 114, width: 3 }) : /* @__PURE__ */ import_react.default.createElement(import_antd.QRCode, { size: 250, value: cardNo, bordered: false })), [cardNo, codeType]);
-  const renderHeader = () => /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-wallet-card-header") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-wallet-card-header-left") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-wallet-card-header-level") }, icon && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-header-icon" }, typeof icon === "string" ? /* @__PURE__ */ import_react.default.createElement("img", { src: icon, alt: "wallet icon", style: { width: "20px", height: "20px" } }) : icon), walletName && /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-wallet-card-header-level-text") }, walletName)), isShowShopName && shopName && /* @__PURE__ */ import_react.default.createElement("div", null, shopName), isShowCardNo && cardNo && /* @__PURE__ */ import_react.default.createElement("div", null, cardNo)), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-wallet-card-header-right") }, showCode && cardStyle === "normal" && /* @__PURE__ */ import_react.default.createElement(
+  return {
+    isModalOpen,
+    handleCodeClick,
+    closeModal
+  };
+};
+var CardIcon = ({ icon }) => {
+  if (!icon) return null;
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-header-icon" }, typeof icon === "string" ? /* @__PURE__ */ import_react.default.createElement("img", { src: icon, alt: "wallet icon", style: { width: "20px", height: "20px" } }) : icon);
+};
+var CardHeader = ({
+  icon,
+  walletName,
+  shopName,
+  isShowShopName = true,
+  cardNo,
+  isShowCardNo = true,
+  showCode = true,
+  cardStyle = "normal",
+  codeType = "barCode",
+  onCodeClick
+}) => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-header-left" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-header-level" }, icon && /* @__PURE__ */ import_react.default.createElement(CardIcon, { icon }), walletName && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-header-level-text" }, walletName)), isShowShopName && shopName && /* @__PURE__ */ import_react.default.createElement("div", null, shopName), isShowCardNo && cardNo && /* @__PURE__ */ import_react.default.createElement("div", null, cardNo)), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-header-right" }, showCode && cardStyle === "normal" && /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      className: (0, import_classnames.default)("pisell-wallet-card-icon-wrapper"),
-      onClick: handleCodeClick
+      className: "pisell-wallet-card-icon-wrapper",
+      onClick: onCodeClick
     },
     /* @__PURE__ */ import_react.default.createElement(
       import_iconfont.default,
       {
         type: codeType === "barCode" ? "pisell2-Barcode" : "pisell2-a-qr-code-02",
-        className: (0, import_classnames.default)("pisell-wallet-card-icon")
+        className: "pisell-wallet-card-icon"
       }
     )
   )));
-  const renderContent = () => /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-wallet-card-list") }, items.map((item, index) => {
-    const { label, value } = item;
-    return /* @__PURE__ */ import_react.default.createElement("div", { key: index, className: "pisell-wallet-card-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-item-label" }, (0, import_locales.getText)(`walletCard-${label}`) || ""), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-item-value" }, item.key === "rechargeable" || item.key === "piont" ? /* @__PURE__ */ import_react.default.createElement(
-      import_Amount.default,
-      {
-        className: "pisell-card-amount-item-value",
-        platform: "h5",
-        symbol,
-        useThousandsSeparator: true,
-        showCurrencySymbol: true,
-        value
-      }
-    ) : value));
-  }));
-  const renderModal = () => /* @__PURE__ */ import_react.default.createElement(
+};
+var CardItem = ({ item, symbol }) => {
+  const { key, label, value } = item;
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-item-label" }, (0, import_locales.getText)(`walletCard-${label}`) || ""), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-item-value" }, key === "rechargeable" || key === "piont" ? /* @__PURE__ */ import_react.default.createElement(
+    import_Amount.default,
+    {
+      className: "pisell-card-amount-item-value",
+      platform: "h5",
+      symbol,
+      useThousandsSeparator: true,
+      showCurrencySymbol: true,
+      value
+    }
+  ) : value));
+};
+var CardContent = ({ items, symbol }) => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-list" }, (items || []).map((item, index) => /* @__PURE__ */ import_react.default.createElement(CardItem, { key: index, item, symbol })));
+};
+var CodeDisplay = ({ codeType, cardNo }) => {
+  if (!cardNo) return null;
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-code" }, codeType === "barCode" ? /* @__PURE__ */ import_react.default.createElement(
+    import_react_barcode.default,
+    {
+      value: cardNo,
+      height: 114,
+      width: 3,
+      fontSize: 12,
+      fontOptions: "400",
+      background: "#ffffff",
+      lineColor: "#000000",
+      margin: 12,
+      displayValue: true
+    }
+  ) : /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-code-qrcode" }, /* @__PURE__ */ import_react.default.createElement(import_antd.QRCode, { size: 250, value: cardNo, bordered: false }), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-code-qrcode-value" }, cardNo)));
+};
+var CodeModal = ({ isOpen, onClose, codeType, cardNo, platform }) => {
+  return /* @__PURE__ */ import_react.default.createElement(
     import_pisellModal.default,
     {
       title: (0, import_locales.getText)(codeType === "barCode" ? "walletCard-barcode" : "walletCard-qrcode"),
       platform,
-      onCancel: (e) => {
-        e.stopPropagation();
-        setIsModalOpen(false);
-      },
-      open: isModalOpen,
+      onCancel: onClose,
+      open: isOpen,
       footer: null,
       mobileModalHeight: "auto",
-      className: (0, import_classnames.default)("pisell-qrcode-modal"),
+      className: "pisell-qrcode-modal",
       bodyStyle: { padding: 0 },
       modalRender: (modal) => /* @__PURE__ */ import_react.default.createElement("div", { onClick: (e) => e.stopPropagation() }, modal)
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { onClick: (e) => e.stopPropagation() }, codeType === "barCode" ? /* @__PURE__ */ import_react.default.createElement(import_react_barcode.default, { value: cardNo, height: 114, width: 3 }) : /* @__PURE__ */ import_react.default.createElement(import_antd.QRCode, { size: 200, value: cardNo, style: { marginTop: 24 } }), codeType === "orCode" && /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-qrcode-modal-value") }, cardNo), /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, null), /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react.default.createElement(CodeDisplay, { codeType, cardNo }), codeType === "orCode" && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-qrcode-modal-value" }, cardNo), /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { className: "pisell-lowcode-divider" }), /* @__PURE__ */ import_react.default.createElement(
       import_antd.Button,
       {
-        onClick: (e) => {
-          e.stopPropagation();
-          handleButtonClick(e);
-        },
-        className: (0, import_classnames.default)("pisell-qrcode-modal-button")
+        type: "primary",
+        className: "pisell-qrcode-modal-button",
+        onClick: onClose
       },
       (0, import_locales.getText)("walletCard-done")
     ))
   );
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-wallet-card-wrapper") }, /* @__PURE__ */ import_react.default.createElement(import_antd.Card, { bordered: false, className: (0, import_classnames.default)("pisell-wallet-card") }, /* @__PURE__ */ import_react.default.createElement(
+};
+var WalletCard = (props) => {
+  const {
+    mode = DEFAULT_PROPS.mode,
+    cardStyle = DEFAULT_PROPS.cardStyle,
+    codeType = DEFAULT_PROPS.codeType,
+    platform = DEFAULT_PROPS.platform,
+    codeDirection = DEFAULT_PROPS.codeDirection,
+    customBackgroundImage,
+    icon,
+    walletName = DEFAULT_PROPS.walletName,
+    shopName = "",
+    isShowShopName = DEFAULT_PROPS.isShowShopName,
+    cardNo = "",
+    isShowCardNo = DEFAULT_PROPS.isShowCardNo,
+    showCode = DEFAULT_PROPS.showCode,
+    items = [...DEFAULT_PROPS.items],
+    onCodeClick,
+    symbol = DEFAULT_PROPS.symbol,
+    onClick,
+    className,
+    style
+  } = props;
+  const { isModalOpen, handleCodeClick, closeModal } = useCodeModal(cardNo, onCodeClick);
+  const backgroundStyle = (0, import_react.useMemo)(() => {
+    if (customBackgroundImage) {
+      return { backgroundImage: `url(${customBackgroundImage})` };
+    }
+    return {};
+  }, [customBackgroundImage]);
+  return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      className: (0, import_classnames.default)("pisell-wallet-card-container"),
-      style: { width: "100%" }
+      className: (0, import_classnames.default)("pisell-wallet-card-wrapper", className),
+      style,
+      onClick
     },
-    /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Card, { bodyStyle: { padding: 0 } }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-container" }, /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
         className: (0, import_classnames.default)("pisell-wallet-card-content", mode),
-        style: {
-          backgroundImage: customBackgroundImage ? `url(${customBackgroundImage})` : `url(https://file.mypisell-dev.com/pisel/image/9/${mode === "dark" ? "3d039c83ff5b84fadafb8a23c33d6cc42025_02_26_00_42_53_288_08413160975__720_456__" : "61dcbe950c9451164a6bb1d17d5bc5f02025_02_26_00_43_42_741_04853453608__720_456__"}.png)`,
-          flexDirection: codeDirection === "bottom" ? "column" : "column-reverse",
-          display: "flex"
-        }
+        style: backgroundStyle
       },
-      renderHeader(),
-      renderContent()
-    ),
-    showCode && cardStyle === "full" && /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-wallet-card-showCode") }, renderCode)
-  ))), renderModal());
+      /* @__PURE__ */ import_react.default.createElement(
+        CardHeader,
+        {
+          icon,
+          walletName,
+          shopName,
+          isShowShopName,
+          cardNo,
+          isShowCardNo,
+          showCode,
+          cardStyle,
+          codeType,
+          onCodeClick: handleCodeClick
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(CardContent, { items, symbol })
+    ), showCode && cardStyle === "full" && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-card-showCode" }, /* @__PURE__ */ import_react.default.createElement(CodeDisplay, { codeType, cardNo })))),
+    /* @__PURE__ */ import_react.default.createElement(
+      CodeModal,
+      {
+        isOpen: isModalOpen,
+        onClose: closeModal,
+        codeType,
+        cardNo,
+        platform
+      }
+    )
+  );
 };
 var walletCard_default = WalletCard;

package/lib/components/walletCard/index.less

@@ -2,18 +2,25 @@
   border: none;
   overflow: hidden;
   border-radius: 12px;
-
+  width: 100%;
+  
+  // 卡片容器
   .pisell-wallet-card-container {
     width: 100%;
+    cursor: pointer;
   }
 
+  // 卡片内容区域
   .pisell-wallet-card-content {
     padding: 16px 18px;
     background-position: top center;
     background-size: cover;
     background-repeat: no-repeat;
 
+    // 暗色主题
     &.dark {
+      background-color: #7F56D9;
+      
       .pisell-wallet-card-header-left {
         color: #fff;
       }
@@ -29,7 +36,10 @@
       }
     }
 
+    // 亮色主题
     &.light {
+      background-color: #F9F5FF;
+      
       .pisell-wallet-card-header-left {
         color: #101828;
       }
@@ -46,35 +56,44 @@
     }
   }
 
+  // 卡片头部
   .pisell-wallet-card-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
 
+    // 头部左侧
     .pisell-wallet-card-header-left {
       font-size: 12px;
       font-weight: 400;
       line-height: 18px;
 
+      // 卡片等级/名称区域
       .pisell-wallet-card-header-level {
         display: flex;
         align-items: center;
         gap: 10px;
         margin-bottom: 8px;
 
+        // 卡片名称文本
         .pisell-wallet-card-header-level-text {
           font-size: 14px;
           font-weight: 600;
           line-height: 20px;
         }
 
+        // 卡片图标
         .pisell-wallet-card-header-icon {
           width: 20px;
           height: 20px;
           overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
         }
       }
 
+      // 头部左侧其他信息
       >div {
         margin-bottom: 4px;
 
@@ -84,7 +103,14 @@
       }
     }
 
+    // 头部右侧
     .pisell-wallet-card-header-right {
+      // 图标包装器
+      .pisell-wallet-card-icon-wrapper {
+        cursor: pointer;
+      }
+      
+      // 图标
       .pisell-wallet-card-icon {
         font-size: 40px;
         cursor: pointer;
@@ -97,6 +123,7 @@
     }
   }
 
+  // 卡片内容列表
   .pisell-wallet-card-list {
     margin-top: 30px;
     height: 50px;
@@ -105,12 +132,16 @@
     justify-content: space-around;
     align-items: center;
     flex-wrap: nowrap;
-    overflow-x: auto;
+    overflow: hidden;
     gap: 16px;
 
+    // 列表项
     .pisell-wallet-card-item {
       text-align: center;
+      flex: 1;
+      min-width: 0;
 
+      // 标签
       .pisell-wallet-card-item-label {
         font-size: 14px;
         font-weight: 400;
@@ -121,6 +152,7 @@
         text-overflow: ellipsis;
       }
 
+      // 值
       .pisell-wallet-card-item-value {
         font-size: 20px;
         font-weight: 600;
@@ -132,16 +164,56 @@
     }
   }
 
+  // 显示二维码/条形码区域
   .pisell-wallet-card-showCode {
     padding: 20px;
     background-color: #fff;
     text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+.pisell-wallet-card-code{
+  display: flex;
+  justify-content: center;
+}
+    // 条形码样式
+    .pisell-wallet-card-code {
+      width: 100%;
+      
+      // 覆盖react-barcode生成的SVG文本样式
+      svg {
+        width: 100%;
+        
+        text {
+          fill: #000;
+          font-family: Inter;
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: normal;
+          transform: translateY(12px);
+        }
+      }
+    }
+
+    // 二维码下方文本样式
+    .pisell-wallet-card-code-qrcode-value{
+      color: #000;
+      font-family: Inter;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+    }
   }
-  .pisell-lowcode-card-body{
+  
+  // 卡片内容区域
+  .pisell-lowcode-card-body {
     padding: 0;
   }
 }
 
+// 二维码模态框
 .pisell-qrcode-modal {
   .pisell-lowcode-modal-content {
     padding: 0;
@@ -151,7 +223,28 @@
       width: 100%;
       align-items: center;
       flex-direction: column;
+      padding: 24px;
+
+      // 条形码样式
+      .pisell-wallet-card-code {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        
+        // 覆盖react-barcode生成的SVG文本样式
+        svg {
+          max-width: 100%;
+          
+          text {
+            font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            font-weight: 500 !important;
+            font-size: 14px !important;
+            fill: #101828 !important;
+          }
+        }
+      }
 
+      // 二维码值
       .pisell-qrcode-modal-value {
         color: var(--Gray-500, #667085);
         font-size: 14px;
@@ -160,17 +253,20 @@
         margin: 20px 0 24px;
       }
 
+      // 分隔线
       .pisell-lowcode-divider {
         margin: 0;
+        width: 100%;
       }
 
+      // 按钮
       .pisell-qrcode-modal-button {
-        margin: 24px;
+        margin-top: 24px;
         color: var(--Base-White, #fff);
         font-size: 16px;
         font-weight: 600;
         line-height: 24px;
-        width: calc(100% - 48px);
+        width: 100%;
         box-sizing: border-box;
         background-color: var(--theme-color, #7f56d9);
       }

package/lib/locales/zh-TW.d.ts

@@ -164,7 +164,7 @@ declare const _default: {
     'pisell-action-get-data': string;
     'pisell-action-delete-success': string;
     'pisell-action-delete-failed': string;
-    'walletCard-pionts': string;
+    'walletCard-piont': string;
     'walletCard-rechargeable': string;
     'walletCard-voucher': string;
     'walletCard-discount': string;

package/lib/locales/zh-TW.js

@@ -204,7 +204,7 @@ var zh_TW_default = {
   "pisell-action-get-data": "請先獲取數據",
   "pisell-action-delete-success": "刪除成功",
   "pisell-action-delete-failed": "刪除失敗,請重試",
-  "walletCard-pionts": "積分卡",
+  "walletCard-piont": "積分卡",
   "walletCard-rechargeable": "充值卡",
   "walletCard-voucher": "代金券",
   "walletCard-discount": "折扣卡",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.0.678",
+  "version": "1.0.680",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -71,8 +71,8 @@
     "swiper": "^8.4.7",
     "react-barcode": "^1.5.3",
     "@pisell/date-picker": "1.0.115",
-    "@pisell/utils": "1.0.43",
-    "@pisell/icon": "0.0.10"
+    "@pisell/icon": "0.0.10",
+    "@pisell/utils": "1.0.43"
   },
   "peerDependencies": {
     "react": "^18.0.0",