feat: 增加小程序行业 SDK 组件定义（商品收藏按钮、SKU 按钮、店铺关注卡片）

packages/mona-clients/mona-client-mini/src/components/index.ts

@@ -41,6 +41,9 @@ import {
   RichTextProps,
   MemberButtonProps,
   CouponCardProps,
+  ProductFollowButtonProps,
+  SkuButtonProps,
+  ShopFollowCardProps,
 } from '@bytedance/mona';
 
 export const Text = createBaseComponent<TextProps>(ComponentType['text']);
@@ -85,6 +88,9 @@ export const Ad = createBaseComponent<AdProps>(ComponentType['ad']);
 export const OpenData = createBaseComponent<OpenDataProps>(ComponentType['open-data']);
 export const MemberButton = createBaseComponent<MemberButtonProps>(ComponentType['member-button']);
 export const CouponCard = createBaseComponent<CouponCardProps>(ComponentType['coupon-card']);
+export const ProductFollowButton = createBaseComponent<ProductFollowButtonProps>(ComponentType['product-follow-button']);
+export const SkuButton = createBaseComponent<SkuButtonProps>(ComponentType['sku-button']);
+export const ShopFollowCard = createBaseComponent<ShopFollowCardProps>(ComponentType['shop-follow-card']);
 
 export const Link = (function createBaseComponent() {
   const Component = React.forwardRef(({ children, to }: any, ref) =>

packages/mona-manager-plugins/mona-service-targets/mona-service-target-mini/src/config/industry.ts

@@ -1,3 +1,6 @@
 export const industryComponents = {
   'coupon-card': 'ext://industry/coupon-card',
+  'product-follow-button': 'ext://industry/product-follow-button',
+  'sku-button': 'ext://industry/sku-button',
+  'shop-follow-card': 'ext://industry/shop-follow-card',
 };

packages/mona-manager-plugins/mona-service-targets/mona-service-target-mini/src/target/mini/baseComponents/ProductFollowButton/alias.ts

@@ -0,0 +1,23 @@
+import { bubbleEventsAlias, hoverPropAlias, basePropAlias, propAliasMap } from '../prop';
+import { ProductFollowButtonAlias as Alias } from '../type';
+
+const alias: Alias = {
+  ...basePropAlias,
+  ...hoverPropAlias,
+  ...bubbleEventsAlias,
+  shopId: propAliasMap.shopId,
+  productId: propAliasMap.productId,
+  disabled: propAliasMap.disabled,
+  noStyle: propAliasMap.noStyle,
+  size: propAliasMap.size,
+  disabledClassName: propAliasMap.disabledClassName,
+  followedClassName: propAliasMap.followedClassName,
+  followedText: propAliasMap.followedText,
+  unfollowedClassName: propAliasMap.unfollowedClassName,
+  unfollowedText: propAliasMap.unfollowedText,
+  onFollowed: propAliasMap['bind:followed'],
+  onUnfollowed: propAliasMap['bind:unfollowed'],
+  onError: propAliasMap.onError,
+};
+
+export default alias;

packages/mona-manager-plugins/mona-service-targets/mona-service-target-mini/src/target/mini/baseComponents/ShopFollowCard/alias.ts

@@ -0,0 +1,14 @@
+import { bubbleEventsAlias, hoverPropAlias, basePropAlias, propAliasMap } from '../prop';
+import { ShopFollowCardAlias as Alias } from '../type';
+
+const alias: Alias = {
+  ...basePropAlias,
+  ...hoverPropAlias,
+  ...bubbleEventsAlias,
+  shopId: propAliasMap.shopId,
+  onFollowed: propAliasMap['bind:followed'],
+  onUnfollowed: propAliasMap['bind:unfollowed'],
+  onError: propAliasMap.onError,
+};
+
+export default alias;

packages/mona-manager-plugins/mona-service-targets/mona-service-target-mini/src/target/mini/baseComponents/SkuButton/alias.ts

@@ -0,0 +1,21 @@
+import { bubbleEventsAlias, hoverPropAlias, basePropAlias, propAliasMap } from '../prop';
+import { SkuButtonAlias as Alias } from '../type';
+
+const alias: Alias = {
+  ...basePropAlias,
+  ...hoverPropAlias,
+  ...bubbleEventsAlias,
+  shopId: propAliasMap.shopId,
+  productId: propAliasMap.productId,
+  actionType: propAliasMap.actionType,
+  disabled: propAliasMap.disabled,
+  noStyle: propAliasMap.noStyle,
+  size: propAliasMap.size,
+  type: propAliasMap.type,
+  disabledClassName: propAliasMap.disabledClassName,
+  text: propAliasMap.text,
+  onSuccess: propAliasMap['bind:success'],
+  onError: propAliasMap.onError,
+};
+
+export default alias;

packages/mona-manager-plugins/mona-service-targets/mona-service-target-mini/src/target/mini/baseComponents/index.ts

@@ -35,6 +35,9 @@ import map from './Map/alias';
 import camera from './Camera/alias';
 import memberButton from './MemberButton/alias';
 import couponCard from './CouponCard/alias';
+import productFollowButton from './ProductFollowButton/alias';
+import skuButton from './SkuButton/alias';
+import shopFollowCard from './ShopFollowCard/alias';
 
 // import map from './Ca/alias';
 // import * as Components from '@bytedance/mona-components';
@@ -366,6 +369,18 @@ export const ejsParamsObj: Record<
     reactComponentName: 'CouponCard',
     alias: couponCard,
   },
+  [ComponentType['product-follow-button']]: {
+    reactComponentName: 'ProductFollowButton',
+    alias: productFollowButton,
+  },
+  [ComponentType['sku-button']]: {
+    reactComponentName: 'SkuButton',
+    alias: skuButton,
+  },
+  [ComponentType['shop-follow-card']]: {
+    reactComponentName: 'ShopFollowCard',
+    alias: shopFollowCard,
+  },
 };
 
 const baseDefaultProps: Record<string, string | number | boolean> = {

packages/mona-manager-plugins/mona-service-targets/mona-service-target-mini/src/target/mini/baseComponents/type.ts

@@ -36,6 +36,9 @@ import {
   RichTextProps,
   MemberButtonProps,
   CouponCardProps,
+  ProductFollowButtonProps,
+  SkuButtonProps,
+  ShopFollowCardProps,
 } from '@bytedance/mona';
 
 type Alias = string;
@@ -77,3 +80,6 @@ export type TextAlias = AliasMap<TextProps>;
 export type RichTextAlias = AliasMap<RichTextProps>;
 export type MemberButtonAlias = AliasMap<MemberButtonProps>;
 export type CouponCardAlias = AliasMap<CouponCardProps>;
+export type ProductFollowButtonAlias = AliasMap<ProductFollowButtonProps>;
+export type SkuButtonAlias = AliasMap<SkuButtonProps>;
+export type ShopFollowCardAlias = AliasMap<ShopFollowCardProps>;

packages/mona-shared/src/constants.ts

@@ -46,6 +46,9 @@ const MiniComponentType = {
   ptext: '36',
   'member-button': '37',
   'coupon-card': '38',
+  'product-follow-button': '39',
+  'sku-button': '40',
+  'shop-follow-card': '41',
 };
 
 // TODO:开发模式语义化, 小程序运行时 build两份代码, index.production.js, index.development.js

packages/mona/src/BaseComponents.ts

@@ -144,6 +144,44 @@ export interface CouponCardProps extends BaseProps {
   isShowCouponInfo: boolean;
   productId: string;
 }
+
+export interface ProductFollowButtonProps extends Pick<BaseProps, 'style' | 'className' | 'hidden'> {
+  shopId: string; // 店铺 ID
+  productId: string; // 商品 ID
+  disabled?: boolean; // 是否禁用，默认 false
+  noStyle?: boolean; // 是否关闭默认样式，默认 false
+  size?: 'default' | 'mini'; // 按钮的大小，默认 mini
+  disabledClassName?: string; // 禁用状态下的样式类
+  followedClassName?: string; // 已收藏状态下的样式类
+  followedText?: string; // 已收藏文本，默认 取消收藏
+  unfollowedClassName?: string; // 未收藏状态下的样式类
+  unfollowedText?: string; // 未收藏文本，默认 收藏
+  onFollowed?: EventHandler; // 收藏成功回调
+  onUnfollowed?: EventHandler; // 取消收藏成功回调
+  onError?: EventHandler;
+}
+
+export interface SkuButtonProps extends Pick<BaseProps, 'style' | 'className' | 'hidden'> {
+  shopId: string; // 商品 ID
+  productId: string; // 店铺 ID
+  actionType?: 1 | 2; // SKU 行为，可取值 1（加购）、2（立购），默认 2
+  disabled?: boolean; // 是否禁用，默认 false
+  noStyle?: boolean; // 是否关闭默认样式，默认 false
+  size?: 'default' | 'mini'; // 按钮的大小，默认 default
+  type?: 'default' | 'primary'; // 按钮的样式类型，默认 primary
+  disabledClassName?: string; // 禁用状态下的样式类
+  text?: string; // 按钮文案，默认 立即购买
+  onSuccess?: EventHandler; // 打开成功回调
+  onError?: EventHandler;
+}
+
+export interface ShopFollowCardProps extends Pick<BaseProps, 'style' | 'className' | 'hidden'> {
+  shopId: string;
+  onFollowed?: EventHandler; // 关注成功回调
+  onUnfollowed?: EventHandler; // 取消关注成功回调
+  onError?: EventHandler;
+}
+
 export interface ProgressProps extends BaseProps {
   percent?: number;
   strokeWidth?: number;