@doubao-apps/template 0.0.31 → 0.0.32

package/dist/order-card/index.js

@@ -1,117 +1,20 @@
-import { Button, useThemeClassName } from "@byted-doubao-apps/components";
+import { useThemeClassName } from "@byted-doubao-apps/components";
 import { clsx } from "clsx";
-import { getAppInfo } from "../utils/app-info.js";
+import { TemplateActionBar } from "../components/action-bar/index.js";
+import { TemplateInfoSection } from "../components/info-section/index.js";
+import { TemplateProductSummary } from "../components/product-summary/index.js";
+import { TemplateTitleBar } from "../components/title-bar/index.js";
 import "./styles.css";
-function OrderCardIcon({ appIconSrc }) {
-    if (null != appIconSrc && appIconSrc.length > 0) return <image className="doubao-order-card__app-icon" src={appIconSrc} mode="aspectFill"/>;
-    return <view className="doubao-order-card__app-icon"/>;
-}
-function OrderCardProductImage(props) {
-    const { productImage, productImageSrc } = props;
-    if (null != productImage) return <view className="doubao-order-card__product-image">{productImage}</view>;
-    if (null != productImageSrc && productImageSrc.length > 0) return <image className="doubao-order-card__product-image" src={productImageSrc} mode="aspectFill"/>;
-    return <view className="doubao-order-card__product-image"/>;
-}
 function OrderCard(props) {
     const { moreText, showMore = true, productTitle, productSpec, productPricePrefix, productPrice, productQuantity, infoItems = [], feeItems = [], discountText, totalLabel, totalPrice, primaryActionText, secondaryActionText, className, style, onClick, onMoreClick, onProductClick, onPrimaryActionClick, onSecondaryActionClick } = props;
-    const appInfo = getAppInfo();
-    const hasProductImage = null != props.productImage || null != props.productImageSrc && props.productImageSrc.length > 0;
-    const hasProductMainLine = null != productTitle && productTitle.length > 0 || null != productPricePrefix && productPricePrefix.length > 0 || null != productPrice && '' !== productPrice;
-    const hasProductSecondaryLine = null != productSpec && productSpec.length > 0 || null != productQuantity && '' !== productQuantity;
-    const hasProduct = hasProductImage || hasProductMainLine || hasProductSecondaryLine;
-    const hasInfoItems = infoItems.length > 0;
-    const hasDiscount = null != discountText && discountText.length > 0;
-    const hasFeeItems = feeItems.length > 0;
-    const hasTotal = null != totalLabel && totalLabel.length > 0 || null != totalPrice && '' !== totalPrice;
-    const hasSummary = hasDiscount || hasFeeItems || hasTotal;
-    const hasPrimaryAction = null != primaryActionText && primaryActionText.length > 0;
-    const hasSecondaryAction = null != secondaryActionText && secondaryActionText.length > 0;
-    const hasActions = hasPrimaryAction || hasSecondaryAction;
     return <view className={useThemeClassName(clsx('doubao-order-card', className))} style={style} bindtap={onClick} clip-radius="true">
-      <view className="doubao-order-card__title-bar">
-        <view className="doubao-order-card__app">
-          <OrderCardIcon appIconSrc={appInfo.appIconSrc}/>
-          <text className="doubao-order-card__app-name" text-maxline="1">
-            {appInfo.appName}
-          </text>
-        </view>
-        {showMore && null != moreText && moreText.length > 0 ? <view className="doubao-order-card__more" catchtap={onMoreClick}>
-            <text className="doubao-order-card__more-text" text-maxline="1">
-              {moreText}
-            </text>
-            <view className="doubao-order-card__more-chevron"/>
-          </view> : null}
-      </view>
+      <TemplateTitleBar moreText={moreText} showMore={showMore} onMoreClick={onMoreClick}/>
 
-      {hasProduct ? <view className="doubao-order-card__product" catchtap={onProductClick}>
-          {hasProductImage ? <OrderCardProductImage productImage={props.productImage} productImageSrc={props.productImageSrc}/> : null}
-          <view className={clsx('doubao-order-card__product-content', hasProductImage && 'doubao-order-card__product-content--with-image')}>
-            {hasProductMainLine ? <view className="doubao-order-card__product-line-main">
-                {null != productTitle && productTitle.length > 0 ? <view className="doubao-order-card__product-title-wrap">
-                    <text className="doubao-order-card__product-title" text-maxline="1">
-                      {productTitle}
-                    </text>
-                    <view className="doubao-order-card__product-chevron"/>
-                  </view> : null}
-                {null != productPricePrefix && productPricePrefix.length > 0 || null != productPrice && '' !== productPrice ? <view className="doubao-order-card__product-price">
-                    {null != productPricePrefix && productPricePrefix.length > 0 ? <text className="doubao-order-card__product-price-prefix" text-maxline="1">
-                        {productPricePrefix}
-                      </text> : null}
-                    {null != productPrice && '' !== productPrice ? <text className="doubao-order-card__product-price-value" text-maxline="1">
-                        {productPrice}
-                      </text> : null}
-                  </view> : null}
-              </view> : null}
-            {hasProductSecondaryLine ? <view className="doubao-order-card__product-line-secondary">
-                {null != productSpec && productSpec.length > 0 ? <text className="doubao-order-card__product-spec" text-maxline="1">
-                    {productSpec}
-                  </text> : null}
-                {null != productQuantity && '' !== productQuantity ? <text className="doubao-order-card__product-quantity" text-maxline="1">
-                    ×{productQuantity}
-                  </text> : null}
-              </view> : null}
-          </view>
-        </view> : null}
+      <TemplateProductSummary title={productTitle} spec={productSpec} image={props.productImage} imageSrc={props.productImageSrc} pricePrefix={productPricePrefix} price={productPrice} quantity={productQuantity} onClick={onProductClick}/>
 
-      {hasInfoItems || hasSummary ? <view className="doubao-order-card__info">
-          {infoItems.map((item, index)=><view className="doubao-order-card__info-row" key={item.key ?? index}>
-              <text className="doubao-order-card__info-label" text-maxline="1">
-                {item.label}
-              </text>
-              <view className="doubao-order-card__info-value-wrap">
-                <text className="doubao-order-card__info-value" text-maxline="1">
-                  {item.value}
-                </text>
-                {null != item.valueExtra ? <text className="doubao-order-card__info-value" text-maxline="1">
-                    {item.valueExtra}
-                  </text> : null}
-              </view>
-            </view>)}
-          {hasSummary ? <view className="doubao-order-card__summary">
-              <view className="doubao-order-card__summary-content">
-                {hasDiscount ? <text className="doubao-order-card__fee-text" text-maxline="1">
-                    {discountText}
-                  </text> : null}
-                {feeItems.map((item, index)=><text className="doubao-order-card__fee-text" text-maxline="1" key={item.key ?? index}>
-                    {item.label}
-                    {item.value}
-                  </text>)}
-                {hasTotal ? <view className="doubao-order-card__total">
-                    {null != totalLabel && totalLabel.length > 0 ? <text className="doubao-order-card__total-label" text-maxline="1">
-                        {totalLabel}
-                      </text> : null}
-                    {null != totalPrice && '' !== totalPrice ? <text className="doubao-order-card__total-price" text-maxline="1">
-                        {totalPrice}
-                      </text> : null}
-                  </view> : null}
-              </view>
-            </view> : null}
-        </view> : null}
+      <TemplateInfoSection infoItems={infoItems} feeItems={feeItems} discountText={discountText} totalLabel={totalLabel} totalPrice={totalPrice} valueLayout="column"/>
 
-      {hasActions ? <view className="doubao-order-card__actions">
-          {hasSecondaryAction ? <Button className="doubao-order-card__action doubao-order-card__action--secondary" type="default" text={secondaryActionText} onClick={onSecondaryActionClick}/> : null}
-          {hasPrimaryAction ? <Button className="doubao-order-card__action doubao-order-card__action--primary" type="primary" text={primaryActionText} onClick={onPrimaryActionClick}/> : null}
-        </view> : null}
+      <TemplateActionBar secondaryActionText={secondaryActionText} primaryActionText={primaryActionText} onSecondaryActionClick={onSecondaryActionClick} onPrimaryActionClick={onPrimaryActionClick}/>
     </view>;
 }
 export { OrderCard };

