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 15:57:46 +08:00
parent d82c7a1490
commit 0903543994
5 changed files with 67 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
video-gen-app/src/components/Layout/AppLayout.tsx
+49 -13
View File
@@ -505,13 +505,21 @@ const AppLayout: React.FC = () => {
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',
padding: depth > 0 ? '8px 12px 8px 32px' : '8px 14px',
borderRadius: 12, margin: '2px 4px', 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',
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = 'rgba(99, 102, 241, 0.05)';
}}
onMouseLeave={(e) => {
if (!isActive) {
e.currentTarget.style.background = 'transparent';
}
}}
>
<span style={{
fontSize: depth > 0 ? 14 : 16,
@@ -546,23 +554,51 @@ const AppLayout: React.FC = () => {
topLevelItems.forEach(item => {
const menuType = item.menu_type ?? item.menuType;
const hasChildren = childMap[item.id] && childMap[item.id].length > 0;
const isExpanded = collapsedGroups[item.id] !== true;
if (menuType === 'group') {
items.push(
<div key={item.id}>
<div style={{
color: '#94a3b8', fontSize: 12, fontWeight: 600,
padding: '10px 14px 4px', letterSpacing: 0.5, textTransform: 'uppercase',
}}>
{item.label}
<div
onClick={() => {
setCollapsedGroups(prev => ({
...prev,
[item.id]: !prev[item.id]
}));
}}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
color: '#94a3b8', fontSize: 12, fontWeight: 600,
padding: '10px 14px 4px', letterSpacing: 0.5, textTransform: 'uppercase',
cursor: 'pointer',
}}
>
<span>{item.label}</span>
<span style={{
fontSize: 12,
color: '#cbd5e1',
transition: 'transform 0.2s ease',
transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
}}>
<RightOutlined />
</span>
</div>
{(childMap[item.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(c => renderMenuItem(c, 1))}
{isExpanded && (
<div style={{ overflow: 'hidden' }}>
{(childMap[item.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(c => renderMenuItem(c, 1))}
</div>
)}
</div>
);
} else if (hasChildren) {
items.push(renderMenuItem(item));
} else {
items.push(renderMenuItem(item));
}