@tuya-miniapp/smart-ui 2.3.8-beta-4 → 2.3.8-beta-5

package/packages/field/test/demo.spec.ts

@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+  const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
+    rootPath: path.resolve(__dirname, '../../'),
+  });
+  const comp = simulate.render(id);
+  comp.attach(document.createElement('parent-wrapper'));
+  expect(comp.toJSON()).toMatchSnapshot();
+});

package/packages/field/textarea.wxml

@@ -0,0 +1,32 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<textarea
+  id="{{ name }}"
+  class="{{ utils.bem('field__control', [inputAlign, type, { textarea: true, limit: showWordLimit && maxlength, readonly }]) }} input-class"
+  fixed="{{ fixed }}"
+  focus="{{ focus }}"
+  cursor="{{ cursor }}"
+  value="{{ innerValue }}"
+  auto-focus="{{ autoFocus }}"
+  disabled="{{ disabled }}"
+  maxlength="{{ maxlength }}"
+  placeholder="{{ !interError ? placeholder : errorMessage || placeholder }}"
+  placeholder-style="{{ interError ? 'color: var(--field-input-error-text-color, var(--app-M2, #f04c4c));' : 'color: var(--field-placeholder-text-color, var(--app-B6-N4, rgba(0, 0, 0, 0.4)));'}}{{ placeholderStyle }}"
+  auto-height="{{ !!autosize }}"
+  style="{{ computed.inputStyle(autosize) }}"
+  cursor-spacing="{{ cursorSpacing }}"
+  adjust-position="{{ adjustPosition }}"
+  show-confirm-bar="{{ showConfirmBar }}"
+  hold-keyboard="{{ holdKeyboard }}"
+  selection-end="{{ selectionEnd }}"
+  selection-start="{{ selectionStart }}"
+  disable-default-padding="{{ disableDefaultPadding }}"
+  bindinput="onInput"
+  bindtap="onClickInput"
+  bindblur="onBlur"
+  bindfocus="onFocus"
+  bindconfirm="onConfirm"
+  bindlinechange="onLineChange"
+  bindkeyboardheightchange="onKeyboardHeightChange"
+/>

package/packages/field/types.ts

@@ -0,0 +1,8 @@
+export interface InputDetails {
+  /** 输入框内容 */
+  value: string;
+  /** 光标位置 */
+  cursor?: number;
+  /** keyCode 为键值 (目前工具还不支持返回keyCode参数) `2.1.0` 起支持 */
+  keyCode?: number;
+}

package/packages/goods-action/README.en.md

