Semi

.vscode/settings.json

@@ -21,6 +21,7 @@
  "filemanager",
  "Hengyang",
  "Kanban",
+ "Openeds",
  "Popconfirm",
  "Qihu",
  "sheepzh",

src/app/Layout/VersionTag.tsx

@@ -19,11 +19,13 @@ const style: StyleValue = {
 }
 
 const _default = defineComponent(() => {
- return () => <div style={style}>
- <p style={{ fontSize: "10px" }}>
- {`v${packageInfo.version}`}
- </p>
- </div>
+ return () => (
+ <div class="version-tag" style={style}>
+ <p style={{ fontSize: "10px" }}>
+ {`v${packageInfo.version}`}
+ </p>
+ </div>
+ )
 })
 
 export default _default

src/app/Layout/menu/Nav.tsx

@@ -1,28 +1,73 @@
-import { InfoFilled } from "@element-plus/icons-vue"
-import { ElBreadcrumb, ElDropdown, ElDropdownMenu, ElIcon } from "element-plus"
-import { defineComponent } from "vue"
-
-const _default = defineComponent({
- setup() {
- return () => (
- <div class="nav-container">
- <ElBreadcrumb />
- <ElDropdown v-slots={{
- default: () => (
- <ElIcon>
- <InfoFilled />
- </ElIcon>
- ),
- dropdown: () => (
- <ElDropdownMenu>
-
- </ElDropdownMenu>
- )
- }}>
- </ElDropdown>
- </div>
- )
+/**
+ * Copyright (c) 2024-present Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * 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 { useRouter } from "vue-router"
+import { initTitle } from "./route"
+import { MENUS } from "./item"
+import { t } from "@app/locale"
+import { classNames } from "@util/style"
+
+const findMenuPath = (routePath: string): string[] => {
+ return ['hahaah', 'aaas']
+}
+
+const _default = defineComponent(() => {
+ const router = useRouter()
+ const path = ref<string[]>([])
+ const showMenu = ref(false)
+ const openedGroups = ref(MENUS.map(m => m.index))
+
+ const syncRouter = () => {
+ const route = router.currentRoute.value
+ route && (path.value = findMenuPath(route.path))
  }
+
+ watch(router.currentRoute, syncRouter)
+
+ onMounted(() => initTitle(router))
+
+ 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}>
+ <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>
+ </div>
+ )
 })
 
 export default _default

src/app/Layout/menu/Side.tsx

@@ -14,7 +14,6 @@ import { t } from "@app/locale"
 import { MenuItem, MENUS } from "./item"
 import { handleClick, initTitle } from "./route"
 
-
 const iconStyle: StyleValue = {
  paddingRight: '4px',
  paddingLeft: '4px',

src/app/Layout/menu/item.ts

@@ -7,7 +7,7 @@
  */
 
 import type { IconProps } from "element-plus"
-import { Aim, HelpFilled, Memo, Rank, SetUp, Stopwatch, Timer } from "@element-plus/icons-vue"
+import { Aim, Connection, HelpFilled, Histogram, Memo, More, 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"
@@ -26,8 +26,7 @@ export type MenuItem = {
  index?: string
 }
 
-export type MenuGroup = {
- title: I18nKey
+export type MenuGroup = Omit<MenuItem, 'href' | 'route'> & {
  children: MenuItem[]
 }
 
@@ -36,6 +35,8 @@ export type MenuGroup = {
  */
 export const MENUS: MenuGroup[] = [{
  title: msg => msg.menu.data,
+ index: 'data',
+ icon: Histogram,
  children: [{
  title: msg => msg.menu.dashboard,
  route: '/data/dashboard',
@@ -55,6 +56,8 @@ export const MENUS: MenuGroup[] = [{
  }]
 }, {
  title: msg => msg.menu.behavior,
+ index: 'behavior',
+ icon: View,
  children: [{
  title: msg => msg.menu.habit,
  route: '/behavior/habit',
@@ -66,6 +69,8 @@ export const MENUS: MenuGroup[] = [{
  }]
 }, {
  title: msg => msg.menu.additional,
+ index: 'additional',
+ icon: Connection,
  children: [{
  title: msg => msg.menu.siteManage,
  route: '/additional/site-manage',
@@ -85,6 +90,8 @@ export const MENUS: MenuGroup[] = [{
  }]
 }, {
  title: msg => msg.menu.other,
+ index: 'other',
+ icon: More,
  children: [{
  title: msg => msg.base.guidePage,
  href: getGuidePageUrl(),

src/app/styles/compatible/mobile.sass

@@ -3,16 +3,23 @@ $mobile-width: 640px
 @media screen and (max-width: $mobile-width)
  #app
  .app-layout
- .app-aside
+ .app-aside,.version-tag
  display: none
  .app-header
  background-color: var(--el-menu-bg-color)
  color: var(--el-menu-text-color)
+ height: fit-content
  .nav-container
  height: 100%
- display: flex
- justify-content: space-around
- align-items: center
+ .nav-content
+ height: var(--el-header-height)
+ display: flex
+ justify-content: space-between
+ align-items: center
+ .menu-wrapper
+ transition: all .5s ease-in-out
+ .menu-wrapper.close
+ display: none
  .content-container
  width: 100%
  padding: 0

src/hooks/useEcharts.ts

@@ -9,6 +9,7 @@
 import { ElLoading } from "element-plus"
 import { type Ref, onMounted, ref, isRef, watch } from "vue"
 import { init, type ECharts } from "echarts"
+import { useWindowSize } from "@vueuse/core"
 
 export abstract class EchartsWrapper<BizOption, EchartsOption> {
  protected instance: ECharts
@@ -25,6 +26,11 @@ export abstract class EchartsWrapper<BizOption, EchartsOption> {
  this.instance.setOption(option, { notMerge: false })
  }
 
+ resize() {
+ if (!this.instance) return
+ this.instance.resize()
+ }
+
  protected getDom(): HTMLElement {
  return this.instance?.getDom?.()
  }
@@ -73,6 +79,10 @@ export const useEcharts = <BizOption, EchartsOption, EW extends EchartsWrapper<B
  !manual && refresh()
  watchRef && isRef(fetch) && watch(fetch, refresh)
  })
+
+ const { width, height } = useWindowSize()
+ watch([width, height], () => wrapperInstance?.resize?.())
+
  return {
  refresh,
  elRef,