1

src/layout/components/Sidebar.vue

@@ -2,7 +2,7 @@
 	<div class="has-logo">
 		<logo :collapse="isCollapse" />
 		<div class="sidebar-box">
-			<div v-for="item in sidebarRouters" :key="item.path" class="sidebar-box-item" @click="test(item)">{{ item.menuName }}</div>
+			<div v-for="item in sidebarRouters" :key="item.path" class="sidebar-box-item" @click="toMainMenu(item)">{{ item.menuName }}</div>
 		</div>
 	</div>
 </template>
@@ -34,8 +34,13 @@ export default {
 		}
 	},
 	methods: {
-		test(e) {
-			console.log(e)
+		toMainMenu(item) {
+			this.$router.replace({
+				path: '/mainMenu',
+				query: {
+					id: item.menuId
+				}
+			})
 		}
 	}
 }
@@ -47,7 +52,7 @@ export default {
 	.sidebar-box-item {
 		width: 100%;
 		height: 49px;
-		font-size: 14px;
+		font-size: 16px;
 		color: #fff;
 		text-align: center;
 		line-height: 49px;

src/layout/components/Sidebar/Logo.vue

@@ -1,129 +1,114 @@
 <template>
-  <div
-    class="sidebar-logo-container"
-    :class="{ collapse: collapse }"
-    :style="{
-      backgroundColor:
-        sideTheme === 'theme-dark'
-          ? variables.menuBg
-          : variables.menuLightBg,
-    }"
-  >
-    <transition name="sidebarLogoFade">
-      <router-link
-        v-if="collapse"
-        key="collapse"
-        class="sidebar-logo-link"
-        to="/"
-      >
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1
-          v-else
-          class="sidebar-title"
-          :style="{
-            color:
-              sideTheme === 'theme-dark'
-                ? variables.logoTitleColor
-                : variables.logoLightTitleColor,
-          }"
-        >
-          {{ title }}
-        </h1>
-      </router-link>
-      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <!-- <h1
-          class="sidebar-title"
-          :style="{
-            color:
-              sideTheme === 'theme-dark'
-                ? variables.logoTitleColor
-                : variables.logoLightTitleColor,
-          }"
-        >
-          {{ title }}
-        </h1> -->
-      </router-link>
-    </transition>
-  </div>
+	<div
+		class="sidebar-logo-container"
+		:class="{ collapse: collapse }"
+		:style="{
+			backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground
+		}"
+	>
+		<transition name="sidebarLogoFade">
+			<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+				<img v-if="logo" :src="logo" class="sidebar-logo" />
+				<h1
+					v-else
+					class="sidebar-title"
+					:style="{
+						color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor
+					}"
+				>
+					{{ title }}
+				</h1>
+			</router-link>
+			<router-link v-else key="expand" class="sidebar-logo-link" to="/">
+				<img v-if="logo" :src="logo" class="sidebar-logo" />
+				<h1
+					class="sidebar-title"
+					:style="{
+						color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor
+					}"
+				>
+					{{ title }}
+				</h1>
+			</router-link>
+		</transition>
+	</div>
 </template>
 
 <script>
-import logoImg from "@/assets/logo/logo.png";
-import variables from "@/assets/styles/variables.scss";
+import logoImg from '@/assets/logo/logo.png'
+import variables from '@/assets/styles/variables.scss'
 
 export default {
-  name: "SidebarLogo",
-  props: {
-    collapse: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  computed: {
-    variables() {
-      return variables;
-    },
-    sideTheme() {
-      return this.$store.state.settings.sideTheme;
-    },
-  },
-  data() {
-    return {
-      title: "铁谷管理系统",
-      logo: logoImg,
-    };
-  },
-};
+	name: 'SidebarLogo',
+	props: {
+		collapse: {
+			type: Boolean,
+			required: true
+		}
+	},
+	computed: {
+		variables() {
+			return variables
+		},
+		sideTheme() {
+			return this.$store.state.settings.sideTheme
+		}
+	},
+	data() {
+		return {
+			title: '',
+			logo: logoImg
+		}
+	}
+}
 </script>
 
 <style lang="scss" scoped>
 .sidebarLogoFade-enter-active {
-  transition: opacity 1.5s;
+	transition: opacity 1.5s;
 }
 
 .sidebarLogoFade-enter,
 .sidebarLogoFade-leave-to {
-  opacity: 0;
+	opacity: 0;
 }
 
 .sidebar-logo-container {
-  position: relative;
-  width: 100%;
-  height: 87px;
-  line-height: 50px;
-  background: #2b2f3a;
-  text-align: center;
-  overflow: hidden;
+	position: relative;
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	background: #2b2f3a;
+	text-align: center;
+	overflow: hidden;
 
-  & .sidebar-logo-link {
-    height: 100%;
-    width: 100%;
+	& .sidebar-logo-link {
+		height: 100%;
+		width: 100%;
 
-    & .sidebar-logo {
-      width: 170px;
-      height: 79px;
-      vertical-align: middle;
-      // margin-right: 12px;
-      margin-top: 7px;
-    }
+		& .sidebar-logo {
+			width: 32px;
+			height: 32px;
+			vertical-align: middle;
+			margin-right: 12px;
+		}
 
-    & .sidebar-title {
-      display: inline-block;
-      margin: 0;
-      color: #fff;
-      font-weight: 600;
-      line-height: 50px;
-      font-size: 14px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-      vertical-align: middle;
-    }
-  }
+		& .sidebar-title {
+			display: inline-block;
+			margin: 0;
+			color: #fff;
+			font-weight: 600;
+			line-height: 50px;
+			font-size: 14px;
+			font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+			vertical-align: middle;
+		}
+	}
 
-  &.collapse {
-    .sidebar-logo {
-      margin-right: 0px;
-    }
-  }
+	&.collapse {
+		.sidebar-logo {
+			margin-right: 0px;
+		}
+	}
 }
 </style>

