@doubao-apps/template 0.0.32 → 0.0.33

package/README.md

@@ -31,6 +31,52 @@ import { ListCard } from '@doubao-apps/template';
 
 如果只是验证 UI 效果，也可以在普通页面里直接渲染模板组件；但真实卡片接入建议优先按 widget 方式组织。
 
+## AskHumanCard
+
+`AskHumanCard` 是人工确认选项卡模板，结构包含一组可点击选项和可选的「跳过」入口，适合需要让用户在多个候选项中确认选择的场景。
+
+效果图：
+
+<img src="https://unpkg.com/@doubao-apps/template@0.0.33/assets/ask_human.png" alt="AskHumanCard 示例" width="400" />
+
+<p />
+
+```tsx
+import { AskHumanCard } from '@doubao-apps/template';
+
+<AskHumanCard
+  items={[
+    {
+      text: '中关村创业大街店 · 0.6km',
+      onClick: () => {
+        console.log('select store 1');
+      }
+    },
+    {
+      text: '北京中关村·在握旗舰店 · 1.8km',
+      onClick: () => {
+        console.log('select store 2');
+      }
+    },
+    {
+      text: '中关村城委店 · 3.5km',
+      onClick: () => {
+        console.log('select store 3');
+      }
+    }
+  ]}
+  onSkipClick={() => {
+    console.log('skip');
+  }}
+/>
+```
+
+说明：
+
+- `items` 用于配置选项列表，每个选项可以通过 `text` 或 `children` 自定义内容。
+- 默认展示「跳过」入口，可以通过 `showSkip={false}` 隐藏，也可以通过 `skipText` 或 `skipContent` 自定义内容。
+- 用在 widget 中时，推荐让 `render` 直接返回 `AskHumanCard`。
+
 ## ListCard
 
 `ListCard` 是列表卡模板，结构包含应用标题栏和一组商品/内容列表项，适合展示商品、服务、行程等可重复内容。
@@ -72,13 +118,133 @@ import { ListCard } from '@doubao-apps/template';
 - 如果需要完全自定义内容区域，可以传入 `children`，模板会保留标题栏和卡片外壳。
 - 用在 widget 中时，推荐让 `render` 直接返回 `ListCard`。
 
