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

package/dist/components/extra-action/index.d.ts

@@ -0,0 +1,50 @@
+import type { TouchEvent } from '@lynx-js/types';
+import type { ReactNode } from 'react';
+import './styles.scss';
+/** 模板右侧控件：按钮。 */
+export interface TemplateExtraActionButton {
+    type: 'button';
+    /** 按钮文案。 */
+    text: string;
+    /** 是否禁用。 */
+    disabled?: boolean;
+    /** 是否展示加载态。 */
+    loading?: boolean;
+    /** 点击按钮时触发。 */
+    onClick?: (event?: TouchEvent) => void;
+}
+/** 模板右侧控件：开关。受控用法，必须传入 checked。 */
+export interface TemplateExtraActionSwitch {
+    type: 'switch';
+    /** 当前开关状态（受控）。 */
+    checked: boolean;
+    /** 是否禁用。 */
+    disabled?: boolean;
+    /** 开关状态变化时触发。 */
+    onChange?: (checked: boolean) => void;
+}
+/** 模板右侧控件：播放/暂停按钮。受控用法，playing=true 表示播放中（应展示暂停态）。 */
+export interface TemplateExtraActionPlayback {
+    type: 'playback';
+    /** 当前是否播放中（受控）。 */
+    playing: boolean;
+    /** 当前播放进度，范围 0-1；不传时不展示进度环。 */
+    progress?: number;
+    /** 是否禁用。 */
+    disabled?: boolean;
+    /** 切换播放/暂停时触发，参数为切换后的目标状态。 */
+    onToggle?: (playing: boolean) => void;
+}
+/** 模板右侧标准控件配置（判别联合，三选一）。 */
+export type TemplateExtraAction = TemplateExtraActionButton | TemplateExtraActionSwitch | TemplateExtraActionPlayback;
+export interface TemplateExtraActionClassNames {
+    button?: string;
+    switch?: string;
+    playback?: string;
+    playbackPlaying?: string;
+    playbackDisabled?: string;
+    playbackIcon?: string;
+}
+export declare function stopTemplateExtraActionTap(): void;
+export declare function renderTemplateExtraAction(action: TemplateExtraAction, classNames?: TemplateExtraActionClassNames): ReactNode;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/extra-action/index.js

@@ -0,0 +1,31 @@
+import { Button, Switch, useTheme } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
+import { getTemplatePlaybackIconContent } from "../../utils/icons.js";
+import "./styles.css";
+function stopTemplateExtraActionTap() {}
+function TemplatePlaybackButton(props) {
+    const { playing, progress, disabled = false, onToggle, className, playingClassName, disabledClassName, iconClassName } = props;
+    const theme = useTheme();
+    const neutral100 = 'dark' === theme ? '#ffffff' : '#000000';
+    const iconContent = getTemplatePlaybackIconContent(playing, progress, neutral100);
+    const handleTap = ()=>{
+        if (disabled) return;
+        onToggle?.(!playing);
+    };
+    return <view className={clsx(className, playing && playingClassName, disabled && disabledClassName)} catchtap={handleTap}>
+      <svg className={iconClassName} content={iconContent}/>
+    </view>;
+}
+function renderTemplateExtraAction(action, classNames = {}) {
+    switch(action.type){
+        case 'button':
+            return <Button className={clsx('doubao-template-extra-action-button', classNames.button)} type="default" text={action.text} disabled={action.disabled} loading={action.loading} onClick={action.onClick}/>;
+        case 'switch':
+            return <Switch className={classNames.switch} checked={action.checked} disabled={action.disabled} onChange={action.onChange}/>;
+        case 'playback':
+            return <TemplatePlaybackButton playing={action.playing} progress={action.progress} disabled={action.disabled} onToggle={action.onToggle} className={classNames.playback} playingClassName={classNames.playbackPlaying} disabledClassName={classNames.playbackDisabled} iconClassName={classNames.playbackIcon}/>;
+        default:
+            return null;
+    }
+}
+export { renderTemplateExtraAction, stopTemplateExtraActionTap };

package/dist/components/extra-action/styles.css

