dist/首页

2026-06-26 17:40:41 +08:00
parent 5bdd5b4eb3 a986ddf037
commit ded24b4a91
100 changed files with 6422 additions and 3968 deletions
@@ -0,0 +1,247 @@
+.desktop-sidebar {
+  display: flex;
+}
+
+.desktop-content {
+  display: block;
+}
+
+.mobile-header {
+  display: none;
+}
+
+.mobile-content {
+  display: none;
+}
+
+.mobile-menu-drawer {
+  display: none;
+}
+
+.mobile-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  margin: 2px 8px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-height: 48px;
+}
+
+.mobile-menu-item:hover {
+  background: rgba(99, 102, 241, 0.05);
+}
+
+.mobile-menu-item-active {
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%) !important;
+}
+
+.mobile-menu-group {
+  cursor: default;
+}
+
+.mobile-menu-group:hover {
+  background: transparent;
+}
+
+.mobile-menu-icon {
+  font-size: 18px;
+  flex-shrink: 0;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mobile-menu-label {
+  flex: 1;
+  font-size: 15px;
+}
+
+.mobile-submenu {
+  padding-left: 12px;
+  background: rgba(248, 250, 252, 0.5);
+  margin: 0 8px;
+  border-radius: 8px;
+}
+
+.mobile-submenu-item {
+  padding: 10px 16px 10px 20px;
+  margin: 1px 0;
+  min-height: 44px;
+}
+
+.mobile-recharge-item {
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
+  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
+}
+
+.mobile-recharge-item:hover {
+  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
+}
+
+.contact-button-wrapper {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  z-index: 1000;
+}
+
+.contact-tooltip {
+  position: absolute;
+  right: 64px;
+  bottom: 8px;
+  padding: 8px 16px;
+  background: #1e293b;
+  color: #ffffff;
+  border-radius: 8px;
+  font-size: 13px;
+  white-space: nowrap;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+}
+
+.contact-button {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  color: #ffffff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
+  transition: all 0.3s ease;
+}
+
+.contact-button:hover {
+  transform: scale(1.05);
+  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.5);
+}
+
+@media (max-width: 767px) {
+  .desktop-sidebar {
+    display: none !important;
+  }
+
+  .desktop-content {
+    display: none !important;
+  }
+
+  .mobile-header {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  }
+
+  .mobile-header-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 56px;
+    padding: 0 16px;
+  }
+
+  .mobile-menu-btn {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+    cursor: pointer;
+    color: #475569;
+    transition: all 0.2s ease;
+  }
+
+  .mobile-menu-btn:hover {
+    background: rgba(99, 102, 241, 0.08);
+    color: #6366f1;
+  }
+
+  .mobile-header-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: #1e293b;
+    background: linear-gradient(135deg, #6366f1, #8b5cf6);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .mobile-header-right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .mobile-credits-badge {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: rgba(99, 102, 241, 0.08);
+    border-radius: 20px;
+    color: #6366f1;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .mobile-credits-badge:hover {
+    background: rgba(99, 102, 241, 0.15);
+  }
+
+  .mobile-content {
+    display: block;
+    padding-top: 56px;
+    padding-bottom: 24px;
+    min-height: 100vh;
+    background: #f8fafc;
+  }
+
+  .mobile-content > div {
+    margin: 12px;
+    padding: 16px;
+    background: #ffffff;
+    border-radius: 16px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+    border: 1px solid rgba(0, 0, 0, 0.04);
+    min-height: calc(100vh - 104px);
+  }
+
+  .contact-button-wrapper {
+    right: 16px;
+    bottom: 16px;
+  }
+
+  .contact-tooltip {
+    display: none;
+  }
+
+  .contact-button {
+    width: 44px;
+    height: 44px;
+  }
+
+  .recharge-modal .ant-modal {
+    max-width: calc(100vw - 32px) !important;
+    margin: 16px !important;
+  }
+
+  .contact-modal .ant-modal {
+    max-width: calc(100vw - 32px) !important;
+    margin: 16px !important;
+  }
+}
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
-import { Layout, Avatar, Dropdown, Space, Modal, Form, Input, message, Tooltip, Tag, Button, Typography, Radio } from 'antd';
+import { Layout, Avatar, Dropdown, Space, Modal, Form, Input, message, Tooltip, Tag, Button, Typography, Radio, Drawer } from 'antd';
 import { QRCodeSVG } from 'qrcode.react';
 import {
  PlayCircleOutlined,
@@ -53,11 +53,17 @@ import {
  ApiOutlined,
  DatabaseOutlined,
  CloudServerOutlined,
+  MessageOutlined,
+  DownOutlined,
+  InfoOutlined,
+  MenuOutlined,
+  ArrowLeftOutlined,
 } from '@ant-design/icons';
 import { Outlet, useNavigate, useLocation } from 'react-router-dom';
 import { useAuthStore } from '../../store/useAuthStore';
-import { getMenuConfigs, getRechargePackages, getPaymentMethods, createRechargeOrder, getPaymentOrder, cancelPaymentOrder, getSiteInfo, getUnreadCount } from '../../api';
+import { getMenuConfigs, getRechargePackages, getPaymentMethods, createRechargeOrder, getPaymentOrder, cancelPaymentOrder, getSiteInfo, getUnreadCount, createContactRequest } from '../../api';
 import NotificationPopup from '../NotificationPopup';
+import './AppLayout.css';

 interface MenuConfig {
  id: string;
@@ -134,8 +140,9 @@ const AppLayout: React.FC = () => {
  const [selectedPlan, setSelectedPlan] = useState<number | null>(null);
  const [menuItems, setMenuItems] = useState<MenuConfig[]>([]);
  const [rechargeOptions, setRechargeOptions] = useState<any[]>([]);
-  const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});
  const [unreadCount, setUnreadCount] = useState(0);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [mobileExpandedMenus, setMobileExpandedMenus] = useState<Record<string, boolean>>({});
  const [siteName, setSiteName] = useState(() => {
    const cached = localStorage.getItem('siteInfo');
    const name = cached ? JSON.parse(cached).siteName || '' : '';
@@ -162,17 +169,18 @@ const AppLayout: React.FC = () => {
  const [currentPaymentInfo, setCurrentPaymentInfo] = useState<{ price: number; credits: number; qrCode: string; method: string } | null>(null);
  const [paymentMethod, setPaymentMethod] = useState<string>('alipay');
  const [paying, setPaying] = useState(false);
-  const [countdown, setCountdown] = useState(180); // 默认180秒超时
+  const [countdown, setCountdown] = useState(180);
  const pollingTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
  const countdownTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
  const currentOrderNoRef = useRef<string | null>(null);
  const [enabledMethods, setEnabledMethods] = useState<{ alipay: boolean; wechat: boolean }>({ alipay: false, wechat: false });
+  const [contactModalOpen, setContactModalOpen] = useState(false);
+  const [contactForm] = Form.useForm();
+  const [contactHovered, setContactHovered] = useState(false);
+  const [submittingContact, setSubmittingContact] = useState(false);

-  // LocalStorage keys
  const PENDING_ORDER_KEY = 'pending_payment_order';

-
-
  useEffect(() => {
    getSiteInfo().then(info => {
      const name = info.siteName || '民众智创';
@@ -205,17 +213,14 @@ const AppLayout: React.FC = () => {
    }).catch(() => { });
  };

-  // 检查并恢复待处理的支付订单
  useEffect(() => {
    const checkPendingOrder = async () => {
      const savedOrderStr = localStorage.getItem(PENDING_ORDER_KEY);
      if (savedOrderStr) {
        try {
          const savedOrder = JSON.parse(savedOrderStr);
-          // 查询订单状态
          const order = await getPaymentOrder(savedOrder.orderNo);
          if (order.status === 'pending') {
-            // 订单仍然待支付，恢复弹窗
            setCurrentPaymentInfo({
              price: savedOrder.price,
              credits: savedOrder.credits,
@@ -223,7 +228,6 @@ const AppLayout: React.FC = () => {
              method: savedOrder.method,
            });
            currentOrderNoRef.current = savedOrder.orderNo;
-            // 计算剩余时间
            const now = Date.now();
            const createdAt = new Date(savedOrder.createdAt).getTime();
            const timeoutSeconds = savedOrder.timeoutSeconds || 180;
@@ -234,20 +238,16 @@ const AppLayout: React.FC = () => {
              setQrCodeModalOpen(true);
              startPolling(savedOrder.orderNo, remainingSeconds);
            } else {
-              // 已超时，清除
              localStorage.removeItem(PENDING_ORDER_KEY);
            }
          } else if (order.status === 'paid') {
-            // 已支付
            message.success('支付成功！积分已到账');
            useAuthStore.getState().refreshUser();
            localStorage.removeItem(PENDING_ORDER_KEY);
          } else {
-            // 订单已取消或其他状态，清除
            localStorage.removeItem(PENDING_ORDER_KEY);
          }
        } catch {
-          // 查询失败，清除
          localStorage.removeItem(PENDING_ORDER_KEY);
        }
      }
@@ -258,21 +258,7 @@ const AppLayout: React.FC = () => {

  useEffect(() => {
    getMenuConfigs().then(data => {
-      let items = data.filter((m: any) => m.is_active !== false && m.isActive !== false);
-      // Filter by user's allowed menus if set
-      if (user?.allowedMenus && user.allowedMenus.length > 0) {
-        const allowed = new Set(user.allowedMenus);
-        const groupIds = new Set<string>();
-        items.forEach((m: any) => {
-          const pid = m.parent_id ?? m.parentId;
-          if (pid && allowed.has(m.path)) groupIds.add(pid);
-        });
-        items = items.filter((m: any) => {
-          const mt = m.menu_type ?? m.menuType;
-          if (mt === 'group' && groupIds.has(m.id)) return true;
-          return allowed.has(m.path);
-        });
-      }
+      const items = data.filter((m: any) => m.is_active !== false && m.isActive !== false);
      setMenuItems(items);
    }).catch(() => { });
    getRechargePackages().then(data => {
@@ -280,7 +266,6 @@ const AppLayout: React.FC = () => {
    }).catch(() => { });
    getPaymentMethods().then(data => {
      setEnabledMethods(data);
-      // Auto-select the first enabled method
      if (data.alipay) setPaymentMethod('alipay');
      else if (data.wechat) setPaymentMethod('wechat');
    }).catch(() => { });
@@ -290,6 +275,47 @@ const AppLayout: React.FC = () => {
  const selectedKey = location.pathname.startsWith('/records') ? '/records' : location.pathname;
  const sidebarW = SIDEBAR_W;

+  const childMap: Record<string, MenuConfig[]> = {};
+  menuItems.forEach(m => {
+    const pid = m.parent_id ?? m.parentId;
+    if (pid) {
+      if (!childMap[pid]) childMap[pid] = [];
+      childMap[pid].push(m);
+    }
+  });
+
+  const topLevelItems = menuItems.filter(m => !(m.parent_id ?? m.parentId));
+  topLevelItems.sort((a, b) => {
+    const orderA = typeof a.sortOrder === 'number' ? a.sortOrder : Infinity;
+    const orderB = typeof b.sortOrder === 'number' ? b.sortOrder : Infinity;
+    return orderA - orderB;
+  });
+
+  Object.keys(childMap).forEach(key => {
+    childMap[key].sort((a, b) => {
+      const orderA = typeof a.sortOrder === 'number' ? a.sortOrder : Infinity;
+      const orderB = typeof b.sortOrder === 'number' ? b.sortOrder : Infinity;
+      return orderA - orderB;
+    });
+  });
+
+  const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});
+
+  const handleMobileMenuClick = (item: MenuConfig) => {
+    const menuType = item.menu_type ?? item.menuType;
+    const hasChildren = childMap[item.id] && childMap[item.id].length > 0;
+
+    if (menuType === 'group' || hasChildren) {
+      setMobileExpandedMenus(prev => ({
+        ...prev,
+        [item.id]: !prev[item.id]
+      }));
+    } else if (item.path) {
+      navigate(item.path);
+      setMobileMenuOpen(false);
+    }
+  };
+
  const userMenuItems = [
    { key: 'profile', icon: <UserOutlined />, label: `账号: ${user?.username}`, disabled: true },
    { key: 'credits', icon: <WalletOutlined style={{ color: '#c9a96e' }} />, label: `积分: ${user?.credits ?? 0}`, disabled: true },
@@ -297,7 +323,6 @@ const AppLayout: React.FC = () => {
    { key: 'myCredits', icon: <WalletOutlined />, label: '积分明细' },
    { key: 'orderRecords', icon: <FileTextOutlined />, label: '订单记录' },
    { key: 'messages', icon: <BellOutlined />, label: `消息中心${unreadCount > 0 ? `(${unreadCount})` : ''}` },
-    // { key: 'recharge', icon: <PlusCircleOutlined />, label: '充值积分' },
    { type: 'divider' as const },
    { key: 'changePwd', icon: <LockOutlined />, label: '修改密码' },
    { type: 'divider' as const },
@@ -318,7 +343,7 @@ const AppLayout: React.FC = () => {
      await pwdForm.validateFields();
      message.success('密码修改成功（演示）');
      setPwdModalOpen(false); pwdForm.resetFields();
-    } catch { /* validation */ }
+    } catch { }
  };

  const handleLogout = () => {
@@ -330,6 +355,31 @@ const AppLayout: React.FC = () => {
    setRechargeModalOpen(true);
  };

+  const handleContactSubmit = async () => {
+    if (!user) {
+      message.warning('请先登录');
+      return;
+    }
+    try {
+      const values = await contactForm.validateFields();
+      setSubmittingContact(true);
+      await createContactRequest({
+        phone: values.phone,
+        company_name: values.companyName,
+        industry: values.industry,
+        name: values.name,
+        message: values.message,
+      });
+      message.success('提交成功，我们会尽快与您联系');
+      setContactModalOpen(false);
+      contactForm.resetFields();
+    } catch (err: any) {
+      message.error(err?.message || '提交失败');
+    } finally {
+      setSubmittingContact(false);
+    }
+  };
+
  const stopPolling = useCallback(() => {
    if (pollingTimerRef.current) {
      clearInterval(pollingTimerRef.current);
@@ -345,7 +395,6 @@ const AppLayout: React.FC = () => {
    stopPolling();
    setCountdown(timeoutSeconds);

-    // 订单状态轮询（每2秒查询一次，只查询当前订单
    const pollingTimer = setInterval(async () => {
      try {
        const order = await getPaymentOrder(orderNo);
@@ -364,16 +413,13 @@ const AppLayout: React.FC = () => {
          localStorage.removeItem(PENDING_ORDER_KEY);
        }
      } catch {
-        // ignore polling errors
      }
    }, 2000);
    pollingTimerRef.current = pollingTimer;

-    // 倒计时
    const countdownTimer = setInterval(() => {
      setCountdown(prev => {
        if (prev <= 1) {
-          // 超时自动取消
          stopPolling();
          if (currentOrderNoRef.current) {
            cancelPaymentOrder(currentOrderNoRef.current).catch(() => { });
@@ -392,9 +438,82 @@ const AppLayout: React.FC = () => {
    countdownTimerRef.current = countdownTimer;
  }, [stopPolling]);

+  const renderMenuItem = (item: MenuConfig, depth: number = 0) => {
+    const isActive = item.path === selectedKey;
+    const menuIcon = iconMap[item.icon] || <HomeOutlined />;
+    const hasChildren = childMap[item.id] && childMap[item.id].length > 0;
+    const menuType = item.menu_type ?? item.menuType;
+    const isGroup = menuType === 'group';
+    const isExpanded = collapsedGroups[item.id] !== true;
+
+    return (
+      <div key={item.id}>
+        <div 
+          onClick={() => {
+            if (isGroup || hasChildren) {
+              setCollapsedGroups(prev => ({
+                ...prev,
+                [item.id]: !prev[item.id]
+              }));
+            } else if (item.path) {
+              navigate(item.path);
+            }
+          }} 
+          style={{
+            display: 'flex', alignItems: 'center',
+            justifyContent: 'flex-start',
+            gap: 10,
+            padding: depth > 0 ? '6px 12px 6px 32px' : '6px 14px',
+            borderRadius: 12, margin: '1px 4px', cursor: 'pointer',
+            fontSize: depth > 0 ? 13 : 14, fontWeight: isActive ? 600 : 400,
+            color: isActive ? '#4f46e5' : (isGroup ? '#94a3b8' : '#475569'),
+            background: isActive ? 'linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%)' : 'transparent',
+            transition: 'all 0.2s ease',
+          }}
+          onMouseEnter={(e) => {
+            if (!isGroup && !isActive) {
+              e.currentTarget.style.background = 'rgba(99, 102, 241, 0.05)';
+            }
+          }}
+          onMouseLeave={(e) => {
+            if (!isActive) {
+              e.currentTarget.style.background = 'transparent';
+            }
+          }}
+        >
+          {!isGroup && (
+            <span style={{
+              fontSize: depth > 0 ? 14 : 16,
+              flexShrink: 0,
+              color: isActive ? '#6366f1' : '#64748b',
+            }}>{menuIcon}</span>
+          )}
+          <span style={{ whiteSpace: 'nowrap', flex: 1, textAlign: 'left', fontWeight: isGroup ? 600 : (isActive ? 600 : 400), fontSize: isGroup ? 12 : (depth > 0 ? 13 : 14), textTransform: isGroup ? 'uppercase' : 'none', letterSpacing: isGroup ? 0.5 : 0 }}>
+            {item.label}
+          </span>
+          {(isGroup || hasChildren) && (
+            <span style={{ 
+              fontSize: isGroup ? 12 : 14, 
+              color: '#cbd5e1',
+              transition: 'transform 0.2s ease',
+              transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+            }}>
+              <RightOutlined />
+            </span>
+          )}
+        </div>
+        
+        {(isGroup || hasChildren) && isExpanded && (
+          <div style={{ overflow: 'hidden' }}>
+            {(childMap[item.id] || []).map(c => renderMenuItem(c, depth + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
  return (
    <Layout style={{ minHeight: '100vh' }}>
-      {/* Desktop Sidebar */}
      <div className="desktop-sidebar" style={{
        width: sidebarW, position: 'fixed', left: 16, top: 16, bottom: 16, zIndex: 100,
        background: 'linear-gradient(180deg, #ffffff 0%, #f8fafc 100%)',
@@ -405,7 +524,6 @@ const AppLayout: React.FC = () => {
        overflow: 'hidden',
        border: '1px solid rgba(0, 0, 0, 0.06)',
      }}>
-        {/* Logo */}
        <div style={{
          height: 80, display: 'flex', alignItems: 'center',
          justifyContent: 'flex-start',
@@ -445,76 +563,10 @@ const AppLayout: React.FC = () => {
          </div>
        </div>

-        {/* Menu */}
        <div style={{ flex: 1, padding: '8px 8px', overflow: 'auto' }}>
-          {/* {!collapsed && (
-            <div style={{ color: 'rgba(0,0,0,0.3)', fontSize: 11, fontWeight: 600, padding: '8px 12px 6px', letterSpacing: 1 }}>
-              导航
-            </div>
-          )} */}
-          {(() => {
-            const groups = menuItems.filter(m => (m.menu_type ?? m.menuType) === 'group');
-            const pages = menuItems.filter(m => (m.menu_type ?? m.menuType) !== 'group');
-            const childMap: Record<string, MenuConfig[]> = {};
-            pages.filter(m => m.parent_id ?? m.parentId).forEach(m => {
-              const pid = (m.parent_id ?? m.parentId) as string;
-              if (!childMap[pid]) childMap[pid] = [];
-              childMap[pid].push(m);
-            });
-            const topLevel = pages.filter(m => !(m.parent_id ?? m.parentId));
-            const items: React.ReactNode[] = [];
-
-            const renderMenuItem = (item: MenuConfig, depth: number = 0) => {
-              const isActive = item.path === selectedKey;
-              const menuIcon = iconMap[item.icon] || <HomeOutlined />;
-              return (
-                <div key={item.id} onClick={() => item.path && navigate(item.path)} style={{
-                  display: 'flex', alignItems: 'center',
-                  justifyContent: 'flex-start',
-                  gap: 12,
-                  padding: depth > 0 ? '8px 14px 8px 36px' : '10px 16px',
-                  borderRadius: 12, margin: '2px 6px', cursor: 'pointer',
-                  fontSize: depth > 0 ? 13 : 14, fontWeight: isActive ? 600 : 400,
-                  color: isActive ? '#4f46e5' : '#475569',
-                  background: isActive ? 'linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%)' : 'transparent',
-                  transition: 'all 0.2s ease',
-                }}>
-                  <span style={{
-                    fontSize: depth > 0 ? 14 : 16,
-                    flexShrink: 0,
-                    color: isActive ? '#6366f1' : '#64748b',
-                  }}>{menuIcon}</span>
-                  <span style={{ whiteSpace: 'nowrap' }}>{item.label}</span>
-                </div>
-              );
-            };
-
-            // Render groups with children
-            groups.sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0)).forEach(g => {
-              const children = (childMap[g.id] || []).sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
-              items.push(
-                <div key={g.id}>
-                  <div style={{
-                    color: '#94a3b8', fontSize: 12, fontWeight: 600,
-                    padding: '12px 16px 6px', letterSpacing: 0.5, textTransform: 'uppercase',
-                  }}>
-                    {g.label}
-                  </div>
-                  {children.map(c => renderMenuItem(c, 1))}
-                </div>
-              );
-            });
-
-            // Render top-level pages
-            topLevel.sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0)).forEach(m => {
-              items.push(renderMenuItem(m));
-            });
-
-            return items;
-          })()}
+          {topLevelItems.map(item => renderMenuItem(item))}
        </div>

-        {/* Recharge button - opens modal */}
        <div onClick={() => setRechargeModalOpen(true)} style={{
          margin: '8px 12px',
          padding: '12px 20px',
@@ -541,7 +593,6 @@ const AppLayout: React.FC = () => {
          <span>充值积分</span>
        </div>

-        {/* User block at bottom-left */}
        <div style={{ padding: '16px 16px', flexShrink: 0 }}>
          <Dropdown menu={{ items: userMenuItems, onClick: handleUserMenuClick }} placement="topRight" arrow>
            <div style={{
@@ -589,14 +640,12 @@ const AppLayout: React.FC = () => {
        </div>
      </div>

-      {/* Main Content */}
      <div className="desktop-content" style={{
        marginLeft: sidebarW + 28,
        marginRight: 12,
        marginTop: 16,
        marginBottom: 16,
        flex: 1,
-        // height: '100%',
        minHeight: 'calc(100vh - 32px)',
        background: 'transparent',
        padding: 0,
@@ -616,31 +665,154 @@ const AppLayout: React.FC = () => {
        </div>
      </div>

-      {/* Mobile Bottom Nav */}
-      <div className="mobile-bottom-nav">
-        {menuItems.filter((item) => (item.menu_type ?? item.menuType) !== 'group').map((item) => {
-          if (!item.path) return null;
-          const isActive = item.path === selectedKey;
-          return (
-            <div key={item.id}
-              className={`nav-item ${isActive ? 'active' : ''}`}
-              onClick={() => navigate(item.path)}>
-              <span className="nav-icon">{iconMap[item.icon] || <HomeOutlined />}</span>
-              <span>{item.label}</span>
+      <div className="mobile-header">
+        <div className="mobile-header-content">
+          <div className="mobile-menu-btn" onClick={() => setMobileMenuOpen(true)}>
+            <MenuOutlined style={{ fontSize: 20 }} />
+          </div>
+          <div className="mobile-header-title">{siteName}</div>
+          <div className="mobile-header-right">
+            <div className="mobile-credits-badge" onClick={() => setRechargeModalOpen(true)}>
+              <WalletOutlined />
+              <span>{user?.credits || 0}</span>
            </div>
-          );
-        })}
-        <div className="nav-item" onClick={handleMobileRecharge}>
-          <span className="nav-icon"><PlusCircleOutlined /></span>
-          <span>充值</span>
-        </div>
-        <div className="nav-item" onClick={handleLogout}>
-          <span className="nav-icon"><LogoutOutlined /></span>
-          <span>退出</span>
+          </div>
        </div>
      </div>

-      {/* Change Password Modal */}
+      <div className="mobile-content">
+        <Outlet />
+      </div>
+
+      <Drawer
+        title={
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <div style={{
+              width: 36, height: 36, borderRadius: 10, flexShrink: 0,
+              background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%)',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              boxShadow: '0 4px 12px rgba(99, 102, 241, 0.35)',
+            }}>
+              {siteLogo ? (
+                <img src={siteLogo} alt="logo" style={{ width: 24, height: 24, objectFit: 'contain' }} />
+              ) : (
+                <ThunderboltOutlined style={{ fontSize: 18, color: '#ffffff' }} />
+              )}
+            </div>
+            <span style={{ fontWeight: 700, fontSize: 16, color: '#1e293b' }}>{siteName}</span>
+          </div>
+        }
+        placement="left"
+        onClose={() => setMobileMenuOpen(false)}
+        open={mobileMenuOpen}
+        width={280}
+        closable={true}
+        className="mobile-menu-drawer"
+        styles={{
+          header: { borderBottom: '1px solid #f1f5f9', padding: '16px 20px' },
+          body: { padding: '12px 8px', display: 'flex', flexDirection: 'column' },
+        }}
+      >
+        <div style={{ flex: 1, overflow: 'auto', paddingBottom: 12 }}>
+          {topLevelItems.map(item => {
+            const menuType = item.menu_type ?? item.menuType;
+            const hasChildren = childMap[item.id] && childMap[item.id].length > 0;
+            const isActive = item.path === selectedKey;
+            const isExpanded = mobileExpandedMenus[item.id];
+            const menuIcon = iconMap[item.icon] || <HomeOutlined />;
+
+            return (
+              <div key={item.id}>
+                <div
+                  className={`mobile-menu-item ${isActive && !hasChildren ? 'mobile-menu-item-active' : ''} ${menuType === 'group' ? 'mobile-menu-group' : ''}`}
+                  onClick={() => handleMobileMenuClick(item)}
+                >
+                  {menuType !== 'group' && (
+                    <span className="mobile-menu-icon" style={{ color: isActive ? '#6366f1' : '#64748b' }}>
+                      {menuIcon}
+                    </span>
+                  )}
+                  <span className="mobile-menu-label" style={{ 
+                    paddingLeft: menuType === 'group' ? 0 : 0,
+                    color: menuType === 'group' ? '#94a3b8' : (isActive ? '#4f46e5' : '#475569'),
+                    fontWeight: menuType === 'group' ? 600 : (isActive ? 600 : 400),
+                    fontSize: menuType === 'group' ? 12 : 15,
+                    textTransform: menuType === 'group' ? 'uppercase' : 'none',
+                    letterSpacing: menuType === 'group' ? 0.5 : 0,
+                  }}>
+                    {item.label}
+                  </span>
+                  {(menuType === 'group' || hasChildren) && (
+                    <span style={{
+                      fontSize: 12,
+                      color: '#cbd5e1',
+                      transition: 'transform 0.2s ease',
+                      transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+                    }}>
+                      <RightOutlined />
+                    </span>
+                  )}
+                </div>
+                {(menuType === 'group' || hasChildren) && isExpanded && (
+                  <div className="mobile-submenu">
+                    {(childMap[item.id] || []).map(child => {
+                      const childActive = child.path === selectedKey;
+                      const childIcon = iconMap[child.icon] || <HomeOutlined />;
+                      return (
+                        <div
+                          key={child.id}
+                          className={`mobile-menu-item mobile-submenu-item ${childActive ? 'mobile-menu-item-active' : ''}`}
+                          onClick={() => handleMobileMenuClick(child)}
+                        >
+                          <span className="mobile-menu-icon" style={{ color: childActive ? '#6366f1' : '#94a3b8' }}>
+                            {childIcon}
+                          </span>
+                          <span className="mobile-menu-label" style={{ 
+                            color: childActive ? '#4f46e5' : '#64748b',
+                            fontWeight: childActive ? 600 : 400,
+                            fontSize: 14,
+                          }}>
+                            {child.label}
+                          </span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        <div style={{ padding: '8px 0', borderTop: '1px solid #f1f5f9' }}>
+          <div
+            className="mobile-menu-item mobile-recharge-item"
+            onClick={() => {
+              setRechargeModalOpen(true);
+              setMobileMenuOpen(false);
+            }}
+          >
+            <span className="mobile-menu-icon" style={{ color: '#fff' }}>
+              <PlusOutlined />
+            </span>
+            <span className="mobile-menu-label" style={{ color: '#fff', fontWeight: 600 }}>充值积分</span>
+          </div>
+          
+          <div
+            className="mobile-menu-item"
+            onClick={() => {
+              handleLogout();
+              setMobileMenuOpen(false);
+            }}
+          >
+            <span className="mobile-menu-icon" style={{ color: '#ef4444' }}>
+              <LogoutOutlined />
+            </span>
+            <span className="mobile-menu-label" style={{ color: '#ef4444' }}>退出登录</span>
+          </div>
+        </div>
+      </Drawer>
+
      <Modal title={<Space><LockOutlined />修改密码</Space>} open={pwdModalOpen}
        onOk={handleChangePwd} onCancel={() => { setPwdModalOpen(false); pwdForm.resetFields(); }}
        okText="确认修改" cancelText="取消" width={440}>
@@ -665,16 +837,31 @@ const AppLayout: React.FC = () => {
        </Form>
      </Modal>

-      {/* Recharge Modal */}
      <Modal title={<Space><GiftOutlined />积分充值</Space>} open={rechargeModalOpen}
        onCancel={() => { setRechargeModalOpen(false); setSelectedPlan(null); }}
-        footer={null} width={680}>
+        footer={null} width={680}
+        className="recharge-modal"
+        styles={{ body: { maxHeight: '70vh', overflowY: 'auto' } }}>
        <div style={{ marginTop: 16 }}>
          <Space style={{ marginBottom: 16 }}>
            <WalletOutlined style={{ color: '#6366f1' }} />
            <Typography.Text style={{ color: '#64748b', letterSpacing: 0 }}>当前积分余额</Typography.Text>
            <Typography.Text strong style={{ color: '#6366f1', fontSize: 20, fontWeight: 600 }}>{user?.credits ?? 0}</Typography.Text>
          </Space>
+          <div style={{
+            padding: '12px 16px',
+            background: 'rgba(99, 102, 241, 0.06)',
+            borderRadius: 10,
+            marginBottom: 16,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+          }}>
+            <InfoOutlined style={{ color: '#6366f1', fontSize: 14 }} />
+            <Typography.Text style={{ color: '#ff0000ff', fontSize: 13 }}>
+              当前平台仅支持支付宝/微信扫码充值，如需转账支付请联系我们
+            </Typography.Text>
+          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            {rechargeOptions.map((opt, idx) => {
              const g = GRADIENTS[idx % GRADIENTS.length];
@@ -698,7 +885,7 @@ const AppLayout: React.FC = () => {
                    <div style={{ flex: 1 }}>
                      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                        <Typography.Text strong style={{ fontSize: 15 }}>{opt.name}</Typography.Text>
-                        <Typography.Text style={{ fontSize: 12, color: '#94a3b8' }}>{totalCredits.toLocaleString()} 积分</Typography.Text>
+                        <Typography.Text style={{ fontSize: 14, fontWeight: 600, color: '#6366f1' }}>{totalCredits.toLocaleString()} 积分</Typography.Text>
                      </div>
                      <div style={{
                        fontSize: 22, fontWeight: 800, marginTop: 4,
@@ -711,7 +898,6 @@ const AppLayout: React.FC = () => {
            })}
          </div>

-          {/* Payment method selection */}
          {(!enabledMethods.alipay && !enabledMethods.wechat) ? (
            <div style={{ marginTop: 20, marginBottom: 8, padding: 16, background: '#fef2f2', borderRadius: 12, border: '1px solid #fecaca' }}>
              <Typography.Text style={{ color: '#dc2626', fontSize: 13 }}>
@@ -757,10 +943,8 @@ const AppLayout: React.FC = () => {
                try {
                  setPaying(true);
                  const order = await createRechargeOrder(plan.id, paymentMethod);
-                  // 检查是否有二维码信息，支持支付宝和微信支付
                  const qrCode = order.qrUrl || order.codeUrl || order.qr_code || order.code_url;
                  if ((order.paymentMethod === 'alipay' || order.paymentMethod === 'wechat') && qrCode) {
-                    // Alipay or WeChat Pay: show the QR code
                    const paymentInfo = {
                      price: plan.price,
                      credits: totalCredits,
@@ -772,7 +956,6 @@ const AppLayout: React.FC = () => {
                    setQrCodeModalOpen(true);
                    currentOrderNoRef.current = order.orderNo;

-                    // 保存到 localStorage
                    localStorage.setItem(PENDING_ORDER_KEY, JSON.stringify({
                      orderNo: order.orderNo,
                      price: plan.price,
@@ -783,10 +966,8 @@ const AppLayout: React.FC = () => {
                      timeoutSeconds: 180,
                    }));

-                    // Start polling for payment status
                    startPolling(order.orderNo);
                  } else {
-                    // Mock mode (auto-completes, no QR needed)
                    message.success('充值成功！积分已到账');
                    useAuthStore.getState().refreshUser();
                    setRechargeModalOpen(false);
@@ -809,12 +990,10 @@ const AppLayout: React.FC = () => {
        </div>
      </Modal>

-      {/* QR Code Payment Modal */}
      <Modal
        open={qrCodeModalOpen}
        onCancel={async () => {
          stopPolling();
-          // Mark order as cancelled if it's still pending
          if (currentOrderNoRef.current) {
            try { await cancelPaymentOrder(currentOrderNoRef.current); } catch { }
            currentOrderNoRef.current = null;
@@ -831,7 +1010,6 @@ const AppLayout: React.FC = () => {
        }}
      >
        <div style={{ padding: '24px' }}>
-          {/* Header */}
          <div style={{ textAlign: 'center', marginBottom: 24 }}>
            <div style={{
              width: 48, height: 48,
@@ -856,7 +1034,6 @@ const AppLayout: React.FC = () => {
            </Typography.Text>
          </div>

-          {/* QR Code */}
          <div style={{
            background: '#fff',
            borderRadius: 16,
@@ -900,7 +1077,6 @@ const AppLayout: React.FC = () => {
              }}>
                购买 {currentPaymentInfo?.credits || 0} 积分
              </div>
-              {/* 倒计时显示 */}
              <div style={{
                marginTop: 12,
                padding: '8px 16px',
@@ -920,7 +1096,6 @@ const AppLayout: React.FC = () => {
            </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>
@@ -934,7 +1109,6 @@ const AppLayout: React.FC = () => {
            </div>
          </div>

-          {/* Footer Buttons */}
          <div style={{ marginTop: 20 }}>
            <Button
              size="large"
@@ -959,6 +1133,105 @@ const AppLayout: React.FC = () => {
      </Modal>

      <NotificationPopup />
+
+      <div className="contact-button-wrapper">
+        <div style={{
+          position: 'relative',
+        }}>
+          <div
+            className="contact-tooltip"
+            style={{
+              opacity: contactHovered ? 1 : 0,
+            }}
+          >
+            联系我们
+          </div>
+          <button
+            onClick={() => setContactModalOpen(true)}
+            className="contact-button"
+            onMouseEnter={() => setContactHovered(true)}
+            onMouseLeave={() => setContactHovered(false)}
+          >
+            <MessageOutlined style={{ fontSize: 20 }} />
+          </button>
+        </div>
+      </div>
+
+      <Modal
+        title={<Space><MessageOutlined />联系我们</Space>}
+        open={contactModalOpen}
+        onCancel={() => { setContactModalOpen(false); contactForm.resetFields(); }}
+        footer={null}
+        width={480}
+        className="contact-modal"
+      >
+        <div style={{ marginTop: 8 }}>
+          <Form form={contactForm} layout="vertical">
+            <Form.Item
+              name="name"
+              label="姓名"
+              rules={[{ required: true, message: '请输入姓名' }]}
+            >
+              <Input placeholder="请输入您的姓名" size="large" />
+            </Form.Item>
+            <Form.Item
+              name="phone"
+              label="手机号"
+              rules={[
+                { required: true, message: '请输入手机号' },
+                { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' },
+              ]}
+            >
+              <Input placeholder="请输入您的手机号" size="large" />
+            </Form.Item>
+            <Form.Item
+              name="companyName"
+              label="公司名称"
+              rules={[{ required: true, message: '请输入公司名称' }]}
+            >
+              <Input placeholder="请输入公司名称" size="large" />
+            </Form.Item>
+            <Form.Item
+              name="industry"
+              label="您的行业"
+              rules={[{ required: true, message: '请输入您的行业' }]}
+            >
+              <Input placeholder="请输入您的行业" size="large" />
+            </Form.Item>
+            <Form.Item name="message" label="留言（选填）">
+              <Input.TextArea
+                placeholder="请输入您的需求或问题"
+                rows={3}
+                style={{ borderRadius: 10 }}
+              />
+            </Form.Item>
+          </Form>
+          <div style={{ marginTop: 16, display: 'flex', gap: 12 }}>
+            <Button
+              size="large"
+              onClick={() => { setContactModalOpen(false); contactForm.resetFields(); }}
+              style={{ borderRadius: 10, flex: 1 }}
+            >
+              取消
+            </Button>
+            <Button
+              type="primary"
+              size="large"
+              onClick={handleContactSubmit}
+              loading={submittingContact}
+              style={{
+                borderRadius: 10,
+                background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
+                border: 'none',
+                flex: 1,
+              }}
+            >
+              提交
+            </Button>
+          </div>
+        </div>
+      </Modal>
+
    </Layout>
  );
 };
@@ -0,0 +1,141 @@
+import React, { useState } from 'react';
+import { Popover, Tag, List, Descriptions, Typography } from 'antd';
+
+interface PreResultData {
+  video_id: string; //视频id
+  advertiser_id: number; //广告主id
+  material_id: string; //素材id
+  is_ad_high_quality_material: string; //是否优质素材
+  is_ecp_high_quality_material: string; //是否千川优质素材
+  is_inefficient_material: string; //是否低效素材
+  is_first_publish_material: string; //是否首发素材
+  not_ad_high_quality_reason: string[] | null; //AD非优质原因
+  not_ecp_high_quality_reason: string[] | null; //千川非优质原因
+  is_local_high_quality_material: string; //是否本地推优质素材
+}
+
+interface PreResultDisplayProps {
+  preResult: string;
+}
+
+const qualityConfig: Record<string, { color: string; label: string }> = {
+  YES: { color: 'green', label: '是' },
+  NO: { color: 'red', label: '否' },
+  UNKNOWN: { color: 'default', label: '未知' },
+};
+
+const PreResultDisplay: React.FC<PreResultDisplayProps> = ({ preResult }) => {
+  const [parsedData, setParsedData] = useState<PreResultData | null>(null);
+  const [hasError, setHasError] = useState(false);
+
+  React.useEffect(() => {
+    if (!preResult) {
+      setParsedData(null);
+      setHasError(false);
+      return;
+    }
+    try {
+      const data = JSON.parse(preResult);
+      setParsedData(data);
+      setHasError(false);
+    } catch {
+      setParsedData(null);
+      setHasError(true);
+    }
+  }, [preResult]);
+
+  if (!preResult || hasError || !parsedData) {
+    return <span style={{ color: '#64748b' }}>-</span>;
+  }
+
+  const allQualityFields = [
+    parsedData.is_ad_high_quality_material,
+    parsedData.is_ecp_high_quality_material,
+    parsedData.is_local_high_quality_material,
+  ];
+  
+  const hasNoQuality = allQualityFields.some((val) => val === 'NO');
+  const allYes = allQualityFields.every((val) => val === 'YES');
+
+  let statusTag;
+  if (hasNoQuality) {
+    statusTag = <Tag color="red">非优质</Tag>;
+  } else if (allYes) {
+    statusTag = <Tag color="green">优质</Tag>;
+  } else {
+    statusTag = <Tag color="default">待评估</Tag>;
+  }
+
+  const content = (
+    <div style={{ maxWidth: 500 }}>
+      <Typography.Text strong style={{ fontSize: 14, display: 'block', marginBottom: 12 }}>前测结果详情</Typography.Text>
+      
+      <Descriptions column={1} size="small" style={{ marginBottom: 12 }}>
+        <Descriptions.Item label="视频ID">{parsedData.video_id}</Descriptions.Item>
+        <Descriptions.Item label="广告主ID">{parsedData.advertiser_id}</Descriptions.Item>
+        <Descriptions.Item label="素材ID">{parsedData.material_id}</Descriptions.Item>
+      </Descriptions>
+
+      <Typography.Text strong style={{ fontSize: 12, color: '#64748b', display: 'block', marginBottom: 8 }}>质量评估</Typography.Text>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 12 }}>
+        <Tag color={qualityConfig[parsedData.is_ad_high_quality_material]?.color}>
+          AD优质素材: {qualityConfig[parsedData.is_ad_high_quality_material]?.label}
+        </Tag>
+        <Tag color={qualityConfig[parsedData.is_ecp_high_quality_material]?.color}>
+          千川优质素材: {qualityConfig[parsedData.is_ecp_high_quality_material]?.label}
+        </Tag>
+        <Tag color={qualityConfig[parsedData.is_local_high_quality_material]?.color}>
+          本地推优质素材: {qualityConfig[parsedData.is_local_high_quality_material]?.label}
+        </Tag>
+        <Tag color={qualityConfig[parsedData.is_inefficient_material]?.color}>
+          低效素材: {qualityConfig[parsedData.is_inefficient_material]?.label}
+        </Tag>
+        <Tag color={qualityConfig[parsedData.is_first_publish_material]?.color}>
+          首发素材: {qualityConfig[parsedData.is_first_publish_material]?.label}
+        </Tag>
+      </div>
+
+      {parsedData.not_ad_high_quality_reason && parsedData.not_ad_high_quality_reason.length > 0 && (
+        <div style={{ marginBottom: 12 }}>
+          <Typography.Text strong style={{ fontSize: 12, color: '#ef4444', display: 'block', marginBottom: 8 }}>
+            AD非优质原因
+          </Typography.Text>
+          <List
+            dataSource={parsedData.not_ad_high_quality_reason}
+            renderItem={(item, index) => (
+              <List.Item key={index} style={{ padding: '4px 0', fontSize: 12, color: '#64748b' }}>
+                {index + 1}. {item}
+              </List.Item>
+            )}
+            size="small"
+          />
+        </div>
+      )}
+
+      {parsedData.not_ecp_high_quality_reason && parsedData.not_ecp_high_quality_reason.length > 0 && (
+        <div>
+          <Typography.Text strong style={{ fontSize: 12, color: '#ef4444', display: 'block', marginBottom: 8 }}>
+            千川非优质原因
+          </Typography.Text>
+          <List
+            dataSource={parsedData.not_ecp_high_quality_reason}
+            renderItem={(item, index) => (
+              <List.Item key={index} style={{ padding: '4px 0', fontSize: 12, color: '#64748b' }}>
+                {index + 1}. {item}
+              </List.Item>
+            )}
+            size="small"
+          />
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <Popover content={content} title={null} trigger="hover">
+      {statusTag}
+    </Popover>
+  );
+};
+
+export default PreResultDisplay;