+## SingleItemCard
+
+`SingleItemCard` 是单项卡模板，结构包含应用标题栏、内容图片、主标题和两行信息字段，适合展示单个商品、服务或内容入口。
+
+效果图：
+
+<img src="https://unpkg.com/@doubao-apps/template@0.0.33/assets/single-item-card.png" alt="SingleItemCard 示例" width="400" />
+
+<p />
+
+```tsx
+import { SingleItemCard } from '@doubao-apps/template';
+
+<SingleItemCard
+  moreText="查看更多"
+  title="主标题"
+  imageSrc="https://example.com/product.png"
+  price="¥99"
+  quantity="1"
+  infoRows={[
+    { text: '信息字段1' },
+    {
+      items: [{ text: '信息字段2' }, { text: '信息字段3' }]
+    }
+  ]}
+  primaryActionText="主按钮"
+  onContentClick={() => {
+    console.log('content');
+  }}
+  onMoreClick={() => {
+    console.log('more');
+  }}
+  onPrimaryActionClick={() => {
+    console.log('primary action');
+  }}
+/>
+```
+
+说明：
+
+- `infoRows` 最多展示前 2 行，每行可以通过 `text` 配置单字段，或通过 `items` 配置多个字段并自动用圆点分隔。
+- `title` 支持字符串、数字或自定义节点；需要标签等复杂标题时传入自定义节点。
+- `pricePrefix`、`price` 和 `quantity` 用于配置商品操作态；不传时展示基础单项态。
+- `image` 可以传入自定义图片节点，优先级高于 `imageSrc`。
+- `primaryActionText` 和 `secondaryActionText` 可以配置底部操作按钮，不传时不展示操作区。
+- 如果需要完全自定义内容区域，可以传入 `children`，模板会保留标题栏和卡片外壳。
+
+## PriceActionListCard
+
+`PriceActionListCard` 是价格操作列表卡模板，结构包含应用标题栏、多条价格信息和底部操作按钮，适合展示多个可操作的报价、权益或结果项。
+
+效果图：
+
+<img src="https://unpkg.com/@doubao-apps/template@0.0.33/assets/price-action-list-card.png" alt="PriceActionListCard 示例" width="400" />
+
+<p />
+
+```tsx
+import { PriceActionListCard } from '@doubao-apps/template';
+
+<PriceActionListCard
+  items={[
+    {
+      price: '¥000',
+      badgeText: '辅助信息',
+      infoRows: [{ text: '信息字段 1' }, { text: '信息字段 2' }],
+      actionText: '次按钮'
+    },
+    {
+      price: '¥000',
+      badgeText: '辅助信息',
+      infoRows: [{ text: '信息字段 1' }, { text: '信息字段 2' }],
+      actionText: '次按钮'
+    },
+    {
+      price: '¥000',
+      badgeText: '辅助信息',
+      infoRows: [{ text: '信息字段 1' }, { text: '信息字段 2' }],
+      actionText: '次按钮'
+    }
+  ]}
+  footerActionText="次按钮"
+  onFooterActionClick={() => {
+    console.log('footer action');
+  }}
+/>
+```
+
+说明：
+
+- `items` 用于配置价格列表，每条最多展示前 2 行 `infoRows`。
+- 每条列表项可以通过 `actionText` 和 `onActionClick` 自行决定是否展示右侧按钮。
+- `footerActionText` 用于配置底部全宽按钮；不传或传空字符串时不展示。
+- 如果需要完全自定义内容区域，可以传入 `children`，模板会保留标题栏和卡片外壳。
+
+## TaskActionCard
+
+`TaskActionCard` 是任务操作按钮模板，用于展示一个全宽操作按钮。
+
+效果图：
+
+<img src="https://unpkg.com/@doubao-apps/template@0.0.33/assets/task-action-card.png" alt="TaskActionCard 示例" width="400" />
+
+<p />
+
+```tsx
+import { TaskActionCard } from '@doubao-apps/template';
+
+<TaskActionCard
+  text="操作1"
+  onClick={() => {
+    console.log('action');
+  }}
+/>
+```
+
+说明：
+
+- `text` 用于配置按钮文案，默认展示右箭头图标。
+
 ## OrderCard
 
 `OrderCard` 是提单卡模板，结构包含应用标题栏、商品摘要、提单信息、费用汇总和底部操作按钮，适合下单确认、支付确认等场景。
 
 效果图：
 
-<img src="https://unpkg.com/@doubao-apps/template@latest/assets/order-card.png" alt="OrderCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-apps/template@0.0.33/assets/order-card.png" alt="OrderCard 示例" width="400" />
 
 <p />
 
@@ -123,46 +289,13 @@ import { OrderCard } from '@doubao-apps/template';
 - `primaryActionText` 和 `secondaryActionText` 可以自定义底部操作按钮文案。
 - 用在 widget 中时，推荐让 `render` 直接返回 `OrderCard`。
 
-
-## ProductActionCard
-
-`ProductActionCard` 是商品操作卡模板，结构包含应用标题栏、商品摘要和底部主按钮，适合商品确认、下单入口等场景。
-
-效果图：
-
-<img src="https://unpkg.com/@doubao-apps/template@latest/assets/product-action-card.png" alt="ProductActionCard 示例" width="400" />
-
-<p />
-
-```tsx
-import { ProductActionCard } from '@doubao-apps/template';
-
-<ProductActionCard
-  productTitle="主标题"
-  productSpec="商品规格等描述信息"
-  productImageSrc="https://example.com/product.png"
-  productPrice="¥99"
-  productQuantity="1"
-  primaryActionText="主按钮"
-  onPrimaryActionClick={() => {
-    console.log('primary action');
-  }}
-/>
-```
-
-说明：
-
-- `productTitle`、`productSpec`、`productImageSrc`、`productPrice`、`productQuantity` 用于配置商品摘要。
-- `productImage` 可以传入自定义图片节点，优先级高于 `productImageSrc`。
-- `primaryActionText` 用于配置底部主按钮文案。
-
 ## TransportCard
 
 `TransportCard` 是交通票务卡模板，结构包含应用标题栏、行程标题、出发/到达信息、中转信息和价格信息，适合机票、火车票、大巴等交通工具票务卡片。
 
 效果图：
 
