From 9ce6bd3b8677edd4d37e2d3d4a5459ffa61fb851 Mon Sep 17 00:00:00 2001
From: chansee97 <chen.dev@foxmail.com>
Date: Tue, 25 Jun 2024 00:27:37 +0800
Subject: [PATCH] feat: add mix layout

---
 .vscode/settings.json                         |  63 +++-----
 src/components/common/NovaIcon.vue            |  22 +--
 .../components/common/LayoutSelector.vue      |  20 ++-
 src/layouts/components/sider/Menu.vue         |   8 +-
 src/layouts/index.vue                         |   2 +
 src/layouts/mixMenu.layout.vue                | 152 ++++++++++++++++++
 src/store/app/index.ts                        |   2 +-
 src/store/router/index.ts                     |   3 +-
 8 files changed, 211 insertions(+), 61 deletions(-)
 create mode 100644 src/layouts/mixMenu.layout.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index d65a14b..2f40da9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,4 @@
 {
-  // Enable the ESlint flat config support
-  "eslint.experimental.useFlatConfig": true,
   // Disable the default formatter, use eslint instead
   "prettier.enable": false,
   "editor.formatOnSave": false,
@@ -11,46 +9,16 @@
   },
   // Silent the stylistic rules in you IDE, but still auto fix them
   "eslint.rules.customizations": [
-    {
-      "rule": "style/*",
-      "severity": "off"
-    },
-    {
-      "rule": "format/*",
-      "severity": "off"
-    },
-    {
-      "rule": "*-indent",
-      "severity": "off"
-    },
-    {
-      "rule": "*-spacing",
-      "severity": "off"
-    },
-    {
-      "rule": "*-spaces",
-      "severity": "off"
-    },
-    {
-      "rule": "*-order",
-      "severity": "off"
-    },
-    {
-      "rule": "*-dangle",
-      "severity": "off"
-    },
-    {
-      "rule": "*-newline",
-      "severity": "off"
-    },
-    {
-      "rule": "*quotes",
-      "severity": "off"
-    },
-    {
-      "rule": "*semi",
-      "severity": "off"
-    }
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "format/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
   ],
   // Enable eslint for all supported languages
   "eslint.validate": [
@@ -64,7 +32,16 @@
     "json",
     "jsonc",
     "yaml",
-    "toml"
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "css",
+    "less",
+    "scss",
+    "pcss",
+    "postcss"
   ],
   "i18n-ally.sourceLanguage": "zh_CN",
   "i18n-ally.displayLanguage": "zh_CN",