src/layout/components/Sidebar/index.vue

@@ -1,52 +1,57 @@
 <template>
-	<div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }">
-		<logo v-if="showLogo" :collapse="isCollapse" />
-		<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
-			<el-menu
-				:default-active="activeMenu"
-				:collapse="isCollapse"
-				:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg"
-				:text-color="settings.sideTheme === 'theme-dark' ? variables.menuText : 'rgba(0,0,0,.65)'"
-				:unique-opened="true"
-				:active-text-color="settings.theme"
-				:collapse-transition="false"
-				mode="vertical"
-			>
-				<sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
-			</el-menu>
-		</el-scrollbar>
-	</div>
+    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+        <logo v-if="showLogo" :collapse="isCollapse" />
+        <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
+            <el-menu
+                :default-active="activeMenu"
+                :collapse="isCollapse"
+                :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
+                :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
+                :unique-opened="true"
+                :active-text-color="settings.theme"
+                :collapse-transition="false"
+                mode="vertical"
+            >
+                <sidebar-item
+                    v-for="(route, index) in sidebarRouters"
+                    :key="route.path  + index"
+                    :item="route"
+                    :base-path="route.path"
+                />
+            </el-menu>
+        </el-scrollbar>
+    </div>
 </template>
 
 <script>
-import { mapGetters, mapState } from 'vuex'
-import Logo from './Logo'
-import SidebarItem from './SidebarItem'
-import variables from '@/assets/styles/variables.scss'
+import { mapGetters, mapState } from "vuex";
+import Logo from "./Logo";
+import SidebarItem from "./SidebarItem";
+import variables from "@/assets/styles/variables.scss";
 
 export default {
-	components: { SidebarItem, Logo },
-	computed: {
-		...mapState(['settings']),
-		...mapGetters(['sidebarRouters', 'sidebar']),
-		activeMenu() {
-			const route = this.$route
-			const { meta, path } = route
-			// if set path, the sidebar will highlight the path you set
-			if (meta.activeMenu) {
-				return meta.activeMenu
-			}
-			return path
-		},
-		showLogo() {
-			return this.$store.state.settings.sidebarLogo
-		},
-		variables() {
-			return variables
-		},
-		isCollapse() {
-			return !this.sidebar.opened
-		}
-	}
-}
+    components: { SidebarItem, Logo },
+    computed: {
+        ...mapState(["settings"]),
+        ...mapGetters(["sidebarRouters", "sidebar"]),
+        activeMenu() {
+            const route = this.$route;
+            const { meta, path } = route;
+            // if set path, the sidebar will highlight the path you set
+            if (meta.activeMenu) {
+                return meta.activeMenu;
+            }
+            return path;
+        },
+        showLogo() {
+            return this.$store.state.settings.sidebarLogo;
+        },
+        variables() {
+            return variables;
+        },
+        isCollapse() {
+            return !this.sidebar.opened;
+        }
+    }
+};
 </script>

src/store/modules/permission.js

@@ -24,6 +24,7 @@ const permission = {
 					const sidebarRouters = filterSideBarRouters(data)
 					const rewriteRoutes = filterAsyncRouter(data)
 					rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
+					sidebarRouters.unshift({ menuName: '风险办公', menuType: 'M', path: 'index' })
 					commit('SET_ROUTES', constantRoutes.concat(rewriteRoutes))
 					commit('SET_SIDEBAR_ROUTERS', sidebarRouters)
 					resolve(rewriteRoutes)