@doubao-apps/template 0.0.31 → 0.0.32

package/README.md

@@ -5,41 +5,28 @@ Doubao Apps Widget 模板库，用于快速开发卡片类 widget。模板会把
 模板适合用在 widget 的 `render` 中。通常一个 widget 对应一张卡片，建议直接返回模板组件，不额外包裹无意义的 `view` / `scroll-view`：
 
 ```tsx
-import { defineWidget } from '@doubao-apps/framework';
 import { ListCard } from '@doubao-apps/template';
 
-export default defineWidget({
-  aiMeta: {
-    id: 'product-list',
-    name: '商品列表',
-    description: '展示商品列表卡片',
-    border: true
-  },
-  render() {
-    return (
-      <ListCard
-        items={[
-          {
-            title: '主标题',
-            price: '4199',
-            priceUnit: '元',
-            description: '商品描述商品描述',
-            imageSrc: 'https://example.com/product.png'
-          },
-          {
-            title: '第二个商品',
-            price: '299',
-            priceUnit: '元',
-            description: '商品描述商品描述'
-          }
-        ]}
-        onViewMoreClick={() => {
-          console.log('view more');
-        }}
-      />
-    );
-  }
-});
+<ListCard
+  items={[
+    {
+      title: '主标题',
+      price: '4199',
+      priceUnit: '元',
+      description: '商品描述商品描述',
+      imageSrc: 'https://example.com/product.png'
+    },
+    {
+      title: '第二个商品',
+      price: '299',
+      priceUnit: '元',
+      description: '商品描述商品描述'
+    }
+  ]}
+  onViewMoreClick={() => {
+    console.log('view more');
+  }}
+/>
 ```
 
 如果只是验证 UI 效果，也可以在普通页面里直接渲染模板组件；但真实卡片接入建议优先按 widget 方式组织。
