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

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.
Files changed (20) hide show
  1. package/README.md +19 -9
  2. package/dist/components/action-bar/index.d.ts +6 -0
  3. package/dist/components/action-bar/index.js +3 -3
  4. package/dist/components/action-bar/styles.css +15 -15
  5. package/dist/components/info-section/styles.css +25 -25
  6. package/dist/components/product-summary/styles.css +35 -35
  7. package/dist/components/route-section/styles.css +18 -18
  8. package/dist/media-layout-card/index.d.ts +5 -0
  9. package/dist/media-layout-card/index.js +2 -2
  10. package/dist/order-card/index.d.ts +5 -0
  11. package/dist/order-card/index.js +2 -2
  12. package/dist/single-item-card/index.d.ts +5 -0
  13. package/dist/single-item-card/index.js +2 -2
  14. package/dist/single-item-card/styles.css +2 -2
  15. package/dist/ticket-order-card/index.d.ts +5 -0
  16. package/dist/ticket-order-card/index.js +2 -2
  17. package/dist/transport-list-card/styles.css +6 -6
  18. package/dist/tsconfig.tsbuildinfo +1 -1
  19. package/dist/utils/app-info.js +4 -2
  20. package/package.json +1 -1
package/README.md CHANGED
@@ -38,7 +38,7 @@ import { ListCard } from '@doubao-apps/template';
38
38
 
39
39
  效果图：
40
40
 
41
- <img src="https://unpkg.com/@doubao-apps/template@0.0.35-rc.0/assets/ask_human.png" alt="AskHumanCard 示例" width="400" />
41
+ <img src="https://unpkg.com/@doubao-apps/template@0.0.35/assets/ask_human.png" alt="AskHumanCard 示例" width="400" />
42
42
 
43
43
  <p />
44
44
 
@@ -127,7 +127,7 @@ import { ListCard } from '@doubao-apps/template';
127
127
 
128
128
  效果图：
129
129
 
130
- <img src="https://unpkg.com/@doubao-apps/template@0.0.35-rc.0/assets/single-item-card.png" alt="SingleItemCard 示例" width="400" />
130
+ <img src="https://unpkg.com/@doubao-apps/template@0.0.35/assets/single-item-card.png" alt="SingleItemCard 示例" width="400" />
131
131
 
132
132
  <p />
133
133
 
@@ -166,6 +166,7 @@ import { SingleItemCard } from '@doubao-apps/template';
166
166
  - `pricePrefix`、`price` 和 `quantity` 用于配置商品操作态；不传时展示基础单项态。
167
167
  - `image` 可以传入自定义图片节点，优先级高于 `imageSrc`。
168
168
  - `primaryActionText` 和 `secondaryActionText` 可以配置底部操作按钮，不传时不展示操作区。
169
+ - 底部主/次按钮支持通过 `primaryActionButtonProps` 和 `secondaryActionButtonProps` 配置禁用、加载和点击节流状态。
169
170
  - 如果需要完全自定义内容区域，可以传入 `children`，模板会保留标题栏和卡片外壳。
170
171
 
171
172
  ## MediaLayoutCard
@@ -174,7 +175,7 @@ import { SingleItemCard } from '@doubao-apps/template';
174
175
 
175
176
  效果图：
176
177
 
177
- <img src="https://unpkg.com/@doubao-apps/template@0.0.35-rc.0/assets/media-layout-card.png" alt="SingleItemCard 示例" width="400" />
178
+ <img src="https://unpkg.com/@doubao-apps/template@0.0.35/assets/media-layout-card.png" alt="SingleItemCard 示例" width="400" />
178
179
 
179
180
  <p />
180
181
 
@@ -206,6 +207,7 @@ import { MediaLayoutCard } from '@doubao-apps/template';
206
207
  - `infoRows` 最多展示前 2 行；纯文字可使用 `text`，需要自定义节点时使用 `content`。
207
208
  - `extra` 用于配置右侧扩展内容，例如价格、标签、状态或自定义操作区。
208
209
  - `primaryActionText` 和 `secondaryActionText` 用于配置底部操作按钮；只传主按钮时展示蓝色全宽按钮，只传次按钮时展示灰色全宽按钮，同时传入时展示左右双按钮。
210
+ - 底部主/次按钮支持通过 `primaryActionButtonProps` 和 `secondaryActionButtonProps` 配置禁用、加载和点击节流状态。
209
211
  - 如果需要完全自定义内容区域，可以传入 `children`，模板会保留标题栏和底部操作区。
210
212
 
211
213
  ## PriceActionListCard
@@ -214,7 +216,7 @@ import { MediaLayoutCard } from '@doubao-apps/template';
214
216
 
215
217
  效果图：
216
218
 
217
- <img src="https://unpkg.com/@doubao-apps/template@0.0.35-rc.0/assets/price-action-list-card.png" alt="PriceActionListCard 示例" width="400" />
219
+ <img src="https://unpkg.com/@doubao-apps/template@0.0.35/assets/price-action-list-card.png" alt="PriceActionListCard 示例" width="400" />
218
220
 
