cavin/smart-crop-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
978419fa2c47699e8a79e8ac00706aafb8a07614
smart-crop-ui/src/SIDEBAR_COLLAPSE_README.md

9.0 KiB
Raw Blame History

📁 左侧菜单收起/展开功能说明

✨ 功能概述

左侧导航菜单现已支持收起和展开功能，用户可以通过点击按钮来切换菜单的显示模式，提供更灵活的界面布局体验。

🎯 功能特性

✅ 展开模式（默认）

  • 宽度：256px (w-64)
  • 显示完整菜单文字
  • 显示"功能菜单"标题
  • 显示一级和二级菜单
  • 支持菜单折叠/展开

✅ 收起模式

  • 宽度：64px (w-16)
  • 仅显示首字母图标
  • 鼠标悬停显示完整信息
  • 点击直接导航到第一个子菜单
  • 节省屏幕空间

🎨 界面展示

展开状态

┌────────────────────────────┐     ◁◁
│ ▼ 农机档案管理              │      ↑
│    档案录入                 │  收起按钮
│    档案列表                 │  (浮动在右侧)
│    二维码管理               │
│    档案分类                 │
│                            │
│ ▶ 农机作业监测              │
│                            │
│ ▶ 驾驶员管理                │
└────────────────────────────┘
     256px 宽度

收起状态

┌──────┐  ▷▷
│  📁  │   ↑
│  👤  │ 展开按钮
│  📊  │ (浮动在右侧)
│  🖥️  │
└──────┘
  64px
  宽度

🖱️ 操作指南

方法1：点击按钮

  1. 展开 → 收起

    • 点击顶部的 ◁◁ 按钮
    • 菜单收起为图标模式

  2. 收起 → 展开

    • 点击顶部的 ▷▷ 按钮
    • 菜单展开为完整模式

方法2：键盘快捷键（可扩展）

目前暂不支持，未来可添加：

  • Ctrl + B - 切换侧边栏
  • [ - 收起侧边栏
  • ] - 展开侧边栏

💡 交互细节

展开模式

一级菜单

  • 点击：折叠/展开二级菜单
  • 显示：完整菜单名称
  • 图标：▼ 展开 / ▶ 折叠

二级菜单

  • 点击：导航到对应页面
  • 高亮：当前激活页面显示绿色背景
  • 悬停：显示灰色背景

收起模式

菜单图标

  • 显示：菜单名称首字母（如"农"）
  • 样式：居中显示，较大字号
  • 高亮：包含当前页面的菜单显示绿色背景

悬停提示

  • 触发：鼠标悬停在菜单图标上
  • 显示：完整菜单名称 + 所有子菜单列表
  • 位置：右侧弹出
  • 延迟：无延迟（即时显示）

点击行为

  • 收起状态下点击一级菜单
  • 自动导航到该菜单的第一个子功能
  • 无需先展开再选择

🎨 视觉效果

动画效果

  • ✨ 宽度变化：300ms 平滑过渡
  • ✨ 按钮图标：自动切换方向
  • ✨ 内容淡入淡出：流畅切换

状态指示

  • 🟢 当前页面：绿色背景高亮
  • ⚪ 普通菜单：灰色文字
  • 🔵 悬停状态：浅灰背景
  • 🟢 激活菜单组：收起时显示绿色背景

🔧 技术实现

核心组件

Sidebar.tsx

interface SidebarProps {
  menus: MenuItem[];
  activePath: string;
  onNavigate: (path: string) => void;
  collapsed?: boolean;              // 新增：收起状态
  onCollapsedChange?: (collapsed: boolean) => void;  // 新增：状态改变回调
}

状态管理

// App.tsx
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);

<Sidebar
  collapsed={sidebarCollapsed}
  onCollapsedChange={setSidebarCollapsed}
/>

样式控制

宽度切换

className={cn(
  "bg-white border-r transition-all duration-300",
  collapsed ? "w-16" : "w-64"
)}

内容显示

{collapsed ? (
  // 收起模式：显示首字母 + Tooltip
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger>{menu.label.charAt(0)}</TooltipTrigger>
      <TooltipContent>{menu.label}</TooltipContent>
    </Tooltip>
  </TooltipProvider>
) : (
  // 展开模式：显示完整文字
  <span>{menu.label}</span>
)}

使用的组件

  • Button - 切换按钮
  • Tooltip - 悬停提示
  • ChevronsLeft / ChevronsRight - 图标
  • Tailwind CSS - 样式和动画

📊 使用场景

场景1：宽屏显示

  • 默认展开菜单
  • 显示完整功能列表
  • 方便快速浏览和选择

场景2：小屏幕

  • 收起菜单节省空间
  • 内容区域更宽广
  • 图表和表格显示更完整

场景3：专注工作

  • 收起菜单减少干扰
  • 专注于当前任务
  • 需要时悬停查看

