@doubao-dev/template 0.0.38 → 0.0.39

package/README.md

@@ -1,11 +1,10 @@
 # @doubao-dev/template
 
-Doubao Apps Widget 模板库，用于快速开发卡片类 widget。模板把标题栏、内容区、信息区和操作区组合成稳定的卡片结构，开发者在 `defineWidget` 里选择模板并传入业务数据即可。
+Doubao Apps Widget 模板库，用于快速开发卡片类 widget。模板把标题栏、内容区、信息区和操作区组合成稳定的卡片结构，开发者在 Widget 函数组件里选择模板并传入业务数据即可。
 
 推荐一个 widget 直接返回一张模板卡片，不额外包裹无意义的 `view` / `scroll-view`：
 
 ```tsx
-import { defineWidget } from '@doubao-dev/framework';
 import { ContentCard, type ContentCardItem } from '@doubao-dev/template';
 
 const items: ContentCardItem[] = [
@@ -13,33 +12,32 @@ const items: ContentCardItem[] = [
     key: 'a',
     title: '主标题',
     subtitle: '4199 元 | 商品描述',
-    thumbnail: <image src="https://example.com/product.png" mode="aspectFill" />
+    description: '补充描述',
+    thumbnailSrc: 'https://example.com/product.png'
   }
 ];
 
-export default defineWidget({
-  render() {
-    return (
-      <ContentCard
-        items={items}
-        header={{
-          actionText: '更多',
-          onActionClick: () => console.log('more')
-        }}
-        footer={{
-          secondaryActionButton: {
-            text: '查看更多',
-            onClick: () => console.log('view more')
-          },
-          primaryActionButton: {
-            text: '立即下单',
-            onClick: () => console.log('submit')
-          }
-        }}
-      />
-    );
-  }
-});
+export default function ProductCard() {
+  return (
+    <ContentCard
+      items={items}
+      header={{
+        actionText: '更多',
+        onActionClick: () => console.log('more')
+      }}
+      footer={{
+        secondaryActionButton: {
+          text: '查看更多',
+          onClick: () => console.log('view more')
+        },
+        primaryActionButton: {
+          text: '立即下单',
+          onClick: () => console.log('submit')
+        }
+      }}
+    />
+  );
+}
 ```
 
 ## 通用约定
