Fix sidebar bgcolor (#208)

Author: sheepzh

src/api/chrome/tab.ts

@@ -36,7 +36,6 @@ export function createTab(param: chrome.tabs.CreateProperties | string): Promise
  */
 export async function createTabAfterCurrent(url: string): Promise<ChromeTab> {
     const tab = await getCurrentTab()
-    console.log(tab)
     if (!tab) {
         // Current tab not found
         return createTab(url)

src/app/components/common/content-container.ts

@@ -1,11 +1,11 @@
 /**
- * Copyright (c) 2021 Hengyang Zhang
+ * Copyright (c) 2021-present Hengyang Zhang
  * 
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
 
-import { ElCard } from "element-plus"
+import { ElCard, ElScrollbar } from "element-plus"
 import ContentCard from "./content-card"
 import { defineComponent, h, useSlots } from "vue"
 
@@ -19,7 +19,7 @@ const _default = defineComponent(() => {
     } else {
         content && children.push(h(ContentCard, () => h(content)))
     }
-    return () => h("div", { class: "content-container" }, children)
+    return () => h(ElScrollbar, () => h("div", { class: "content-container" }, children))
 })
 
 export default _default

src/app/layout/index.ts

@@ -1,25 +1,22 @@
 /**
- * Copyright (c) 2021 Hengyang Zhang
+ * Copyright (c) 2021-present Hengyang Zhang
  * 
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
 
-import { ElAside, ElContainer } from "element-plus"
+import { ElAside, ElContainer, ElScrollbar } from "element-plus"
 import { defineComponent, h } from "vue"
 import Menu from "./menu"
 import VersionTag from "./version-tag"
 import { RouterView } from "vue-router"
 
-const _default = defineComponent({
-    name: "Layout",
-    render() {
-        return h(ElContainer, {}, () => [
-            h(ElAside, { width: `270px` }, () => h(Menu)),
-            h(ElContainer, { class: 'app-container' }, () => h(RouterView)),
-            h(VersionTag)
-        ])
-    }
+const _default = defineComponent(() => {
+    return () => h(ElContainer, {}, () => [
+        h(ElAside, () => h(ElScrollbar, () => h(Menu))),
+        h(ElContainer, { class: 'app-container' }, () => h(RouterView)),
+        h(VersionTag)
+    ])
 })
 
 export default _default

src/app/layout/menu.ts

@@ -5,22 +5,22 @@
  * https://opensource.org/licenses/MIT
  */
 
-import type { UnwrapRef } from "vue"
+import type { Ref } from "vue"
 import type ElementIcon from "@src/element-ui/icon"
 import type { MenuItemRegistered } from "element-plus"
-import type { RouteLocationNormalizedLoaded, Router } from "vue-router"
+import type { Router } from "vue-router"
 import type { I18nKey } from "@app/locale"
 import type { MenuMessage } from "@i18n/message/app/menu"
 
-import { defineComponent, h, onMounted, reactive } from "vue"
+import { defineComponent, h, onMounted, ref, watch } from "vue"
 import { ElIcon, ElMenu, ElMenuItem, ElMenuItemGroup } from "element-plus"
-import { useRoute, useRouter } from "vue-router"
+import { useRouter } from "vue-router"
 import { t } from "@app/locale"
 import { HOME_PAGE, FEEDBACK_QUESTIONNAIRE, getGuidePageUrl } from "@util/constant/url"
 import { Aim, Calendar, ChatSquare, Folder, HelpFilled, HotWater, Memo, Rank, SetUp, Stopwatch, Sugar, Tickets, Timer } from "@element-plus/icons-vue"
 import { locale } from "@i18n"
 import TrendIcon from "./icon/trend-icon"
-import { createTab } from "@api/chrome/tab"
+import { createTabAfterCurrent } from "@api/chrome/tab"
 import { ANALYSIS_ROUTE, MERGE_ROUTE } from "@app/router/constants"
 import { START_ROUTE } from "@guide/router/constants"
 
@@ -37,11 +37,6 @@ type _MenuGroup = {
     children: _MenuItem[]
 }
 
-type _RouteProps = {
-    router: Router
-    current: RouteLocationNormalizedLoaded
-}
-
 /**
  * Generate menu items after locale initialized
  */
@@ -126,23 +121,24 @@ function generateMenus(): _MenuGroup[] {
     }]
 }
 
-function openMenu(route: string, title: I18nKey, routeProps: UnwrapRef<_RouteProps>) {
-    const routerVal = routeProps.router
-    const currentRouteVal = routeProps.current
-    if (currentRouteVal && currentRouteVal.path !== route) {
-        routerVal && routerVal.push(route)
+function openMenu(route: string, title: I18nKey, router: Router) {
+    const currentPath = router.currentRoute.value?.path
+    if (currentPath !== route) {
+        router?.push(route)
         document.title = t(title)
     }
 }
 
-const openHref = (href: string) => createTab(href)
+const openHref = (href: string) => createTabAfterCurrent(href)
 
-function handleClick(menuItem: _MenuItem, routeProps: UnwrapRef<_RouteProps>) {
+function handleClick(menuItem: _MenuItem, router: Router, currentActive: Ref<string>) {
     const { route, title, href } = menuItem
     if (route) {
-        openMenu(route, msg => msg.menu[title], routeProps)
+        openMenu(route, msg => msg.menu[title], router)
+        currentActive.value = '/data/dashboard'//route
     } else {
         openHref(href)
+        currentActive.value = router.currentRoute?.value?.path
     }
 }
 
@@ -153,10 +149,10 @@ const iconStyle: Partial<CSSStyleDeclaration> = {
     lineHeight: '0.83em'
 }
 
-function renderMenuLeaf(menu: _MenuItem, routeProps: UnwrapRef<_RouteProps>) {
+function renderMenuLeaf(menu: _MenuItem, router: Router, currentActive: Ref<string>) {
     const { route, title, icon, index } = menu
     const props: { onClick: (item: MenuItemRegistered) => void; index?: string } = {
-        onClick: (_item) => handleClick(menu, routeProps)
+        onClick: (_item) => handleClick(menu, router, currentActive)
     }
     const realIndex = index || route
     realIndex && (props.index = realIndex)
@@ -166,9 +162,9 @@ function renderMenuLeaf(menu: _MenuItem, routeProps: UnwrapRef<_RouteProps>) {
     })
 }
 
-function renderMenu(menu: _MenuGroup, props: UnwrapRef<_RouteProps>) {
+function renderMenu(menu: _MenuGroup, router: Router, currentActive: Ref<string>) {
     const title = t(msg => msg.menu[menu.title])
-    return h(ElMenuItemGroup, { title }, () => menu.children.map(item => renderMenuLeaf(item, props)))
+    return h(ElMenuItemGroup, { title }, () => menu.children.map(item => renderMenuLeaf(item, router, currentActive)))
 }
 
 async function initTitle(allMenus: _MenuGroup[], router: Router) {
@@ -185,22 +181,22 @@ async function initTitle(allMenus: _MenuGroup[], router: Router) {
     }
 }
 
-const _default = defineComponent({
-    name: "LayoutMenu",
-    setup() {
-        const routeProps: UnwrapRef<_RouteProps> = reactive({
-            router: useRouter(),
-            current: useRoute()
-        })
-
-        const allMenus = generateMenus()
-        onMounted(() => initTitle(allMenus, useRouter()))
-
-        return () => h(ElMenu,
-            { defaultActive: routeProps.current.path },
-            () => allMenus.map(menu => renderMenu(menu, routeProps))
-        )
+const _default = defineComponent(() => {
+    const router = useRouter()
+    const currentActive: Ref<string> = ref()
+    const syncRouter = () => {
+        const route = router.currentRoute.value
+        route && (currentActive.value = route.path)
     }
+
+    watch(router.currentRoute, syncRouter)
+
+    const allMenus = generateMenus()
+    onMounted(() => initTitle(allMenus, router))
+
+    return () => h('div', { class: 'menu-container' }, h(ElMenu, { defaultActive: currentActive.value },
+        () => allMenus.map(menu => renderMenu(menu, router, currentActive))
+    ))
 })
 
 export default _default

src/app/styles/index.sass

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2021 Hengyang Zhang
+ * Copyright (c) 2021-present Hengyang Zhang
  * 
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
@@ -33,6 +33,11 @@ a
   padding-left: 45px !important
 .el-aside
   width: 240px
+  .el-menu
+    padding-bottom: 10px
+  .menu-container
+    min-height: 100vh
+    background-color: var(--el-menu-bg-color)
 
 .app-container
   width: 100%
@@ -41,10 +46,11 @@ a
 
 .content-container
   margin-top: 30px
-  width: calc(100% - 60px)
+  margin-bottom: 30px
+  width: calc(100vw - 300px)
   height: calc(100% - 30px)
   padding: 0 30px
-  overflow-y: auto
+  overflow: hidden
 
 #app
   height: 100%