1
This commit is contained in:
@@ -139,7 +139,6 @@ const AppLayout: React.FC = () => {
|
||||
const [rechargeOptions, setRechargeOptions] = useState<any[]>([]);
|
||||
const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});
|
||||
const [unreadCount, setUnreadCount] = useState(0);
|
||||
const [mobileExpandedParent, setMobileExpandedParent] = useState<MenuConfig | null>(null);
|
||||
const [siteName, setSiteName] = useState(() => {
|
||||
const cached = localStorage.getItem('siteInfo');
|
||||
const name = cached ? JSON.parse(cached).siteName || '' : '';
|
||||
@@ -284,24 +283,6 @@ const AppLayout: React.FC = () => {
|
||||
const selectedKey = location.pathname.startsWith('/records') ? '/records' : location.pathname;
|
||||
const sidebarW = SIDEBAR_W;
|
||||
|
||||
// Compute menu hierarchy (used by both desktop sidebar and mobile nav)
|
||||
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;
|
||||
});
|
||||
// For mobile nav: show top-level items that either have a path or have children
|
||||
const topLevelForNav = topLevelItems.filter(m => m.path || (childMap[m.id] && childMap[m.id].length > 0));
|
||||
|
||||
const userMenuItems = [
|
||||
{ key: 'profile', icon: <UserOutlined />, label: `账号: ${user?.username}`, disabled: true },
|
||||
{ key: 'credits', icon: <WalletOutlined style={{ color: '#c9a96e' }} />, label: `积分: ${user?.credits ?? 0}`, disabled: true },
|
||||
@@ -480,7 +461,23 @@ const AppLayout: React.FC = () => {
|
||||
{/* Menu */}
|
||||
<div style={{ flex: 1, padding: '8px 8px', overflow: 'auto' }}>
|
||||
{(() => {
|
||||
// childMap, topLevelItems are computed at component level above
|
||||
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;
|
||||
});
|
||||
|
||||
const items: React.ReactNode[] = [];
|
||||
|
||||
const renderMenuItem = (item: MenuConfig, depth: number = 0) => {
|
||||
@@ -713,77 +710,27 @@ const AppLayout: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Bottom Nav - Two Level */}
|
||||
<div className="mobile-bottom-nav-wrapper">
|
||||
{/* Sub-menu panel (level-2) */}
|
||||
{mobileExpandedParent && (
|
||||
<div className="mobile-submenu-panel">
|
||||
<div className="mobile-submenu-header" onClick={() => setMobileExpandedParent(null)}>
|
||||
<LeftOutlined style={{ fontSize: 16, color: '#6366f1' }} />
|
||||
<span className="mobile-submenu-title">{mobileExpandedParent.label}</span>
|
||||
{/* 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>
|
||||
<div className="mobile-submenu-list">
|
||||
{(childMap[mobileExpandedParent.id] || []).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(child => (
|
||||
<div
|
||||
key={child.id}
|
||||
className={`mobile-submenu-item ${child.path === selectedKey ? 'active' : ''}`}
|
||||
onClick={() => {
|
||||
if (child.path) {
|
||||
navigate(child.path);
|
||||
setMobileExpandedParent(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="mobile-submenu-icon">{iconMap[child.icon] || <RightOutlined />}</span>
|
||||
<span>{child.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bottom nav (level-1) */}
|
||||
<div className="mobile-bottom-nav">
|
||||
{topLevelForNav.map((item) => {
|
||||
const hasChildren = childMap[item.id] && childMap[item.id].length > 0;
|
||||
const isActive = mobileExpandedParent?.id === item.id
|
||||
|| (!mobileExpandedParent && item.path === selectedKey)
|
||||
|| (!mobileExpandedParent && hasChildren && (childMap[item.id] || []).some(c => c.path === selectedKey));
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`nav-item ${isActive ? 'active' : ''}`}
|
||||
onClick={() => {
|
||||
if (hasChildren) {
|
||||
setMobileExpandedParent(prev => prev?.id === item.id ? null : item);
|
||||
} else if (item.path) {
|
||||
navigate(item.path);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="nav-icon">{iconMap[item.icon] || <HomeOutlined />}</span>
|
||||
<span>{item.label}</span>
|
||||
{hasChildren && (
|
||||
<span className="nav-expand-dot" style={{
|
||||
width: 4, height: 4, borderRadius: '50%',
|
||||
background: isActive ? '#6366f1' : '#cbd5e1',
|
||||
}} />
|
||||
)}
|
||||
</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 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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user