@@ -51,34 +38,30 @@ export default defineWidget({
 ```tsx
 import { ListCard } from '@doubao-apps/template';
 
-export default function Page() {
-  return (
-    <ListCard
-      items={[
-        {
-          title: '主标题',
-          price: '4199',
-          priceUnit: '元',
-          description: '商品描述商品描述',
-          imageSrc: 'https://example.com/product.png',
-          actionText: '下单'
-        },
-        {
-          title: '第二个商品',
-          price: '299',
-          priceUnit: '元',
-          description: '商品描述商品描述'
-        }
-      ]}
-      onViewMoreClick={() => {
-        console.log('view more');
-      }}
-      onMoreClick={() => {
-        console.log('more');
-      }}
-    />
-  );
-}
+<ListCard
+  items={[
+    {
+      title: '主标题',
+      price: '4199',
+      priceUnit: '元',
+      description: '商品描述商品描述',
+      imageSrc: 'https://example.com/product.png',
+      actionText: '下单'
+    },
+    {
+      title: '第二个商品',
+      price: '299',
+      priceUnit: '元',
+      description: '商品描述商品描述'
+    }
+  ]}
+  onViewMoreClick={() => {
+    console.log('view more');
+  }}
+  onMoreClick={() => {
+    console.log('more');
+  }}
+/>
 ```
 
 说明：
@@ -93,41 +76,43 @@ export default function Page() {
 
 `OrderCard` 是提单卡模板，结构包含应用标题栏、商品摘要、提单信息、费用汇总和底部操作按钮，适合下单确认、支付确认等场景。
 
+效果图：
+
+<img src="https://unpkg.com/@doubao-apps/template@latest/assets/order-card.png" alt="OrderCard 示例" width="400" />
+
+<p />
+
 ```tsx
 import { OrderCard } from '@doubao-apps/template';
 
-export default function Page() {
-  return (
-    <OrderCard
-      productTitle="主标题"
-      productSpec="商品规格商品规格"
-      productPrice="¥5.8"
-      productQuantity="1"
-      infoItems={[
-        {
-          label: '提单信息',
-          value: '信息字段最多支持 2 行',
-          valueExtra: '信息字段最多支持 2 行'
-        },
-        {
-          label: '提单信息',
-          value: '信息字段最多支持 2 行'
-        }
-      ]}
-      feeItems={[
-        { label: '运费', value: '¥3.0' },
-        { label: '打包费', value: '¥1.0' }
-      ]}
-      totalPrice="¥9.8"
-      onPrimaryActionClick={() => {
-        console.log('pay');
-      }}
-      onSecondaryActionClick={() => {
-        console.log('edit');
-      }}
-    />
-  );
-}
+<OrderCard
+  productTitle="主标题"
+  productSpec="商品规格商品规格"
+  productPrice="¥5.8"
+  productQuantity="1"
+  infoItems={[
+    {
+      label: '提单信息',
+      value: '信息字段最多支持 2 行',
+      valueExtra: '信息字段最多支持 2 行'
+    },
+    {
+      label: '提单信息',
+      value: '信息字段最多支持 2 行'
+    }
+  ]}
+  feeItems={[
+    { label: '运费', value: '¥3.0' },
+    { label: '打包费', value: '¥1.0' }
+  ]}
+  totalPrice="¥9.8"
+  onPrimaryActionClick={() => {
+    console.log('pay');
+  }}
+  onSecondaryActionClick={() => {
+    console.log('edit');
+  }}
+/>
 ```
 
 说明：
@@ -138,26 +123,163 @@ export default function Page() {
 - `primaryActionText` 和 `secondaryActionText` 可以自定义底部操作按钮文案。
 - 用在 widget 中时，推荐让 `render` 直接返回 `OrderCard`。
 
-## InvalidCard
 
-`InvalidCard` 是失效卡模板，结构包含应用标题栏和失效状态内容行，适合任务状态变化、卡片过期、服务不可用等场景。
+## 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" />
+
+<p />
+
+```tsx
+import { TransportCard } from '@doubao-apps/template';
+
+<TransportCard
+  title="北京南 - 上海虹桥"
+  departureMain="08:00"
+  departureSub="北京南"
+  transferTop="直达"
+  showTransferDot
+  arrivalMain="12:32"
+  arrivalDayOffset="+1"
+  arrivalSub="上海虹桥"
+  price="¥553"
+  onClick={() => {
+    console.log('transport card');
+  }}
+/>
+```
+
+说明：
+
+- `departureMain`、`departureSub`、`transferTop`、`transferBottom`、`arrivalMain`、`arrivalDayOffset`、`arrivalSub` 仅接收字符串或数字。
+- `title`、`transfer`、`price` 接收 `ReactNode`，用于需要自定义灰色块或整块区域的场景。
+- `showTransferDot` 用于切换中转箭头的中间圆点样式。
+
+## TransportListCard
+
+`TransportListCard` 是交通票务列表卡模板，结构包含应用标题栏、多条出发/到达信息和底部「查看更多」按钮，适合展示机票、火车票、大巴等交通工具推荐列表。
+
+效果图：
+
+<img src="https://unpkg.com/@doubao-apps/template@latest/assets/transport-list-card.png" alt="TransportListCard 示例" width="400" />
+
+<p />
+
 
 ```tsx
-import { InvalidCard } from '@doubao-apps/template';
-
-export default function Page() {
-  return (
-    <InvalidCard
-      title="任务状态已更新"
-      onClick={() => {
-        console.log('invalid card');
-      }}
-    />
-  );
-}
+import { TransportListCard } from '@doubao-apps/template';
+
+<TransportListCard
+  items={[
+    {
+      title: '北京南 - 上海虹桥',
+      departureMain: '11:20',
+      departureSub: '出发地',
+      arrivalMain: '16:00',
+      arrivalDayOffset: '+1',
+      arrivalSub: '到达地',
+      price: '¥553'
+    },
+    {
+      title: '北京南 - 上海虹桥',
+      departureMain: '11:20',
+      departureSub: '出发地',
+      arrivalMain: '16:00',
+      arrivalDayOffset: '+1',
+      arrivalSub: '到达地',
+      price: '¥553'
+    }
+  ]}
+  onViewMoreClick={() => {
+    console.log('view more');
+  }}
+/>
 ```
 
 说明：
 
-- `title` 用于配置失效状态文案。
-- 用在 widget 中时，推荐让 `render` 直接返回 `InvalidCard`。
+- 当 `items` 超过 4 条时，默认只展示前 4 条，并在底部展示「查看更多」按钮。
+- 可以通过 `viewMoreText` 和 `onViewMoreClick` 自定义「查看更多」按钮文案和点击行为。
+- 每个列表项可以通过 `arrivalDayOffset` 展示到达时间右上角日期偏移，例如 `+1`。
+- 每个列表项的 `title`、`transfer`、`price` 接收 `ReactNode`，用于需要自定义灰色块或整块区域的场景。
+
+## TicketOrderCard
+
+`TicketOrderCard` 是提单卡模板，结构包含应用标题栏、往返航程、订单信息、费用汇总和底部操作按钮，适合机票预订、改签确认等场景。
+
+效果图：
+
+<img src="https://unpkg.com/@doubao-apps/template@latest/assets/ticket-order-card.png" alt="TicketOrderCard 示例" width="400" />
+
+<p />
+
+```tsx
+import { TicketOrderCard } from '@doubao-apps/template';
+
+<TicketOrderCard
+  routeItems={[
+    {
+      title: '出发地 - 到达地',
+      description: '6月1日 周六 20:50-23:50 CZ0000 经济舱'
+    },
+    {
+      title: '到达地 - 出发地',
+      description: '6月3日 周一 14:50-18:50 CZ0001 经济舱'
+    }
+  ]}
+  infoItems={[
+    { label: '订单信息1', value: '信息字段', valueExtra: '信息字段' },
+    { label: '订单信息2', value: '信息字段' }
+  ]}
+  feeItems={[
+    { label: '明细1', value: '¥1064' },
+    { label: '明细2', value: '¥440' }
+  ]}
+  totalLabel="合计"
+  totalPrice="¥1504"
+  secondaryActionText="次按钮"
+  primaryActionText="主按钮"
+  onSecondaryActionClick={() => {
+    console.log('secondary action');
+  }}
+  onPrimaryActionClick={() => {
+    console.log('primary action');
+  }}
+/>
+```

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

@@ -0,0 +1,19 @@
+import type { CSSProperties, TouchEvent } from '@lynx-js/types';
+import type { ReactElement } from 'react';
+import './styles.scss';
+export interface TemplateActionBarProps {
+    /** 操作区根节点自定义类名。 */
+    className?: string;
+    /** 操作区根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 主按钮文案。 */
+    primaryActionText?: string;
+    /** 次按钮文案。 */
+    secondaryActionText?: string;
+    /** 点击主按钮时触发。 */
+    onPrimaryActionClick?: (event?: TouchEvent) => void;
+    /** 点击次按钮时触发。 */
+    onSecondaryActionClick?: (event?: TouchEvent) => void;
+}
+export declare function TemplateActionBar(props: TemplateActionBarProps): ReactElement | null;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,15 @@
+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 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}
+    </view>;
+}
+export { TemplateActionBar };

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

@@ -0,0 +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;
+  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-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));
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.doubao-template-action-bar__action + .doubao-template-action-bar__action {
+  margin-left: var(--doubao-template-action-bar-gap, 10px);
+}
+

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> : null}
+      {!isTemplateInfoSectionTextEmpty(totalPrice) ? <text className="doubao-template-info-section__total-price" text-maxline="1">
+          {totalPrice}
+        </text> : null}
+    </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> : null}
+      {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> : null}
+            {feeNodes}
+            {totalNode}
+          </view>
+        </view> : null}
+    </view>;
+}
+export { TemplateInfoSection };