@yorkjs/hive-ui 0.0.2 → 0.0.4

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@yorkjs/hive-ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Hive UI - Taro React component library",
   "main": "src/index.ts",
   "module": "src/index.ts",
   "types": "src/index.ts",
+  "sideEffects": [
+    "**/*.styl",
+    "**/*.css"
+  ],
   "files": [
     "src"
   ],

package/src/components/Checkbox/index.module.styl

@@ -0,0 +1,68 @@
+@import '../../styles/mixin.styl'
+
+.checkbox-component
+  display flex
+  flex-direction row
+  align-items center
+  cursor pointer
+  position relative
+
+  &:active
+    &:not(.is-disabled)
+      opacity 0.7
+
+  &:after
+    position absolute
+    content ''
+    top -6PX
+    bottom -6PX
+    left -6PX
+    right -6PX
+
+  // 选中状态文字颜色
+  &.is-checked
+    .label-text
+      color var(--primary)
+
+  // ✨ 禁用状态逻辑：不使用透明度
+  &.is-disabled
+    cursor not-allowed
+    .label-text
+      color var(--textPlaceholder)
+
+  // 大尺寸样式
+  &.size-large
+    .checkbox-icon-container
+      width 36PX
+      height 36PX
+    .label-text
+      font-size 16PX
+      margin-left 12PX
+
+  &.size-small
+    .checkbox-icon-container
+      width 16PX
+      height 16PX
+    .label-text
+      font-size 12PX
+      margin-left 6PX
+
+  // 图标容器
+  .checkbox-icon-container
+    display flex
+    align-items center
+    justify-content center
+    width 20PX
+    height 20PX
+    line-height 1
+    flex-shrink 0 // 防止被压缩
+    overflow visible
+
+  // 文字样式
+  .label-text
+    color var(--textContent)
+    font-size 13PX
+    margin-left 6PX
+    line-height 1
+    &.is-app-android
+      padding-top 1.5PX

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,118 @@
+import React, { useMemo } from 'react'
+import { View, Text } from '@tarojs/components'
+
+import { isAndroid, isApp } from '../../util/env'
+import { formatClassNames } from '../../util/function'
+
+import Icon from '../Icon'
+
+import styles from './index.module.styl'
+
+export interface CheckboxProps {
+  label?: string
+  checked: boolean
+  disabled?: boolean
+  readOnly?: boolean
+  size?: 'normal' | 'large' | 'small'
+  onChange?: (checked: boolean) => void
+  className?: string
+}
+
+const isDark = false
+
+const Checkbox: React.FC<CheckboxProps> = (props) => {
+  const {
+    label,
+    checked = false,
+    disabled = false,
+    readOnly = false,
+    size = 'normal',
+    onChange,
+    className,
+  } = props
+
+  const handlePress = (e: any) => {
+    if (disabled || readOnly) return
+    onChange?.(!checked)
+  }
+
+  const iconSize = size === 'large' ? 36 : (size === 'small' ? 16 : 20)
+
+  const getIconColor = () => {
+    if (disabled) return 'var(--extraColor)'
+    if (checked) return 'var(--primary)'
+    return isDark ? '#ffffff' : 'var(--textPlaceholder)'
+  }
+
+  const iconName = checked ? 'check-circle-fill' : 'circle'
+
+  const iconNode = (
+    <Icon
+      name={iconName}
+      size={`${iconSize}PX`}
+      color={getIconColor()}
+    />
+  )
+
+  const iconElement = useMemo(() => {
+    if (disabled) {
+      return (
+        <View
+          style={{
+            width: `${iconSize}PX`,
+            height: `${iconSize}PX`,
+            borderRadius: `${iconSize / 2}PX`,
+            backgroundColor: 'var(--containerInner)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            boxSizing: 'border-box'
+          }}
+        >
+          <Icon
+            name={iconName}
+            size={`${iconSize}PX`}
+            color={checked ? 'var(--extraColor)' : 'var(--textPlaceholder)'}
+          />
+        </View>
+      )
+    }
+    return iconNode
+  }, [disabled, checked, iconName, iconSize])
+
+  return (
+    <View
+      onClick={handlePress}
+      className={formatClassNames(
+        styles['checkbox-component'],
+        {
+          [styles['is-checked']]: checked,
+          [styles['is-disabled']]: disabled,
+          [styles['size-large']]: size === 'large',
+          [styles['size-small']]: size === 'small',
+        },
+        className
+      )}
+    >
+      <View className={styles['checkbox-icon-container']}>
+        {iconElement}
+      </View>
+
+      {/* TODO: 临时解决 app 上 Android文字偏上对齐问题 */}
+      {label && (
+        <Text
+          className={formatClassNames(
+            styles['label-text'],
+            {
+              [styles['is-app-android']]: !!(isApp && isAndroid)
+            }
+          )}
+        >
+          {label}
+        </Text>
+      )}
+    </View>
+  )
+}
+
+export default React.memo(Checkbox)

