@yorkjs/hive-ui 2.3.5 → 2.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorkjs/hive-ui",
-  "version": "2.3.5",
+  "version": "2.3.7",
   "description": "Hive UI - Taro React component library",
   "main": "src/index.ts",
   "module": "src/index.ts",

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

@@ -110,10 +110,19 @@
       align-items flex-end
       flex-shrink 0
 
+      .flow-item-amount-row
+        display flex
+        flex-direction row
+        align-items center
+
       .flow-item-amount
         font-size 16PX
         color var(--textTitle)
 
+      .flow-item-amount-status
+        margin-left 5PX
+        font-size 16PX
+
       .flow-item-desc
         margin-top 5PX
         font-size 12PX

package/src/item/FlowItem/index.tsx

@@ -21,6 +21,10 @@ interface IProps {
   amount?: string | number
   /** 金额颜色，不传默认 */
   amountColor?: string
+  /** 金额右侧的状态文字（如"已退款"） */
+  amountStatus?: string
+  /** 状态文字颜色 */
+  amountStatusColor?: string
   /** 右侧下方的描述或状态 */
   desc?: string
   /** 描述文字颜色 */
@@ -40,6 +44,8 @@ const FlowItem: React.FC<IProps> = (props) => {
     titleExtra,
     amount,
     amountColor,
+    amountStatus,
+    amountStatusColor,
     desc,
     descColor,
     showSeparator = true,
@@ -128,12 +134,26 @@ const FlowItem: React.FC<IProps> = (props) => {
           {
             amount !== undefined
             ? (
-              <Text
-                className="flow-item-amount"
-                style={amountColor ? { color: amountColor } : {}}
-              >
-                {amount}
-              </Text>
+              <View className="flow-item-amount-row">
+                <Text
+                  className="flow-item-amount"
+                  style={amountColor ? { color: amountColor } : {}}
+                >
+                  {amount}
+                </Text>
+                {
+                  !isEmpty(amountStatus)
+                  ? (
+                    <Text
+                      className="flow-item-amount-status"
+                      style={amountStatusColor ? { color: amountStatusColor } : {}}
+                    >
+                      {amountStatus}
+                    </Text>
+                  )
+                  : undefined
+                }
+              </View>
             )
             : undefined
           }

package/src/item/ProductItem/ProductItem.tsx

@@ -49,6 +49,10 @@ export interface IProductCardProps {
   image: { url: string }
   /** 是否显示售罄标记 */
   showSoldOut?: boolean
+  /** 是否显图片上的遮罩 */
+  showImageOverlay?: boolean
+  /** 遮罩文案 */
+  imageOverlayText?: string
   /** 是否显示已下架标记 */
   showOffline?: boolean
   /** 商品标题 */
@@ -57,6 +61,8 @@ export interface IProductCardProps {
   titleMaxLines?: number
   /** 商品类型：实物/虚拟/服务 */
   productType?: number
+  /** 自定义商品类型 */
+  productTypeCustom?: { color: string; text: string, backgroundColor?: string }
   /** 是否显示“多规格”标签 */
   showMultipleSpec?: boolean
   /** 库存数量文案 */
@@ -124,6 +130,7 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
     title,
     titleMaxLines = 1,
     productType,
+    productTypeCustom,
     customTags,
     showMultipleSpec,
     stockCount,
@@ -144,6 +151,8 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
     remainingTotal,
     buyCount,
     showSoldOut = false,
+    showImageOverlay = false,
+    imageOverlayText = '',
     showOffline = false,
     showCheckbox = false,
     checkboxChecked = false,
@@ -159,6 +168,10 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
     children
   } = props
 
+  const isOverlayVisible = useMemo(() => {
+    return showSoldOut || showOffline || showImageOverlay
+  }, [showSoldOut, showOffline, showImageOverlay])
+
   const handleCardClick = (e: ITouchEvent) => {
     if (showCheckbox) {
       if (!checkboxDisabled) {
@@ -178,7 +191,27 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
   }, [])
 
   const productTypeTag = useMemo(() => {
-    if (productType === undefined) return null
+    
+    if (productTypeCustom) {
+      return (
+        <View className={styles['product-tag-container']}>
+          <Tag
+            type='light-warning'
+            text={productTypeCustom.text}
+            className="product-tag"
+            style={{ 
+              backgroundColor: productTypeCustom.backgroundColor, 
+              color: productTypeCustom.color
+           }}
+          />
+        </View>
+      )
+    }
+
+    if (productType === undefined) {
+      return null
+    }
+
     const colorMap: Record<number, { color: string; text: string | undefined }> = {
     [MALL_PRODUCT_TYPE_REAL]: {
       color: 'var(--primary)',
@@ -209,7 +242,7 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
         />
       </View>
     )
-  }, [productType, labels])
+  }, [productType, labels, productTypeCustom])
 
   const deliveryTags = useMemo(() => {
     if (isEmpty(deliveryTypes)) return null
@@ -319,10 +352,10 @@ const ProductItem: React.FC<IProductCardProps> = (props) => {
               className={styles['product-image']}
               mode='aspectFill'
             />
-            {(showSoldOut || showOffline) && (
+            {isOverlayVisible && (
               <View className={styles['status-overlay']}>
                 <Text className={styles['status-text']}>
-                  {showSoldOut ? labels.sold_out : labels.offline}
+                  {showImageOverlay ? imageOverlayText : showSoldOut ? labels.sold_out : labels.offline}
                 </Text>
               </View>
             )}