@doubao-dev/template 0.0.38-canary-22dd4cbf-20260720020201

package/dist/content-card/index.js

@@ -0,0 +1,72 @@
+import { useThemeClassName } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
+import { renderTemplateExtraAction, stopTemplateExtraActionTap } from "../components/extra-action/index.js";
+import { TemplateCardFooter } from "../components/footer/index.js";
+import { TemplateCardHeader } from "../components/header/index.js";
+import "./styles.css";
+function isContentCardNodeEmpty(content) {
+    return null == content || 'boolean' == typeof content || '' === content;
+}
+function ContentCardThumbnail({ thumbnail }) {
+    if (isContentCardNodeEmpty(thumbnail)) return null;
+    return <view className="doubao-content-card__thumbnail">{thumbnail}</view>;
+}
+function renderContentCardText(content, className) {
+    if (isContentCardNodeEmpty(content)) return null;
+    if ('string' == typeof content || 'number' == typeof content) return <text className={className} text-maxline="1">
+        {content}
+      </text>;
+    return <view className={`${className}-custom`}>{content}</view>;
+}
+function isTemplateExtraAction(action) {
+    return null != action && 'object' == typeof action && 'type' in action && ('button' === action.type || 'switch' === action.type || 'playback' === action.type);
+}
+function isContentCardActionEmpty(action) {
+    return null == action || 'boolean' == typeof action || '' === action;
+}
+function renderContentCardAction(action) {
+    if (isContentCardActionEmpty(action)) return null;
+    if (isTemplateExtraAction(action)) return renderTemplateExtraAction(action, {
+        button: 'doubao-content-card__item-action-button',
+        switch: 'doubao-content-card__item-action-switch',
+        playback: 'doubao-content-card__item-action-playback',
+        playbackPlaying: 'doubao-content-card__item-action-playback--playing',
+        playbackDisabled: 'doubao-content-card__item-action-playback--disabled',
+        playbackIcon: 'doubao-content-card__item-action-playback-icon'
+    });
+    return action;
+}
+function ContentCardItemView({ item, isLast }) {
+    const { title, subtitle } = item;
+    const hasThumbnail = !isContentCardNodeEmpty(item.thumbnail);
+    const subtitleNode = renderContentCardText(subtitle, 'doubao-content-card__subtitle');
+    const actionNode = renderContentCardAction(item.action);
+    return <view className={clsx('doubao-content-card__item', isLast && 'doubao-content-card__item--last', !hasThumbnail && 'doubao-content-card__item--without-thumbnail', item.className)} style={item.style} {...null != item.onClick ? {
+        catchtap: item.onClick
+    } : {}}>
+      {item.children ?? <view className="doubao-content-card__content">
+          <view className="doubao-content-card__main">
+            {hasThumbnail && <ContentCardThumbnail thumbnail={item.thumbnail}/>}
+            <view className="doubao-content-card__text">
+              {renderContentCardText(title, 'doubao-content-card__title')}
+              {subtitleNode && <view className="doubao-content-card__secondary">{subtitleNode}</view>}
+            </view>
+          </view>
+          {actionNode && <view className="doubao-content-card__item-action" catchtap={stopTemplateExtraActionTap}>
+              {actionNode}
+            </view>}
+        </view>}
+    </view>;
+}
+function ContentCard(props) {
+    const { header, items, footer, children, className, style, onClick } = props;
+    const contentItems = items ?? [];
+    return <view className={useThemeClassName(clsx('doubao-content-card', className))} style={style} bindtap={onClick} clip-radius="true">
+      <TemplateCardHeader actionText={header?.actionText} showAction={header?.showAction} onActionClick={header?.onActionClick}/>
+      <view className="doubao-content-card__body">
+        {children ?? contentItems.map((item, index)=><ContentCardItemView key={item.key ?? index} item={item} isLast={index === contentItems.length - 1}/>)}
+      </view>
+      <TemplateCardFooter primaryActionButton={footer?.primaryActionButton} secondaryActionButton={footer?.secondaryActionButton}/>
+    </view>;
+}
+export { ContentCard };

package/dist/content-card/styles.css

