mz/video-gen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
root
2026-06-26 16:07:40 +08:00
parent 0903543994
commit 4e33900317
6 changed files with 228 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
video-gen-app/dist/assets/index-4U-_hqyL.js → video-gen-app/dist/assets/index-CW4DG5sI.js
Vendored
+41 -41
View File
File diff suppressed because one or more lines are too long
video-gen-app/dist/assets/index-eLRg4pQk.css → video-gen-app/dist/assets/index-hHWRoeqc.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
video-gen-app/dist/index.html
Vendored
+2 -2
View File
@@ -28,8 +28,8 @@
} }
})(); })();
</script> </script>
<script type="module" crossorigin src="/assets/index-4U-_hqyL.js"></script> <script type="module" crossorigin src="/assets/index-CW4DG5sI.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-eLRg4pQk.css"> <link rel="stylesheet" crossorigin href="/assets/index-hHWRoeqc.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
video-gen-app/src/App.css
+10 -3
View File
@@ -241,11 +241,18 @@
@media (max-width: 480px) { @media (max-width: 480px) {
.login-left-section { .login-left-section {
padding: 24px 12px; padding: 20px 16px 12px !important;
text-align: center; text-align: center;
} }
.login-left-section > div > div:first-of-type {
justify-content: center;
}
.login-right-section { .login-right-section {
padding: 12px 12px 24px; padding: 12px 16px 24px !important;
align-items: flex-start;
}
.login-right-section .ant-card {
max-width: 100% !important;
width: 100% !important;
} }
} }
video-gen-app/src/components/Layout/AppLayout.tsx
+78 -4
View File
@@ -138,6 +138,9 @@ const AppLayout: React.FC = () => {
const [menuItems, setMenuItems] = useState<MenuConfig[]>([]); const [menuItems, setMenuItems] = useState<MenuConfig[]>([]);
const [rechargeOptions, setRechargeOptions] = useState<any[]>([]); const [rechargeOptions, setRechargeOptions] = useState<any[]>([]);
const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({}); 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 [unreadCount, setUnreadCount] = useState(0);
const [siteName, setSiteName] = useState(() => { const [siteName, setSiteName] = useState(() => {
const cached = localStorage.getItem('siteInfo'); const cached = localStorage.getItem('siteInfo');
@@ -306,6 +309,35 @@ const AppLayout: React.FC = () => {
else if (key === 'orderRecords') { navigate('/user-center?tab=orders'); } 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 () => { const handleChangePwd = async () => {
try { try {
await pwdForm.validateFields(); await pwdForm.validateFields();
@@ -712,13 +744,23 @@ const AppLayout: React.FC = () => {
{/* Mobile Bottom Nav */} {/* Mobile Bottom Nav */}
<div className="mobile-bottom-nav"> <div className="mobile-bottom-nav">
{menuItems.filter((item) => (item.menu_type ?? item.menuType) !== 'group').map((item) => { {menuItems.filter((item) => {
if (!item.path) return null; if ((item.menu_type ?? item.menuType) === 'group') return false;
const isActive = item.path === selectedKey; // 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 ( return (
<div key={item.id} <div key={item.id}
className={`nav-item ${isActive ? 'active' : ''}`} className={`nav-item ${isActive ? 'active' : ''}`}
onClick={() => navigate(item.path)}> onClick={() => handleMobileNavClick(item)}>
<span className="nav-icon">{iconMap[item.icon] || <HomeOutlined />}</span> <span className="nav-icon">{iconMap[item.icon] || <HomeOutlined />}</span>
<span>{item.label}</span> <span>{item.label}</span>
</div> </div>
@@ -734,6 +776,38 @@ const AppLayout: React.FC = () => {
</div> </div>
</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 */} {/* Change Password Modal */}
<Modal title={<Space><LockOutlined />修改密码</Space>} open={pwdModalOpen} <Modal title={<Space><LockOutlined />修改密码</Space>} open={pwdModalOpen}
onOk={handleChangePwd} onCancel={() => { setPwdModalOpen(false); pwdForm.resetFields(); }} onOk={handleChangePwd} onCancel={() => { setPwdModalOpen(false); pwdForm.resetFields(); }}
video-gen-app/src/index.css
+96
View File
@@ -417,6 +417,102 @@ html, body {
.mobile-mb-12 { margin-bottom: 12px !important; } .mobile-mb-12 { margin-bottom: 12px !important; }
} }
/* ── Mobile Menu Drawer ────────────── */
.mobile-menu-drawer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 300;
background: rgba(255,255,255,0.98);
backdrop-filter: blur(24px);
border-radius: 20px 20px 0 0;
box-shadow: 0 -8px 40px rgba(0,0,0,0.12);
max-height: 70vh;
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.mobile-menu-drawer.open {
transform: translateY(0);
}
.mobile-menu-drawer .drawer-handle {
display: flex;
justify-content: center;
padding: 12px 0 4px;
}
.mobile-menu-drawer .drawer-handle span {
width: 36px;
height: 4px;
background: #cbd5e1;
border-radius: 2px;
}
.mobile-menu-drawer .drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 20px 12px;
border-bottom: 1px solid #f1f5f9;
}
.mobile-menu-drawer .drawer-title {
font-size: 15px;
font-weight: 600;
color: #1e293b;
}
.mobile-menu-drawer .drawer-body {
flex: 1;
overflow-y: auto;
padding: 8px 12px 20px;
}
.mobile-menu-drawer .drawer-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 12px;
font-size: 15px;
color: #334155;
cursor: pointer;
transition: background 0.15s;
}
.mobile-menu-drawer .drawer-item:active {
background: #f1f5f9;
}
.mobile-menu-drawer .drawer-item .drawer-icon {
font-size: 18px;
color: #6366f1;
width: 24px;
text-align: center;
}
.mobile-menu-drawer .drawer-back {
display: flex;
align-items: center;
gap: 4px;
color: #6366f1;
font-size: 14px;
cursor: pointer;
padding: 4px 8px;
border-radius: 8px;
}
.mobile-menu-drawer .drawer-back:active {
background: rgba(99,102,241,0.08);
}
.mobile-menu-overlay {
position: fixed;
inset: 0;
z-index: 299;
background: rgba(15, 23, 42, 0.4);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.mobile-menu-overlay.open {
opacity: 1;
pointer-events: auto;
}
/* ── Tablet Breakpoint (769px to 1024px) ────────────── */ /* ── Tablet Breakpoint (769px to 1024px) ────────────── */
@media (min-width: 769px) and (max-width: 1024px) { @media (min-width: 769px) and (max-width: 1024px) {
/* /*