@doubao-apps/template 0.0.34 → 0.0.35

package/README.md

@@ -38,7 +38,7 @@ import { ListCard } from '@doubao-apps/template';
 
 效果图：
 
-<img src="https://unpkg.com/@doubao-apps/template@0.0.34/assets/ask_human.png" alt="AskHumanCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-apps/template@0.0.35/assets/ask_human.png" alt="AskHumanCard 示例" width="400" />
 
 <p />
 
@@ -127,7 +127,7 @@ import { ListCard } from '@doubao-apps/template';
 
 效果图：
 
-<img src="https://unpkg.com/@doubao-apps/template@0.0.34/assets/single-item-card.png" alt="SingleItemCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-apps/template@0.0.35/assets/single-item-card.png" alt="SingleItemCard 示例" width="400" />
 
 <p />
 
@@ -166,15 +166,57 @@ import { SingleItemCard } from '@doubao-apps/template';
 - `pricePrefix`、`price` 和 `quantity` 用于配置商品操作态；不传时展示基础单项态。
 - `image` 可以传入自定义图片节点，优先级高于 `imageSrc`。
 - `primaryActionText` 和 `secondaryActionText` 可以配置底部操作按钮，不传时不展示操作区。
+- 底部主/次按钮支持通过 `primaryActionButtonProps` 和 `secondaryActionButtonProps` 配置禁用、加载和点击节流状态。
 - 如果需要完全自定义内容区域，可以传入 `children`，模板会保留标题栏和卡片外壳。
 
+## MediaLayoutCard
+
+`MediaLayoutCard` 是媒体布局卡模板，结构包含应用标题栏、左侧媒体、中间标题与信息行、右侧扩展内容和底部操作按钮，适合需要自定义布局内容的入口卡片。
+
+效果图：
+
+<img src="https://unpkg.com/@doubao-apps/template@0.0.35/assets/media-layout-card.png" alt="SingleItemCard 示例" width="400" />
+
+<p />
+
+```tsx
+import { MediaLayoutCard } from '@doubao-apps/template';
+
+<MediaLayoutCard
+  moreText="更多"
+  title="小程序名称"
+  media={<image src="https://example.com/app-icon.png" mode="aspectFill" />}
+  infoRows={[
+    {
+      content: <text>提供小程序开发、构建、调试和发布能力。</text>
+    },
+    {
+      text: '辅助信息'
+    }
+  ]}
+  extra={<text>右侧内容</text>}
+  primaryActionText="确认"
+  onPrimaryActionClick={() => {
+    console.log('confirm');
+  }}
+/>
+```
+
+说明：
+
+- `infoRows` 最多展示前 2 行；纯文字可使用 `text`，需要自定义节点时使用 `content`。
+- `extra` 用于配置右侧扩展内容，例如价格、标签、状态或自定义操作区。
+- `primaryActionText` 和 `secondaryActionText` 用于配置底部操作按钮；只传主按钮时展示蓝色全宽按钮，只传次按钮时展示灰色全宽按钮，同时传入时展示左右双按钮。
+- 底部主/次按钮支持通过 `primaryActionButtonProps` 和 `secondaryActionButtonProps` 配置禁用、加载和点击节流状态。
+- 如果需要完全自定义内容区域，可以传入 `children`，模板会保留标题栏和底部操作区。
+
 ## PriceActionListCard
 
 `PriceActionListCard` 是价格操作列表卡模板，结构包含应用标题栏、多条价格信息和底部操作按钮，适合展示多个可操作的报价、权益或结果项。
 
 效果图：
 
-<img src="https://unpkg.com/@doubao-apps/template@0.0.34/assets/price-action-list-card.png" alt="PriceActionListCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-apps/template@0.0.35/assets/price-action-list-card.png" alt="PriceActionListCard 示例" width="400" />
 
 <p />
 
@@ -222,7 +264,7 @@ import { PriceActionListCard } from '@doubao-apps/template';
 
 效果图：
 
-<img src="https://unpkg.com/@doubao-apps/template@0.0.34/assets/task-action-card.png" alt="TaskActionCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-apps/template@0.0.35/assets/task-action-card.png" alt="TaskActionCard 示例" width="400" />
 
 <p />
 