219
221
  <p />
220
222
 
@@ -262,7 +264,7 @@ import { PriceActionListCard } from '@doubao-apps/template';
262
264
 
263
265
  效果图：
264
266
 
265
- <img src="https://unpkg.com/@doubao-apps/template@0.0.35-rc.0/assets/task-action-card.png" alt="TaskActionCard 示例" width="400" />
267
+ <img src="https://unpkg.com/@doubao-apps/template@0.0.35/assets/task-action-card.png" alt="TaskActionCard 示例" width="400" />
266
268
 
267
269
  <p />
268
270
 
@@ -287,7 +289,7 @@ import { TaskActionCard } from '@doubao-apps/template';
287
289
 
288
290
  效果图：
289
291
 
290
- <img src="https://unpkg.com/@doubao-apps/template@0.0.35-rc.0/assets/order-card.png" alt="OrderCard 示例" width="400" />
292
+ <img src="https://unpkg.com/@doubao-apps/template@0.0.35/assets/order-card.png" alt="OrderCard 示例" width="400" />
291
293
 
292
294
  <p />
293
295
 
@@ -340,6 +342,7 @@ import { OrderCard } from '@doubao-apps/template';
340
342
  - `infoItems` 用于配置提单信息列表。
341
343
  - `feeItems`、`discountText`、`totalLabel`、`totalPrice` 用于配置费用汇总。
342
344
  - `primaryActionText` 和 `secondaryActionText` 可以自定义底部操作按钮文案。
345
+ - 底部主/次按钮支持通过 `primaryActionButtonProps` 和 `secondaryActionButtonProps` 配置禁用、加载和点击节流状态。
343
346
  - 用在 widget 中时，推荐让 `render` 直接返回 `OrderCard`。
344
347
 
345
348
  ## TransportCard
@@ -348,7 +351,7 @@ import { OrderCard } from '@doubao-apps/template';
348
351
 
349
352
  效果图：
350
353
 
351
- <img src="https://unpkg.com/@doubao-apps/template@0.0.35-rc.0/assets/transport-card.png" alt="TransportCard 示例" width="400" />
354
+ <img src="https://unpkg.com/@doubao-apps/template@0.0.35/assets/transport-card.png" alt="TransportCard 示例" width="400" />
352
355
 
353
356
  <p />
354
357
 
@@ -383,7 +386,7 @@ import { TransportCard } from '@doubao-apps/template';
383
386
 
384
387
  效果图：
385
388
 
386
- <img src="https://unpkg.com/@doubao-apps/template@0.0.35-rc.0/assets/transport-list-card.png" alt="TransportListCard 示例" width="400" />
389
+ <img src="https://unpkg.com/@doubao-apps/template@0.0.35/assets/transport-list-card.png" alt="TransportListCard 示例" width="400" />
387
390
 
388
391
  <p />
389
392
 
@@ -430,7 +433,7 @@ import { TransportListCard } from '@doubao-apps/template';
430
433
 
431
434
  效果图：
432
435
 
433
- <img src="https://unpkg.com/@doubao-apps/template@0.0.35-rc.0/assets/ticket-order-card.png" alt="TicketOrderCard 示例" width="400" />
436
+ <img src="https://unpkg.com/@doubao-apps/template@0.0.35/assets/ticket-order-card.png" alt="TicketOrderCard 示例" width="400" />
434
437
 
435
438
  <p />
436
439
 
@@ -468,3 +471,10 @@ import { TicketOrderCard } from '@doubao-apps/template';
468
471
  }}
469
472
  />
