@doubao-apps/template 0.0.34 → 0.0.35-rc.0

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-rc.0/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-rc.0/assets/single-item-card.png" alt="SingleItemCard 示例" width="400" />
 
 <p />
 
@@ -168,13 +168,53 @@ import { SingleItemCard } from '@doubao-apps/template';
 - `primaryActionText` 和 `secondaryActionText` 可以配置底部操作按钮，不传时不展示操作区。
 - 如果需要完全自定义内容区域，可以传入 `children`，模板会保留标题栏和卡片外壳。
 
+## MediaLayoutCard
+
+`MediaLayoutCard` 是媒体布局卡模板，结构包含应用标题栏、左侧媒体、中间标题与信息行、右侧扩展内容和底部操作按钮，适合需要自定义布局内容的入口卡片。
+
+效果图：
+
+<img src="https://unpkg.com/@doubao-apps/template@0.0.35-rc.0/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` 用于配置底部操作按钮；只传主按钮时展示蓝色全宽按钮，只传次按钮时展示灰色全宽按钮，同时传入时展示左右双按钮。
+- 如果需要完全自定义内容区域，可以传入 `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-rc.0/assets/price-action-list-card.png" alt="PriceActionListCard 示例" width="400" />
 
 <p />
 
@@ -222,7 +262,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-rc.0/assets/task-action-card.png" alt="TaskActionCard 示例" width="400" />
 
 <p />
 
@@ -247,7 +287,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-rc.0/assets/order-card.png" alt="OrderCard 示例" width="400" />
 
 <p />
 
@@ -308,7 +348,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-rc.0/assets/transport-card.png" alt="TransportCard 示例" width="400" />
 
 <p />
 
@@ -343,7 +383,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-rc.0/assets/transport-list-card.png" alt="TransportListCard 示例" width="400" />
 
 <p />
 
@@ -390,7 +430,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-rc.0/assets/ticket-order-card.png" alt="TicketOrderCard 示例" width="400" />
 
 <p />
 

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,54 @@
+import type { CSSProperties, TouchEvent } from '@lynx-js/types';
+import type { ReactElement, ReactNode } from 'react';
+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;
+    /** 次按钮文案。 */
+    secondaryActionText?: string;
+    /** 自定义内容区；传入后不再渲染默认布局。 */
+    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

package/dist/media-layout-card/index.js

@@ -0,0 +1,83 @@
+import { Button, useThemeClassName } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
+import { TemplateActionBar } from "../components/action-bar/index.js";
+import { TemplateTitleBar } from "../components/title-bar/index.js";
+import { TEMPLATE_CHEVRON_RIGHT_ICON_CONTENT } from "../utils/icons.js";
+import "./styles.css";
+const MEDIA_LAYOUT_CARD_INFO_ROW_LIMIT = 2;
+function isMediaLayoutCardNodeEmpty(content) {
+    return null == content || 'boolean' == typeof content || '' === content;
+}
+function renderMediaLayoutCardText(content, className) {
+    if (isMediaLayoutCardNodeEmpty(content)) return null;
+    if ('string' == typeof content || 'number' == typeof content) return <text className={className} text-maxline="1">
+        {content}
+      </text>;
+    return <view className={`${className}-custom`}>{content}</view>;
+}
+function renderMediaLayoutCardTitle(content, showChevron) {
+    const titleNode = renderMediaLayoutCardText(content, 'doubao-media-layout-card__title');
+    if (null == titleNode) return null;
+    return <view className="doubao-media-layout-card__title-row">
+      <view className="doubao-media-layout-card__title-main">{titleNode}</view>
+      {showChevron ? <svg className="doubao-media-layout-card__chevron" content={TEMPLATE_CHEVRON_RIGHT_ICON_CONTENT}/> : null}
+    </view>;
+}
+function MediaLayoutCardMedia(props) {
+    const { media } = props;
+    if (!isMediaLayoutCardNodeEmpty(media)) return <view className="doubao-media-layout-card__media">{media}</view>;
+    return <view className="doubao-media-layout-card__media"/>;
+}
+function getMediaLayoutCardInfoContent(row) {
+    return isMediaLayoutCardNodeEmpty(row.content) ? row.text : row.content;
+}
+function renderMediaLayoutCardInfoRow(row, index) {
+    const content = getMediaLayoutCardInfoContent(row);
+    if (isMediaLayoutCardNodeEmpty(content)) return null;
+    return <view className="doubao-media-layout-card__info-row" key={row.key ?? index}>
+      {renderMediaLayoutCardText(content, 'doubao-media-layout-card__info-text')}
+    </view>;
+}
+function renderMediaLayoutCardExtra(props) {
+    const { extra, extraActionText, onExtraActionClick } = props;
+    if (!isMediaLayoutCardNodeEmpty(extra)) {
+        if ('string' == typeof extra || 'number' == typeof extra) return <view className="doubao-media-layout-card__extra">
+          <text className="doubao-media-layout-card__extra-text" text-maxline="1">
+            {extra}
+          </text>
+        </view>;
+        return <view className="doubao-media-layout-card__extra">{extra}</view>;
+    }
+    if (null != extraActionText && extraActionText.length > 0) return <view className="doubao-media-layout-card__extra">
+        <Button className="doubao-media-layout-card__extra-action" type="default" text={extraActionText} onClick={onExtraActionClick}/>
+      </view>;
+    return null;
+}
+function MediaLayoutCard(props) {
+    const { moreText, showMore = true, title, showChevron = true, media, infoRows = [], extra, extraActionText, primaryActionText, secondaryActionText, children, className, style, onClick, onMoreClick, onContentClick, onExtraActionClick, onPrimaryActionClick, onSecondaryActionClick } = props;
+    const hasCustomContent = !isMediaLayoutCardNodeEmpty(children);
+    const titleNode = renderMediaLayoutCardTitle(title, showChevron);
+    const infoRowNodes = infoRows.map((row, index)=>renderMediaLayoutCardInfoRow(row, index)).filter((node)=>null != node).slice(0, MEDIA_LAYOUT_CARD_INFO_ROW_LIMIT);
+    const extraNode = renderMediaLayoutCardExtra({
+        extra,
+        extraActionText,
+        onExtraActionClick
+    });
+    return <view className={useThemeClassName(clsx('doubao-media-layout-card', className))} style={style} bindtap={onClick} clip-radius="true">
+      <TemplateTitleBar moreText={moreText} showMore={showMore} onMoreClick={onMoreClick}/>
+      <view className="doubao-media-layout-card__body" {...null != onContentClick ? {
+        catchtap: onContentClick
+    } : {}}>
+        {hasCustomContent ? children : <view className="doubao-media-layout-card__layout">
+            <MediaLayoutCardMedia media={media}/>
+            <view className="doubao-media-layout-card__main">
+              {titleNode}
+              {infoRowNodes}
+            </view>
+            {extraNode}
+          </view>}
+      </view>
+      <TemplateActionBar className="doubao-media-layout-card__action-bar" primaryActionText={primaryActionText} secondaryActionText={secondaryActionText} onPrimaryActionClick={onPrimaryActionClick} onSecondaryActionClick={onSecondaryActionClick}/>
+    </view>;
+}
+export { MediaLayoutCard };

package/dist/media-layout-card/styles.css

@@ -0,0 +1,131 @@
+.doubao-media-layout-card {
+  box-sizing: border-box;
+  background-color: var(--bg-base-1);
+  border: 1px solid var(--bg-base-2-overlay);
+  border-radius: 8px;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-media-layout-card__body {
+  box-sizing: border-box;
+  background-color: var(--bg-base-1);
+  width: 100%;
+  padding: 12px;
+}
+
+.doubao-media-layout-card__layout {
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
+.doubao-media-layout-card__media {
+  background-color: var(--bg-base-1-overlay);
+  border-radius: 8px;
+  flex-shrink: 0;
+  width: 96px;
+  height: 96px;
+  overflow: hidden;
+}
+
+.doubao-media-layout-card__main {
+  flex-direction: column;
+  flex: 1 1 0;
+  align-items: flex-start;
+  min-width: 0;
+  margin-left: 12px;
+  display: flex;
+}
+
+.doubao-media-layout-card__title, .doubao-media-layout-card__title-custom, .doubao-media-layout-card__info-text, .doubao-media-layout-card__info-text-custom, .doubao-media-layout-card__extra-text {
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.doubao-media-layout-card__title-row {
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
+.doubao-media-layout-card__title-main {
+  flex-direction: row;
+  align-items: center;
+  max-width: 100%;
+  display: flex;
+}
+
+.doubao-media-layout-card__title {
+  color: var(--neutral-100);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PingFang SC, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.doubao-media-layout-card__chevron {
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  margin-left: 4px;
+}
+
+.doubao-media-layout-card__title-custom, .doubao-media-layout-card__info-text-custom {
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
+.doubao-media-layout-card__info-row {
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  margin-top: 2px;
+  padding: 3px 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-media-layout-card__info-text, .doubao-media-layout-card__extra-text {
+  color: var(--neutral-50);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PingFang SC, sans-serif;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.doubao-media-layout-card__extra {
+  flex-direction: row;
+  flex-shrink: 0;
+  align-items: center;
+  margin-left: auto;
+  display: flex;
+}
+
+.doubao-media-layout-card__extra-action {
+  --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: 16px;
+  --doubao-button-default-line-height: 22px;
+  --doubao-button-default-bg: var(--bg-base-2-overlay);
+  --doubao-button-default-text: var(--neutral-100);
+  flex-shrink: 0;
+  width: 80px;
+  height: 44px;
+}
+