Skip to content

Commit

Permalink
Semi
Browse files Browse the repository at this point in the history
  • Loading branch information
sheepzh committed Aug 12, 2024
1 parent ef499d5 commit 7a99cd5
Show file tree
Hide file tree
Showing 6 changed files with 156 additions and 110 deletions.
17 changes: 17 additions & 0 deletions src/app/Layout/HeadNav.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { ElBreadcrumb, ElDropdownMenu } from "element-plus"
import { defineComponent } from "vue"

const _default = defineComponent({
setup() {
return () => (
<div class="nav-container">
<ElBreadcrumb />
<ElDropdownMenu>

</ElDropdownMenu>
</div>
)
}
})

export default _default
98 changes: 3 additions & 95 deletions src/app/Layout/Menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
* https://opensource.org/licenses/MIT
*/

import type { IconProps } from "element-plus"
import type { Ref, StyleValue } from "vue"
import type { Router } from "vue-router"
import type { I18nKey } from "@app/locale"
Expand All @@ -14,99 +13,8 @@ import { defineComponent, h, onMounted, ref, watch } from "vue"
import { ElIcon, ElMenu, ElMenuItem, ElMenuItemGroup } from "element-plus"
import { useRouter } from "vue-router"
import { t } from "@app/locale"
import { getGuidePageUrl } from "@util/constant/url"
import { Aim, HelpFilled, Memo, Rank, SetUp, Stopwatch, Timer } from "@element-plus/icons-vue"
import Trend from "./icons/Trend"
import Table from "./icons/Table"
import Database from "./icons/Database"
import Whitelist from "./icons/Whitelist"
import Website from "./icons/Website"
import About from "./icons/About"
import { createTabAfterCurrent } from "@api/chrome/tab"
import { ANALYSIS_ROUTE, MERGE_ROUTE } from "@app/router/constants"

type _MenuItem = {
title: I18nKey
icon: IconProps | string
route?: string
href?: string
index?: string
}

type _MenuGroup = {
title: I18nKey
children: _MenuItem[]
}

/**
* Menu items
*/
const MENUS: _MenuGroup[] = [{
title: msg => msg.menu.data,
children: [{
title: msg => msg.menu.dashboard,
route: '/data/dashboard',
icon: Stopwatch
}, {
title: msg => msg.menu.dataReport,
route: '/data/report',
icon: Table
}, {
title: msg => msg.menu.siteAnalysis,
route: ANALYSIS_ROUTE,
icon: Trend
}, {
title: msg => msg.menu.dataClear,
route: '/data/manage',
icon: Database
}]
}, {
title: msg => msg.menu.behavior,
children: [{
title: msg => msg.menu.habit,
route: '/behavior/habit',
icon: Aim
}, {
title: msg => msg.menu.limit,
route: '/behavior/limit',
icon: Timer
}]
}, {
title: msg => msg.menu.additional,
children: [{
title: msg => msg.menu.siteManage,
route: '/additional/site-manage',
icon: Website
}, {
title: msg => msg.menu.whitelist,
route: '/additional/whitelist',
icon: Whitelist
}, {
title: msg => msg.menu.mergeRule,
route: MERGE_ROUTE,
icon: Rank
}, {
title: msg => msg.menu.option,
route: '/additional/option',
icon: SetUp
}]
}, {
title: msg => msg.menu.other,
children: [{
title: msg => msg.base.guidePage,
href: getGuidePageUrl(),
icon: Memo,
index: '_guide',
}, {
title: msg => msg.menu.helpUs,
route: '/other/help',
icon: HelpFilled,
}, {
title: msg => msg.menu.about,
route: '/other/about',
icon: About,
}]
}]
import { MenuItem, MENUS } from "./item"

