urbanLifeline/urbanLifelineWeb/packages/platform/src/layouts/AdminSidebarLayout

SidebarLayout 侧边栏布局组件

功能特性

🎯 核心功能

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

📱 菜单配置

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'
    }
]

使用方式

在路由中使用

// 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 中使用

<template>
    <SidebarLayout />
</template>

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

菜单项类型

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 智能体编排界面

样式自定义

主题色调整

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

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

侧边栏宽度

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

功能说明

侧边栏折叠

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

iframe 加载

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

用户操作

• 个人中心：跳转到 /profile
• 系统设置：跳转到 /settings
• 退出登录：跳转到 /login

注意事项

1. 跨域问题：确保 iframe 应用允许被嵌入

   # 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

扩展建议

添加新菜单项

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

动态菜单加载

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

权限控制

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