🚀 MrButton 组件演示

基于设计规范的业务按钮组件，支持支付场景和多种变体

📌 按钮变体 (variant)

支付主要按钮 (payment-primary)

            <MrButton variant="payment-primary" text="立即支付" fontSize="h5" />
            <MrButton variant="payment-primary" text="¥299.00" fontSize="h5" isAmount />
          

支付次要按钮 (payment-secondary)

            <MrButton variant="payment-secondary" text="取消" fontSize="h5" />
            <MrButton variant="payment-secondary" text="稍后支付" fontSize="h5" />
          

成功操作按钮 (success-action)

            <MrButton variant="success-action" text="完成" fontSize="h5" />
            <MrButton variant="success-action" text="确认收货" fontSize="h5" />
          

📝 字体大小 (fontSize)

不同字体大小对比

            <MrButton variant="payment-primary" text="H4 大按钮" fontSize="h4" />
            <MrButton variant="payment-primary" text="H5 标准按钮" fontSize="h5" />
            <MrButton variant="payment-primary" text="H6 小按钮" fontSize="h6" />
            <MrButton variant="payment-primary" text="H7 迷你按钮" fontSize="h7" />
          

💰 金额相关 (isAmount)

金额显示增强

            <MrButton variant="payment-primary" text="¥1,299.00" fontSize="h4" isAmount
            /> <MrButton variant="payment-secondary" text="查看详情 ¥99.00"
            fontSize="h5" isAmount /> <MrButton variant="success-action" text="确认支付
            ¥599.00" fontSize="h5" isAmount />
          

🎯 使用场景

💳 支付流程场景

            // 支付页面按钮组合 <MrButton variant="payment-secondary" text="返回"
            fontSize="h5" /> <MrButton variant="payment-primary" text="立即支付 ¥199.00"
            fontSize="h4" isAmount />
          

✅ 订单确认场景

            // 订单确认页面 <MrButton variant="payment-secondary" text="修改订单"
            fontSize="h5" /> <MrButton variant="success-action" text="确认订单"
            fontSize="h5" />
          

🎉 支付成功场景

            // 支付成功页面 <MrButton variant="payment-secondary" text="查看订单"
            fontSize="h6" /> <MrButton variant="success-action" text="继续购物"
            fontSize="h5" />
          

📱 响应式设计

在移动端（宽度 ≤ 768px）时，按钮会自动调整大小以提供更好的触摸体验

🎨 设计Token

Primary 蓝色系

#2196F3

Success 绿色系

#4CAF50

Secondary 灰色系

#E0E0E0