# vue-sidebar

**Repository Path**: web_74/vue-sidebar

## Basic Information

- **Project Name**: vue-sidebar
- **Description**: vue-sidebar
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-10-17
- **Last Updated**: 2026-10-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Dashboard Sidebar Menu

基于 **Vue 3 + Element Plus** 仿写的仪表板侧边栏菜单，动画丝滑、配色丰富，可直接用于后台管理系统。

## Demo

![Dashboard Sidebar Menu 预览](./demo/preview.png)

- 折叠态：窄边栏（80px）仅显示图标
- 展开态：宽边栏（300px）显示图标 + 文字
- 点击右上角汉堡按钮切换，按钮动画变为 X
- 点击菜单项切换激活态，带凹槽圆角 + 彩色圆形背景

在线预览：克隆后执行 `pnpm install && pnpm dev`

## 功能特性

- 可折叠侧边栏（80px ↔ 300px），`cubic-bezier(0.4,0,0.2,1)` 缓动
- 激活项凹槽圆角效果（`::before/::after` + `box-shadow` 模拟）
- 激活项 icon 彩色圆形背景，`transform: scale` 过渡（合成层，不触发 reflow）
- 文字 `opacity` 淡入淡出，替代 overflow 硬切
- 汉堡按钮 → X 旋转动画
- hover 时 icon / text 变为该项主题色
- 每个菜单项独立配色（红 / 橙 / 绿 / 蓝 / 紫 / 粉）

## 技术栈

| 依赖 | 版本 | 用途 |
|:---|:---|:---|
| Vue | ^3.4 | 框架 |
| Element Plus | ^2.7 | UI 组件库 |
| @element-plus/icons-vue | ^2.3 | 图标库 |
| Vite | ^5.2 | 构建工具 |

## 快速开始

```bash
pnpm install
pnpm dev      # 开发服务器 http://localhost:5173
pnpm build    # 生产构建
pnpm preview  # 预览构建产物
```

## 项目结构

```
vueExt/
├── index.html
├── package.json
├── pnpm-workspace.yaml
├── vite.config.js
├── demo/
│   └── preview.png              # 效果截图
└── src/
    ├── main.js                  # 入口，全局注册 Element Plus + 图标
    ├── App.vue
    ├── components/
    │   └── DashboardSidebar.vue # 核心侧边栏组件（v-for 驱动菜单）
    └── assets/
        └── sidebar.css          # 侧边栏样式（保留原视觉效果）
```

## 菜单配置

菜单项在 `src/components/DashboardSidebar.vue` 的 `menuItems` 数组中配置：

```js
const menuItems = [
  { name: 'Home',      text: 'Home',      bg: '#f44336', icon: HomeFilled },
  { name: 'Profile',   text: 'Profile',   bg: '#ffa117', icon: User },
  { name: 'Inbox',     text: 'Inbox',     bg: '#0fc70f', icon: ChatDotRound },
  { name: 'Analytics', text: 'Analytics', bg: '#2196f3', icon: DataLine },
  { name: 'Order',     text: 'Order',     bg: '#b145e9', icon: ShoppingCart },
  { name: 'Settings',  text: 'Settings',  bg: '#e91e63', icon: Setting }
]
```

每项可独立配置 `name`（标识）、`text`（显示文字）、`bg`（主题色）、`icon`（Element Plus 图标组件）。

## 图标映射

原项目使用 ionicons，本项目映射为 `@element-plus/icons-vue`：

| 原图标 (ionicons) | 本项目 (Element Plus) |
|:---|:---|
| logo-apple | Menu |
| home-outline | HomeFilled |
| person-outline | User |
| chatbubble-outline | ChatDotRound |
| bar-chart-outline | DataLine |
| cart-outline | ShoppingCart |
| settings-outline | Setting |
| log-out-outline | SwitchButton |

## 仿写来源

基于 [Mr-majifu/Dashboard-Sidebar-Menu](https://github.com/Mr-majifu/Dashboard-Sidebar-Menu) 仿写，原项目为纯 HTML + CSS + ionicons，本项目用 Vue 3 + Element Plus 重构，并优化了动画流畅度：

- 圆形背景从"伪元素创建/销毁"改为"`transform: scale` 过渡"
- 文字从"overflow 硬切"改为"`opacity` 淡入淡出"
- 统一 `cubic-bezier(0.4,0,0.2,1)` 缓动曲线
- 添加 `will-change` 提示，提升合成层
- 修正原 CSS `.buttom` → `.bottom` 拼写错误，底部正确贴底

## License

MIT