@@ -247,7 +289,7 @@ import { TaskActionCard } from '@doubao-apps/template';
 
 效果图：
 
-<img src="https://unpkg.com/@doubao-apps/template@0.0.34/assets/order-card.png" alt="OrderCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-apps/template@0.0.35/assets/order-card.png" alt="OrderCard 示例" width="400" />
 
 <p />
 
@@ -300,6 +342,7 @@ import { OrderCard } from '@doubao-apps/template';
 - `infoItems` 用于配置提单信息列表。
 - `feeItems`、`discountText`、`totalLabel`、`totalPrice` 用于配置费用汇总。
 - `primaryActionText` 和 `secondaryActionText` 可以自定义底部操作按钮文案。
+- 底部主/次按钮支持通过 `primaryActionButtonProps` 和 `secondaryActionButtonProps` 配置禁用、加载和点击节流状态。
 - 用在 widget 中时，推荐让 `render` 直接返回 `OrderCard`。
 
 ## TransportCard
@@ -308,7 +351,7 @@ import { OrderCard } from '@doubao-apps/template';
 
 效果图：
 
-<img src="https://unpkg.com/@doubao-apps/template@0.0.34/assets/transport-card.png" alt="TransportCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-apps/template@0.0.35/assets/transport-card.png" alt="TransportCard 示例" width="400" />
 
 <p />
 
@@ -343,7 +386,7 @@ import { TransportCard } from '@doubao-apps/template';
 
 效果图：
 
-<img src="https://unpkg.com/@doubao-apps/template@0.0.34/assets/transport-list-card.png" alt="TransportListCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-apps/template@0.0.35/assets/transport-list-card.png" alt="TransportListCard 示例" width="400" />
 
 <p />
 
@@ -390,7 +433,7 @@ import { TransportListCard } from '@doubao-apps/template';
 
 效果图：
 
-<img src="https://unpkg.com/@doubao-apps/template@0.0.34/assets/ticket-order-card.png" alt="TicketOrderCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-apps/template@0.0.35/assets/ticket-order-card.png" alt="TicketOrderCard 示例" width="400" />
 
 <p />
 
