@doubao-dev/template 0.1.1 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -6
- package/dist/ask-human-card/index.d.ts +9 -0
- package/dist/ask-human-card/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -226,7 +226,7 @@ import { MapCard } from '@doubao-dev/template';
|
|
|
226
226
|
|
|
227
227
|
## ContentCard
|
|
228
228
|
|
|
229
|
-
<img src="https://unpkg.com/@doubao-dev/template@0.
|
|
229
|
+
<img src="https://unpkg.com/@doubao-dev/template@0.2.1/assets/content-card.png" alt="ContentCard 示例" width="400" />
|
|
230
230
|
|
|
231
231
|
通用列表卡,由标题栏、列表内容和底部操作区组成,适合商品、服务、内容入口等可重复条目。
|
|
232
232
|
|
|
@@ -268,7 +268,7 @@ import { ContentCard } from '@doubao-dev/template';
|
|
|
268
268
|
|
|
269
269
|
## PriceActionCard
|
|
270
270
|
|
|
271
|
-
<img src="https://unpkg.com/@doubao-dev/template@0.
|
|
271
|
+
<img src="https://unpkg.com/@doubao-dev/template@0.2.1/assets/price-action-card.png" alt="PriceActionCard 示例" width="400" />
|
|
272
272
|
|
|
273
273
|
价格操作卡,由多条"价格 + 信息 + 右侧按钮"组成,适合报价、权益、服务方案等结果列表。
|
|
274
274
|
|
|
@@ -301,7 +301,7 @@ import { PriceActionCard } from '@doubao-dev/template';
|
|
|
301
301
|
|
|
302
302
|
## CheckoutCard
|
|
303
303
|
|
|
304
|
-
<img src="https://unpkg.com/@doubao-dev/template@0.
|
|
304
|
+
<img src="https://unpkg.com/@doubao-dev/template@0.2.1/assets/checkout-card.png" alt="CheckoutCard 示例" width="400" />
|
|
305
305
|
|
|
306
306
|
通用提单卡,由商品摘要、提单信息、费用汇总和底部操作区组成,适合下单确认、支付确认等场景。
|
|
307
307
|
|
|
@@ -352,7 +352,7 @@ import { CheckoutCard } from '@doubao-dev/template';
|
|
|
352
352
|
|
|
353
353
|
## TicketOrderCard
|
|
354
354
|
|
|
355
|
-
<img src="https://unpkg.com/@doubao-dev/template@0.
|
|
355
|
+
<img src="https://unpkg.com/@doubao-dev/template@0.2.1/assets/ticket-checkout-card.png" alt="TicketOrderCard 示例" width="400" />
|
|
356
356
|
|
|
357
357
|
> **已废弃:** 请使用 `CheckoutCard`。`TicketOrderCard` 仅为兼容现有代码保留。
|
|
358
358
|
|
|
@@ -399,7 +399,7 @@ import { TicketOrderCard } from '@doubao-dev/template';
|
|
|
399
399
|
|
|
400
400
|
## TransitCard
|
|
401
401
|
|
|
402
|
-
<img src="https://unpkg.com/@doubao-dev/template@0.
|
|
402
|
+
<img src="https://unpkg.com/@doubao-dev/template@0.2.1/assets/transit-card.png" alt="TransitCard 示例" width="400" />
|
|
403
403
|
|
|
404
404
|
交通票务列表卡,由多条出发、中转、到达和价格信息组成,适合展示机票、火车票、大巴等推荐列表。
|
|
405
405
|
|
|
@@ -447,7 +447,7 @@ import { TransitCard } from '@doubao-dev/template';
|
|
|
447
447
|
|
|
448
448
|
## AskHumanCard
|
|
449
449
|
|
|
450
|
-
<img src="https://unpkg.com/@doubao-dev/template@0.
|
|
450
|
+
<img src="https://unpkg.com/@doubao-dev/template@0.2.1/assets/ask-human-card.png" alt="AskHumanCard 示例" width="400" />
|
|
451
451
|
|
|
452
452
|
人工确认选项卡,由一组选项组成,适合让用户在多个候选项中确认选择。
|
|
453
453
|
|
|
@@ -463,6 +463,14 @@ import { AskHumanCard } from '@doubao-dev/template';
|
|
|
463
463
|
text: '都不是',
|
|
464
464
|
showArrow: 'right',
|
|
465
465
|
onClick: () => console.log('skip')
|
|
466
|
+
},
|
|
467
|
+
{
|
|
468
|
+
text: '打开外部应用',
|
|
469
|
+
showArrow: 'right',
|
|
470
|
+
openType: 'launchApp',
|
|
471
|
+
launchAppUrl: 'your-app://path',
|
|
472
|
+
onLaunchApp: (result) => console.log('launch app success', result),
|
|
473
|
+
onLaunchAppError: (error) => console.error('launch app failed', error)
|
|
466
474
|
}
|
|
467
475
|
]}
|
|
468
476
|
/>
|
|
@@ -472,3 +480,4 @@ import { AskHumanCard } from '@doubao-dev/template';
|
|
|
472
480
|
|
|
473
481
|
- `items` 配置选项列表,选项文案通过 `text` 设置。
|
|
474
482
|
- `items[].showArrow` 支持 `'left'`、`'right'`、`'none'`,默认不展示;跳过、固定跳转等入口也通过 `items` 表达。
|
|
483
|
+
- 设置 `items[].openType` 为 `'launchApp'` 并传入 `launchAppUrl`,可以通过 deeplink 跳转外部应用;跳转结果分别通过 `onLaunchApp` 和 `onLaunchAppError` 回调。
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type LaunchAppResult } from '@byted-doubao-apps/components';
|
|
1
2
|
import type { CSSProperties, TouchEvent } from '@lynx-js/types';
|
|
2
3
|
import { type ReactElement } from 'react';
|
|
3
4
|
import type { TemplateKey, TemplateText } from '../types.js';
|
|
@@ -29,6 +30,10 @@ export interface AskHumanCardItem {
|
|
|
29
30
|
text?: TemplateText;
|
|
30
31
|
/** 是否显示加载状态;为 true 时选项内展示 loading 动画并禁用点击。 */
|
|
31
32
|
loading?: boolean;
|
|
33
|
+
/** 开放能力类型;`'launchApp'` 用于跳转外部应用。 */
|
|
34
|
+
openType?: 'launchApp';
|
|
35
|
+
/** 跳转外部应用的 deeplink URL,只在 `openType="launchApp"` 时有效。 */
|
|
36
|
+
launchAppUrl?: string;
|
|
32
37
|
/** 箭头展示位置;默认 `'none'` 不展示。 */
|
|
33
38
|
showArrow?: AskHumanCardArrowPosition;
|
|
34
39
|
/** 选项根节点自定义类名。 */
|
|
@@ -37,6 +42,10 @@ export interface AskHumanCardItem {
|
|
|
37
42
|
style?: CSSProperties;
|
|
38
43
|
/** 点击选项时触发。 */
|
|
39
44
|
onClick?: (event?: TouchEvent) => void;
|
|
45
|
+
/** 跳转外部应用成功时触发,只在 `openType="launchApp"` 时有效。 */
|
|
46
|
+
onLaunchApp?: (result: LaunchAppResult) => void;
|
|
47
|
+
/** 跳转外部应用失败时触发,只在 `openType="launchApp"` 时有效。 */
|
|
48
|
+
onLaunchAppError?: (error: unknown) => void;
|
|
40
49
|
}
|
|
41
50
|
export declare function AskHumanCard(props: AskHumanCardProps): ReactElement;
|
|
42
51
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -23,7 +23,7 @@ function renderAskHumanCardItem({ item, index, optionBg, arrowColor }) {
|
|
|
23
23
|
}, item.className)} style={{
|
|
24
24
|
backgroundColor: optionBg,
|
|
25
25
|
...item.style
|
|
26
|
-
}} type="default" loading={isLoading} onClick={(event)=>{
|
|
26
|
+
}} type="default" loading={isLoading} openType={item.openType} launchAppUrl={item.launchAppUrl} onLaunchApp={item.onLaunchApp} onLaunchAppError={item.onLaunchAppError} onClick={(event)=>{
|
|
27
27
|
reportAskHumanCardClick();
|
|
28
28
|
item.onClick?.(event);
|
|
29
29
|
}}>
|