feat: add horizontal nav (#45)

* feat: add horizontal nav

* workflow: update linter.yml

* fix: update

* fix: update

* fix: update

* Rename Link.vue to link.vue

* Rename SidebarItem.vue to sidebarItem.vue

* Rename Logo.vue to logo.vue

* Rename AppMain.vue to appMain.vue

* Rename Navbar.vue to navbar.vue

* fix: update

* fix: update

* fix: update

* workflow: update linter.yml

* fix: update

* chore: update

* workflow: update

* fix: update

* fix: update

* fix: update

* perf: 外链功能实现方式改变

* style: update nav style

* perf: 优化国际化

* fix: update

* fix: update

src/layout/index.vue

@@ -1,3 +1,41 @@
+<script lang="ts">
+let routerArrays: Array<object> = [
+  {
+    path: "/welcome",
+    parentPath: "/",
+    meta: {
+      title: "message.hshome",
+      icon: "el-icon-s-home",
+      showLink: true,
+      savedPosition: false
+    }
+  }
+];
+export default {
+  computed: {
+    layout() {
+      if (!this.$storage.layout) {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.$storage.layout = { layout: "vertical-dark" };
+      }
+      if (
+        !this.$storage.routesInStorage ||
+        this.$storage.routesInStorage.length === 0
+      ) {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.$storage.routesInStorage = routerArrays;
+      }
+      if (!this.$storage.locale) {
+        // eslint-disable-next-line
+        this.$storage.locale = { locale: "zh" };
+        useI18n().locale.value = "zh";
+      }
+      return this.$storage?.layout.layout;
+    }
+  }
+};
+</script>
+
 <script setup lang="ts">
 import {
   ref,
@@ -10,13 +48,20 @@ import {
   useCssModule
 } from "vue";
 import options from "/@/settings";
+import { useI18n } from "vue-i18n";
 import { toggleClass } from "/@/utils/operate";
 import { useEventListener } from "@vueuse/core";
 import { useAppStoreHook } from "/@/store/modules/app";
 import fullScreen from "/@/assets/svg/full_screen.svg";
 import exitScreen from "/@/assets/svg/exit_screen.svg";
 import { useSettingStoreHook } from "/@/store/modules/settings";
-import { Navbar, Sidebar, AppMain, setting, tag } from "./components";
+
+import navbar from "./components/navbar.vue";
+import tag from "./components/tag/index.vue";
+import appMain from "./components/appMain.vue";
+import setting from "./components/setting/index.vue";
+import Vertical from "./components/sidebar/vertical.vue";
+import Horizontal from "./components/sidebar/horizontal.vue";
 
 interface setInter {
   sidebar: any;
@@ -118,19 +163,25 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <div :class="set.classes" class="app-wrapper">
+  <div :class="['app-wrapper', set.classes]">
     <div
-      v-if="set.device === 'mobile' && set.sidebar.opened"
+      v-show="
+        set.device === 'mobile' &&
+        set.sidebar.opened &&
+        layout.includes('vertical')
+      "
       class="drawer-bg"
       @click="handleClickOutside(false)"
     />
-    <!-- 侧边栏 -->
-    <sidebar class="sidebar-container" v-if="!containerHiddenSideBar" />
+    <Vertical v-show="!containerHiddenSideBar && layout.includes('vertical')" />
     <div class="main-container">
       <div :class="{ 'fixed-header': set.fixedHeader }">
         <!-- 顶部导航栏 -->
-        <navbar v-show="!containerHiddenSideBar" />
+        <navbar
+          v-show="!containerHiddenSideBar && layout.includes('vertical')"
+        />
         <!-- tabs标签页 -->
+        <Horizontal v-show="layout.includes('horizontal')" />
         <tag>
           <span @click="onFullScreen">
             <fullScreen v-if="!containerHiddenSideBar" />
@@ -194,10 +245,6 @@ $sideBarWidth: 210px;
   transition: width 0.28s;
 }
 
-.hideSidebar .fixed-header {
-  width: calc(100% - 54px);
-}
-
 .mobile .fixed-header {
   width: 100%;
 }