@@ -428,3 +471,10 @@ import { TicketOrderCard } from '@doubao-apps/template';
   }}
 />
 ```
+
+说明：
+
+- `routeItems` 用于配置航程列表。
+- `infoItems` 和 `feeItems` 用于配置订单信息与费用明细。
+- `primaryActionText` 和 `secondaryActionText` 可以自定义底部操作按钮文案。
+- 底部主/次按钮支持通过 `primaryActionButtonProps` 和 `secondaryActionButtonProps` 配置禁用、加载和点击节流状态。

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

@@ -1,6 +1,8 @@
+import { type ButtonProps } from '@byted-doubao-apps/components';
 import type { CSSProperties, TouchEvent } from '@lynx-js/types';
 import type { ReactElement } from 'react';
 import './styles.scss';
+export type TemplateActionButtonProps = Pick<ButtonProps, 'disabled' | 'loading' | 'throttle'>;
 export interface TemplateActionBarProps {
     /** 操作区根节点自定义类名。 */
     className?: string;
@@ -8,8 +10,12 @@ export interface TemplateActionBarProps {
     style?: CSSProperties;
     /** 主按钮文案。 */
     primaryActionText?: string;
+    /** 主按钮配置，支持禁用、加载和点击节流。 */
+    primaryActionButtonProps?: TemplateActionButtonProps;
     /** 次按钮文案。 */
     secondaryActionText?: string;
+    /** 次按钮配置，支持禁用、加载和点击节流。 */
+    secondaryActionButtonProps?: TemplateActionButtonProps;
     /** 点击主按钮时触发。 */
     onPrimaryActionClick?: (event?: TouchEvent) => void;
     /** 点击次按钮时触发。 */

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

@@ -2,14 +2,14 @@ import { Button } from "@byted-doubao-apps/components";
 import { clsx } from "clsx";
 import "./styles.css";
 function TemplateActionBar(props) {
-    const { className, style, primaryActionText, secondaryActionText, onPrimaryActionClick, onSecondaryActionClick } = props;
+    const { className, style, primaryActionText, primaryActionButtonProps, secondaryActionText, secondaryActionButtonProps, onPrimaryActionClick, onSecondaryActionClick } = props;
     const hasPrimaryAction = null != primaryActionText && primaryActionText.length > 0;
     const hasSecondaryAction = null != secondaryActionText && secondaryActionText.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" text={secondaryActionText} onClick={onSecondaryActionClick}/> : null}
-      {hasPrimaryAction ? <Button className="doubao-template-action-bar__action" type="primary" text={primaryActionText} onClick={onPrimaryActionClick}/> : null}
+      {hasSecondaryAction ? <Button className="doubao-template-action-bar__action" type="default" text={secondaryActionText} {...secondaryActionButtonProps} onClick={onSecondaryActionClick}/> : null}
+      {hasPrimaryAction ? <Button className="doubao-template-action-bar__action" type="primary" text={primaryActionText} {...primaryActionButtonProps} onClick={onPrimaryActionClick}/> : null}
     </view>;
 }
 export { TemplateActionBar };

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

@@ -1,30 +1,30 @@
 .doubao-template-action-bar {
-  width: 100%;
-  padding: var(--doubao-template-action-bar-padding, 8px 12px 12px);
   box-sizing: border-box;
   flex-direction: row;
+  width: 100%;
+  padding: 8px 12px 12px;
   display: flex;
 }
 
 .doubao-template-action-bar__action {
-  width: auto;
-  height: var(--doubao-template-action-bar-button-height, 44px);
-  border-radius: var(--doubao-template-action-bar-button-radius, 8px);
-  --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-border-radius: 8px;
+  --doubao-button-default-height: 44px;
+  --doubao-button-default-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));
+  --doubao-button-default-font-size: 16px;
+  --doubao-button-default-line-height: 22px;
+  --doubao-button-primary-bg: var(--primary-50);
+  --doubao-button-primary-text: var(--static-white);
+  --doubao-button-default-bg: var(--bg-base-2-overlay);
+  --doubao-button-default-text: var(--neutral-100);
+  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: var(--doubao-template-action-bar-gap, 10px);
+  margin-left: 10px;
 }
 

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

@@ -1,6 +1,6 @@
 .doubao-template-info-section {
   box-sizing: border-box;
-  border-top: var(--doubao-template-info-section-border-top, .5px solid var(--neutral-transparent-1));
+  border-top: .5px solid var(--neutral-transparent-1);
   flex-direction: column;
   width: 100%;
   padding: 12px;
@@ -40,10 +40,10 @@
 
 .doubao-template-info-section__info-label {
   max-width: 100%;
-  color: var(--doubao-template-info-section-label-text, var(--neutral-100));
-  font-size: var(--doubao-template-info-section-label-font-size, 13px);
-  font-weight: var(--doubao-template-info-section-label-font-weight, 400);
-  line-height: var(--doubao-template-info-section-label-line-height, 20px);
+  color: var(--neutral-100);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
 }
 
 .doubao-template-info-section__info-value-wrap {
@@ -58,12 +58,12 @@
 
 .doubao-template-info-section__info-value {
   min-width: 0;
-  margin-left: var(--doubao-template-info-section-value-gap, 6px);
-  color: var(--doubao-template-info-section-value-text, var(--neutral-50));
-  font-size: var(--doubao-template-info-section-value-font-size, 13px);
-  font-weight: var(--doubao-template-info-section-value-font-weight, 400);
-  line-height: var(--doubao-template-info-section-value-line-height, 20px);
+  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 {
@@ -98,13 +98,13 @@
 }
 
 .doubao-template-info-section__fee {
-  flex-shrink: var(--doubao-template-info-section-fee-shrink, 1);
   min-width: 0;
-  margin-left: var(--doubao-template-info-section-fee-gap, 6px);
-  color: var(--doubao-template-info-section-fee-text, var(--neutral-50));
-  font-size: var(--doubao-template-info-section-fee-font-size, 13px);
-  font-weight: var(--doubao-template-info-section-fee-font-weight, 400);
-  line-height: var(--doubao-template-info-section-fee-line-height, 20px);
+  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 {
@@ -112,10 +112,10 @@
 }
 
 .doubao-template-info-section__total {
-  margin-left: var(--doubao-template-info-section-total-gap, 6px);
   flex-direction: row;
   flex-shrink: 0;
   align-items: center;
+  margin-left: 6px;
   display: flex;
 }
 
@@ -124,17 +124,17 @@
 }
 
 .doubao-template-info-section__total-label {
-  color: var(--doubao-template-info-section-total-label-text, var(--neutral-100));
-  font-size: var(--doubao-template-info-section-total-label-font-size, 13px);
-  font-weight: var(--doubao-template-info-section-total-label-font-weight, 500);
-  line-height: var(--doubao-template-info-section-total-label-line-height, 20px);
+  color: var(--neutral-100);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
 }
 
 .doubao-template-info-section__total-price {
-  color: var(--doubao-template-info-section-total-price-text, var(--neutral-100));
-  font-size: var(--doubao-template-info-section-total-price-font-size, 15px);
-  font-weight: var(--doubao-template-info-section-total-price-font-weight, 500);
-  line-height: var(--doubao-template-info-section-total-price-line-height, 22px);
+  color: var(--neutral-100);
   margin-left: 2px;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 22px;
 }
 

package/dist/components/product-summary/styles.css

@@ -1,6 +1,6 @@
 .doubao-template-product-summary {
   box-sizing: border-box;
-  background-color: var(--doubao-template-product-summary-bg, var(--bg-base-1));
+  background-color: var(--bg-base-1);
   flex-direction: row;
   align-items: center;
   width: 100%;
@@ -9,11 +9,11 @@
 }
 
 .doubao-template-product-summary__image {
-  width: var(--doubao-template-product-summary-image-size, 80px);
-  height: var(--doubao-template-product-summary-image-size, 80px);
-  background-color: var(--doubao-template-product-summary-image-bg, var(--bg-base-1-overlay));
-  border-radius: var(--doubao-template-product-summary-image-radius, 5px);
+  background-color: var(--bg-base-1-overlay);
+  border-radius: 5px;
   flex-shrink: 0;
+  width: 80px;
+  height: 80px;
   overflow: hidden;
 }
 
@@ -37,20 +37,20 @@
 }
 
 .doubao-template-product-summary__line-main {
-  height: var(--doubao-template-product-summary-main-height, 24px);
+  height: 24px;
 }
 
 .doubao-template-product-summary__line-secondary {
-  height: var(--doubao-template-product-summary-secondary-height, 20px);
-  margin-top: var(--doubao-template-product-summary-secondary-margin-top, 2px);
+  height: 20px;
+  margin-top: 2px;
 }
 
 .doubao-template-product-summary__title-wrap {
-  min-width: 0;
-  margin-right: var(--doubao-template-product-summary-title-margin-right, 8px);
   flex-direction: row;
   flex: 1 1 0;
   align-items: center;
+  min-width: 0;
+  margin-right: 8px;
   display: flex;
 }
 
@@ -64,25 +64,25 @@
 
 .doubao-template-product-summary__title {
   min-width: 0;
-  color: var(--doubao-template-product-summary-title-text, var(--neutral-100));
-  font-size: var(--doubao-template-product-summary-title-font-size, 16px);
-  font-weight: var(--doubao-template-product-summary-title-font-weight, 500);
-  line-height: var(--doubao-template-product-summary-title-line-height, 24px);
+  color: var(--neutral-100);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
 }
 
 .doubao-template-product-summary__chevron {
-  width: var(--doubao-template-product-summary-chevron-size, 7px);
-  height: var(--doubao-template-product-summary-chevron-size, 7px);
-  margin-left: var(--doubao-template-product-summary-chevron-margin-left, 5px);
   box-sizing: border-box;
-  border-top: var(--doubao-template-product-summary-chevron-stroke, 1.5px) solid var(--doubao-template-product-summary-chevron-color, var(--neutral-30));
-  border-right: var(--doubao-template-product-summary-chevron-stroke, 1.5px) solid var(--doubao-template-product-summary-chevron-color, var(--neutral-30));
+  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-template-product-summary__price {
-  color: var(--doubao-template-product-summary-price-text, var(--neutral-100));
+  color: var(--neutral-100);
   white-space: nowrap;
   flex-direction: row;
   flex-shrink: 0;
@@ -94,32 +94,32 @@
 }
 
 .doubao-template-product-summary__price-prefix {
-  width: var(--doubao-template-product-summary-price-prefix-width, 22px);
-  font-size: var(--doubao-template-product-summary-price-prefix-font-size, 11px);
-  line-height: var(--doubao-template-product-summary-price-prefix-line-height, 17px);
+  width: 22px;
+  font-size: 11px;
+  line-height: 17px;
 }
 
 .doubao-template-product-summary__price-value {
-  margin-left: var(--doubao-template-product-summary-price-gap, 2px);
-  font-size: var(--doubao-template-product-summary-price-font-size, 13px);
-  line-height: var(--doubao-template-product-summary-price-line-height, 19px);
+  margin-left: 2px;
+  font-size: 13px;
+  line-height: 19px;
 }
 
 .doubao-template-product-summary__spec {
   min-width: 0;
-  color: var(--doubao-template-product-summary-secondary-text, var(--neutral-50));
-  font-size: var(--doubao-template-product-summary-spec-font-size, 12px);
-  font-weight: var(--doubao-template-product-summary-spec-font-weight, 400);
-  line-height: var(--doubao-template-product-summary-spec-line-height, 18px);
+  color: var(--neutral-50);
   flex: 1 1 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
 }
 
 .doubao-template-product-summary__quantity {
-  margin-left: var(--doubao-template-product-summary-quantity-margin-left, 8px);
-  color: var(--doubao-template-product-summary-secondary-text, var(--neutral-50));
-  font-size: var(--doubao-template-product-summary-quantity-font-size, 13px);
-  font-weight: var(--doubao-template-product-summary-quantity-font-weight, 400);
-  line-height: var(--doubao-template-product-summary-quantity-line-height, 20px);
+  color: var(--neutral-50);
   flex-shrink: 0;
+  margin-left: 8px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
 }
 

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

@@ -10,11 +10,11 @@
 }
 
 .doubao-template-route-section__title {
-  width: 100%;
-  min-width: 0;
-  height: var(--doubao-template-route-section-title-height, 24px);
   flex-direction: row;
   align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: 24px;
   display: flex;
   overflow: hidden;
 }
@@ -29,30 +29,30 @@
 
 .doubao-template-route-section__title-text {
   min-width: 0;
-  color: var(--doubao-template-route-section-title-text, var(--neutral-100));
-  font-size: var(--doubao-template-route-section-title-font-size, 16px);
-  font-weight: var(--doubao-template-route-section-title-font-weight, 500);
-  line-height: var(--doubao-template-route-section-title-line-height, 24px);
+  color: var(--neutral-100);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
 }
 
 .doubao-template-route-section__chevron {
-  width: var(--doubao-template-route-section-chevron-size, 7px);
-  height: var(--doubao-template-route-section-chevron-size, 7px);
-  margin-left: var(--doubao-template-route-section-chevron-margin-left, 5px);
   box-sizing: border-box;
-  border-top: var(--doubao-template-route-section-chevron-stroke, 1.5px) solid var(--doubao-template-route-section-chevron-color, var(--neutral-30));
-  border-right: var(--doubao-template-route-section-chevron-stroke, 1.5px) solid var(--doubao-template-route-section-chevron-color, var(--neutral-30));
+  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-template-route-section__description {
   width: 100%;
-  height: var(--doubao-template-route-section-description-height, 20px);
-  margin-top: var(--doubao-template-route-section-description-margin-top, 2px);
-  color: var(--doubao-template-route-section-description-text, var(--neutral-50));
-  font-size: var(--doubao-template-route-section-description-font-size, 13px);
-  font-weight: var(--doubao-template-route-section-description-font-weight, 400);
-  line-height: var(--doubao-template-route-section-description-line-height, 20px);
+  height: 20px;
+  color: var(--neutral-50);
+  margin-top: 2px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
 }
 

package/dist/index.d.ts

@@ -2,6 +2,8 @@ export { ListCard, type ListCardItem, type ListCardProps } from './list-card/ind
 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 { MediaLayoutCard, type MediaLayoutCardInfoRow, type MediaLayoutCardProps } from './media-layout-card/index.js';
+export { PriceText, Tag, type PriceTextProps, type TagProps } from './ui/index.js';
 export { OrderCard, type OrderCardFeeItem, type OrderCardInfoItem, type OrderCardProductItem, type OrderCardProps } from './order-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';

package/dist/index.js

@@ -2,6 +2,8 @@ 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 { MediaLayoutCard } from "./media-layout-card/index.js";
+export { PriceText, Tag } from "./ui/index.js";
 export { OrderCard } from "./order-card/index.js";
 export { PriceActionListCard } from "./price-action-list-card/index.js";
 export { TaskActionCard } from "./task-action-card/index.js";

package/dist/media-layout-card/index.d.ts

@@ -0,0 +1,59 @@
+import type { CSSProperties, TouchEvent } from '@lynx-js/types';
+import type { ReactElement, ReactNode } from 'react';
+import { type TemplateActionButtonProps } from '../components/action-bar/index.js';
+import type { TemplateKey, TemplateText } from '../types.js';
+import './styles.scss';
+export interface MediaLayoutCardProps {
+    /** 标题栏右侧「更多」入口的文案。 */
+    moreText?: string;
+    /** 是否展示标题栏右侧「更多」入口。 */
+    showMore?: boolean;
+    /** 主标题。字符串和数字会按默认单行标题样式渲染，传入节点时直接渲染自定义内容。 */
+    title?: ReactNode;
+    /** 是否展示主标题右侧箭头。 */
+    showChevron?: boolean;
+    /** 左侧媒体节点。 */
+    media?: ReactNode;
+    /** 中间信息行。最多展示前 2 行。 */
+    infoRows?: MediaLayoutCardInfoRow[];
+    /** 右侧扩展内容。 */
+    extra?: ReactNode;
+    /** 右侧次按钮文案；extra 为空时生效。 */
+    extraActionText?: string;
+    /** 主按钮文案。 */
+    primaryActionText?: string;
+    /** 主按钮配置，支持禁用、加载和点击节流。 */
+    primaryActionButtonProps?: TemplateActionButtonProps;
+    /** 次按钮文案。 */
+    secondaryActionText?: string;
+    /** 次按钮配置，支持禁用、加载和点击节流。 */
+    secondaryActionButtonProps?: TemplateActionButtonProps;
+    /** 自定义内容区；传入后不再渲染默认布局。 */
+    children?: ReactNode;
+    /** 卡片根节点自定义类名。 */
+    className?: string;
+    /** 卡片根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击卡片根节点时触发。 */
+    onClick?: (event: TouchEvent) => void;
+    /** 点击标题栏右侧「更多」入口时触发。 */
+    onMoreClick?: (event: TouchEvent) => void;
+    /** 点击内容区时触发。 */
+    onContentClick?: (event: TouchEvent) => void;
+    /** 点击右侧次按钮时触发。 */
+    onExtraActionClick?: (event?: TouchEvent) => void;
+    /** 点击主按钮时触发。 */
+    onPrimaryActionClick?: (event?: TouchEvent) => void;
+    /** 点击次按钮时触发。 */
+    onSecondaryActionClick?: (event?: TouchEvent) => void;
+}
+export interface MediaLayoutCardInfoRow {
+    /** 信息行唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+    /** 信息行内容；优先级高于 text。字符串和数字会按默认信息样式渲染，传入节点时直接渲染自定义内容。 */
+    content?: ReactNode;
+    /** 信息行单字段文案；只需要传入文字时使用。 */
+    text?: TemplateText;
+}
+export declare function MediaLayoutCard(props: MediaLayoutCardProps): ReactElement;
+//# sourceMappingURL=index.d.ts.map