📱 feat(TopUp): enhance mobile UX with responsive layout and bottom fixed payment panel

- Convert copy button to Input suffix for cleaner UI design
- Add responsive grid layout for balance cards and preset amounts
  - Mobile (< md): single column layout for better readability
  - Desktop (>= md): multi-column layout for space efficiency
- Implement bottom fixed payment panel on mobile devices
  - Fixed positioning for easy access to payment options
  - Includes custom amount input and payment method buttons
  - Auto-hide on desktop to maintain original layout
- Improve mobile payment flow with sticky bottom controls
- Add proper spacing to prevent content overlap with fixed elements
- Maintain consistent functionality across all breakpoints

This update significantly improves the mobile user experience by making
payment controls easily accessible without scrolling, while preserving
the desktop layout and functionality.

web/src/components/layout/PageLayout.js

@@ -136,9 +136,8 @@ const PageLayout = () => {
               flex: '1 0 auto',
               overflowY: styleState.isMobile ? 'visible' : 'auto',
               WebkitOverflowScrolling: 'touch',
-              padding: shouldInnerPadding ? '24px' : '0',
+              padding: shouldInnerPadding ? (styleState.isMobile ? '5px' : '24px') : '0',
               position: 'relative',
-              marginTop: styleState.isMobile ? '2px' : '0',
             }}
           >
             <App />

web/src/helpers/render.js

@@ -46,8 +46,7 @@ import {
   Gift,
   User,
   Settings,
-  CircleUser,
-  Users
+  CircleUser
 } from 'lucide-react';
 
 // 侧边栏图标颜色映射

web/src/i18n/locales/en.json

@@ -971,6 +971,8 @@
   "最低": "lowest",
   "划转额度": "Transfer amount",
   "邀请链接": "Invitation link",
+  "划转邀请额度": "Transfer invitation quota",
+  "可用邀请额度": "Available invitation quota",
   "更多优惠": "More offers",
   "企业微信": "Enterprise WeChat",
   "点击解绑WxPusher": "Click to unbind WxPusher",