@@ -0,0 +1,160 @@
+.doubao-content-card {
+  box-sizing: border-box;
+  background-color: var(--bg-base-1);
+  border: 1px solid var(--bg-base-2-overlay);
+  border-radius: 8px;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-content-card__body {
+  box-sizing: border-box;
+  background-color: var(--bg-base-1);
+  width: 100%;
+}
+
+.doubao-content-card__item {
+  box-sizing: border-box;
+  background-color: var(--bg-base-1);
+  width: 100%;
+  padding: 12px;
+  position: relative;
+}
+
+.doubao-content-card__item--without-thumbnail {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+.doubao-content-card__item:after {
+  content: "";
+  background-color: var(--neutral-transparent-1);
+  height: .5px;
+  position: absolute;
+  bottom: 0;
+  left: 104px;
+  right: 0;
+}
+
+.doubao-content-card__item--last:after {
+  display: none;
+}
+
+.doubao-content-card__content {
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-width: 0;
+  display: flex;
+}
+
+.doubao-content-card__main {
+  flex-direction: row;
+  flex: 1 1 0;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  display: flex;
+}
+
+.doubao-content-card__thumbnail {
+  background-color: var(--bg-base-1-overlay);
+  border-radius: 5px;
+  flex-shrink: 0;
+  width: 80px;
+  height: 80px;
+  overflow: hidden;
+}
+
+.doubao-content-card__text {
+  flex-direction: column;
+  flex: 1 1 0;
+  align-items: flex-start;
+  min-width: 0;
+  display: flex;
+}
+
+.doubao-content-card__title {
+  width: 100%;
+  height: 24px;
+  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-content-card__title-custom, .doubao-content-card__subtitle-custom {
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-content-card__secondary {
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: 24px;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-content-card__subtitle {
+  width: 100%;
+  color: var(--neutral-70);
+  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-content-card__item-action {
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.doubao-content-card__item-action-button {
+  width: 80px;
+}
+
+.doubao-content-card__item-action-switch {
+  flex-shrink: 0;
+}
+
+.doubao-content-card__item-action-playback {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  display: flex;
+}
+
+.doubao-content-card__item-action-playback--disabled {
+  opacity: .4;
+}
+
+.doubao-content-card__item-action-playback-icon {
+  width: 32px;
+  height: 32px;
+}
+

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { ContentCard, type ContentCardItem, type ContentCardProps } from './content-card/index.js';
+export type { TemplateCardHeaderProps } from './components/header/index.js';
+export type { TemplateCardFooterActionButton, TemplateCardFooterProps } from './components/footer/index.js';
+export type { TemplateExtraAction, TemplateExtraActionButton, TemplateExtraActionPlayback, TemplateExtraActionSwitch } from './components/extra-action/index.js';
+export { AskHumanCard, type AskHumanCardArrowPosition, type AskHumanCardItem, type AskHumanCardProps } from './ask-human-card/index.js';
+export { CheckoutCard, type CheckoutCardFeeItem, type CheckoutCardInfoItem, type CheckoutCardProductItem, type CheckoutCardProps } from './checkout-card/index.js';
+export { PriceActionCard, type PriceActionCardInfoRow, type PriceActionCardItem, type PriceActionCardProps } from './price-action-card/index.js';
+export { TransitCard, type TransitCardItem, type TransitCardProps } from './transit-card/index.js';
+export type { TemplateKey, TemplateText } from './types.js';
+export { TicketOrderCard, type TicketOrderCardFeeItem, type TicketOrderCardInfoItem, type TicketOrderCardProps, type TicketOrderCardRouteItem } from './ticket-order-card/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,6 @@
+export { ContentCard } from "./content-card/index.js";
+export { AskHumanCard } from "./ask-human-card/index.js";
+export { CheckoutCard } from "./checkout-card/index.js";
+export { PriceActionCard } from "./price-action-card/index.js";
+export { TransitCard } from "./transit-card/index.js";
+export { TicketOrderCard } from "./ticket-order-card/index.js";

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

@@ -0,0 +1,52 @@
+import type { CSSProperties, TouchEvent } from '@lynx-js/types';
+import type { ReactElement, ReactNode } from 'react';
+import { type TemplateCardFooterProps } from '../components/footer/index.js';
+import { type TemplateCardHeaderProps } from '../components/header/index.js';
+import type { TemplateKey, TemplateText } from '../types.js';
+import './styles.scss';
+export interface PriceActionCardProps {
+    /** 标题栏配置。 */
+    header?: TemplateCardHeaderProps;
+    /** 列表项数据。 */
+    items?: PriceActionCardItem[];
+    /** 底部操作区配置。 */
+    footer?: TemplateCardFooterProps;
+    /** 自定义卡片内容；传入后不再渲染默认列表，标题栏和底部操作区仍由模板渲染。 */
+    children?: ReactNode;
+    /** 卡片根节点自定义类名。 */
+    className?: string;
+    /** 卡片根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击卡片根节点时触发。 */
+    onClick?: (event: TouchEvent) => void;
+}
+export interface PriceActionCardItem {
+    /** 列表项唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+    /** 左侧价格或主数值。 */
+    price?: TemplateText;
+    /** 左侧辅助标签。 */
+    badgeText?: TemplateText;
+    /** 中间信息行。最多展示前 2 行。 */
+    infoRows?: PriceActionCardInfoRow[];
+    /** 右侧操作按钮文案；不传或传空字符串时不展示。 */
+    actionText?: string;
+    /** 列表项自定义内容；传入后不再渲染默认三列结构。 */
+    children?: ReactNode;
+    /** 列表项根节点自定义类名。 */
+    className?: string;
+    /** 列表项根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击列表项时触发。 */
+    onClick?: (event: TouchEvent) => void;
+    /** 点击列表项右侧操作按钮时触发。 */
+    onActionClick?: (event?: TouchEvent) => void;
+}
+export interface PriceActionCardInfoRow {
+    /** 信息行唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+    /** 信息行文案。 */
+    text: TemplateText;
+}
+export declare function PriceActionCard(props: PriceActionCardProps): ReactElement;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,64 @@
+import { Button, useThemeClassName } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
+import { TemplateCardFooter } from "../components/footer/index.js";
+import { TemplateCardHeader } from "../components/header/index.js";
+import "./styles.css";
+const PRICE_ACTION_CARD_INFO_ROW_LIMIT = 2;
+const PRICE_ACTION_CARD_CURRENCY_PATTERN = /^([¥￥$€£])(.+)$/;
+function isPriceActionCardTextEmpty(content) {
+    return null == content || '' === content;
+}
+function isPriceActionCardNodeEmpty(content) {
+    return null == content || 'boolean' == typeof content || '' === content;
+}
+function PriceActionCardPrice({ price }) {
+    const priceText = String(price);
+    const [, currency, value] = priceText.match(PRICE_ACTION_CARD_CURRENCY_PATTERN) ?? [];
+    return <view className="doubao-price-action-card__price">
+      {null != currency && <text className="doubao-price-action-card__price-currency" text-maxline="1">
+          {currency}
+        </text>}
+      <text className="doubao-price-action-card__price-value" text-maxline="1">
+        {value ?? priceText}
+      </text>
+    </view>;
+}
+function PriceActionCardItemView({ item, isLast }) {
+    const hasPrice = !isPriceActionCardTextEmpty(item.price);
+    const hasBadge = !isPriceActionCardTextEmpty(item.badgeText);
+    const hasAction = null != item.actionText && item.actionText.length > 0;
+    const hasCustomContent = !isPriceActionCardNodeEmpty(item.children);
+    const infoRows = (item.infoRows ?? []).filter((infoRow)=>!isPriceActionCardTextEmpty(infoRow.text)).slice(0, PRICE_ACTION_CARD_INFO_ROW_LIMIT);
+    return <view className={clsx('doubao-price-action-card__item', isLast && 'doubao-price-action-card__item--last', item.className)} style={item.style} {...null != item.onClick ? {
+        catchtap: item.onClick
+    } : {}}>
+      {hasCustomContent ? item.children : <view className="doubao-price-action-card__item-content">
+          <view className="doubao-price-action-card__value">
+            {hasPrice && <PriceActionCardPrice price={item.price ?? ''}/>}
+            {hasBadge && <text className="doubao-price-action-card__badge" text-maxline="1">
+                {item.badgeText}
+              </text>}
+          </view>
+          <view className="doubao-price-action-card__info">
+            {infoRows.map((infoRow, index)=><text className="doubao-price-action-card__info-row" text-maxline="1" key={infoRow.key ?? index}>
+                {infoRow.text}
+              </text>)}
+          </view>
+          {hasAction && <Button className="doubao-price-action-card__item-action" type="default" text={item.actionText} onClick={item.onActionClick}/>}
+        </view>}
+    </view>;
+}
+function PriceActionCard(props) {
+    const { header, items = [], footer, children, className, style, onClick } = props;
+    const hasCustomContent = !isPriceActionCardNodeEmpty(children);
+    return <view className={useThemeClassName(clsx('doubao-price-action-card', className))} style={style} bindtap={onClick} clip-radius="true">
+      <TemplateCardHeader actionText={header?.actionText} showAction={header?.showAction} onActionClick={header?.onActionClick}/>
+      <view className="doubao-price-action-card__body">
+        {hasCustomContent ? children : <view className="doubao-price-action-card__default">
+            {items.map((item, index)=><PriceActionCardItemView item={item} isLast={index === items.length - 1} key={item.key ?? index}/>)}
+          </view>}
+      </view>
+      <TemplateCardFooter primaryActionButton={footer?.primaryActionButton} secondaryActionButton={footer?.secondaryActionButton}/>
+    </view>;
+}
+export { PriceActionCard };

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

@@ -0,0 +1,161 @@
+.doubao-price-action-card {
+  box-sizing: border-box;
+  background-color: var(--bg-base-1);
+  border: 1px solid var(--bg-base-2-overlay);
+  border-radius: 8px;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-price-action-card__body {
+  box-sizing: border-box;
+  background-color: var(--bg-base-1);
+  width: 100%;
+}
+
+.doubao-price-action-card__default {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.doubao-price-action-card__item {
+  box-sizing: border-box;
+  background-color: var(--bg-base-1);
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 82px;
+  padding: 14px 12px;
+  display: flex;
+  position: relative;
+}
+
+.doubao-price-action-card__item:after {
+  content: "";
+  background-color: var(--neutral-transparent-1);
+  height: .5px;
+  position: absolute;
+  bottom: 0;
+  left: 95px;
+  right: 0;
+}
+
+.doubao-price-action-card__item--last:after {
+  display: none;
+}
+
+.doubao-price-action-card__item-content {
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  padding-left: 4px;
+  display: flex;
+}
+
+.doubao-price-action-card__value {
+  flex-direction: column;
+  flex-shrink: 0;
+  align-items: flex-start;
+  width: 67px;
+  min-width: 0;
+  display: flex;
+}
+
+.doubao-price-action-card__price {
+  max-width: 100%;
+  height: 20px;
+  color: var(--pink-500);
+  white-space: nowrap;
+  flex-direction: row;
+  align-items: flex-end;
+  font-family: SF Pro, sans-serif;
+  font-style: normal;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-price-action-card__price-currency, .doubao-price-action-card__price-value {
+  min-width: 0;
+  color: var(--pink-500);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: SF Pro, sans-serif;
+  font-style: normal;
+  font-weight: 600;
+  overflow: hidden;
+}
+
+.doubao-price-action-card__price-currency {
+  flex-shrink: 0;
+  font-size: 13px;
+  line-height: 15px;
+}
+
+.doubao-price-action-card__price-value {
+  font-size: 17px;
+  line-height: 20px;
+}
+
+.doubao-price-action-card__badge {
+  box-sizing: border-box;
+  max-width: 100%;
+  height: 20px;
+  color: var(--pink-500);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: var(--pink-trans-6);
+  border-radius: 4px;
+  padding: 2px 3px;
+  font-family: PingFang SC, sans-serif;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 14px;
+  overflow: hidden;
+}
+
+.doubao-price-action-card__info {
+  flex-direction: column;
+  flex: 1 1 0;
+  justify-content: center;
+  min-width: 0;
+  margin-left: 16px;
+  display: flex;
+}
+
+.doubao-price-action-card__info-row {
+  width: 100%;
+  color: var(--neutral-70);
+  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-price-action-card__info-row + .doubao-price-action-card__info-row {
+  margin-top: 2px;
+}
+
+.doubao-price-action-card__item-action {
+  --doubao-button-border-radius: 8px;
+  --doubao-button-default-border-radius: 8px;
+  --doubao-button-default-height: 38px;
+  --doubao-button-default-padding-x: 12px;
+  --doubao-button-default-padding-y: 0;
+  --doubao-button-default-font-size: 14px;
+  --doubao-button-default-line-height: 20px;
+  --doubao-button-default-bg: var(--bg-base-1-overlay);
+  --doubao-button-default-text: var(--neutral-100);
+  flex-shrink: 0;
+  width: 80px;
+  height: 38px;
+  margin-left: 12px;
+}
+

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

@@ -0,0 +1,70 @@
+import type { CSSProperties, TouchEvent } from '@lynx-js/types';
+import type { ReactElement, ReactNode } from 'react';
+import { type TemplateCardFooterProps } from '../components/footer/index.js';
+import { type TemplateCardHeaderProps } from '../components/header/index.js';
+import type { TemplateKey, TemplateText } from '../types.js';
+import './styles.scss';
+export interface TicketOrderCardProps {
+    /** 标题栏配置。 */
+    header?: TemplateCardHeaderProps;
+    /** 航程信息列表。 */
+    routeItems?: TicketOrderCardRouteItem[];
+    /** 订单信息列表。 */
+    infoItems?: TicketOrderCardInfoItem[];
+    /** 费用明细列表。 */
+    feeItems?: TicketOrderCardFeeItem[];
+    /** 合计价格前的标签文案。 */
+    totalLabel?: TemplateText;
+    /** 合计价格。 */
+    totalPrice?: TemplateText;
+    /** 合计区域自定义内容；优先级高于 totalLabel 和 totalPrice。 */
+    totalContent?: ReactNode;
+    /** 底部操作区配置。 */
+    footer?: TemplateCardFooterProps;
+    /** 卡片根节点自定义类名。 */
+    className?: string;
+    /** 卡片根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击卡片根节点时触发。 */
+    onClick?: (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

package/dist/ticket-order-card/index.js

@@ -0,0 +1,27 @@
+import { useThemeClassName } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
+import { TemplateCardFooter } from "../components/footer/index.js";
+import { TemplateCardHeader } from "../components/header/index.js";
+import { TemplateInfoSection } from "../components/info-section/index.js";
+import { TemplateRouteSection, hasTemplateRouteSectionItems } from "../components/route-section/index.js";
+import "./styles.css";
+function isTicketOrderTextEmpty(content) {
+    return null == content || '' === content;
+}
+function TicketOrderCard(props) {
+    const { header, routeItems = [], infoItems = [], feeItems = [], totalLabel, totalPrice, totalContent, footer, className, style, onClick } = props;
+    const hasRouteItems = hasTemplateRouteSectionItems(routeItems);
+    const hasInfoSection = infoItems.length > 0 || feeItems.length > 0 || void 0 !== totalContent || !isTicketOrderTextEmpty(totalLabel) || !isTicketOrderTextEmpty(totalPrice);
+    const hasDefaultBody = hasRouteItems || hasInfoSection;
+    return <view className={useThemeClassName(clsx('doubao-ticket-order-card', className))} style={style} bindtap={onClick}>
+      <TemplateCardHeader actionText={header?.actionText} showAction={header?.showAction} onActionClick={header?.onActionClick}/>
+
+      {hasDefaultBody && <view className="doubao-ticket-order-card__body">
+          {hasRouteItems && <TemplateRouteSection items={routeItems}/>}
+          {hasInfoSection && <TemplateInfoSection infoItems={infoItems} feeItems={feeItems} totalLabel={totalLabel} totalPrice={totalPrice} totalContent={totalContent}/>}
+        </view>}
+
+      <TemplateCardFooter secondaryActionButton={footer?.secondaryActionButton} primaryActionButton={footer?.primaryActionButton}/>
+    </view>;
+}
+export { TicketOrderCard };

package/dist/ticket-order-card/styles.css

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