feat: enhance PricingTags and SelectableButtonGroup with new badge styles and color variants

web/src/components/common/ui/SelectableButtonGroup.jsx

@@ -23,7 +23,6 @@ import { useContainerWidth } from '../../../hooks/common/useContainerWidth';
 import {
   Divider,
   Button,
-  Tag,
   Row,
   Col,
   Collapsible,
@@ -46,6 +45,7 @@ import { IconChevronDown, IconChevronUp } from '@douyinfe/semi-icons';
  * @param {number} collapseHeight 折叠时的高度，默认200
  * @param {boolean} withCheckbox 是否启用前缀 Checkbox 来控制激活状态
  * @param {boolean} loading 是否处于加载状态
+ * @param {string} variant 颜色变体: 'violet' | 'teal' | 'amber' | 'rose' | 'green'，不传则使用默认蓝色
  */
 const SelectableButtonGroup = ({
   title,
@@ -58,6 +58,7 @@ const SelectableButtonGroup = ({
   collapseHeight = 200,
   withCheckbox = false,
   loading = false,
+  variant,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [skeletonCount] = useState(12);
@@ -178,9 +179,6 @@ const SelectableButtonGroup = ({
   ) : (
     <Row gutter={gutterSize} style={{ lineHeight: '32px', ...style }}>
       {items.map((item) => {
-        const isDisabled =
-          item.disabled ||
-          (typeof item.tagCount === 'number' && item.tagCount === 0);
         const isActive = Array.isArray(activeValue)
           ? activeValue.includes(item.value)
           : activeValue === item.value;
@@ -194,13 +192,11 @@ const SelectableButtonGroup = ({
                 }}
                 theme={isActive ? 'light' : 'outline'}
                 type={isActive ? 'primary' : 'tertiary'}
-                disabled={isDisabled}
                 className='sbg-button'
                 icon={
                   <Checkbox
                     checked={isActive}
                     onChange={() => onChange(item.value)}
-                    disabled={isDisabled}
                     style={{ pointerEvents: 'auto' }}
                   />
                 }
@@ -210,14 +206,9 @@ const SelectableButtonGroup = ({
                   {item.icon && <span className='sbg-icon'>{item.icon}</span>}
                   <ConditionalTooltipText text={item.label} />
                   {item.tagCount !== undefined && shouldShowTags && (
-                    <Tag
-                      className='sbg-tag'
-                      color='white'
-                      shape='circle'
-                      size='small'
-                    >
+                    <span className={`sbg-badge ${isActive ? 'sbg-badge-active' : ''}`}>
                       {item.tagCount}
-                    </Tag>
+                    </span>
                   )}
                 </div>
               </Button>
@@ -231,22 +222,16 @@ const SelectableButtonGroup = ({
               onClick={() => onChange(item.value)}
               theme={isActive ? 'light' : 'outline'}
               type={isActive ? 'primary' : 'tertiary'}
-              disabled={isDisabled}
               className='sbg-button'
               style={{ width: '100%' }}
             >
               <div className='sbg-content'>
                 {item.icon && <span className='sbg-icon'>{item.icon}</span>}
                 <ConditionalTooltipText text={item.label} />
-                {item.tagCount !== undefined && shouldShowTags && (
-                  <Tag
-                    className='sbg-tag'
-                    color='white'
-                    shape='circle'
-                    size='small'
-                  >
+                {item.tagCount !== undefined && shouldShowTags && item.tagCount !== '' && (
+                  <span className={`sbg-badge ${isActive ? 'sbg-badge-active' : ''}`}>
                     {item.tagCount}
-                  </Tag>
+                  </span>
                 )}
               </div>
             </Button>
@@ -258,7 +243,7 @@ const SelectableButtonGroup = ({
 
   return (
     <div
-      className={`mb-8 ${containerWidth <= 400 ? 'sbg-compact' : ''}`}
+      className={`mb-8 ${containerWidth <= 400 ? 'sbg-compact' : ''}${variant ? ` sbg-variant-${variant}` : ''}`}
       ref={containerRef}
     >
       {title && (