1

video-gen-app/src/components/Layout/AppLayout.tsx

@@ -138,6 +138,9 @@ const AppLayout: React.FC = () => {
   const [menuItems, setMenuItems] = useState<MenuConfig[]>([]);
   const [rechargeOptions, setRechargeOptions] = useState<any[]>([]);
   const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});
+  const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
+  const [mobileDrawerParent, setMobileDrawerParent] = useState<MenuConfig | null>(null);
+  const [mobileDrawerChildren, setMobileDrawerChildren] = useState<MenuConfig[]>([]);
   const [unreadCount, setUnreadCount] = useState(0);
   const [siteName, setSiteName] = useState(() => {
     const cached = localStorage.getItem('siteInfo');
@@ -306,6 +309,35 @@ const AppLayout: React.FC = () => {
     else if (key === 'orderRecords') { navigate('/user-center?tab=orders'); }
   };
 
+  // Mobile two-level menu: open drawer with children
+  const handleMobileNavClick = (item: MenuConfig) => {
+    const children = menuItems.filter(m => (m.parent_id ?? m.parentId) === item.id);
+    if (children.length > 0) {
+      setMobileDrawerParent(item);
+      setMobileDrawerChildren(children.sort((a, b) => {
+        const orderA = typeof a.sortOrder === 'number' ? a.sortOrder : Infinity;
+        const orderB = typeof b.sortOrder === 'number' ? b.sortOrder : Infinity;
+        return orderA - orderB;
+      }));
+      setMobileDrawerOpen(true);
+    } else if (item.path) {
+      navigate(item.path);
+    }
+  };
+
+  const handleMobileChildClick = (item: MenuConfig) => {
+    if (item.path) {
+      setMobileDrawerOpen(false);
+      setMobileDrawerParent(null);
+      navigate(item.path);
+    }
+  };
+
+  const closeMobileDrawer = () => {
+    setMobileDrawerOpen(false);
+    setMobileDrawerParent(null);
+  };
+
   const handleChangePwd = async () => {
     try {
       await pwdForm.validateFields();
@@ -712,13 +744,23 @@ const AppLayout: React.FC = () => {
 
       {/* 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;
+        {menuItems.filter((item) => {
+          if ((item.menu_type ?? item.menuType) === 'group') return false;
+          // Only show top-level items (no parent)
+          if (item.parent_id || item.parentId) return false;
+          return true;
+        }).sort((a, b) => {
+          const orderA = typeof a.sortOrder === 'number' ? a.sortOrder : Infinity;
+          const orderB = typeof b.sortOrder === 'number' ? b.sortOrder : Infinity;
+          return orderA - orderB;
+        }).map((item) => {
+          const isActive = item.path === selectedKey || menuItems.some(m =>
+            (m.parent_id ?? m.parentId) === item.id && m.path === selectedKey
+          );
           return (
             <div key={item.id}
               className={`nav-item ${isActive ? 'active' : ''}`}
-              onClick={() => navigate(item.path)}>
+              onClick={() => handleMobileNavClick(item)}>
               <span className="nav-icon">{iconMap[item.icon] || <HomeOutlined />}</span>
               <span>{item.label}</span>
             </div>
@@ -734,6 +776,38 @@ const AppLayout: React.FC = () => {
         </div>
       </div>
 
+      {/* Mobile Menu Drawer (two-level) */}
+      <div className={`mobile-menu-overlay ${mobileDrawerOpen ? 'open' : ''}`} onClick={closeMobileDrawer} />
+      <div className={`mobile-menu-drawer ${mobileDrawerOpen ? 'open' : ''}`}>
+        <div className="drawer-handle"><span /></div>
+        <div className="drawer-header">
+          {mobileDrawerParent && (
+            <div className="drawer-back" onClick={() => { setMobileDrawerParent(null); }}>
+              <LeftOutlined /> 返回
+            </div>
+          )}
+          <div className="drawer-title">{mobileDrawerParent?.label || '菜单'}</div>
+          <div style={{ width: 50 }} />
+        </div>
+        <div className="drawer-body">
+          {mobileDrawerChildren.map(item => (
+            <div
+              key={item.id}
+              className="drawer-item"
+              onClick={() => handleMobileChildClick(item)}
+            >
+              <span className="drawer-icon">{iconMap[item.icon] || <RightOutlined />}</span>
+              <span>{item.label}</span>
+            </div>
+          ))}
+          {mobileDrawerChildren.length === 0 && (
+            <div style={{ textAlign: 'center', color: '#94a3b8', padding: '24px 0' }}>
+              暂无子菜单
+            </div>
+          )}
+        </div>
+      </div>
+
       {/* Change Password Modal */}
       <Modal title={<Space><LockOutlined />修改密码</Space>} open={pwdModalOpen}
         onOk={handleChangePwd} onCancel={() => { setPwdModalOpen(false); pwdForm.resetFields(); }}