perf: 优化页面布局 (#349)

* perf: 优化页面布局

* fix: update

src/layout/components/navbar.vue

@@ -5,9 +5,7 @@ import mixNav from "./sidebar/mixNav.vue";
 import avatars from "/@/assets/avatars.jpg";
 import { useNav } from "/@/layout/hooks/useNav";
 import Breadcrumb from "./sidebar/breadCrumb.vue";
-import { deviceDetection } from "@pureadmin/utils";
 import topCollapse from "./sidebar/topCollapse.vue";
-import screenfull from "../components/screenfull/index.vue";
 import { useTranslationLang } from "../hooks/useTranslationLang";
 import globalization from "/@/assets/svg/globalization.svg?component";
 
@@ -50,8 +48,6 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
       <Search />
       <!-- 通知 -->
       <Notice id="header-notice" />
-      <!-- 全屏 -->
-      <screenfull id="header-screenfull" v-show="!deviceDetection()" />
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
         <globalization

src/layout/components/sidebar/horizontal.vue

@@ -5,8 +5,6 @@ import Notice from "../notice/index.vue";
 import SidebarItem from "./sidebarItem.vue";
 import avatars from "/@/assets/avatars.jpg";
 import { useNav } from "/@/layout/hooks/useNav";
-import screenfull from "../screenfull/index.vue";
-import { deviceDetection } from "@pureadmin/utils";
 import { useTranslationLang } from "../../hooks/useTranslationLang";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import globalization from "/@/assets/svg/globalization.svg?component";
@@ -62,8 +60,6 @@ watch(
       <Search />
       <!-- 通知 -->
       <Notice id="header-notice" />
-      <!-- 全屏 -->
-      <screenfull id="header-screenfull" v-show="!deviceDetection()" />
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
         <globalization

src/layout/components/sidebar/mixNav.vue

@@ -4,8 +4,6 @@ import Notice from "../notice/index.vue";
 import avatars from "/@/assets/avatars.jpg";
 import { useNav } from "/@/layout/hooks/useNav";
 import { transformI18n } from "/@/plugins/i18n";
-import screenfull from "../screenfull/index.vue";
-import { deviceDetection } from "@pureadmin/utils";
 import { ref, toRaw, watch, onMounted } from "vue";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 import { getParentPaths, findRouteByPath } from "/@/router/utils";
@@ -94,8 +92,6 @@ watch(
       <Search />
       <!-- 通知 -->
       <Notice id="header-notice" />
-      <!-- 全屏 -->
-      <screenfull id="header-screenfull" v-show="!deviceDetection()" />
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
         <globalization

src/layout/components/tag/index.scss

@@ -121,21 +121,6 @@
     }
   }
 
-  .right-button {
-    display: flex;
-    font-size: 16px;
-
-    li {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 40px;
-      height: 38px;
-      border-right: 1px solid #ccc;
-      cursor: pointer;
-    }
-  }
-
   /* 右键菜单 */
   .contextmenu {
     margin: 0;
@@ -196,6 +181,9 @@
   margin-right: 10px;
 }
 
+:deep(.el-dropdown-menu__item--divided) {
+  margin: 1px 0;
+}
 .el-dropdown-menu__item--divided::before {
   margin: 0;
 }
@@ -223,7 +211,8 @@
 }
 
 .arrow-left,