场景4：演示展示

  • 收起菜单让界面更简洁
  • 突出显示主要内容
  • 提升视觉效果

💾 状态持久化（可扩展）

当前状态

  • ❌ 刷新页面后恢复默认（展开）
  • ❌ 不记忆用户偏好

可扩展功能

LocalStorage存储

// 保存状态
const setSidebarCollapsed = (collapsed: boolean) => {
  setCollapsed(collapsed);
  localStorage.setItem('sidebarCollapsed', String(collapsed));
};

// 读取状态
useEffect(() => {
  const saved = localStorage.getItem('sidebarCollapsed');
  if (saved) {
    setCollapsed(saved === 'true');
  }
}, []);

用户偏好设置

  • 在个人中心保存界面偏好
  • 同步到用户配置
  • 跨设备共享设置

🎯 最佳实践

何时使用收起模式

✅ 适合收起：

  • 小屏幕或笔记本电脑
  • 需要更多水平空间
  • 查看宽表格或图表
  • 演示或截图时
  • 熟悉菜单位置后

❌ 不适合收起：

  • 首次使用系统
  • 需要频繁切换功能
  • 不熟悉菜单结构
  • 培训或教学场景

交互建议

  1. 快速切换

    • 使用按钮一键切换
    • 记住常用功能位置

  2. 悬停查看

    • 收起状态下悬停查看详情
    • 确认功能再点击

  3. 键盘导航

    • Tab键切换焦点
    • Enter键激活菜单

📱 响应式支持

桌面端

  • ✅ 支持展开/收起切换
  • ✅ 默认展开显示
  • ✅ Tooltip完整显示

平板端

  • ✅ 支持展开/收起
  • ✅ 建议默认收起
  • ✅ 触摸友好

移动端（未来扩展）

  • 🔄 抽屉式侧边栏
  • 🔄 全屏覆盖模式
  • 🔄 底部导航栏

🔮 未来增强

计划功能

  • 记忆用户偏好

    • LocalStorage持久化
    • 用户配置同步

  • 键盘快捷键

    • Ctrl+B 切换侧边栏
    • 方向键导航菜单

  • 拖拽调整宽度

    • 展开模式支持拖拽边缘
    • 自定义侧边栏宽度

  • 侧边栏位置

    • 支持左侧/右侧切换
    • 用户自定义位置

  • 迷你模式优化

    • 显示图标而非文字
    • 为每个菜单配置图标

  • 搜索功能

    • 快速搜索菜单项
    • 模糊匹配

  • 收藏夹

    • 收藏常用功能
    • 快速访问入口

⚙️ 配置选项

默认状态

修改 App.tsx：

// 默认展开
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);

// 默认收起
const [sidebarCollapsed, setSidebarCollapsed] = useState(true);

禁用功能

如需禁用收起功能，注释掉切换按钮：

// 在 Sidebar.tsx 中注释这部分代码
{/*
<Button
  variant="ghost"
  size="icon"
  onClick={() => onCollapsedChange?.(!collapsed)}
>
  {collapsed ? <ChevronsRight /> : <ChevronsLeft />}
</Button>
*/}

❓ 常见问题

Q: 收起后如何快速找到功能？ A: 鼠标悬停在菜单图标上会显<E4BC9A><E698BE><EFBFBD>完整的菜单信息。

Q: 刷新页面后状态会保持吗？ A: 当前不会，默认恢复为展开状态。可通过LocalStorage扩展此功能。

Q: 收起状态下怎么查看二级菜单？ A: 直接点击一级菜单会导航到第一个子功能，或悬停查看所有子菜单。

Q: 可以调整侧边栏宽度吗？ A: 当前不支持，固定为64px（收起）和256px（展开）。

Q: 支持键盘操作吗？ A: 目前仅支持Tab键切换焦点，未来会添加更多快捷键。

🎨 自定义样式

修改宽度

// Sidebar.tsx
className={cn(
  "transition-all duration-300",
  collapsed ? "w-16" : "w-64"  // 修改这里的值
)}

修改动画速度

// 更快的动画
transition-all duration-150

// 更慢的动画
transition-all duration-500

// 无动画
transition-none

修改按钮样式

<Button
  variant="outline"      // 修改变体
  size="sm"             // 修改大小
  className="..."       // 添加自定义样式
>

📊 性能优化

  • ✅ CSS过渡动画（GPU加速）
  • ✅ 条件渲染减少DOM节点
  • ✅ Tooltip按需加载
  • ✅ 防止不必要的重渲染

🎉 功能总结

左侧菜单收起/展开功能已完全实现，提供：

  • ✅ 平滑的动画效果
  • ✅ 智能的悬停提示
  • ✅ 友好的交互体验
  • ✅ 灵活的状态控制
  • ✅ 完整的视觉反馈

现在您可以根据需要自由切换侧边栏显示模式，优化您的工作空间！

功能状态: ✅ 已完成
更新时间: 2024-10-15
版本: v1.3.0