@@ -0,0 +1,10 @@
+.doubao-template-extra-action-button {
+  --doubao-button-border-radius: 8px;
+  --doubao-button-default-border-radius: 8px;
+  --doubao-button-default-height: 36px;
+  --doubao-button-default-padding-x: 12px;
+  --doubao-button-default-padding-y: 8px;
+  --doubao-button-default-font-size: 14px;
+  --doubao-button-default-line-height: 20px;
+}
+

package/dist/components/footer/index.d.ts

@@ -0,0 +1,27 @@
+import type { CSSProperties, TouchEvent } from '@lynx-js/types';
+import type { ReactElement } from 'react';
+import './styles.scss';
+export interface TemplateCardFooterActionButton {
+    /** 按钮文案。 */
+    text?: string;
+    /** 是否禁用。 */
+    disabled?: boolean;
+    /** 是否显示加载状态。 */
+    loading?: boolean;
+    /** onClick 的节流时间，单位为毫秒。 */
+    throttle?: number;
+    /** 点击按钮时触发。 */
+    onClick?: (event?: TouchEvent) => void;
+}
+export interface TemplateCardFooterProps {
+    /** 操作区根节点自定义类名。 */
+    className?: string;
+    /** 操作区根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 底部主按钮；只传一个按钮时占据整行。 */
+    primaryActionButton?: TemplateCardFooterActionButton;
+    /** 底部次按钮；只传一个按钮时占据整行。 */
+    secondaryActionButton?: TemplateCardFooterActionButton;
+}
+export declare function TemplateCardFooter(props: TemplateCardFooterProps): ReactElement | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/footer/index.js

@@ -0,0 +1,15 @@
+import { Button } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
+import "./styles.css";
+function TemplateCardFooter(props) {
+    const { className, style, primaryActionButton, secondaryActionButton } = props;
+    const hasPrimaryAction = primaryActionButton?.text != null && primaryActionButton.text.length > 0;
+    const hasSecondaryAction = secondaryActionButton?.text != null && secondaryActionButton.text.length > 0;
+    const hasDefaultActions = hasPrimaryAction || hasSecondaryAction;
+    if (!hasDefaultActions) return null;
+    return <view className={clsx('doubao-template-action-bar', className)} style={style}>
+      {hasSecondaryAction && <Button className="doubao-template-action-bar__action" type="default" {...secondaryActionButton} text={secondaryActionButton.text} onClick={secondaryActionButton.onClick}/>}
+      {hasPrimaryAction && <Button className="doubao-template-action-bar__action" type="primary" {...primaryActionButton} text={primaryActionButton.text} onClick={primaryActionButton.onClick}/>}
+    </view>;
+}
+export { TemplateCardFooter };

package/dist/components/footer/styles.css

@@ -0,0 +1,27 @@
+.doubao-template-action-bar {
+  box-sizing: border-box;
+  flex-direction: row;
+  width: 100%;
+  padding: 8px 12px 12px;
+  display: flex;
+}
+
+.doubao-template-action-bar__action {
+  --doubao-button-border-radius: 8px;
+  --doubao-button-default-border-radius: 8px;
+  --doubao-button-default-height: 44px;
+  --doubao-button-default-padding-x: 16px;
+  --doubao-button-default-padding-y: 11px;
+  --doubao-button-default-font-size: 16px;
+  --doubao-button-default-line-height: 22px;
+  border-radius: 8px;
+  flex: 1 1 0;
+  width: auto;
+  min-width: 0;
+  height: 44px;
+}
+
+.doubao-template-action-bar__action + .doubao-template-action-bar__action {
+  margin-left: 10px;
+}
+

package/dist/components/header/index.d.ts

@@ -0,0 +1,13 @@
+import type { TouchEvent } from '@lynx-js/types';
+import type { ReactElement } from 'react';
+import './styles.scss';
+export interface TemplateCardHeaderProps {
+    /** 标题栏右侧操作文案。 */
+    actionText?: string;
+    /** 是否展示标题栏右侧操作；默认根据 actionText 是否存在决定。 */
+    showAction?: boolean;
+    /** 点击标题栏右侧操作时触发。 */
+    onActionClick?: (event: TouchEvent) => void;
+}
+export declare function TemplateCardHeader(props: TemplateCardHeaderProps): ReactElement;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/header/index.js

