@doubao-dev/template 0.0.38-canary-22dd4cbf-20260720020201

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

@@ -0,0 +1,121 @@
+.doubao-template-product-summary {
+  box-sizing: border-box;
+  background-color: var(--bg-base-1);
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  padding: 12px;
+  display: flex;
+}
+
+.doubao-template-product-summary__image {
+  background-color: var(--bg-base-1-overlay);
+  border-radius: 5px;
+  flex-shrink: 0;
+  width: 80px;
+  height: 80px;
+  overflow: hidden;
+}
+
+.doubao-template-product-summary__content {
+  flex-direction: column;
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+}
+
+.doubao-template-product-summary__content--with-image {
+  margin-left: 12px;
+}
+
+.doubao-template-product-summary__line-main, .doubao-template-product-summary__line-secondary {
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  display: flex;
+}
+
+.doubao-template-product-summary__line-main {
+  height: 24px;
+}
+
+.doubao-template-product-summary__line-secondary {
+  height: 20px;
+  margin-top: 2px;
+}
+
+.doubao-template-product-summary__title-wrap {
+  flex-direction: row;
+  flex: 1 1 0;
+  align-items: center;
+  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 {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PingFang SC, sans-serif;
+  font-style: normal;
+  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__chevron {
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  margin-left: 5px;
+}
+
+.doubao-template-product-summary__price {
+  color: var(--neutral-100);
+  white-space: nowrap;
+  flex-direction: row;
+  flex-shrink: 0;
+  align-items: flex-end;
+  font-family: PingFang SC, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  display: flex;
+}
+
+.doubao-template-product-summary__price-prefix {
+  width: 22px;
+  font-size: 11px;
+  line-height: 17px;
+}
+
+.doubao-template-product-summary__price-value {
+  margin-left: 2px;
+  font-size: 13px;
+  line-height: 19px;
+}
+
+.doubao-template-product-summary__spec {
+  min-width: 0;
+  color: var(--neutral-50);
+  flex: 1 1 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+}
+
+.doubao-template-product-summary__quantity {
+  color: var(--neutral-50);
+  flex-shrink: 0;
+  margin-left: 8px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
+}
+

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

@@ -0,0 +1,23 @@
+import type { TouchEvent } from '@lynx-js/types';
+import type { ReactElement } from 'react';
+import type { TemplateKey, TemplateText } from '../../types.js';
+import './styles.scss';
+export interface TemplateRouteSectionProps {
+    /** 航程信息列表。 */
+    items?: TemplateRouteSectionItem[];
+}
+export interface TemplateRouteSectionItem {
+    /** 航程项唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+    /** 航程标题，例如「出发地 - 到达地」。 */
+    title?: TemplateText;
+    /** 航程描述，例如「6月1日 周六 20:50-23:50 CZ0000 经济舱」。 */
+    description?: TemplateText;
+    /** 是否展示标题右侧箭头。 */
+    showChevron?: boolean;
+    /** 点击航程项时触发。 */
+    onClick?: (event: TouchEvent) => void;
+}
+export declare function hasTemplateRouteSectionItems(items?: TemplateRouteSectionItem[]): boolean;
+export declare function TemplateRouteSection(props: TemplateRouteSectionProps): ReactElement | null;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,39 @@
+import { TemplateChevronRightIcon } from "../chevron-right-icon/index.js";
+import "./styles.css";
+function isTemplateRouteSectionTextEmpty(content) {
+    return null == content || '' === content;
+}
+function renderTemplateRouteSectionTextField(textContent, textClassName) {
+    if (isTemplateRouteSectionTextEmpty(textContent)) return null;
+    return <text className={textClassName} text-maxline="1">
+      {textContent}
+    </text>;
+}
+function hasTemplateRouteSectionItemContent(item) {
+    return !isTemplateRouteSectionTextEmpty(item.title) || !isTemplateRouteSectionTextEmpty(item.description);
+}
+function hasTemplateRouteSectionItems(items) {
+    return items?.some(hasTemplateRouteSectionItemContent) ?? false;
+}
+function renderTemplateRouteSectionItem(item, index) {
+    if (!hasTemplateRouteSectionItemContent(item)) return null;
+    const titleNode = renderTemplateRouteSectionTextField(item.title, 'doubao-template-route-section__title-text');
+    const descriptionNode = renderTemplateRouteSectionTextField(item.description, "doubao-template-route-section__description");
+    const showChevron = false !== item.showChevron && titleNode;
+    return <view className="doubao-template-route-section__item" key={item.key ?? index} {...null != item.onClick ? {
+        catchtap: item.onClick
+    } : {}}>
+      {titleNode && <view className="doubao-template-route-section__title">
+          {titleNode}
+          {showChevron && <TemplateChevronRightIcon className="doubao-template-route-section__chevron"/>}
+        </view>}
+      {descriptionNode}
+    </view>;
+}
+function TemplateRouteSection(props) {
+    const { items = [] } = props;
+    const routeNodes = items.map(renderTemplateRouteSectionItem).filter((node)=>null != node);
+    if (0 === routeNodes.length) return null;
+    return <view className="doubao-template-route-section">{routeNodes}</view>;
+}
+export { TemplateRouteSection, hasTemplateRouteSectionItems };

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

@@ -0,0 +1,54 @@
+.doubao-template-route-section {
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
+.doubao-template-route-section__item {
+  width: 100%;
+  padding: 12px;
+}
+
+.doubao-template-route-section__title {
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: 24px;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-template-route-section__title-text, .doubao-template-route-section__description {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PingFang SC, sans-serif;
+  font-style: normal;
+  overflow: hidden;
+}
+
+.doubao-template-route-section__title-text {
+  min-width: 0;
+  color: var(--neutral-100);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.doubao-template-route-section__chevron {
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  margin-left: 5px;
+}
+
+.doubao-template-route-section__description {
+  width: 100%;
+  height: 20px;
+  color: var(--neutral-50);
+  margin-top: 2px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
+}
+

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

@@ -0,0 +1,31 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { TemplateText } from '../../types.js';
+import './styles.scss';
+export interface TemplateTransportSummaryProps {
+    /** 行程标题块内容。 */
+    title?: ReactNode;
+    /** 出发点主信息文案。 */
+    departureMain?: TemplateText;
+    /** 出发点补充信息文案。 */
+    departureSub?: TemplateText;
+    /** 中转区域整体块内容；优先级高于 transferTop、showTransferDot 和 transferBottom。 */
+    transfer?: ReactNode;
+    /** 中转区域上方文案。 */
+    transferTop?: TemplateText;
+    /** 是否展示中转箭头中间圆点。 */
+    showTransferDot?: boolean;
+    /** 中转区域下方文案。 */
+    transferBottom?: TemplateText;
+    /** 到达点主信息文案。 */
+    arrivalMain?: TemplateText;
+    /** 到达点日期偏移文案，例如 '+1'。 */
+    arrivalDayOffset?: TemplateText;
+    /** 到达点补充信息文案。 */
+    arrivalSub?: TemplateText;
+    /** 价格块内容。 */
+    price?: ReactNode;
+    /** 根节点自定义类名。 */
+    className?: string;
+}
+export declare function TemplateTransportSummary(props: TemplateTransportSummaryProps): ReactElement | null;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,109 @@
+import { useTheme } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
+import "./styles.css";
+function getTransportSummaryArrowSvgContent(showDot, isDark) {
+    const arrowColor = isDark ? '#303030' : '#E5E5E5';
+    const dotColor = isDark ? '#666666' : '#CCCCCC';
+    const dotStrokeColor = isDark ? '#000000' : '#FFFFFF';
+    const dot = showDot ? `<circle cx="18" cy="2.5" r="2.5" fill="${dotColor}" stroke="${dotStrokeColor}"/>` : '';
+    return `<svg width="36" height="6" viewBox="0 0 36 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.3024 2.62395C35.4852 2.72251 35.4152 3 35.2075 3H0.200001C0.0895436 3 0 2.91046 0 2.8V2.1667C0 2.05624 0.0895431 1.9667 0.2 1.9667H30.4344V0.335011C30.4344 0.183637 30.5961 0.0871336 30.7293 0.158959L35.3024 2.62395Z" fill="${arrowColor}"/>
+${dot}
+</svg>`;
+}
+function isTemplateTransportSummaryNodeEmpty(content) {
+    return null == content || 'boolean' == typeof content || '' === content;
+}
+function isTemplateTransportSummaryTextEmpty(content) {
+    return null == content || '' === content;
+}
+function renderTemplateTransportSummaryNodeField(content, wrapperClassName, textClassName) {
+    if (isTemplateTransportSummaryNodeEmpty(content)) return null;
+    return <view className={wrapperClassName}>
+      {'string' == typeof content || 'number' == typeof content ? <text className={textClassName} text-maxline="1">
+          {content}
+        </text> : content}
+    </view>;
+}
+function renderTemplateTransportSummaryTextField(content, wrapperClassName, textClassName) {
+    if (isTemplateTransportSummaryTextEmpty(content)) return null;
+    return <view className={wrapperClassName}>
+      <text className={textClassName} text-maxline="1">
+        {content}
+      </text>
+    </view>;
+}
+function TemplateTransportSummaryArrowIcon({ showDot }) {
+    const theme = useTheme();
+    return <svg className="doubao-template-transport-summary__transfer-arrow-icon" content={getTransportSummaryArrowSvgContent(Boolean(showDot), 'dark' === theme)}/>;
+}
+function renderTemplateTransportSummaryPoint({ mainText, subText, isArrival }) {
+    if (isTemplateTransportSummaryTextEmpty(mainText) && isTemplateTransportSummaryTextEmpty(subText)) return null;
+    return <view className={clsx('doubao-template-transport-summary__route-point', isArrival && 'doubao-template-transport-summary__route-point--arrival')}>
+      {renderTemplateTransportSummaryTextField(mainText, 'doubao-template-transport-summary__route-point-main', 'doubao-template-transport-summary__route-point-main-text')}
+      {renderTemplateTransportSummaryTextField(subText, 'doubao-template-transport-summary__route-point-sub', 'doubao-template-transport-summary__route-point-sub-text')}
+    </view>;
+}
+function renderTemplateTransportSummaryArrivalDayOffset(content) {
+    if (isTemplateTransportSummaryTextEmpty(content)) return null;
+    return <view className="doubao-template-transport-summary__arrival-day-offset">
+      <text className="doubao-template-transport-summary__arrival-day-offset-text" text-maxline="1">
+        {content}
+      </text>
+    </view>;
+}
+function renderTemplateTransportSummaryTransfer({ content, topText, showDot, bottomText }) {
+    if (void 0 !== content) {
+        if (isTemplateTransportSummaryNodeEmpty(content)) return null;
+        if ('string' == typeof content || 'number' == typeof content) return renderTemplateTransportSummaryNodeField(content, 'doubao-template-transport-summary__transfer', 'doubao-template-transport-summary__transfer-label-text');
+        return content;
+    }
+    if (isTemplateTransportSummaryTextEmpty(topText) && !showDot && isTemplateTransportSummaryTextEmpty(bottomText)) return null;
+    return <view className="doubao-template-transport-summary__transfer">
+      <view className="doubao-template-transport-summary__transfer-inner">
+        {renderTemplateTransportSummaryTextField(topText, 'doubao-template-transport-summary__transfer-label', 'doubao-template-transport-summary__transfer-label-text')}
+        <view className="doubao-template-transport-summary__transfer-arrow">
+          <TemplateTransportSummaryArrowIcon showDot={showDot}/>
+        </view>
+        {renderTemplateTransportSummaryTextField(bottomText, 'doubao-template-transport-summary__transfer-label', 'doubao-template-transport-summary__transfer-label-text')}
+      </view>
+    </view>;
+}
+function TemplateTransportSummary(props) {
+    const { title, departureMain, departureSub, transfer, transferTop, showTransferDot, transferBottom, arrivalMain, arrivalDayOffset, arrivalSub, price, className } = props;
+    const departureNode = renderTemplateTransportSummaryPoint({
+        mainText: departureMain,
+        subText: departureSub
+    });
+    const transferNode = renderTemplateTransportSummaryTransfer({
+        content: transfer,
+        topText: transferTop,
+        showDot: showTransferDot,
+        bottomText: transferBottom
+    });
+    const arrivalPointNode = renderTemplateTransportSummaryPoint({
+        mainText: arrivalMain,
+        subText: arrivalSub,
+        isArrival: true
+    });
+    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 hasRoute = Boolean(departureNode || transferNode || arrivalNode);
+    const hasRouteRow = Boolean(hasRoute || priceNode);
+    if (null == titleNode && !hasRouteRow) return null;
+    return <view className={clsx('doubao-template-transport-summary', className)}>
+      {titleNode}
+      {hasRouteRow && <view className="doubao-template-transport-summary__route-row">
+          {hasRoute && <view className="doubao-template-transport-summary__route">
+              {departureNode}
+              {transferNode}
+              {arrivalNode}
+              {arrivalDayOffsetNode}
+            </view>}
+          {priceNode}
+        </view>}
+    </view>;
+}
+export { TemplateTransportSummary };

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

@@ -0,0 +1,214 @@
+.doubao-template-transport-summary {
+  box-sizing: border-box;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 100%;
+  min-width: 0;
+  padding: 12px 12px 16px;
+  display: flex;
+}
+
+.doubao-template-transport-summary__title, .doubao-template-transport-summary__route-point-main, .doubao-template-transport-summary__route-point-sub, .doubao-template-transport-summary__transfer-label, .doubao-template-transport-summary__price {
+  flex-direction: row;
+  flex-shrink: 0;
+  align-items: center;
+  min-width: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-template-transport-summary__title {
+  box-sizing: border-box;
+  max-width: 100%;
+  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 {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PingFang SC, sans-serif;
+  font-style: normal;
+  overflow: hidden;
+}
+
+.doubao-template-transport-summary__title-text {
+  color: var(--neutral-100);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.doubao-template-transport-summary__route-row {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: 46px;
+  margin-top: 2px;
+  display: flex;
+  position: relative;
+}
+
+.doubao-template-transport-summary__route {
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: space-between;
+  align-items: center;
+  width: 200px;
+  min-width: 0;
+  height: 46px;
+  display: flex;
+}
+
+.doubao-template-transport-summary__route-point {
+  flex-direction: column;
+  flex-shrink: 0;
+  justify-content: center;
+  width: 66px;
+  min-width: 0;
+  height: 42px;
+  display: flex;
+}
+
+.doubao-template-transport-summary__route-point--arrival {
+  align-items: flex-end;
+}
+
+.doubao-template-transport-summary__arrival {
+  flex-shrink: 0;
+  width: 66px;
+  min-width: 0;
+  height: 42px;
+  display: flex;
+  position: relative;
+}
+
+.doubao-template-transport-summary__arrival .doubao-template-transport-summary__route-point {
+  width: 100%;
+  height: 42px;
+}
+
+.doubao-template-transport-summary__route-point-main, .doubao-template-transport-summary__route-point-sub {
+  width: 100%;
+}
+
+.doubao-template-transport-summary__route-point--arrival .doubao-template-transport-summary__route-point-main, .doubao-template-transport-summary__route-point--arrival .doubao-template-transport-summary__route-point-sub {
+  justify-content: flex-end;
+}
+
+.doubao-template-transport-summary__route-point--arrival .doubao-template-transport-summary__route-point-main-text, .doubao-template-transport-summary__route-point--arrival .doubao-template-transport-summary__route-point-sub-text {
+  text-align: right;
+}
+
+.doubao-template-transport-summary__route-point-main {
+  height: 22px;
+}
+
+.doubao-template-transport-summary__route-point-sub {
+  height: 16px;
+  margin-top: 2px;
+}
+
+.doubao-template-transport-summary__route-point-main-text {
+  min-width: 0;
+  color: var(--neutral-100);
+  font-family: SF Pro, sans-serif;
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+.doubao-template-transport-summary__arrival-day-offset {
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  height: 14px;
+  display: flex;
+  position: absolute;
+  top: 2px;
+  left: 202px;
+}
+
+.doubao-template-transport-summary__arrival-day-offset-text {
+  color: var(--neutral-100);
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 14px;
+}
+
+.doubao-template-transport-summary__route-point-sub-text {
+  color: var(--neutral-70);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+}
+
+.doubao-template-transport-summary__transfer-label-text {
+  color: var(--neutral-50);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 14px;
+}
+
+.doubao-template-transport-summary__transfer {
+  box-sizing: border-box;
+  flex-direction: row;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  width: 56px;
+  min-width: 0;
+  height: 42px;
+  display: flex;
+}
+
+.doubao-template-transport-summary__transfer-inner {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 56px;
+  min-width: 0;
+  height: 38px;
+  display: flex;
+}
+
+.doubao-template-transport-summary__transfer-label {
+  height: 14px;
+}
+
+.doubao-template-transport-summary__transfer-arrow {
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 36px;
+  height: 6px;
+  display: flex;
+}
+
+.doubao-template-transport-summary__transfer-arrow-icon {
+  flex-shrink: 0;
+  width: 36px;
+  height: 6px;
+}
+
+.doubao-template-transport-summary__price {
+  box-sizing: border-box;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  width: 88px;
+  height: 42px;
+  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;
+}
+

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

@@ -0,0 +1,45 @@
+import type { CSSProperties, TouchEvent } from '@lynx-js/types';
+import type { ReactElement, ReactNode } from 'react';
+import { type TemplateExtraAction } from '../components/extra-action/index.js';
+import { type TemplateCardFooterProps } from '../components/footer/index.js';
+import { type TemplateCardHeaderProps } from '../components/header/index.js';
+import type { TemplateKey } from '../types.js';
+import './styles.scss';
+export interface ContentCardProps {
+    /** 标题栏配置。 */
+    header?: TemplateCardHeaderProps;
+    /** 列表内容数据。 */
+    items?: ContentCardItem[];
+    /** 底部操作区配置。 */
+    footer?: TemplateCardFooterProps;
+    /** 自定义列表内容区域；传入后不再渲染默认列表内容，标题栏和底部操作区仍由模板渲染。 */
+    children?: ReactNode;
+    /** 卡片根节点自定义类名。 */
+    className?: string;
+    /** 卡片根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击卡片根节点时触发。 */
+    onClick?: (event: TouchEvent) => void;
+}
+export interface ContentCardItem {
+    /** 列表项唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+    /** 列表项标题。字符串会按默认单行标题样式渲染，传入节点时直接渲染自定义内容。 */
+    title?: ReactNode;
+    /** 列表项副标题。字符串会按默认单行副标题样式渲染，传入节点时直接渲染自定义内容。 */
+    subtitle?: ReactNode;
+    /** 列表项左侧缩略视觉内容。 */
+    thumbnail?: ReactNode;
+    /** 列表项自定义内容；传入后不再渲染默认图文结构。 */
+    children?: ReactNode;
+    /** 列表项右侧操作区；传标准控件配置时使用模板样式，传节点时直接渲染自定义内容。 */
+    action?: TemplateExtraAction | ReactNode;
+    /** 列表项根节点自定义类名。 */
+    className?: string;
+    /** 列表项根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击列表项时触发。 */
+    onClick?: (event: TouchEvent) => void;
+}
+export declare function ContentCard(props: ContentCardProps): ReactElement;
+//# sourceMappingURL=index.d.ts.map