feat: 添加无Layout的空白页面示例

locales/en.yaml

@@ -21,6 +21,7 @@ buttons:
 menus:
   hshome: Home
   hslogin: Login
+  hsempty: Empty Page
   hssysManagement: System Manage
   hsUser: User Manage
   hsDict: Dict Manage

locales/zh-CN.yaml

@@ -21,6 +21,7 @@ buttons:
 menus:
   hshome: 首页
   hslogin: 登录
+  hsempty: 无Layout页
   hssysManagement: 系统管理
   hsUser: 用户管理
   hsDict: 字典管理

src/assets/svg/back.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 48 48"><path fill="#2F88FF" fill-rule="evenodd" stroke="#000" stroke-linejoin="round" stroke-width="4" d="M44 40.8361C39.1069 34.8632 34.7617 31.4739 30.9644 30.6682C27.1671 29.8625 23.5517 29.7408 20.1182 30.303V41L4 23.5453L20.1182 7V17.167C26.4667 17.2172 31.8638 19.4948 36.3095 24C40.7553 28.5052 43.3187 34.1172 44 40.8361Z" clip-rule="evenodd"/></svg>

src/layout/components/sidebar/vertical.vue

@@ -69,7 +69,7 @@ watch(
         router
         unique-opened
         mode="vertical"
-        class="outer-most"
+        class="outer-most select-none"
         :collapse="isCollapse"
         :default-active="route.path"
         :collapse-transition="false"
@@ -79,8 +79,8 @@ watch(
           v-for="routes in menuData"
           :key="routes.path"
           :item="routes"
-          class="outer-most"
           :base-path="routes.path"
+          class="outer-most select-none"
         />
       </el-menu>
     </el-scrollbar>

src/router/modules/remaining.ts

@@ -28,6 +28,17 @@ const remainingRouter = [
         component: () => import("/@/layout/redirect.vue")
       }
     ]
+  },
+  // 下面是一个无layout菜单的例子（一个全屏空白页面），因为这种情况极少发生，所以只需要在前端配置即可（配置路径：src/router/modules/remaining.ts）
+  {
+    path: "/empty",
+    name: "Empty",
+    component: () => import("/@/views/empty/index.vue"),
+    meta: {
+      title: $t("menus.hsempty"),
+      showLink: false,
+      rank: 105
+    }
   }
 ];
 

src/views/empty/index.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import back from "/@/assets/svg/back.svg?component";
+
+defineOptions({
+  name: "Empty"
+});
+</script>
+
+<template>
+  <div class="back" title="返回上一页" @click="$router.go(-1)">
+    <back class="w-80px h-80px" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.back {
+  width: 200px;
+  height: 200px;
+  cursor: pointer;
+  border-radius: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(138, 150, 160, 0.08);
+
+  &:hover {
+    background: rgba(138, 150, 160, 0.2);
+    transition: background 0.6s;
+  }
+}
+</style>

src/views/tabs/index.vue

@@ -93,5 +93,10 @@ function onCloseTags() {
       <br />
       开启方式：在页面最右上角有个设置的小图标，点进去，会看到项目配置面板，找到标签页持久化开启即可。
     </p>
+
+    <el-divider />
+    <el-button @click="$router.push({ name: 'Empty' })">
+      跳转无Layout的空白页面
+    </el-button>
   </el-card>
 </template>