From fd6d61b17e135469b8793b624794a4bbc1fc20e4 Mon Sep 17 00:00:00 2001
From: SaarHV <dev16102@linx-info.com>
Date: Fri, 2 Dec 2022 16:24:52 +0800
Subject: [PATCH] Update overall layout

---
 package.json                          |  4 +-
 src/theme/app.scss                    | 40 +++++++++++++++++++
 src/theme/element.scss                | 24 ++++++++----
 src/views/layout/component/aside.vue  | 55 +++++++++++++++++++++++++++
 src/views/layout/component/header.vue | 13 +++++++
 src/views/layout/component/main.vue   | 35 +++++++++++++++++
 src/views/layout/fashion.vue          | 21 ++++++++++
 src/views/layout/index.vue            | 11 +++---
 src/views/layout/logo/index.vue       |  9 +++++
 9 files changed, 198 insertions(+), 14 deletions(-)
 create mode 100644 src/views/layout/component/aside.vue
 create mode 100644 src/views/layout/component/header.vue
 create mode 100644 src/views/layout/component/main.vue
 create mode 100644 src/views/layout/fashion.vue
 create mode 100644 src/views/layout/logo/index.vue

diff --git a/package.json b/package.json
index ec8892f..5361644 100644
--- a/package.json
+++ b/package.json
@@ -6,11 +6,13 @@
     "build": "vite build"
   },
   "dependencies": {
-    "element-plus": "^v1.0.1-beta.14",
+    "element-plus": "^v1.0.1-beta.17",
+    "sortablejs": "^1.10.2",
     "vue": "^3.0.4",
     "vue-router": "^4.0.1"
   },
   "devDependencies": {
+    "@types/sortablejs": "^1.10.6",
     "@vue/compiler-sfc": "^3.0.4",
     "sass": "^1.30.0",
     "sass-loader": "^10.1.0",
diff --git a/src/theme/app.scss b/src/theme/app.scss
index 534a2db..f2a34e1 100644
--- a/src/theme/app.scss
+++ b/src/theme/app.scss
@@ -9,12 +9,52 @@ body,
 #app {
   margin: 0;
   padding: 0;
+  width: 100%;
   height: 100%;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
     Microsoft YaHei, SimSun, sans-serif;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
   -webkit-tap-highlight-color: transparent;
+  background-color: #f8f8f8;
+  font-size: 14px;
+}
+
+.layout-container {
+  width: 100%;
+  height: 100%;
+  .el-aside {
+    background: #29384d;
+    border-right: 1px solid rgb(230, 230, 230);
+    height: inherit;
+  }
+  .el-header {
+    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+    padding: 0 !important;
+  }
+  .el-main {
+    padding: 0 !important;
+    overflow: unset !important;
+  }
+  .el-scrollbar {
+    width: 100%;
+  }
+  .layout-scrollbar {
+    @extend .el-scrollbar;
+    padding: 15px;
+  }
+  .el-scrollbar__view {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.w100 {
+  width: 100% !important;
+}
+.h100 {
+  height: 100% !important;
 }
 
 @for $i from 10 through 32 {
diff --git a/src/theme/element.scss b/src/theme/element.scss
index fadf8cd..d325836 100644
--- a/src/theme/element.scss
+++ b/src/theme/element.scss
@@ -643,19 +643,27 @@
 
 /* NavMenu */
 // horizontal
-.el-menu--horizontal > .el-menu-item.is-active,
-.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+.el-menu {
+  border-right: none !important;
+}
+.el-menu-item.is-active,
+.el-submenu.is-active .el-submenu__title {
   border-bottom-color: set-color(primary);
   color: set-color(primary);
 }
-.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
-.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
-.el-menu--horizontal > .el-submenu:focus .el-submenu__title,
-.el-menu--horizontal > .el-submenu:hover .el-submenu__title,
-.el-menu--horizontal .el-menu .el-menu-item.is-active,
-.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
+.el-menu-item:not(.is-disabled):focus,
+.el-menu-item:not(.is-disabled):hover,
+.el-submenu:focus .el-submenu__title,
+.el-submenu:hover .el-submenu__title,
+.el-menu .el-menu-item.is-active,
+.el-menu .el-submenu.is-active > .el-submenu__title {
   color: set-color(primary);
 }
+.el-menu-item a,
+.el-menu-item a:hover {
+  color: inherit;
+  text-decoration: none;
+}
 // default
 .el-menu-item.is-active {
   color: set-color(primary);
diff --git a/src/views/layout/component/aside.vue b/src/views/layout/component/aside.vue
new file mode 100644
index 0000000..33e6d9b
--- /dev/null
+++ b/src/views/layout/component/aside.vue
@@ -0,0 +1,55 @@
+<template>
+  <el-aside width="240px">
+    <el-scrollbar>
+      <Vertical :menuList="menuList" />
+    </el-scrollbar>
+  </el-aside>
+</template>
+
+<script lang="ts">
+import Vertical from "/@/views/layout/navMenu/vertical.vue";
+import { toRefs, reactive } from "vue";
+export default {
+  name: "layoutAside",
+  components: { Vertical },
+  setup() {
+    const state = reactive({
+      menuList: [
+        {
+          path: "/home",
+          meta: {
+            title: "首页",
+            icon: "el-icon-s-home",
+          },
+          children: [
+            {
+              path: "/test-page1",
+              meta: {
+                title: "测试页1",
+                icon: "el-icon-s-flag",
+              },
+            },
+            {
+              path: "/test-page2",
+              meta: {
+                title: "测试页2",
+                icon: "el-icon-s-flag",
+              },
+            },
+            {
+              path: "/test-page3",
+              meta: {
+                title: "测试页3",
+                icon: "el-icon-s-flag",
+              },
+            },
+          ],
+        },
+      ],
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/views/layout/component/header.vue b/src/views/layout/component/header.vue
new file mode 100644
index 0000000..370f58f
--- /dev/null
+++ b/src/views/layout/component/header.vue
@@ -0,0 +1,13 @@
+<template>
+  <el-header height="84px">
+    <NavBarsIndex />
+  </el-header>
+</template>
+
+<script lang="ts">
+import NavBarsIndex from "/@/views/layout/navBars/index.vue";
+export default {
+  name: "layoutHeader",
+  components: { NavBarsIndex },
+};
+</script>
\ No newline at end of file
diff --git a/src/views/layout/component/main.vue b/src/views/layout/component/main.vue
new file mode 100644
index 0000000..9993bb3
--- /dev/null
+++ b/src/views/layout/component/main.vue
@@ -0,0 +1,35 @@
+<template>
+  <el-main>
+    <el-scrollbar class="layout-scrollbar">
+      <router-view v-slot="{ Component }">
+        <transition appear :name="transitionName" mode="out-in">
+          <div :key="key">
+            <keep-alive>
+              <component :is="Component" />
+            </keep-alive>
+          </div>
+        </transition>
+      </router-view>
+    </el-scrollbar>
+  </el-main>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, toRefs, reactive } from "vue";
+import { useRoute, onBeforeRouteUpdate } from "vue-router";
+export default defineComponent({
+  name: "layoutMain",
+  setup() {
+    const route = useRoute();
+    const state = reactive({
+      transitionName: "slide-right",
+    });
+    const key = computed(() => route.path);
+    onBeforeRouteUpdate((to, from) => {
+      state.transitionName =
+        to.meta.index > from.meta.index ? "slide-right" : "slide-left";
+    });
+    return { key, ...toRefs(state) };
+  },
+});
+</script>
diff --git a/src/views/layout/fashion.vue b/src/views/layout/fashion.vue
new file mode 100644
index 0000000..9a36aa0
--- /dev/null
+++ b/src/views/layout/fashion.vue
@@ -0,0 +1,21 @@
+<template>
+  <el-container class="layout-container">
+    <Aside />
+    <el-container>
+      <el-scrollbar>
+        <Header />
+        <Main />
+      </el-scrollbar>
+    </el-container>
+  </el-container>
+</template>
+
+<script lang="ts">
+import Aside from '/@/views/layout/component/aside.vue';
+import Header from '/@/views/layout/component/header.vue';
+import Main from '/@/views/layout/component/main.vue';
+export default {
+  name: 'layoutFashion',
+  components: { Aside, Header, Main }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 434632d..2ddcb5a 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -1,10 +1,11 @@
 <template>
-    layout
-    <router-view></router-view>
+  <Fashion />
 </template>
-  
+
 <script lang="ts">
+import Fashion from "/@/views/layout/fashion.vue";
 export default {
-    name: "layout",
+  name: "layout",
+  components: { Fashion },
 };
-</script>
+</script>
\ No newline at end of file
diff --git a/src/views/layout/logo/index.vue b/src/views/layout/logo/index.vue
new file mode 100644
index 0000000..8130e47
--- /dev/null
+++ b/src/views/layout/logo/index.vue
@@ -0,0 +1,9 @@
+<template>
+  layoutLogo
+</template>
+
+<script lang="ts">
+export default {
+  name: "layoutLogo",
+};
+</script>
\ No newline at end of file
-- 
Gitee