diff --git a/src/components/common/NovaIcon.vue b/src/components/common/NovaIcon.vue
index 02cfcae..e4eabf4 100644
--- a/src/components/common/NovaIcon.vue
+++ b/src/components/common/NovaIcon.vue
@@ -22,12 +22,14 @@ const isLocal = computed(() => {
 
 function getLocalIcon(icon: string) {
   const svgName = icon.replace('local:', '')
-  const svg = import.meta.glob('@/assets/svg-icons/*.svg', {
+  const svg = import.meta.glob<string>('@/assets/svg-icons/*.svg', {
     query: '?raw',
     import: 'default',
     eager: true,
   })
-  return svg[`/src/assets/svg-icons/${svgName}.svg`]
+
+  const domparser = new DOMParser()
+  return domparser.parseFromString(svg[`/src/assets/svg-icons/${svgName}.svg`], 'image/svg+xml')
 }
 </script>
 
@@ -38,15 +40,13 @@ function getLocalIcon(icon: string) {
     :depth="depth"
     :color="color"
   >
-    <Icon :icon="icon" />
-  </n-icon>
-  <n-icon
-    v-if="icon && isLocal"
-    :size="size"
-    :depth="depth"
-    :color="color"
-    v-html="getLocalIcon(icon)"
-  />
+    <template v-if="isLocal">
+      {{ getLocalIcon(icon) }}
+    </template>
+    <template v-else>
+      <Icon :icon="icon" />
+    </template>
+</n-icon>
 </template>
 
 <style scoped></style>
diff --git a/src/layouts/components/common/LayoutSelector.vue b/src/layouts/components/common/LayoutSelector.vue
index d0af8c4..0000c51 100644
--- a/src/layouts/components/common/LayoutSelector.vue
+++ b/src/layouts/components/common/LayoutSelector.vue
@@ -29,7 +29,7 @@ const value = defineModel<LayoutMode>('value', { required: true })
           :class="{
             'outline outline-2': value === 'topMenu',
           }"
-          class="grid  grid-rows-[30%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
+          class="grid grid-rows-[30%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
           @click="value = 'topMenu'"
         >
           <div class="bg-[var(--primary-color)]" />
@@ -38,6 +38,24 @@ const value = defineModel<LayoutMode>('value', { required: true })
       </template>
       <span> {{ $t('app.topMenu') }} </span>
     </n-tooltip>
+
+    <n-tooltip placement="bottom" trigger="hover">
+      <template #trigger>
+        <n-el
+          :class="{
+            'outline outline-2': value === 'mixMenu',
+          }"
+          class="grid grid-cols-[20%_1fr] grid-rows-[15%_15%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
+          @click="value = 'mixMenu'"
+        >
+          <div class="bg-[var(--primary-color)] row-span-3" />
+          <div class="bg-[var(--primary-color)]" />
+          <div class="bg-[var(--primary-color-suppl)]" />
+          <div class="bg-[var(--divider-color)]" />
+        </n-el>
+      </template>
+      <span> {{ $t('app.topMenu') }} </span>
+    </n-tooltip>
   </div>
 </template>
 
diff --git a/src/layouts/components/sider/Menu.vue b/src/layouts/components/sider/Menu.vue
index e90ba43..c11804c 100644
--- a/src/layouts/components/sider/Menu.vue
+++ b/src/layouts/components/sider/Menu.vue
@@ -4,13 +4,13 @@ import { useAppStore, useRouteStore } from '@/store'
 
 const route = useRoute()
 const appStore = useAppStore()
-const routesStore = useRouteStore()
+const routeStore = useRouteStore()
 
 const menuInstRef = ref<MenuInst | null>(null)
 watch(
   () => route.path,
   () => {
-    menuInstRef.value?.showOption(routesStore.activeMenu as string)
+    menuInstRef.value?.showOption(routeStore.activeMenu as string)
   },
   { immediate: true },
 )
@@ -22,7 +22,7 @@ watch(
     :collapsed="appStore.collapsed"
     :indent="20"
     :collapsed-width="64"
-    :options="routesStore.menus"
-    :value="routesStore.activeMenu"
+    :options="routeStore.menus"
+    :value="routeStore.activeMenu"
   />
 </template>
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index aa9399b..4364f29 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import leftMenu from './leftMenu.layout.vue'
 import topMenu from './topMenu.layout.vue'
+import mixMenu from './mixMenu.layout.vue'
 import { SettingDrawer } from './components'
 import { useAppStore } from '@/store/app'
 
@@ -8,6 +9,7 @@ const appStore = useAppStore()
 const layoutMap = {
   leftMenu,
   topMenu,
+  mixMenu,
 }
 </script>
 
diff --git a/src/layouts/mixMenu.layout.vue b/src/layouts/mixMenu.layout.vue
new file mode 100644
index 0000000..8a475b1
--- /dev/null
+++ b/src/layouts/mixMenu.layout.vue
@@ -0,0 +1,152 @@
+<script lang="ts" setup>
+import type { MenuInst, MenuOption } from 'naive-ui'
+import {
+  BackTop,
+  CollapaseButton,
+  FullScreen,
+  Logo,
+  Notices,
+  Search,
+  Setting,
+  TabBar,
+  UserCenter,
+} from './components'
+import { useAppStore, useRouteStore } from '@/store'
+
+const routeStore = useRouteStore()
+const appStore = useAppStore()
+const pageRoute = useRoute()
+const router = useRouter()
+
+const menuInstRef = ref<MenuInst | null>(null)
+
+watch(
+  () => pageRoute.path,
+  () => {
+    menuInstRef.value?.showOption(routeStore.activeMenu as string)
+  },
+  { immediate: true },
+)
+
+const topMenu = ref<MenuOption[]>([])
+const activeTopMenu = ref<string>('')
+function handleTopMenu(rowMenu: MenuOption[]) {
+  topMenu.value = rowMenu.map((i) => {
+    const { icon, label, key } = i
+    return {
+      icon,
+      label,
+      key,
+    }
+  })
+}
+
+onMounted(() => {
+  handleTopMenu(routeStore.menus)
+
+  // 根据当前页面获取选中菜单和对应侧边菜单
+  const currentMenuKey = pageRoute.matched[1].path
+  updateTopMenu(currentMenuKey)
+})
+
+const sideMenu = ref<MenuOption[]>([])
+function handleSideMenu(key: string) {
+  const targetMenu = routeStore.menus.find(i => i.key === key)
+  if (targetMenu) {
+    sideMenu.value = targetMenu.children ? targetMenu.children : [targetMenu]
+  }
+}
+
+function updateTopMenu(key: string) {
+  handleSideMenu(key)
+  activeTopMenu.value = key
+  router.push(key)
+}
+</script>
+
+<template>
+  <n-layout
+    has-sider
+    class="wh-full"
+    embedded
+  >
+    <n-layout-sider
+      bordered
+      :collapsed="appStore.collapsed"
+      collapse-mode="width"
+      :collapsed-width="64"
+      :width="240"
+      content-style="display: flex;flex-direction: column;min-height:100%;"
+    >
+      <Logo v-if="appStore.showLogo" />
+      <n-scrollbar class="flex-1">
+        <n-menu
+          ref="menuInstRef"
+          :collapsed="appStore.collapsed"
+          :indent="20"
+          :collapsed-width="64"
+          :options="sideMenu"
+          :value="routeStore.activeMenu"
+        />
+      </n-scrollbar>
+    </n-layout-sider>
+    <n-layout
+      class="h-full flex flex-col"
+      content-style="display: flex;flex-direction: column;min-height:100%;"
+      embedded
+      :native-scrollbar="false"
+    >
+      <n-layout-header bordered position="absolute" class="z-1">
+        <div class="h-60px flex-y-center justify-between">
+          <CollapaseButton />
+          <n-menu
+            ref="menuInstRef"
+            mode="horizontal"
+            responsive
+            :options="topMenu"
+            :value="activeTopMenu"
+            @update:value="updateTopMenu"
+          />
+          <div class="flex-y-center gap-1 h-full p-x-xl">
+            <Search />
+            <Notices />
+            <FullScreen />
+            <DarkModeSwitch />
+            <LangsSwitch />
+            <Setting />
+            <UserCenter />
+          </div>
+        </div>
+        <TabBar v-if="appStore.showTabs" class="h-45px" />
+      </n-layout-header>
+      <div class="flex-1 p-16px flex flex-col">
+        <div class="h-60px" />
+        <div v-if="appStore.showTabs" class="h-45px" />
+        <router-view v-slot="{ Component, route }" class="flex-1">
+          <transition
+            :name="appStore.transitionAnimation"
+            mode="out-in"
+          >
+            <keep-alive :include="routeStore.cacheRoutes">
+              <component
+                :is="Component"
+                v-if="appStore.loadFlag"
+                :key="route.fullPath"
+              />
+            </keep-alive>
+          </transition>
+        </router-view>
+        <div v-if="appStore.showFooter" class="h-40px" />
+      </div>
+      <n-layout-footer
+        v-if="appStore.showFooter"
+        bordered
+        position="absolute"
+        class="h-40px flex-center"
+      >
+        {{ appStore.footerText }}
+      </n-layout-footer>
+      <BackTop />
+    </n-layout>
+  </n-layout>
+</template>
diff --git a/src/store/app/index.ts b/src/store/app/index.ts
index 39e52c3..0285e99 100644
--- a/src/store/app/index.ts
+++ b/src/store/app/index.ts
@@ -5,7 +5,7 @@ import themeConfig from './theme.json'
 import { local, setLocale } from '@/utils'
 
 type TransitionAnimation = '' | 'fade-slide' | 'fade-bottom' | 'fade-scale' | 'zoom-fade' | 'zoom-out'
-export type LayoutMode = 'leftMenu' | 'topMenu'
+export type LayoutMode = 'leftMenu' | 'topMenu' | 'mixMenu'
 
 const docEle = ref(document.documentElement)
 
diff --git a/src/store/router/index.ts b/src/store/router/index.ts
index ac1908b..00833c4 100644
--- a/src/store/router/index.ts
+++ b/src/store/router/index.ts
@@ -1,3 +1,4 @@
+import type { MenuOption } from 'naive-ui'
 import { createMenus, createRoutes, generateCacheRoutes } from './helper'
 import { $t, local } from '@/utils'
 import { router } from '@/router'
@@ -7,7 +8,7 @@ import { useAuthStore } from '@/store/auth'
 
 interface RoutesStatus {
   isInitAuthRoute: boolean
-  menus: AppRoute.Route[]
+  menus: MenuOption[]
   rowRoutes: AppRoute.RowRoute[]
   activeMenu: string | null
   cacheRoutes: string[]