package/src/components/Tag/index.module.styl

@@ -0,0 +1,31 @@
+@import '../../styles/mixin.styl'
+
+.tag-component
+  display inline-flex
+  align-items center
+  justify-content center
+  padding 0 8PX
+  height 20PX
+  line-height 20PX
+  border-radius 4PX
+  text-align center
+  font-size 12PX
+  white-space nowrap
+  box-sizing border-box
+
+  halfBorder(top left right bottom, var(--tag-border-color, transparent), 8PX)
+
+  .tag-text
+    line-height 1
+
+.type-default
+  --tag-border-color: var(--lineBorder)
+  :global(.is-dark)
+    --tag-border-color: transparent
+
+.tag-component:before
+  border-color: var(--tag-border-color, transparent)
+
+
+.type-primary, .type-info, .type-success, .type-error
+  border none

package/src/components/Tag/index.tsx

@@ -0,0 +1,126 @@
+import React, { useMemo } from 'react'
+import { View, Text } from '@tarojs/components'
+
+import { formatClassNames } from '../../util/function'
+
+import styles from './index.module.styl'
+
+export type TagType = 'default'
+  | 'success'
+  | 'info'
+  | 'error'
+  | 'primary'
+  | 'warning'
+  | 'light-info'
+  | 'light-primary'
+  | 'light-success'
+  | 'light-error'
+  | 'light-warning'
+
+interface TagProps {
+  type?: TagType
+  text?: string | React.ReactNode
+  className?: string
+  style?: React.CSSProperties
+}
+const isDark = false
+const Tag: React.FC<TagProps> = ({
+  type = 'default',
+  text,
+  className,
+  style
+}) => {
+  const themeSelect = (light: string, dark: string) => (isDark ? dark : light)
+
+  const tagStyle = useMemo(() => {
+    const colors = {
+      primary: 'var(--primary)',
+      success: 'var(--success)',
+      error: 'var(--error)',
+      info: 'var(--textTitle)',
+      warning: 'var(--warning)',
+    }
+
+    const mapping = {
+      default: {
+        color: 'var(--textTitle)',
+        backgroundColor: themeSelect('rgba(255, 255, 255, 0.16)', 'var(--containerInner)'),
+      },
+      info: {
+        color: 'var(--textTitle)',
+        backgroundColor: themeSelect('rgba(245, 245, 245, 1)', 'var(--containerInner)'),
+      },
+      'light-info': {
+        color: 'var(--textMuted)',
+        backgroundColor: themeSelect('rgba(245, 245, 245, 1)', 'var(--containerMedium)'),
+      },
+      warning: {
+        color: '#FFFFFF',
+        backgroundColor: colors.warning,
+      },
+      'light-warning': {
+        color: colors.warning,
+        backgroundColor: 'rgba(255,103,0,0.2)',
+      },
+      primary: {
+        color: '#FFFFFF',
+        backgroundColor: colors.primary,
+      },
+      'light-primary': {
+        color: colors.primary,
+        backgroundColor: 'rgba(255, 103, 0, 0.2)',
+      },
+      success: {
+        color: '#FFFFFF',
+        backgroundColor: colors.success,
+      },
+      'light-success': {
+        color: colors.success,
+        backgroundColor: 'rgba(3, 190, 2, 0.2)',
+      },
+      error: {
+        color: '#FFFFFF',
+        backgroundColor: colors.error,
+      },
+      'light-error': {
+        color: colors.error,
+        backgroundColor: 'rgba(255, 49, 65, 0.2)',
+      },
+    }
+
+    return mapping[type] || mapping.default
+  }, [type])
+
+  const finalStyle = useMemo(() => {
+    const s: React.CSSProperties & { [key: string]: any } = {
+      backgroundColor: tagStyle.backgroundColor,
+      color: tagStyle.color,
+      ...style,
+    }
+
+    if (style?.borderColor) {
+      s['--tag-border-color'] = style.borderColor
+    }
+
+    return s
+  }, [tagStyle, style])
+
+  return (
+    <View
+      className={formatClassNames(
+        styles['tag-component'],
+        styles[`type-${type}`],
+        className
+      )}
+      style={finalStyle}
+    >
+      <Text
+        className={styles['tag-text']}
+      >
+        {text}
+      </Text>
+    </View>
+  )
+}
+
+export default Tag

