Semi

sheepzh · Aug 15, 2024 · 6f68753 · 6f68753
1 parent 93ebe5a
commit 6f68753
Show file tree

Hide file tree

Showing 21 changed files with 227 additions and 112 deletions.
diff --git a/src/app/Layout/VersionTag.tsx b/src/app/Layout/VersionTag.tsx
@@ -20,7 +20,7 @@ const style: StyleValue = {
 
 const _default = defineComponent(() => {
     return () => (
-        <div class="version-tag" style={style}>
+        <div class="version-tag hidden-md-and-down" style={style}>
             <p style={{ fontSize: "10px" }}>
                 {`v${packageInfo.version}`}
             </p>

diff --git a/src/app/Layout/index.tsx b/src/app/Layout/index.tsx
@@ -11,15 +11,18 @@ import SideMenu from "./menu/Side"
 import HeadNav from "./menu/Nav"
 import VersionTag from "./VersionTag"
 import { RouterView } from "vue-router"
+import { classNames } from "@util/style"
+import { CLZ_HIDDEN_MD_AND_UP, CLZ_HIDDEN_SM_AND_DOWN } from "@src/element-ui/style"
+import "./style"
 
 const _default = defineComponent(() => {
     return () => (
         <ElContainer class="app-layout">
-            <ElHeader class="app-header">
+            <ElHeader class={classNames('app-header', CLZ_HIDDEN_MD_AND_UP)}>
                 <HeadNav />
             </ElHeader>
             <ElContainer>
-                <ElAside class="app-aside">
+                <ElAside class={classNames('app-aside', CLZ_HIDDEN_SM_AND_DOWN)}>
                     <ElScrollbar>
                         <SideMenu />
                     </ElScrollbar>

diff --git a/src/app/Layout/menu/Nav.tsx b/src/app/Layout/menu/Nav.tsx
@@ -5,23 +5,37 @@
  * https://opensource.org/licenses/MIT
  */
 
-import { CloseBold, Menu } from "@element-plus/icons-vue"
-import { ElBreadcrumb, ElBreadcrumbItem, ElIcon, ElMenu, ElMenuItem, ElMenuItemGroup, ElSubMenu } from "element-plus"
-import { defineComponent, onMounted, ref, watch } from "vue"
+import { CloseBold, Link, Menu } from "@element-plus/icons-vue"
+import { ElBreadcrumb, ElBreadcrumbItem, ElIcon, ElMenu, ElMenuItem, ElSubMenu } from "element-plus"
+import { defineComponent, h, onMounted, ref, watch } from "vue"
 import { useRouter } from "vue-router"
-import { initTitle } from "./route"
+import { handleClick, initTitle } from "./route"
 import { MENUS } from "./item"
 import { t } from "@app/locale"
 import { classNames } from "@util/style"
+import { getUrl } from "@api/chrome/runtime"
+import { useSwitch } from "@hooks"
+
+const generateBreadcrumbMap = (): { [path: string]: [groupTitle: string, menuTitle: string] } => {
+    const result = {}
+    MENUS.forEach(({ title: groupTitle, children }) => {
+        children.filter(m => m.route).forEach(({ route, title: menuTitle }) => {
+            result[route] = [t(groupTitle), t(menuTitle)]
+        })
+    })
+    return result
+}
+
+const BREADCRUMB_PATH = generateBreadcrumbMap()
 
 const findMenuPath = (routePath: string): string[] => {
-    return ['hahaah', 'aaas']
+    return BREADCRUMB_PATH[routePath] || []
 }
 
 const _default = defineComponent(() => {
     const router = useRouter()
     const path = ref<string[]>([])
-    const showMenu = ref(false)
+    const [showMenu, , closeMenu, toggleMenu] = useSwitch(false)
     const openedGroups = ref(MENUS.map(m => m.index))
 
     const syncRouter = () => {
@@ -36,36 +50,53 @@ const _default = defineComponent(() => {
     return () => (
         <div class={classNames("nav-container", showMenu.value ? 'open' : 'close')}>
             <div class="nav-content">
-                <ElBreadcrumb separator="/">
-                    {path.value?.map(p => <ElBreadcrumbItem>{p}</ElBreadcrumbItem>)}
-                </ElBreadcrumb>
-                <div onClick={() => showMenu.value = !showMenu.value}>
+                <div class="bread-wrapper">
+                    <ElIcon>
+                        <img width='32' height='32' src={getUrl('static/images/icon.png')} />
+                    </ElIcon>
+                    <ElBreadcrumb separator="/">
+                        {path.value?.map(p => <ElBreadcrumbItem>{p}</ElBreadcrumbItem>)}
+                    </ElBreadcrumb>
+                </div>
+                <div onClick={toggleMenu}>
                     <ElIcon size="large">
                         {showMenu.value ? <CloseBold /> : <Menu />}
                     </ElIcon>
                 </div>
             </div>
-            <div class={classNames("menu-wrapper", showMenu.value ? 'open' : 'close')}>
-                <ElMenu
-                    defaultOpeneds={openedGroups.value}
-                    onOpen={index => openedGroups.value = [...openedGroups.value || [], index]}
-                    onClose={index => openedGroups.value = openedGroups.value?.filter(v => v !== index)}
-                >
-                    {MENUS.map(({ title, children }, idx) => (
-                        <ElSubMenu
-                            index={`sub-${idx}`}
-                            v-slots={{
-                                title: () => t(title),
-                                default: () => children?.map(item => <ElMenuItem>
-                                    {
-                                        t(item.title)
-                                    }
-                                </ElMenuItem>)
-                            }}
-                        />
-                    ))}
-                </ElMenu>
-            </div>
+            {!!showMenu.value && (
+                <div class="menu-wrapper">
+                    <ElMenu
+                        defaultOpeneds={openedGroups.value}
+                        onOpen={index => openedGroups.value = [...openedGroups.value || [], index]}
+                        onClose={index => openedGroups.value = openedGroups.value?.filter(v => v !== index)}
+                        onSelect={closeMenu}
+                    >
+                        {MENUS.map(({ title, children, icon }, idx) => (
+                            <ElSubMenu
+                                index={`sub-${idx}`}
+                                v-slots={{
+                                    title: () => <>
+                                        <ElIcon size={15}>{h(icon)}</ElIcon>
+                                        <span>{t(title)}</span>
+                                    </>,
+                                    default: () => children?.map(item => (
+                                        <ElMenuItem
+                                            onClick={() => {
+                                                handleClick(item, router)
+                                                closeMenu()
+                                            }}
+                                        >
+                                            <span>{t(item.title)}</span>
+                                            {!!item.href && <ElIcon size={12}><Link /></ElIcon>}
+                                        </ElMenuItem>
+                                    ))
+                                }}
+                            />
+                        ))}
+                    </ElMenu>
+                </div>
+            )}
         </div>
     )
 })

diff --git a/src/app/Layout/menu/item.ts b/src/app/Layout/menu/item.ts
@@ -7,7 +7,7 @@
  */
 
 import type { IconProps } from "element-plus"
-import { Aim, Connection, HelpFilled, Histogram, Memo, More, MoreFilled, Rank, SetUp, Stopwatch, Timer, View } from "@element-plus/icons-vue"
+import { Aim, Connection, HelpFilled, Histogram, Memo, MoreFilled, Rank, SetUp, Stopwatch, Timer, View } from "@element-plus/icons-vue"
 import { getGuidePageUrl } from "@util/constant/url"
 import Trend from "../icons/Trend"
 import Table from "../icons/Table"
@@ -91,7 +91,7 @@ export const MENUS: MenuGroup[] = [{
 }, {
     title: msg => msg.menu.other,
     index: 'other',
-    icon: More,
+    icon: MoreFilled,
     children: [{
         title: msg => msg.base.guidePage,
         href: getGuidePageUrl(),

diff --git a/src/app/Layout/menu/route.ts b/src/app/Layout/menu/route.ts
@@ -14,13 +14,13 @@ function openMenu(route: string, title: I18nKey, router: Router) {
 
 const openHref = (href: string) => createTabAfterCurrent(href)
 
-export function handleClick(menuItem: MenuItem, router: Router, currentActive: Ref<string>) {
+export function handleClick(menuItem: MenuItem, router: Router, currentActive?: Ref<string>) {
     const { route, title, href } = menuItem
     if (route) {
         openMenu(route, title, router)
     } else {
         openHref(href)
-        currentActive.value = router.currentRoute?.value?.path
+        currentActive && (currentActive.value = router.currentRoute?.value?.path)
     }
 }
 

diff --git a/src/app/Layout/style.sass b/src/app/Layout/style.sass
@@ -0,0 +1,38 @@
+.app-layout
+    .el-aside
+        width: 240px
+        .el-menu
+            padding-bottom: 10px
+        .menu-container
+            min-height: 100vh
+            background-color: var(--el-menu-bg-color)
+
+.app-header
+    background-color: var(--el-menu-bg-color)
+    color: var(--el-menu-text-color)
+    height: fit-content
+    .nav-container
+        height: 100%
+        .nav-content
+            height: var(--el-header-height)
+            display: flex
+            justify-content: space-between
+            align-items: center
+            .bread-wrapper
+                display: flex
+                gap: 20px
+                height: 100%
+                align-items: center
+        .menu-wrapper
+            position: absolute
+            top: var(--el-header-height)
+            left: 0
+            width: 100vw
+            z-index: 9999
+            max-height: calc(100vh - var(--el-header-height))
+            .el-menu
+                padding-bottom: 10px
+            .nav-menu-group-title
+                display: flex
+                justify-content: flex-start
+                align-items: center
diff --git a/src/app/components/Dashboard/DashboardCard.tsx b/src/app/components/Dashboard/DashboardCard.tsx
@@ -20,11 +20,24 @@ const _default = defineComponent({
         span: {
             type: Number,
             required: true
-        }
+        },
+        height: Number,
+        xs: Number,
+        sm: Number,
+        md: Number,
+        lg: Number,
+        xl: Number,
     },
     setup(props, ctx) {
         return () => (
-            <ElCol span={props.span}>
+            <ElCol
+                span={props.span}
+                xs={props.xs}
+                sm={props.sm}
+                md={props.md}
+                lg={props.lg}
+                xl={props.xl}
+            >
                 <ElCard class={clzName(props.noPadding)} style={{ height: "100%" }} v-slots={ctx.slots} />
             </ElCol>
         )

diff --git a/src/app/components/Dashboard/components/Calendar/index.tsx b/src/app/components/Dashboard/components/Calendar/index.tsx
@@ -29,7 +29,7 @@ const fetchData = async (): Promise<BizOption> => {
 const _default = defineComponent(() => {
     const { elRef } = useEcharts(Wrapper, fetchData)
 
-    return () => <div class="chart-container" ref={elRef} />
+    return () => <div class="calendar-container" ref={elRef} />
 })
 
 export default _default
diff --git a/src/app/components/Dashboard/components/Indicator/index.tsx b/src/app/components/Dashboard/components/Indicator/index.tsx
@@ -113,7 +113,7 @@ const _default = defineComponent(() => {
     const most2HourParam = computed(() => computeMost2HourParam(data.value))
 
     return () => (
-        <div class="chart-container">
+        <div class="indicator-container">
             <div class="indicator-icon-header">
                 <ElIcon>
                     <Sunrise />

diff --git a/src/app/components/Dashboard/components/Indicator/style.sass b/src/app/components/Dashboard/components/Indicator/style.sass
@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2022 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */

diff --git a/src/app/components/Dashboard/components/MonthOnMonth.tsx b/src/app/components/Dashboard/components/MonthOnMonth.tsx
@@ -30,6 +30,7 @@ import DateIterator from "@util/date-iterator"
 import { cvt2LocaleTime } from "@app/util/time"
 import { getCompareColor, getDiffColor, tooltipDot } from "@app/util/echarts"
 import { EchartsWrapper, useEcharts } from "@hooks"
+import DashboardCard from "../DashboardCard"
 
 type EcOption = ComposeOption<
     | BarSeriesOption
@@ -160,7 +161,7 @@ const fetchData = async (): Promise<[thisMonth: Row[], lastMonth: Row[]]> => {
 
 const _default = defineComponent(() => {
     const { elRef } = useEcharts(ChartWrapper, fetchData)
-    return () => <div class="chart-container" ref={elRef} />
+    return () => <div class="mom-container" ref={elRef} />
 })
 
 export default _default
diff --git a/src/app/components/Dashboard/components/TopKVisit/index.tsx b/src/app/components/Dashboard/components/TopKVisit/index.tsx
@@ -38,7 +38,7 @@ const fetchData = async () => {
 
 const _default = defineComponent(() => {
     const { elRef } = useEcharts(Wrapper, fetchData)
-    return () => <div class="chart-container" ref={elRef} />
+    return () => <div class="top-visit-container" ref={elRef} />
 })
 
 export default _default
diff --git a/src/app/components/Dashboard/index.tsx b/src/app/components/Dashboard/index.tsx
@@ -20,6 +20,7 @@ import { useRequest } from "@hooks"
 import metaService from "@service/meta-service"
 import { t } from "@app/locale"
 import { REVIEW_PAGE } from "@util/constant/url"
+import { useWindowSize } from "@vueuse/core"
 
 const ROW_GUTTER = 15
 
@@ -35,20 +36,34 @@ const _default = defineComponent(() => {
         refresh()
     }
 
+    const { width } = useWindowSize()
+
     return () => (
         <ContentContainer class="dashboard-container">
-            <ElRow gutter={ROW_GUTTER} style={{ height: "300px" }}>
-                <DashboardCard span={4}>
-                    <Indicator />
-                </DashboardCard>
-                <DashboardCard span={12}>
-                    <MonthOnMonth />
-                </DashboardCard>
-                <DashboardCard span={8}>
-                    <TopKVisit />
-                </DashboardCard>
-            </ElRow>
-            <ElRow gutter={ROW_GUTTER} style={{ height: "280px" }}>
+            <ElRow gutter={ROW_GUTTER}>
+                {width.value < 1400
+                    ? <>
+                        <DashboardCard span={width.value < 600 ? 24 : 8}>
+                            <Indicator />
+                        </DashboardCard>
+                        <DashboardCard span={width.value < 600 ? 24 : 16}>
+                            <TopKVisit />
+                        </DashboardCard>
+                        <DashboardCard span={24}>
+                            <MonthOnMonth />
+                        </DashboardCard>
+                    </>
+                    : <>
+                        <DashboardCard span={4}>
+                            <Indicator />
+                        </DashboardCard>
+                        <DashboardCard span={12}>
+                            <MonthOnMonth />
+                        </DashboardCard>
+                        <DashboardCard span={8}>
+                            <TopKVisit />
+                        </DashboardCard>
+                    </>}
                 <DashboardCard span={24}>
                     <Calendar />
                 </DashboardCard>

diff --git a/src/app/components/Dashboard/style.sass b/src/app/components/Dashboard/style.sass
@@ -4,19 +4,26 @@
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
+
+@media (max-width:600px)
+    .dashboard-container
+        .indicator-container
+            text-align: center
+            min-height: unset !important
+
 .dashboard-container
+    width: 100%
     .el-row
-        margin-bottom: 15px
         .el-col
-            height: 100%
-
-    .el-card__body
-        padding: 20px
-        width: calc(100% - 40px)
-        height: calc(100% - 40px)
-
-        .chart-container
-            height: 100%
+            margin-bottom: 15px
+            .el-card__body
+                padding: 20px
+                width: calc(100% - 40px)
+                height: calc(100% - 40px)
+    .indicator-container
+        padding-bottom: 20px
+    .indicator-container,.mom-container,.top-visit-container,.calendar-container
+        min-height: 280px
     .help-us-link
         color: var(--el-text-color-primary)
         text-align: center