样式修改
This commit is contained in:
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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';
|
||||
@@ -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. 注册路由
|
||||
|
||||
@@ -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 })
|
||||
}
|
||||
|
||||
// 视图组件加载器
|
||||
|
||||
@@ -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>
|
||||
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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', {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user