-
-
-
+
+
@@ -23,11 +17,7 @@
diff --git a/src/router/modules/otherRoute/otherRoute.ts b/src/router/modules/otherRoute/otherRoute.ts
index fc270ab0..f6808c71 100644
--- a/src/router/modules/otherRoute/otherRoute.ts
+++ b/src/router/modules/otherRoute/otherRoute.ts
@@ -14,7 +14,7 @@ const safeManagerRoutes: Array
= [
redirect: '/welcome',
name: 'RtHome',
alwaysShow: false,
- meta: { title: '', icon: 'iEL-home-filled' },
+ meta: { title: t('route.pathName.index'), icon: 'iEL-home-filled' },
children: [
{
path: '',
@@ -29,7 +29,6 @@ const safeManagerRoutes: Array = [
component: Layout,
redirect: '/components/form',
name: 'RtComponents',
- alwaysShow: true,
meta: { title: t('route.pathName.components'), icon: 'components' },
children: [
{
@@ -90,7 +89,6 @@ const safeManagerRoutes: Array = [
component: Layout,
redirect: '/echarts/bar',
name: 'RtEcharts',
- alwaysShow: true,
meta: { title: t('route.pathName.echarts'), icon: 'echarts' },
children: [
{
@@ -112,7 +110,6 @@ const safeManagerRoutes: Array = [
component: Layout,
redirect: '/editor/logic-flow',
name: 'RtEditor',
- alwaysShow: true,
meta: { title: t('route.pathName.editor'), icon: 'editor' },
children: [
{
@@ -140,7 +137,6 @@ const safeManagerRoutes: Array = [
component: Layout,
redirect: '/useradmin/userlist',
name: 'RtUseradmin',
- alwaysShow: true,
meta: { title: t('route.pathName.userInfo'), icon: 'iEL-avatar' },
children: [
{
@@ -243,7 +239,6 @@ const safeManagerRoutes: Array = [
component: Layout,
redirect: '/error/404',
name: 'error',
- alwaysShow: true,
meta: { title: 'route.pathName.error', icon: 'iEL-remove-filled' },
children: [
{
@@ -258,6 +253,7 @@ const safeManagerRoutes: Array = [
path: '/external-link',
component: Layout,
name: 'RtExternal',
+ meta: { title: t('route.pathName.thirdParty'), icon: 'link' },
children: [
{
path: 'https://github.com/SuperCuteXiaoSi/xiaosiAdmin',
@@ -272,7 +268,7 @@ const safeManagerRoutes: Array = [
redirect: '/about',
name: 'RtAdminInfo',
alwaysShow: false,
- meta: { title: '', icon: 'about' },
+ meta: { title: t('route.pathName.about'), icon: 'about' },
children: [
{
path: '',
diff --git a/src/router/utils.ts b/src/router/utils.ts
index e018619f..4385be67 100644
--- a/src/router/utils.ts
+++ b/src/router/utils.ts
@@ -77,3 +77,48 @@ export const handleAliveRoute = (matched: RouteRecordNormalized[], mode?: string
}, 100);
}
};
+
+// 通过path获取父级路径
+export const getParentPaths = (path: RouteRecordName, routes: AppRouteRecordRaw[]) => {
+ // 深度遍历查找
+ function dfs(routes: AppRouteRecordRaw[], path: RouteRecordName, parents: string[]) {
+ for (let i = 0; i < routes.length; i++) {
+ const item = routes[i];
+ // 找到path则返回父级path
+ if (item.name === path) return parents;
+ // children不存在或为空则不递归
+ if (!item.children || !item.children.length) continue;
+ // 往下查找时将当前path入栈
+ parents.push(item.path);
+
+ if (dfs(item.children, path, parents).length) return parents;
+ // 深度遍历查找未找到时当前path 出栈
+ parents.pop();
+ }
+ // 未找到时返回空数组
+ return [];
+ }
+
+ return dfs(routes, path, []);
+};
+
+// 查找对应path的路由信息
+export const findRouteByPath: (
+ path: RouteRecordName,
+ routes: AppRouteRecordRaw[],
+) => AppRouteRecordRaw | null = (path, routes) => {
+ let res = routes.find((item: { path: RouteRecordName }) => item.path == path) || null;
+ if (res) {
+ return res;
+ } else {
+ for (let i = 0; i < routes.length; i++) {
+ if (routes[i].children instanceof Array && routes[i].children?.length) {
+ res = findRouteByPath(path, routes[i].children as AppRouteRecordRaw[]);
+ if (res) {
+ return res;
+ }
+ }
+ }
+ return null;
+ }
+};
diff --git a/src/store/types.ts b/src/store/types.ts
index e9d5922a..732afa3d 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -5,9 +5,11 @@ export type AppState = {
appConfigMode: appConfig;
};
+export type SidebarMode = 'vertical' | 'horizontal' | 'blend';
+
export interface appConfig {
collapseMenu: boolean;
- sidebarMode: string;
+ sidebarMode: SidebarMode;
themeMode: string;
locale: string;
}
diff --git a/src/styles/el-theme.scss b/src/styles/el-theme.scss
index ebe9b03c..4853e053 100644
--- a/src/styles/el-theme.scss
+++ b/src/styles/el-theme.scss
@@ -1,7 +1,8 @@
// 左侧导航栏(此地方颜色全部改成自定义)
$sideBarWidth: 210px;
+$sideHideBarWidth: 54px;
$navBarHeight: 57px;
-$BreadcrumbHeight: 50px; //面包屑高度
+$TabsPageHeight: 0; //面包屑高度 38px
$menuBg: var(--main-bg-color); // 侧边栏背景颜色
$menuHover: var(--sub-main-bg-content); // 焦点背景色
@@ -21,5 +22,5 @@ $menuItemActiveBorderLeft: var(--mian-color); //二级左描边背景颜色
$app-main-bg-color: var(--sub-main-bg-content); //app-mian背景颜色
$navBarColor: var(--main-bg-color); //顶部导航栏背景颜色
$navBarBorderBottomColor: var(--text-color-placeholder);
-$BreadcrumbColor: var(--main-bg-color); //面包屑背景颜色
+$TabsPageColor: var(--main-bg-color); //面包屑背景颜色
$BreadcrumbText: var(--text-color-primary); //面包屑文字颜色
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 59072783..4c28db48 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -3,6 +3,25 @@
display: flex;
width: 100vw;
height: 100vh;
+ box-sizing: border-box;
+ }
+
+ .app-logo {
+ width: $sideBarWidth;
+ height: #{$navBarHeight};
+ font-size: 38px;
+ display: flex;
+ align-items: center;
+ // justify-content: center;
+ .logo {
+ width: 54px;
+ text-align: center;
+ }
+ .name {
+ font-size: 22px;
+ font-weight: 500;
+ margin-left: 12px;
+ }
}
.main-container {
@@ -10,24 +29,21 @@
box-sizing: border-box;
flex: 1;
width: calc(100vw - #{$sideBarWidth});
- // width: 100%;
min-height: 100%;
- padding-top: #{$navBarHeight};
- // margin-left: #{$sideBarWidth};
transition: margin-left 0.28s;
- .main-container-breadcrumb {
+ .main-container-tabs {
width: 100%;
- height: #{$BreadcrumbHeight};
+ height: #{$TabsPageHeight};
padding: 0 20px;
- background-color: $BreadcrumbColor;
+ background-color: $TabsPageColor;
}
}
.sidebar-container {
width: $sideBarWidth !important;
- padding: 26px 0;
- margin-top: #{$navBarHeight};
+ // padding: 26px 0;
+ // margin-top: #{$navBarHeight};
overflow: hidden;
font-size: 0;
background-color: $menuBg;
@@ -166,7 +182,7 @@
}
.hideSidebar {
- width: 54px !important;
+ width: $sideHideBarWidth !important;
// .sidebar-container {
// width: 54px !important;
// }
diff --git a/src/views/components/seamless-scroll/index.vue b/src/views/components/seamless-scroll/index.vue
index 4769f7b3..3f258f80 100644
--- a/src/views/components/seamless-scroll/index.vue
+++ b/src/views/components/seamless-scroll/index.vue
@@ -3,10 +3,10 @@
diff --git a/types/route.d.ts b/types/route.d.ts
index bb7b269f..4baf412e 100644
--- a/types/route.d.ts
+++ b/types/route.d.ts
@@ -22,6 +22,7 @@ export interface AppRouteRecordRaw extends Omit {
alias?: string | Array;
alwaysShow?: boolean; //单个路由的时候是否开启折叠
hidden?: boolean;
- children?: Array;
+ children?: AppRouteRecordRaw[];
meta?: Menu;
+ basePath?: string; // 父级路由
}