-<img src="https://unpkg.com/@doubao-apps/template@latest/assets/transport-card.png" alt="TransportCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-apps/template@0.0.33/assets/transport-card.png" alt="TransportCard 示例" width="400" />
 
 <p />
 
@@ -197,7 +330,7 @@ import { TransportCard } from '@doubao-apps/template';
 
 效果图：
 
-<img src="https://unpkg.com/@doubao-apps/template@latest/assets/transport-list-card.png" alt="TransportListCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-apps/template@0.0.33/assets/transport-list-card.png" alt="TransportListCard 示例" width="400" />
 
 <p />
 
@@ -245,7 +378,7 @@ import { TransportListCard } from '@doubao-apps/template';
 
 效果图：
 
-<img src="https://unpkg.com/@doubao-apps/template@latest/assets/ticket-order-card.png" alt="TicketOrderCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-apps/template@0.0.33/assets/ticket-order-card.png" alt="TicketOrderCard 示例" width="400" />
 
 <p />
 

package/dist/ask-human-card/index.d.ts

@@ -0,0 +1,38 @@
+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 AskHumanCardProps {
+    /** 选项列表。 */
+    items?: AskHumanCardItem[];
+    /** 是否展示底部跳过入口。 */
+    showSkip?: boolean;
+    /** 底部跳过入口文案。 */
+    skipText?: string;
+    /** 跳过入口自定义内容；优先级高于 skipText。 */
+    skipContent?: ReactNode;
+    /** 卡片根节点自定义类名。 */
+    className?: string;
+    /** 卡片根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击卡片根节点时触发。 */
+    onClick?: (event: TouchEvent) => void;
+    /** 点击跳过入口时触发。 */
+    onSkipClick?: (event: TouchEvent) => void;
+}
+export interface AskHumanCardItem {
+    /** 选项唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+    /** 选项文案。 */
+    text?: TemplateText;
+    /** 选项自定义内容；优先级高于 text。 */
+    children?: ReactNode;
+    /** 选项根节点自定义类名。 */
+    className?: string;
+    /** 选项根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击选项时触发。 */
+    onClick?: (event: TouchEvent) => void;
+}
+export declare function AskHumanCard(props: AskHumanCardProps): ReactElement;
+//# sourceMappingURL=index.d.ts.map

package/dist/ask-human-card/index.js

