# SidebarLayout 侧边栏布局组件

## 功能特性

### 🎯 核心功能
- **侧边栏菜单导航**：左侧固定侧边栏，支持折叠/展开
- **双模式内容区**：
  - **路由模式**：普通路由页面渲染
  - **iframe 模式**：嵌入外部应用（招标助手、泰豪小电、智能体编排）
- **用户信息展示**：底部用户头像和下拉菜单
- **响应式设计**：支持移动端适配

### 📱 菜单配置

```typescript
const menuItems: MenuItem[] = [
    { 
        key: 'home', 
        label: '工作台', 
        icon: 'Grid', 
        path: '/home',
        type: 'route'
    },
    { 
        key: 'bidding', 
        label: '招标助手', 
        icon: 'Document',
        iframeUrl: 'http://localhost:7002',
        type: 'iframe'
    },
    { 
        key: 'service', 
        label: '泰豪小电', 
        icon: 'Service',
        iframeUrl: 'http://localhost:7003',
        type: 'iframe'
    },
    { 
        key: 'workflow', 
        label: '智能体编排', 
        icon: 'Connection',
        iframeUrl: 'http://localhost:3000',  // Dify 地址
        type: 'iframe'
    }
]
```

## 使用方式

### 在路由中使用

```typescript
// router/index.ts
import { SidebarLayout } from '@/layouts'

const routes = [
    {
        path: '/',
        component: SidebarLayout,
        children: [
            {
                path: '/home',
                component: () => import('@/views/Home.vue')
            },
            {
                path: '/chat',
                component: () => import('@/views/Chat.vue')
            }
        ]
    }
]
```

### 在 App.vue 中使用

```vue
<template>
    <SidebarLayout />
</template>

<script setup lang="ts">
import { SidebarLayout } from '@/layouts'
</script>
```

## 菜单项类型

```typescript
interface MenuItem {
    key: string          // 唯一标识
    label: string        // 显示名称
    icon: string         // Element Plus 图标组件名
    path?: string        // 路由路径（route 类型必需）
    iframeUrl?: string   // iframe URL（iframe 类型必需）
    type: 'route' | 'iframe'  // 菜单类型
}
```

## iframe 应用说明

### 1. 招标助手 (Bidding)
- **端口**：5002
- **URL**：http://localhost:7002
- **说明**：招投标业务管理系统

### 2. 泰豪小电 (Service)
- **端口**：5003
- **URL**：http://localhost:7003
- **说明**：智能客服工单管理系统

### 3. 智能体编排 (Workflow)
- **端口**：3000
- **URL**：http://localhost:3000
- **说明**：Dify 智能体编排界面

## 样式自定义

### 主题色调整

```scss
// 修改侧边栏背景色
.sidebar {
    background: #F0EAF4;  // 当前淡紫色背景
}

// 修改激活项颜色
.nav-item.active {
    background: rgba(124, 58, 237, 0.15);
    color: #7c3aed;
}
```

### 侧边栏宽度

```scss
.sidebar {
    width: 220px;  // 展开宽度
    
    &.collapsed {
        width: 64px;  // 折叠宽度
    }
}
```

## 功能说明

### 侧边栏折叠
- 点击头部箭头图标可切换折叠/展开状态
- 折叠后只显示图标，展开后显示图标+文字

### iframe 加载
- 自动显示加载中状态
- 支持刷新按钮重新加载
- 显示当前应用标题

### 用户操作
- **个人中心**：跳转到 /profile
- **系统设置**：跳转到 /settings
- **退出登录**：跳转到 /login

## 注意事项

1. **跨域问题**：确保 iframe 应用允许被嵌入
   ```nginx
   # nginx 配置
   add_header X-Frame-Options "SAMEORIGIN";
   # 或者
   add_header Content-Security-Policy "frame-ancestors 'self' http://localhost:7001";
   ```

2. **端口配置**：确保对应服务已启动
   - platform: 5001
   - bidding: 5002
   - workcase: 5003
   - dify: 3000

3. **路由同步**：iframe 模式不会改变浏览器 URL

4. **通信机制**：如需与 iframe 通信，使用 postMessage API

## 扩展建议

### 添加新菜单项

```typescript
// 在 menuItems 数组中添加
{
    key: 'new-app',
    label: '新应用',
    icon: 'Plus',
    iframeUrl: 'http://localhost:7004',
    type: 'iframe'
}
```

### 动态菜单加载

```typescript
// 从 API 获取菜单配置
const loadMenus = async () => {
    const response = await fetch('/api/menus')
    menuItems.value = await response.json()
}
```

### 权限控制

```typescript
const menuItems = computed(() => {
    return allMenuItems.filter(item => 
        hasPermission(item.key)
    )
})
```
