♻️refactor: Completely redesign TopUp page with modern card-based UI and enhanced UX

- Replace simple form layout with sophisticated card-based design system
- Implement bank card-style wallet display with gradient backgrounds and decorative elements
- Integrate real user data from UserContext (username, quota, usage stats, user role, group)
- Add personalized color schemes using stringToColor for unique user identification
- Implement comprehensive responsive design for mobile, tablet, and desktop devices
- Add skeleton loading states for all data-dependent components and API calls
- Replace basic Input with InputNumber component for amount input with built-in validation (min: 1)
- Add official brand icons for payment methods (Alipay, WeChat) using react-icons/si
- Integrate Semi UI Banner component for better warning notifications
- Implement real-time data synchronization between local state and UserContext
- Add sophisticated loading states with proper error handling and user feedback
- Clean up all code comments and remove unused imports, functions, and state variables
- Enhance visual hierarchy with proper spacing, shadows, and modern typography
- Add glass-morphism effects and backdrop filters for premium visual experience
- Improve accessibility with proper text truncation and responsive font sizing

This update transforms the TopUp page from a basic form into a professional,
modern payment interface that provides excellent user experience across all devices
while maintaining full functionality and adding comprehensive data validation.

web/package.json

@@ -11,23 +11,25 @@
     "@visactor/vchart": "~1.8.8",
     "@visactor/vchart": "~1.8.8",
     "@visactor/vchart-semi-theme": "~1.8.8",
     "@visactor/vchart-semi-theme": "~1.8.8",
     "axios": "^0.27.2",
     "axios": "^0.27.2",
+    "country-flag-icons": "^1.5.19",
     "dayjs": "^1.11.11",
     "dayjs": "^1.11.11",
     "history": "^5.3.0",
     "history": "^5.3.0",
     "i18next": "^23.16.8",
     "i18next": "^23.16.8",
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-browser-languagedetector": "^7.2.0",
+    "lucide-react": "^0.511.0",
     "marked": "^4.1.1",
     "marked": "^4.1.1",
     "react": "^18.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-dropzone": "^14.2.3",
     "react-fireworks": "^1.0.4",
     "react-fireworks": "^1.0.4",
     "react-i18next": "^13.0.0",
     "react-i18next": "^13.0.0",
+    "react-icons": "^5.5.0",
     "react-router-dom": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-telegram-login": "^1.1.2",
     "react-telegram-login": "^1.1.2",
     "react-toastify": "^9.0.8",
     "react-toastify": "^9.0.8",
     "react-turnstile": "^1.0.5",
     "react-turnstile": "^1.0.5",
     "semantic-ui-offline": "^2.5.0",
     "semantic-ui-offline": "^2.5.0",
     "semantic-ui-react": "^2.1.3",
     "semantic-ui-react": "^2.1.3",
-    "country-flag-icons": "^1.5.19",
     "sse": "https://github.com/mpetazzoni/sse.js"
     "sse": "https://github.com/mpetazzoni/sse.js"
   },
   },
   "scripts": {
   "scripts": {

web/src/i18n/locales/en.json

@@ -1178,7 +1178,7 @@
   "请输入新的密码，最短 8 位": "Please enter a new password, at least 8 characterss",
   "请输入新的密码，最短 8 位": "Please enter a new password, at least 8 characterss",
   "添加额度": "Add quota",
   "添加额度": "Add quota",
   "以下信息不可修改": "The following information cannot be modified",
   "以下信息不可修改": "The following information cannot be modified",
-  "确定要充值吗": "Check to confirm recharge",
+  "充值确认": "Recharge confirmation",
   "充值数量": "Recharge quantity",
   "充值数量": "Recharge quantity",
   "实付金额": "Actual payment amount",
   "实付金额": "Actual payment amount",
   "是否确认充值？": "Confirm recharge?",
   "是否确认充值？": "Confirm recharge?",
@@ -1449,5 +1449,11 @@
   "用户分组和额度管理": "User Group and Quota Management",
   "用户分组和额度管理": "User Group and Quota Management",
   "绑定信息": "Binding Information",
   "绑定信息": "Binding Information",
   "第三方账户绑定状态（只读）": "Third-party account binding status (read-only)",
   "第三方账户绑定状态（只读）": "Third-party account binding status (read-only)",
-  "已绑定的 OIDC 账户": "Bound OIDC accounts"
+  "已绑定的 OIDC 账户": "Bound OIDC accounts",
+  "使用兑换码充值余额": "Recharge balance with redemption code",
+  "支持多种支付方式": "Support multiple payment methods",
+  "尊敬的": "Dear",
+  "请输入兑换码": "Please enter the redemption code",
+  "在线充值功能未开启": "Online recharge function is not enabled",
+  "管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。": "The administrator has not enabled the online recharge function, please contact the administrator to enable it or recharge with a redemption code."
 }
 }
\ No newline at end of file