@doubao-dev/template 0.0.39 → 0.0.41

package/README.md

@@ -105,6 +105,8 @@ import { Price } from '@doubao-dev/template/primitives';
 
 <Price value="1636.92" prefix="均" suffix="券后价" description="销量100+" />
 
+<Price value="1636.92" prefix="券后" prefixTone="muted" tone="highlight" />
+
 <Price value={1636.92} tone="highlight" originalPrice={2000} />
 ```
 
@@ -113,12 +115,13 @@ import { Price } from '@doubao-dev/template/primitives';
 - `value` 支持 `string | number`；需要保留前导零或末尾小数位时传字符串。
 - `currency` 默认是 `¥`，传空字符串可隐藏币种符号。
 - `tone="highlight"` 使用营销强调色；默认色跟随当前主题。
+- `prefixTone` 支持 `default | highlight | muted`，分别对应主文字色、营销红和 `--neutral-70`；不传时前缀与价格值颜色一致。
 - `loading` 展示最大宽度为 60% 的扫光占位。
 - `className` 和 `style` 可用于样式定制。
 
 ## ContentCard
 
-<img src="https://unpkg.com/@doubao-dev/template@0.0.39/assets/content-card.png" alt="ContentCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-dev/template@0.0.41/assets/content-card.png" alt="ContentCard 示例" width="400" />
 
 通用列表卡，由标题栏、列表内容和底部操作区组成，适合商品、服务、内容入口等可重复条目。
 
@@ -160,7 +163,7 @@ import { ContentCard } from '@doubao-dev/template';
 
 ## PriceActionCard
 
-<img src="https://unpkg.com/@doubao-dev/template@0.0.39/assets/price-action-card.png" alt="PriceActionCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-dev/template@0.0.41/assets/price-action-card.png" alt="PriceActionCard 示例" width="400" />
 
 价格操作卡，由多条"价格 + 信息 + 右侧按钮"组成，适合报价、权益、服务方案等结果列表。
 
@@ -193,7 +196,7 @@ import { PriceActionCard } from '@doubao-dev/template';
 
 ## CheckoutCard
 
-<img src="https://unpkg.com/@doubao-dev/template@0.0.39/assets/checkout-card.png" alt="CheckoutCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-dev/template@0.0.41/assets/checkout-card.png" alt="CheckoutCard 示例" width="400" />
 
 通用提单卡，由商品摘要、提单信息、费用汇总和底部操作区组成，适合下单确认、支付确认等场景。
 
@@ -244,7 +247,7 @@ import { CheckoutCard } from '@doubao-dev/template';
 
 ## TicketOrderCard
 
-<img src="https://unpkg.com/@doubao-dev/template@0.0.39/assets/ticket-checkout-card.png" alt="TicketOrderCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-dev/template@0.0.41/assets/ticket-checkout-card.png" alt="TicketOrderCard 示例" width="400" />
 
 > **已废弃：** 请使用 `CheckoutCard`。`TicketOrderCard` 仅为兼容现有代码保留。
 
@@ -291,7 +294,7 @@ import { TicketOrderCard } from '@doubao-dev/template';
 
 ## TransitCard
 
-<img src="https://unpkg.com/@doubao-dev/template@0.0.39/assets/transit-card.png" alt="TransitCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-dev/template@0.0.41/assets/transit-card.png" alt="TransitCard 示例" width="400" />
 
 交通票务列表卡，由多条出发、中转、到达和价格信息组成，适合展示机票、火车票、大巴等推荐列表。
 
@@ -308,7 +311,16 @@ import { TransitCard } from '@doubao-dev/template';
       arrivalMain: '12:32',
       arrivalDayOffset: '+1',
       arrivalSub: '上海虹桥',
-      price: '¥553'
+      price: {
+        value: '553',
+        currency: '¥',
+        prefix: '前缀',
+        tone: 'highlight'
+      },
+      tag: {
+        text: '可优惠约¥5',
+        tone: 'marketing'
+      }
     }
   ]}
   footer={{
@@ -322,12 +334,15 @@ import { TransitCard } from '@doubao-dev/template';
 说明：
 
 - `items` 会全量展示，模板不做"最多 4 条"的截断。
-- `title`、`transfer`、`price` 接收 `ReactNode`，适合需要自定义整块区域的场景。
+- `price` 推荐传 `{ value, currency?, prefix?, prefixTone?, tone? }`，由模板使用 `Price` Primitive 渲染；`currency` 默认是 `¥`，不传 `prefixTone` 时前缀与价格值颜色一致。
+- `price` 传数字时直接作为 `Price.value`，使用默认币种；传字符串时按首个币种符号拆为 `prefix + currency + value`，没有币种符号时整串作为 `value` 并隐藏币种。两种写法均使用 Price 的默认 `tone`。
+- `tag` 传 `{ text, tone? }`，`tone` 仅支持红色 `marketing` 和灰色 `neutral`，默认 `marketing`；不传 `tag` 时保持原来的单价格布局。
+- `title`、`transfer` 接收 `ReactNode`，适合需要自定义整块区域的场景。
 - `departureMain`、`departureSub`、`transferTop`、`transferBottom`、`arrivalMain`、`arrivalDayOffset`、`arrivalSub` 接收字符串或数字。
 
 ## AskHumanCard
 
-<img src="https://unpkg.com/@doubao-dev/template@0.0.39/assets/ask-human-card.png" alt="AskHumanCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-dev/template@0.0.41/assets/ask-human-card.png" alt="AskHumanCard 示例" width="400" />
 
 人工确认选项卡，由一组选项组成，适合让用户在多个候选项中确认选择。
 

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

@@ -24,6 +24,8 @@ export interface TemplateTransportSummaryProps {
     arrivalSub?: TemplateText;
     /** 价格块内容。 */
     price?: ReactNode;
+    /** 价格下方的标签内容。 */
+    tag?: ReactNode;
     /** 根节点自定义类名。 */
     className?: string;
 }

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

@@ -33,6 +33,15 @@ function renderTemplateTransportSummaryTextField(content, wrapperClassName, text
       </text>
     </view>;
 }
+function renderTemplateTransportSummaryPrice(price, tag) {
+    const hasPrice = !isTemplateTransportSummaryNodeEmpty(price);
+    const hasTag = !isTemplateTransportSummaryNodeEmpty(tag);
+    if (!hasPrice && !hasTag) return null;
+    return <view className={clsx('doubao-template-transport-summary__price', hasTag && 'doubao-template-transport-summary__price--with-tag')}>
+      {hasPrice && price}
+      {hasTag && tag}
+    </view>;
+}
 function TemplateTransportSummaryArrowIcon({ showDot }) {
     const theme = useTheme();
     return <svg className="doubao-template-transport-summary__transfer-arrow-icon" content={getTransportSummaryArrowSvgContent(Boolean(showDot), 'dark' === theme)}/>;
@@ -70,7 +79,7 @@ function renderTemplateTransportSummaryTransfer({ content, topText, showDot, bot
     </view>;
 }
 function TemplateTransportSummary(props) {
-    const { title, departureMain, departureSub, transfer, transferTop, showTransferDot, transferBottom, arrivalMain, arrivalDayOffset, arrivalSub, price, className } = props;
+    const { title, departureMain, departureSub, transfer, transferTop, showTransferDot, transferBottom, arrivalMain, arrivalDayOffset, arrivalSub, price, tag, className } = props;
     const departureNode = renderTemplateTransportSummaryPoint({
         mainText: departureMain,
         subText: departureSub
@@ -89,7 +98,7 @@ function TemplateTransportSummary(props) {
     const arrivalDayOffsetNode = null == arrivalPointNode ? null : renderTemplateTransportSummaryArrivalDayOffset(arrivalDayOffset);
     const arrivalNode = null == arrivalPointNode ? null : <view className="doubao-template-transport-summary__arrival">{arrivalPointNode}</view>;
     const titleNode = renderTemplateTransportSummaryNodeField(title, 'doubao-template-transport-summary__title', 'doubao-template-transport-summary__title-text');
-    const priceNode = renderTemplateTransportSummaryNodeField(price, 'doubao-template-transport-summary__price', 'doubao-template-transport-summary__price-text');
+    const priceNode = renderTemplateTransportSummaryPrice(price, tag);
     const hasRoute = Boolean(departureNode || transferNode || arrivalNode);
     const hasRouteRow = Boolean(hasRoute || priceNode);
     if (null == titleNode && !hasRouteRow) return null;

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

@@ -23,7 +23,7 @@
   height: 20px;
 }
 
-.doubao-template-transport-summary__title-text, .doubao-template-transport-summary__route-point-main-text, .doubao-template-transport-summary__arrival-day-offset-text, .doubao-template-transport-summary__route-point-sub-text, .doubao-template-transport-summary__transfer-label-text, .doubao-template-transport-summary__price-text {
+.doubao-template-transport-summary__title-text, .doubao-template-transport-summary__route-point-main-text, .doubao-template-transport-summary__arrival-day-offset-text, .doubao-template-transport-summary__route-point-sub-text, .doubao-template-transport-summary__transfer-label-text {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-family: PingFang SC, sans-serif;
@@ -132,9 +132,9 @@
 
 .doubao-template-transport-summary__arrival-day-offset-text {
   color: var(--neutral-100);
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 400;
-  line-height: 14px;
+  line-height: normal;
 }
 
 .doubao-template-transport-summary__route-point-sub-text {
@@ -203,12 +203,8 @@
   padding: 0 4px;
 }
 
-.doubao-template-transport-summary__price-text {
-  color: var(--pink-500);
-  text-align: right;
-  font-family: SF Pro, sans-serif;
-  font-size: 17px;
-  font-weight: 600;
-  line-height: 22px;
+.doubao-template-transport-summary__price--with-tag {
+  gap: 4px;
+  height: 46px;
 }
 

package/dist/content-card/styles.css

@@ -137,7 +137,9 @@
 }
 
 .doubao-content-card__item-action-button {
-  width: 80px;
+  width: auto;
+  min-width: 60px;
+  max-width: 100px;
 }
 
 .doubao-content-card__item-action-switch {

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export type { TemplateExtraAction, TemplateExtraActionButton, TemplateExtraActio
 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 { TransitCard, type TransitCardItem, type TransitCardPrice, type TransitCardProps, type TransitCardTag } from './transit-card/index.js';
 export type { TemplateKey, TemplateTagTone, 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/price-action-card/styles.css

@@ -141,7 +141,9 @@
   --doubao-button-default-bg: var(--bg-base-1-overlay);
   --doubao-button-default-text: var(--neutral-100);
   flex-shrink: 0;
-  width: 80px;
+  width: auto;
+  min-width: 60px;
+  max-width: 100px;
   height: 38px;
 }
 

package/dist/primitives/index.d.ts

@@ -1,4 +1,4 @@
-export { Price, type PriceProps, type PriceTone, type PriceValue } from './price/index.js';
+export { Price, type PricePrefixTone, type PriceProps, type PriceTone, type PriceValue } from './price/index.js';
 export { Tag, type TagProps, type TagTone, type TagValue } from './tag/index.js';
 export { Title, type TitleMaxLines, type TitleProps, type TitleValue } from './title/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/primitives/price/index.d.ts

@@ -1,5 +1,5 @@
 import type { PriceProps } from './types.js';
 import './styles.scss';
-export type { PriceProps, PriceTone, PriceValue } from './types.js';
-export declare function Price({ value, currency, prefix, suffix, description, originalPrice, tone, loading, className, style }: PriceProps): any;
+export type { PricePrefixTone, PriceProps, PriceTone, PriceValue } from './types.js';
+export declare function Price({ value, currency, prefix, prefixTone, suffix, description, originalPrice, tone, loading, className, style }: PriceProps): any;
 //# sourceMappingURL=index.d.ts.map

package/dist/primitives/price/index.js

@@ -17,7 +17,7 @@ function formatOriginalPrice(value, currency) {
     const originalPrice = String(value);
     return currency && originalPrice.startsWith(currency) ? originalPrice : `${currency}${originalPrice}`;
 }
-function Price({ value, currency = '¥', prefix, suffix, description, originalPrice, tone = 'default', loading = false, className, style }) {
+function Price({ value, currency = '¥', prefix, prefixTone, suffix, description, originalPrice, tone = 'default', loading = false, className, style }) {
     const themedClassName = useThemeClassName(className);
     const { integer, decimal } = splitPriceValue(value);
     return <view className={clsx('doubao-price', `doubao-price--tone-${tone}`, {
@@ -26,7 +26,9 @@ function Price({ value, currency = '¥', prefix, suffix, description, originalPr
       {loading ? <view className="doubao-price__placeholder"/> : <>
           <view className="doubao-price__amount">
             {prefix ? <view className="doubao-price__affix">
-                <text className="doubao-price__prefix">{prefix}</text>
+                <text className={clsx('doubao-price__prefix', prefixTone && `doubao-price__prefix--tone-${prefixTone}`)}>
+                  {prefix}
+                </text>
               </view> : null}
 
             <view className="doubao-price__main">

package/dist/primitives/price/styles.css

@@ -76,6 +76,18 @@
   line-height: 11px;
 }
 
+.doubao-price__prefix.doubao-price__prefix--tone-default {
+  color: var(--neutral-100);
+}
+
+.doubao-price__prefix.doubao-price__prefix--tone-highlight {
+  color: #ff375f;
+}
+
+.doubao-price__prefix.doubao-price__prefix--tone-muted {
+  color: var(--neutral-70);
+}
+
 .doubao-price__currency {
   font-size: 13px;
   font-weight: 500;

package/dist/primitives/price/types.d.ts

@@ -1,6 +1,7 @@
 import type { CSSProperties } from '@lynx-js/types';
 export type PriceValue = string | number;
 export type PriceTone = 'default' | 'highlight';
+export type PricePrefixTone = 'default' | 'highlight' | 'muted';
 export interface PriceProps {
     /** 价格值。传入字符串时会保留前导零和末尾小数位。 */
     value: PriceValue;
@@ -8,6 +9,8 @@ export interface PriceProps {
     currency?: string;
     /** 价格前缀，例如“均”“起”。 */
     prefix?: string;
+    /** 价格前缀色调。不传时跟随价格色调。 */
+    prefixTone?: PricePrefixTone;
     /** 价格后缀，例如“券后价”“/10斤”。 */
     suffix?: string;
     /** 价格后的辅助说明，例如“销量100+”。 */

package/dist/transit-card/index.d.ts

@@ -2,6 +2,8 @@ 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 PricePrefixTone, type PriceTone, type PriceValue } from '../primitives/price/index.js';
+import { type TagValue } from '../primitives/tag/index.js';
 import type { TemplateKey, TemplateText } from '../types.js';
 import './styles.scss';
 export interface TransitCardProps {
@@ -39,8 +41,10 @@ export interface TransitCardItem {
     arrivalDayOffset?: TemplateText;
     /** 到达点补充信息文案。 */
     arrivalSub?: TemplateText;
-    /** 价格块内容。 */
-    price?: ReactNode;
+    /** 价格配置或价格块内容。 */
+    price?: TransitCardPrice | ReactNode;
+    /** 价格下方的标签配置。 */
+    tag?: TransitCardTag;
     /** 列表项根节点自定义类名。 */
     className?: string;
     /** 列表项根节点自定义样式。 */
@@ -48,5 +52,23 @@ export interface TransitCardItem {
     /** 点击列表项时触发。 */
     onClick?: (event: TouchEvent) => void;
 }
+export interface TransitCardPrice {
+    /** 价格值。 */
+    value: PriceValue;
+    /** 币种符号。 */
+    currency?: string;
+    /** 价格前缀。 */
+    prefix?: string;
+    /** 价格前缀色调。不传时跟随价格色调。 */
+    prefixTone?: PricePrefixTone;
+    /** 价格色调。 */
+    tone?: PriceTone;
+}
+export interface TransitCardTag {
+    /** 标签内容。 */
+    text: TagValue;
+    /** 标签色调；marketing 为红色，neutral 为灰色，默认 marketing。 */
+    tone?: 'marketing' | 'neutral';
+}
 export declare function TransitCard(props: TransitCardProps): ReactElement;
 //# sourceMappingURL=index.d.ts.map

package/dist/transit-card/index.js

@@ -3,12 +3,34 @@ import { clsx } from "clsx";
 import { TemplateCardFooter } from "../components/footer/index.js";
 import { TemplateCardHeader } from "../components/header/index.js";
 import { TemplateTransportSummary } from "../components/transport-summary/index.js";
+import { Price } from "../primitives/price/index.js";
+import { Tag } from "../primitives/tag/index.js";
 import "./styles.css";
+function isTransitCardPriceConfig(price) {
+    return null != price && 'object' == typeof price && !Array.isArray(price) && 'value' in price;
+}
+function renderTransitCardTextPrice(price) {
+    if ('' === price) return null;
+    const matched = price.match(/^(.*?)([¥￥$€£₩₽₹])(.*)$/);
+    if (null == matched) return <Price value={price} currency=""/>;
+    const [, prefix, currency, value] = matched;
+    return <Price value={value} currency={currency} prefix={prefix || void 0}/>;
+}
+function renderTransitCardPrice(price) {
+    if ('number' == typeof price) return <Price value={price}/>;
+    if ('string' == typeof price) return renderTransitCardTextPrice(price);
+    if (isTransitCardPriceConfig(price)) return <Price value={price.value} currency={price.currency} prefix={price.prefix} prefixTone={price.prefixTone} tone={price.tone}/>;
+    return price;
+}
+function renderTransitCardTag(tag) {
+    if (null == tag || '' === tag.text) return null;
+    return <Tag text={tag.text} tone={tag.tone ?? 'marketing'}/>;
+}
 function renderTransitCardItem({ item, index, isLast }) {
     return <view className={clsx('doubao-transit-card__item', isLast && 'doubao-transit-card__item--last', item.className)} style={item.style} key={item.key ?? index} {...null != item.onClick ? {
         catchtap: item.onClick
     } : {}}>
-      <TemplateTransportSummary className="doubao-template-transport-summary--list" title={item.title} departureMain={item.departureMain} departureSub={item.departureSub} transfer={item.transfer} transferTop={item.transferTop} transferBottom={item.transferBottom} arrivalMain={item.arrivalMain} arrivalDayOffset={item.arrivalDayOffset} arrivalSub={item.arrivalSub} price={item.price}/>
+      <TemplateTransportSummary className="doubao-template-transport-summary--list" title={item.title} departureMain={item.departureMain} departureSub={item.departureSub} transfer={item.transfer} transferTop={item.transferTop} transferBottom={item.transferBottom} arrivalMain={item.arrivalMain} arrivalDayOffset={item.arrivalDayOffset} arrivalSub={item.arrivalSub} price={renderTransitCardPrice(item.price)} tag={renderTransitCardTag(item.tag)}/>
       {!isLast && <view className="doubao-transit-card__item--spread"/>}
     </view>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doubao-dev/template",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "type": "module",
   "exports": {
     ".": {