package/dist/order-card/styles.css

@@ -2,6 +2,12 @@
   box-sizing: border-box;
   background-color: var(--bg-base-1);
   border: 1px solid var(--bg-base-2-overlay);
+  --doubao-template-info-section-padding: 12px 16px;
+  --doubao-template-info-section-row-align: flex-start;
+  --doubao-template-info-section-row-gap: 8px;
+  --doubao-template-info-section-label-margin-right: 8px;
+  --doubao-template-info-section-summary-margin-top: 8px;
+  --doubao-template-info-section-fee-shrink: 0;
   border-radius: 8px;
   flex-direction: column;
   align-items: stretch;
@@ -10,371 +16,3 @@
   overflow: hidden;
 }
 
-.doubao-order-card__title-bar {
-  box-sizing: border-box;
-  border-bottom: .5px solid var(--neutral-transparent-1);
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  height: 40px;
-  padding: 0 16px;
-  display: flex;
-}
-
-.doubao-order-card__app {
-  flex-direction: row;
-  align-items: center;
-  min-width: 0;
-  display: flex;
-}
-
-.doubao-order-card__app-icon {
-  background-color: var(--neutral-30);
-  border-radius: 4px;
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  overflow: hidden;
-}
-
-.doubao-order-card__app-name {
-  color: var(--neutral-50);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-left: 6px;
-  font-family: PingFang SC, sans-serif;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 18px;
-  overflow: hidden;
-}
-
-.doubao-order-card__more {
-  flex-direction: row;
-  flex-shrink: 0;
-  justify-content: flex-end;
-  align-items: center;
-  min-width: 62.5px;
-  display: flex;
-}
-
-.doubao-order-card__more-text {
-  color: var(--neutral-50);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: PingFang SC, sans-serif;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 18px;
-  overflow: hidden;
-}
-
-.doubao-order-card__more-chevron {
-  box-sizing: border-box;
-  border-top: 1px solid var(--neutral-50);
-  border-right: 1px solid var(--neutral-50);
-  width: 7px;
-  height: 7px;
-  margin-left: 2px;
-  transform: rotate(45deg);
-}
-
-.doubao-order-card__product {
-  box-sizing: border-box;
-  background-color: var(--bg-base-1);
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
-  padding: 12px 16px 12px 12px;
-  display: flex;
-}
-
-.doubao-order-card__product-image {
-  background-color: var(--bg-base-1-overlay);
-  border-radius: 5px;
-  flex-shrink: 0;
-  width: 80px;
-  height: 80px;
-  overflow: hidden;
-}
-
-.doubao-order-card__product-content {
-  flex-direction: column;
-  flex: 1 1 0;
-  min-width: 0;
-  display: flex;
-}
-
-.doubao-order-card__product-content--with-image {
-  margin-left: 12px;
-}
-
-.doubao-order-card__product-line-main, .doubao-order-card__product-line-secondary {
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
-  min-width: 0;
-  display: flex;
-}
-
-.doubao-order-card__product-line-main {
-  height: 24px;
-}
-
-.doubao-order-card__product-line-secondary {
-  height: 20px;
-  margin-top: 2px;
-}
-
-.doubao-order-card__product-title-wrap {
-  flex-direction: row;
-  flex: 1 1 0;
-  align-items: center;
-  min-width: 0;
-  margin-right: 8px;
-  display: flex;
-}
-
-.doubao-order-card__product-title {
-  min-width: 0;
-  color: var(--neutral-100);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: PingFang SC, sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 24px;
-  overflow: hidden;
-}
-
-.doubao-order-card__product-chevron {
-  box-sizing: border-box;
-  border-top: 1.5px solid var(--neutral-30);
-  border-right: 1.5px solid var(--neutral-30);
-  flex-shrink: 0;
-  width: 7px;
-  height: 7px;
-  margin-left: 5px;
-  transform: rotate(45deg);
-}
-
-.doubao-order-card__product-price {
-  color: var(--neutral-100);
-  white-space: nowrap;
-  flex-direction: row;
-  flex-shrink: 0;
-  align-items: flex-end;
-  font-family: PingFang SC, sans-serif;
-  font-style: normal;
-  font-weight: 500;
-  display: flex;
-}
-
-.doubao-order-card__product-price-prefix {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 22px;
-  font-size: 11px;
-  line-height: 17px;
-  overflow: hidden;
-}
-
-.doubao-order-card__product-price-value {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-left: 2px;
-  font-size: 13px;
-  line-height: 19px;
-  overflow: hidden;
-}
-
-.doubao-order-card__product-spec {
-  min-width: 0;
-  color: var(--neutral-50);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1 1 0;
-  font-family: PingFang SC, sans-serif;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 18px;
-  overflow: hidden;
-}
-
-.doubao-order-card__product-quantity {
-  color: var(--neutral-50);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex-shrink: 0;
-  margin-left: 8px;
-  font-family: PingFang SC, sans-serif;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
-  overflow: hidden;
-}
-
-.doubao-order-card__info {
-  box-sizing: border-box;
-  border-top: .5px solid var(--neutral-transparent-1);
-  flex-direction: column;
-  width: 100%;
-  padding: 12px 16px;
-  display: flex;
-}
-
-.doubao-order-card__info-row {
-  flex-direction: row;
-  align-items: flex-start;
-  width: 100%;
-  min-width: 0;
-  display: flex;
-}
-
-.doubao-order-card__info-row + .doubao-order-card__info-row {
-  margin-top: 8px;
-}
-
-.doubao-order-card__info-label {
-  width: 66px;
-  color: var(--neutral-100);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex-shrink: 0;
-  font-family: PingFang SC, sans-serif;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
-  overflow: hidden;
-}
-
-.doubao-order-card__info-value-wrap {
-  flex-direction: column;
-  flex: 1 1 0;
-  align-items: flex-end;
-  min-width: 0;
-  margin-left: 8px;
-  display: flex;
-}
-
-.doubao-order-card__info-value {
-  max-width: 100%;
-  color: var(--neutral-50);
-  text-align: right;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: PingFang SC, sans-serif;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
-  overflow: hidden;
-}
-
-.doubao-order-card__summary {
-  flex-direction: row;
-  justify-content: flex-end;
-  width: 100%;
-  min-width: 0;
-  margin-top: 8px;
-  display: flex;
-}
-
-.doubao-order-card__summary-content {
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-  min-width: 0;
-  max-width: 100%;
-  display: flex;
-  overflow: hidden;
-}
-
-.doubao-order-card__fee-text {
-  color: var(--neutral-50);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex-shrink: 0;
-  margin-left: 6px;
-  font-family: PingFang SC, sans-serif;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
-  overflow: hidden;
-}
-
-.doubao-order-card__fee-text:first-child {
-  margin-left: 0;
-}
-
-.doubao-order-card__total {
-  flex-direction: row;
-  flex-shrink: 0;
-  align-items: center;
-  margin-left: 6px;
-  display: flex;
-}
-
-.doubao-order-card__total-label {
-  color: var(--neutral-100);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: PingFang SC, sans-serif;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 20px;
-  overflow: hidden;
-}
-
-.doubao-order-card__total-price {
-  color: var(--neutral-100);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-left: 2px;
-  font-family: PingFang SC, sans-serif;
-  font-size: 15px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 22px;
-  overflow: hidden;
-}
-
-.doubao-order-card__actions {
-  box-sizing: border-box;
-  background-color: var(--bg-base-1);
-  flex-direction: row;
-  width: 100%;
-  padding: 8px 12px 12px;
-  display: flex;
-}
-
-.doubao-order-card__action {
-  --doubao-btn-border-radius: 8px;
-  --doubao-btn-default-height: 44px;
-  --doubao-btn-default-padding-x: 12px;
-  --doubao-btn-default-padding-y: 0;
-  --doubao-btn-default-font-size: 16px;
-  --doubao-btn-default-line-height: 22px;
-  --doubao-btn-primary-bg: var(--primary-50);
-  --doubao-btn-primary-text: var(--static-white);
-  --doubao-btn-default-bg: var(--bg-base-2-overlay);
-  --doubao-btn-default-text: var(--neutral-100);
-  flex: 1 1 0;
-  width: auto;
-  min-width: 0;
-  height: 44px;
-}
-
-.doubao-order-card__action + .doubao-order-card__action {
-  margin-left: 10px;
-}
-

