样式优化

2026-05-26 13:47:24 +08:00
parent d61dcdc8db
commit 01d15276ba
23 changed files with 6265 additions and 747 deletions
@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useMemo } from 'react';
 import { Layout, Avatar, Dropdown, Space, Modal, Form, Input, message, Tooltip, Tag, Button, Typography } from 'antd';
+import { QRCodeSVG } from 'qrcode.react';
 import {
  PlayCircleOutlined,
  WalletOutlined,
@@ -18,6 +19,7 @@ import {
  FireFilled,
  CrownFilled,
  BankFilled,
+  QrcodeOutlined,
  CloseOutlined,
 } from '@ant-design/icons';
 import { Outlet, useNavigate, useLocation } from 'react-router-dom';
@@ -81,6 +83,8 @@ const AppLayout: React.FC = () => {
  const [unreadCount, setUnreadCount] = useState(0);
  const [siteName, setSiteName] = useState('VideoGen.AI');
  const [siteLogo, setSiteLogo] = useState('');
+  const [qrCodeModalOpen, setQrCodeModalOpen] = useState(false);
+  const [currentPaymentInfo, setCurrentPaymentInfo] = useState<{ price: number; credits: number; qrCode: string } | null>(null);

  useEffect(() => {
    getSiteInfo().then(info => {
@@ -240,7 +244,7 @@ const AppLayout: React.FC = () => {
        </div>

        {/* Menu */}
-        <div style={{ flex: 1, padding: '8px 8px', overflow: 'hidden' }}>
+        <div style={{ flex: 1, padding: '8px 8px', overflow: 'auto' }}>
          {!collapsed && (
            <div style={{ color: 'rgba(148,163,184,0.4)', fontSize: 11, fontWeight: 600, padding: '8px 12px 6px', letterSpacing: 1 }}>
              导航
@@ -500,7 +504,27 @@ const AppLayout: React.FC = () => {
          <div style={{ marginTop: 20, display: 'flex', justifyContent: 'flex-end' }}>
            <Button size="large" onClick={() => { setRechargeModalOpen(false); setSelectedPlan(null); }} style={{ borderRadius: 10, marginRight: 12 }}>取消</Button>
            <Button type="primary" size="large" disabled={!selectedPlan}
-              onClick={() => { message.success('支付功能对接后端后开放'); setRechargeModalOpen(false); setSelectedPlan(null); }}
+              onClick={() => {
+                const plan = rechargeOptions.find((opt: any) => opt.id === selectedPlan);
+                if (plan) {
+                  const totalCredits = (plan.credits || 0) + (plan.bonus_credits || plan.bonusCredits || 0);
+                  // 生成随机支付内容（模拟微信支付订单号）
+                  const orderId = `WX${Date.now()}${Math.random().toString(36).substr(2, 6).toUpperCase()}`;
+                  const paymentContent = JSON.stringify({
+                    orderId,
+                    amount: plan.price,
+                    credits: totalCredits,
+                    timestamp: Date.now()
+                  });
+                  setCurrentPaymentInfo({
+                    price: plan.price,
+                    credits: totalCredits,
+                    qrCode: paymentContent
+                  });
+                  setRechargeModalOpen(false);
+                  setQrCodeModalOpen(true);
+                }
+              }}
              style={{
                borderRadius: 10, fontWeight: 600,
                background: selectedPlan ? 'linear-gradient(135deg, #6366f1, #8b5cf6)' : '#d1d5db',
@@ -512,6 +536,125 @@ const AppLayout: React.FC = () => {
        </div>
      </Modal>

+      {/* QR Code Payment Modal */}
+      <Modal
+        open={qrCodeModalOpen}
+        onCancel={() => { setQrCodeModalOpen(false); setCurrentPaymentInfo(null); }}
+        footer={null}
+        width={400}
+        closable={false}
+        styles={{
+          body: { padding: 0, borderRadius: 16, overflow: 'hidden' },
+        }}
+      >
+        <div style={{ padding: '24px' }}>
+          {/* Header */}
+          <div style={{ textAlign: 'center', marginBottom: 24 }}>
+            <div style={{
+              width: 48, height: 48,
+              background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
+              borderRadius: 16,
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              margin: '0 auto 12px',
+            }}>
+              <QrcodeOutlined style={{ fontSize: 24, color: '#fff' }} />
+            </div>
+            <Typography.Title level={4} style={{ margin: 0 }}>微信支付</Typography.Title>
+            <Typography.Text style={{ color: '#94a3b8', fontSize: 13 }}>请使用微信扫描二维码完成支付</Typography.Text>
+          </div>
+
+          {/* QR Code */}
+          <div style={{
+            background: '#fff',
+            borderRadius: 16,
+            padding: 20,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
+          }}>
+            <div style={{
+              width: 180,
+              height: 180,
+              borderRadius: 12,
+              overflow: 'hidden',
+              background: '#fff',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}>
+              {currentPaymentInfo && (
+                <QRCodeSVG
+                  value={currentPaymentInfo.qrCode}
+                  size={160}
+                  level="M"
+                  includeMargin={false}
+                />
+              )}
+            </div>
+            <div style={{ marginTop: 16, textAlign: 'center' }}>
+              <div style={{
+                fontSize: 28,
+                fontWeight: 700,
+                color: '#1a1a2e',
+              }}>
+                ¥{currentPaymentInfo?.price || 0}
+              </div>
+              <div style={{
+                fontSize: 13,
+                color: '#64748b',
+                marginTop: 4,
+              }}>
+                购买 {currentPaymentInfo?.credits || 0} 积分
+              </div>
+            </div>
+          </div>
+
+          {/* Tips */}
+          <div style={{ marginTop: 20, padding: 16, background: '#fef3c7', borderRadius: 12 }}>
+            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
+              <div style={{ fontSize: 16, marginTop: -2 }}>💡</div>
+              <div style={{ fontSize: 13, color: '#92400e' }}>
+                <div style={{ fontWeight: 500, marginBottom: 4 }}>支付提示</div>
+                <ul style={{ margin: 0, paddingLeft: 16 }}>
+                  <li style={{ marginBottom: 2 }}>请在支付后等待页面自动跳转</li>
+                  <li>如支付成功但未到账，请联系客服</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          {/* Footer Buttons */}
+          <div style={{ marginTop: 20, display: 'flex', gap: 12 }}>
+            <Button
+              size="large"
+              onClick={() => { setQrCodeModalOpen(false); setCurrentPaymentInfo(null); }}
+              style={{ flex: 1, borderRadius: 10 }}
+            >
+              取消支付
+            </Button>
+            <Button
+              type="primary"
+              size="large"
+              onClick={() => {
+                message.success('支付成功！积分已到账');
+                setQrCodeModalOpen(false);
+                setCurrentPaymentInfo(null);
+                setSelectedPlan(null);
+              }}
+              style={{
+                flex: 1,
+                borderRadius: 10,
+                background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
+                border: 'none',
+              }}
+            >
+              已完成支付
+            </Button>
+          </div>
+        </div>
+      </Modal>
+
      {/* Message Center Modal */}
      <Modal
        open={msgModalOpen}