470
473
  ```
474
+
475
+ 说明：
476
+
477
+ - `routeItems` 用于配置航程列表。
478
+ - `infoItems` 和 `feeItems` 用于配置订单信息与费用明细。
479
+ - `primaryActionText` 和 `secondaryActionText` 可以自定义底部操作按钮文案。
480
+ - 底部主/次按钮支持通过 `primaryActionButtonProps` 和 `secondaryActionButtonProps` 配置禁用、加载和点击节流状态。
package/dist/components/action-bar/index.d.ts CHANGED
@@ -1,6 +1,8 @@
1
+ import { type ButtonProps } 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 './styles.scss';
5
+ export type TemplateActionButtonProps = Pick<ButtonProps, 'disabled' | 'loading' | 'throttle'>;
4
6
  export interface TemplateActionBarProps {
5
7
  /** 操作区根节点自定义类名。 */
6
8
  className?: string;
@@ -8,8 +10,12 @@ export interface TemplateActionBarProps {
8
10
  style?: CSSProperties;
9
11
  /** 主按钮文案。 */
10
12
  primaryActionText?: string;
13
+ /** 主按钮配置，支持禁用、加载和点击节流。 */
14
+ primaryActionButtonProps?: TemplateActionButtonProps;
11
15
  /** 次按钮文案。 */
12
16
  secondaryActionText?: string;
17
+ /** 次按钮配置，支持禁用、加载和点击节流。 */
18
+ secondaryActionButtonProps?: TemplateActionButtonProps;
13
19
  /** 点击主按钮时触发。 */
14
20
  onPrimaryActionClick?: (event?: TouchEvent) => void;
15
21
  /** 点击次按钮时触发。 */
package/dist/components/action-bar/index.js CHANGED
@@ -2,14 +2,14 @@ import { Button } from "@byted-doubao-apps/components";
2
2
  import { clsx } from "clsx";
3
3
  import "./styles.css";
4
4
  function TemplateActionBar(props) {
5
- const { className, style, primaryActionText, secondaryActionText, onPrimaryActionClick, onSecondaryActionClick } = props;
5
+ const { className, style, primaryActionText, primaryActionButtonProps, secondaryActionText, secondaryActionButtonProps, onPrimaryActionClick, onSecondaryActionClick } = props;
6
6
  const hasPrimaryAction = null != primaryActionText && primaryActionText.length > 0;
7
7
  const hasSecondaryAction = null != secondaryActionText && secondaryActionText.length > 0;
8
8
  const hasDefaultActions = hasPrimaryAction || hasSecondaryAction;
9
9
  if (!hasDefaultActions) return null;
10
10
  return <view className={clsx('doubao-template-action-bar', className)} style={style}>
11
- {hasSecondaryAction ? <Button className="doubao-template-action-bar__action" type="default" text={secondaryActionText} onClick={onSecondaryActionClick}/> : null}
12
- {hasPrimaryAction ? <Button className="doubao-template-action-bar__action" type="primary" text={primaryActionText} onClick={onPrimaryActionClick}/> : null}
11
+ {hasSecondaryAction ? <Button className="doubao-template-action-bar__action" type="default" text={secondaryActionText} {...secondaryActionButtonProps} onClick={onSecondaryActionClick}/> : null}
12
+ {hasPrimaryAction ? <Button className="doubao-template-action-bar__action" type="primary" text={primaryActionText} {...primaryActionButtonProps} onClick={onPrimaryActionClick}/> : null}
13
13
  </view>;
14
14
  }
15
15
  export { TemplateActionBar };
package/dist/components/action-bar/styles.css CHANGED
@@ -1,30 +1,30 @@
1
1
  .doubao-template-action-bar {
2
- width: 100%;
3
- padding: var(--doubao-template-action-bar-padding, 8px 12px 12px);
4
2
  box-sizing: border-box;
5
3
  flex-direction: row;
4
+ width: 100%;
5
+ padding: 8px 12px 12px;
6
6
  display: flex;
7
7
  }
8
8
 
9
9
  .doubao-template-action-bar__action {
10
- width: auto;
11
- height: var(--doubao-template-action-bar-button-height, 44px);
12
- border-radius: var(--doubao-template-action-bar-button-radius, 8px);
13
- --doubao-button-border-radius: var(--doubao-template-action-bar-button-radius, 8px);
14
- --doubao-button-default-height: var(--doubao-template-action-bar-button-height, 44px);
15
- --doubao-button-default-padding-x: var(--doubao-template-action-bar-button-padding-x, 12px);
10
+ --doubao-button-border-radius: 8px;
11
+ --doubao-button-default-height: 44px;
12
+ --doubao-button-default-padding-x: 12px;
16
13
  --doubao-button-default-padding-y: 0;
17
- --doubao-button-default-font-size: var(--doubao-template-action-bar-button-font-size, 16px);
18
- --doubao-button-default-line-height: var(--doubao-template-action-bar-button-line-height, 22px);
19
- --doubao-button-primary-bg: var(--doubao-template-action-bar-primary-bg, var(--primary-50));
20
- --doubao-button-primary-text: var(--doubao-template-action-bar-primary-text, var(--static-white));
21
- --doubao-button-default-bg: var(--doubao-template-action-bar-secondary-bg, var(--bg-base-2-overlay));
22
- --doubao-button-default-text: var(--doubao-template-action-bar-secondary-text, var(--neutral-100));
14
+ --doubao-button-default-font-size: 16px;
15
+ --doubao-button-default-line-height: 22px;
16
+ --doubao-button-primary-bg: var(--primary-50);
17
+ --doubao-button-primary-text: var(--static-white);
18
+ --doubao-button-default-bg: var(--bg-base-2-overlay);
19
+ --doubao-button-default-text: var(--neutral-100);
20
+ border-radius: 8px;
23
21
  flex: 1 1 0;
22
+ width: auto;
24
23
  min-width: 0;
24
+ height: 44px;
25
25
  }
26
26
 
27
27
  .doubao-template-action-bar__action + .doubao-template-action-bar__action {
28
- margin-left: var(--doubao-template-action-bar-gap, 10px);
28
+ margin-left: 10px;
29
29
  }
30
30
 
package/dist/components/info-section/styles.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .doubao-template-info-section {
2
2
  box-sizing: border-box;
3
- border-top: var(--doubao-template-info-section-border-top, .5px solid var(--neutral-transparent-1));
3
+ border-top: .5px solid var(--neutral-transparent-1);
4
4
  flex-direction: column;
5
5
  width: 100%;
6
6
  padding: 12px;
@@ -40,10 +40,10 @@
40
40
 
41
41
  .doubao-template-info-section__info-label {
42
42
  max-width: 100%;
43
- color: var(--doubao-template-info-section-label-text, var(--neutral-100));
44
- font-size: var(--doubao-template-info-section-label-font-size, 13px);
45
- font-weight: var(--doubao-template-info-section-label-font-weight, 400);
46
- line-height: var(--doubao-template-info-section-label-line-height, 20px);
43
+ color: var(--neutral-100);
44
+ font-size: 13px;
45
+ font-weight: 400;
46
+ line-height: 20px;
47
47
  }
48
48
 
49
49
  .doubao-template-info-section__info-value-wrap {
@@ -58,12 +58,12 @@
58
58
 
59
59
  .doubao-template-info-section__info-value {
60
60
  min-width: 0;
61
- margin-left: var(--doubao-template-info-section-value-gap, 6px);
62
- color: var(--doubao-template-info-section-value-text, var(--neutral-50));
63
- font-size: var(--doubao-template-info-section-value-font-size, 13px);
64
- font-weight: var(--doubao-template-info-section-value-font-weight, 400);
65
- line-height: var(--doubao-template-info-section-value-line-height, 20px);
61
+ color: var(--neutral-50);
66
62
  text-align: right;
63
+ margin-left: 6px;
64
+ font-size: 13px;
65
+ font-weight: 400;
66
+ line-height: 20px;
67
67
  }
68
68
 
69
69
  .doubao-template-info-section__info-value:first-child {
@@ -98,13 +98,13 @@
98
98
  }
99
99
 
100
100
  .doubao-template-info-section__fee {
101
- flex-shrink: var(--doubao-template-info-section-fee-shrink, 1);
102
101
  min-width: 0;
103
- margin-left: var(--doubao-template-info-section-fee-gap, 6px);
104
- color: var(--doubao-template-info-section-fee-text, var(--neutral-50));
105
- font-size: var(--doubao-template-info-section-fee-font-size, 13px);
106
- font-weight: var(--doubao-template-info-section-fee-font-weight, 400);
107
- line-height: var(--doubao-template-info-section-fee-line-height, 20px);
102
+ color: var(--neutral-50);
103
+ flex-shrink: 1;
104
+ margin-left: 6px;
105
+ font-size: 13px;
106
+ font-weight: 400;
107
+ line-height: 20px;
108
108
  }
109
109
 
110
110
  .doubao-template-info-section__fee:first-child {
@@ -112,10 +112,10 @@
112
112
  }
113
113
 
114
114
  .doubao-template-info-section__total {
115
- margin-left: var(--doubao-template-info-section-total-gap, 6px);
116
115
  flex-direction: row;
117
116
  flex-shrink: 0;
118
117
  align-items: center;
118
+ margin-left: 6px;
119
119
  display: flex;
120
120
  }
121
121
 
@@ -124,17 +124,17 @@
124
124
  }
125
125
 
126
126
  .doubao-template-info-section__total-label {
127
- color: var(--doubao-template-info-section-total-label-text, var(--neutral-100));
128
- font-size: var(--doubao-template-info-section-total-label-font-size, 13px);
129
- font-weight: var(--doubao-template-info-section-total-label-font-weight, 500);
130
- line-height: var(--doubao-template-info-section-total-label-line-height, 20px);
127
+ color: var(--neutral-100);
128
+ font-size: 13px;
129
+ font-weight: 500;
130
+ line-height: 20px;
131
131
  }
132
132
 
133
133
  .doubao-template-info-section__total-price {
134
- color: var(--doubao-template-info-section-total-price-text, var(--neutral-100));
135
- font-size: var(--doubao-template-info-section-total-price-font-size, 15px);
136
- font-weight: var(--doubao-template-info-section-total-price-font-weight, 500);
137
- line-height: var(--doubao-template-info-section-total-price-line-height, 22px);
134
+ color: var(--neutral-100);
138
135
  margin-left: 2px;
136
+ font-size: 15px;
137
+ font-weight: 500;
138
+ line-height: 22px;
139
139
  }
140
140
 
package/dist/components/product-summary/styles.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .doubao-template-product-summary {
2
2
  box-sizing: border-box;
3
- background-color: var(--doubao-template-product-summary-bg, var(--bg-base-1));
3
+ background-color: var(--bg-base-1);
4
4
  flex-direction: row;
5
5
  align-items: center;
6
6
  width: 100%;
@@ -9,11 +9,11 @@
9
9
  }
10
10
 
11
11
  .doubao-template-product-summary__image {
12
- width: var(--doubao-template-product-summary-image-size, 80px);
13
- height: var(--doubao-template-product-summary-image-size, 80px);
14
- background-color: var(--doubao-template-product-summary-image-bg, var(--bg-base-1-overlay));
15
- border-radius: var(--doubao-template-product-summary-image-radius, 5px);
12
+ background-color: var(--bg-base-1-overlay);
13
+ border-radius: 5px;
16
14
  flex-shrink: 0;
15
+ width: 80px;
16
+ height: 80px;
17
17
  overflow: hidden;
18
18
  }
19
19
 
@@ -37,20 +37,20 @@
37
37
  }
38
38
 
39
39
  .doubao-template-product-summary__line-main {
40
- height: var(--doubao-template-product-summary-main-height, 24px);
40
+ height: 24px;
41
41
  }
42
42
 
43
43
  .doubao-template-product-summary__line-secondary {
44
- height: var(--doubao-template-product-summary-secondary-height, 20px);
45
- margin-top: var(--doubao-template-product-summary-secondary-margin-top, 2px);
44
+ height: 20px;
45
+ margin-top: 2px;
46
46
  }
47
47
 
48
48
  .doubao-template-product-summary__title-wrap {
49
- min-width: 0;
50
- margin-right: var(--doubao-template-product-summary-title-margin-right, 8px);
51
49
  flex-direction: row;
52
50
  flex: 1 1 0;
53
51
  align-items: center;
52
+ min-width: 0;
53
+ margin-right: 8px;
54
54
  display: flex;
55
55
  }
56
56
 
@@ -64,25 +64,25 @@
64
64
 
65
65
  .doubao-template-product-summary__title {
66
66
  min-width: 0;
67
- color: var(--doubao-template-product-summary-title-text, var(--neutral-100));
68
- font-size: var(--doubao-template-product-summary-title-font-size, 16px);
69
- font-weight: var(--doubao-template-product-summary-title-font-weight, 500);
70
- line-height: var(--doubao-template-product-summary-title-line-height, 24px);
67
+ color: var(--neutral-100);
68
+ font-size: 16px;
69
+ font-weight: 500;
70
+ line-height: 24px;
71
71
  }
72
72
 
73
73
  .doubao-template-product-summary__chevron {
74
- width: var(--doubao-template-product-summary-chevron-size, 7px);
75
- height: var(--doubao-template-product-summary-chevron-size, 7px);
76
- margin-left: var(--doubao-template-product-summary-chevron-margin-left, 5px);
77
74
  box-sizing: border-box;
78
- border-top: var(--doubao-template-product-summary-chevron-stroke, 1.5px) solid var(--doubao-template-product-summary-chevron-color, var(--neutral-30));
79
- border-right: var(--doubao-template-product-summary-chevron-stroke, 1.5px) solid var(--doubao-template-product-summary-chevron-color, var(--neutral-30));
75
+ border-top: 1.5px solid var(--neutral-30);
76
+ border-right: 1.5px solid var(--neutral-30);
80
77
  flex-shrink: 0;
78
+ width: 7px;
79
+ height: 7px;
80
+ margin-left: 5px;
81
81
  transform: rotate(45deg);
82
82
  }
83
83
 
84
84
  .doubao-template-product-summary__price {
85
- color: var(--doubao-template-product-summary-price-text, var(--neutral-100));
85
+ color: var(--neutral-100);
86
86
  white-space: nowrap;
87
87
  flex-direction: row;
88
88
  flex-shrink: 0;
@@ -94,32 +94,32 @@
94
94
  }
95
95
 
96
96
  .doubao-template-product-summary__price-prefix {
97
- width: var(--doubao-template-product-summary-price-prefix-width, 22px);
98
- font-size: var(--doubao-template-product-summary-price-prefix-font-size, 11px);
99
- line-height: var(--doubao-template-product-summary-price-prefix-line-height, 17px);
97
+ width: 22px;
98
+ font-size: 11px;
99
+ line-height: 17px;
100
100
  }
101
101
 
102
102
  .doubao-template-product-summary__price-value {
103
- margin-left: var(--doubao-template-product-summary-price-gap, 2px);
104
- font-size: var(--doubao-template-product-summary-price-font-size, 13px);
105
- line-height: var(--doubao-template-product-summary-price-line-height, 19px);
103
+ margin-left: 2px;
104
+ font-size: 13px;
105
+ line-height: 19px;
106
106
  }
107
107
 
108
108
  .doubao-template-product-summary__spec {
109
109
  min-width: 0;
110
- color: var(--doubao-template-product-summary-secondary-text, var(--neutral-50));
111
- font-size: var(--doubao-template-product-summary-spec-font-size, 12px);
112
- font-weight: var(--doubao-template-product-summary-spec-font-weight, 400);
113
- line-height: var(--doubao-template-product-summary-spec-line-height, 18px);
110
+ color: var(--neutral-50);
114
111
  flex: 1 1 0;
112
+ font-size: 12px;
113
+ font-weight: 400;
114
+ line-height: 18px;
115
115
  }
116
116
 
117
117
  .doubao-template-product-summary__quantity {
118
- margin-left: var(--doubao-template-product-summary-quantity-margin-left, 8px);
119
- color: var(--doubao-template-product-summary-secondary-text, var(--neutral-50));
120
- font-size: var(--doubao-template-product-summary-quantity-font-size, 13px);
121
- font-weight: var(--doubao-template-product-summary-quantity-font-weight, 400);
122
- line-height: var(--doubao-template-product-summary-quantity-line-height, 20px);
118
+ color: var(--neutral-50);
123
119
  flex-shrink: 0;
120
+ margin-left: 8px;
121
+ font-size: 13px;
122
+ font-weight: 400;
123
+ line-height: 20px;
124
124
  }
125
125
 
package/dist/components/route-section/styles.css CHANGED
@@ -10,11 +10,11 @@
10
10
  }
11
11
 
12
12
  .doubao-template-route-section__title {
13
- width: 100%;
14
- min-width: 0;
15
- height: var(--doubao-template-route-section-title-height, 24px);
16
13
  flex-direction: row;
17
14
  align-items: center;
15
+ width: 100%;
16
+ min-width: 0;
17
+ height: 24px;
18
18
  display: flex;
19
19
  overflow: hidden;
20
20
  }
@@ -29,30 +29,30 @@
29
29
 
30
30
  .doubao-template-route-section__title-text {
31
31
  min-width: 0;
32
- color: var(--doubao-template-route-section-title-text, var(--neutral-100));
33
- font-size: var(--doubao-template-route-section-title-font-size, 16px);
34
- font-weight: var(--doubao-template-route-section-title-font-weight, 500);
35
- line-height: var(--doubao-template-route-section-title-line-height, 24px);
32
+ color: var(--neutral-100);
33
+ font-size: 16px;
34
+ font-weight: 500;
35
+ line-height: 24px;
36
36
  }
37
37
 
38
38
  .doubao-template-route-section__chevron {
39
- width: var(--doubao-template-route-section-chevron-size, 7px);
40
- height: var(--doubao-template-route-section-chevron-size, 7px);
41
- margin-left: var(--doubao-template-route-section-chevron-margin-left, 5px);
42
39
  box-sizing: border-box;
43
- border-top: var(--doubao-template-route-section-chevron-stroke, 1.5px) solid var(--doubao-template-route-section-chevron-color, var(--neutral-30));
44
- border-right: var(--doubao-template-route-section-chevron-stroke, 1.5px) solid var(--doubao-template-route-section-chevron-color, var(--neutral-30));
40
+ border-top: 1.5px solid var(--neutral-30);
41
+ border-right: 1.5px solid var(--neutral-30);
45
42
  flex-shrink: 0;
43
+ width: 7px;
44
+ height: 7px;
45
+ margin-left: 5px;
46
46
  transform: rotate(45deg);
47
47
  }
48
48
 
49
49
  .doubao-template-route-section__description {
50
50
  width: 100%;
51
- height: var(--doubao-template-route-section-description-height, 20px);
52
- margin-top: var(--doubao-template-route-section-description-margin-top, 2px);
53
- color: var(--doubao-template-route-section-description-text, var(--neutral-50));
54
- font-size: var(--doubao-template-route-section-description-font-size, 13px);
55
- font-weight: var(--doubao-template-route-section-description-font-weight, 400);
56
- line-height: var(--doubao-template-route-section-description-line-height, 20px);
51
+ height: 20px;
52
+ color: var(--neutral-50);
53
+ margin-top: 2px;
54
+ font-size: 13px;
55
+ font-weight: 400;
56
+ line-height: 20px;
57
57
  }
58
58
 
package/dist/media-layout-card/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { CSSProperties, TouchEvent } from '@lynx-js/types';
2
2
  import type { ReactElement, ReactNode } from 'react';
3
+ import { type TemplateActionButtonProps } from '../components/action-bar/index.js';
3
4
  import type { TemplateKey, TemplateText } from '../types.js';
4
5
  import './styles.scss';
5
6
  export interface MediaLayoutCardProps {
@@ -21,8 +22,12 @@ export interface MediaLayoutCardProps {
21
22
  extraActionText?: string;
22
23
  /** 主按钮文案。 */
23
24
  primaryActionText?: string;
25
+ /** 主按钮配置，支持禁用、加载和点击节流。 */
26
+ primaryActionButtonProps?: TemplateActionButtonProps;
24
27
  /** 次按钮文案。 */
25
28
  secondaryActionText?: string;
29
+ /** 次按钮配置，支持禁用、加载和点击节流。 */
30
+ secondaryActionButtonProps?: TemplateActionButtonProps;
26
31
  /** 自定义内容区；传入后不再渲染默认布局。 */
27
32
  children?: ReactNode;
28
33
  /** 卡片根节点自定义类名。 */
package/dist/media-layout-card/index.js CHANGED
@@ -54,7 +54,7 @@ function renderMediaLayoutCardExtra(props) {
54
54
  return null;
55
55
  }
56
56
  function MediaLayoutCard(props) {
57
- const { moreText, showMore = true, title, showChevron = true, media, infoRows = [], extra, extraActionText, primaryActionText, secondaryActionText, children, className, style, onClick, onMoreClick, onContentClick, onExtraActionClick, onPrimaryActionClick, onSecondaryActionClick } = props;
57
+ const { moreText, showMore = true, title, showChevron = true, media, infoRows = [], extra, extraActionText, primaryActionText, primaryActionButtonProps, secondaryActionText, secondaryActionButtonProps, children, className, style, onClick, onMoreClick, onContentClick, onExtraActionClick, onPrimaryActionClick, onSecondaryActionClick } = props;
58
58
  const hasCustomContent = !isMediaLayoutCardNodeEmpty(children);
59
59
  const titleNode = renderMediaLayoutCardTitle(title, showChevron);
60
60
  const infoRowNodes = infoRows.map((row, index)=>renderMediaLayoutCardInfoRow(row, index)).filter((node)=>null != node).slice(0, MEDIA_LAYOUT_CARD_INFO_ROW_LIMIT);
@@ -77,7 +77,7 @@ function MediaLayoutCard(props) {
77
77
  {extraNode}
78
78
  </view>}
79
79
  </view>
80
- <TemplateActionBar className="doubao-media-layout-card__action-bar" primaryActionText={primaryActionText} secondaryActionText={secondaryActionText} onPrimaryActionClick={onPrimaryActionClick} onSecondaryActionClick={onSecondaryActionClick}/>
80
+ <TemplateActionBar className="doubao-media-layout-card__action-bar" primaryActionText={primaryActionText} primaryActionButtonProps={primaryActionButtonProps} secondaryActionText={secondaryActionText} secondaryActionButtonProps={secondaryActionButtonProps} onPrimaryActionClick={onPrimaryActionClick} onSecondaryActionClick={onSecondaryActionClick}/>
81
81
  </view>;
82
82
  }
83
83
  export { MediaLayoutCard };
package/dist/order-card/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { CSSProperties, TouchEvent } from '@lynx-js/types';
2
2
  import type { ReactElement, ReactNode } from 'react';
3
+ import { type TemplateActionButtonProps } from '../components/action-bar/index.js';
3
4
  import { type TemplateProductSummaryProps } from '../components/product-summary/index.js';
4
5
  import type { TemplateKey, TemplateText } from '../types.js';
5
6
  import './styles.scss';
@@ -22,8 +23,12 @@ export interface OrderCardProps {
22
23
  totalPrice?: TemplateText;
23
24
  /** 主按钮文案。 */
24
25
  primaryActionText?: string;
26
+ /** 主按钮配置，支持禁用、加载和点击节流。 */
27
+ primaryActionButtonProps?: TemplateActionButtonProps;
25
28
  /** 次按钮文案。 */
26
29
  secondaryActionText?: string;
30
+ /** 次按钮配置，支持禁用、加载和点击节流。 */
31
+ secondaryActionButtonProps?: TemplateActionButtonProps;
27
32
  /** 卡片根节点自定义类名。 */
28
33
  className?: string;
29
34
  /** 卡片根节点自定义样式。 */
package/dist/order-card/index.js CHANGED
@@ -22,7 +22,7 @@ function renderOrderCardProductItem({ item, index }) {
22
22
  </view>;
23
23
  }
24
24
  function OrderCard(props) {
25
- const { moreText, showMore = true, productItems = [], infoItems = [], feeItems = [], discountText, totalLabel, totalPrice, primaryActionText, secondaryActionText, className, style, onClick, onMoreClick, onPrimaryActionClick, onSecondaryActionClick } = props;
25
+ const { moreText, showMore = true, productItems = [], infoItems = [], feeItems = [], discountText, totalLabel, totalPrice, primaryActionText, primaryActionButtonProps, secondaryActionText, secondaryActionButtonProps, className, style, onClick, onMoreClick, onPrimaryActionClick, onSecondaryActionClick } = props;
26
26
  const productNodes = productItems.map((item, index)=>renderOrderCardProductItem({
27
27
  item,
28
28
  index
@@ -34,7 +34,7 @@ function OrderCard(props) {
34
34
 
35
35
  <TemplateInfoSection infoItems={infoItems} feeItems={feeItems} discountText={discountText} totalLabel={totalLabel} totalPrice={totalPrice} valueLayout="column"/>
36
36
 
37
- <TemplateActionBar secondaryActionText={secondaryActionText} primaryActionText={primaryActionText} onSecondaryActionClick={onSecondaryActionClick} onPrimaryActionClick={onPrimaryActionClick}/>
37
+ <TemplateActionBar secondaryActionText={secondaryActionText} secondaryActionButtonProps={secondaryActionButtonProps} primaryActionText={primaryActionText} primaryActionButtonProps={primaryActionButtonProps} onSecondaryActionClick={onSecondaryActionClick} onPrimaryActionClick={onPrimaryActionClick}/>
38
38
  </view>;
39
39
  }
40
40
  export { OrderCard };
package/dist/single-item-card/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { CSSProperties, TouchEvent } from '@lynx-js/types';
2
2
  import type { ReactElement, ReactNode } from 'react';
3
+ import { type TemplateActionButtonProps } from '../components/action-bar/index.js';
3
4
  import type { TemplateKey, TemplateText } from '../types.js';
4
5
  import './styles.scss';
5
6
  export interface SingleItemCardProps {
@@ -25,8 +26,12 @@ export interface SingleItemCardProps {
25
26
  quantity?: TemplateText;
26
27
  /** 主按钮文案。 */
27
28
  primaryActionText?: string;
29
+ /** 主按钮配置，支持禁用、加载和点击节流。 */
30
+ primaryActionButtonProps?: TemplateActionButtonProps;
28
31
  /** 次按钮文案。 */
29
32
  secondaryActionText?: string;
33
+ /** 次按钮配置，支持禁用、加载和点击节流。 */
34
+ secondaryActionButtonProps?: TemplateActionButtonProps;
30
35
  /** 自定义内容区；传入后不再渲染默认图文结构。 */
31
36
  children?: ReactNode;
32
37
  /** 卡片根节点自定义类名。 */
package/dist/single-item-card/index.js CHANGED
@@ -92,7 +92,7 @@ function renderSingleItemCardTitleRow(props) {
92
92
  </view>;
93
93
  }
94
94
  function SingleItemCard(props) {
95
- const { moreText, showMore = true, imageSrc, image: image1, infoRows = [], quantity, primaryActionText, secondaryActionText, children, className, style, onClick, onMoreClick, onContentClick, onPrimaryActionClick, onSecondaryActionClick } = props;
95
+ const { moreText, showMore = true, imageSrc, image: image1, infoRows = [], quantity, primaryActionText, primaryActionButtonProps, secondaryActionText, secondaryActionButtonProps, children, className, style, onClick, onMoreClick, onContentClick, onPrimaryActionClick, onSecondaryActionClick } = props;
96
96
  const hasCustomContent = !isSingleItemCardNodeEmpty(children);
97
97
  const titleRowNode = renderSingleItemCardTitleRow(props);
98
98
  const infoRowNodes = getSingleItemCardInfoRows(infoRows, quantity).map((row, rowIndex)=>renderSingleItemCardInfoRow(row, rowIndex, quantity)).filter((node)=>null != node).slice(0, SINGLE_ITEM_CARD_INFO_ROW_LIMIT);
@@ -109,7 +109,7 @@ function SingleItemCard(props) {
109
109
  </view>
110
110
  </view>}
111
111
  </view>
112
- <TemplateActionBar className="doubao-single-item-card__action-bar" secondaryActionText={secondaryActionText} primaryActionText={primaryActionText} onSecondaryActionClick={onSecondaryActionClick} onPrimaryActionClick={onPrimaryActionClick}/>
112
+ <TemplateActionBar className="doubao-single-item-card__action-bar" secondaryActionText={secondaryActionText} secondaryActionButtonProps={secondaryActionButtonProps} primaryActionText={primaryActionText} primaryActionButtonProps={primaryActionButtonProps} onSecondaryActionClick={onSecondaryActionClick} onPrimaryActionClick={onPrimaryActionClick}/>
113
113
  </view>;
114
114
  }
115
115
  export { SingleItemCard };
package/dist/single-item-card/styles.css CHANGED
@@ -37,11 +37,11 @@
37
37
  }
38
38
 
39
39
  .doubao-single-item-card__image {
40
- width: var(--doubao-single-item-card-image-size, 80px);
41
- height: var(--doubao-single-item-card-image-size, 80px);
42
40
  background-color: var(--doubao-single-item-card-image-bg);
43
41
  border-radius: 5px;
44
42
  flex-shrink: 0;
43
+ width: 80px;
44
+ height: 80px;
45
45
  overflow: hidden;
46
46
  }
47
47
 
package/dist/ticket-order-card/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { CSSProperties, TouchEvent } from '@lynx-js/types';
2
2
  import type { ReactElement, ReactNode } from 'react';
3
+ import { type TemplateActionButtonProps } from '../components/action-bar/index.js';
3
4
  import type { TemplateKey, TemplateText } from '../types.js';
4
5
  import './styles.scss';
5
6
  export interface TicketOrderCardProps {
@@ -21,8 +22,12 @@ export interface TicketOrderCardProps {
21
22
  totalContent?: ReactNode;
22
23
  /** 主按钮文案。 */
23
24
  primaryActionText?: string;
25
+ /** 主按钮配置，支持禁用、加载和点击节流。 */
26
+ primaryActionButtonProps?: TemplateActionButtonProps;
24
27
  /** 次按钮文案。 */
25
28
  secondaryActionText?: string;
29
+ /** 次按钮配置，支持禁用、加载和点击节流。 */
30
+ secondaryActionButtonProps?: TemplateActionButtonProps;
26
31
  /** 卡片根节点自定义类名。 */
27
32
  className?: string;
28
33
  /** 卡片根节点自定义样式。 */