生产管理系统前端 - 更新瓦力提交的产品原型到参考目录
This commit is contained in:
446
src/SIDEBAR_COLLAPSE_README.md
Normal file
446
src/SIDEBAR_COLLAPSE_README.md
Normal file
@@ -0,0 +1,446 @@
|
||||
# 📁 左侧菜单收起/展开功能说明
|
||||
|
||||
## ✨ 功能概述
|
||||
|
||||
左侧导航菜单现已支持**收起和展开**功能，用户可以通过点击按钮来切换菜单的显示模式，提供更灵活的界面布局体验。
|
||||
|
||||
---
|
||||
|
||||
## 🎯 功能特性
|
||||
|
||||
### ✅ **展开模式**（默认）
|
||||
- 宽度：256px (w-64)
|
||||
- 显示完整菜单文字
|
||||
- 显示"功能菜单"标题
|
||||
- 显示一级和二级菜单
|
||||
- 支持菜单折叠/展开
|
||||
|
||||
### ✅ **收起模式**
|
||||
- 宽度：64px (w-16)
|
||||
- 仅显示首字母图标
|
||||
- 鼠标悬停显示完整信息
|
||||
- 点击直接导航到第一个子菜单
|
||||
- 节省屏幕空间
|
||||
|
||||
---
|
||||
|
||||
## 🎨 界面展示
|
||||
|
||||
### **展开状态**
|
||||
|
||||
```
|
||||
┌────────────────────────────┐ ◁◁
|
||||
│ ▼ 农机档案管理 │ ↑
|
||||
│ 档案录入 │ 收起按钮
|
||||
│ 档案列表 │ (浮动在右侧)
|
||||
│ 二维码管理 │
|
||||
│ 档案分类 │
|
||||
│ │
|
||||
│ ▶ 农机作业监测 │
|
||||
│ │
|
||||
│ ▶ 驾驶员管理 │
|
||||
└────────────────────────────┘
|
||||
256px 宽度
|
||||
```
|
||||
|
||||
### **收起状态**
|
||||
|
||||
```
|
||||
┌──────┐ ▷▷
|
||||
│ 📁 │ ↑
|
||||
│ 👤 │ 展开按钮
|
||||
│ 📊 │ (浮动在右侧)
|
||||
│ 🖥️ │
|
||||
└──────┘
|
||||
64px
|
||||
宽度
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🖱️ 操作指南
|
||||
|
||||
### **方法1：点击按钮**
|
||||
|
||||
1. **展开 → 收起**
|
||||
- 点击顶部的 `◁◁` 按钮
|
||||
- 菜单收起为图标模式
|
||||
|
||||
2. **收起 → 展开**
|
||||
- 点击顶部的 `▷▷` 按钮
|
||||
- 菜单展开为完整模式
|
||||
|
||||
### **方法2：键盘快捷键**（可扩展）
|
||||
|
||||
目前暂不支持，未来可添加：
|
||||
- `Ctrl + B` - 切换侧边栏
|
||||
- `[` - 收起侧边栏
|
||||
- `]` - 展开侧边栏
|
||||
|
||||
---
|
||||
|
||||
## 💡 交互细节
|
||||
|
||||
### **展开模式**
|
||||
|
||||
#### **一级菜单**
|
||||
- 点击：折叠/展开二级菜单
|
||||
- 显示：完整菜单名称
|
||||
- 图标：`▼` 展开 / `▶` 折叠
|
||||
|
||||
#### **二级菜单**
|
||||
- 点击：导航到对应页面
|
||||
- 高亮：当前激活页面显示绿色背景
|
||||
- 悬停：显示灰色背景
|
||||
|
||||
### **收起模式**
|
||||
|
||||
#### **菜单图标**
|
||||
- 显示：菜单名称首字母（如"农"）
|
||||
- 样式：居中显示，较大字号
|
||||
- 高亮：包含当前页面的菜单显示绿色背景
|
||||
|
||||
#### **悬停提示**
|
||||
- 触发：鼠标悬停在菜单图标上
|
||||
- 显示：完整菜单名称 + 所有子菜单列表
|
||||
- 位置：右侧弹出
|
||||
- 延迟：无延迟（即时显示）
|
||||
|
||||
#### **点击行为**
|
||||
- 收起状态下点击一级菜单
|
||||
- 自动导航到该菜单的第一个子功能
|
||||
- 无需先展开再选择
|
||||
|
||||
---
|
||||
|
||||
## 🎨 视觉效果
|
||||
|
||||
### **动画效果**
|
||||
- ✨ 宽度变化：300ms 平滑过渡
|
||||
- ✨ 按钮图标：自动切换方向
|
||||
- ✨ 内容淡入淡出：流畅切换
|
||||
|
||||
### **状态指示**
|
||||
- 🟢 **当前页面**：绿色背景高亮
|
||||
- ⚪ **普通菜单**：灰色文字
|
||||
- 🔵 **悬停状态**：浅灰背景
|
||||
- 🟢 **激活菜单组**：收起时显示绿色背景
|
||||
|
||||
---
|
||||
|
||||
## 🔧 技术实现
|
||||
|
||||
### **核心组件**
|
||||
|
||||
#### **Sidebar.tsx**
|
||||
```typescript
|
||||
interface SidebarProps {
|
||||
menus: MenuItem[];
|
||||
activePath: string;
|
||||
onNavigate: (path: string) => void;
|
||||
collapsed?: boolean; // 新增：收起状态
|
||||
onCollapsedChange?: (collapsed: boolean) => void; // 新增：状态改变回调
|
||||
}
|
||||
```
|
||||
|
||||
#### **状态管理**
|
||||
```typescript
|
||||
// App.tsx
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||
|
||||
<Sidebar
|
||||
collapsed={sidebarCollapsed}
|
||||
onCollapsedChange={setSidebarCollapsed}
|
||||
/>
|
||||
```
|
||||
|
||||
### **样式控制**
|
||||
|
||||
#### **宽度切换**
|
||||
```tsx
|
||||
className={cn(
|
||||
"bg-white border-r transition-all duration-300",
|
||||
collapsed ? "w-16" : "w-64"
|
||||
)}
|
||||
```
|
||||
|
||||
#### **内容显示**
|
||||
```tsx
|
||||
{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存储**
|
||||
```typescript
|
||||
// 保存状态
|
||||
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`：
|
||||
```typescript
|
||||
// 默认展开
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||
|
||||
// 默认收起
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
|
||||
```
|
||||
|
||||
### **禁用功能**
|
||||
|
||||
如需禁用收起功能，注释掉切换按钮：
|
||||
```tsx
|
||||
// 在 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键切换焦点，未来会添加更多快捷键。
|
||||
|
||||
---
|
||||
|
||||
## 🎨 自定义样式
|
||||
|
||||
### **修改宽度**
|
||||
|
||||
```tsx
|
||||
// Sidebar.tsx
|
||||
className={cn(
|
||||
"transition-all duration-300",
|
||||
collapsed ? "w-16" : "w-64" // 修改这里的值
|
||||
)}
|
||||
```
|
||||
|
||||
### **修改动画速度**
|
||||
|
||||
```tsx
|
||||
// 更快的动画
|
||||
transition-all duration-150
|
||||
|
||||
// 更慢的动画
|
||||
transition-all duration-500
|
||||
|
||||
// 无动画
|
||||
transition-none
|
||||
```
|
||||
|
||||
### **修改按钮样式**
|
||||
|
||||
```tsx
|
||||
<Button
|
||||
variant="outline" // 修改变体
|
||||
size="sm" // 修改大小
|
||||
className="..." // 添加自定义样式
|
||||
>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 性能优化
|
||||
|
||||
- ✅ CSS过渡动画（GPU加速）
|
||||
- ✅ 条件渲染减少DOM节点
|
||||
- ✅ Tooltip按需加载
|
||||
- ✅ 防止不必要的重渲染
|
||||
|
||||
---
|
||||
|
||||
## 🎉 功能总结
|
||||
|
||||
左侧菜单收起/展开功能已完全实现，提供：
|
||||
|
||||
- ✅ 平滑的动画效果
|
||||
- ✅ 智能的悬停提示
|
||||
- ✅ 友好的交互体验
|
||||
- ✅ 灵活的状态控制
|
||||
- ✅ 完整的视觉反馈
|
||||
|
||||
现在您可以根据需要自由切换侧边栏显示模式，优化您的工作空间！
|
||||
|
||||
---
|
||||
|
||||
**功能状态**: ✅ 已完成
|
||||
**更新时间**: 2024-10-15
|
||||
**版本**: v1.3.0
|
||||
Reference in New Issue
Block a user