package/src/constant/mall.ts

@@ -0,0 +1,22 @@
+// 商品类型
+export const MALL_PRODUCT_TYPE_REAL    = 1
+export const MALL_PRODUCT_TYPE_VIRTUAL = 2
+export const MALL_PRODUCT_TYPE_SERVICE = 3
+
+// 快递发货
+export const MALL_PRODUCT_DELIVERY_TYPE_EXPRESS = 1
+// 到店自提
+export const MALL_PRODUCT_DELIVERY_TYPE_SELF = 2
+// 门店配送
+export const MALL_PRODUCT_DELIVERY_TYPE_SHOP = 3
+// 堂食
+export const MALL_PRODUCT_DELIVERY_TYPE_DINE = 4
+
+// 秒杀活动
+export const PROMOTION_ACTIVITY_TYPE_FLASH = 1
+// 品牌活动
+export const PROMOTION_ACTIVITY_TYPE_BRAND = 2
+// 热点活动
+export const PROMOTION_ACTIVITY_TYPE_HOT   = 3
+//买赠活动
+export const PROMOTION_ACTIVITY_TYPE_PRESENT = 4

package/src/index.ts

@@ -1,5 +1,8 @@
 export { default as NumberKeyboard } from './components/NumberKeyboard'
 export { default as Cell, setCellConfig } from './components/Cell'
 export { default as Icon } from './components/Icon'
+export { default as Checkbox } from './components/Checkbox'
+export { default as Tag } from './components/Tag'
 
-export { default as FlowItem } from './item/FlowItem'
+export { default as FlowItem } from './item/FlowItem'
+export { default as ProductCard } from './item/ProductCard'

package/src/item/ProductCard/index.module.styl

