fix(ui): 修复响应式侧边栏重复渲染问题

移动端抽屉和桌面端侧边栏分别用 md:hidden 和 hidden md:flex 控制显示
This commit is contained in:
2025-12-12 17:59:08 +08:00
parent 3ccc47ca5a
commit ada9f890c6
+4 -14
View File
@@ -247,7 +247,7 @@ export function Sidebar({
<Menu size={20} />
</motion.button>
{/* 遮罩层 */}
{/* 遮罩层 - 仅移动端 */}
<AnimatePresence>
{isOpen && (
<motion.div
@@ -261,24 +261,14 @@ export function Sidebar({
)}
</AnimatePresence>
{/* 侧边栏 */}
{/* 移动端抽屉式侧边栏 */}
<motion.div
initial={false}
animate={{ x: isOpen ? 0 : '-100%' }}
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
className={cn(
'fixed md:static inset-y-0 left-0 z-50',
'w-64 bg-gray-800 border-r border-gray-700 flex flex-col',
'md:transform-none md:translate-x-0'
)}
style={{ transform: 'none' }}
className="fixed inset-y-0 left-0 z-50 w-64 bg-gray-800 border-r border-gray-700 flex flex-col md:hidden"
>
<div className="hidden md:flex flex-col h-full">
<SidebarContent />
</div>
<div className="flex md:hidden flex-col h-full">
<SidebarContent />
</div>
<SidebarContent />
</motion.div>
{/* 桌面端固定侧边栏 */}