From fdd689daf5cf4c2083e6160d932d70e91bad46e1 Mon Sep 17 00:00:00 2001
From: BirtYu <714851131@qq.com>
Date: 星期日, 13 四月 2025 22:51:38 +0800
Subject: [PATCH] Merge pull request #59 from zhitan-cloud/jiayu1.0
---
zhitan-vue/src/assets/styles/sidebar.scss | 5
zhitan-vue/src/layout/components/AppMain.vue | 5
zhitan-vue/src/layout/components/Sidebar/SidebarItem.vue | 106 ++++++++
zhitan-vue/src/layout/components/TagsView/index.vue | 152 +++--------
zhitan-vue/src/store/modules/permission.js | 30 ++
zhitan-vue/src/components/TopNav/index.vue | 103 ++++++-
zhitan-vue/src/layout/components/Sidebar/index.vue | 165 ++++++++++-
zhitan-vue/src/layout/components/TagsView/ScrollPane.vue | 2
zhitan-vue/src/layout/index.vue | 25 +
zhitan-vue/src/permission.js | 129 +++++++++
zhitan-vue/src/router/index.js | 8
11 files changed, 549 insertions(+), 181 deletions(-)
diff --git a/zhitan-vue/src/assets/styles/sidebar.scss b/zhitan-vue/src/assets/styles/sidebar.scss
index 297e8e4..52245c0 100644
--- a/zhitan-vue/src/assets/styles/sidebar.scss
+++ b/zhitan-vue/src/assets/styles/sidebar.scss
@@ -13,6 +13,7 @@
.main-container {
+ background-color: #110f2e !important;
height: 100%;
transition: margin-left 0.28s;
margin-left: $base-sidebar-width;
@@ -28,7 +29,7 @@
transition: width 0.28s;
width: $base-sidebar-width !important;
background-color: $base-menu-background;
- height: 100%;
+ height: calc(100% - 60px) !important;
position: fixed;
top: 60px;
bottom: 0;
@@ -321,7 +322,7 @@
transition: width 0.28s;
width: $base-sidebar-width !important;
background-color: $base-menu-background;
- height: 100%;
+ height: calc(100% - 60px) !important;
position: fixed;
top: 60px;
bottom: 0;
diff --git a/zhitan-vue/src/components/TopNav/index.vue b/zhitan-vue/src/components/TopNav/index.vue
index 7c42971..774132d 100644
--- a/zhitan-vue/src/components/TopNav/index.vue
+++ b/zhitan-vue/src/components/TopNav/index.vue
@@ -135,6 +135,28 @@
setTimeout(updateScrollButtons, 300);
}
+/**
+ * 鏌ユ壘鏈�娣卞眰鐨勫瓙鑿滃崟锛堝彾瀛愯妭鐐癸級
+ * 閫掑綊鏌ユ壘绗竴涓病鏈塩hildren鐨勫瓙鑿滃崟
+ */
+function findDeepestLeafMenu(route) {
+ if (!route) return null;
+
+ // 濡傛灉娌℃湁瀛愯彍鍗曟垨瀛愯彍鍗曚负绌猴紝鍒欒繑鍥炲綋鍓嶈矾鐢�
+ if (!route.children || route.children.length === 0) {
+ return route;
+ }
+
+ // 鎵惧埌绗竴涓潪闅愯棌鐨勫瓙鑿滃崟
+ const firstVisibleChild = route.children.find(child => !child.hidden);
+ if (!firstVisibleChild) {
+ return route; // 濡傛灉鎵�鏈夊瓙鑿滃崟閮芥槸闅愯棌鐨勶紝杩斿洖褰撳墠璺敱
+ }
+
+ // 閫掑綊鏌ユ壘杩欎釜瀛愯彍鍗曠殑鏈�娣卞眰瀛愯彍鍗�
+ return findDeepestLeafMenu(firstVisibleChild);
+}
+
function handleSelect(key, keyPath) {
currentIndex.value = key;
const route = routers.value.find(item => item.path === key);
@@ -145,23 +167,76 @@
return;
}
- if (key === '/index' || key === '/') {
- // 棣栭〉鏃舵樉绀烘姌鍙犵殑渚ц竟鏍忥紝鑰屼笉鏄殣钘�
- router.push({ path: key });
- appStore.showCollapsedSidebar();
- return;
- }
+
// 妫�鏌ユ槸鍚︽湁瀛愯矾鐢�
if (route && route.children && route.children.length > 0) {
// 鏈夊瓙璺敱锛屾樉绀轰晶杈规爮
activeRoutes(key);
- const firstChild = route.children[0];
- const path = firstChild.path.startsWith('/') ? firstChild.path : `${key}/${firstChild.path}`;
- if (firstChild.query) {
- router.push({ path, query: firstChild.query });
+
+ // 鎸夌収姝ｇ‘鐨勮矾寰勬瀯寤哄眰绾э紝杩欓噷鏄壒娈婂鐞�
+ let targetPath = key; // 浠庡綋鍓嶇偣鍑荤殑鑿滃崟璺緞寮�濮�
+ let targetQuery = null;
+ let currentNode = route;
+ let pathSegments = [];
+
+ // 褰撳墠璺緞鏄涓�娈�
+ pathSegments.push(currentNode.path);
+
+ // 閫愬眰娣诲姞瀛愯矾寰�
+ while (currentNode.children && currentNode.children.length > 0) {
+ const firstChild = currentNode.children.find(child => !child.hidden);
+ if (!firstChild) break;
+
+ // 璺宠繃ParentView绫诲瀷鐨勪腑闂磋妭鐐癸紝鐩存帴浣跨敤鍏跺瓙鑺傜偣鐨刾ath
+ if (firstChild.component === 'ParentView' || firstChild.component.name === 'ParentView') {
+ currentNode = firstChild;
+ pathSegments.push(firstChild.path);
+ continue;
+ }
+
+ // 鏅�氳妭鐐瑰鐞�
+ currentNode = firstChild;
+ // 濡傛灉璺緞涓嶆槸浠�/寮�澶达紝鍒欐坊鍔犲埌璺緞鐗囨涓�
+ if (!firstChild.path.startsWith('/')) {
+ pathSegments.push(firstChild.path);
+ } else {
+ // 濡傛灉鏄粷瀵硅矾寰勶紝鍒欐浛鎹箣鍓嶆墍鏈夎矾寰�
+ pathSegments = [firstChild.path];
+ }
+
+ targetQuery = firstChild.query;
+
+ // 濡傛灉鍒拌揪鍙跺瓙鑺傜偣锛堟病鏈夊瓙鑺傜偣锛夛紝鍒欑粨鏉熸煡鎵�
+ if (!firstChild.children || firstChild.children.length === 0) {
+ break;
+ }
+ }
+
+ // 鏋勫缓鏈�缁堣矾寰�
+ if (pathSegments.length > 0) {
+ // 濡傛灉绗竴娈典笉鏄互/寮�澶达紝娣诲姞/
+ if (!pathSegments[0].startsWith('/')) {
+ pathSegments[0] = '/' + pathSegments[0];
+ }
+
+ // 缁勫悎璺緞 - 鎶婃暟缁勪腑鎵�鏈夎矾寰勬嫾鎺ヨ捣鏉ワ紝濡傛灉鏌愭鍖呭惈瀹屾暣璺緞锛堜互/寮�澶达級鍒欎粠璇ユ閲嶆柊寮�濮�
+ targetPath = pathSegments.reduce((fullPath, segment, index) => {
+ if (segment.startsWith('/')) {
+ return segment;
+ } else if (index === 0) {
+ return segment;
+ } else {
+ return `${fullPath}/${segment}`;
+ }
+ });
+ }
+
+ // 瀵艰埅鍒扮洰鏍囪矾鐢�
+ if (targetQuery) {
+ router.push({ path: targetPath, query: targetQuery });
} else {
- router.push({ path });
+ router.push({ path: targetPath });
}
} else {
// 娌℃湁瀛愯矾鐢憋紝闅愯棌渚ц竟鏍�
@@ -178,11 +253,7 @@
function activeRoutes(key) {
let routes = [];
- if (key === '/index' || key === '/') {
- // 棣栭〉鏃舵樉绀烘姌鍙犵殑渚ц竟鏍忥紝鑰屼笉鏄殣钘�
- appStore.showCollapsedSidebar();
- return [];
- }
+
// 鏌ユ壘鍖归厤鐨勮矾鐢�
if (childrenMenus.value && childrenMenus.value.length > 0) {
diff --git a/zhitan-vue/src/layout/components/AppMain.vue b/zhitan-vue/src/layout/components/AppMain.vue
index fb2159e..220b6cc 100644
--- a/zhitan-vue/src/layout/components/AppMain.vue
+++ b/zhitan-vue/src/layout/components/AppMain.vue
@@ -29,6 +29,7 @@
background: #110f2e;
padding: 14px;
box-sizing: border-box;
+ padding-top: 8px;
}
.fixed-header + .app-main {
@@ -42,7 +43,7 @@
}
.fixed-header + .app-main {
- padding-top: 130px;
+ padding-top: 108px; /* 60px(navbar) + 34px(tagsview) + 14px(鍐呰竟璺�) */
}
}
}
@@ -70,7 +71,7 @@
}
.fixed-header + .app-main {
- padding-top: 130px;
+ padding-top: 108px; /* 60px(navbar) + 34px(tagsview) + 14px(鍐呰竟璺�) */
}
}
}
diff --git a/zhitan-vue/src/layout/components/Sidebar/SidebarItem.vue b/zhitan-vue/src/layout/components/Sidebar/SidebarItem.vue
index 73346ce..7b468d2 100644
--- a/zhitan-vue/src/layout/components/Sidebar/SidebarItem.vue
+++ b/zhitan-vue/src/layout/components/Sidebar/SidebarItem.vue
@@ -9,7 +9,7 @@
</app-link>
</template>
- <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
+ <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported @click="handleSubMenuClick">
<template v-if="item.meta" #title>
<svg-icon :icon-class="item.meta && item.meta.icon" />
<span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>
@@ -31,6 +31,9 @@
import { isExternal } from '@/utils/validate'
import AppLink from './Link'
import { getNormalPath } from '@/utils/ruoyi'
+import { useRouter } from 'vue-router'
+
+const router = useRouter();
const props = defineProps({
// route object
@@ -50,6 +53,100 @@
const onlyOneChild = ref({});
+/**
+ * 鏌ユ壘鏈�娣卞眰鐨勫瓙鑿滃崟锛堝彾瀛愯妭鐐癸級
+ * 閫掑綊鏌ユ壘绗竴涓病鏈塩hildren鐨勫瓙鑿滃崟
+ */
+function findDeepestLeafMenu(route) {
+ if (!route) return null;
+
+ // 濡傛灉娌℃湁瀛愯彍鍗曟垨瀛愯彍鍗曚负绌猴紝鍒欒繑鍥炲綋鍓嶈矾鐢�
+ if (!route.children || route.children.length === 0) {
+ return route;
+ }
+
+ // 鎵惧埌绗竴涓潪闅愯棌鐨勫瓙鑿滃崟
+ const firstVisibleChild = route.children.find(child => !child.hidden);
+ if (!firstVisibleChild) {
+ return route; // 濡傛灉鎵�鏈夊瓙鑿滃崟閮芥槸闅愯棌鐨勶紝杩斿洖褰撳墠璺敱
+ }
+
+ // 閫掑綊鏌ユ壘杩欎釜瀛愯彍鍗曠殑鏈�娣卞眰瀛愯彍鍗�
+ return findDeepestLeafMenu(firstVisibleChild);
+}
+
+// 澶勭悊瀛愯彍鍗曠偣鍑�
+function handleSubMenuClick(e) {
+ // 闃绘浜嬩欢鍐掓场
+ e.stopPropagation();
+
+ // 濡傛灉鐐瑰嚮鐨勬槸瀛愯彍鍗曟爣棰橈紝鍒欒嚜鍔ㄥ鑸埌鏈�娣卞眰鐨勫瓙鑿滃崟
+ if (e.target.closest('.el-sub-menu__title')) {
+ // 鎸夌収姝ｇ‘鐨勮矾寰勬瀯寤哄眰绾�
+ let currentNode = props.item;
+ let pathSegments = [];
+
+ // 棣栧厛娣诲姞褰撳墠鑺傜偣鐨勮矾寰�
+ if (currentNode.path) {
+ pathSegments.push(currentNode.path);
+ }
+
+ // 閫愬眰娣诲姞瀛愯矾寰�
+ while (currentNode.children && currentNode.children.length > 0) {
+ const firstChild = currentNode.children.find(child => !child.hidden);
+ if (!firstChild) break;
+
+ // 璺宠繃ParentView绫诲瀷鐨勪腑闂磋妭鐐�
+ if (firstChild.component === 'ParentView' || firstChild.component.name === 'ParentView') {
+ currentNode = firstChild;
+ pathSegments.push(firstChild.path);
+ continue;
+ }
+
+ // 鏅�氳妭鐐瑰鐞�
+ currentNode = firstChild;
+ // 濡傛灉璺緞涓嶆槸浠�/寮�澶达紝鍒欐坊鍔犲埌璺緞鐗囨涓�
+ if (!firstChild.path.startsWith('/')) {
+ pathSegments.push(firstChild.path);
+ } else {
+ // 濡傛灉鏄粷瀵硅矾寰勶紝鍒欐浛鎹箣鍓嶆墍鏈夎矾寰�
+ pathSegments = [firstChild.path];
+ }
+
+ // 濡傛灉鍒拌揪鍙跺瓙鑺傜偣锛屽垯缁撴潫鏌ユ壘
+ if (!firstChild.children || firstChild.children.length === 0) {
+ break;
+ }
+ }
+
+ // 鏋勫缓鏈�缁堣矾寰�
+ if (pathSegments.length > 0) {
+ // 濡傛灉绗竴娈典笉鏄互/寮�澶达紝娣诲姞/
+ if (!pathSegments[0].startsWith('/')) {
+ pathSegments[0] = '/' + pathSegments[0];
+ }
+
+ // 缁勫悎璺緞
+ const targetPath = pathSegments.reduce((fullPath, segment, index) => {
+ if (segment.startsWith('/')) {
+ return segment;
+ } else if (index === 0) {
+ return segment;
+ } else {
+ return `${fullPath}/${segment}`;
+ }
+ });
+
+ // 瀵艰埅鍒扮洰鏍囪矾鐢憋紝濡傛灉鏈夋煡璇㈠弬鏁板垯娣诲姞
+ if (currentNode.query) {
+ router.push({ path: targetPath, query: currentNode.query });
+ } else {
+ router.push({ path: targetPath });
+ }
+ }
+ }
+}
+
function hasOneShowingChild(children = [], parent) {
if (!children) {
children = [];
@@ -65,10 +162,15 @@
})
// When there is only one child router, the child router is displayed by default
- if (showingChildren.length === 1) {
+ if (showingChildren.length === 1 && !showingChildren[0].children) {
return true
}
+ // If the single child also has children, don't treat it as a single showing child
+ if (showingChildren.length === 1 && showingChildren[0].children && showingChildren[0].children.length > 0) {
+ return false
+ }
+
// Show parent if there are no child router to display
if (showingChildren.length === 0) {
onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
diff --git a/zhitan-vue/src/layout/components/Sidebar/index.vue b/zhitan-vue/src/layout/components/Sidebar/index.vue
index 68596a6..658fc19 100644
--- a/zhitan-vue/src/layout/components/Sidebar/index.vue
+++ b/zhitan-vue/src/layout/components/Sidebar/index.vue
@@ -5,9 +5,8 @@
class="sidebar-container-wrapper"
>
<el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper" view-class="scrollbar-view">
- <!-- 棣栭〉鏃朵笉鏄剧ず浠讳綍鑿滃崟椤� -->
+ <!-- 濮嬬粓鏄剧ず鑿滃崟椤癸紝涓嶅啀鏍规嵁璺緞鍒ゆ柇 -->
<el-menu
- v-if="!isHomePage"
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="'transparent'"
@@ -18,15 +17,24 @@
mode="vertical"
class="custom-menu"
>
- <sidebar-item
- v-for="(route, index) in sidebarRouters"
- :key="route.path + index"
- :item="route"
- :base-path="route.path"
- />
+ <!-- 褰撳墠鏄椤电湅鏉垮瓙璺敱鏃讹紝娓叉煋涓撶敤璺敱 -->
+ <template v-if="isIndexSubRoute">
+ <sidebar-item
+ v-for="(route, index) in indexPageRouters"
+ :key="route.path + index"
+ :item="route"
+ :base-path="route.path"
+ />
+ </template>
+ <template v-else>
+ <sidebar-item
+ v-for="(route, index) in sidebarRouters"
+ :key="route.path + index"
+ :item="route"
+ :base-path="route.path"
+ />
+ </template>
</el-menu>
- <!-- 棣栭〉鏃剁殑绌虹櫧鍖哄煙 -->
- <div v-else class="home-empty-menu"></div>
</el-scrollbar>
<!-- 搴曢儴鐢ㄦ埛鍖哄煙 -->
@@ -95,19 +103,21 @@
const sidebarRouters = computed(() => permissionStore.sidebarRouters)
-// 鍒ゆ柇褰撳墠鏄惁涓洪椤�
-const isHomePage = computed(() => {
- return route.path === '/index' || route.path === '/' || route.fullPath.startsWith('/index')
+// 鍒ゆ柇褰撳墠鏄惁涓洪椤靛瓙璺敱(/index/index)
+const isIndexSubRoute = computed(() => {
+ return route.path === '/index/index'
})
-// 棣栭〉涓撶敤璺敱锛屽彧鏈夐椤典竴涓彍鍗曢」
-const homePageRouters = computed(() => {
- // 浠庡師濮嬭矾鐢变腑绛涢�夊嚭棣栭〉璺敱
- const homeRoute = sidebarRouters.value.find(route => {
- return route.children && route.children.find(child => child.path === '/index')
- })
-
- return homeRoute ? [homeRoute] : []
+// 鍒ゆ柇褰撳墠鏄惁涓轰富棣栭〉璺敱(/index鎴�/)
+const isMainIndexRoute = computed(() => {
+ return route.path === '/index' || route.path === '/'
+})
+
+// 棣栭〉涓撶敤璺敱锛岄椤电湅鏉跨浉鍏宠彍鍗�
+const indexPageRouters = computed(() => {
+ // 鏌ユ壘name涓篒ndex鐨勮矾鐢�
+ const indexRoute = sidebarRouters.value.find(route => route.name === 'Index')
+ return indexRoute ? [indexRoute] : []
})
const showLogo = computed(() => settingsStore.sidebarLogo)
@@ -162,12 +172,13 @@
}
:deep(.scrollbar-wrapper) {
- height: calc(100% - 290px) !important;
+ height: calc(100% - 220px) !important;
overflow-x: hidden !important;
}
:deep(.scrollbar-view) {
height: 100%;
+ padding-bottom: 20px;
}
:deep(.el-scrollbar__bar.is-vertical) {
@@ -200,6 +211,12 @@
&.is-active {
background-color: #3883FA !important;
color: #fff !important;
+ font-weight: bold;
+ position: relative;
+ box-shadow: 0 2px 8px rgba(56, 131, 250, 0.5);
+
+ // 宸︿晶鎸囩ず鏉�
+
}
&:hover {
@@ -221,6 +238,13 @@
}
}
+ &.is-active {
+ > .el-sub-menu__title {
+ color: #3883FA !important;
+ font-weight: bold;
+ }
+ }
+
.el-menu-item {
padding-left: 45px !important;
min-width: auto !important;
@@ -237,6 +261,28 @@
height: 38px !important;
line-height: 38px !important;
}
+
+ // Add styling for deeply nested submenus (level 3+)
+ .el-sub-menu {
+ .el-menu-item {
+ padding-left: 65px !important;
+
+ &.is-active {
+ padding-left: 65px !important;
+ }
+ }
+
+ // Level 4
+ .el-menu {
+ .el-menu-item {
+ padding-left: 85px !important;
+
+ &.is-active {
+ padding-left: 85px !important;
+ }
+ }
+ }
+ }
}
}
}
@@ -250,7 +296,7 @@
// 搴曢儴鐢ㄦ埛鍖哄煙鏍峰紡
.sidebar-footer {
position: absolute;
- bottom: 72px;
+ bottom: 0;
left: 0;
width: 100%;
border-top: 1px solid rgba(255, 255, 255, 0.1);
@@ -425,6 +471,62 @@
}
}
+// 娣诲姞娣辫壊妯″紡涓撶敤鏍峰紡
+.theme-dark {
+ :deep(.custom-menu) {
+ // Override Element Plus menu styles for dark theme
+ .el-menu-item {
+ &.is-active {
+ background-color: #4e77f8 !important;
+ color: #ffffff !important;
+ font-weight: bold;
+ box-shadow: 0 2px 10px rgba(78, 119, 248, 0.6);
+ position: relative;
+
+ // 宸︿晶鎸囩ず鏉�
+
+ }
+
+ &:hover {
+ background-color: rgba(78, 119, 248, 0.2) !important;
+ }
+ }
+
+ .el-sub-menu {
+ &.is-active {
+ > .el-sub-menu__title {
+ color: #4e77f8 !important;
+ font-weight: bold;
+ }
+ }
+
+ .el-sub-menu__title {
+ &:hover {
+ background-color: rgba(78, 119, 248, 0.2) !important;
+ }
+ }
+
+ // 宓屽瀛愯彍鍗曟牱寮�
+ .el-menu {
+ .el-menu-item {
+ &.is-active {
+ background-color: #4e77f8 !important;
+ color: #ffffff !important;
+ }
+ }
+
+ .el-sub-menu {
+ &.is-active {
+ > .el-sub-menu__title {
+ color: #4e77f8 !important;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
// Add global style to override Element Plus defaults
:global(.el-menu--vertical .el-menu-item),
:global(.el-menu--vertical .el-sub-menu__title) {
@@ -475,4 +577,21 @@
outline: none;
}
}
+
+// 娣辫壊妯″紡涓嬫姌鍙犺彍鍗曠殑鏍峰紡
+.theme-dark {
+ :deep(.custom-menu.el-menu--collapse) {
+ .el-menu-item, .el-sub-menu__title {
+ &.is-active {
+ background-color: #4e77f8 !important;
+ color: #ffffff !important;
+ box-shadow: 0 2px 8px rgba(78, 119, 248, 0.6);
+ }
+
+ &:hover {
+ background-color: rgba(78, 119, 248, 0.2) !important;
+ }
+ }
+ }
+}
</style>
diff --git a/zhitan-vue/src/layout/components/TagsView/ScrollPane.vue b/zhitan-vue/src/layout/components/TagsView/ScrollPane.vue
index 516b5d2..8af4525 100644
--- a/zhitan-vue/src/layout/components/TagsView/ScrollPane.vue
+++ b/zhitan-vue/src/layout/components/TagsView/ScrollPane.vue
@@ -99,7 +99,7 @@
bottom: 0px;
}
:deep(.el-scrollbar__wrap) {
- height: 39px;
+ height: 34px !important;
}
}
</style>
\ No newline at end of file
diff --git a/zhitan-vue/src/layout/components/TagsView/index.vue b/zhitan-vue/src/layout/components/TagsView/index.vue
index 2041c96..7688967 100644
--- a/zhitan-vue/src/layout/components/TagsView/index.vue
+++ b/zhitan-vue/src/layout/components/TagsView/index.vue
@@ -232,119 +232,49 @@
</script>
<style lang="scss" scoped>
-.themeDark {
- .tags-view-container {
- height: 52px;
- width: 100%;
- background: #1a235d;
- // border-bottom: 1px solid #d8dce5;
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
- .tags-view-wrapper {
- .tags-view-item {
- display: inline-block;
- position: relative;
- cursor: pointer;
- height: 32px;
- line-height: 30px;
- border: 1px solid #5278f5;
- color: #fff;
- // background: #3271eb;
- padding: 0 12px;
- font-size: 14px;
- margin-left: 6px;
- margin-top: 10px;
- border-radius: 4px;
- font-family: OPPOSans, OPPOSans;
- &:first-of-type {
- margin-left: 16px;
- }
- &:last-of-type {
- margin-right: 15px;
- }
- &.active {
- background-color: #4e77f8 !important;
- color: #fff;
- border-color: #4e77f8 !important;
- &::before {
- content: "";
- background: #fff;
- display: inline-block;
- width: 8px;
- height: 8px;
- border-radius: 50%;
- position: relative;
- margin-right: 5px;
- }
- }
- }
- }
- .contextmenu {
- margin: 0;
+.tags-view-container {
+ height: 34px;
+ width: calc(100% - 42px);
+ margin-top: 10px;
+ margin-left: 14px;
+ box-sizing: border-box;
+ // 娣诲姞姘村钩鍐呰竟璺濅笌app-main鐨勫唴杈硅窛涓�鑷�
+ background: #0A3465;
+
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+ .tags-view-wrapper {
+ .tags-view-item {
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ height: 26px;
+ line-height: 26px;
+ border: 1px solid #d8dce5;
+ color: #495060;
background: #fff;
- z-index: 3000;
- position: absolute;
- list-style-type: none;
- padding: 5px 0;
- border-radius: 4px;
+ padding: 0 8px;
font-size: 12px;
- font-weight: 400;
- color: #333;
- box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
- li {
- margin: 0;
- padding: 7px 16px;
- cursor: pointer;
- &:hover {
- background: #eee;
- }
+ margin-left: 5px;
+ margin-top: 4px;
+ &:first-of-type {
+ margin-left: 5px;
}
- }
- }
-}
-
-.themeLight {
- .tags-view-container {
- height: 52px;
- width: 100%;
- background: #fff;
- // border-bottom: 1px solid #d8dce5;
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
- .tags-view-wrapper {
- .tags-view-item {
- display: inline-block;
- position: relative;
- cursor: pointer;
- height: 32px;
- line-height: 30px;
- border: 1px solid #d8dce5;
- color: #495060;
- background: #fff;
- padding: 0 12px;
- font-size: 14px;
- margin-left: 6px;
- margin-top: 10px;
- border-radius: 4px;
- font-family: OPPOSans, OPPOSans;
- &:first-of-type {
- margin-left: 16px;
- }
- &:last-of-type {
- margin-right: 15px;
- }
- &.active {
- background-color: #42b983;
- color: #fff;
- border-color: #42b983;
- &::before {
- content: "";
- background: #fff;
- display: inline-block;
- width: 8px;
- height: 8px;
- border-radius: 50%;
- position: relative;
- margin-right: 5px;
- }
+ &:last-of-type {
+ margin-right: 5px;
+ }
+ &.active {
+ background-color: #42b983;
+ color: #fff;
+ border-color: #42b983;
+ &::before {
+ content: "";
+ background: #fff;
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ position: relative;
+ margin-right: 2px;
}
}
}
@@ -401,6 +331,6 @@
}
.scroll-container .el-scrollbar__wrap {
- height: 50px !important;
+ height: 34px !important;
}
</style>
diff --git a/zhitan-vue/src/layout/index.vue b/zhitan-vue/src/layout/index.vue
index 7cb8e3e..90aaa04 100644
--- a/zhitan-vue/src/layout/index.vue
+++ b/zhitan-vue/src/layout/index.vue
@@ -119,21 +119,26 @@
// 鐩戝惉璺敱鍙樺寲锛屽鐞嗛椤电殑渚ц竟鏍忔樉绀�
watchEffect(() => {
- // 妫�鏌ユ槸鍚︽槸棣栭〉璺敱
- if (route.path === '/index' || route.path === '/') {
+ // 妫�鏌ユ槸鍚︽槸棣栭〉璺敱锛屼絾鎺掗櫎/index/index瀛愯矾鐢�
+ if ((route.path === '/index' || route.path === '/') && route.path !== '/index/index') {
// 棣栭〉璺敱锛岀‘淇濅晶杈规爮涓嶉殣钘忥紝浣嗙姸鎬佹槸鎶樺彔鐨�
- appStore.showCollapsedSidebar()
+ appStore.toggleSideBarHide(false) // 鏀逛负涓嶉殣钘忎晶杈规爮
} else if (route.meta && route.meta.showSidebar === false) {
// 濡傛灉璺敱鏄庣‘鎸囧畾闅愯棌渚ц竟鏍�
appStore.toggleSideBarHide(true)
+ } else {
+ // 鍏朵粬璺敱锛岀‘淇濅晶杈规爮鍙
+ appStore.toggleSideBarHide(false)
}
})
// 缁勪欢鎸傝浇鏃讹紝纭繚棣栭〉渚ц竟鏍忕姸鎬佹纭�
onMounted(() => {
- // 濡傛灉褰撳墠鏄椤碉紝纭繚渚ц竟鏍忔槸鎶樺彔鐨勮�屼笉鏄殣钘忕殑
- if (route.path === '/index' || route.path === '/') {
- appStore.showCollapsedSidebar()
+ // 濡傛灉褰撳墠鏄椤靛瓙椤甸潰锛屽彧纭繚渚ц竟鏍忎笉琚殣钘忥紝浣嗕繚鎸佹姌鍙�/灞曞紑鐘舵�佷笉鍙�
+ if (route.path === '/index/index') {
+ // 鍙缃笉闅愯棌渚ц竟鏍忥紝浣嗕笉鏀瑰彉鍏跺睍寮�/鎶樺彔鐘舵��
+ appStore.toggleSideBarHide(false)
+ // 涓嶅啀寮哄埗璁剧疆opened涓簍rue锛屼繚鎸佺敤鎴蜂箣鍓嶇殑璁剧疆
}
})
@@ -306,13 +311,19 @@
top: 60px;
right: 0;
z-index: 9;
- width: 100%;
+ width: calc(100% - #{$base-sidebar-width});
transition: width 0.28s;
display: flex;
flex-direction: column;
+ box-sizing: border-box;
+ padding: 0;
}
.hideSidebar .fixed-header {
+ width: calc(100% - 54px);
+}
+
+.sidebarHide .fixed-header {
width: 100%;
}
diff --git a/zhitan-vue/src/permission.js b/zhitan-vue/src/permission.js
index a521d95..7fc2c80 100644
--- a/zhitan-vue/src/permission.js
+++ b/zhitan-vue/src/permission.js
@@ -14,6 +14,75 @@
const whiteList = ['/login', '/register', '/energy']
+/**
+ * 鏌ユ壘鏈�娣卞眰鐨勫瓙鑿滃崟骞舵瀯寤哄畬鏁磋矾寰�
+ */
+function findDeepestPath(route) {
+ if (!route) return { path: null, query: null };
+
+ // 棣栧厛娣诲姞褰撳墠鑺傜偣鐨勮矾寰�
+ let currentNode = route;
+ let pathSegments = [];
+
+ if (currentNode.path) {
+ pathSegments.push(currentNode.path);
+ }
+
+ // 閫愬眰娣诲姞瀛愯矾寰�
+ while (currentNode.children && currentNode.children.length > 0) {
+ const firstChild = currentNode.children.find(child => !child.hidden);
+ if (!firstChild) break;
+
+ // 璺宠繃ParentView绫诲瀷鐨勪腑闂磋妭鐐�
+ if (firstChild.component === 'ParentView' ||
+ (typeof firstChild.component === 'object' && firstChild.component.name === 'ParentView')) {
+ currentNode = firstChild;
+ pathSegments.push(firstChild.path);
+ continue;
+ }
+
+ // 鏅�氳妭鐐瑰鐞�
+ currentNode = firstChild;
+ // 濡傛灉璺緞涓嶆槸浠�/寮�澶达紝鍒欐坊鍔犲埌璺緞鐗囨涓�
+ if (!firstChild.path.startsWith('/')) {
+ pathSegments.push(firstChild.path);
+ } else {
+ // 濡傛灉鏄粷瀵硅矾寰勶紝鍒欐浛鎹箣鍓嶆墍鏈夎矾寰�
+ pathSegments = [firstChild.path];
+ }
+
+ // 濡傛灉鍒拌揪鍙跺瓙鑺傜偣锛屽垯缁撴潫鏌ユ壘
+ if (!firstChild.children || firstChild.children.length === 0) {
+ break;
+ }
+ }
+
+ // 鏋勫缓鏈�缁堣矾寰�
+ let targetPath = '';
+ if (pathSegments.length > 0) {
+ // 濡傛灉绗竴娈典笉鏄互/寮�澶达紝娣诲姞/
+ if (!pathSegments[0].startsWith('/')) {
+ pathSegments[0] = '/' + pathSegments[0];
+ }
+
+ // 缁勫悎璺緞
+ targetPath = pathSegments.reduce((fullPath, segment, index) => {
+ if (segment.startsWith('/')) {
+ return segment;
+ } else if (index === 0) {
+ return segment;
+ } else {
+ return `${fullPath}/${segment}`;
+ }
+ });
+ }
+
+ return {
+ path: targetPath,
+ query: currentNode.query
+ };
+}
+
router.beforeEach((to, from, next) => {
NProgress.start()
if (getToken()) {
@@ -45,11 +114,23 @@
if (topMenus.length > 0) {
// 璺宠浆鍒扮涓�涓彍鍗�
const firstMenu = topMenus[0]
- if (firstMenu.children && firstMenu.children.length > 0) {
- // 鏈夊瓙鑿滃崟锛岃烦杞埌绗竴涓瓙鑿滃崟
+
+ // 鏌ユ壘鏈�娣卞眰鐨勫瓙鑿滃崟骞舵瀯寤鸿矾寰�
+ const { path, query } = findDeepestPath(firstMenu);
+
+ if (path) {
+ // 鏈夋渶娣卞眰瀛愯彍鍗曪紝璺宠浆鍒拌鑿滃崟
+ if (query) {
+ next({ path, query, replace: true });
+ } else {
+ next({ path, replace: true });
+ }
+ return;
+ } else if (firstMenu.children && firstMenu.children.length > 0) {
+ // 浣跨敤鍘熸湁閫昏緫
const firstChild = firstMenu.children[0]
- const path = firstMenu.path.endsWith('/') ? firstMenu.path + firstChild.path : `${firstMenu.path}/${firstChild.path}`
- next({ path: path, replace: true })
+ const childPath = firstMenu.path.endsWith('/') ? firstMenu.path + firstChild.path : `${firstMenu.path}/${firstChild.path}`
+ next({ path: childPath, replace: true })
return
} else {
// 娌℃湁瀛愯彍鍗曪紝鐩存帴璺宠浆
@@ -75,11 +156,23 @@
if (topMenus.length > 0) {
// 璺宠浆鍒扮涓�涓彍鍗�
const firstMenu = topMenus[0]
- if (firstMenu.children && firstMenu.children.length > 0) {
- // 鏈夊瓙鑿滃崟锛岃烦杞埌绗竴涓瓙鑿滃崟
+
+ // 鏌ユ壘鏈�娣卞眰鐨勫瓙鑿滃崟骞舵瀯寤鸿矾寰�
+ const { path, query } = findDeepestPath(firstMenu);
+
+ if (path) {
+ // 鏈夋渶娣卞眰瀛愯彍鍗曪紝璺宠浆鍒拌鑿滃崟
+ if (query) {
+ next({ path, query, replace: true });
+ } else {
+ next({ path, replace: true });
+ }
+ return;
+ } else if (firstMenu.children && firstMenu.children.length > 0) {
+ // 浣跨敤鍘熸湁閫昏緫
const firstChild = firstMenu.children[0]
- const path = firstMenu.path.endsWith('/') ? firstMenu.path + firstChild.path : `${firstMenu.path}/${firstChild.path}`
- next({ path: path, replace: true })
+ const childPath = firstMenu.path.endsWith('/') ? firstMenu.path + firstChild.path : `${firstMenu.path}/${firstChild.path}`
+ next({ path: childPath, replace: true })
return
} else {
// 娌℃湁瀛愯彍鍗曪紝鐩存帴璺宠浆
@@ -88,6 +181,26 @@
}
}
}
+
+ // 鑷姩澶勭悊甯︽湁閲嶅畾鍚戠殑璺敱
+ if (to.matched.length > 0 && to.matched[0].path === to.path) {
+ const currentRouteConfig = router.getRoutes().find(r => r.path === to.path);
+
+ if (currentRouteConfig && currentRouteConfig.children && currentRouteConfig.children.length > 0) {
+ // 鏈夊瓙璺敱锛岃嚜鍔ㄥ鑸埌鏈�娣卞眰瀛愯彍鍗�
+ const { path, query } = findDeepestPath(currentRouteConfig);
+
+ if (path && path !== to.path) {
+ if (query) {
+ next({ path, query, replace: true });
+ } else {
+ next({ path, replace: true });
+ }
+ return;
+ }
+ }
+ }
+
next()
}
}
diff --git a/zhitan-vue/src/router/index.js b/zhitan-vue/src/router/index.js
index 154b3be..42dcb70 100644
--- a/zhitan-vue/src/router/index.js
+++ b/zhitan-vue/src/router/index.js
@@ -67,13 +67,7 @@
path: '/index',
component: () => import('@/views/index'),
name: 'Index',
- meta: { title: '棣栭〉', icon: 'dashboard', affix: true, showSidebar: true, breadcrumb: false },
- beforeEnter: (to, from, next) => {
- // 鑾峰彇app store骞惰缃晶杈规爮涓烘姌鍙犵姸鎬�
- const appStore = useAppStore()
- appStore.showCollapsedSidebar()
- next()
- }
+ meta: { title: '棣栭〉', icon: 'dashboard', affix: true, showSidebar: true, breadcrumb: false }
}
]
},
diff --git a/zhitan-vue/src/store/modules/permission.js b/zhitan-vue/src/store/modules/permission.js
index c9d09e6..4eb8185 100644
--- a/zhitan-vue/src/store/modules/permission.js
+++ b/zhitan-vue/src/store/modules/permission.js
@@ -56,8 +56,27 @@
})
// 閬嶅巻鍚庡彴浼犳潵鐨勮矾鐢卞瓧绗︿覆锛岃浆鎹负缁勪欢瀵硅薄
-function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
+function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false, parentRoute = null) {
return asyncRouterMap.filter(route => {
+ // 涓嶅啀杩囨护鎺夐椤电湅鏉跨浉鍏宠矾鐢�
+ /*
+ // 杩囨护鎺夐椤电湅鏉跨浉鍏宠矾鐢�
+ if (route.name === 'Index' && route.meta && route.meta.title === '棣栭〉鐪嬫澘') {
+ return false;
+ }
+
+ // 濡傛灉鏄椤电湅鏉跨殑瀛愯彍鍗曪紝涔熻繃婊ゆ帀
+ if (route.path === '/index' || route.path === 'index' ||
+ (route.meta && route.meta.title === '棣栭〉鐪嬫澘')) {
+ return false;
+ }
+ */
+
+ // 璁剧疆鐖惰矾鐢卞紩鐢�
+ if (parentRoute) {
+ route.parent = parentRoute;
+ }
+
if (type && route.children) {
route.children = filterChildren(route.children)
}
@@ -82,7 +101,8 @@
}
}
if (route.children != null && route.children && route.children.length) {
- route.children = filterAsyncRouter(route.children, route, type)
+ // 灏嗗綋鍓嶈矾鐢变綔涓虹埗璺敱浼犻�掔粰瀛愯矾鐢�
+ route.children = filterAsyncRouter(route.children, route, type, route)
} else {
delete route['children']
delete route['redirect']
@@ -97,6 +117,9 @@
if (el.children && el.children.length) {
if (el.component === 'ParentView' && !lastRouter) {
el.children.forEach(c => {
+ // 璁剧疆鐖惰矾鐢卞紩鐢�
+ c.parent = el;
+
c.path = el.path + '/' + c.path
if (c.children && c.children.length) {
children = children.concat(filterChildren(c.children, c))
@@ -108,6 +131,9 @@
}
}
if (lastRouter) {
+ // 璁剧疆鐖惰矾鐢卞紩鐢�
+ el.parent = lastRouter;
+
el.path = lastRouter.path + '/' + el.path
if (el.children && el.children.length) {
children = children.concat(filterChildren(el.children, el))
--
Gitblit v1.9.3