样式修改

2025-12-17 15:32:58 +08:00
parent ded3eddc56
commit aa8ce553b0
52 changed files with 3145 additions and 2010 deletions
--- a/urbanLifelineWeb/packages/shared/src/layouts/AdminSidebarLayout/AdminSidebarLayout.scss
+++ b/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;
-        }
-    }
-}
--- a/urbanLifelineWeb/packages/shared/src/layouts/AdminSidebarLayout/AdminSidebarLayout.vue
+++ b/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>