@@ -0,0 +1,258 @@
+@import '../../styles/mixin.styl'
+
+// 颜色与字号变量对照表 (基于 RN getStyles)
+$F_TITLE = 15PX        // RN 15
+$F_PRICE_VAL = 14PX    // RN 14
+$F_PRICE_SYM = 10PX    // RN 10
+$F_INFO = 12PX         // RN 12 (库存/销量/条码)
+$F_TAG_TYPE = 11PX     // RN 11 (商品类型实物/虚拟/服务)
+$F_TAG_NORMAL = 10PX   // RN 10 (活动标签/配送方式)
+$F_SPEC = 11PX         // RN 11
+$F_CUSTOM = 10PX       // RN 10 (做法描述)
+$F_BUY_COUNT = 14PX    // RN 14
+
+.item-container
+  position relative
+  display flex
+  flex-direction column
+  padding 15PX 10PX    // 对齐 RN: paddingVertical: 15, paddingHorizontal: 10
+  background-color var(--containerCard)
+  box-sizing border-box
+
+.card-main-body
+  display flex
+  flex-direction row
+  align-items flex-start
+  width 100%
+
+.checkbox-container
+  height 72PX
+  margin-right 10PX
+  display flex
+  justify-content center
+  align-items center
+  flex-shrink 0
+
+.image-container
+  position relative
+  margin-right 10PX
+  flex-shrink 0
+  width 72PX
+  height 72PX
+
+  .product-image
+    width 72PX
+    height 72PX
+    border-radius 10PX
+    background-color var(--containerInner)
+
+  .status-overlay
+    position absolute
+    top 0
+    left 0
+    bottom 0
+    right 0
+    border-radius 10PX
+    background-color rgba(0, 0, 0, 0.3)
+    display flex
+    justify-content center
+    align-items center
+    z-index 2
+
+    .status-text
+      font-size 12PX
+      color #FFF
+      line-height 1
+
+.content-container
+  flex 1
+  display flex
+  flex-direction column
+  justify-content space-between
+  min-height 72PX
+  min-width 0
+
+.content-body
+  flex 1
+  display flex
+  flex-direction column
+
+.title-row
+  display flex
+  flex-direction row
+  align-items center
+  margin-bottom 2PX
+
+.product-tag-container
+  display flex
+  align-items center
+  margin-right 5PX
+  flex-shrink 0
+  line-height 1
+
+.product-tag
+  height 15PX
+  line-height 15PX
+  padding 1PX 3PX
+  border-radius 3PX
+  font-size 9PX
+
+.title
+  flex 1
+  font-size $F_TITLE
+  color var(--textTitle)
+  line-height 1.4
+  font-weight bold
+  lineClamp(1)
+
+.second-row
+  margin-top 2PX
+  width 100%
+  white-space nowrap
+  .second-row-inner
+    display flex
+    flex-direction row
+    align-items center
+
+.info-line
+  width 1PX
+  height 10PX
+  margin 0 5PX
+  halfBorder(left, var(--textContent))
+
+.info-text
+  font-size $F_INFO
+  color var(--textTitle)
+
+.primary-text
+  font-size $F_INFO
+  color var(--primary)
+
+.stock-and-sale
+  display flex
+  flex-direction row
+  align-items center
+  .stock-box
+    display flex
+    flex-direction row
+    margin-right 5PX
+  .stock-text
+    font-size $F_INFO
+    color var(--primary)
+    margin-left 5PX
+
+.tag-row
+  display flex
+  flex-direction row
+  align-items center
+  flex-wrap wrap
+  gap 5PX
+  margin-top 5PX
+
+.delivery-tag
+  padding 1PX 5PX
+  border-radius 3PX
+  font-size $F_TAG_NORMAL
+  height 15PX
+  line-height 15PX
+
+.activity-tag
+  display flex
+  flex-direction row
+  align-items center
+  halfBorder(top left right bottom, #F21902, 6PX)
+  height 15PX
+  line-height 15PX
+  border-radius 3PX
+  overflow hidden
+
+.activity-tag-badge
+  padding 0 3PX
+  height 100%
+  background-color #F21902
+  border-top-left-radius 3PX
+  border-bottom-right-radius 3PX
+  display flex
+  align-items center
+  justify-content center
+
+.activity-tag-badge-text
+  font-size $F_TAG_NORMAL
+  color #FFF
+  line-height 1
+
+.activity-tag-content
+  display flex
+  padding 1PX 5PX
+
+.activity-tag-text
+  font-size $F_TAG_NORMAL
+  color #F21902
+  line-height 1
+
+.spec-text
+  font-size $F_SPEC
+  color var(--textContent)
+  line-height 15PX
+  margin-top 5PX
+  lineClamp(1)
+
+.customization-text
+  font-size $F_CUSTOM
+  color var(--textMuted)
+  line-height 15PX
+  margin-top 5PX
+  lineClamp(3)
+
+.content-bottom
+  display flex
+  flex-direction row
+  align-items center
+  justify-content space-between
+  margin-top 5PX
+
+.price-container
+  display flex
+  flex-direction row
+  align-items center
+
+.price-row
+  display flex
+  flex-direction row
+  align-items baseline
+
+.price-symbol
+  font-size $F_PRICE_SYM
+  color var(--textMoney)
+  font-weight bold
+  margin-right 1PX
+
+.price-value
+  font-size $F_PRICE_VAL
+  color var(--textMoney)
+  font-weight bold
+
+.original-price
+  font-size 11PX
+  color var(--textMuted)
+  text-decoration line-through
+  margin-left 5PX
+
+.buy-count-value
+  font-size $F_BUY_COUNT
+  color var(--textContent)
+  margin-left 10PX
+
+.delete-container
+  position absolute
+  top 16PX
+  right 11PX
+  padding 5PX
+  z-index 10
+
+.delete-icon
+  color var(--textContent)
+
+.card-footer
+  width 100%
+  margin-top 12PX

package/src/item/ProductCard/index.tsx

@@ -0,0 +1,413 @@
+import React, { useMemo } from 'react'
+import { View, Text, ScrollView, Image, ITouchEvent } from '@tarojs/components'
+
+import { formatClassNames, isEmpty } from '../../util/function'
+
+import Tag from '../../components/Tag'
+import Icon from '../../components/Icon'
+import Checkbox from '../../components/Checkbox'
+
+import styles from './index.module.styl'
+
+import {
+  MALL_PRODUCT_TYPE_REAL,
+  MALL_PRODUCT_TYPE_VIRTUAL,
+  MALL_PRODUCT_TYPE_SERVICE,
+  MALL_PRODUCT_DELIVERY_TYPE_EXPRESS,
+  MALL_PRODUCT_DELIVERY_TYPE_SELF,
+  MALL_PRODUCT_DELIVERY_TYPE_SHOP,
+  MALL_PRODUCT_DELIVERY_TYPE_DINE,
+  PROMOTION_ACTIVITY_TYPE_FLASH,
+  PROMOTION_ACTIVITY_TYPE_BRAND,
+  PROMOTION_ACTIVITY_TYPE_HOT,
+  PROMOTION_ACTIVITY_TYPE_PRESENT,
+} from '../../constant/mall'
+
+export interface IProductCardLabels {
+  product_type?: { real: string; virtual: string; service: string }
+  delivery_type?: { dine: string; self_pickup: string; delivery: string }
+  activity_type?: { flash: string; brand: string; hot: string; present: string }
+  present_badge?: string
+  stock_label?: string
+  sale_label?: string
+  multiple_spec?: string
+  barcode_label?: string
+  spec_label?: string
+  sold_out?: string
+  offline?: string
+}
+
+/** 商品卡片组件属性 */
+export interface IProductCardProps {
+  /** 外部样式类 */
+  className?: string
+  /** 商品图片对象 */
+  image: { url: string }
+  /** 是否显示售罄标记 */
+  showSoldOut?: boolean
+  /** 是否显示已下架标记 */
+  showOffline?: boolean
+  /** 商品标题 */
+  title: string
+  /** 标题最大显示行数 (默认1) */
+  titleMaxLines?: number
+  /** 商品类型：实物/虚拟/服务 */
+  productType?: number
+  /** 是否显示“多规格”标签 */
+  showMultipleSpec?: boolean
+  /** 库存数量文案 */
+  stockCount?: string | number
+  /** 销量文案 */
+  saleCount?: string | number
+  /** 商品条码 */
+  barcode?: string
+  /** 规格描述文案 (如: 红色, 大号) */
+  spec?: string
+  /** 规格描述最大显示行数 (默认1) */
+  specMaxLines?: number
+  /** 活动类型：秒杀/品牌/热点/满赠 */
+  activityType?: number
+  /** 配送方式集合：堂食/自提/外送 */
+  deliveryTypes?: number[]
+  /** 做法/定制化信息描述 */
+  customization?: string
+  /** 做法描述最大显示行数 (默认3) */
+  customizationMaxLines?: number
+  /** 售价 */
+  salePrice: string | number
+  /** 原价 (划线价) */
+  originalPrice?: string | number
+  /** 已购数量 (显示为 xN) */
+  buyCount?: number
+  /** 是否显示左侧勾选框 */
+  showCheckbox?: boolean
+  /** 勾选框是否选中 */
+  checkboxChecked?: boolean
+  /** 勾选框是否禁用 */
+  checkboxDisabled?: boolean
+  /** 点击勾选框或卡片触发 (当 checkbox 可用时) */
+  onCheckboxClick?: () => void
+  /** 是否显示右上角删除按钮 */
+  showDelete?: boolean
+  /** 点击删除按钮回调 */
+  onDelete?: () => void
+  /** 右下角自定义操作区域 (与 buyCount 互斥) */
+  action?: React.ReactNode
+  /** 国际化标签注入 */
+  labels?: IProductCardLabels
+  // 卡片点击事件
+  onClick?: () => void
+  children?: React.ReactNode
+}
+
+const DEFAULT_LABELS: IProductCardLabels = {
+  product_type: { real: '实物', virtual: '虚拟', service: '服务' },
+  delivery_type: { dine: '堂食', self_pickup: '到店自取', delivery: '送货上门' },
+  activity_type: { flash: '秒杀活动', brand: '品牌活动', hot: '热点活动', present: '买赠活动' },
+  present_badge: '赠',
+  stock_label: '库存',
+  sale_label: '销量',
+  multiple_spec: '多规格',
+  barcode_label: '条码',
+  spec_label: '规格',
+  sold_out: '售罄',
+  offline: '已下架'
+}
+
+const ProductCard: React.FC<IProductCardProps> = (props) => {
+  const {
+    image,
+    title,
+    titleMaxLines = 1,
+    productType,
+    showMultipleSpec,
+    stockCount,
+    saleCount,
+    barcode,
+    spec,
+    specMaxLines = 1,
+    activityType,
+    deliveryTypes = [],
+    customization,
+    customizationMaxLines = 3,
+    salePrice,
+    originalPrice,
+    buyCount,
+    showSoldOut = false,
+    showOffline = false,
+    showCheckbox = false,
+    checkboxChecked = false,
+    checkboxDisabled = false,
+    onCheckboxClick,
+    showDelete,
+    onDelete,
+    action,
+    className,
+    labels: customLabels,
+    onClick,
+    children
+  } = props
+
+  const handleCardClick = (e: ITouchEvent) => {
+    if (showCheckbox) {
+      if (!checkboxDisabled) {
+        onCheckboxClick?.()
+      }
+    }
+    else {
+      onClick?.()
+    }
+  }
+
+  const labels = useMemo(() => ({
+    ...DEFAULT_LABELS,
+    ...customLabels,
+    product_type: { ...DEFAULT_LABELS.product_type, ...customLabels?.product_type },
+    delivery_type: { ...DEFAULT_LABELS.delivery_type, ...customLabels?.delivery_type },
+    activity_type: { ...DEFAULT_LABELS.activity_type, ...customLabels?.activity_type }
+  }), [customLabels])
+
+  const productTypeTag = useMemo(() => {
+    if (productType === undefined) return null
+    const colorMap: Record<number, { color: string; text: string | undefined }> = {
+    [MALL_PRODUCT_TYPE_REAL]: {
+      color: 'var(--primary)',
+      text: labels.product_type?.real
+    },
+    [MALL_PRODUCT_TYPE_VIRTUAL]: {
+      color: '#E4B700',
+      text: labels.product_type?.virtual
+    },
+    [MALL_PRODUCT_TYPE_SERVICE]: {
+      color: '#03BE02',
+      text: labels.product_type?.service
+    },
+  }
+    const item = colorMap[productType]
+    if (!item) return null
+    return (
+      <View className={styles['product-tag-container']}>
+        <Tag
+          type='light-warning'
+          text={item.text}
+          className={styles['product-tag']}
+          style={{ backgroundColor: item.color, color: '#fff' }}
+        />
+      </View>
+    )
+  }, [productType, labels])
+
+  const deliveryTags = useMemo(() => {
+    if (isEmpty(deliveryTypes)) return null
+    return deliveryTypes.map(type => {
+      let tagProps: any = null
+      if (type === MALL_PRODUCT_DELIVERY_TYPE_DINE) {
+        tagProps = {
+          text: labels.delivery_type?.dine,
+          color: '#2db7f5',
+          bg: 'rgba(145, 213, 255, 0.16)'
+        }
+      }
+      else if (type === MALL_PRODUCT_DELIVERY_TYPE_SELF) {
+        tagProps = {
+          text: labels.delivery_type?.self_pickup,
+          color: '#FF3D15',
+          bg: 'rgba(255,61,21,0.16)'
+        }
+      }
+      else if (type === MALL_PRODUCT_DELIVERY_TYPE_EXPRESS || type === MALL_PRODUCT_DELIVERY_TYPE_SHOP) {
+        tagProps = {
+          text: labels.delivery_type?.delivery,
+          color: '#FF8901',
+          bg: 'rgba(255,137,1,0.16)'
+        }
+      }
+      if (!tagProps) return null
+      return (
+        <Tag
+          key={type}
+          text={tagProps.text}
+          style={{ color: tagProps.color, backgroundColor: tagProps.bg, borderColor: tagProps.color }}
+          className={styles['delivery-tag']}
+        />
+      )
+    })
+  }, [deliveryTypes, labels])
+
+    const stockAndSaleElem = useMemo(() => {
+    if (!stockCount && !saleCount) return null
+    return (
+      <View className={styles['stock-and-sale']}>
+        {stockCount && (
+          <View className={styles['stock-box']}>
+            <Text className={styles['info-text']}>{labels.stock_label}</Text>
+            <Text className={styles['stock-text']}>{stockCount}</Text>
+          </View>
+        )}
+        {saleCount && (
+          <Text className={styles['info-text']}>
+            {labels.sale_label} {saleCount}
+          </Text>
+        )}
+      </View>
+    )
+  }, [stockCount, saleCount, labels])
+
+  return (
+    <View className={formatClassNames(styles['item-container'], className)} onClick={handleCardClick}>
+      <View className={styles['card-main-body']}>
+        {showCheckbox && (
+          <View className={styles['checkbox-container']}>
+            <Checkbox
+              checked={checkboxChecked}
+              disabled={checkboxDisabled}
+              readOnly
+            />
+          </View>
+        )}
+        <View className={styles['image-container']}>
+          <Image
+            src={image?.url}
+            className={styles['product-image']}
+            mode='aspectFill'
+          />
+          {(showSoldOut || showOffline) && (
+            <View className={styles['status-overlay']}>
+              <Text className={styles['status-text']}>
+                {showSoldOut ? labels.sold_out : labels.offline}
+              </Text>
+            </View>
+          )}
+        </View>
+        <View className={styles['content-container']}>
+          <View className={styles['content-body']}>
+            <View className={styles['title-row']} style={{ marginRight: showDelete ? '30PX' : '0' }}>
+              {productTypeTag}
+              <Text className={styles['title']} style={{ WebkitLineClamp: titleMaxLines }}>{title}</Text>
+            </View>
+            {(showMultipleSpec || stockCount || saleCount || barcode) && (
+              <ScrollView scrollX className={styles['second-row']} showScrollbar={false}>
+                <View className={styles['second-row-inner']}>
+                  {showMultipleSpec && <Text className={styles['primary-text']}>{labels.multiple_spec}</Text>}
+                  {showMultipleSpec && stockAndSaleElem && <View className={styles['info-line']} />}
+                  {stockAndSaleElem}
+                  {((showMultipleSpec || stockAndSaleElem) && barcode) && <View className={styles['info-line']} />}
+                  {barcode && <Text className={styles['info-text']}>{labels.barcode_label} {barcode}</Text>}
+                </View>
+              </ScrollView>
+            )}
+            {(activityType || deliveryTags) && (
+              <View className={styles['tag-row']}>
+                {activityType && labels.activity_type && (
+                  <View className={styles['activity-tag']}>
+                    {activityType === PROMOTION_ACTIVITY_TYPE_PRESENT && <View className={styles['activity-tag-badge']}><Text className={styles['activity-tag-badge-text']}>{labels.present_badge}</Text></View>}
+                    <View className={styles['activity-tag-content']}>
+                      <Text className={styles['activity-tag-text']}>
+                        {activityType === PROMOTION_ACTIVITY_TYPE_FLASH && labels.activity_type.flash}
+                        {activityType === PROMOTION_ACTIVITY_TYPE_BRAND && labels.activity_type.brand}
+                        {activityType === PROMOTION_ACTIVITY_TYPE_HOT && labels.activity_type.hot}
+                        {activityType === PROMOTION_ACTIVITY_TYPE_PRESENT && labels.activity_type.present}
+                      </Text>
+                    </View>
+                  </View>
+                )}
+                {deliveryTags}
+              </View>
+            )}
+            {
+              spec
+              ? (
+                <Text
+                  className={styles['spec-text']}
+                  style={{ WebkitLineClamp: specMaxLines }}
+                >
+                  {labels.spec_label}：{spec}
+                </Text>
+              )
+              : undefined
+            }
+            {
+              customization
+              ? (
+                <Text
+                  className={styles['customization-text']}
+                  style={{ WebkitLineClamp: customizationMaxLines }}
+                >
+                  {customization}
+                </Text>
+              )
+              : undefined
+            }
+          </View>
+          <View className={styles['content-bottom']}>
+            <View className={styles['price-container']}>
+              <View className={styles['price-row']}>
+                <Text className={styles['price-symbol']}>
+                  ¥
+                </Text>
+                <Text className={styles['price-value']}>
+                  {salePrice}
+                </Text>
+              </View>
+              {
+                originalPrice
+                ? (
+                  <Text className={styles['original-price']}>
+                    ¥{originalPrice}
+                  </Text>
+                )
+                : undefined
+              }
+            </View>
+            <View
+              className={styles['action-area']}
+            >
+              {
+                buyCount
+                ? (
+                  <Text className={styles['buy-count-value']}>
+                    x{buyCount}
+                  </Text>
+                )
+                : action
+              }
+            </View>
+          </View>
+        </View>
+      </View>
+      {
+        children
+        ? (
+          <View
+            className={styles['card-footer']}
+            onClick={e => e.stopPropagation()}
+          >
+            {children}
+          </View>
+        )
+        : undefined
+      }
+      {
+        showDelete
+        ? (
+          <View
+            className={styles['delete-container']}
+            onClick={(e: ITouchEvent) => {
+              e.stopPropagation()
+              onDelete?.()
+            }}
+          >
+            <Icon
+              name='trash'
+              size={13}
+              className={styles['delete-icon']}
+            />
+          </View>
+        )
+        : undefined
+      }
+    </View>
+  )
+}
+
+export default React.memo(ProductCard)

package/src/util/env.ts

@@ -0,0 +1,17 @@
+import Taro from "@tarojs/taro"
+
+// 支付宝小程序
+export const isAlipayApp = Taro.getEnv() === Taro.ENV_TYPE.ALIPAY
+// 微信小程序
+export const isWeApp = Taro.getEnv() === Taro.ENV_TYPE.WEAPP
+// web
+export const isWeb = Taro.getEnv() === Taro.ENV_TYPE.WEB
+
+const userAgent = navigator && navigator.userAgent
+export const isIos = /iphone|ipad/i.test(userAgent)
+export const isAndroid = /android/i.test(userAgent)
+
+const promoterAppMatch = userAgent.match(/promoter_app\/([\d.]+)/i)
+
+export const isPromoterApp = promoterAppMatch && (isIos || isAndroid)
+export const isApp = isPromoterApp