🎨 feat(ui): enhance pricing components with improved icons and responsive design

- Replace copy button icon from semi-ui IconCopy to lucide-react Copy in PricingCardView
- Add conditional tooltip functionality to SelectableButtonGroup that only shows when text overflows
- Implement responsive table column behavior in PricingTableColumns with mobile-aware fixed positioning
- Use DOM-based overflow detection (scrollWidth vs clientWidth) for better performance
- Apply useIsMobile hook to conditionally set fixed: 'right' only on desktop devices

These changes improve user experience across different screen sizes and provide more consistent iconography throughout the pricing interface.
This commit is contained in:
t0ng7u
2025-08-29 22:36:05 +08:00
parent 0f86c4df9e
commit 86964bb426
15 changed files with 207 additions and 62 deletions

View File

@@ -26,7 +26,21 @@ const PricingContent = ({ isMobile, sidebarProps, ...props }) => {
<div className={isMobile ? "pricing-content-mobile" : "pricing-scroll-hide"}>
{/* 固定的顶部区域(分类介绍 + 搜索和操作) */}
<div className="pricing-search-header">
<PricingTopSection {...props} isMobile={isMobile} sidebarProps={sidebarProps} />
<PricingTopSection
{...props}
isMobile={isMobile}
sidebarProps={sidebarProps}
showWithRecharge={sidebarProps.showWithRecharge}
setShowWithRecharge={sidebarProps.setShowWithRecharge}
currency={sidebarProps.currency}
setCurrency={sidebarProps.setCurrency}
showRatio={sidebarProps.showRatio}
setShowRatio={sidebarProps.setShowRatio}
viewMode={sidebarProps.viewMode}
setViewMode={sidebarProps.setViewMode}
tokenUnit={sidebarProps.tokenUnit}
setTokenUnit={sidebarProps.setTokenUnit}
/>
</div>
{/* 可滚动的内容区域 */}