@@ -0,0 +1,27 @@
+import { getAppInfo } from "../../utils/app-info.js";
+import { TemplateChevronRightIcon } from "../chevron-right-icon/index.js";
+import "./styles.css";
+function TemplateCardHeaderIcon({ appIconSrc }) {
+    if (null != appIconSrc && appIconSrc.length > 0) return <image className="doubao-template-title-bar__app-icon" src={appIconSrc} mode="aspectFill"/>;
+    return <view className="doubao-template-title-bar__app-icon"/>;
+}
+function TemplateCardHeader(props) {
+    const { actionText, showAction = true, onActionClick } = props;
+    const appInfo = getAppInfo();
+    const hasAction = showAction && null != actionText && actionText.length > 0;
+    return <view className="doubao-template-title-bar">
+      <view className="doubao-template-title-bar__app">
+        <TemplateCardHeaderIcon appIconSrc={appInfo.appIconSrc}/>
+        <text className="doubao-template-title-bar__app-name" text-maxline="1">
+          {appInfo.appName}
+        </text>
+      </view>
+      {hasAction && <view className="doubao-template-title-bar__more" catchtap={onActionClick}>
+          <text className="doubao-template-title-bar__more-text" text-maxline="1">
+            {actionText}
+          </text>
+          <TemplateChevronRightIcon className="doubao-template-title-bar__more-chevron"/>
+        </view>}
+    </view>;
+}
+export { TemplateCardHeader };

package/dist/components/header/styles.css

@@ -0,0 +1,62 @@
+.doubao-template-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: 12px;
+  display: flex;
+}
+
+.doubao-template-title-bar__app {
+  flex-direction: row;
+  align-items: center;
+  display: flex;
+}
+
+.doubao-template-title-bar__app-icon {
+  border-radius: 4px;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+}
+
+.doubao-template-title-bar__app-name, .doubao-template-title-bar__more-text {
+  color: var(--neutral-50);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PingFang SC, sans-serif;
+  font-size: 12px;
+  font-style: normal;
+  line-height: 18px;
+  overflow: hidden;
+}
+
+.doubao-template-title-bar__app-name {
+  margin-left: 6px;
+  font-weight: 500;
+}
+
+.doubao-template-title-bar__more {
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: flex-end;
+  align-items: center;
+  min-width: 62.5px;
+  display: flex;
+}
+
+.doubao-template-title-bar__more-text {
+  font-weight: 400;
+}
+
+.doubao-template-title-bar__more-chevron {
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  margin-left: 2px;
+}
+

package/dist/components/info-section/index.d.ts

@@ -0,0 +1,47 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { TemplateKey, TemplateText } from '../../types.js';
+import './styles.scss';
+export interface TemplateInfoSectionProps {
+    /** 信息行列表。 */
+    infoItems?: TemplateInfoSectionInfoItem[];
+    /** 费用明细列表。 */
+    feeItems?: TemplateInfoSectionFeeItem[];
+    /** 优惠信息文案。 */
+    discountText?: TemplateText;
+    /** 合计价格前的标签文案。 */
+    totalLabel?: TemplateText;
+    /** 合计价格。 */
+    totalPrice?: TemplateText;
+    /** 合计区域自定义内容；优先级高于 totalLabel 和 totalPrice。 */
+    totalContent?: ReactNode;
+    /** 信息值排列方式。 */
+    valueLayout?: 'row' | 'column';
+}
+export interface TemplateInfoSectionInfoItem {
+    /** 信息项唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+    /** 信息项标签。 */
+    label?: TemplateText;
+    /** 信息项标签块内容；优先级高于 label。 */
+    labelContent?: ReactNode;
+    /** 信息项主内容。 */
+    value?: ReactNode;
+    /** 信息项主内容块内容；优先级高于 value。 */
+    valueContent?: ReactNode;
+    /** 信息项补充内容。 */
+    valueExtra?: ReactNode;
+    /** 信息项补充内容块内容；优先级高于 valueExtra。 */
+    valueExtraContent?: ReactNode;
+}
+export interface TemplateInfoSectionFeeItem {
+    /** 费用项唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+    /** 费用项标签。 */
+    label?: TemplateText;
+    /** 费用项金额或数值。 */
+    value?: TemplateText;
+    /** 费用项自定义内容；优先级高于 label 和 value。 */
+    content?: ReactNode;
+}
+export declare function TemplateInfoSection(props: TemplateInfoSectionProps): ReactElement | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/info-section/index.js