package/dist/product-action-card/index.d.ts

@@ -0,0 +1,40 @@
+import type { CSSProperties, TouchEvent } from '@lynx-js/types';
+import type { ReactElement, ReactNode } from 'react';
+import type { TemplateText } from '../types.js';
+import './styles.scss';
+export interface ProductActionCardProps {
+    /** 标题栏右侧「更多」入口的文案。 */
+    moreText?: string;
+    /** 是否展示标题栏右侧「更多」入口。 */
+    showMore?: boolean;
+    /** 商品标题。 */
+    productTitle?: string;
+    /** 商品规格说明。 */
+    productSpec?: string;
+    /** 商品图片地址。 */
+    productImageSrc?: string;
+    /** 商品自定义图片节点；优先级高于 productImageSrc。 */
+    productImage?: ReactNode;
+    /** 商品价格前缀文案。 */
+    productPricePrefix?: string;
+    /** 商品价格或右侧摘要文案。 */
+    productPrice?: TemplateText;
+    /** 商品数量。 */
+    productQuantity?: TemplateText;
+    /** 主按钮文案。 */
+    primaryActionText?: string;
+    /** 卡片根节点自定义类名。 */
+    className?: string;
+    /** 卡片根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击卡片根节点时触发。 */
+    onClick?: (event: TouchEvent) => void;
+    /** 点击标题栏右侧「更多」入口时触发。 */
+    onMoreClick?: (event: TouchEvent) => void;
+    /** 点击商品区域时触发。 */
+    onProductClick?: (event: TouchEvent) => void;
+    /** 点击主按钮时触发。 */
+    onPrimaryActionClick?: (event?: TouchEvent) => void;
+}
+export declare function ProductActionCard(props: ProductActionCardProps): ReactElement;
+//# sourceMappingURL=index.d.ts.map

