Merge branch 'master' of https://gitee.com/youlaiorg/vue3-element-admin

src/layout/components/Settings/index.vue

@@ -96,8 +96,6 @@ function changeLayout(layout: string) {
   settingsStore.changeLayout(layout);
   if (layout === LayoutEnum.MIX) {
     route.name && againActiveTop(route.name as string);
-  } else if (layout === LayoutEnum.TOP) {
-    appStore.openSideBar();
   }
 }
 

src/layout/components/Sidebar/components/SidebarMenu.vue

@@ -8,14 +8,13 @@
     :active-text-color="variables['menu-active-text']"
     :unique-opened="false"
     :collapse-transition="false"
-    :mode="layout === 'top' ? 'horizontal' : 'vertical'"
+    :mode="mode"
   >
     <SidebarMenuItem
       v-for="route in menuList"
       :key="route.path"
       :item="route"
       :base-path="resolvePath(route.path)"
-      :is-collapse="!appStore.sidebar.opened"
     />
   </el-menu>
 </template>
@@ -25,11 +24,11 @@ import { useSettingsStore, useAppStore } from "@/store";
 import { isExternal } from "@/utils/index";
 import path from "path-browserify";
 import variables from "@/styles/variables.module.scss";
+import { LayoutEnum } from "@/enums/LayoutEnum";
 
 const settingsStore = useSettingsStore();
 const appStore = useAppStore();
 const currentRoute = useRoute();
-const layout = computed(() => settingsStore.layout);
 const props = defineProps({
   menuList: {
     required: true,
@@ -43,6 +42,9 @@ const props = defineProps({
     required: true,
   },
 });
+const mode = computed(() => {
+  return settingsStore.layout === LayoutEnum.TOP ? "horizontal" : "vertical";
+});
 
 /**
  * 解析路径

src/layout/index.vue

@@ -38,7 +38,7 @@
     <!-- 左侧和顶部布局 -->
     <div v-else :class="{ hasTagsView: showTagsView }" class="main-container">
       <div :class="{ 'fixed-header': fixedHeader }">
-        <NavBar v-if="layout === 'left'" />
+        <NavBar v-if="layout === LayoutEnum.LEFT" />
         <TagsView v-if="showTagsView" />
       </div>
       <AppMain />

src/views/error-page/401.vue

@@ -2,15 +2,12 @@
 import { reactive, toRefs } from "vue";
 import { useRouter } from "vue-router";
 
-import { defineComponent } from "vue";
+defineOptions({
-
-defineComponent({
   name: "Page401",
 });
 
 const state = reactive({
   errGif: new URL(`../../assets/images/401.gif`, import.meta.url).href,
-
   ewizardClap:
     "https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646",
   dialogVisible: false,
@@ -26,7 +23,7 @@ function back() {
 </script>
 
 <template>
-  <div class="errPage-container">
+  <div class="page-container">
     <el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">
       返回
     </el-button>
@@ -65,10 +62,9 @@ function back() {
 </template>
 
 <style lang="scss" scoped>
-.errPage-container {
+.page-container {
-  width: 800px;
+  width: 100%;
-  max-width: 100%;
+  padding: 100px;
-  margin: 100px auto;
 
   .pan-back-btn {
     color: #fff;

src/views/error-page/404.vue

@@ -1,76 +1,68 @@
-<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
-<script lang="ts">
-export default {
-  name: "Page404",
-};
-</script>
-
 <script setup lang="ts">
-function message() {
+import { useRouter } from "vue-router";
-  return "The webmaster said that you can not enter this page...";
+
+defineOptions({
+  name: "Page404",
+});
+
+const router = useRouter();
+
+function back() {
+  router.back();
 }
 </script>
 
 <template>
-  <div class="wscn-http404-container">
+  <div class="page-container">
-    <div class="wscn-http404">
+    <div class="pic-404">
-      <div class="pic-404">
+      <img class="pic-404__parent" src="@/assets/images/404.png" alt="404" />
-        <img class="pic-404__parent" src="@/assets/images/404.png" alt="404" />
+      <img
-        <img
+        class="pic-404__child left"
-          class="pic-404__child left"
+        src="@/assets/images/404_cloud.png"
-          src="@/assets/images/404_cloud.png"
+        alt="404"
-          alt="404"
+      />
-        />
+      <img
-        <img
+        class="pic-404__child mid"
-          class="pic-404__child mid"
+        src="@/assets/images/404_cloud.png"
-          src="@/assets/images/404_cloud.png"
+        alt="404"
-          alt="404"
+      />
-        />
+      <img
-        <img
+        class="pic-404__child right"
-          class="pic-404__child right"
+        src="@/assets/images/404_cloud.png"
-          src="@/assets/images/404_cloud.png"
+        alt="404"
-          alt="404"
+      />
-        />
+    </div>
+    <div class="bullshit">
+      <div class="bullshit__oops">OOPS!</div>
+      <div class="bullshit__info">
+        All rights reserved
+        <a
+          style="color: #20a0ff"
+          href="https://wallstreetcn.com"
+          target="_blank"
+          >wallstreetcn</a
+        >
       </div>
-      <div class="bullshit">
+      <div class="bullshit__headline">
-        <div class="bullshit__oops">OOPS!</div>
+        The webmaster said that you can not enter this page...
-        <div class="bullshit__info">
-          All rights reserved
-          <a
-            style="color: #20a0ff"
-            href="https://wallstreetcn.com"
-            target="_blank"
-            >wallstreetcn</a
-          >
-        </div>
-        <div class="bullshit__headline">{{ message() }}</div>
-        <div class="bullshit__info">
-          Please check that the URL you entered is correct, or click the button
-          below to return to the homepage.
-        </div>
-        <a href="" class="bullshit__return-home">Back to home</a>
       </div>
+      <div class="bullshit__info">
+        Please check that the URL you entered is correct, or click the button
+        below to return to the homepage.
+      </div>
+      <a href="#" class="bullshit__return-home" @click.prevent="back">
+        Back to home
+      </a>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.wscn-http404-container {
+.page-container {
-  position: absolute;
+  display: flex;
-  top: 40%;
+  padding: 100px;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.wscn-http404 {
-  position: relative;
-  width: 1200px;
-  padding: 0 50px;
-  overflow: hidden;
 
   .pic-404 {
-    position: relative;
-    float: left;
     width: 600px;
     overflow: hidden;
 
@@ -79,8 +71,6 @@ function message() {
     }
 
     &__child {
-      position: absolute;
-
       &.left {
         top: 17px;
         left: 220px;
@@ -198,8 +188,6 @@ function message() {
   }
 
   .bullshit {
-    position: relative;
-    float: left;
     width: 300px;
     padding: 30px 0;
     overflow: hidden;