@@ -0,0 +1,199 @@
+# GoodsAction Product Navigation
+
+### Introduction
+
+Used to provide convenient interactions for product-related operations.
+
+### Import
+
+Introduce the component in `app.json` or `index.json`. For detailed instructions, refer to [Quick Start](/material/smartui?comId=help-getting-started&appType=miniapp).
+
+```json
+"usingComponents": {
+  "smart-goodsmart-action": "@tuya-miniapp/smart-ui/lib/goodsmart-action/index",
+  "smart-goodsmart-action-icon": "@tuya-miniapp/smart-ui/lib/goodsmart-action-icon/index",
+  "smart-goodsmart-action-button": "@tuya-miniapp/smart-ui/lib/goodsmart-action-button/index"
+}
+```
+
+## Code Examples
+
+### Basic Usage
+
+```html
+<smart-goodsmart-action>
+  <smart-goodsmart-action-icon icon="chat-o" text="Customer Service" bind:click="onClickIcon" />
+  <smart-goodsmart-action-icon icon="cart-o" text="Cart" bind:click="onClickIcon" />
+  <smart-goodsmart-action-button
+    text="Add to Cart"
+    type="warning"
+    bind:click="onClickButton"
+  />
+  <smart-goodsmart-action-button text="Buy Now" bind:click="onClickButton" />
+</smart-goodsmart-action>
+```
+
+```javascript
+Page({
+  onClickIcon() {
+    Toast('Icon Clicked');
+  },
+
+  onClickButton() {
+    Toast('Button Clicked');
+  },
+});
+```
+
+### Notification Information
+
+When the `dot` property is set, a small red dot will be displayed on the upper right corner of the icon. When the `info` property is set, the corresponding badge will be shown on the upper right corner of the icon.
+
+```html
+<smart-goodsmart-action>
+  <smart-goodsmart-action-icon icon="chat-o" text="Customer Service" dot />
+  <smart-goodsmart-action-icon icon="cart-o" text="Cart" info="5" />
+  <smart-goodsmart-action-icon icon="shop-o" text="Shop" />
+  <smart-goodsmart-action-button text="Add to Cart" type="warning" />
+  <smart-goodsmart-action-button text="Buy Now" />
+</smart-goodsmart-action>
+```
+
+### Custom Button Colors
+
+You can customize the button colors using the `color` property. `linear-gradient` gradients are also supported.
+
+```html
+<smart-goodsmart-action>
+  <smart-goodsmart-action-icon icon="chat-o" text="Customer Service" />
+  <smart-goodsmart-action-icon icon="cart-o" text="Cart" info="5" />
+  <smart-goodsmart-action-icon icon="shop-o" text="Shop" />
+  <smart-goodsmart-action-button color="#be99ff" text="Add to Cart" type="warning" />
+  <smart-goodsmart-action-button color="#7232dd" text="Buy Now" />
+</smart-goodsmart-action>
+```
+
+### Plain Buttons
+
+Set the `plain` property to make the button a plain button. The text color of a plain button matches the button color, and its background is white.
+
+```html
+<smart-goodsmart-action>
+  <smart-goodsmart-action-icon icon="chat-o" text="Customer Service" />
+  <smart-goodsmart-action-icon icon="cart-o" text="Cart" info="5" />
+  <smart-goodsmart-action-icon icon="shop-o" text="Shop" />
+  <smart-goodsmart-action-button color="#7232dd" text="Add to Cart" type="warning" />
+  <smart-goodsmart-action-button plain color="#7232dd" text="Buy Now" />
+</smart-goodsmart-action>
+```
+
+## API
+
+### GoodsAction Props
+
+| Parameter              | Description                         | Type      | Default |
+| ---------------------- | ----------------------------------- | --------- | ------- |
+| safe-area-inset-bottom | Whether to reserve bottom safe area for iPhoneX | _boolean_ | `true`  |
+
+### GoodsActionIcon Props
+
+| Parameter             | Description                                                                                                        | Type                | Default       |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------- | ------------- |
+| app-parameter         | Parameters passed to the APP when opened                                                                           | _string_            | -             |
+| class-prefix `v1.10.1`| Class name prefix                                                                                                  | _string_            | `smart-icon`  |
+| color `v1.10.15`      | Icon color                                                                                                         | _string_            | `inherit`     |
+| disabled              | Whether to disable the button                                                                                      | _boolean_           | `false`       |
+| icon                  | Type of icon, please refer to the `icon` component for optional values                                             | _string_            | -             |
+| id                    | Identifier                                                                                                         | _string_            | -             |
+| info                  | Information in the upper right corner of the icon                                                                  | _string \| number_  | -             |
+| lang                  | Specifies the language for returning user info, options: zh_CN simplified Chinese, zh_TW traditional Chinese, en English | _string_            | `en`          |
+| link-type             | Link jump type, optional values are `redirectTo`, `switchTab`, `reLaunch`                                          | _string_            | `navigateTo`  |
+| loading               | Whether to show loading state                                                                                      | _boolean_           | `false`       |
+| open-type             | WeChat open capabilities, see [WeChat official documentation](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) for details | _string_            | -             |
+| send-message-img      | Image for sendMessage                                                                                              | _string_            | Screenshot    |
+| send-message-path     | Path to the mini program when the message card in the session is clicked                                           | _string_            | Current sharing path |
+| send-message-title    | Title of the message card in the session                                                                            | _string_            | Current title |
+| session-from          | Session source                                                                                                     | _string_            | -             |
+| show-message-card     | Whether to show message card                                                                                       | _string_            | `false`       |
+| size                  | Icon size, such as 20px, 2em; default unit is px                                                                   | _string \| number_  | -             |
+| text                  | Button text                                                                                                        | _string_            | -             |
+| url                   | URL to navigate to when clicked                                                                                    | _string_            | -             |
+
+### GoodsActionButton Props
+
+| Parameter              | Description                                                                                                        | Type      | Default       |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------ | --------- | ------------- |
+| app-parameter          | Parameters passed to the APP when opened                                                                           | _string_  | -             |
+| button-id `v1.10.25`   | Identifier, used as the id value of the native button component                                                    | _string_  | -             |
+| color                  | Button color, supports `linear-gradient` gradients                                                                 | _string_  | -             |
+| custom-style `v1.11.3` | Custom style                                                                                                       | _string_  | ''            |
+| disabled               | Whether to disable the button                                                                                      | _boolean_ | `false`       |
+| id                     | Identifier                                                                                                         | _string_  | -             |
+| lang                   | Specifies the language for returning user info, options: zh_CN simplified Chinese, zh_TW traditional Chinese, en English | _string_  | `en`          |
+| link-type              | Link jump type, optional values are `redirectTo`, `switchTab`, `reLaunch`                                          | _string_  | `navigateTo`  |
+| loading                | Whether to show loading state                                                                                      | _boolean_ | `false`       |
+| open-type              | WeChat open capabilities, see [WeChat official documentation](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) for details | _string_  | -             |
+| plain                  | Whether it is a plain button                                                                                       | _boolean_ | `false`       |
+| send-message-img       | Image for sendMessage                                                                                              | _string_  | Screenshot    |
+| send-message-path      | Path to the mini program when the message card in the session is clicked                                           | _string_  | Current sharing path |
+| send-message-title     | Title of the message card in the session                                                                            | _string_  | Current title |
+| session-from           | Session source                                                                                                     | _string_  | -             |
+| show-message-card      | Whether to show message card                                                                                       | _string_  | `false`       |
+| size                   | Button size, optional values are `normal`, `large`, `small`, `mini`                                                | _string_  | `normal`      |
+| text                   | Button text                                                                                                        | _string_  | -             |
+| type                   | Button type, optional values are `primary`, `warning`, `danger`                                                    | _string_  | `danger`      |
+| url                    | URL to navigate to when clicked                                                                                    | _string_  | -             |
+
+### Events
+
+| Event Name | Description          | Parameters |
+| ---------- | -------------------- | ---------- |
+| bind:click | Callback for button click event | -    |
+
+### GoodsActionIcon Slot
+
+| Name | Description    |
+| ---- | -------------- |
+| icon | Custom icon    |
+
+### GoodsActionButton Slot
+
+| Name | Description         |
+| ---- | ------------------- |
+| -    | Button display content |
+
+### GoodsActionIcon External Style Class
+
+| Class Name              | Description             |
+| ----------------------- | ----------------------- |
+| icon-class              | Icon style class        |
+| info-class `v1.10.20`   | Style class for text in the upper right corner of the icon |
+| text-class              | Text style class        |
+
+### GoodsActionButton External Style Class
+
+| Class Name   | Description     |
+| ------------ | --------------- |
+| custom-class | Root node style class |
+
+### Style Variables
+
+The component provides the following CSS variables that can be used for custom styles. For usage, refer to the [ConfigProvider Component](/material/smartui?comId=config-provider&appType=miniapp).
+
+| Name                          | Default Value                             | Description |
+| ----------------------------- | ----------------------------------------- | ----------- |
+| --goods-action-background-color | _var(--app-B4, #ffffff)_ | - |
+| --goods-action-height | _50px_ | - |
+| --goods-action-icon-width | _48px_ | - |
+| --goods-action-icon-height | _50px_ | - |
+| --goods-action-icon-color | _#323233_ | - |
+| --goods-action-icon-size | _18px_ | - |
+| --goods-action-icon-font-size | _10px_ | - |
+| --goods-action-icon-text-color | _#646566_ | - |
+| --goods-action-button-height | _40px_ | - |
+| --goods-action-button-line-height | _20px_ | - |
+| --goods-action-button-border-radius | _999px_ | - |
+| --goods-action-button-warning-color | _linear-gradient(to right, #ffd01e, #ff8917)_ | - |
+| --goods-action-button-danger-color | _linear-gradient(to right, #ff6034, #ee0a24)_ | - |
+| --goods-action-button-plain-color | _var(--app-B4, #ffffff)_ | - |
+

package/packages/goods-action/README.md

@@ -0,0 +1,198 @@
+# GoodsAction 商品导航
+
+### 介绍
+
+用于为商品相关操作提供便捷交互。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-goodsmart-action": "@tuya-miniapp/smart-ui/lib/goodsmart-action/index",
+  "smart-goodsmart-action-icon": "@tuya-miniapp/smart-ui/lib/goodsmart-action-icon/index",
+  "smart-goodsmart-action-button": "@tuya-miniapp/smart-ui/lib/goodsmart-action-button/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<smart-goodsmart-action>
+  <smart-goodsmart-action-icon icon="chat-o" text="客服" bind:click="onClickIcon" />
+  <smart-goodsmart-action-icon icon="cart-o" text="购物车" bind:click="onClickIcon" />
+  <smart-goodsmart-action-button
+    text="加入购物车"
+    type="warning"
+    bind:click="onClickButton"
+  />
+  <smart-goodsmart-action-button text="立即购买" bind:click="onClickButton" />
+</smart-goodsmart-action>
+```
+
+```javascript
+Page({
+  onClickIcon() {
+    Toast('点击图标');
+  },
+
+  onClickButton() {
+    Toast('点击按钮');
+  },
+});
+```
+
+### 提示信息
+
+设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标。
+
+```html
+<smart-goodsmart-action>
+  <smart-goodsmart-action-icon icon="chat-o" text="客服" dot />
+  <smart-goodsmart-action-icon icon="cart-o" text="购物车" info="5" />
+  <smart-goodsmart-action-icon icon="shop-o" text="店铺" />
+  <smart-goodsmart-action-button text="加入购物车" type="warning" />
+  <smart-goodsmart-action-button text="立即购买" />
+</smart-goodsmart-action>
+```
+
+### 自定义按钮颜色
+
+通过`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色。
+
+```html
+<smart-goodsmart-action>
+  <smart-goodsmart-action-icon icon="chat-o" text="客服" />
+  <smart-goodsmart-action-icon icon="cart-o" text="购物车" info="5" />
+  <smart-goodsmart-action-icon icon="shop-o" text="店铺" />
+  <smart-goodsmart-action-button color="#be99ff" text="加入购物车" type="warning" />
+  <smart-goodsmart-action-button color="#7232dd" text="立即购买" />
+</smart-goodsmart-action>
+```
+
+### 朴素按钮
+
+通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
+
+```html
+<smart-goodsmart-action>
+  <smart-goodsmart-action-icon icon="chat-o" text="客服" />
+  <smart-goodsmart-action-icon icon="cart-o" text="购物车" info="5" />
+  <smart-goodsmart-action-icon icon="shop-o" text="店铺" />
+  <smart-goodsmart-action-button color="#7232dd" text="加入购物" type="warning" />
+  <smart-goodsmart-action-button plain color="#7232dd" text="立即购买" />
+</smart-goodsmart-action>
+```
+
+## API
+
+### GoodsAction Props
+
+| 参数                   | 说明                            | 类型      | 默认值 |
+| ---------------------- | ------------------------------- | --------- | ------ |
+| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | _boolean_ | `true` |
+
+### GoodsActionIcon Props
+
+| 参数                   | 说明                                                                                                                | 类型               | 默认值       |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------ |
+| app-parameter          | 打开 APP 时，向 APP 传递的参数                                                                                      | _string_           | -            |
+| class-prefix `v1.10.1` | 类名前缀                                                                                                            | _string_           | `smart-icon` |
+| color `v1.10.15`       | 图标颜色                                                                                                            | _string_           | `inherit`    |
+| disabled               | 是否禁用按钮                                                                                                        | _boolean_          | `false`      |
+| icon                   | 图标类型，可选值见`icon`组件                                                                                        | _string_           | -            |
+| id                     | 标识符                                                                                                              | _string_           | -            |
+| info                   | 图标右上角提示信息                                                                                                  | _string \| number_ | -            |
+| lang                   | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文                                                 | _string_           | `en`         |
+| link-type              | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch`                                                          | _string_           | `navigateTo` |
+| loading                | 是否显示为加载状态                                                                                                  | _boolean_          | `false`      |
+| open-type              | 微信开放能力，具体支持可参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | _string_           | -            |
+| send-message-img       | sendMessageImg                                                                                                      | _string_           | 截图         |
+| send-message-path      | 会话内消息卡片点击跳转小程序路径                                                                                    | _string_           | 当前分享路径 |
+| send-message-title     | 会话内消息卡片标题                                                                                                  | _string_           | 当前标题     |
+| session-from           | 会话来源                                                                                                            | _string_           | -            |
+| show-message-card      | 显示会话内消息卡片                                                                                                  | _string_           | `false`      |
+| size                   | 图标大小，如 20px，2em，默认单位为 px                                                                               | _string \| number_ | -            |
+| text                   | 按钮文字                                                                                                            | _string_           | -            |
+| url                    | 点击后跳转的链接地址                                                                                                | _string_           | -            |
+
+### GoodsActionButton Props
+
+| 参数                   | 说明                                                                                                                | 类型      | 默认值       |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------- | --------- | ------------ |
+| app-parameter          | 打开 APP 时，向 APP 传递的参数                                                                                      | _string_  | -            |
+| button-id `v1.10.25`   | 标识符，作为原生 button 组件的 id 值                                                                                | _string_  | -            |
+| color                  | 按钮颜色，支持传入 `linear-gradient` 渐变色                                                                         | _string_  | -            |
+| custom-style `v1.11.3` | 自定义样式                                                                                                          | _string_  | ''           |
+| disabled               | 是否禁用按钮                                                                                                        | _boolean_ | `false`      |
+| id                     | 标识符                                                                                                              | _string_  | -            |
+| lang                   | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文                                                 | _string_  | `en`         |
+| link-type              | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch`                                                          | _string_  | `navigateTo` |
+| loading                | 是否显示为加载状态                                                                                                  | _boolean_ | `false`      |
+| open-type              | 微信开放能力，具体支持可参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | _string_  | -            |
+| plain                  | 是否为朴素按钮                                                                                                      | _boolean_ | `false`      |
+| send-message-img       | sendMessageImg                                                                                                      | _string_  | 截图         |
+| send-message-path      | 会话内消息卡片点击跳转小程序路径                                                                                    | _string_  | 当前分享路径 |
+| send-message-title     | 会话内消息卡片标题                                                                                                  | _string_  | 当前标题     |
+| session-from           | 会话来源                                                                                                            | _string_  | -            |
+| show-message-card      | 显示会话内消息卡片                                                                                                  | _string_  | `false`      |
+| size                   | 按钮尺寸，可选值为 `normal` `large` `small` `mini`                                                                  | _string_  | `normal`     |
+| text                   | 按钮文字                                                                                                            | _string_  | -            |
+| type                   | 按钮类型，可选值为 `primary` `warning` `danger`                                                                     | _string_  | `danger`     |
+| url                    | 点击后跳转的链接地址                                                                                                | _string_  | -            |
+
+### Events
+
+| 事件名     | 说明             | 参数 |
+| ---------- | ---------------- | ---- |
+| bind:click | 按钮点击事件回调 | -    |
+
+### GoodsActionIcon Slot
+
+| 名称 | 说明       |
+| ---- | ---------- |
+| icon | 自定义图标 |
+
+### GoodsActionButton Slot
+
+| 名称 | 说明         |
+| ---- | ------------ |
+| -    | 按钮显示内容 |
+
+### GoodsActionIcon 外部样式类
+
+| 类名                  | 说明                 |
+| --------------------- | -------------------- |
+| icon-class            | 图标样式类           |
+| info-class `v1.10.20` | 图标右上角文字样式类 |
+| text-class            | 文字样式类           |
+
+### GoodsActionButton 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --goods-action-background-color | _var(--app-B4, #ffffff)_ | - |
+| --goods-action-height | _50px_ | - |
+| --goods-action-icon-width | _48px_ | - |
+| --goods-action-icon-height | _50px_ | - |
+| --goods-action-icon-color | _#323233_ | - |
+| --goods-action-icon-size | _18px_ | - |
+| --goods-action-icon-font-size | _10px_ | - |
+| --goods-action-icon-text-color | _#646566_ | - |
+| --goods-action-button-height | _40px_ | - |
+| --goods-action-button-line-height | _20px_ | - |
+| --goods-action-button-border-radius | _999px_ | - |
+| --goods-action-button-warning-color | _linear-gradient(to right, #ffd01e, #ff8917)_ | - |
+| --goods-action-button-danger-color | _linear-gradient(to right, #ff6034, #ee0a24)_ | - |
+| --goods-action-button-plain-color | _var(--app-B4, #ffffff)_ | - |

package/packages/goods-action/demo/index.json

@@ -0,0 +1,10 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-toast": "../../toast/index",
+    "smart-goods-action": "../../goods-action/index",
+    "smart-goods-action-icon": "../../goods-action-icon/index",
+    "smart-goods-action-button": "../../goods-action-button/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}

package/packages/goods-action/demo/index.less

@@ -0,0 +1,3 @@
+.goods-action-position {
+  position: relative !important;
+}

package/packages/goods-action/demo/index.ts

@@ -0,0 +1,22 @@
+import { SmartComponent } from '../../common/component';
+import Toast from '../../toast/toast';
+
+SmartComponent({
+  methods: {
+    onClickIcon() {
+      Toast({
+        context: this,
+        selector: '#smart-toast-good-action',
+        message: I18n.t('clickTheIcon')
+      });
+    },
+
+    onClickButton() {
+      Toast({
+        context: this,
+        selector: '#smart-toast-good-action',
+        message: I18n.t('clickTheButton')
+      });
+    },
+  },
+});

package/packages/goods-action/demo/index.wxml

@@ -0,0 +1,53 @@
+<demo-block title="{{I18n.t('basicUsage')}}">
+  <smart-goods-action custom-class="goods-action-position" safe-area-inset-bottom="{{ false }}">
+    <smart-goods-action-icon
+      icon="chat-o"
+      text="{{I18n.t('customerService')}}"
+      open-type="contact"
+    />
+    <smart-goods-action-icon
+      icon="cart-o"
+      text="{{I18n.t('shoppingCart')}}"
+      bind:click="onClickIcon"
+    />
+    <smart-goods-action-button
+      text="{{I18n.t('addToCart')}}"
+      type="warning"
+      bind:click="onClickButton"
+    />
+    <smart-goods-action-button
+      text="{{I18n.t('buyNow')}}"
+      bind:click="onClickButton"
+    />
+  </smart-goods-action>
+</demo-block>
+
+<demo-block title="{{I18n.t('hintInformation')}}">
+  <smart-goods-action custom-class="goods-action-position" safe-area-inset-bottom="{{ false }}">
+    <smart-goods-action-icon icon="chat-o" text="{{I18n.t('customerService')}}" dot />
+    <smart-goods-action-icon icon="cart-o" text="{{I18n.t('shoppingCart')}}" info="5" />
+    <smart-goods-action-icon icon="shop-o" text="{{I18n.t('store')}}" />
+    <smart-goods-action-button text="{{I18n.t('addToCart')}}" type="warning" />
+    <smart-goods-action-button text="{{I18n.t('buyNow')}}" />
+  </smart-goods-action>
+</demo-block>
+
+<demo-block title="{{I18n.t('customButtonColor')}}">
+  <smart-goods-action custom-class="goods-action-position" safe-area-inset-bottom="{{ false }}">
+    <smart-goods-action-icon icon="chat-o" text="{{I18n.t('customerService')}}" />
+    <smart-goods-action-icon icon="shop-o" text="{{I18n.t('shop')}}" />
+    <smart-goods-action-button color="#be99ff" type="warning" text="{{I18n.t('addToCart')}}" />
+    <smart-goods-action-button color="#7232dd" text="{{I18n.t('buyNow')}}" />
+  </smart-goods-action>
+</demo-block>
+
+<demo-block title="{{I18n.t('simpleButton')}}">
+  <smart-goods-action custom-class="goods-action-position" safe-area-inset-bottom="{{ false }}">
+    <smart-goods-action-icon icon="chat-o" text="{{I18n.t('customerService')}}" />
+    <smart-goods-action-icon icon="shop-o" text="{{I18n.t('store')}}" />
+    <smart-goods-action-button color="#7232dd"  text="{{I18n.t('addToCart')}}" type="warning" />
+    <smart-goods-action-button plain color="#7232dd" text="{{I18n.t('buyNow')}}" />
+  </smart-goods-action>
+</demo-block>
+
+<smart-toast id="smart-toast-good-action" />

package/packages/goods-action/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/packages/goods-action/index.less

@@ -0,0 +1,21 @@
+@import '../common/style/var.less';
+
+.smart-goods-action {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  box-sizing: content-box;
+  height: var(--goods-action-height, @goods-action-height);
+  background-color: var(
+    --goods-action-background-color,
+    @goods-action-background-color
+  );
+
+  &--safe {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}

package/packages/goods-action/index.ts

@@ -0,0 +1,17 @@
+import { SmartComponent } from '../common/component';
+import { useChildren } from '../common/relation';
+
+SmartComponent({
+  relation: useChildren('goods-action-button', function () {
+    this.children.forEach(item => {
+      item.updateStyle();
+    });
+  }),
+
+  props: {
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true,
+    },
+  },
+});

package/packages/goods-action/index.wxml

@@ -0,0 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="custom-class {{ utils.bem('goods-action', { safe: safeAreaInsetBottom }) }}">
+  <slot />
+</view>