生产管理系统前端 - 更新瓦力提交的产品原型到参考目录
This commit is contained in:
497
src/SIDEBAR_TOGGLE_BUTTON_UPDATE.md
Normal file
497
src/SIDEBAR_TOGGLE_BUTTON_UPDATE.md
Normal file
@@ -0,0 +1,497 @@
|
||||
# 🔄 侧边栏切换按钮优化更新
|
||||
|
||||
## 📋 更新内容
|
||||
|
||||
### ✨ **v1.5.0** - 2024-10-15
|
||||
|
||||
#### **主要改动**
|
||||
|
||||
1. **✅ 移除顶部标题栏**
|
||||
- 删除"功能菜单"标题文字
|
||||
- 移除原有的内置收起/展开按钮
|
||||
- 菜单内容直接从顶部开始显示
|
||||
|
||||
2. **✅ 浮动切换按钮**
|
||||
- 按钮位置：侧边栏右侧外部
|
||||
- 样式：圆形小按钮，带阴影
|
||||
- 动画：跟随侧边栏宽度平滑移动
|
||||
|
||||
---
|
||||
|
||||
## 🎨 新界面布局
|
||||
|
||||
### **展开状态 (256px)**
|
||||
|
||||
```
|
||||
┌────────────────────────────┐
|
||||
│ │ [◁◁] ← 浮动按钮
|
||||
│ 📁 农机档案 ▼ │
|
||||
│ 档案录入 │
|
||||
│ 档案列表 │
|
||||
│ 二维码管理 │
|
||||
│ 档案分类 │
|
||||
│ │
|
||||
│ 👤 驾驶员档案 ▶ │
|
||||
│ │
|
||||
│ 📊 农机负载管理 ▶ │
|
||||
│ │
|
||||
└────────────────────────────┘
|
||||
侧边栏区域
|
||||
```
|
||||
|
||||
### **收起状态 (64px)**
|
||||
|
||||
```
|
||||
┌──────┐
|
||||
│ │ [▷▷] ← 浮动按钮
|
||||
│ 📁 │
|
||||
│ 👤 │
|
||||
│ 📊 │
|
||||
│ 🖥️ │
|
||||
│ ⚠️ │
|
||||
│ 🎯 │
|
||||
│ 📊 │
|
||||
│ 📅 │
|
||||
│ 🛡️ │
|
||||
└──────┘
|
||||
```
|
||||
|
||||
### **按钮定位说明**
|
||||
|
||||
```
|
||||
┌─────────────┐ [按钮] ┌────────────────┐
|
||||
│ │ │ │
|
||||
│ 侧边栏 │ 独立 │ 主内容区 │
|
||||
│ 256px/64px │ 浮动 │ flex-1 │
|
||||
│ │ │ │
|
||||
└─────────────┘ └────────────────┘
|
||||
↑ ↑
|
||||
border-r 无需关注按钮
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 💡 设计优势
|
||||
|
||||
### **1. 更大的可用空间**
|
||||
- ✅ 移除顶部标题栏
|
||||
- ✅ 菜单项从顶部开始
|
||||
- ✅ 垂直空间利用率提升
|
||||
|
||||
### **2. 更清晰的视觉层次**
|
||||
- ✅ 按钮独立于侧边栏
|
||||
- ✅ 明确的功能分区
|
||||
- ✅ 不占用菜单内部空间
|
||||
|
||||
### **3. 更好的交互体验**
|
||||
- ✅ 按钮位置固定易找
|
||||
- ✅ 点击区域不变
|
||||
- ✅ 视觉焦点更集中
|
||||
|
||||
### **4. 更现代的设计风格**
|
||||
- ✅ 浮动按钮设计
|
||||
- ✅ 阴影效果增强层次
|
||||
- ✅ 符合现代UI趋势
|
||||
|
||||
---
|
||||
|
||||
## 🔧 技术实现
|
||||
|
||||
### **App.tsx 布局结构**
|
||||
|
||||
```tsx
|
||||
<div className="flex flex-1 overflow-hidden relative">
|
||||
{/* 侧边栏 */}
|
||||
<Sidebar
|
||||
collapsed={sidebarCollapsed}
|
||||
onCollapsedChange={setSidebarCollapsed}
|
||||
/>
|
||||
|
||||
{/* 浮动切换按钮 */}
|
||||
<button
|
||||
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
|
||||
className={cn(
|
||||
"absolute top-4 z-10 h-8 w-8 rounded-md",
|
||||
"border border-border bg-white shadow-sm",
|
||||
"flex items-center justify-center",
|
||||
"transition-all duration-300",
|
||||
"hover:bg-accent hover:text-green-600",
|
||||
sidebarCollapsed ? "left-[4.5rem]" : "left-[16.5rem]"
|
||||
)}
|
||||
>
|
||||
{/* 图标 */}
|
||||
</button>
|
||||
|
||||
{/* 主内容区 */}
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
{/* 内容 */}
|
||||
</main>
|
||||
</div>
|
||||
```
|
||||
|
||||
### **关键样式说明**
|
||||
|
||||
#### **按钮定位**
|
||||
```css
|
||||
position: absolute; /* 绝对定位，浮动在布局之上 */
|
||||
top: 1rem; /* 距离顶部 16px */
|
||||
z-index: 10; /* 确保在其他元素之上 */
|
||||
```
|
||||
|
||||
#### **按钮位置切换**
|
||||
```css
|
||||
/* 展开状态：256px + 16px = 272px (16.5rem) */
|
||||
left: 16.5rem;
|
||||
|
||||
/* 收起状态：64px + 8px = 72px (4.5rem) */
|
||||
left: 4.5rem;
|
||||
```
|
||||
|
||||
#### **过渡动画**
|
||||
```css
|
||||
transition-all: 300ms; /* 所有属性平滑过渡 */
|
||||
duration-300 /* 与侧边栏动画同步 */
|
||||
```
|
||||
|
||||
### **Sidebar.tsx 简化**
|
||||
|
||||
```tsx
|
||||
export function Sidebar({ menus, activePath, onNavigate, collapsed = false }: SidebarProps) {
|
||||
return (
|
||||
<div className={cn(
|
||||
"bg-white border-r border-border overflow-y-auto",
|
||||
"transition-all duration-300 flex flex-col",
|
||||
collapsed ? "w-16" : "w-64"
|
||||
)}>
|
||||
{/* 直接显示菜单内容，无需标题栏 */}
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<nav className="space-y-1">
|
||||
{/* 菜单项 */}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 按钮样式详解
|
||||
|
||||
### **基础样式**
|
||||
```tsx
|
||||
className={cn(
|
||||
"absolute top-4 z-10", // 定位
|
||||
"h-8 w-8 rounded-md", // 尺寸和圆角
|
||||
"border border-border", // 边框
|
||||
"bg-white shadow-sm", // 背景和阴影
|
||||
"flex items-center justify-center", // 居中对齐
|
||||
)}
|
||||
```
|
||||
|
||||
### **交互样式**
|
||||
```tsx
|
||||
"hover:bg-accent", // 悬停背景色
|
||||
"hover:text-green-600", // 悬停图标颜色
|
||||
"text-muted-foreground", // 默认图标颜色
|
||||
```
|
||||
|
||||
### **动画效果**
|
||||
```tsx
|
||||
"transition-all duration-300", // 平滑过渡
|
||||
sidebarCollapsed
|
||||
? "left-[4.5rem]" // 收起位置
|
||||
: "left-[16.5rem]" // 展开位置
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📐 尺寸计算
|
||||
|
||||
### **展开状态位置计算**
|
||||
|
||||
```
|
||||
侧边栏宽度：256px (16rem)
|
||||
右侧偏移： 16px (1rem)
|
||||
─────────────────────────
|
||||
按钮位置： 272px (16.5rem)
|
||||
```
|
||||
|
||||
### **收起状态位置计算**
|
||||
|
||||
```
|
||||
侧边栏宽度：64px (4rem)
|
||||
右侧偏移： 8px (0.5rem)
|
||||
─────────────────────────
|
||||
按钮位置： 72px (4.5rem)
|
||||
```
|
||||
|
||||
### **按钮尺寸**
|
||||
|
||||
```
|
||||
宽度：32px (2rem / w-8)
|
||||
高度：32px (2rem / h-8)
|
||||
圆角：6px (rounded-md)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔍 图标设计
|
||||
|
||||
### **展开状态图标 (双箭头向左)**
|
||||
|
||||
```tsx
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
|
||||
/>
|
||||
</svg>
|
||||
```
|
||||
|
||||
视觉效果：`«` 或 `◁◁`
|
||||
|
||||
### **收起状态图标 (双箭头向右)**
|
||||
|
||||
```tsx
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M13 5l7 7-7 7M5 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
```
|
||||
|
||||
视觉效果：`»` 或 `▷▷`
|
||||
|
||||
---
|
||||
|
||||
## 🎨 视觉状态
|
||||
|
||||
### **默认状态**
|
||||
- 背景：白色 (bg-white)
|
||||
- 边框：淡灰色 (border-border)
|
||||
- 图标：中灰色 (text-muted-foreground)
|
||||
- 阴影：浅阴影 (shadow-sm)
|
||||
|
||||
### **悬停状态**
|
||||
- 背景：浅灰色 (bg-accent)
|
||||
- 图标：绿色 (text-green-600)
|
||||
- 过渡：平滑 300ms
|
||||
|
||||
### **活动状态**
|
||||
- 与默认状态相同
|
||||
- 无需特殊标识
|
||||
|
||||
---
|
||||
|
||||
## 🚀 用户体验提升
|
||||
|
||||
### **操作便捷性**
|
||||
|
||||
| 方面 | 旧设计 | 新设计 | 提升 |
|
||||
|------|--------|--------|------|
|
||||
| 按钮位置 | 侧边栏内部右上角 | 侧边栏外部右侧 | ✅ 更易发现 |
|
||||
| 点击区域 | 收起时移动到左侧 | 始终在同一侧 | ✅ 更好记忆 |
|
||||
| 视觉层次 | 与菜单混在一起 | 独立浮动 | ✅ 更清晰 |
|
||||
| 空间利用 | 占用标题栏空间 | 浮动不占空间 | ✅ 更高效 |
|
||||
|
||||
### **视觉一致性**
|
||||
|
||||
- ✅ 按钮始终在侧边栏右侧
|
||||
- ✅ 位置变化平滑跟随
|
||||
- ✅ 与侧边栏动画同步
|
||||
- ✅ 视觉焦点保持一致
|
||||
|
||||
### **认知负担**
|
||||
|
||||
- ✅ 功能单一明确
|
||||
- ✅ 图标语义清晰
|
||||
- ✅ 操作反馈及时
|
||||
- ✅ 学习成本低
|
||||
|
||||
---
|
||||
|
||||
## 📱 响应式考虑
|
||||
|
||||
### **桌面端 (当前实现)**
|
||||
- 浮动按钮固定定位
|
||||
- 跟随侧边栏移动
|
||||
- 始终可见可点击
|
||||
|
||||
### **平板端 (未来扩展)**
|
||||
- 可考虑调整按钮大小
|
||||
- 增加触摸友好性
|
||||
- 扩大点击区域
|
||||
|
||||
### **移动端 (未来扩展)**
|
||||
- 可改为抽屉式侧边栏
|
||||
- 使用汉堡菜单图标
|
||||
- 全屏覆盖模式
|
||||
|
||||
---
|
||||
|
||||
## 🔄 迁移指南
|
||||
|
||||
### **从旧版本升级**
|
||||
|
||||
如果您使用的是之前带标题栏的版本：
|
||||
|
||||
#### **修改 1：Sidebar.tsx**
|
||||
|
||||
移除这部分代码：
|
||||
```tsx
|
||||
{/* ❌ 删除这部分 */}
|
||||
<div className="p-4 border-b border-border flex items-center">
|
||||
{!collapsed && (
|
||||
<span className="text-sm text-muted-foreground">功能菜单</span>
|
||||
)}
|
||||
<Button onClick={() => onCollapsedChange?.(!collapsed)}>
|
||||
{/* 按钮内容 */}
|
||||
</Button>
|
||||
</div>
|
||||
```
|
||||
|
||||
保留这部分：
|
||||
```tsx
|
||||
{/* ✅ 保留这部分 */}
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<nav className="space-y-1">
|
||||
{/* 菜单内容 */}
|
||||
</nav>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### **修改 2：App.tsx**
|
||||
|
||||
在 Sidebar 和 main 之间添加：
|
||||
```tsx
|
||||
{/* ✅ 添加浮动按钮 */}
|
||||
<button
|
||||
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
|
||||
className={cn(
|
||||
"absolute top-4 z-10 h-8 w-8 rounded-md",
|
||||
"border border-border bg-white shadow-sm",
|
||||
"flex items-center justify-center",
|
||||
"transition-all duration-300",
|
||||
"hover:bg-accent hover:text-green-600",
|
||||
sidebarCollapsed ? "left-[4.5rem]" : "left-[16.5rem]"
|
||||
)}
|
||||
>
|
||||
{/* 图标 */}
|
||||
</button>
|
||||
```
|
||||
|
||||
记得导入 `cn` 工具函数：
|
||||
```tsx
|
||||
import { cn } from './components/ui/utils';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🐛 常见问题
|
||||
|
||||
### **Q: 按钮被遮挡看不见？**
|
||||
|
||||
**A:** 检查 z-index 设置
|
||||
```tsx
|
||||
className="absolute ... z-10" // 确保足够高
|
||||
```
|
||||
|
||||
### **Q: 按钮位置不对？**
|
||||
|
||||
**A:** 检查父容器定位
|
||||
```tsx
|
||||
// 父容器必须是 relative
|
||||
<div className="flex flex-1 overflow-hidden relative">
|
||||
```
|
||||
|
||||
### **Q: 按钮不跟随移动？**
|
||||
|
||||
**A:** 检查过渡动画
|
||||
```tsx
|
||||
// 确保有 transition
|
||||
className="... transition-all duration-300"
|
||||
```
|
||||
|
||||
### **Q: 点击按钮无反应？**
|
||||
|
||||
**A:** 检查事件处理
|
||||
```tsx
|
||||
// 确保绑定了 onClick
|
||||
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 性能影响
|
||||
|
||||
### **渲染性能**
|
||||
- ✅ 无额外组件嵌套
|
||||
- ✅ CSS 动画 GPU 加速
|
||||
- ✅ 无复杂计算
|
||||
|
||||
### **交互性能**
|
||||
- ✅ 点击响应即时
|
||||
- ✅ 动画流畅 60fps
|
||||
- ✅ 无卡顿现象
|
||||
|
||||
### **内存占用**
|
||||
- ✅ 无额外状态管理
|
||||
- ✅ 无内存泄漏风险
|
||||
- ✅ 组件轻量级
|
||||
|
||||
---
|
||||
|
||||
## ✅ 功能验证清单
|
||||
|
||||
测试新版本时，请确认以下功能：
|
||||
|
||||
- [ ] 按钮在侧边栏右侧外部显示
|
||||
- [ ] 展开状态按钮显示双左箭头图标
|
||||
- [ ] 收起状态按钮显示双右箭头图标
|
||||
- [ ] 点击按钮可以切换侧边栏状态
|
||||
- [ ] 按钮位置跟随侧边栏平滑移动
|
||||
- [ ] 悬停按钮显示绿色高亮
|
||||
- [ ] 按钮有阴影和边框效果
|
||||
- [ ] 侧边栏直接从顶部显示菜单
|
||||
- [ ] 无"功能菜单"标题文字
|
||||
- [ ] 动画流畅无卡顿
|
||||
|
||||
---
|
||||
|
||||
## 📚 相关文档
|
||||
|
||||
- `/SIDEBAR_COLLAPSE_README.md` - 侧边栏收起/展开功能完整指南
|
||||
- `/SIDEBAR_ICONS_README.md` - 侧边栏图标系统文档
|
||||
- `/components/Sidebar.tsx` - 侧边栏组件源码
|
||||
- `/App.tsx` - 应用主入口
|
||||
|
||||
---
|
||||
|
||||
## 🎉 更新总结
|
||||
|
||||
**本次更新重点：**
|
||||
|
||||
1. ✅ **简化布局** - 移除冗余标题栏
|
||||
2. ✅ **优化交互** - 浮动按钮设计
|
||||
3. ✅ **提升体验** - 位置固定易找
|
||||
4. ✅ **现代设计** - 符合UI趋势
|
||||
|
||||
**用户收益：**
|
||||
|
||||
- 🎯 更大的菜单显示空间
|
||||
- 🎨 更清晰的视觉层次
|
||||
- 👆 更便捷的操作体验
|
||||
- ✨ 更现代的界面风格
|
||||
|
||||
---
|
||||
|
||||
**更新状态**: ✅ 已完成
|
||||
**版本**: v1.5.0
|
||||
**更新时间**: 2024-10-15
|
||||
**向后兼容**: ✅ 是
|
||||
Reference in New Issue
Block a user