Просмотр исходного кода

✨ feat(layout): 优化管理后台布局的响应式设计

- 侧边栏标题现在仅在展开时显示,提升折叠状态下的简洁性
- 新增桌面端专用的侧边栏折叠按钮,与移动端菜单按钮分离
- 移动端菜单按钮现在控制独立的移动端菜单状态,提升移动端交互体验
yourname 2 недель назад
Родитель
Сommit
8af0dd6384
1 измененных файлов с 19 добавлено и 4 удалено
  1. 19 4
      web/src/client/admin/layouts/MainLayout.tsx

+ 19 - 4
web/src/client/admin/layouts/MainLayout.tsx

@@ -81,9 +81,11 @@ export const MainLayout = () => {
   const SidebarContent = () => (
   const SidebarContent = () => (
     <div className="flex h-full flex-col">
     <div className="flex h-full flex-col">
       <div className="p-4 border-b">
       <div className="p-4 border-b">
-        <h2 className="text-lg font-semibold truncate">
-          {collapsed ? '应用' : appName}
-        </h2>
+        {!collapsed && (
+          <h2 className="text-lg font-semibold truncate">
+            {appName}
+          </h2>
+        )}
         {/* {!collapsed && (
         {/* {!collapsed && (
           <div className="mt-4">
           <div className="mt-4">
             <Input
             <Input
@@ -165,15 +167,28 @@ export const MainLayout = () => {
         {/* Header */}
         {/* Header */}
         <header className="flex h-16 items-center justify-between border-b bg-background px-4">
         <header className="flex h-16 items-center justify-between border-b bg-background px-4">
           <div className="flex items-center gap-2">
           <div className="flex items-center gap-2">
+            {/* 手机端菜单按钮 */}
             <Button
             <Button
               variant="ghost"
               variant="ghost"
               size="sm"
               size="sm"
-              onClick={() => setCollapsed(!collapsed)}
+              className="md:hidden"
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
               data-testid="mobile-menu-button"
               data-testid="mobile-menu-button"
             >
             >
               <Menu className="h-4 w-4" />
               <Menu className="h-4 w-4" />
               菜单栏
               菜单栏
             </Button>
             </Button>
+            {/* 桌面端折叠按钮 */}
+            <Button
+              variant="ghost"
+              size="sm"
+              className="hidden md:flex"
+              onClick={() => setCollapsed(!collapsed)}
+              data-testid="desktop-collapse-button"
+            >
+              <Menu className="h-4 w-4" />
+              菜单栏
+            </Button>
           </div>
           </div>
 
 
           <div className="flex items-center gap-4">
           <div className="flex items-center gap-4">