function openMenu(route: string, title: I18nKey, router: Router) {
const currentPath = router.currentRoute.value?.path
Expand All @@ -118,7 +26,7 @@ function openMenu(route: string, title: I18nKey, router: Router) {

const openHref = (href: string) => createTabAfterCurrent(href)

function handleClick(menuItem: _MenuItem, router: Router, currentActive: Ref<string>) {
function handleClick(menuItem: MenuItem, router: Router, currentActive: Ref<string>) {
const { route, title, href } = menuItem
if (route) {
openMenu(route, title, router)
Expand All @@ -135,7 +43,7 @@ const iconStyle: StyleValue = {
lineHeight: '0.83em'
}

function renderMenuLeaf(menu: _MenuItem, router: Router, currentActive: Ref<string>) {
function renderMenuLeaf(menu: MenuItem, router: Router, currentActive: Ref<string>) {
const { route, title, icon, index } = menu
return <ElMenuItem
onClick={(_item) => handleClick(menu, router, currentActive)}
Expand Down
24 changes: 15 additions & 9 deletions src/app/Layout/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,28 @@
* https://opensource.org/licenses/MIT
*/

import { ElAside, ElContainer, ElScrollbar } from "element-plus"
import { ElAside, ElContainer, ElHeader, ElScrollbar } from "element-plus"
import { defineComponent } from "vue"
import Menu from "./Menu"
import Nav from "./HeadNav"
import VersionTag from "./VersionTag"
import { RouterView } from "vue-router"

const _default = defineComponent(() => {
return () => (
<ElContainer>
<ElAside>
<ElScrollbar>
<Menu />
</ElScrollbar>
</ElAside>
<ElContainer class="app-container">
<RouterView />
<ElContainer class="app-layout">
<ElHeader class="app-header">
<Nav />
</ElHeader>
<ElContainer>
<ElAside class="app-aside">
<ElScrollbar>
<Menu />
</ElScrollbar>
</ElAside>
<ElContainer class="app-container">
<RouterView />
</ElContainer>
</ElContainer>
<VersionTag />
</ElContainer>
Expand Down
102 changes: 102 additions & 0 deletions src/app/Layout/item.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@

/**
* Copyright (c) 2021-present Hengyang Zhang
*
* This software is released under the MIT License.
* https://opensource.org/licenses/MIT
*/

import type { IconProps } from "element-plus"
import { Aim, HelpFilled, Memo, Rank, SetUp, Stopwatch, Timer } from "@element-plus/icons-vue"
import { getGuidePageUrl } from "@util/constant/url"
import Trend from "./icons/Trend"
import Table from "./icons/Table"
import Database from "./icons/Database"
import Whitelist from "./icons/Whitelist"
import Website from "./icons/Website"
import About from "./icons/About"
import { ANALYSIS_ROUTE, MERGE_ROUTE } from "@app/router/constants"
import { I18nKey } from "@app/locale"

export type MenuItem = {
title: I18nKey
icon: IconProps | string
route?: string
href?: string
index?: string
}

export type MenuGroup = {
title: I18nKey
children: MenuItem[]
}

/**
* Menu items
*/
export const MENUS: MenuGroup[] = [{
title: msg => msg.menu.data,
children: [{
title: msg => msg.menu.dashboard,
route: '/data/dashboard',
icon: Stopwatch
}, {
title: msg => msg.menu.dataReport,
route: '/data/report',
icon: Table
}, {
title: msg => msg.menu.siteAnalysis,
route: ANALYSIS_ROUTE,
icon: Trend
}, {
title: msg => msg.menu.dataClear,
route: '/data/manage',
icon: Database
}]
}, {
title: msg => msg.menu.behavior,
children: [{
title: msg => msg.menu.habit,
route: '/behavior/habit',
icon: Aim
}, {
title: msg => msg.menu.limit,
route: '/behavior/limit',
icon: Timer
}]
}, {
title: msg => msg.menu.additional,
children: [{
title: msg => msg.menu.siteManage,
route: '/additional/site-manage',
icon: Website
}, {
title: msg => msg.menu.whitelist,
route: '/additional/whitelist',
icon: Whitelist
}, {
title: msg => msg.menu.mergeRule,
route: MERGE_ROUTE,
icon: Rank
}, {
title: msg => msg.menu.option,
route: '/additional/option',
icon: SetUp
}]
}, {
title: msg => msg.menu.other,
children: [{
title: msg => msg.base.guidePage,
href: getGuidePageUrl(),
icon: Memo,
index: '_guide',
}, {
title: msg => msg.menu.helpUs,
route: '/other/help',
icon: HelpFilled,
}, {
title: msg => msg.menu.about,
route: '/other/about',
icon: About,
}]
}]
2 changes: 1 addition & 1 deletion src/app/styles/compatible/index.sass
Original file line number Diff line number Diff line change
@@ -1 +1 @@
@import ./mobile
@import "./mobile"
23 changes: 18 additions & 5 deletions src/app/styles/compatible/mobile.sass
Original file line number Diff line number Diff line change
@@ -1,6 +1,19 @@
@media screen and (max-width: 600px)
body
100vw
$mobile-width: 640px

@media screen and (max-width: $mobile-width)
#app
.el-aside
width: 0px
.app-layout
.app-aside
display: none
.app-header
background-color: var(--el-menu-bg-color)
color: var(--el-menu-text-color)
.content-container
width: 100%
padding: 0

@media screen and (min-width: $mobile-width)
#app
.app-layout
.app-header
display: none

0 comments on commit 7a99cd5

Please sign in to comment.