@@ -0,0 +1,93 @@
+import { clsx } from "clsx";
+import "./styles.css";
+function isTemplateInfoSectionNodeEmpty(content) {
+    return null == content || 'boolean' == typeof content || '' === content;
+}
+function isTemplateInfoSectionTextEmpty(content) {
+    return null == content || '' === content;
+}
+function renderTemplateInfoSectionNode(textContent, nodeContent, textClassName, maxLines = 1) {
+    if (void 0 !== nodeContent) {
+        if (isTemplateInfoSectionNodeEmpty(nodeContent)) return null;
+        if ('string' == typeof nodeContent || 'number' == typeof nodeContent) return <text className={textClassName} text-maxline={maxLines}>
+          {nodeContent}
+        </text>;
+        return nodeContent;
+    }
+    if (isTemplateInfoSectionNodeEmpty(textContent)) return null;
+    if ('string' == typeof textContent || 'number' == typeof textContent) return <text className={textClassName} text-maxline={maxLines}>
+        {textContent}
+      </text>;
+    return textContent;
+}
+function hasTemplateInfoSectionInfoItemContent(item) {
+    return !isTemplateInfoSectionTextEmpty(item.label) || !isTemplateInfoSectionNodeEmpty(item.labelContent) || !isTemplateInfoSectionNodeEmpty(item.value) || !isTemplateInfoSectionNodeEmpty(item.valueContent) || !isTemplateInfoSectionNodeEmpty(item.valueExtra) || !isTemplateInfoSectionNodeEmpty(item.valueExtraContent);
+}
+function renderTemplateInfoSectionInfoItem(item, index) {
+    if (!hasTemplateInfoSectionInfoItemContent(item)) return null;
+    const labelNode = renderTemplateInfoSectionNode(item.label, item.labelContent, 'doubao-template-info-section__info-label');
+    const valueNode = renderTemplateInfoSectionNode(item.value, item.valueContent, 'doubao-template-info-section__info-value', 2);
+    const valueExtraNode = renderTemplateInfoSectionNode(item.valueExtra, item.valueExtraContent, 'doubao-template-info-section__info-value', 2);
+    return <view className="doubao-template-info-section__info-row" key={item.key ?? index}>
+      <view className="doubao-template-info-section__info-label-wrap">{labelNode}</view>
+      <view className="doubao-template-info-section__info-value-wrap">
+        {valueNode}
+        {valueExtraNode}
+      </view>
+    </view>;
+}
+function renderTemplateInfoSectionFeeItem(item, index) {
+    if (void 0 !== item.content) {
+        if (isTemplateInfoSectionNodeEmpty(item.content)) return null;
+        return <view className="doubao-template-info-section__fee" key={item.key ?? index}>
+        {item.content}
+      </view>;
+    }
+    if (isTemplateInfoSectionTextEmpty(item.label) && isTemplateInfoSectionTextEmpty(item.value)) return null;
+    return <text className="doubao-template-info-section__fee" text-maxline="1" key={item.key ?? index}>
+      {item.label}
+      {item.value}
+    </text>;
+}
+function renderTemplateInfoSectionTotal({ totalLabel, totalPrice, totalContent }) {
+    if (void 0 !== totalContent) {
+        if (isTemplateInfoSectionNodeEmpty(totalContent)) return null;
+        return <view className="doubao-template-info-section__total">{totalContent}</view>;
+    }
+    if (isTemplateInfoSectionTextEmpty(totalLabel) && isTemplateInfoSectionTextEmpty(totalPrice)) return null;
+    return <view className="doubao-template-info-section__total">
+      {!isTemplateInfoSectionTextEmpty(totalLabel) && <text className="doubao-template-info-section__total-label" text-maxline="1">
+          {totalLabel}
+        </text>}
+      {!isTemplateInfoSectionTextEmpty(totalPrice) && <text className="doubao-template-info-section__total-price" text-maxline="1">
+          {totalPrice}
+        </text>}
+    </view>;
+}
+function TemplateInfoSection(props) {
+    const { infoItems = [], feeItems = [], discountText, totalLabel, totalPrice, totalContent, valueLayout = 'row' } = props;
+    const infoNodes = infoItems.map(renderTemplateInfoSectionInfoItem).filter((node)=>null != node);
+    const feeNodes = feeItems.map(renderTemplateInfoSectionFeeItem).filter((node)=>null != node);
+    const hasDiscount = !isTemplateInfoSectionTextEmpty(discountText);
+    const totalNode = renderTemplateInfoSectionTotal({
+        totalLabel,
+        totalPrice,
+        totalContent
+    });
+    const hasInfo = infoNodes.length > 0;
+    const hasSummary = hasDiscount || feeNodes.length > 0 || null != totalNode;
+    if (!hasInfo && !hasSummary) return null;
+    return <view className={clsx('doubao-template-info-section', 'column' === valueLayout && 'doubao-template-info-section--value-column')}>
+      {hasInfo && <view className="doubao-template-info-section__info">{infoNodes}</view>}
+      {hasSummary && <view className="doubao-template-info-section__summary">
+          <view className="doubao-template-info-section__summary-content">
+            {hasDiscount && <text className="doubao-template-info-section__fee" text-maxline="1">
+                {discountText}
+              </text>}
+            {feeNodes}
+            {totalNode}
+          </view>
+        </view>}
+    </view>;
+}
+export { TemplateInfoSection };

