样式修改

urbanLifelineWeb/packages/shared/src/components/iframe/IframeView.vue

@@ -8,11 +8,11 @@
             @load="handleLoad"
         />
         <div v-else class="iframe-error">
-            <el-icon class="error-icon"><WarningFilled /></el-icon>
+            <AlertTriangle :size="48" class="error-icon" />
             <p>无效的 iframe 地址</p>
         </div>
         <div v-if="loading" class="iframe-loading">
-            <el-icon class="is-loading"><Loading /></el-icon>
+            <Loader :size="32" class="is-loading" />
             <span>加载中...</span>
         </div>
     </div>
@@ -21,7 +21,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { Loading, WarningFilled } from '@element-plus/icons-vue'
+import { Loader, AlertTriangle } from 'lucide-vue-next'
 
 const route = useRoute()
 const loading = ref(true)

urbanLifelineWeb/packages/shared/src/layouts/AdminSidebarLayout/AdminSidebarLayout.scss

@@ -1,262 +0,0 @@
-.sidebar-layout {
-    display: flex;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
-}
-
-// ==================== 侧边栏（内层子导航样式）====================
-.sidebar {
-    width: 180px;
-    height: 100%;
-    background: #fff;
-    display: flex;
-    flex-direction: column;
-    color: #333;
-    flex-shrink: 0;
-    transition: width 0.3s ease;
-    border-right: 1px solid #e4e7ed;
-    
-    &.collapsed {
-        width: 64px;
-        
-        .sidebar-header {
-            padding: 16px 12px;
-            justify-content: center;
-            
-            .logo {
-                justify-content: center;
-            }
-            
-            .collapse-btn {
-                position: static;
-                margin-left: 0;
-            }
-        }
-        
-        .nav-item {
-            justify-content: center;
-            padding: 12px;
-        }
-        
-        .user-section {
-            justify-content: center;
-            padding: 16px 12px;
-        }
-    }
-}
-
-// 侧边栏头部
-.sidebar-header {
-    padding: 16px 20px;
-    border-bottom: 1px solid #e4e7ed;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.collapse-btn {
-    width: 28px;
-    height: 28px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 6px;
-    cursor: pointer;
-    color: #909399;
-    transition: all 0.2s;
-    
-    &:hover {
-        background: rgba(124, 58, 237, 0.1);
-        color: #7c3aed;
-    }
-}
-
-.logo {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    
-    .logo-img {
-        width: 36px;
-        height: 36px;
-        border-radius: 6px;
-        object-fit: contain;
-    }
-    
-    .logo-text {
-        font-size: 16px;
-        font-weight: 600;
-        color: #303133;
-    }
-}
-
-// 导航菜单
-.nav-menu {
-    flex: 1;
-    overflow-y: auto;
-    padding: 16px 0;
-    
-    &::-webkit-scrollbar {
-        width: 4px;
-    }
-    
-    &::-webkit-scrollbar-thumb {
-        background: rgba(0, 0, 0, 0.15);
-        border-radius: 4px;
-    }
-}
-
-.nav-section {
-    padding: 0;
-}
-
-.nav-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 10px 20px;
-    margin-bottom: 0;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    color: #606266;
-    font-size: 14px;
-    
-    &:hover {
-        background: rgba(124, 58, 237, 0.1);
-        color: #7c3aed;
-    }
-    
-    &.active {
-        background: rgba(124, 58, 237, 0.15);
-        color: #7c3aed;
-        border-right: 3px solid #7c3aed;
-    }
-    
-    .el-icon {
-        font-size: 16px;
-        flex-shrink: 0;
-    }
-    
-    span {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-}
-
-// 用户信息
-.user-section {
-    padding: 16px 20px;
-    border-top: 1px solid #e4e7ed;
-    cursor: pointer;
-    transition: background 0.2s;
-    
-    &:hover {
-        background: rgba(124, 58, 237, 0.05);
-    }
-    
-    .user-info-wrapper {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-    }
-    
-    .user-avatar {
-        flex-shrink: 0;
-    }
-    
-    .user-name {
-        font-size: 14px;
-        font-weight: 500;
-        color: #303133;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-}
-
-// ==================== 主内容区 ====================
-.main-content {
-    flex: 1;
-    height: 100%;
-    overflow: hidden;
-    background: #fff;
-    position: relative;
-}
-
-// iframe 容器
-.iframe-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-}
-
-.iframe-header {
-    height: 56px;
-    padding: 0 24px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-bottom: 1px solid #e5e7eb;
-    background: #fafafa;
-    flex-shrink: 0;
-}
-
-.iframe-title {
-    font-size: 16px;
-    font-weight: 600;
-    color: #333;
-}
-
-.content-iframe {
-    flex: 1;
-    width: 100%;
-    height: 100%;
-    border: none;
-    background: #fff;
-}
-
-.iframe-loading {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 12px;
-    color: #7c3aed;
-    font-size: 14px;
-    z-index: 10;
-    
-    .el-icon {
-        font-size: 32px;
-    }
-}
-
-// ==================== 响应式 ====================
-@media (max-width: 768px) {
-    .sidebar {
-        width: 64px;
-        
-        &:not(.collapsed) {
-            width: 180px;
-            position: fixed;
-            left: 0;
-            top: 0;
-            z-index: 1000;
-            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
-        }
-    }
-    
-    .iframe-header {
-        padding: 0 16px;
-        
-        .iframe-title {
-            font-size: 14px;
-        }
-    }
-}

urbanLifelineWeb/packages/shared/src/layouts/AdminSidebarLayout/AdminSidebarLayout.vue

@@ -3,16 +3,24 @@
         <!-- 侧边栏 -->
         <aside class="sidebar" :class="{ collapsed: collapsed }">
             <div class="sidebar-header">
-                <div class="logo">
-                    <img :src="logoUrl" alt="Logo" class="logo-img" />
-                    <span v-if="!collapsed" class="logo-text">城市生命线</span>
-                </div>
-                <div class="collapse-btn" @click="toggleSidebar">
-                    <el-icon>
-                        <DArrowLeft v-if="!collapsed" />
-                        <DArrowRight v-else />
-                    </el-icon>
-                </div>
+                <!-- Logo 区域插槽，支持各服务自定义 -->
+                <slot name="logo" :collapsed="collapsed" :service="currentService">
+                    <!-- 默认 Logo -->
+                    <div class="logo">
+                        <img :src="logoUrl" alt="Logo" class="logo-img" />
+                        <span v-if="!collapsed" class="logo-text">{{ serviceTitle }}</span>
+                    </div>
+                </slot>
+                <button 
+                    class="collapse-btn"
+                    @click="toggleSidebar"
+                    :title="collapsed ? '展开侧边栏' : '收起侧边栏'"
+                >
+                    <!-- 收起图标 PanelLeftClose -->
+                    <PanelLeftClose v-if="!collapsed"/>
+                    <!-- 展开图标 PanelLeftOpen -->
+                    <PanelLeftOpen v-else/>
+                </button>
             </div>
 
             <nav class="nav-menu">
@@ -24,13 +32,16 @@
                             :class="{ active: activeMenu === item.key, 'has-children': item.children }"
                             @click="item.children ? toggleMenu(item) : handleMenuClick(item)"
                         >
-                            <el-icon><component :is="item.icon" /></el-icon>
+                            <component :is="item.icon" :size="16" />
                             <span v-if="!collapsed">{{ item.label }}</span>
                             <!-- 展开/折叠图标 -->
-                            <el-icon v-if="item.children && !collapsed" class="expand-icon">
-                                <ArrowDown v-if="item.expanded" />
-                                <ArrowRight v-else />
-                            </el-icon>
+                            <ChevronDown v-if="item.children && !collapsed && item.expanded" :size="14" class="expand-icon" />
+                            <ChevronRight v-if="item.children && !collapsed && !item.expanded" :size="14" class="expand-icon" />
+                            <!-- 折叠时的 Tooltip -->
+                            <div v-if="collapsed" class="nav-tooltip">
+                                {{ item.label }}
+                                <div class="tooltip-arrow"></div>
+                            </div>
                         </div>
                         <!-- 子菜单 -->
                         <template v-if="item.children && item.expanded && !collapsed">
@@ -73,7 +84,7 @@
                     @load="handleIframeLoad"
                 />
                 <div v-if="iframeLoading" class="iframe-loading">
-                    <el-icon class="is-loading"><Loading /></el-icon>
+                    <Loader :size="20" class="is-loading" />
                     <span>加载中...</span>
                 </div>
             </div>
@@ -87,23 +98,28 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import {
-    ChatDotRound,
-    Grid,
-    Connection,
-    Document,
-    Service,
-    DArrowLeft,
-    DArrowRight,
-    User,
-    Setting,
-    SwitchButton,
-    Refresh,
-    Loading,
-    ArrowDown,
-    ArrowRight
-} from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
+import {
+    PanelLeftClose,
+    PanelLeftOpen,
+    MessageCircle,
+    LayoutGrid,
+    Workflow,
+    FileText,
+    Headphones,
+    ChevronLeft,
+    ChevronRight,
+    ChevronDown,
+    User,
+    Settings,
+    LogOut,
+    RefreshCw,
+    Loader
+} from 'lucide-vue-next'
+
+// el-button 图标需要传入组件
+const Refresh = RefreshCw
+
 import type { MenuItem } from '@/types/menu'
 
 interface Props {
@@ -154,7 +170,7 @@ const currentService = computed(() => {
             const userViews = loginDomain.userViews || []
             // 找到当前路由对应的视图
             const currentView = userViews.find((v: any) => 
-                v.layout === 'AdminSidebarLayout' && 
+                v.layout === 'SubSidebarLayout' && 
                 v.url === route.path
             )
             if (currentView?.service) {
@@ -162,7 +178,7 @@ const currentService = computed(() => {
             }
             // 如果没找到精确匹配，尝试前缀匹配
             const matchedView = userViews.find((v: any) => 
-                v.layout === 'AdminSidebarLayout' && 
+                v.layout === 'SubSidebarLayout' && 
                 route.path.startsWith(v.url)
             )
             if (matchedView?.service) {
@@ -188,6 +204,16 @@ const logoUrl = computed(() => {
     return serviceLogos[service] || '/logo.jpg'  // 默认回退到根路径
 })
 
+// 服务标题
+const serviceTitle = computed(() => {
+    const serviceTitles: Record<string, string> = {
+        'platform': '管理平台',
+        'workcase': '智能客服',
+        'bidding': '竞价平台'
+    }
+    return serviceTitles[currentService.value] || '城市生命线'
+})
+
 // 状态管理
 const collapsed = ref(false)
 const activeMenu = ref('home')
@@ -227,9 +253,9 @@ function loadMenuFromStorage(): MenuItem[] {
         const service = currentService.value
         console.log(`📋 [${service}] 加载用户视图:`, userViews)
 
-        // 过滤出 AdminSidebarLayout 的菜单（使用当前服务动态过滤）
+        // 过滤出 SubSidebarLayout 的菜单（使用当前服务动态过滤）
         const allSidebarViews = userViews.filter((view: any) => 
-            view.layout === 'AdminSidebarLayout' && 
+            view.layout === 'SubSidebarLayout' && 
             (view.type === 0 || view.type === 1) &&  // type 0=目录 1=菜单
             view.service === service &&  // 动态匹配服务
             view.url?.startsWith('/admin')  // 只留 admin 路由
@@ -367,5 +393,5 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-    @import url("./AdminSidebarLayout.scss");
+    @import url("./SubSidebarLayout.scss");
 </style>

urbanLifelineWeb/packages/shared/src/layouts/SubSidebarLayout/SubSidebarLayout.scss

@@ -0,0 +1,440 @@
+// ==================== 品牌色变量 ====================
+$brand-color: #0055AA;
+$brand-color-light: #EBF5FF;
+$brand-color-hover: #004488;
+
+.sidebar-layout {
+    display: flex;
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+    background: #f8fafc;
+    font-family: 'Inter', 'Noto Sans SC', sans-serif;
+}
+
+// ==================== 2级侧边栏（子导航样式）====================
+.sidebar {
+    width: 224px;
+    height: 100%;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    color: #333;
+    flex-shrink: 0;
+    transition: all 0.3s ease;
+    border-right: 1px solid #f1f5f9;
+    position: relative;
+    
+    &.collapsed {
+        width: 64px;
+        overflow: visible;
+        
+        .sidebar-header {
+            padding: 16px 0;
+            justify-content: center;
+            
+            .logo {
+                display: none;
+            }
+            
+            .collapse-btn {
+                display: flex;
+            }
+        }
+        
+        .nav-item {
+            justify-content: center;
+            padding: 10px;
+            margin: 2px 8px;
+            
+            span {
+                display: none;
+            }
+            
+            .expand-icon {
+                display: none;
+            }
+            
+            // 折叠状态下显示 tooltip
+            &:hover .nav-tooltip {
+                opacity: 1;
+                visibility: visible;
+            }
+        }
+        
+        .nav-child-item {
+            display: none;
+        }
+        
+        .user-section {
+            justify-content: center;
+            padding: 16px 8px;
+        }
+    }
+}
+
+// 侧边栏头部
+.sidebar-header {
+    height: 64px;
+    padding: 0 16px;
+    border-bottom: 1px solid #f1f5f9;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.collapse-btn {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #94a3b8;
+    background: transparent;
+    border: none;
+    transition: all 0.2s;
+    flex-shrink: 0;
+    
+    &:hover {
+        background: #f1f5f9;
+        color: #64748b;
+    }
+    
+    svg {
+        width: 20px;
+        height: 20px;
+    }
+}
+
+// 展开按钮（折叠状态显示在右侧）
+.expand-toggle {
+    position: absolute;
+    right: -12px;
+    top: 80px;
+    width: 24px;
+    height: 24px;
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    transition: all 0.2s;
+    z-index: 10;
+    
+    &:hover {
+        background: #f8fafc;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+    
+    .el-icon {
+        font-size: 14px;
+        color: #64748b;
+    }
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    
+    .logo-icon {
+        width: 32px;
+        height: 32px;
+        background: #3b82f6;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        
+        .el-icon {
+            font-size: 18px;
+            color: #fff;
+        }
+    }
+    
+    .logo-img {
+        width: 100%;
+        height: 32px;
+        border-radius: 8px;
+        object-fit: contain;
+    }
+    
+    .logo-text {
+        font-size: 15px;
+        font-weight: 600;
+        color: #1e293b;
+        white-space: nowrap;
+    }
+}
+
+// 导航菜单
+.nav-menu {
+    flex: 1;
+    // overflow-y: auto;
+    padding: 8px 0;
+    
+    &::-webkit-scrollbar {
+        width: 4px;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+        background: rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+    }
+    
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+}
+
+.nav-section {
+    padding: 0;
+}
+
+// 1级导航项（分组标题）
+.nav-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 10px 16px;
+    margin: 2px 8px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: #64748b;
+    font-size: 14px;
+    font-weight: 500;
+    
+    &:hover {
+        background: #f8fafc;
+        color: #475569;
+    }
+    
+    &.active {
+        background: $brand-color-light;
+        color: $brand-color;
+    }
+    
+    &.has-children {
+        cursor: pointer;
+    }
+    
+    .el-icon {
+        font-size: 18px;
+        flex-shrink: 0;
+    }
+    
+    span {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    
+    .expand-icon {
+        font-size: 14px;
+        color: #94a3b8;
+        transition: transform 0.2s;
+    }
+    
+    // 折叠时的 Tooltip
+    .nav-tooltip {
+        position: absolute;
+        left: calc(100% + 16px);
+        top: 50%;
+        transform: translateY(-50%);
+        background: #1e293b;
+        color: #fff;
+        padding: 6px 12px;
+        border-radius: 6px;
+        font-size: 12px;
+        white-space: nowrap;
+        z-index: 100;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.2s;
+        pointer-events: none;
+        
+        .tooltip-arrow {
+            position: absolute;
+            right: 100%;
+            top: 50%;
+            transform: translateY(-50%);
+            border: 5px solid transparent;
+            border-right-color: #1e293b;
+        }
+    }
+}
+
+// 2级导航项（子菜单）
+.nav-child-item {
+    padding: 8px 16px 8px 40px;
+    margin: 1px 8px;
+    border-radius: 6px;
+    font-size: 13px;
+    font-weight: 400;
+    
+    &:hover {
+        background: #f8fafc;
+        color: #475569;
+    }
+    
+    &.active {
+        background: $brand-color;
+        color: #fff;
+        font-weight: 500;
+        
+        .el-icon {
+            color: #fff;
+        }
+    }
+    
+    .el-icon {
+        font-size: 16px;
+    }
+}
+
+// 3级导航项
+.nav-sub-child-item {
+    padding: 6px 16px 6px 56px;
+    margin: 1px 8px;
+    border-radius: 6px;
+    font-size: 13px;
+    font-weight: 400;
+    color: #64748b;
+    
+    &:hover {
+        background: #f8fafc;
+        color: #475569;
+    }
+    
+    &.active {
+        background: $brand-color;
+        color: #fff;
+    }
+}
+
+// 用户信息
+.user-section {
+    padding: 16px;
+    border-top: 1px solid #f1f5f9;
+    cursor: pointer;
+    transition: background 0.2s;
+    
+    &:hover {
+        background: #f8fafc;
+    }
+    
+    .user-info-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+    
+    .user-avatar {
+        flex-shrink: 0;
+    }
+    
+    .user-name {
+        font-size: 14px;
+        font-weight: 500;
+        color: #374151;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+// ==================== 主内容区 ====================
+.main-content {
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+    background: #f8fafc;
+    position: relative;
+}
+
+// iframe 容器
+.iframe-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.iframe-header {
+    height: 56px;
+    padding: 0 24px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #e2e8f0;
+    background: #fff;
+    flex-shrink: 0;
+}
+
+.iframe-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1e293b;
+}
+
+.content-iframe {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    border: none;
+    background: #fff;
+}
+
+.iframe-loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    color: $brand-color;
+    font-size: 14px;
+    z-index: 10;
+    
+    .el-icon {
+        font-size: 32px;
+    }
+}
+
+// ==================== 响应式 ====================
+@media (max-width: 768px) {
+    .sidebar {
+        width: 64px;
+        
+        &:not(.collapsed) {
+            width: 224px;
+            position: fixed;
+            left: 0;
+            top: 0;
+            z-index: 1000;
+            box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
+        }
+    }
+    
+    .iframe-header {
+        padding: 0 16px;
+        
+        .iframe-title {
+            font-size: 14px;
+        }
+    }
+}

urbanLifelineWeb/packages/shared/src/layouts/SubSidebarLayout/SubSidebarLayout.vue

@@ -0,0 +1,533 @@
+<template>
+    <div class="sidebar-layout" :class="{ 'no-sidebar': shouldHideSidebar }">
+        <!-- 侧边栏（当只有一个菜单时隐藏） -->
+        <aside v-if="!shouldHideSidebar" class="sidebar" :class="{ collapsed: collapsed }">
+            <div class="sidebar-header">
+                <!-- Logo 区域插槽，支持各服务自定义 -->
+                <slot name="logo" :collapsed="collapsed" :service="currentService">
+                    <!-- 默认 Logo -->
+                    <div class="logo">
+                        <img :src="logoUrl" alt="Logo" class="logo-img" />
+                        <span v-if="!collapsed" class="logo-text">{{ serviceTitle }}</span>
+                    </div>
+                </slot>
+                <button 
+                    class="collapse-btn"
+                    @click="toggleSidebar"
+                    :title="collapsed ? '展开侧边栏' : '收起侧边栏'"
+                >
+                    <PanelLeftClose v-if="!collapsed"/>
+                    <PanelLeftOpen v-else/>
+                </button>
+            </div>
+
+            <nav class="nav-menu">
+                <div class="nav-section">
+                    <!-- 前端分组（非 admin 路由） -->
+                    <template v-if="frontendMenuItems.length > 0">
+                        <div
+                            class="nav-item nav-group-item"
+                            :class="{ 'has-children': true }"
+                            @click="toggleGroup('frontend')"
+                        >
+                            <Monitor :size="16" />
+                            <span v-if="!collapsed">前端</span>
+                            <ChevronDown v-if="!collapsed && isGroupExpanded('frontend')" :size="14" class="expand-icon" />
+                            <ChevronRight v-if="!collapsed && !isGroupExpanded('frontend')" :size="14" class="expand-icon" />
+                            <div v-if="collapsed" class="nav-tooltip">
+                                前端
+                                <div class="tooltip-arrow"></div>
+                            </div>
+                        </div>
+                        <!-- 前端子菜单 -->
+                        <template v-if="isGroupExpanded('frontend') && !collapsed">
+                            <template v-for="item in frontendMenuItems" :key="item.key">
+                                <div
+                                    class="nav-item nav-child-item"
+                                    :class="{ active: isMenuActive(item), 'has-children': item.children }"
+                                    @click="item.children ? toggleMenu(item) : handleMenuClick(item)"
+                                >
+                                    <component :is="item.icon" />
+                                    <span>{{ item.label }}</span>
+                                    <ChevronDown v-if="item.children && item.expanded" :size="14" class="expand-icon" />
+                                    <ChevronRight v-if="item.children && !item.expanded" :size="14" class="expand-icon" />
+                                </div>
+                                <!-- 三级菜单 -->
+                                <template v-if="item.children && item.expanded">
+                                    <div
+                                        v-for="child in item.children"
+                                        :key="child.key"
+                                        class="nav-item nav-sub-child-item"
+                                        :class="{ active: isMenuActive(child) }"
+                                        @click="handleMenuClick(child)"
+                                    >
+                                        <span>{{ child.label }}</span>
+                                    </div>
+                                </template>
+                            </template>
+                        </template>
+                    </template>
+
+                    <!-- 后端分组（admin 路由） -->
+                    <template v-if="backendMenuItems.length > 0">
+                        <div
+                            class="nav-item nav-group-item"
+                            :class="{ 'has-children': true }"
+                            @click="toggleGroup('backend')"
+                        >
+                            <Server :size="16" />
+                            <span v-if="!collapsed">后端</span>
+                            <ChevronDown v-if="!collapsed && isGroupExpanded('backend')" :size="14" class="expand-icon" />
+                            <ChevronRight v-if="!collapsed && !isGroupExpanded('backend')" :size="14" class="expand-icon" />
+                            <div v-if="collapsed" class="nav-tooltip">
+                                后端
+                                <div class="tooltip-arrow"></div>
+                            </div>
+                        </div>
+                        <!-- 后端子菜单 -->
+                        <template v-if="isGroupExpanded('backend') && !collapsed">
+                            <template v-for="item in backendMenuItems" :key="item.key">
+                                <div
+                                    class="nav-item nav-child-item"
+                                    :class="{ active: isMenuActive(item), 'has-children': item.children }"
+                                    @click="item.children ? toggleMenu(item) : handleMenuClick(item)"
+                                >
+                                    <component :is="item.icon" :size="16" />
+                                    <span>{{ item.label }}</span>
+                                    <ChevronDown v-if="item.children && item.expanded" :size="14" class="expand-icon" />
+                                    <ChevronRight v-if="item.children && !item.expanded" :size="14" class="expand-icon" />
+                                </div>
+                                <!-- 三级菜单 -->
+                                <template v-if="item.children && item.expanded">
+                                    <div
+                                        v-for="child in item.children"
+                                        :key="child.key"
+                                        class="nav-item nav-sub-child-item"
+                                        :class="{ active: isMenuActive(child) }"
+                                        @click="handleMenuClick(child)"
+                                    >
+                                        <span>{{ child.label }}</span>
+                                    </div>
+                                </template>
+                            </template>
+                        </template>
+                    </template>
+                </div>
+            </nav>
+        </aside>
+
+        <!-- 折叠时的展开按钮 -->
+        <button
+            v-if="collapsed && !shouldHideSidebar"
+            class="expand-toggle"
+            @click="toggleSidebar"
+            title="展开侧边栏"
+        >
+            <ChevronRight :size="18" />
+        </button>
+
+        <!-- 主内容区 -->
+        <main class="main-content">
+            <!-- iframe 模式 -->
+            <div v-if="currentIframeUrl" class="iframe-container">
+                <div class="iframe-header">
+                    <span class="iframe-title">{{ currentMenuItem?.label }}</span>
+                    <el-button 
+                        text 
+                        @click="handleRefreshIframe"
+                        :icon="Refresh"
+                    >
+                        刷新
+                    </el-button>
+                </div>
+                <iframe
+                    ref="iframeRef"
+                    :src="currentIframeUrl"
+                    class="content-iframe"
+                    frameborder="0"
+                    @load="handleIframeLoad"
+                />
+                <div v-if="iframeLoading" class="iframe-loading">
+                    <Loader :size="20" class="is-loading" />
+                    <span>加载中...</span>
+                </div>
+            </div>
+
+            <!-- 路由模式 -->
+            <router-view v-else />
+        </main>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { 
+    PanelLeftClose, 
+    PanelLeftOpen, 
+    Server,
+    Monitor,
+    ChevronDown,
+    ChevronRight,
+    RefreshCw,
+    Loader
+} from 'lucide-vue-next'
+
+// el-button 刷新图标需要传入组件
+const Refresh = RefreshCw
+
+// ... (rest of the code remains the same)
+import type { MenuItem } from '@/types/menu'
+
+// 分组展开状态
+const expandedGroups = ref<Set<string>>(new Set(['frontend', 'backend']))
+
+interface Props {
+    service?: string  // 服务名称：platform, bidding, workcase
+}
+
+// ...
+const props = withDefaults(defineProps<Props>(), {
+    service: undefined  // 不设默认值，从路由自动检测
+})
+
+const router = useRouter()
+const route = useRoute()
+
+// 自动检测当前服务
+const currentService = computed(() => {
+    // 优先使用 props
+    if (props.service) {
+        return props.service
+    }
+    // 从 route.meta 获取
+    const meta = route.meta as any
+    if (meta?.service) {
+        return meta.service
+    }
+    // 从 URL 路径推断服务（最可靠的方式）
+    const hostname = window.location.hostname
+    const pathname = window.location.pathname
+    
+    // 根据 URL 路径判断服务
+    // localhost/workcase/... -> workcase
+    // localhost/platform/... -> platform
+    // localhost/bidding/... -> bidding
+    if (pathname.includes('/workcase/')) {
+        return 'workcase'
+    }
+    if (pathname.includes('/platform/')) {
+        return 'platform'
+    }
+    if (pathname.includes('/bidding/')) {
+        return 'bidding'
+    }
+    
+    // 从 localStorage 的 loginDomain 中推断（基于当前路由匹配的视图）
+    try {
+        const loginDomainStr = localStorage.getItem('loginDomain')
+        if (loginDomainStr) {
+            const loginDomain = JSON.parse(loginDomainStr)
+            const userViews = loginDomain.userViews || []
+            // 找到当前路由对应的视图
+            const currentView = userViews.find((v: any) => 
+                v.layout === 'SubSidebarLayout' && 
+                v.url === route.path
+            )
+            if (currentView?.service) {
+                return currentView.service
+            }
+            // 如果没找到精确匹配，尝试前缀匹配
+            const matchedView = userViews.find((v: any) => 
+                v.layout === 'SubSidebarLayout' && 
+                route.path.startsWith(v.url)
+            )
+            if (matchedView?.service) {
+                return matchedView.service
+            }
+        }
+    } catch (error) {
+        console.error('自动检测服务失败:', error)
+    }
+    // 默认返回 workcase
+    return 'workcase'
+})
+
+// 动态 Logo URL
+const logoUrl = computed(() => {
+    const service = currentService.value
+    // 根据不同服务返回对应的 logo 路径
+    const serviceLogos: Record<string, string> = {
+        'platform': '/platform/logo.jpg',
+        'workcase': '/workcase/logo.jpg', 
+        'bidding': '/bidding/logo.jpg'
+    }
+    return serviceLogos[service] || '/logo.jpg'  // 默认回退到根路径
+})
+
+// 服务标题
+const serviceTitle = computed(() => {
+    const serviceTitles: Record<string, string> = {
+        'platform': '管理平台',
+        'workcase': '智能客服',
+        'bidding': '竞价平台'
+    }
+    return serviceTitles[currentService.value] || '城市生命线'
+})
+
+// 状态管理
+const collapsed = ref(false)
+const activeMenu = ref('home')
+const iframeLoading = ref(false)
+const iframeRef = ref<HTMLIFrameElement>()
+
+// 从 LocalStorage 获取用户名
+function getUserName(): string {
+    try {
+        const loginDomainStr = localStorage.getItem('loginDomain')
+        if (loginDomainStr) {
+            const loginDomain = JSON.parse(loginDomainStr)
+            return loginDomain.user?.username || loginDomain.userInfo?.username || '管理员'
+        }
+    } catch (error) {
+        console.error('❌ 获取用户名失败:', error)
+    }
+    return '管理员'
+}
+
+const userName = ref(getUserName())
+
+/**
+ * 从 LocalStorage 加载菜单
+ */
+function loadMenuFromStorage(): MenuItem[] {
+    try {
+        const loginDomainStr = localStorage.getItem('loginDomain')
+        if (!loginDomainStr) {
+            console.warn('⚠️ 未找到 loginDomain')
+            return []
+        }
+
+        const loginDomain = JSON.parse(loginDomainStr)
+        const userViews = loginDomain.userViews || []
+
+        const service = currentService.value
+        console.log(`📋 [${service}] 加载用户视图:`, userViews)
+
+        // 过滤出顶级菜单：需要 layout === 'SubSidebarLayout'
+        const topLevelViews = userViews.filter((view: any) => 
+            view.layout === 'SubSidebarLayout' && 
+            !view.parentId &&  // 顶级菜单没有 parentId
+            (view.type === 0 || view.type === 1) &&  // type 0=目录 1=菜单
+            view.service === service  // 动态匹配服务
+        )
+        
+        // 获取所有顶级菜单的 viewId
+        const topLevelIds = new Set(topLevelViews.map((v: any) => v.viewId))
+        
+        // 过滤出子菜单：parentId 指向顶级菜单（不要求子菜单有 layout）
+        const childViews = userViews.filter((view: any) => 
+            view.parentId &&  // 有 parentId
+            topLevelIds.has(view.parentId) &&  // parentId 指向顶级菜单
+            (view.type === 0 || view.type === 1) &&
+            view.service === service
+        )
+
+        console.log(`🔍 [${service}] 顶级视图:`, topLevelViews)
+        console.log(`🔍 [${service}] 子视图:`, childViews)
+
+        // 按 orderNum 排序
+        topLevelViews.sort((a: any, b: any) => (a.orderNum || 0) - (b.orderNum || 0))
+
+        // 分离顶级菜单和子菜单
+        // 转换为 MenuItem 格式并构建树形结构
+        const menuItems: MenuItem[] = topLevelViews.map((view: any) => {
+            const isIframe = view.viewType === 'iframe' || !!view.iframeUrl
+            
+            let menuUrl = view.url
+            if (isIframe && view.url && (view.url.startsWith('http://') || view.url.startsWith('https://'))) {
+                menuUrl = `/${view.viewId}`
+            }
+            
+            // 查找子菜单
+            const children = childViews
+                .filter((child: any) => child.parentId === view.viewId)
+                .sort((a: any, b: any) => (a.orderNum || 0) - (b.orderNum || 0))
+                .map((child: any) => ({
+                    key: child.viewId || child.name,
+                    label: child.name,
+                    icon: child.icon || 'Document',
+                    url: child.url,
+                    type: (child.viewType === 'iframe' || !!child.iframeUrl) ? 'iframe' : 'route' as 'iframe' | 'route'
+                }))
+            
+            return {
+                key: view.viewId || view.name,
+                label: view.name,
+                icon: view.icon || 'Grid',
+                url: menuUrl,
+                type: isIframe ? 'iframe' : 'route',
+                children: children.length > 0 ? children : undefined,
+                expanded: false  // 默认折叠
+            }
+        })
+
+        console.log('✅ 侧边栏菜单:', menuItems)
+        return menuItems
+    } catch (error) {
+        console.error('❌ 加载菜单失败:', error)
+        return []
+    }
+}
+
+// 菜单配置（从 LocalStorage 加载）
+const menuItems = ref<MenuItem[]>(loadMenuFromStorage())
+
+// 前端菜单（非 admin 路由）
+const frontendMenuItems = computed(() => {
+    return menuItems.value.filter(item => !item.url?.includes('/admin'))
+})
+
+// 后端菜单（admin 路由）
+const backendMenuItems = computed(() => {
+    return menuItems.value.filter(item => item.url?.includes('/admin'))
+})
+
+// 计算总菜单数量（包括子菜单）
+const totalMenuCount = computed(() => {
+    let count = 0
+    const countItems = (items: MenuItem[]) => {
+        items.forEach(item => {
+            count++
+            if (item.children) {
+                countItems(item.children)
+            }
+        })
+    }
+    countItems(menuItems.value)
+    return count
+})
+
+// 当只有一个菜单时隐藏 sidebar
+const shouldHideSidebar = computed(() => {
+    return totalMenuCount.value <= 1
+})
+
+// 当前菜单项
+const currentMenuItem = computed(() => {
+    // 在所有菜单中查找（包括子菜单）
+    const findInItems = (items: MenuItem[]): MenuItem | undefined => {
+        for (const item of items) {
+            if (item.key === activeMenu.value) return item
+            if (item.children) {
+                const found = findInItems(item.children)
+                if (found) return found
+            }
+        }
+        return undefined
+    }
+    return findInItems(menuItems.value)
+})
+
+// 当前 iframe URL（从路由 meta 读取）
+const currentIframeUrl = computed(() => {
+    const meta = route.meta as any
+    return meta?.iframeUrl || null
+})
+
+// 切换分组展开/折叠
+const toggleGroup = (group: string) => {
+    if (expandedGroups.value.has(group)) {
+        expandedGroups.value.delete(group)
+    } else {
+        expandedGroups.value.add(group)
+    }
+}
+
+// 检查分组是否展开
+const isGroupExpanded = (group: string) => {
+    return expandedGroups.value.has(group)
+}
+
+// 检查菜单是否激活
+const isMenuActive = (item: MenuItem) => {
+    if (item.url === route.path) return true
+    if (item.key === activeMenu.value) return true
+    // 检查子菜单是否激活
+    if (item.children) {
+        return item.children.some(child => child.url === route.path || child.key === activeMenu.value)
+    }
+    return false
+}
+
+// 切换侧边栏
+const toggleSidebar = () => {
+    collapsed.value = !collapsed.value
+}
+
+// 切换菜单展开/折叠
+const toggleMenu = (item: MenuItem) => {
+    if (item.children) {
+        item.expanded = !item.expanded
+    }
+}
+
+// 处理菜单点击
+const handleMenuClick = (item: MenuItem) => {
+    activeMenu.value = item.key || ''
+    
+    // 所有菜单都通过路由跳转
+    if (item.url) {
+        router.push(item.url)
+        if (item.viewType === 'iframe') {
+            iframeLoading.value = true
+        }
+    }
+}
+
+// iframe 加载完成
+const handleIframeLoad = () => {
+    iframeLoading.value = false
+}
+
+// 刷新 iframe
+const handleRefreshIframe = () => {
+    if (iframeRef.value) {
+        iframeLoading.value = true
+        iframeRef.value.src = iframeRef.value.src
+    }
+}
+
+// 监听服务变化，重新加载菜单
+watch(
+    currentService,
+    () => {
+        console.log(`🔄 服务切换到: ${currentService.value}，重新加载菜单`)
+        menuItems.value = loadMenuFromStorage()
+    }
+)
+
+// 监听路由变化，同步激活菜单
+watch(
+    () => route.path,
+    (newPath) => {
+        // 查找匹配的菜单项（route 或 iframe 类型）
+        const menuItem = menuItems.value.find((item: MenuItem) => item.url === newPath)
+        if (menuItem) {
+            activeMenu.value = menuItem.key
+        } else {
+            // 如果路径不匹配，尝试通过 route.name 匹配 viewId
+            const menuByName = menuItems.value.find((item: MenuItem) => item.key === route.name)
+            if (menuByName) {
+                activeMenu.value = menuByName.key
+            }
+        }
+    },
+    { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+    @import url("./SubSidebarLayout.scss");
+</style>

urbanLifelineWeb/packages/shared/src/layouts/index.ts

@@ -1,2 +1,2 @@
 export { default as BlankLayout } from './BlankLayout/BlankLayout.vue'
-export { default as AdminSidebarLayout } from './AdminSidebarLayout/AdminSidebarLayout.vue'
+export { default as SubSidebarLayout } from './SubSidebarLayout/SubSidebarLayout.vue'

urbanLifelineWeb/packages/shared/src/types/enums.ts

@@ -1,10 +1,9 @@
 /**
- * 菜单类型枚举
+ * 视图/菜单类型枚举（对应数据库 tb_sys_view.type 字段）
  */
-export enum MenuType {
-    NAVIGATION = 'navigation',  // 导航菜单
-    SIDEBAR = 'sidebar',        // 侧边栏菜单
-    MENU = 'menu',              // 普通菜单
-    PAGE = 'page',              // 页面
-    BUTTON = 'button'           // 按钮
+export enum ViewType {
+    NAVBAR = 0,     // 导航栏/目录
+    SIDEBAR = 1,    // 侧边栏/菜单
+    BUTTON = 2,     // 按钮（权限控制）
+    ROUTE = 3       // 空白页/路由页面
 }

urbanLifelineWeb/packages/shared/src/utils/route/route-generator.ts

@@ -8,18 +8,11 @@
 
 import type { RouteRecordRaw } from 'vue-router'
 import type { TbSysViewDTO } from '@/types'
+import { ViewType } from '@/types'
 
 // 为了代码可读性，创建类型别名
 type SysMenu = TbSysViewDTO
 
-// 视图类型常量（对应后端的 type 字段）
-const ViewType = {
-    NAVBAR: 0,    // 导航栏
-    SIDEBAR: 1,   // 侧边栏
-    BUTTON: 2,    // 按钮
-    ROUTE: 3      // 空白页（路由页面）
-} as const
-
 /**
  * 路由生成器配置
  */
@@ -322,26 +315,26 @@ function convertRoutesToMenus(routes: RouteRecordRaw[]): SysMenu[] {
     routes.forEach(route => {
         if (route.children && route.children.length > 0) {
             route.children.forEach(child => {
-                if (child.meta?.menuType !== undefined) {
+                if (child.meta?.type !== undefined) {
                     const menu: SysMenu = {
                         viewId: child.name as string || child.path.replace(/\//g, '-'),
                         parentId: '0',
                         name: child.meta.title as string || child.name as string,
                         url: route.path,
-                        type: child.meta.menuType as number,
+                        type: child.meta.type as number,
                         orderNum: (child.meta.orderNum as number) || -1,
                         component: '__STATIC_ROUTE__',
                     }
                     menus.push(menu)
                 }
             })
-        } else if (route.meta?.menuType !== undefined) {
+        } else if (route.meta?.type !== undefined) {
             const menu: SysMenu = {
                 viewId: route.name as string || route.path.replace(/\//g, '-'),
                 parentId: '0',
                 name: route.meta.title as string || route.name as string,
                 url: route.path,
-                type: route.meta.menuType as number,
+                type: route.meta.type as number,
                 orderNum: (route.meta.orderNum as number) || -1,
                 component: '__STATIC_ROUTE__',
             }