package/dist/product-action-card/index.js

@@ -0,0 +1,17 @@
+import { useThemeClassName } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
+import { TemplateActionBar } from "../components/action-bar/index.js";
+import { TemplateProductSummary } from "../components/product-summary/index.js";
+import { TemplateTitleBar } from "../components/title-bar/index.js";
+import "./styles.css";
+function ProductActionCard(props) {
+    const { moreText, showMore = true, productTitle, productSpec, productPricePrefix, productPrice, productQuantity, primaryActionText, className, style, onClick, onMoreClick, onProductClick, onPrimaryActionClick } = props;
+    return <view className={useThemeClassName(clsx('doubao-product-action-card', className))} style={style} bindtap={onClick}>
+      <TemplateTitleBar moreText={moreText} showMore={showMore} onMoreClick={onMoreClick}/>
+      <view className="doubao-product-action-card__body">
+        <TemplateProductSummary title={productTitle} spec={productSpec} image={props.productImage} imageSrc={props.productImageSrc} pricePrefix={productPricePrefix} price={productPrice} quantity={productQuantity} onClick={onProductClick}/>
+        <TemplateActionBar primaryActionText={primaryActionText} onPrimaryActionClick={onPrimaryActionClick}/>
+      </view>
+    </view>;
+}
+export { ProductActionCard };

