release: update 5.2.0

src/layout/components/appMain.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Footer from "./footer/index.vue";
-import { useGlobal } from "@pureadmin/utils";
+import { useGlobal, isNumber } from "@pureadmin/utils";
 import KeepAliveFrame from "./keepAliveFrame/index.vue";
 import backTop from "@/assets/svg/back_top.svg?component";
 import { h, computed, Transition, defineComponent } from "vue";
@@ -30,16 +30,28 @@ const hideFooter = computed(() => {
   return $storage?.configure.hideFooter;
 });
 
+const stretch = computed(() => {
+  return $storage?.configure.stretch;
+});
+
 const layout = computed(() => {
   return $storage?.layout.layout === "vertical";
 });
 
+const getMainWidth = computed(() => {
+  return isNumber(stretch.value)
+    ? stretch.value + "px"
+    : stretch.value
+      ? "1440px"
+      : "100%";
+});
+
 const getSectionStyle = computed(() => {
   return [
     hideTabs.value && layout ? "padding-top: 48px;" : "",
-    !hideTabs.value && layout ? "padding-top: 85px;" : "",
+    !hideTabs.value && layout ? "padding-top: 81px;" : "",
     hideTabs.value && !layout.value ? "padding-top: 48px;" : "",
-    !hideTabs.value && !layout.value ? "padding-top: 85px;" : "",
+    !hideTabs.value && !layout.value ? "padding-top: 81px;" : "",
     props.fixedHeader
       ? ""
       : `padding-top: 0;${
@@ -96,12 +108,15 @@ const transitionMain = defineComponent({
               v-if="props.fixedHeader"
               :wrap-style="{
                 display: 'flex',
-                'flex-wrap': 'wrap'
+                'flex-wrap': 'wrap',
+                'max-width': getMainWidth,
+                margin: '0 auto',
+                transition: 'all 300ms cubic-bezier(0.4, 0, 0.2, 1)'
               }"
               :view-style="{
                 display: 'flex',
                 flex: 'auto',
-                overflow: 'auto',
+                overflow: 'hidden',
                 'flex-direction': 'column'
               }"
             >

src/layout/components/keepAliveFrame/index.vue

@@ -63,7 +63,6 @@ watch(
   }
 );
 </script>
-
 <template>
   <template v-for="[fullPath, Comp] in compList" :key="fullPath">
     <div v-show="fullPath === props.currRoute.fullPath" class="w-full h-full">

src/layout/components/navbar.vue

@@ -3,6 +3,7 @@ import Search from "./search/index.vue";
 import Notice from "./notice/index.vue";
 import mixNav from "./sidebar/mixNav.vue";
 import { useNav } from "@/layout/hooks/useNav";
+import FullScreen from "./sidebar/fullScreen.vue";
 import Breadcrumb from "./sidebar/breadCrumb.vue";
 import topCollapse from "./sidebar/topCollapse.vue";
 import { useTranslationLang } from "../hooks/useTranslationLang";
@@ -10,7 +11,6 @@ import globalization from "@/assets/svg/globalization.svg?component";
 import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
 import Setting from "@iconify-icons/ri/settings-3-line";
 import Check from "@iconify-icons/ep/check";
-
 const {
   layout,
   device,
@@ -47,8 +47,6 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
     <div v-if="layout === 'vertical'" class="vertical-header-right">
       <!-- 菜单搜索 -->
       <Search id="header-search" />
-      <!-- 通知 -->
-      <Notice id="header-notice" />
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
         <globalization
@@ -81,6 +79,10 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
           </el-dropdown-menu>
         </template>
       </el-dropdown>
+      <!-- 全屏 -->
+      <FullScreen id="full-screen" />
+      <!-- 消息通知 -->
+      <Notice id="header-notice" />
       <!-- 退出登录 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover select-none">

src/layout/components/setting/index.vue

@@ -13,13 +13,15 @@ import panel from "../panel/index.vue";
 import { emitter } from "@/utils/mitt";
 import { useNav } from "@/layout/hooks/useNav";
 import { useAppStoreHook } from "@/store/modules/app";
-import { useDark, useGlobal, debounce } from "@pureadmin/utils";
 import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import Segmented, { type OptionsType } from "@/components/ReSegmented";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
+import { useDark, useGlobal, debounce, isNumber } from "@pureadmin/utils";
 
 import Check from "@iconify-icons/ep/check";
+import LeftArrow from "@iconify-icons/ri/arrow-left-s-line";
+import RightArrow from "@iconify-icons/ri/arrow-right-s-line";
 import dayIcon from "@/assets/svg/day.svg?component";
 import darkIcon from "@/assets/svg/dark.svg?component";
 import systemIcon from "@/assets/svg/system.svg?component";
@@ -64,7 +66,8 @@ const settings = reactive({
   showLogo: $storage.configure.showLogo,
   showModel: $storage.configure.showModel,
   hideFooter: $storage.configure.hideFooter,
-  multiTagsCache: $storage.configure.multiTagsCache
+  multiTagsCache: $storage.configure.multiTagsCache,
+  stretch: $storage.configure.stretch
 });
 
 const getThemeColorStyle = computed(() => {
@@ -141,6 +144,30 @@ function setFalse(Doms): any {
   });
 }
 
+/** 页宽 */
+const stretchTypeOptions: Array<OptionsType> = [
+  {
+    label: "固定",
+    tip: "紧凑页面，轻松找到所需信息",
+    value: "fixed"
+  },
+  {
+    label: "自定义",
+    tip: "最小1280、最大1600",
+    value: "custom"
+  }
+];
+
+const setStretch = value => {
+  settings.stretch = value;
+  storageConfigureChange("stretch", value);
+};
+
+const stretchTypeChange = ({ option }) => {
+  const { value } = option;
+  value === "custom" ? setStretch(1440) : setStretch(false);
+};
+
 /** 主题色 激活选择项 */
 const getThemeColor = computed(() => {
   return current => {
@@ -160,6 +187,10 @@ const getThemeColor = computed(() => {
   };
 });
 
+const pClass = computed(() => {
+  return ["mb-[12px]", "font-medium", "text-sm", "dark:text-white"];
+});
+
 const themeOptions = computed<Array<OptionsType>>(() => {
   return [
     {
@@ -277,8 +308,8 @@ onUnmounted(() => removeMatchMedia);
 
 <template>
   <panel>
-    <div class="p-6">
-      <p class="mb-3 font-medium text-sm dark:text-white">整体风格</p>
+    <div class="p-5">
+      <p :class="pClass">整体风格</p>
       <Segmented
         class="select-none"
         :modelValue="overallStyle === 'system' ? 2 : dataTheme ? 1 : 0"
@@ -295,7 +326,7 @@ onUnmounted(() => removeMatchMedia);
         "
       />
 
-      <p class="mt-5 mb-3 font-medium text-sm dark:text-white">主题色</p>
+      <p :class="['mt-5', pClass]">主题色</p>
       <ul class="theme-color">
         <li
           v-for="(item, index) in themeColors"
@@ -314,7 +345,7 @@ onUnmounted(() => removeMatchMedia);
         </li>
       </ul>
 
-      <p class="mt-5 mb-3 font-medium text-sm dark:text-white">导航模式</p>
+      <p :class="['mt-5', pClass]">导航模式</p>
       <ul class="pure-theme">
         <li
           ref="verticalRef"
@@ -356,7 +387,50 @@ onUnmounted(() => removeMatchMedia);
         </li>
       </ul>
 
-      <p class="mt-5 mb-3 font-medium text-base dark:text-white">页签风格</p>
+      <span v-if="device !== 'mobile'">
+        <p :class="['mt-5', pClass]">页宽</p>
+        <Segmented
+          class="mb-2 select-none"
+          :modelValue="isNumber(settings.stretch) ? 1 : 0"
+          :options="stretchTypeOptions"
+          @change="stretchTypeChange"
+        />
+        <el-input-number
+          v-if="isNumber(settings.stretch)"
+          v-model="settings.stretch as number"
+          :min="1280"
+          :max="1600"
+          controls-position="right"
+          @change="value => setStretch(value)"
+        />
+        <button
+          v-else
+          v-ripple="{ class: 'text-gray-300' }"
+          class="bg-transparent flex-c w-full h-20 rounded-md border border-gray-100"
+          @click="setStretch(!settings.stretch)"
+        >
+          <div
+            class="flex-bc transition-all duration-300"
+            :class="[settings.stretch ? 'w-[24%]' : 'w-[50%]']"
+            style="color: var(--el-color-primary)"
+          >
+            <IconifyIconOffline
+              :icon="settings.stretch ? RightArrow : LeftArrow"
+              height="20"
+            />
+            <div
+              class="flex-grow border-b border-dashed"
+              style="border-color: var(--el-color-primary)"
+            />
+            <IconifyIconOffline
+              :icon="settings.stretch ? LeftArrow : RightArrow"
+              height="20"
+            />
+          </div>
+        </button>
+      </span>
+
+      <p :class="['mt-4', pClass]">页签风格</p>
       <Segmented
         class="select-none"
         :modelValue="markValue === 'smart' ? 0 : 1"
@@ -364,7 +438,7 @@ onUnmounted(() => removeMatchMedia);
         @change="onChange"
       />
 
-      <p class="mt-5 mb-1 font-medium text-sm dark:text-white">界面显示</p>
+      <p class="mt-5 font-medium text-sm dark:text-white">界面显示</p>
       <ul class="setting">
         <li>
           <span class="dark:text-white">灰色模式</span>
@@ -543,7 +617,7 @@ onUnmounted(() => removeMatchMedia);
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 4px 0;
+    padding: 3px 0;
     font-size: 14px;
   }
 }

src/layout/components/sidebar/centerCollapse.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useGlobal } from "@pureadmin/utils";
+import { useNav } from "@/layout/hooks/useNav";
+
+import ArrowLeft from "@iconify-icons/ri/arrow-left-double-fill";
+
+interface Props {
+  isActive: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isActive: false
+});
+
+const { tooltipEffect } = useNav();
+
+const iconClass = computed(() => {
+  return ["w-[16px]", "h-[16px]"];
+});
+
+const { $storage } = useGlobal<GlobalPropertiesApi>();
+const themeColor = computed(() => $storage.layout?.themeColor);
+
+const emit = defineEmits<{
+  (e: "toggleClick"): void;
+}>();
+
+const toggleClick = () => {
+  emit("toggleClick");
+};
+</script>
+
+<template>
+  <div
+    v-tippy="{
+      content: props.isActive ? '点击折叠' : '点击展开',
+      theme: tooltipEffect,
+      hideOnClick: 'toggle',
+      placement: 'right'
+    }"
+    class="center-collapse"
+    @click="toggleClick"
+  >
+    <IconifyIconOffline
+      :icon="ArrowLeft"
+      :class="[iconClass, themeColor === 'light' ? '' : 'text-primary']"
+      :style="{ transform: props.isActive ? 'none' : 'rotateY(180deg)' }"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.center-collapse {
+  position: absolute;
+  top: 50%;
+  right: 2px;
+  z-index: 1002;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 34px;
+  cursor: pointer;
+  background: var(--el-bg-color);
+  border: 1px solid var(--pure-border-color);
+  border-radius: 4px;
+  transform: translate(12px, -50%);
+}
+</style>

src/layout/components/sidebar/fullScreen.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useNav } from "@/layout/hooks/useNav";
+
+const screenIcon = ref();
+const { toggle, isFullscreen, Fullscreen, ExitFullscreen } = useNav();
+
+isFullscreen.value = !!(
+  document.fullscreenElement ||
+  document.webkitFullscreenElement ||
+  document.mozFullScreenElement ||
+  document.msFullscreenElement
+);
+
+watch(
+  isFullscreen,
+  full => {
+    screenIcon.value = full ? ExitFullscreen : Fullscreen;
+  },
+  {
+    immediate: true
+  }
+);
+</script>
+
+<template>
+  <span class="fullscreen-icon navbar-bg-hover" @click="toggle">
+    <IconifyIconOffline :icon="screenIcon" />
+  </span>
+</template>

src/layout/components/sidebar/horizontal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Search from "../search/index.vue";
 import Notice from "../notice/index.vue";
+import FullScreen from "./fullScreen.vue";
 import SidebarItem from "./sidebarItem.vue";
 import { isAllEmpty } from "@pureadmin/utils";
 import { ref, nextTick, computed } from "vue";
@@ -65,8 +66,6 @@ nextTick(() => {
     <div class="horizontal-header-right">
       <!-- 菜单搜索 -->
       <Search id="header-search" />
-      <!-- 通知 -->
-      <Notice id="header-notice" />
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
         <globalization
@@ -97,6 +96,10 @@ nextTick(() => {
           </el-dropdown-menu>
         </template>
       </el-dropdown>
+      <!-- 全屏 -->
+      <FullScreen id="full-screen" />
+      <!-- 消息通知 -->
+      <Notice id="header-notice" />
       <!-- 退出登录 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover">

src/layout/components/sidebar/leftCollapse.vue

@@ -41,7 +41,7 @@ const toggleClick = () => {
 </script>
 
 <template>
-  <div class="collapse-container">
+  <div class="left-collapse">
     <IconifyIconOffline
       v-tippy="{
         content: props.isActive ? '点击折叠' : '点击展开',
@@ -58,7 +58,7 @@ const toggleClick = () => {
 </template>
 
 <style lang="scss" scoped>
-.collapse-container {
+.left-collapse {
   position: absolute;
   bottom: 0;
   width: 100%;

src/layout/components/sidebar/mixNav.vue

@@ -2,6 +2,7 @@
 import extraIcon from "./extraIcon.vue";
 import Search from "../search/index.vue";
 import Notice from "../notice/index.vue";
+import FullScreen from "./fullScreen.vue";
 import { isAllEmpty } from "@pureadmin/utils";
 import { useNav } from "@/layout/hooks/useNav";
 import { transformI18n } from "@/plugins/i18n";
@@ -98,8 +99,6 @@ watch(
     <div class="horizontal-header-right">
       <!-- 菜单搜索 -->
       <Search id="header-search" />
-      <!-- 通知 -->
-      <Notice id="header-notice" />
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
         <globalization
@@ -130,6 +129,10 @@ watch(
           </el-dropdown-menu>
         </template>
       </el-dropdown>
+      <!-- 全屏 -->
+      <FullScreen id="full-screen" />
+      <!-- 消息通知 -->
+      <Notice id="header-notice" />
       <!-- 退出登录 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover select-none">

src/layout/components/sidebar/vertical.vue

@@ -3,8 +3,9 @@ import Logo from "./logo.vue";
 import { useRoute } from "vue-router";
 import { emitter } from "@/utils/mitt";
 import SidebarItem from "./sidebarItem.vue";
-import leftCollapse from "./leftCollapse.vue";
+import LeftCollapse from "./leftCollapse.vue";
 import { useNav } from "@/layout/hooks/useNav";
+import CenterCollapse from "./centerCollapse.vue";
 import { responsiveStorageNameSpace } from "@/config";
 import { storageLocal, isAllEmpty } from "@pureadmin/utils";
 import { findRouteByPath, getParentPaths } from "@/router/utils";
@@ -12,6 +13,7 @@ import { usePermissionStoreHook } from "@/store/modules/permission";
 import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
 
 const route = useRoute();
+const isShow = ref(false);
 const showLogo = ref(
   storageLocal().getItem<StorageConfigs>(
     `${responsiveStorageNameSpace()}configure`
@@ -88,6 +90,8 @@ onBeforeUnmount(() => {
   <div
     v-loading="loading"
     :class="['sidebar-container', showLogo ? 'has-logo' : 'no-logo']"
+    @mouseenter.prevent="isShow = true"
+    @mouseleave.prevent="isShow = false"
   >
     <Logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar
@@ -114,7 +118,12 @@ onBeforeUnmount(() => {
         />
       </el-menu>
     </el-scrollbar>
-    <leftCollapse
+    <CenterCollapse
+      v-if="device !== 'mobile' && (isShow || isCollapse)"
+      :is-active="pureApp.sidebar.opened"
+      @toggleClick="toggleSideBar"
+    />
+    <LeftCollapse
       v-if="device !== 'mobile'"
       :is-active="pureApp.sidebar.opened"
       @toggleClick="toggleSideBar"

src/layout/components/tag/index.vue

@@ -4,7 +4,7 @@ import { emitter } from "@/utils/mitt";
 import { RouteConfigs } from "../../types";
 import { useTags } from "../../hooks/useTag";
 import { routerArrays } from "@/layout/types";
-import { useFullscreen, onClickOutside } from "@vueuse/core";
+import { onClickOutside } from "@vueuse/core";
 import { handleAliveRoute, getTopMenu } from "@/router/utils";
 import { useSettingStoreHook } from "@/store/modules/settings";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
@@ -59,7 +59,6 @@ const contextmenuRef = ref();
 const isShowArrow = ref(false);
 const topPath = getTopMenu()?.path;
 const { VITE_HIDE_HOME } = import.meta.env;
-const { isFullscreen, toggle } = useFullscreen();
 
 const dynamicTagView = async () => {
   await nextTick();
@@ -329,28 +328,15 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
       handleAliveRoute(route as ToRouteType);
       break;
     case 6:
-      // 整体页面全屏
-      toggle();
-      setTimeout(() => {
-        if (isFullscreen.value) {
-          tagsViews[6].icon = ExitFullscreen;
-          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 = ExitFullscreen;
-          tagsViews[7].text = $t("buttons.hscontentExitFullScreen");
+          tagsViews[6].icon = ExitFullscreen;
+          tagsViews[6].text = $t("buttons.hscontentExitFullScreen");
         } else {
-          tagsViews[7].icon = Fullscreen;
-          tagsViews[7].text = $t("buttons.hscontentFullScreen");
+          tagsViews[6].icon = Fullscreen;
+          tagsViews[6].text = $t("buttons.hscontentFullScreen");
         }
       }, 100);
       break;
@@ -511,11 +497,6 @@ watch(route, () => {
   dynamicTagView();
 });
 
-watch(isFullscreen, () => {
-  tagsViews[6].icon = Fullscreen;
-  tagsViews[6].text = $t("buttons.hswholeFullScreen");
-});
-
 onMounted(() => {
   if (!instance) return;