样式修改

2025-12-17 15:32:58 +08:00
parent ded3eddc56
commit aa8ce553b0
52 changed files with 3145 additions and 2010 deletions
--- a/urbanLifelineWeb/packages/platform/ROUTE_GUIDE.md
+++ b/urbanLifelineWeb/packages/platform/ROUTE_GUIDE.md
@@ -51,7 +51,7 @@ Platform 使用 shared 提供的路由生成工具来动态生成路由。架构
 │  ┌───────────────────────────────────────────────────────┐ │
 │  │  types/sys/menu.ts & types/enums.ts                   │ │
 │  │  - SysMenu                菜单接口                    │ │
-│  │  - MenuType               菜单类型枚举                │ │
+│  │  - ViewType               视图类型枚举                │ │
 │  └───────────────────────────────────────────────────────┘ │
 └─────────────────────────────────────────────────────────────┘
                              ↓
@@ -167,7 +167,7 @@ interface SysMenu {
    parentID?: string       // 父菜单ID，'0' 表示根菜单
    name: string           // 菜单名称
    url?: string           // 路由路径，如 '/user/profile'
-    type: MenuType         // 菜单类型
+    type: ViewType         // 视图类型（0=目录 1=菜单 2=按钮 3=页面）
    icon?: string          // 图标
    component?: string     // 组件路径，如 'user/profile/ProfileView'
    layout?: string        // 布局名称，如 'SidebarLayout'
@@ -177,12 +177,11 @@ interface SysMenu {
    children?: SysMenu[]   // 子菜单
 }

-enum MenuType {
-    NAVIGATION = 'navigation',  // 导航菜单（顶部导航）
-    SIDEBAR = 'sidebar',        // 侧边栏菜单
-    MENU = 'menu',              // 普通菜单
-    PAGE = 'page',              // 页面（独立路由）
-    BUTTON = 'button'           // 按钮（不生成路由）
+enum ViewType {
+    NAVBAR = 0,     // 导航栏/目录
+    SIDEBAR = 1,    // 侧边栏/菜单
+    BUTTON = 2,     // 按钮（权限控制，不生成路由）
+    ROUTE = 3       // 空白页/路由页面
 }
 ```

@@ -195,7 +194,7 @@ const menus: SysMenu[] = [
        parentID: '0',
        name: '用户中心',
        url: '/user',
-        type: MenuType.NAVIGATION,
+        type: ViewType.NAVBAR,
        icon: 'User',
        layout: 'SidebarLayout',
        orderNum: 1,
@@ -205,7 +204,7 @@ const menus: SysMenu[] = [
                parentID: 'user-center',
                name: '个人信息',
                url: '/user/profile',
-                type: MenuType.MENU,
+                type: ViewType.SIDEBAR,
                component: 'user/profile/ProfileView',
                orderNum: 1
            },
@@ -214,7 +213,7 @@ const menus: SysMenu[] = [
                parentID: 'user-center',
                name: '账号设置',
                url: '/user/settings',
-                type: MenuType.MENU,
+                type: ViewType.SIDEBAR,
                component: 'user/settings/SettingsView',
                orderNum: 2
            }
@@ -268,7 +267,8 @@ import {
    type RouteGeneratorConfig
 } from 'shared/utils/route'

-import type { SysMenu, MenuType } from 'shared/types'
+import type { SysMenu } from 'shared/types'
+import { ViewType } from 'shared/types/enums'
 ```

 ### generateRoutes(menus, config)
--- a/urbanLifelineWeb/packages/platform/package.json
+++ b/urbanLifelineWeb/packages/platform/package.json
@@ -9,19 +9,20 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "vue": "^3.5.13",
-    "vue-router": "^4.5.0",
-    "pinia": "^2.2.8",
-    "element-plus": "^2.12.0",
    "@element-plus/icons-vue": "^2.3.2",
    "@vueuse/core": "^11.3.0",
-    "axios": "^1.7.9"
+    "axios": "^1.7.9",
+    "element-plus": "^2.12.0",
+    "lucide-vue-next": "^0.561.0",
+    "pinia": "^2.2.8",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
  },
  "devDependencies": {
+    "@module-federation/vite": "^1.9.3",
    "@types/node": "^22.0.0",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vitejs/plugin-vue-jsx": "^4.1.1",
-    "@module-federation/vite": "^1.9.3",
    "typescript": "^5.7.2",
    "vite": "^6.0.3",
    "vue-tsc": "^2.2.0"
--- a/urbanLifelineWeb/packages/platform/src/layouts/AdminIframeSidebarLayout/AdminIframeSidebarLayout.scss
+++ b/urbanLifelineWeb/packages/platform/src/layouts/AdminIframeSidebarLayout/AdminIframeSidebarLayout.scss
@@ -1,55 +1,71 @@
+// ==================== 品牌色变量 ====================
+$brand-color: #0055AA;
+$brand-color-light: #EBF5FF;
+$brand-color-hover: #004488;
+
 .sidebar-layout {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
+    background: #fff;
+    font-family: 'Inter', 'Noto Sans SC', sans-serif;
 }

-// ==================== 侧边栏 ====================
+// ==================== 2级侧边栏 ====================
 .sidebar {
-    width: 220px;
+    width: 224px;
    height: 100%;
-    background: #F0EAF4;
+    background: #fff;
    display: flex;
    flex-direction: column;
    color: #333;
    flex-shrink: 0;
    transition: width 0.3s ease;
-    border-right: 1px solid rgba(0, 0, 0, 0.08);
+    border-right: 1px solid #f1f5f9;
    
    &.collapsed {
        width: 64px;
        
        .sidebar-header {
-            padding: 16px 12px;
+            padding: 16px 0;
            justify-content: center;
            
            .logo {
-                justify-content: center;
+                display: none;
            }
            
            .collapse-btn {
-                position: static;
-                margin-left: 0;
+                display: flex;
            }
        }
        
        .nav-item {
            justify-content: center;
-            padding: 12px;
+            padding: 10px;
+            margin: 2px 8px;
+            
+            span {
+                display: none;
+            }
        }
        
        .user-section {
            justify-content: center;
-            padding: 16px 12px;
+            padding: 16px 8px;
+            
+            .user-name, .back-icon {
+                display: none;
+            }
        }
    }
 }

 // 侧边栏头部
 .sidebar-header {
-    padding: 16px 20px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    height: 64px;
+    padding: 0 16px;
+    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
@@ -63,76 +79,75 @@
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
-    color: #888;
+    color: #94a3b8;
+    background: transparent;
+    border: none;
    transition: all 0.2s;
    
    &:hover {
-        background: rgba(124, 58, 237, 0.1);
-        color: #7c3aed;
+        background: #f1f5f9;
+        color: #64748b;
    }
 }
-
+.logo-img {
+    width: 100%;
+    height: 32px;
+    border-radius: 8px;
+    object-fit: contain;
+}
 .logo {
    display: flex;
    align-items: center;
-    gap: 10px;
-    
-    .logo-img {
-        width: 40px;
-        height: 40px;
-        border-radius: 6px;
-        object-fit: contain;
-        background: #fff;
-        padding: 2px;
-    }
+    gap: 8px;
    
    .logo-text {
-        font-size: 16px;
+        font-size: 15px;
        font-weight: 600;
-        color: #333;
+        color: #1e293b;
    }
 }

 // 导航菜单
 .nav-menu {
    flex: 1;
-    overflow-y: auto;
-    padding: 12px 0;
+    // overflow-y: auto;
+    padding: 8px 0;
    
    &::-webkit-scrollbar {
        width: 4px;
    }
    
    &::-webkit-scrollbar-thumb {
-        background: rgba(0, 0, 0, 0.2);
+        background: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }
 }

 .nav-section {
-    padding: 8px 0;
+    padding: 0;
 }

 .nav-item {
    display: flex;
    align-items: center;
-    gap: 12px;
-    padding: 14px 20px;
-    margin-bottom: 4px;
+    gap: 8px;
+    padding: 10px 16px;
+    margin: 2px 8px;
+    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
-    color: #555;
+    color: #64748b;
    font-size: 14px;
+    font-weight: 500;
    
    &:hover {
-        background: rgba(124, 58, 237, 0.1);
-        color: #7c3aed;
+        background: #f8fafc;
+        color: #475569;
    }
    
    &.active {
-        background: rgba(124, 58, 237, 0.15);
-        color: #7c3aed;
-        font-weight: 500;
+        background: $brand-color-light;
+        color: $brand-color;
    }
    
    .el-icon {
@@ -141,6 +156,7 @@
    }
    
    span {
+        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
@@ -150,7 +166,7 @@
 // 用户信息
 .user-section {
    padding: 16px;
-    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 12px;
@@ -163,7 +179,7 @@
        flex-shrink: 0;
        
        &:hover {
-            transform: scale(1.1);
+            transform: scale(1.05);
        }
        
        :deep(.el-avatar) {
@@ -176,7 +192,7 @@
        flex: 1;
        font-size: 14px;
        font-weight: 500;
-        color: #303133;
+        color: #374151;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
@@ -190,13 +206,13 @@
        justify-content: center;
        border-radius: 6px;
        cursor: pointer;
-        color: #606266;
+        color: #94a3b8;
        transition: all 0.2s;
        flex-shrink: 0;
        
        &:hover {
-            color: #7c3aed;
-            background: rgba(124, 58, 237, 0.1);
+            color: $brand-color;
+            background: $brand-color-light;
        }
        
        .el-icon {
@@ -210,7 +226,7 @@
    flex: 1;
    height: 100%;
    overflow: hidden;
-    background: #fff;
+    background: #f8fafc;
    position: relative;
 }

@@ -229,15 +245,15 @@
    display: flex;
    align-items: center;
    justify-content: space-between;
-    border-bottom: 1px solid #e5e7eb;
-    background: #fafafa;
+    border-bottom: 1px solid #e2e8f0;
+    background: #fff;
    flex-shrink: 0;
 }

 .iframe-title {
    font-size: 16px;
    font-weight: 600;
-    color: #333;
+    color: #1e293b;
 }

 .content-iframe {
@@ -257,7 +273,7 @@
    flex-direction: column;
    align-items: center;
    gap: 12px;
-    color: #7c3aed;
+    color: $brand-color;
    font-size: 14px;
    z-index: 10;
    
@@ -272,12 +288,12 @@
        width: 64px;
        
        &:not(.collapsed) {
-            width: 220px;
+            width: 224px;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
-            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+            box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
        }
    }
    
--- a/urbanLifelineWeb/packages/platform/src/layouts/AdminIframeSidebarLayout/AdminIframeSidebarLayout.vue
+++ b/urbanLifelineWeb/packages/platform/src/layouts/AdminIframeSidebarLayout/AdminIframeSidebarLayout.vue
@@ -3,16 +3,20 @@
        <!-- 侧边栏 -->
        <aside class="sidebar" :class="{ collapsed: collapsed }">
            <div class="sidebar-header">
-                <div class="logo">
+                <div class="logo" v-if="!collapsed">
                    <img src="/logo.jpg" 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>
+                    <!-- <span v-if="!collapsed" class="logo-text">城市生命线</span> -->
                </div>
+                <button 
+                    class="collapse-btn"
+                    @click="toggleSidebar"
+                    :title="collapsed ? '展开侧边栏' : '收起侧边栏'"
+                >
+                    <!-- 收起图标 PanelLeftClose -->
+                    <PanelLeftClose v-if="!collapsed"/>
+                    <!-- 展开图标 PanelLeftOpen -->
+                    <img v-else src="/logo.jpg" alt="Logo" class="logo-img" />
+                </button>
            </div>

            <nav class="nav-menu">
@@ -85,6 +89,7 @@ import {
    Loading,
    Back
 } from '@element-plus/icons-vue'
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-vue-next'
 import { ElMessage } from 'element-plus'
 import type { MenuItem } from 'shared/types'

@@ -126,9 +131,9 @@ function loadMenuFromStorage(): MenuItem[] {
        const userViews = loginDomain.userViews || []


-        // 过滤出 AdminIframeSidebarLayout 的菜单（3个 iframe 管理后台入口）
+        // 过滤出 AdminSidebarLayout 的菜单（3个 iframe 管理后台入口）
        const sidebarViews = userViews.filter((view: any) => 
-            view.layout === 'AdminIframeSidebarLayout' &&  // AdminIframeSidebarLayout 布局
+            view.layout === 'AdminSidebarLayout' &&  // AdminSidebarLayout 布局
            view.viewType === 'iframe' &&  // iframe 类型
            view.type === 1 &&  // type 1 是侧边栏菜单
            view.service === 'platform'  // platform 服务
@@ -270,5 +275,5 @@ watch(
 </script>

 <style lang="scss" scoped>
-    @import url("./AdminIframeSidebarLayout.scss");
+    @import url("./AdminSidebarLayout.scss");
 </style>
--- a/urbanLifelineWeb/packages/platform/src/layouts/AdminIframeSidebarLayout/README.md
+++ b/urbanLifelineWeb/packages/platform/src/layouts/AdminIframeSidebarLayout/README.md
--- a/urbanLifelineWeb/packages/platform/src/layouts/SidebarLayout/SidebarLayout.scss
+++ b/urbanLifelineWeb/packages/platform/src/layouts/SidebarLayout/SidebarLayout.scss
@@ -1,143 +1,234 @@
+// ==================== 品牌色变量 ====================
+$brand-color: #0055AA;
+$brand-color-light: #EBF5FF;
+$brand-color-hover: #004488;
+
 .sidebar-layout {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
+    background: #fff;
+    font-family: 'Inter', 'Noto Sans SC', sans-serif;
 }

-// ==================== 侧边栏 ====================
+// ==================== 1级侧边栏 ====================
 .sidebar {
-    width: 220px;
+    width: 256px;
    height: 100%;
-    background: #F0EAF4;
+    background: #fff;
    display: flex;
    flex-direction: column;
    color: #333;
    flex-shrink: 0;
    transition: width 0.3s ease;
-    border-right: 1px solid rgba(0, 0, 0, 0.08);
+    border-right: 1px solid #f1f5f9;
+    z-index: 50;
    
    &.collapsed {
-        width: 64px;
+        width: 80px;
+        overflow: visible;
        
        .sidebar-header {
-            padding: 16px 12px;
+            padding: 16px 0;
            justify-content: center;
-            
-            .logo {
-                justify-content: center;
-            }
-            
-            .collapse-btn {
-                position: static;
-                margin-left: 0;
-            }
        }
        
        .nav-item {
            justify-content: center;
            padding: 12px;
+            border-radius: 8px;
+            margin: 0 12px;
+            
+            span {
+                display: none;
+            }
+            
+            // 折叠状态下显示 tooltip
+            &:hover .nav-tooltip {
+                opacity: 1;
+                visibility: visible;
+            }
        }
        
        .user-section {
            justify-content: center;
-            padding: 16px 12px;
+            padding: 16px;
+            
+            .user-info, .user-more {
+                display: none;
+            }
        }
    }
 }

 // 侧边栏头部
 .sidebar-header {
-    padding: 16px 20px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    height: 64px;
+    padding: 0 16px;
+    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
+    user-select: none;
 }

 .collapse-btn {
-    width: 28px;
-    height: 28px;
+    width: 32px;
+    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
-    border-radius: 6px;
+    border-radius: 8px;
    cursor: pointer;
-    color: #888;
+    color: #94a3b8;
+    background: transparent;
+    border: none;
    transition: all 0.2s;
+    flex-shrink: 0;
    
    &:hover {
-        background: rgba(124, 58, 237, 0.1);
-        color: #7c3aed;
+        background: #f1f5f9;
+        color: #64748b;
+    }
+    
+    .el-icon {
+        font-size: 18px;
    }
 }

+.logo-img {
+    height: 32px;
+    width: 100%;
+    border-radius: 8px;
+    object-fit: contain;
+}
 .logo {
    display: flex;
    align-items: center;
-    gap: 10px;
-    
-    .logo-img {
-        width: 40px;
-        height: 40px;
-        border-radius: 6px;
-        object-fit: contain;
-        background: #fff;
-        padding: 2px;
-    }
+    gap: 8px;
    
    .logo-text {
        font-size: 16px;
        font-weight: 600;
-        color: #333;
+        color: #1e293b;
+        letter-spacing: -0.02em;
+    }
+}
+
+// 折叠状态下的 Logo（可点击展开）
+.logo-collapsed {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 12px;
+    transition: all 0.2s;
+    
+    &:hover {
+        background: #f1f5f9;
+        
+        .logo-tooltip {
+            opacity: 1;
+            visibility: visible;
+        }
+    }
+    
+    .logo-img {
+        width: 100%;
+        height: 32px;
+        border-radius: 8px;
+        object-fit: contain;
+    }
+    
+    .logo-tooltip {
+        position: absolute;
+        left: 50%;
+        top: calc(100% + 8px);
+        transform: translateX(-50%);
+        background: #1e293b;
+        color: #fff;
+        padding: 8px 16px;
+        border-radius: 8px;
+        font-size: 13px;
+        font-weight: 600;
+        white-space: nowrap;
+        z-index: 100;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.2s;
+        pointer-events: none;
+        
+        .tooltip-arrow {
+            position: absolute;
+            left: 50%;
+            bottom: 100%;
+            transform: translateX(-50%);
+            border: 6px solid transparent;
+            border-bottom-color: #1e293b;
+        }
    }
 }

 // 导航菜单
 .nav-menu {
    flex: 1;
-    overflow-y: auto;
-    padding: 12px 0;
+    // overflow-y: auto;
+    padding: 8px 12px;
    
    &::-webkit-scrollbar {
        width: 4px;
    }
    
    &::-webkit-scrollbar-thumb {
-        background: rgba(0, 0, 0, 0.2);
+        background: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }
+    
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
 }

 .nav-section {
-    padding: 8px 0;
+    padding: 0;
 }

 .nav-item {
+    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
-    padding: 14px 20px;
-    margin-bottom: 4px;
+    padding: 12px 16px;
+    margin-bottom: 2px;
+    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
-    color: #555;
+    color: #64748b;
    font-size: 14px;
+    font-weight: 500;
    
    &:hover {
-        background: rgba(124, 58, 237, 0.1);
-        color: #7c3aed;
+        background: $brand-color-light;
+        color: $brand-color;
    }
    
    &.active {
-        background: rgba(124, 58, 237, 0.15);
-        color: #7c3aed;
-        font-weight: 500;
+        background: $brand-color;
+        color: #fff;
+        box-shadow: 0 4px 12px rgba($brand-color, 0.25);
+        
+        .el-icon {
+            color: #fff;
+        }
    }
    
    .el-icon {
        font-size: 18px;
        flex-shrink: 0;
+        transition: color 0.2s;
    }
    
    span {
@@ -145,17 +236,51 @@
        overflow: hidden;
        text-overflow: ellipsis;
    }
+    
+    // 折叠时的 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;
+        }
+    }
 }

 // 用户信息
 .user-section {
-    padding: 16px 20px;
-    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    padding: 16px;
+    border-top: 1px solid #f1f5f9;
+    background: #f8fafc;
    cursor: pointer;
    transition: background 0.2s;
    
    &:hover {
-        background: rgba(124, 58, 237, 0.05);
+        background: #f1f5f9;
+        
+        .user-name {
+            color: $brand-color;
+        }
    }
    
    .user-info-wrapper {
@@ -165,16 +290,43 @@
    }
    
    .user-avatar {
+        position: relative;
        flex-shrink: 0;
+        
+        &::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            width: 10px;
+            height: 10px;
+            background: #22c55e;
+            border: 2px solid #fff;
+            border-radius: 50%;
+        }
+    }
+    
+    .user-info {
+        flex: 1;
+        min-width: 0;
    }
    
    .user-name {
        font-size: 14px;
        font-weight: 500;
-        color: #333;
+        color: #374151;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
+        transition: color 0.2s;
+    }
+    
+    .user-more {
+        color: #94a3b8;
+        
+        &:hover {
+            color: #64748b;
+        }
    }
 }

@@ -183,7 +335,7 @@
    flex: 1;
    height: 100%;
    overflow: hidden;
-    background: #fff;
+    background: #f8fafc;
    position: relative;
 }

@@ -202,15 +354,15 @@
    display: flex;
    align-items: center;
    justify-content: space-between;
-    border-bottom: 1px solid #e5e7eb;
-    background: #fafafa;
+    border-bottom: 1px solid #e2e8f0;
+    background: #fff;
    flex-shrink: 0;
 }

 .iframe-title {
    font-size: 16px;
    font-weight: 600;
-    color: #333;
+    color: #1e293b;
 }

 .content-iframe {
@@ -230,7 +382,7 @@
    flex-direction: column;
    align-items: center;
    gap: 12px;
-    color: #7c3aed;
+    color: $brand-color;
    font-size: 14px;
    z-index: 10;
    
@@ -242,15 +394,15 @@
 // ==================== 响应式 ====================
@media (max-width: 768px) {
    .sidebar {
-        width: 64px;
+        width: 80px;
        
        &:not(.collapsed) {
-            width: 220px;
+            width: 256px;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
-            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+            box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
        }
    }
    
--- a/urbanLifelineWeb/packages/platform/src/layouts/SidebarLayout/SidebarLayout.vue
+++ b/urbanLifelineWeb/packages/platform/src/layouts/SidebarLayout/SidebarLayout.vue
@@ -3,16 +3,20 @@
        <!-- 侧边栏 -->
        <aside class="sidebar" :class="{ collapsed: collapsed }">
            <div class="sidebar-header">
-                <div class="logo">
+                <div class="logo" v-if="!collapsed">
                    <img src="/logo.jpg" 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>
+                    <!-- <span v-if="!collapsed" class="logo-text">城市生命线</span> -->
                </div>
+                <button 
+                    class="collapse-btn"
+                    @click="toggleSidebar"
+                    :title="collapsed ? '展开侧边栏' : '收起侧边栏'"
+                >
+                    <!-- 收起图标 PanelLeftClose -->
+                    <PanelLeftClose v-if="!collapsed"/>
+                    <!-- 展开图标 PanelLeftOpen -->
+                    <img v-else src="/logo.jpg" alt="Logo" class="logo-img" />
+                </button>
            </div>

            <nav class="nav-menu">
@@ -24,8 +28,13 @@
                        :class="{ active: activeMenu === item.key }"
                        @click="handleMenuClick(item)"
                    >
-                        <el-icon><component :is="item.icon" /></el-icon>
+                        <component :is="item.icon" :size="18" />
                        <span v-if="!collapsed">{{ item.label }}</span>
+                        <!-- 折叠时的 Tooltip -->
+                        <div v-if="collapsed" class="nav-tooltip">
+                            {{ item.label }}
+                            <div class="tooltip-arrow"></div>
+                        </div>
                    </div>
                </div>
            </nav>
@@ -41,15 +50,15 @@
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="profile">
-                            <el-icon><User /></el-icon>
+                            <User :size="16" />
                            个人中心
                        </el-dropdown-item>
                        <el-dropdown-item v-if="hasAdmin" command="settings" divided>
-                            <el-icon><Setting /></el-icon>
+                            <Settings :size="16" />
                            管理后台
                        </el-dropdown-item>
                        <el-dropdown-item command="logout" divided>
-                            <el-icon><SwitchButton /></el-icon>
+                            <LogOut :size="16" />
                            退出登录
                        </el-dropdown-item>
                    </el-dropdown-menu>
@@ -69,7 +78,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>
@@ -84,19 +93,18 @@
 import { ref, computed, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import {
-    ChatDotRound,
-    Grid,
-    Connection,
-    Document,
-    Service,
-    DArrowLeft,
-    DArrowRight,
+    PanelLeftClose,
+    MessageCircle,
+    LayoutGrid,
+    Workflow,
+    FileText,
+    Headphones,
    User,
-    Setting,
-    SwitchButton,
-    Refresh,
-    Loading
-} from '@element-plus/icons-vue'
+    Settings,
+    LogOut,
+    RefreshCw,
+    Loader
+} from 'lucide-vue-next'
 import { ElMessage } from 'element-plus'
 import type { MenuItem } from 'shared/types'

@@ -148,7 +156,7 @@ function loadMenuFromStorage(): MenuItem[] {
            !view.url?.startsWith('/admin')  // 排除 admin 路由（由 AdminSidebar 管理）
        )
        hasAdmin.value = userViews.filter((view: any) => 
-            view.layout === 'AdminIframeSidebarLayout' && 
+            view.layout === 'AdminSidebarLayout' && 
            !view.parentId &&
            view.type === 1 &&  // type 1 是侧边栏菜单
            view.service === 'platform' &&  // 只显示 platform 服务的视图
@@ -242,7 +250,7 @@ const handleUserCommand = (command: string) => {
            router.push('/profile')
            break
        case 'settings':
-            // 跳转到管理后台（AdminSidebarLayout）
+            // 跳转到管理后台（SubSidebarLayout）
            // 查找第一个 admin 路由
            const loginDomainStr = localStorage.getItem('loginDomain')
            if (loginDomainStr) {
--- a/urbanLifelineWeb/packages/platform/src/layouts/index.ts
+++ b/urbanLifelineWeb/packages/platform/src/layouts/index.ts
@@ -1,4 +1,4 @@
 export { default as SidebarLayout } from "./SidebarLayout/SidebarLayout.vue";
-export { default as AdminIframeSidebarLayout } from "./AdminIframeSidebarLayout/AdminIframeSidebarLayout.vue";
+export { default as AdminSidebarLayout } from "./AdminSidebarLayout/AdminSidebarLayout.vue";
 // BlankLayout从shared导入
-export { BlankLayout, AdminSidebarLayout } from 'shared/layouts';
+export { BlankLayout, SubSidebarLayout } from 'shared/layouts';
--- a/urbanLifelineWeb/packages/platform/src/main.ts
+++ b/urbanLifelineWeb/packages/platform/src/main.ts
@@ -1,7 +1,6 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import 'element-plus/dist/index.css'

 import App from './App.vue'
@@ -9,6 +8,84 @@ import router from './router/'
 import { AES_SECRET_KEY } from './config'
 import { initAesEncrypt } from 'shared/utils'

+// 导入需要的 Lucide 图标（用于动态组件）
+import {
+    MessageCircle,
+    LayoutGrid,
+    Workflow,
+    FileText,
+    Headphones,
+    BarChart3,
+    Users,
+    User,
+    Settings,
+    Home,
+    Ticket,
+    Bot,
+    ScrollText,
+    Monitor,
+    Server,
+    ChevronDown,
+    ChevronRight,
+    ChevronLeft,
+    PanelLeftClose,
+    PanelLeftOpen,
+    RefreshCw,
+    Loader,
+    LogOut,
+    Plus,
+    Trash2,
+    Clock,
+    Search,
+    AlertTriangle,
+    Wrench,
+    Paperclip,
+    Send,
+    History,
+    X,
+    Menu,
+    Zap
+} from 'lucide-vue-next'
+
+// Lucide 图标映射（用于全局注册）
+const lucideIcons = {
+    MessageCircle,
+    LayoutGrid,
+    Workflow,
+    FileText,
+    Headphones,
+    BarChart3,
+    Users,
+    User,
+    Settings,
+    Home,
+    Ticket,
+    Bot,
+    ScrollText,
+    Monitor,
+    Server,
+    ChevronDown,
+    ChevronRight,
+    ChevronLeft,
+    PanelLeftClose,
+    PanelLeftOpen,
+    RefreshCw,
+    Loader,
+    LogOut,
+    Plus,
+    Trash2,
+    Clock,
+    Search,
+    AlertTriangle,
+    Wrench,
+    Paperclip,
+    Send,
+    History,
+    X,
+    Menu,
+    Zap
+}
+
 // 异步初始化应用
 async function initApp() {
    // 1. 初始化 AES 加密工具
@@ -29,9 +106,9 @@ async function initApp() {
    // 4. 注册 Element Plus
    app.use(ElementPlus)

-    // 5. 注册所有 Element Plus 图标
-    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-        app.component(key, component)
+    // 5. 注册 Lucide 图标（用于动态组件）
+    for (const [name, component] of Object.entries(lucideIcons)) {
+        app.component(name, component)
    }

    // 6. 注册路由
--- a/urbanLifelineWeb/packages/platform/src/router/dynamicRoute.ts
+++ b/urbanLifelineWeb/packages/platform/src/router/dynamicRoute.ts
@@ -18,7 +18,7 @@ import {
 import type { TbSysViewDTO } from 'shared/types'
 import type { RouteRecordRaw } from 'vue-router'
 import router from './index'
-import { SidebarLayout, BlankLayout, AdminIframeSidebarLayout, AdminSidebarLayout } from '@/layouts'
+import { SidebarLayout, BlankLayout, AdminSidebarLayout, SubSidebarLayout } from '@/layouts'

 // Platform 布局组件映射
 const platformLayoutMap: Record<string, () => Promise<any>> = {
@@ -26,8 +26,8 @@ const platformLayoutMap: Record<string, () => Promise<any>> = {
    'BlankLayout': () => Promise.resolve({ default: BlankLayout }),
    'NavigationLayout': () => Promise.resolve({ default: SidebarLayout }),
    'BasicLayout': () => Promise.resolve({ default: SidebarLayout }),
-    'AdminIframeSidebarLayout': () => Promise.resolve({ default: AdminIframeSidebarLayout }),
-    'AdminSidebarLayout': () => Promise.resolve({ default: AdminSidebarLayout })
+    'AdminSidebarLayout': () => Promise.resolve({ default: AdminSidebarLayout }),
+    'SubSidebarLayout': () => Promise.resolve({ default: SubSidebarLayout })
 }

 // 视图组件加载器
--- a/urbanLifelineWeb/packages/platform/src/types/shared.d.ts
+++ b/urbanLifelineWeb/packages/platform/src/types/shared.d.ts
@@ -194,6 +194,6 @@ declare module 'shared/layouts' {
    import { DefineComponent } from 'vue'
    
    export const BlankLayout: DefineComponent<{}, {}, any>
-    export const AdminSidebarLayout: DefineComponent<{}, {}, any>
+    export const SubSidebarLayout: DefineComponent<{}, {}, any>

 }
--- a/urbanLifelineWeb/packages/platform/src/views/public/Agents/AgentPlatformView.scss
+++ b/urbanLifelineWeb/packages/platform/src/views/public/Agents/AgentPlatformView.scss
@@ -49,14 +49,14 @@
        transition: all 0.2s;
        
        &:hover {
-            color: #7c3aed;
-            border-color: #7c3aed;
+            color: #0055AA;
+            border-color: #0055AA;
        }
        
        &.active {
            color: #fff;
-            background: #7c3aed;
-            border-color: #7c3aed;
+            background: #0055AA;
+            border-color: #0055AA;
        }
    }
 }
--- a/urbanLifelineWeb/packages/platform/src/views/public/Agents/AgentPlatformView.vue
+++ b/urbanLifelineWeb/packages/platform/src/views/public/Agents/AgentPlatformView.vue
@@ -136,7 +136,7 @@ const agents = ref<Agent[]>([
        name: '泰豪合同助手',
        description: '智能合同审核、条款分析、风险提示，提高合同处理效率',
        icon: '📄',
-        color: '#7c3aed',
+        color: '#0055AA',
        category: 'business',
        usage: 8320
    },
@@ -225,7 +225,7 @@ const handleSaveAgent = async (agentData: Partial<Agent>) => {
                description: agentData.description || '',
                icon: agentData.imageUrl ? '' : '🤖',
                imageUrl: agentData.imageUrl,
-                color: agentData.color || '#7c3aed',
+                color: agentData.color || '#0055AA',
                category: agentData.category || 'office',
                apiUrl: agentData.apiUrl,
                usage: 0
--- a/urbanLifelineWeb/packages/platform/src/views/public/Agents/components/AgentCard/AgentCard.scss
+++ b/urbanLifelineWeb/packages/platform/src/views/public/Agents/components/AgentCard/AgentCard.scss
@@ -7,8 +7,8 @@
    transition: all 0.3s ease;
    
    &:hover {
-        border-color: #7c3aed;
-        box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12);
+        border-color: #0055AA;
+        box-shadow: 0 8px 24px rgba(0, 85, 170, 0.12);
        transform: translateY(-4px);
    }
    
--- a/urbanLifelineWeb/packages/platform/src/views/public/Agents/components/AgentEdit/AgentEdit.vue
+++ b/urbanLifelineWeb/packages/platform/src/views/public/Agents/components/AgentEdit/AgentEdit.vue
@@ -236,7 +236,7 @@ const handleSave = () => {
    const suggestionCards = formData.value.suggestionCards?.filter(s => s.text.trim()) || []
    
    // 生成随机颜色（如果没有上传图片）
-    const colors = ['#7c3aed', '#10b981', '#f59e0b', '#3b82f6', '#ef4444', '#6366f1', '#14b8a6']
+    const colors = ['#0055AA', '#10b981', '#f59e0b', '#3b82f6', '#ef4444', '#6366f1', '#14b8a6']
    const randomColor = colors[Math.floor(Math.random() * colors.length)]
    
    emit('save', {
--- a/urbanLifelineWeb/packages/platform/src/views/public/Chat/AIChatView.scss
+++ b/urbanLifelineWeb/packages/platform/src/views/public/Chat/AIChatView.scss
@@ -49,8 +49,8 @@
        
        &:hover {
            background: #f3f4f6;
-            border-color: #7c3aed;
-            color: #7c3aed;
+            border-color: #0055AA;
+            color: #0055AA;
        }
    }
    
@@ -71,7 +71,7 @@
        
        &:hover {
            background: #f3f4f6;
-            color: #7c3aed;
+            color: #0055AA;
        }
    }
    
@@ -172,7 +172,7 @@
        
        &:hover {
            background: #f3f4f6;
-            color: #7c3aed;
+            color: #0055AA;
        }
        
        .agent-icon {
@@ -187,8 +187,8 @@
 }

 :deep(.el-dropdown-menu__item.is-active) {
-    background: rgba(124, 58, 237, 0.1);
-    color: #7c3aed;
+    background: rgba(0, 85, 170, 0.1);
+    color: #0055AA;
 }

 .chat-content {
@@ -221,7 +221,7 @@
                align-items: flex-end;
                
                .message-text {
-                    background: #7c3aed;
+                    background: #0055AA;
                    color: #fff;
                }
            }
@@ -362,7 +362,7 @@
            .send-btn {
                width: 36px;
                height: 36px;
-                background: #7c3aed;
+                background: #0055AA;
                border-radius: 8px;
                display: flex;
                align-items: center;
@@ -373,7 +373,7 @@
                cursor: pointer;
                
                &:hover:not(:disabled) {
-                    background: #5b21b6;
+                    background: #004488;
                }
                
                &:disabled {
--- a/urbanLifelineWeb/packages/platform/src/views/public/Chat/components/ChatDefault/ChatDefault.scss
+++ b/urbanLifelineWeb/packages/platform/src/views/public/Chat/components/ChatDefault/ChatDefault.scss
@@ -55,8 +55,8 @@
        transition: all 0.2s ease;
        
        &:hover {
-            border-color: #7c3aed;
-            box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
+            border-color: #0055AA;
+            box-shadow: 0 4px 12px rgba(0, 85, 170, 0.15);
            transform: translateY(-2px);
        }