package/dist/product-action-card/styles.css

@@ -0,0 +1,20 @@
+.doubao-product-action-card {
+  box-sizing: border-box;
+  background-color: var(--doubao-product-action-card-bg);
+  border: 1px solid var(--doubao-product-action-card-border);
+  border-radius: 8px;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-product-action-card__body {
+  box-sizing: border-box;
+  background-color: var(--doubao-product-action-card-bg);
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+

package/dist/ticket-order-card/index.d.ts

@@ -0,0 +1,78 @@
+import type { CSSProperties, TouchEvent } from '@lynx-js/types';
+import type { ReactElement, ReactNode } from 'react';
+import type { TemplateKey, TemplateText } from '../types.js';
+import './styles.scss';
+export interface TicketOrderCardProps {
+    /** 标题栏右侧「更多」入口的文案。 */
+    moreText?: string;
+    /** 是否展示标题栏右侧「更多」入口。 */
+    showMore?: boolean;
+    /** 航程信息列表。 */
+    routeItems?: TicketOrderCardRouteItem[];
+    /** 订单信息列表。 */
+    infoItems?: TicketOrderCardInfoItem[];
+    /** 费用明细列表。 */
+    feeItems?: TicketOrderCardFeeItem[];
+    /** 合计价格前的标签文案。 */
+    totalLabel?: TemplateText;
+    /** 合计价格。 */
+    totalPrice?: TemplateText;
+    /** 合计区域自定义内容；优先级高于 totalLabel 和 totalPrice。 */
+    totalContent?: ReactNode;
+    /** 主按钮文案。 */
+    primaryActionText?: string;
+    /** 次按钮文案。 */
+    secondaryActionText?: string;
+    /** 卡片根节点自定义类名。 */
+    className?: string;
+    /** 卡片根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击卡片根节点时触发。 */
+    onClick?: (event: TouchEvent) => void;
+    /** 点击标题栏右侧「更多」入口时触发。 */
+    onMoreClick?: (event: TouchEvent) => void;
+    /** 点击主按钮时触发。 */
+    onPrimaryActionClick?: (event?: TouchEvent) => void;
+    /** 点击次按钮时触发。 */
+    onSecondaryActionClick?: (event?: TouchEvent) => void;
+}
+export interface TicketOrderCardRouteItem {
+    /** 航程项唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+    /** 航程标题，例如「出发地 - 到达地」。 */
+    title?: TemplateText;
+    /** 航程描述，例如「6月1日 周六 20:50-23:50 CZ0000 经济舱」。 */
+    description?: TemplateText;
+    /** 是否展示标题右侧箭头。 */
+    showChevron?: boolean;
+    /** 点击航程项时触发。 */
+    onClick?: (event: TouchEvent) => void;
+}
+export interface TicketOrderCardInfoItem {
+    /** 信息项唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+    /** 信息项标签。 */
+    label?: TemplateText;
+    /** 信息项标签块内容；优先级高于 label。 */
+    labelContent?: ReactNode;
+    /** 信息项主内容。 */
+    value?: TemplateText;
+    /** 信息项主内容块内容；优先级高于 value。 */
+    valueContent?: ReactNode;
+    /** 信息项补充内容。 */
+    valueExtra?: TemplateText;
+    /** 信息项补充内容块内容；优先级高于 valueExtra。 */
+    valueExtraContent?: ReactNode;
+}
+export interface TicketOrderCardFeeItem {
+    /** 费用项唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+    /** 费用项标签。 */
+    label?: TemplateText;
+    /** 费用项金额或数值。 */
+    value?: TemplateText;
+    /** 费用项自定义内容；优先级高于 label 和 value。 */
+    content?: ReactNode;
+}
+export declare function TicketOrderCard(props: TicketOrderCardProps): ReactElement;
+//# sourceMappingURL=index.d.ts.map