@@ -47,13 +45,80 @@ export default defineWidget({
 - `header` 配置标题栏右侧操作，类型为 `TemplateCardHeaderProps`，包含 `actionText` / `showAction` / `onActionClick`。
 - `footer` 配置底部操作区，类型为 `TemplateCardFooterProps`，包含 `primaryActionButton` / `secondaryActionButton`。只传一个按钮时占据整行。
 - `header`、`footer` 和内容区相互独立。footer 不会影响 `items` 展示数量，内容区也不负责渲染 header/footer。
-- `children` 只接管内容区；模板仍保留卡片外壳、header 和 footer。
+- 优先使用模板公开的结构化 Props；部分模板保留的 `children` 已废弃，只用于兼容旧代码。
 - `className` / `style` / `onClick` 作用在卡片根节点。
-- 样式使用组件根 class 内声明的 `--doubao-*` CSS 变量，不把模板变量挂到 `:root`。
+- 模板和 primitives 不声明或暴露组件级 CSS 变量；颜色可以直接消费已有的全局主题 token。
+
+## Primitives
+
+`primitives` 是模板体系中的可组合业务单元，不包含完整卡片外壳。`Title`、`Tag`、`Price`、后续的 `Play` 等单元统一通过该子入口导入。
+
+### Title
+
+标题展示组件，默认单行省略，可显式切换为最多两行，并可控制右侧箭头。
+
+```tsx
+import { Title } from '@doubao-dev/template/primitives';
+
+<Title text="默认单行标题" />
+
+<Title text="需要展示更多信息的两行标题" maxLines={2} />
+
+<Title text="不展示箭头的标题" showArrow={false} />
+```
+
+说明：
+
+- `text` 支持 `string | number`。
+- `maxLines` 支持 `1 | 2`，默认是 `1`；超出对应行数后省略。
+- `showArrow` 默认是 `true`。
+- `loading` 展示最大宽度为 40% 的扫光占位。
+- 组件宽度由外部业务容器决定。
+
+### Tag
+
+标签展示组件，用于突出营销、权威或常规辅助信息。标签固定高度为 20px；多个标签横向排列时，标签间距为 4px，容器高度为 26px。
+
+```tsx
+import { Tag } from '@doubao-dev/template/primitives';
+
+<Tag text="营销标签" tone="marketing" />
+
+<Tag text="权威标签" />
+
+<Tag text="普通标签" tone="neutral" />
+```
+
+说明：
+
+- `text` 支持 `string | number`。
+- `tone` 支持 `marketing | authority | neutral`，默认是 `authority`。
+- 标签内容不会收缩或截断；业务容器负责测量或通过换行裁切隐藏放不下的整枚标签，不能只裁切标签文字。
+- `className` 和 `style` 可用于样式定制。
+
+### Price
+
+价格展示组件，用于卡片内容中的金额、币种、前后缀、辅助信息和原价排版。`Price` 是业务展示组件，不包含卡片外壳。
+
+```tsx
+import { Price } from '@doubao-dev/template/primitives';
+
+<Price value="1636.92" prefix="均" suffix="券后价" description="销量100+" />
+
+<Price value={1636.92} tone="highlight" originalPrice={2000} />
+```
+
+说明：
+
+- `value` 支持 `string | number`；需要保留前导零或末尾小数位时传字符串。
+- `currency` 默认是 `¥`，传空字符串可隐藏币种符号。
+- `tone="highlight"` 使用营销强调色；默认色跟随当前主题。
+- `loading` 展示最大宽度为 60% 的扫光占位。
+- `className` 和 `style` 可用于样式定制。
 
 ## ContentCard
 
-<img src="https://unpkg.com/@doubao-dev/template@0.0.38/assets/content-card.png" alt="ContentCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-dev/template@0.0.39/assets/content-card.png" alt="ContentCard 示例" width="400" />
 
 通用列表卡，由标题栏、列表内容和底部操作区组成，适合商品、服务、内容入口等可重复条目。
 
@@ -65,7 +130,8 @@ import { ContentCard } from '@doubao-dev/template';
     {
       title: '蓝牙降噪耳机 Pro',
       subtitle: '799 元 | 主动降噪 | 现货',
-      thumbnail: <image src="https://example.com/product.png" mode="aspectFill" />,
+      description: '支持空间音频与多设备连接',
+      thumbnailSrc: 'https://example.com/product.png',
       action: {
         type: 'button',
         text: '下单',
@@ -87,14 +153,14 @@ import { ContentCard } from '@doubao-dev/template';
 
 说明：
 
-- `title` / `subtitle` 支持字符串、数字或自定义节点。字符串和数字使用模板默认单行样式。
-- `thumbnail` 是列表项左侧缩略视觉内容，可传图片、图标或自定义节点。
+- `title` / `subtitle` / `description` 支持字符串、数字或自定义节点。字符串和数字使用模板默认样式且最多一行；需要两行标题时传入 `<Title maxLines={2} />`。各行高度由内容决定，行间距为 2px。
+- `thumbnailSrc` 是列表项左侧缩略图地址；`thumbnail` 可传原生媒体节点或 primitive，同时传入时 `thumbnail` 优先。
 - `action` 是列表项右侧操作区，支持 `{ type: 'button' }`、`{ type: 'switch' }`、`{ type: 'playback' }` 或自定义节点。
-- `children` 会替换列表内容区，不包含 header/footer。
+- 标题、描述、缩略内容和操作区分别使用对应的明确字段配置。卡片和列表项的 `children` 已废弃，只用于兼容旧代码。
 
 ## PriceActionCard
 
-<img src="https://unpkg.com/@doubao-dev/template@0.0.38/assets/price-action-card.png" alt="PriceActionCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-dev/template@0.0.39/assets/price-action-card.png" alt="PriceActionCard 示例" width="400" />
 
 价格操作卡，由多条"价格 + 信息 + 右侧按钮"组成，适合报价、权益、服务方案等结果列表。
 
@@ -127,7 +193,7 @@ import { PriceActionCard } from '@doubao-dev/template';
 
 ## CheckoutCard
 
-<img src="https://unpkg.com/@doubao-dev/template@0.0.38/assets/checkout-card.png" alt="CheckoutCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-dev/template@0.0.39/assets/checkout-card.png" alt="CheckoutCard 示例" width="400" />
 
 通用提单卡，由商品摘要、提单信息、费用汇总和底部操作区组成，适合下单确认、支付确认等场景。
 
@@ -138,6 +204,8 @@ import { CheckoutCard } from '@doubao-dev/template';
   productItems={[
     {
       title: '双人下午茶套餐',
+      tagText: '新',
+      tagTone: 'highlight',
       spec: '含 2 杯饮品 + 2 款甜点',
       price: '¥68',
       quantity: '1'
@@ -155,10 +223,10 @@ import { CheckoutCard } from '@doubao-dev/template';
     { label: '预计时间', value: '今天 15:30', valueExtra: '请到店自取' }
   ]}
   feeItems={[
+    { label: '优惠', value: '-¥12' },
     { label: '包装费', value: '¥2' },
     { label: '服务费', value: '¥0' }
   ]}
-  discountText="共优惠 ¥12"
   totalPrice="¥126"
   footer={{
     secondaryActionButton: { text: '修改' },
@@ -169,14 +237,16 @@ import { CheckoutCard } from '@doubao-dev/template';
 
 说明：
 
-- `productItems` 支持单个或多个商品。单项字段复用商品摘要能力，包括 `title`、`spec`、`imageSrc`、`image`、`pricePrefix`、`price`、`quantity`、`showChevron`、`onClick`。
-- `infoItems` 配置提单信息列表。
-- `feeItems`、`discountText`、`totalLabel`、`totalPrice` 配置费用汇总。
+- `productItems` 支持单个或多个商品。单项字段复用商品摘要能力，包括 `title`、`tagText`、`tagTone`、`spec`、`imageSrc`、`image`、`pricePrefix`、`price`、`quantity`、`showChevron`、`onClick`；`tagText` 展示在标题前，`tagTone="highlight"` 使用强调色。
+- `infoItems` 配置提单信息列表；`value` 和 `valueExtra` 均为 `TemplateText`，使用相同样式并与左侧 label 的首行对齐。
+- `feeItems`、`totalLabel`、`totalPrice` 作为一个整体配置费用汇总，最多展示两行；优惠信息也通过 `feeItems` 传入。
 - 底部按钮使用 `footer.primaryActionButton` / `footer.secondaryActionButton`。
 
 ## TicketOrderCard
 
-<img src="https://unpkg.com/@doubao-dev/template@0.0.38/assets/ticket-checkout-card.png" alt="TicketOrderCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-dev/template@0.0.39/assets/ticket-checkout-card.png" alt="TicketOrderCard 示例" width="400" />
+
+> **已废弃：** 请使用 `CheckoutCard`。`TicketOrderCard` 仅为兼容现有代码保留。
 
 票务提单卡，由航程信息、订单信息、费用汇总和底部操作区组成，适合机票、火车票等出行确认场景。
 
@@ -187,6 +257,8 @@ import { TicketOrderCard } from '@doubao-dev/template';
   routeItems={[
     {
       title: '北京 - 上海',
+      tagText: '直飞',
+      tagTone: 'highlight',
       description: '7月1日 周三 08:00-10:10 MU5101 经济舱'
     },
     {
@@ -213,13 +285,13 @@ import { TicketOrderCard } from '@doubao-dev/template';
 
 说明：
 
-- `routeItems` 配置航程列表，单项可通过 `showChevron={false}` 隐藏标题右侧箭头。
+- `routeItems` 配置航程列表，`tagText` 展示在标题前，`tagTone="highlight"` 使用强调色，单项可通过 `showChevron={false}` 隐藏标题右侧箭头。
 - `totalContent` 可以接管合计区域，优先级高于 `totalLabel` / `totalPrice`。
 - 底部按钮使用通用 `footer`。
 
 ## TransitCard
 
-<img src="https://unpkg.com/@doubao-dev/template@0.0.38/assets/transit-card.png" alt="TransitCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-dev/template@0.0.39/assets/transit-card.png" alt="TransitCard 示例" width="400" />
 
 交通票务列表卡，由多条出发、中转、到达和价格信息组成，适合展示机票、火车票、大巴等推荐列表。
 
@@ -255,7 +327,7 @@ import { TransitCard } from '@doubao-dev/template';
 
 ## AskHumanCard
 
-<img src="https://unpkg.com/@doubao-dev/template@0.0.38/assets/ask-human-card.png" alt="AskHumanCard 示例" width="400" />
+<img src="https://unpkg.com/@doubao-dev/template@0.0.39/assets/ask-human-card.png" alt="AskHumanCard 示例" width="400" />
 
 人工确认选项卡，由一组选项组成，适合让用户在多个候选项中确认选择。
 
@@ -278,5 +350,5 @@ import { AskHumanCard } from '@doubao-dev/template';
 
 说明：
 
-- `items` 配置选项列表，每项可用 `text` 或 `children`。
+- `items` 配置选项列表，选项文案通过 `text` 设置。
 - `items[].showArrow` 支持 `'left'`、`'right'`、`'none'`，默认不展示；跳过、固定跳转等入口也通过 `items` 表达。

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

@@ -1,5 +1,5 @@
 import type { CSSProperties, TouchEvent } from '@lynx-js/types';
-import { type ReactElement, type ReactNode } from 'react';
+import { type ReactElement } from 'react';
 import type { TemplateKey, TemplateText } from '../types.js';
 import './styles.scss';
 /** 卡片行为语义。 */
@@ -27,8 +27,6 @@ export interface AskHumanCardItem {
     key?: TemplateKey;
     /** 选项文案。 */
     text?: TemplateText;
-    /** 选项自定义内容；优先级高于 text。 */
-    children?: ReactNode;
     /** 是否显示加载状态；为 true 时选项内展示 loading 动画并禁用点击。 */
     loading?: boolean;
     /** 箭头展示位置；默认 `'none'` 不展示。 */

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

@@ -23,15 +23,11 @@ function getAskHumanCardArrowIconContent(color) {
 function isAskHumanCardTextEmpty(content) {
     return null == content || '' === content;
 }
-function isAskHumanCardNodeEmpty(content) {
-    return null == content || 'boolean' == typeof content || '' === content;
-}
 function renderAskHumanCardItem({ item, index, optionBg, arrowColor }) {
     const isLoading = true === item.loading;
-    const hasCustomContent = !isAskHumanCardNodeEmpty(item.children);
     const arrowPosition = 'left' === item.showArrow || 'right' === item.showArrow ? item.showArrow : void 0;
     const arrowNode = arrowPosition ? <svg className="doubao-ask-human-card__option-icon" content={getAskHumanCardArrowIconContent(arrowColor)}/> : null;
-    if (!isLoading && !hasCustomContent && isAskHumanCardTextEmpty(item.text)) return null;
+    if (!isLoading && isAskHumanCardTextEmpty(item.text)) return null;
     return <Button key={item.key ?? index} className={clsx('doubao-ask-human-card__option', {
         'doubao-ask-human-card__option--with-arrow': null != arrowPosition
     }, item.className)} style={{
@@ -42,9 +38,9 @@ function renderAskHumanCardItem({ item, index, optionBg, arrowColor }) {
         item.onClick?.(event);
     }}>
       {'left' === arrowPosition && arrowNode}
-      {hasCustomContent ? item.children : <text className="doubao-ask-human-card__option-text" text-maxline="1">
-          {item.text}
-        </text>}
+      <text className="doubao-ask-human-card__option-text" text-maxline="1">
+        {item.text}
+      </text>
       {'right' === arrowPosition && arrowNode}
     </Button>;
 }

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

@@ -1,5 +1,5 @@
 import type { CSSProperties, TouchEvent } from '@lynx-js/types';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactElement } from 'react';
 import { type TemplateCardFooterProps } from '../components/footer/index.js';
 import { type TemplateCardHeaderProps } from '../components/header/index.js';
 import { type TemplateProductSummaryProps } from '../components/product-summary/index.js';
@@ -14,8 +14,6 @@ export interface CheckoutCardProps {
     infoItems?: CheckoutCardInfoItem[];
     /** 费用明细列表。 */
     feeItems?: CheckoutCardFeeItem[];
-    /** 优惠信息文案；传空字符串时不展示。 */
-    discountText?: string;
     /** 合计价格前的标签文案。 */
     totalLabel?: string;
     /** 合计价格。 */
@@ -39,9 +37,9 @@ export interface CheckoutCardInfoItem {
     /** 信息项标签。 */
     label: string;
     /** 信息项主内容。 */
-    value: ReactNode;
+    value: TemplateText;
     /** 信息项补充内容。 */
-    valueExtra?: ReactNode;
+    valueExtra?: TemplateText;
 }
 export interface CheckoutCardFeeItem {
     /** 费用项唯一标识；不传时使用数组下标。 */

package/dist/checkout-card/index.js

@@ -22,7 +22,7 @@ function renderCheckoutCardProductItem({ item, index }) {
     </view>;
 }
 function CheckoutCard(props) {
-    const { header, productItems = [], infoItems = [], feeItems = [], discountText, totalLabel, totalPrice, footer, className, style, onClick } = props;
+    const { header, productItems = [], infoItems = [], feeItems = [], totalLabel, totalPrice, footer, className, style, onClick } = props;
     const productNodes = productItems.map((item, index)=>renderCheckoutCardProductItem({
             item,
             index
@@ -32,7 +32,7 @@ function CheckoutCard(props) {
 
       {productNodes.length > 0 && <view className="doubao-checkout-card__products">{productNodes}</view>}
 
-      <TemplateInfoSection infoItems={infoItems} feeItems={feeItems} discountText={discountText} totalLabel={totalLabel} totalPrice={totalPrice} valueLayout="column"/>
+      <TemplateInfoSection infoItems={infoItems} feeItems={feeItems} totalLabel={totalLabel} totalPrice={totalPrice} valueLayout="column"/>
 
       <TemplateCardFooter secondaryActionButton={footer?.secondaryActionButton} primaryActionButton={footer?.primaryActionButton}/>
     </view>;

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

@@ -6,8 +6,6 @@ export interface TemplateInfoSectionProps {
     infoItems?: TemplateInfoSectionInfoItem[];
     /** 费用明细列表。 */
     feeItems?: TemplateInfoSectionFeeItem[];
-    /** 优惠信息文案。 */
-    discountText?: TemplateText;
     /** 合计价格前的标签文案。 */
     totalLabel?: TemplateText;
     /** 合计价格。 */

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

@@ -65,26 +65,23 @@ function renderTemplateInfoSectionTotal({ totalLabel, totalPrice, totalContent }
     </view>;
 }
 function TemplateInfoSection(props) {
-    const { infoItems = [], feeItems = [], discountText, totalLabel, totalPrice, totalContent, valueLayout = 'row' } = props;
+    const { infoItems = [], feeItems = [], 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;
+    const hasSummary = 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}
+            {}
+            {feeNodes.length > 0 && <view className="doubao-template-info-section__fees">{feeNodes}</view>}
             {totalNode}
           </view>
         </view>}

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

@@ -15,6 +15,7 @@
 
 .doubao-template-info-section__info-row {
   flex-direction: row;
+  align-items: flex-start;
   width: 100%;
   display: flex;
 }
@@ -62,7 +63,7 @@
 
 .doubao-template-info-section__info-value {
   min-width: 0;
-  color: var(--neutral-50);
+  color: var(--neutral-70);
   text-align: right;
   margin-left: 6px;
   font-size: 13px;
@@ -93,9 +94,24 @@
 }
 
 .doubao-template-info-section__summary-content {
-  flex-direction: row;
+  flex-flow: wrap;
+  flex: 1 1 0;
   justify-content: flex-end;
   align-items: center;
+  gap: 0 6px;
+  min-width: 0;
+  max-width: 100%;
+  max-height: 42px;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-template-info-section__fees {
+  flex-direction: row;
+  flex: 0 auto;
+  align-items: center;
+  gap: 0 6px;
+  min-width: 0;
   max-width: 100%;
   display: flex;
   overflow: hidden;
@@ -103,46 +119,40 @@
 
 .doubao-template-info-section__fee {
   min-width: 0;
-  color: var(--neutral-50);
-  flex-shrink: 1;
-  margin-left: 6px;
+  max-width: 100%;
+  color: var(--neutral-70);
+  flex: 0 auto;
   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;
+  flex-direction: row;
+  flex: 0 auto;
   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;
+  overflow: hidden;
 }
 
 .doubao-template-info-section__total-label {
+  min-width: 0;
   max-width: 100%;
   color: var(--neutral-100);
-  flex-shrink: 0;
+  flex: 0 auto;
   font-size: 13px;
   font-weight: 500;
   line-height: 20px;
 }
 
 .doubao-template-info-section__total-price {
+  min-width: 0;
   max-width: 100%;
   color: var(--neutral-100);
-  flex-shrink: 0;
+  flex: 0 auto;
   margin-left: 2px;
   font-size: 15px;
   font-weight: 500;

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

@@ -1,10 +1,14 @@
 import type { TouchEvent } from '@lynx-js/types';
 import type { ReactElement, ReactNode } from 'react';
-import type { TemplateText } from '../../types.js';
+import type { TemplateTagTone, TemplateText } from '../../types.js';
 import './styles.scss';
 export interface TemplateProductSummaryProps {
     /** 商品标题。 */
     title?: string;
+    /** 商品标题前的标签文案。 */
+    tagText?: TemplateText;
+    /** 商品标题标签的色调。 */
+    tagTone?: TemplateTagTone;
     /** 商品规格说明。 */
     spec?: string;
     /** 商品图片地址。 */

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

@@ -1,4 +1,4 @@
-import { TemplateChevronRightIcon } from "../chevron-right-icon/index.js";
+import { Title } from "../../primitives/title/index.js";
 import "./styles.css";
 function isTemplateProductSummaryTextEmpty(content) {
     return null == content || '' === content;
@@ -13,9 +13,11 @@ function TemplateProductSummaryImage(props) {
     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 { title, tagText, tagTone = 'default', 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 titleText = title ?? '';
+    const hasTitle = titleText.length > 0;
+    const hasTag = !isTemplateProductSummaryTextEmpty(tagText);
     const hasPrice = null != pricePrefix && pricePrefix.length > 0 || !isTemplateProductSummaryTextEmpty(price);
     const hasMainLine = hasTitle || hasPrice;
     const hasSpec = null != spec && spec.length > 0;
@@ -27,10 +29,10 @@ function TemplateProductSummary(props) {
       <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"/>}
+                {hasTag && <text className={'highlight' === tagTone ? 'doubao-template-product-summary__tag doubao-template-product-summary__tag--highlight' : 'doubao-template-product-summary__tag'} text-maxline="1">
+                    {tagText}
+                  </text>}
+                <Title text={titleText} showArrow={showChevron}/>
               </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">

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

@@ -49,32 +49,41 @@
   flex-direction: row;
   flex: 1 1 0;
   align-items: center;
+  gap: 4px;
   min-width: 0;
   margin-right: 8px;
   display: flex;
 }
 
-.doubao-template-product-summary__title, .doubao-template-product-summary__price-prefix, .doubao-template-product-summary__price-value, .doubao-template-product-summary__spec, .doubao-template-product-summary__quantity {
+.doubao-template-product-summary__tag {
+  box-sizing: border-box;
+  height: 18px;
+  color: var(--neutral-70);
   text-overflow: ellipsis;
   white-space: nowrap;
+  background-color: var(--bg-base-2-overlay);
+  border-radius: 4px;
+  flex-shrink: 0;
+  padding: 2px 4px;
   font-family: PingFang SC, sans-serif;
+  font-size: 12px;
   font-style: normal;
+  font-weight: 400;
+  line-height: 14px;
   overflow: hidden;
 }
 
-.doubao-template-product-summary__title {
-  min-width: 0;
-  color: var(--neutral-100);
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 24px;
+.doubao-template-product-summary__tag--highlight {
+  color: var(--primary-60);
+  background-color: var(--primary-transparent-1);
 }
 
-.doubao-template-product-summary__chevron {
-  flex-shrink: 0;
-  width: 12px;
-  height: 12px;
-  margin-left: 5px;
+.doubao-template-product-summary__price-prefix, .doubao-template-product-summary__price-value, .doubao-template-product-summary__spec, .doubao-template-product-summary__quantity {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PingFang SC, sans-serif;
+  font-style: normal;
+  overflow: hidden;
 }
 
 .doubao-template-product-summary__price {
@@ -103,15 +112,15 @@
 
 .doubao-template-product-summary__spec {
   min-width: 0;
-  color: var(--neutral-50);
+  color: var(--neutral-70);
   flex: 1 1 0;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 400;
-  line-height: 18px;
+  line-height: 20px;
 }
 
 .doubao-template-product-summary__quantity {
-  color: var(--neutral-50);
+  color: var(--neutral-70);
   flex-shrink: 0;
   margin-left: 8px;
   font-size: 13px;

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

@@ -1,6 +1,6 @@
 import type { TouchEvent } from '@lynx-js/types';
 import type { ReactElement } from 'react';
-import type { TemplateKey, TemplateText } from '../../types.js';
+import type { TemplateKey, TemplateTagTone, TemplateText } from '../../types.js';
 import './styles.scss';
 export interface TemplateRouteSectionProps {
     /** 航程信息列表。 */
@@ -13,6 +13,10 @@ export interface TemplateRouteSectionItem {
     title?: TemplateText;
     /** 航程描述，例如「6月1日 周六 20:50-23:50 CZ0000 经济舱」。 */
     description?: TemplateText;
+    /** 航程标题前的标签文案。 */
+    tagText?: TemplateText;
+    /** 航程标题标签的色调。 */
+    tagTone?: TemplateTagTone;
     /** 是否展示标题右侧箭头。 */
     showChevron?: boolean;
     /** 点击航程项时触发。 */