-.arrow-right {
+.arrow-right,
+.arrow-down {
   width: 40px;
   height: 38px;
   color: var(--el-text-color-primary);
@@ -248,7 +237,7 @@
 
 .arrow-right {
   box-shadow: -5px 0 5px -6px #ccc;
-  border-right: 1px solid #ccc;
+  border-right: 0.5px solid #ccc;
 
   &:hover {
     cursor: e-resize;
@@ -305,8 +294,3 @@
   background: var(--el-color-primary);
   animation: scheduleOutWidth 400ms ease-in;
 }
-
-/* 刷新按钮动画效果 */
-.refresh-button {
-  animation: rotate 600ms linear infinite;
-}

src/layout/components/tag/index.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
+import { $t } from "/@/plugins/i18n";
 import { emitter } from "/@/utils/mitt";
 import { RouteConfigs } from "../../types";
 import { useTags } from "../../hooks/useTag";
 import { routerArrays } from "/@/layout/types";
 import { isEqual, isEmpty } from "lodash-unified";
-import { toggleClass, removeClass } from "@pureadmin/utils";
-import { useResizeObserver, useDebounceFn } from "@vueuse/core";
 import { useSettingStoreHook } from "/@/store/modules/settings";
+import { ref, watch, unref, nextTick, onBeforeMount } from "vue";
 import { handleAliveRoute, delAliveRoutes } from "/@/router/utils";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
-import { ref, watch, unref, toRaw, nextTick, onBeforeMount } from "vue";
+import { useResizeObserver, useDebounceFn, useFullscreen } from "@vueuse/core";
 
 const {
   route,
@@ -23,6 +23,7 @@ const {
   buttonLeft,
   showModel,
   translateX,
+  pureSetting,
   activeIndex,
   getTabStyle,
   iconIsActive,
@@ -34,12 +35,15 @@ const {
   onMounted,
   onMouseenter,
   onMouseleave,
-  transformI18n
+  transformI18n,
+  onContentFullScreen
 } = useTags();
 
 const tabDom = ref();
 const containerDom = ref();
 const scrollbarDom = ref();
+let isShowArrow = ref(false);
+const { isFullscreen, toggle } = useFullscreen();
 
 const dynamicTagView = () => {
   const index = multiTags.value.findIndex(item => {
@@ -66,6 +70,9 @@ const moveToView = (index: number): void => {
     : 0;
   // 已有标签页总长度（包含溢出部分）
   const tabDomWidth = tabDom.value ? tabDom.value?.offsetWidth : 0;
+  scrollbarDomWidth <= tabDomWidth
+    ? (isShowArrow.value = true)
+    : (isShowArrow.value = false);
   if (tabDomWidth < scrollbarDomWidth || tabItemElOffsetLeft === 0) {
     translateX.value = 0;
   } else if (tabItemElOffsetLeft < -translateX.value) {
@@ -143,16 +150,11 @@ function dynamicRouteTag(value: string, parentPath: string): void {
 
 /** 刷新路由 */
 function onFresh() {
-  const refreshButton = "refresh-button";
-  toggleClass(true, refreshButton, document.querySelector(".rotate"));
   const { fullPath, query } = unref(route);
   router.replace({
     path: "/redirect" + fullPath,
     query: query
   });
-  setTimeout(() => {
-    removeClass(document.querySelector(".rotate"), refreshButton);
-  }, 600);
 }
 
 function deleteDynamicTag(obj: any, current: any, tag?: string) {
@@ -277,6 +279,32 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
       });
       router.push("/welcome");
       break;
+    case 6:
+      // 整体页面全屏
+      toggle();
+      setTimeout(() => {
+        if (isFullscreen.value) {
+          tagsViews[6].icon = "exit-fullscreen";
+          tagsViews[6].text = $t("buttons.hswholeExitFullScreen");
+        } else {
+          tagsViews[6].icon = "fullscreen";
+          tagsViews[6].text = $t("buttons.hswholeFullScreen");
+        }
+      }, 100);
+      break;
+    case 7:
+      // 内容区全屏
+      onContentFullScreen();
+      setTimeout(() => {
+        if (pureSetting.hiddenSideBar) {
+          tagsViews[7].icon = "exit-fullscreen";
+          tagsViews[7].text = $t("buttons.hscontentExitFullScreen");
+        } else {
+          tagsViews[7].icon = "fullscreen";
+          tagsViews[7].text = $t("buttons.hscontentFullScreen");
+        }
+      }, 100);
+      break;
   }
   setTimeout(() => {
     showMenuModel(route.fullPath, route.query);
@@ -467,9 +495,9 @@ onMounted(() => {
 
 <template>
   <div ref="containerDom" class="tags-view" v-if="!showTags">
-    <div class="arrow-left">
+    <span v-show="isShowArrow" class="arrow-left">
       <IconifyIconOffline icon="arrow-left-s-line" @click="handleScroll(200)" />
-    </div>
+    </span>
     <div ref="scrollbarDom" class="scroll-container">
       <div class="tab" ref="tabDom" :style="getTabStyle">
         <div
@@ -512,7 +540,7 @@ onMounted(() => {
         </div>
       </div>
     </div>
-    <span class="arrow-right">
+    <span v-show="isShowArrow" class="arrow-right">
       <IconifyIconOffline
         icon="arrow-right-s-line"
         @click="handleScroll(-200)"
@@ -527,59 +555,41 @@ onMounted(() => {
         class="contextmenu"
       >
         <div
-          v-for="(item, key) in tagsViews"
+          v-for="(item, key) in tagsViews.slice(0, 6)"
           :key="key"
           style="display: flex; align-items: center"
         >
           <li v-if="item.show" @click="selectTag(key, item)">
-            <component :is="toRaw(item.icon)" :key="key" />
+            <IconifyIconOffline :icon="item.icon" />
             {{ transformI18n(item.text) }}
           </li>
         </div>
       </ul>
     </transition>
     <!-- 右侧功能按钮 -->
-    <ul class="right-button">
-      <li>
-        <span
-          :title="transformI18n('buttons.hsrefreshRoute')"
-          class="el-icon-refresh-right rotate"
-          @click="onFresh"
-        >
-          <IconifyIconOffline icon="refresh-right" />
-        </span>
-      </li>
-      <li>
-        <el-dropdown
-          trigger="click"
-          placement="bottom-end"
-          @command="handleCommand"
-        >
-          <IconifyIconOffline icon="arrow-down" class="dark:text-white" />
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item
-                v-for="(item, key) in tagsViews"
-                :key="key"
-                :command="{ key, item }"
-                :divided="item.divided"
-                :disabled="item.disabled"
-              >
-                <component
-                  :is="toRaw(item.icon)"
-                  :key="key"
-                  style="margin-right: 6px"
-                />
-                {{ transformI18n(item.text) }}
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-      </li>
-      <li>
-        <slot />
-      </li>
-    </ul>
+    <el-dropdown
+      trigger="click"
+      placement="bottom-end"
+      @command="handleCommand"
+    >
+      <span class="arrow-down">
+        <IconifyIconOffline icon="arrow-down" class="dark:text-white" />
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item
+            v-for="(item, key) in tagsViews"
+            :key="key"
+            :command="{ key, item }"
+            :divided="item.divided"
+            :disabled="item.disabled"
+          >
+            <IconifyIconOffline :icon="item.icon" />
+            {{ transformI18n(item.text) }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
   </div>
 </template>