@@ -0,0 +1,39 @@
+import { useThemeClassName } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
+import "./styles.css";
+const ASK_HUMAN_CARD_SKIP_ICON_CONTENT = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.49415 9.00586C1.49171 8.59165 1.82555 8.25318 2.23976 8.25073L12.1458 8.19287L10.9746 7.021L8.53419 4.58057C8.24132 4.2877 8.24136 3.81219 8.53419 3.51929C8.82709 3.22675 9.30195 3.22656 9.59473 3.51929L12.0359 5.96045L14.4763 8.40161C14.5413 8.46664 14.5924 8.54269 14.6294 8.625V2.71875C14.6294 2.30464 14.9653 1.96893 15.3794 1.96875C15.7936 1.96875 16.1294 2.30454 16.1294 2.71875V15.2812C16.1294 15.6955 15.7936 16.0312 15.3794 16.0312C14.9653 16.0311 14.6294 15.6954 14.6294 15.2812V9.23877C14.5924 9.32101 14.5413 9.39716 14.4763 9.46216L9.59473 14.3445C9.30193 14.6372 8.82708 14.6371 8.53419 14.3445C8.24132 14.0516 8.24136 13.5768 8.53419 13.2839L12.1245 9.69287L2.24855 9.75073C1.83452 9.75316 1.49686 9.41983 1.49415 9.00586Z" fill="currentColor"/>
+</svg>`;
+function isAskHumanCardTextEmpty(content) {
+    return null == content || '' === content;
+}
+function isAskHumanCardNodeEmpty(content) {
+    return null == content || 'boolean' == typeof content || '' === content;
+}
+function renderAskHumanCardItem(item, index) {
+    const hasCustomContent = !isAskHumanCardNodeEmpty(item.children);
+    if (!hasCustomContent && isAskHumanCardTextEmpty(item.text)) return null;
+    return <view className={clsx('doubao-ask-human-card__option', item.className)} style={item.style} key={item.key ?? index} {...null != item.onClick ? {
+        catchtap: item.onClick
+    } : {}}>
+      {hasCustomContent ? item.children : <text className="doubao-ask-human-card__option-text" text-maxline="1">
+          {item.text}
+        </text>}
+    </view>;
+}
+function AskHumanCard(props) {
+    const { items = [], showSkip = true, skipText = '跳过', skipContent, className, style, onClick, onSkipClick } = props;
+    const optionNodes = items.map(renderAskHumanCardItem).filter((node)=>null != node);
+    const hasSkipContent = !isAskHumanCardNodeEmpty(skipContent);
+    const hasSkip = showSkip && (hasSkipContent || skipText.length > 0);
+    return <view className={useThemeClassName(clsx('doubao-ask-human-card', className))} style={style} bindtap={onClick}>
+      {optionNodes}
+      {hasSkip ? <view className="doubao-ask-human-card__skip" catchtap={onSkipClick}>
+          {hasSkipContent ? skipContent : <text className="doubao-ask-human-card__skip-text" text-maxline="1">
+              {skipText}
+            </text>}
+          <svg className="doubao-ask-human-card__skip-icon" content={ASK_HUMAN_CARD_SKIP_ICON_CONTENT}/>
+        </view> : null}
+    </view>;
+}
+export { AskHumanCard };

package/dist/ask-human-card/styles.css

@@ -0,0 +1,60 @@
+.doubao-ask-human-card {
+  --doubao-ask-human-card-bg: var(--bg-base-2-overlay);
+  --doubao-ask-human-card-option-bg: var(--static-white);
+  --doubao-ask-human-card-option-text: var(--neutral-100);
+  --doubao-ask-human-card-icon: var(--neutral-100);
+  --doubao-ask-human-card-gap: 8px;
+  --doubao-ask-human-card-option-height: 44px;
+  --doubao-ask-human-card-option-radius: 8px;
+  align-items: flex-start;
+  gap: var(--doubao-ask-human-card-gap);
+  box-sizing: border-box;
+  background-color: var(--doubao-ask-human-card-bg);
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
+.doubao-ask-human-card__option, .doubao-ask-human-card__skip {
+  max-width: 100%;
+  height: var(--doubao-ask-human-card-option-height);
+  box-sizing: border-box;
+  background-color: var(--doubao-ask-human-card-option-bg);
+  border-radius: var(--doubao-ask-human-card-option-radius);
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  min-width: 0;
+  display: flex;
+}
+
+.doubao-ask-human-card__option {
+  padding: 11px 12px;
+}
+
+.doubao-ask-human-card__skip {
+  gap: 4px;
+  padding: 11px 10px 11px 12px;
+}
+
+.doubao-ask-human-card__option-text, .doubao-ask-human-card__skip-text {
+  min-width: 0;
+  color: var(--doubao-ask-human-card-option-text);
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PingFang SC, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px;
+  overflow: hidden;
+}
+
+.doubao-ask-human-card__skip-icon {
+  width: 18px;
+  height: 18px;
+  color: var(--doubao-ask-human-card-icon);
+  flex-shrink: 0;
+}
+

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

@@ -10,16 +10,16 @@
   width: auto;
   height: var(--doubao-template-action-bar-button-height, 44px);
   border-radius: var(--doubao-template-action-bar-button-radius, 8px);
-  --doubao-btn-border-radius: var(--doubao-template-action-bar-button-radius, 8px);
-  --doubao-btn-default-height: var(--doubao-template-action-bar-button-height, 44px);
-  --doubao-btn-default-padding-x: var(--doubao-template-action-bar-button-padding-x, 12px);
-  --doubao-btn-default-padding-y: 0;
-  --doubao-btn-default-font-size: var(--doubao-template-action-bar-button-font-size, 16px);
-  --doubao-btn-default-line-height: var(--doubao-template-action-bar-button-line-height, 22px);
-  --doubao-btn-primary-bg: var(--doubao-template-action-bar-primary-bg, var(--primary-50));
-  --doubao-btn-primary-text: var(--doubao-template-action-bar-primary-text, var(--static-white));
-  --doubao-btn-default-bg: var(--doubao-template-action-bar-secondary-bg, var(--bg-base-2-overlay));
-  --doubao-btn-default-text: var(--doubao-template-action-bar-secondary-text, var(--neutral-100));
+  --doubao-button-border-radius: var(--doubao-template-action-bar-button-radius, 8px);
+  --doubao-button-default-height: var(--doubao-template-action-bar-button-height, 44px);
+  --doubao-button-default-padding-x: var(--doubao-template-action-bar-button-padding-x, 12px);
+  --doubao-button-default-padding-y: 0;
+  --doubao-button-default-font-size: var(--doubao-template-action-bar-button-font-size, 16px);
+  --doubao-button-default-line-height: var(--doubao-template-action-bar-button-line-height, 22px);
+  --doubao-button-primary-bg: var(--doubao-template-action-bar-primary-bg, var(--primary-50));
+  --doubao-button-primary-text: var(--doubao-template-action-bar-primary-text, var(--static-white));
+  --doubao-button-default-bg: var(--doubao-template-action-bar-secondary-bg, var(--bg-base-2-overlay));
+  --doubao-button-default-text: var(--doubao-template-action-bar-secondary-text, var(--neutral-100));
   flex: 1 1 0;
   min-width: 0;
 }

package/dist/components/title-bar/index.js

@@ -1,4 +1,5 @@
 import { getAppInfo } from "../../utils/app-info.js";
+import { TEMPLATE_CHEVRON_RIGHT_ICON_CONTENT } from "../../utils/icons.js";
 import "./styles.css";
 function TemplateTitleBarIcon({ appIconSrc }) {
     if (null != appIconSrc && appIconSrc.length > 0) return <image className="doubao-template-title-bar__app-icon" src={appIconSrc} mode="aspectFill"/>;
@@ -19,13 +20,13 @@ function TemplateTitleBar(props) {
           <text className="doubao-template-title-bar__more-text" text-maxline="1">
             {moreText}
           </text>
-          <view className="doubao-template-title-bar__more-chevron"/>
+          <svg className="doubao-template-title-bar__more-chevron" content={TEMPLATE_CHEVRON_RIGHT_ICON_CONTENT}/>
         </view> : null}
       {!hasMore && reserveMore ? <view className="doubao-template-title-bar__more-placeholder">
           <text className="doubao-template-title-bar__more-text" text-maxline="1">
             更多
           </text>
-          <view className="doubao-template-title-bar__more-chevron"/>
+          <svg className="doubao-template-title-bar__more-chevron" content={TEMPLATE_CHEVRON_RIGHT_ICON_CONTENT}/>
         </view> : null}
     </view>;
 }

package/dist/components/title-bar/styles.css

@@ -58,12 +58,9 @@
 }
 
 .doubao-template-title-bar__more-chevron {
-  box-sizing: border-box;
-  border-top: 1px solid var(--neutral-50);
-  border-right: 1px solid var(--neutral-50);
-  width: 7px;
-  height: 7px;
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
   margin-left: 2px;
-  transform: rotate(45deg);
 }
 

package/dist/index.d.ts

@@ -1,7 +1,10 @@
 export { ListCard, type ListCardItem, type ListCardProps } from './list-card/index.js';
+export { AskHumanCard, type AskHumanCardItem, type AskHumanCardProps } from './ask-human-card/index.js';
 export { InvalidCard, type InvalidCardProps } from './invalid-card/index.js';
+export { SingleItemCard, type SingleItemCardInfoItem, type SingleItemCardInfoRow, type SingleItemCardProps } from './single-item-card/index.js';
 export { OrderCard, type OrderCardFeeItem, type OrderCardInfoItem, type OrderCardProps } from './order-card/index.js';
-export { ProductActionCard, type ProductActionCardProps } from './product-action-card/index.js';
+export { PriceActionListCard, type PriceActionListCardInfoRow, type PriceActionListCardItem, type PriceActionListCardProps } from './price-action-list-card/index.js';
+export { TaskActionCard, type TaskActionCardProps } from './task-action-card/index.js';
 export { TransportListCard, type TransportListCardItem, type TransportListCardProps } from './transport-list-card/index.js';
 export { TransportCard, type TransportCardProps } from './transport-card/index.js';
 export type { TemplateKey, TemplateText } from './types.js';

package/dist/index.js

@@ -1,7 +1,10 @@
 export { ListCard } from "./list-card/index.js";
+export { AskHumanCard } from "./ask-human-card/index.js";
 export { InvalidCard } from "./invalid-card/index.js";
+export { SingleItemCard } from "./single-item-card/index.js";
 export { OrderCard } from "./order-card/index.js";
-export { ProductActionCard } from "./product-action-card/index.js";
+export { PriceActionListCard } from "./price-action-list-card/index.js";
+export { TaskActionCard } from "./task-action-card/index.js";
 export { TransportListCard } from "./transport-list-card/index.js";
 export { TransportCard } from "./transport-card/index.js";
 export { TicketOrderCard } from "./ticket-order-card/index.js";

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

@@ -0,0 +1,56 @@
+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 PriceActionListCardProps {
+    /** 标题栏右侧「更多」入口的文案。 */
+    moreText?: string;
+    /** 是否展示标题栏右侧「更多」入口。 */
+    showMore?: boolean;
+    /** 列表项数据。 */
+    items?: PriceActionListCardItem[];
+    /** 底部全宽按钮文案；不传或传空字符串时不展示。 */
+    footerActionText?: string;
+    /** 自定义卡片内容；传入后不再渲染默认列表和底部按钮。 */
+    children?: ReactNode;
+    /** 卡片根节点自定义类名。 */
+    className?: string;
+    /** 卡片根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击卡片根节点时触发。 */
+    onClick?: (event: TouchEvent) => void;
+    /** 点击标题栏右侧「更多」入口时触发。 */
+    onMoreClick?: (event: TouchEvent) => void;
+    /** 点击底部全宽按钮时触发。 */
+    onFooterActionClick?: (event?: TouchEvent) => void;
+}
+export interface PriceActionListCardItem {
+    /** 列表项唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+    /** 左侧价格或主数值。 */
+    price?: TemplateText;
+    /** 左侧辅助标签。 */
+    badgeText?: TemplateText;
+    /** 中间信息行。最多展示前 2 行。 */
+    infoRows?: PriceActionListCardInfoRow[];
+    /** 右侧操作按钮文案；不传或传空字符串时不展示。 */
+    actionText?: string;
+    /** 列表项自定义内容；传入后不再渲染默认三列结构。 */
+    children?: ReactNode;
+    /** 列表项根节点自定义类名。 */
+    className?: string;
+    /** 列表项根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击列表项时触发。 */
+    onClick?: (event: TouchEvent) => void;
+    /** 点击列表项右侧操作按钮时触发。 */
+    onActionClick?: (event?: TouchEvent) => void;
+}
+export interface PriceActionListCardInfoRow {
+    /** 信息行唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+    /** 信息行文案。 */
+    text: TemplateText;
+}
+export declare function PriceActionListCard(props: PriceActionListCardProps): ReactElement;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,55 @@
+import { Button, useThemeClassName } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
+import { TemplateTitleBar } from "../components/title-bar/index.js";
+import "./styles.css";
+const PRICE_ACTION_LIST_CARD_INFO_ROW_LIMIT = 2;
+function isPriceActionListCardTextEmpty(content) {
+    return null == content || '' === content;
+}
+function isPriceActionListCardNodeEmpty(content) {
+    return null == content || 'boolean' == typeof content || '' === content;
+}
+function PriceActionListCardItemView({ item, isLast }) {
+    const hasPrice = !isPriceActionListCardTextEmpty(item.price);
+    const hasBadge = !isPriceActionListCardTextEmpty(item.badgeText);
+    const hasAction = null != item.actionText && item.actionText.length > 0;
+    const hasCustomContent = !isPriceActionListCardNodeEmpty(item.children);
+    const infoRows = (item.infoRows ?? []).filter((infoRow)=>!isPriceActionListCardTextEmpty(infoRow.text)).slice(0, PRICE_ACTION_LIST_CARD_INFO_ROW_LIMIT);
+    return <view className={clsx('doubao-price-action-list-card__item', isLast && 'doubao-price-action-list-card__item--last', item.className)} style={item.style} {...null != item.onClick ? {
+        catchtap: item.onClick
+    } : {}}>
+      {hasCustomContent ? item.children : <view className="doubao-price-action-list-card__item-content">
+          <view className="doubao-price-action-list-card__value">
+            {hasPrice ? <text className="doubao-price-action-list-card__price" text-maxline="1">
+                {item.price}
+              </text> : null}
+            {hasBadge ? <text className="doubao-price-action-list-card__badge" text-maxline="1">
+                {item.badgeText}
+              </text> : null}
+          </view>
+          <view className="doubao-price-action-list-card__info">
+            {infoRows.map((infoRow, index)=><text className="doubao-price-action-list-card__info-row" text-maxline="1" key={infoRow.key ?? index}>
+                {infoRow.text}
+              </text>)}
+          </view>
+          {hasAction ? <Button className="doubao-price-action-list-card__item-action" type="default" text={item.actionText} onClick={item.onActionClick}/> : null}
+        </view>}
+    </view>;
+}
+function PriceActionListCard(props) {
+    const { moreText, showMore = true, items = [], footerActionText, children, className, style, onClick, onMoreClick, onFooterActionClick } = props;
+    const hasCustomContent = !isPriceActionListCardNodeEmpty(children);
+    const hasFooterAction = null != footerActionText && footerActionText.length > 0;
+    return <view className={useThemeClassName(clsx('doubao-price-action-list-card', className))} style={style} bindtap={onClick} clip-radius="true">
+      <TemplateTitleBar moreText={moreText} showMore={showMore} onMoreClick={onMoreClick}/>
+      <view className="doubao-price-action-list-card__body">
+        {hasCustomContent ? children : <view className="doubao-price-action-list-card__default">
+            {items.map((item, index)=><PriceActionListCardItemView item={item} isLast={index === items.length - 1} key={item.key ?? index}/>)}
+            {hasFooterAction ? <view className="doubao-price-action-list-card__footer">
+                <Button className="doubao-price-action-list-card__footer-action" type="default" text={footerActionText} onClick={onFooterActionClick}/>
+              </view> : null}
+          </view>}
+      </view>
+    </view>;
+}
+export { PriceActionListCard };