@yorkjs/hive-ui 0.0.3 → 0.0.5

package/package.json

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

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

@@ -13,17 +13,19 @@
   white-space nowrap
   box-sizing border-box
 
-  halfBorder(top left right bottom, transparent, 8PX)
+  halfBorder(top left right bottom, var(--tag-border-color, transparent), 8PX)
 
   .tag-text
     line-height 1
 
 .type-default
-  &:before
-    border-color var(--lineBorder)
+  --tag-border-color: var(--lineBorder)
   :global(.is-dark)
-    &:before
-      border-color transparent
+    --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

@@ -30,7 +30,6 @@ const Tag: React.FC<TagProps> = ({
   className,
   style
 }) => {
-
   const themeSelect = (light: string, dark: string) => (isDark ? dark : light)
 
   const tagStyle = useMemo(() => {
@@ -92,6 +91,20 @@ const Tag: React.FC<TagProps> = ({
     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(
@@ -99,11 +112,7 @@ const Tag: React.FC<TagProps> = ({
         styles[`type-${type}`],
         className
       )}
-      style={{
-        backgroundColor: tagStyle.backgroundColor,
-        color: tagStyle.color,
-        ...style
-      }}
+      style={finalStyle}
     >
       <Text
         className={styles['tag-text']}

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

@@ -26,7 +26,7 @@ $F_BUY_COUNT = 14PX    // RN 14
   width 100%
 
 .checkbox-container
-  height 72PX           // 对齐图片高度 72
+  height 72PX
   margin-right 10PX
   display flex
   justify-content center
@@ -43,7 +43,7 @@ $F_BUY_COUNT = 14PX    // RN 14
   .product-image
     width 72PX
     height 72PX
-    border-radius 10PX // 对齐 RN: IMAGE_RADIUS = 10
+    border-radius 10PX
     background-color var(--containerInner)
 
   .status-overlay
@@ -60,7 +60,7 @@ $F_BUY_COUNT = 14PX    // RN 14
     z-index 2
 
     .status-text
-      font-size 12PX   // 对齐 RN: 12
+      font-size 12PX
       color #FFF
       line-height 1
 
@@ -70,7 +70,7 @@ $F_BUY_COUNT = 14PX    // RN 14
   flex-direction column
   justify-content space-between
   min-height 72PX
-  min-width 0          // 关键：确保内部 Flex 截断能正常工作
+  min-width 0
 
 .content-body
   flex 1
@@ -85,7 +85,8 @@ $F_BUY_COUNT = 14PX    // RN 14
 
 .product-tag-container
   display flex
-  margin-right 8PX
+  align-items center
+  margin-right 5PX
   flex-shrink 0
   line-height 1
 
@@ -116,9 +117,8 @@ $F_BUY_COUNT = 14PX    // RN 14
 .info-line
   width 1PX
   height 10PX
-  background-color var(--textContent)
   margin 0 5PX
-  transform scaleX(0.5)
+  halfBorder(left, var(--textContent))
 
 .info-text
   font-size $F_INFO
@@ -153,19 +153,25 @@ $F_BUY_COUNT = 14PX    // RN 14
   padding 1PX 5PX
   border-radius 3PX
   font-size $F_TAG_NORMAL
-  border 1PX solid transparent
+  height 15PX
+  line-height 15PX
 
 .activity-tag
   display flex
   flex-direction row
   align-items center
-  border 1PX solid #F21902 // 对齐 RN: borderColor: '#F21902'
+  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
-  padding 1PX 4PX       // 对齐 RN: paddingHorizontal: 4, paddingVertical: 1
+  border-top-right-radius 3PX
+  border-bottom-right-radius 3PX
   display flex
   align-items center
   justify-content center
@@ -176,7 +182,8 @@ $F_BUY_COUNT = 14PX    // RN 14
   line-height 1
 
 .activity-tag-content
-  padding 1PX 5PX       // 对齐 RN: paddingHorizontal: 5, paddingVertical: 1
+  display flex
+  padding 1PX 5PX
 
 .activity-tag-text
   font-size $F_TAG_NORMAL
@@ -186,15 +193,15 @@ $F_BUY_COUNT = 14PX    // RN 14
 .spec-text
   font-size $F_SPEC
   color var(--textContent)
-  line-height 15PX      // 对齐 RN: lineHeight: 15
-  margin-top 5PX        // 对齐 RN: marginTop: 5
+  line-height 15PX
+  margin-top 5PX
   lineClamp(1)
 
 .customization-text
   font-size $F_CUSTOM
   color var(--textMuted)
-  line-height 15PX      // 对齐 RN: lineHeight: 15
-  margin-top 5PX        // 对齐 RN: marginTop: 5
+  line-height 15PX
+  margin-top 5PX
   lineClamp(3)
 
 .content-bottom
@@ -202,7 +209,7 @@ $F_BUY_COUNT = 14PX    // RN 14
   flex-direction row
   align-items center
   justify-content space-between
-  margin-top 10PX       // 对齐 RN: marginTop: 10
+  margin-top 5PX
 
 .price-container
   display flex
@@ -212,35 +219,35 @@ $F_BUY_COUNT = 14PX    // RN 14
 .price-row
   display flex
   flex-direction row
-  align-items baseline  // 确保符号和数值底部对齐
+  align-items baseline
 
 .price-symbol
   font-size $F_PRICE_SYM
   color var(--textMoney)
-  font-weight bold      // 对齐 RN: FONT_WEIGHT_BOLD
+  font-weight bold
   margin-right 1PX
 
 .price-value
   font-size $F_PRICE_VAL
   color var(--textMoney)
-  font-weight bold      // 对齐 RN: FONT_WEIGHT_BOLD
+  font-weight bold
 
 .original-price
-  font-size 11PX        // 对齐 RN: 11
+  font-size 11PX
   color var(--textMuted)
   text-decoration line-through
-  margin-left 5PX       // 对齐 RN: marginLeft: 5
+  margin-left 5PX
 
 .buy-count-value
   font-size $F_BUY_COUNT
   color var(--textContent)
-  margin-left 10PX      // 对齐 RN: marginLeft: 10
+  margin-left 10PX
 
 .delete-container
   position absolute
-  top 16PX              // 对齐 RN: top: 16
-  right 11PX            // 对齐 RN: right: 11
-  padding 5PX           // 对齐 RN: pressHitSlop
+  top 16PX
+  right 11PX
+  padding 5PX
   z-index 10
 
 .delete-icon

package/src/item/ProductCard/index.tsx

@@ -170,9 +170,18 @@ const ProductCard: React.FC<IProductCardProps> = (props) => {
   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 },
+    [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
@@ -193,11 +202,25 @@ const ProductCard: React.FC<IProductCardProps> = (props) => {
     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)' }
+        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 (
@@ -222,7 +245,9 @@ const ProductCard: React.FC<IProductCardProps> = (props) => {
           </View>
         )}
         {saleCount && (
-          <Text className={styles['info-text']}>{labels.sale_label} {saleCount}</Text>
+          <Text className={styles['info-text']}>
+            {labels.sale_label} {saleCount}
+          </Text>
         )}
       </View>
     )
@@ -233,14 +258,24 @@ const ProductCard: React.FC<IProductCardProps> = (props) => {
       <View className={styles['card-main-body']}>
         {showCheckbox && (
           <View className={styles['checkbox-container']}>
-            <Checkbox checked={checkboxChecked} disabled={checkboxDisabled} readOnly />
+            <Checkbox
+              checked={checkboxChecked}
+              disabled={checkboxDisabled}
+              readOnly
+            />
           </View>
         )}
         <View className={styles['image-container']}>
-          <Image src={image?.url} className={styles['product-image']} mode='aspectFill' />
+          <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>
+              <Text className={styles['status-text']}>
+                {showSoldOut ? labels.sold_out : labels.offline}
+              </Text>
             </View>
           )}
         </View>
@@ -279,20 +314,98 @@ const ProductCard: React.FC<IProductCardProps> = (props) => {
                 {deliveryTags}
               </View>
             )}
-            {spec && <Text className={styles['spec-text']} style={{ WebkitLineClamp: specMaxLines }}>{labels.spec_label}：{spec}</Text>}
-            {customization && <Text className={styles['customization-text']} style={{ WebkitLineClamp: customizationMaxLines }}>{customization}</Text>}
+            {
+              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>}
+              <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 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>}
-      {showDelete && <View className={styles['delete-container']} onClick={(e: ITouchEvent) => { e.stopPropagation(); onDelete?.(); }}><Icon name='trash' size={13} className={styles['delete-icon']} /></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>
   )
 }