package/dist/components/info-section/styles.css

@@ -0,0 +1,151 @@
+.doubao-template-info-section {
+  box-sizing: border-box;
+  border-top: .5px solid var(--neutral-transparent-1);
+  flex-direction: column;
+  width: 100%;
+  padding: 12px;
+  display: flex;
+}
+
+.doubao-template-info-section__info {
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
+.doubao-template-info-section__info-row {
+  flex-direction: row;
+  width: 100%;
+  display: flex;
+}
+
+.doubao-template-info-section__info-row + .doubao-template-info-section__info-row {
+  margin-top: 8px;
+}
+
+.doubao-template-info-section__info-label-wrap {
+  flex-direction: row;
+  flex: 0 0 66px;
+  align-items: center;
+  width: 66px;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-template-info-section__info-label, .doubao-template-info-section__info-value, .doubao-template-info-section__fee, .doubao-template-info-section__total-label, .doubao-template-info-section__total-price {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PingFang SC, sans-serif;
+  font-style: normal;
+  overflow: hidden;
+}
+
+.doubao-template-info-section__info-label {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  color: var(--neutral-100);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.doubao-template-info-section__info-value-wrap {
+  flex-direction: row;
+  flex: 1 1 0;
+  justify-content: flex-end;
+  align-items: center;
+  min-width: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-template-info-section__info-value {
+  min-width: 0;
+  color: var(--neutral-50);
+  text-align: right;
+  margin-left: 6px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.doubao-template-info-section__info-value:first-child {
+  margin-left: 0;
+}
+
+.doubao-template-info-section--value-column .doubao-template-info-section__info-value-wrap {
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.doubao-template-info-section--value-column .doubao-template-info-section__info-value {
+  max-width: 100%;
+  margin-left: 0;
+}
+
+.doubao-template-info-section__summary {
+  flex-direction: row;
+  justify-content: flex-end;
+  width: 100%;
+  margin-top: 8px;
+  display: flex;
+}
+
+.doubao-template-info-section__summary-content {
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  max-width: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-template-info-section__fee {
+  min-width: 0;
+  color: var(--neutral-50);
+  flex-shrink: 1;
+  margin-left: 6px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.doubao-template-info-section__fee:first-child {
+  margin-left: 0;
+}
+
+.doubao-template-info-section__total {
+  flex-flow: wrap;
+  flex-shrink: 0;
+  justify-content: flex-end;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  margin-left: 6px;
+  display: flex;
+}
+
+.doubao-template-info-section__total:first-child {
+  margin-left: 0;
+}
+
+.doubao-template-info-section__total-label {
+  max-width: 100%;
+  color: var(--neutral-100);
+  flex-shrink: 0;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.doubao-template-info-section__total-price {
+  max-width: 100%;
+  color: var(--neutral-100);
+  flex-shrink: 0;
+  margin-left: 2px;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 22px;
+}
+

package/dist/components/product-summary/index.d.ts

@@ -0,0 +1,26 @@
+import type { TouchEvent } from '@lynx-js/types';
+import type { ReactElement, ReactNode } from 'react';
+import type { TemplateText } from '../../types.js';
+import './styles.scss';
+export interface TemplateProductSummaryProps {
+    /** 商品标题。 */
+    title?: string;
+    /** 商品规格说明。 */
+    spec?: string;
+    /** 商品图片地址。 */
+    imageSrc?: string;
+    /** 商品自定义图片节点；优先级高于 imageSrc。 */
+    image?: ReactNode;
+    /** 商品价格前缀文案，例如「券后」。 */
+    pricePrefix?: string;
+    /** 商品价格。 */
+    price?: TemplateText;
+    /** 商品数量。 */
+    quantity?: TemplateText;
+    /** 是否展示商品标题右侧箭头。 */
+    showChevron?: boolean;
+    /** 点击商品摘要时触发。 */
+    onClick?: (event: TouchEvent) => void;
+}
+export declare function TemplateProductSummary(props: TemplateProductSummaryProps): ReactElement | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/product-summary/index.js

@@ -0,0 +1,55 @@
+import { TemplateChevronRightIcon } from "../chevron-right-icon/index.js";
+import "./styles.css";
+function isTemplateProductSummaryTextEmpty(content) {
+    return null == content || '' === content;
+}
+function isTemplateProductSummaryNodeEmpty(content) {
+    return null == content || 'boolean' == typeof content || '' === content;
+}
+function TemplateProductSummaryImage(props) {
+    const { image: image1, imageSrc } = props;
+    if (!isTemplateProductSummaryNodeEmpty(image1)) return <view className="doubao-template-product-summary__image">{image1}</view>;
+    if (null != imageSrc && imageSrc.length > 0) return <image className="doubao-template-product-summary__image" src={imageSrc} mode="aspectFill"/>;
+    return <view className="doubao-template-product-summary__image"/>;
+}
+function TemplateProductSummary(props) {
+    const { title, spec, imageSrc, image: image1, pricePrefix, price, quantity, showChevron = true, onClick } = props;
+    const hasImage = !isTemplateProductSummaryNodeEmpty(image1) || null != imageSrc && imageSrc.length > 0;
+    const hasTitle = null != title && title.length > 0;
+    const hasPrice = null != pricePrefix && pricePrefix.length > 0 || !isTemplateProductSummaryTextEmpty(price);
+    const hasMainLine = hasTitle || hasPrice;
+    const hasSpec = null != spec && spec.length > 0;
+    const hasQuantity = !isTemplateProductSummaryTextEmpty(quantity);
+    const hasSecondaryLine = hasSpec || hasQuantity;
+    if (!hasImage && !hasMainLine && !hasSecondaryLine) return null;
+    return <view className="doubao-template-product-summary" catchtap={onClick}>
+      {hasImage && <TemplateProductSummaryImage image={image1} imageSrc={imageSrc}/>}
+      <view className={hasImage ? 'doubao-template-product-summary__content doubao-template-product-summary__content--with-image' : 'doubao-template-product-summary__content'}>
+        {hasMainLine && <view className="doubao-template-product-summary__line-main">
+            {hasTitle && <view className="doubao-template-product-summary__title-wrap">
+                <text className="doubao-template-product-summary__title" text-maxline="1">
+                  {title}
+                </text>
+                {showChevron && <TemplateChevronRightIcon className="doubao-template-product-summary__chevron"/>}
+              </view>}
+            {hasPrice && <view className="doubao-template-product-summary__price">
+                {null != pricePrefix && pricePrefix.length > 0 && <text className="doubao-template-product-summary__price-prefix" text-maxline="1">
+                    {pricePrefix}
+                  </text>}
+                {!isTemplateProductSummaryTextEmpty(price) && <text className="doubao-template-product-summary__price-value" text-maxline="1">
+                    {price}
+                  </text>}
+              </view>}
+          </view>}
+        {hasSecondaryLine && <view className="doubao-template-product-summary__line-secondary">
+            {hasSpec && <text className="doubao-template-product-summary__spec" text-maxline="1">
+                {spec}
+              </text>}
+            {hasQuantity && <text className="doubao-template-product-summary__quantity" text-maxline="1">
+                ×{quantity}
+              </text>}
+          </view>}
+      </view>
+    </view>;
+}
+export { TemplateProductSummary };