From c1193281760d84528045a49604f5359f6b390609 Mon Sep 17 00:00:00 2001 From: RealityBoy <1923740402@qq.com> Date: Sat, 17 Sep 2022 11:52:46 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E5=B8=83=E5=B1=80=20(#349)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * perf: 优化页面布局 * fix: update --- locales/en.yaml | 4 + locales/zh-CN.yaml | 4 + package.json | 2 +- pnpm-lock.yaml | 16 +-- src/assets/svg/close.svg | 1 - src/assets/svg/close_all.svg | 1 - src/assets/svg/close_left.svg | 1 - src/assets/svg/close_other.svg | 1 - src/assets/svg/close_right.svg | 1 - src/assets/svg/refresh.svg | 1 - .../ReIcon/src/iconifyIconOffline.ts | 20 ++- src/layout/components/navbar.vue | 4 - src/layout/components/sidebar/horizontal.vue | 4 - src/layout/components/sidebar/mixNav.vue | 4 - src/layout/components/tag/index.scss | 28 +--- src/layout/components/tag/index.vue | 120 ++++++++++-------- src/layout/hooks/useTag.ts | 45 +++++-- src/layout/index.vue | 41 +----- src/layout/types.ts | 3 +- src/style/dark.scss | 3 +- src/views/guide/index.vue | 8 -- 21 files changed, 141 insertions(+), 171 deletions(-) delete mode 100644 src/assets/svg/close.svg delete mode 100644 src/assets/svg/close_all.svg delete mode 100644 src/assets/svg/close_left.svg delete mode 100644 src/assets/svg/close_other.svg delete mode 100644 src/assets/svg/close_right.svg delete mode 100644 src/assets/svg/refresh.svg diff --git a/locales/en.yaml b/locales/en.yaml index eed2d341a..e542c6e81 100644 --- a/locales/en.yaml +++ b/locales/en.yaml @@ -18,6 +18,10 @@ buttons: hscloseRightTabs: Close RightTabs hscloseOtherTabs: Close OtherTabs hscloseAllTabs: Close AllTabs + hswholeFullScreen: Whole FullScreen + hswholeExitFullScreen: Whole ExitFullScreen + hscontentFullScreen: Content FullScreen + hscontentExitFullScreen: Content ExitFullScreen menus: hshome: Home hslogin: Login diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml index bcc90b978..91c43e712 100644 --- a/locales/zh-CN.yaml +++ b/locales/zh-CN.yaml @@ -18,6 +18,10 @@ buttons: hscloseRightTabs: 关闭右侧标签页 hscloseOtherTabs: 关闭其他标签页 hscloseAllTabs: 关闭全部标签页 + hswholeFullScreen: 整体页面全屏 + hswholeExitFullScreen: 整体页面退出全屏 + hscontentFullScreen: 内容区全屏 + hscontentExitFullScreen: 内容区退出全屏 menus: hshome: 首页 hslogin: 登录 diff --git a/package.json b/package.json index 54fe907da..f0da4b762 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "driver.js": "^0.9.8", "echarts": "^5.3.3", "el-table-infinite-scroll": "^3.0.1", - "element-plus": "^2.2.16", + "element-plus": "^2.2.17", "element-resize-detector": "^1.2.3", "js-cookie": "^3.0.1", "jsbarcode": "^3.11.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 71d1bbb8e..25e6de384 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -57,7 +57,7 @@ specifiers: driver.js: ^0.9.8 echarts: ^5.3.3 el-table-infinite-scroll: ^3.0.1 - element-plus: ^2.2.16 + element-plus: ^2.2.17 element-resize-detector: ^1.2.3 eslint: ^8.8.0 eslint-plugin-prettier: ^4.0.0 @@ -145,7 +145,7 @@ dependencies: driver.js: 0.9.8 echarts: 5.3.3 el-table-infinite-scroll: 3.0.1 - element-plus: 2.2.16_vue@3.2.39 + element-plus: 2.2.17_vue@3.2.39 element-resize-detector: 1.2.4 js-cookie: 3.0.1 jsbarcode: 3.11.5 @@ -1392,7 +1392,7 @@ packages: } dependencies: "@element-plus/icons-vue": 2.0.9_vue@3.2.39 - element-plus: 2.2.16_vue@3.2.39 + element-plus: 2.2.17_vue@3.2.39 vue: 3.2.39 transitivePeerDependencies: - "@vue/composition-api" @@ -1404,7 +1404,7 @@ packages: integrity: sha512-mJBpMj0YkaqTM5TDz+ek/f8h74qRLhDc/gLJhBq0wpyfCgG++Jd/9i+QUj8gedA5oN8IL6LOSFbcvlGDYxHgkw== } dependencies: - element-plus: 2.2.16_vue@3.2.39 + element-plus: 2.2.17_vue@3.2.39 vue: 3.2.39 transitivePeerDependencies: - "@vue/composition-api" @@ -3901,7 +3901,7 @@ packages: } dependencies: core-js: 3.25.1 - element-plus: 2.2.16_vue@3.2.39 + element-plus: 2.2.17_vue@3.2.39 vue: 3.2.39 transitivePeerDependencies: - "@vue/composition-api" @@ -3914,10 +3914,10 @@ packages: } dev: true - /element-plus/2.2.16_vue@3.2.39: + /element-plus/2.2.17_vue@3.2.39: resolution: { - integrity: sha512-rvaTMFIujec9YDC5lyaiQv2XVUCHuhVDq2k+9vQxP78N8Wd07iEOGa9pvEVOO2uYc75l4rSl2RE/IWPH/6Mdzw== + integrity: sha512-MGwMIE/q+FFD3kgS23x8HIe5043tmD1cTRwjhIX9o6fim1avFnUkrsfYRvybbz4CkyqSb185EheZS5AUPpXh2g== } peerDependencies: vue: ^3.2.0 @@ -8790,7 +8790,7 @@ packages: ace-builds: 1.10.1 ant-design-vue: 3.2.12_vue@3.2.39 core-js: 3.25.1 - element-plus: 2.2.16_vue@3.2.39 + element-plus: 2.2.17_vue@3.2.39 lodash: 4.17.21 uuid: 8.3.2 vue: 3.2.39 diff --git a/src/assets/svg/close.svg b/src/assets/svg/close.svg deleted file mode 100644 index 5b5057f27..000000000 --- a/src/assets/svg/close.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/svg/close_all.svg b/src/assets/svg/close_all.svg deleted file mode 100644 index aa13cd755..000000000 --- a/src/assets/svg/close_all.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/svg/close_left.svg b/src/assets/svg/close_left.svg deleted file mode 100644 index e5708ea5c..000000000 --- a/src/assets/svg/close_left.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/svg/close_other.svg b/src/assets/svg/close_other.svg deleted file mode 100644 index 212e6c283..000000000 --- a/src/assets/svg/close_other.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/svg/close_right.svg b/src/assets/svg/close_right.svg deleted file mode 100644 index 14d3cf39a..000000000 --- a/src/assets/svg/close_right.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/svg/refresh.svg b/src/assets/svg/refresh.svg deleted file mode 100644 index 1f549f1ad..000000000 --- a/src/assets/svg/refresh.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/ReIcon/src/iconifyIconOffline.ts b/src/components/ReIcon/src/iconifyIconOffline.ts index fa2cd2229..b82c00399 100644 --- a/src/components/ReIcon/src/iconifyIconOffline.ts +++ b/src/components/ReIcon/src/iconifyIconOffline.ts @@ -7,13 +7,11 @@ import Menu from "@iconify-icons/ep/menu"; import HomeFilled from "@iconify-icons/ep/home-filled"; import SetUp from "@iconify-icons/ep/set-up"; import Edit from "@iconify-icons/ep/edit"; -import Setting from "@iconify-icons/ep/setting"; import Lollipop from "@iconify-icons/ep/lollipop"; import Link from "@iconify-icons/ep/link"; import Position from "@iconify-icons/ep/position"; import Histogram from "@iconify-icons/ep/histogram"; import RefreshRight from "@iconify-icons/ep/refresh-right"; -import ArrowDown from "@iconify-icons/ep/arrow-down"; import Close from "@iconify-icons/ep/close"; import CloseBold from "@iconify-icons/ep/close-bold"; import Bell from "@iconify-icons/ep/bell"; @@ -36,13 +34,11 @@ addIcon("menu", Menu); addIcon("home-filled", HomeFilled); addIcon("set-up", SetUp); addIcon("edit", Edit); -addIcon("setting", Setting); addIcon("lollipop", Lollipop); addIcon("link", Link); addIcon("position", Position); addIcon("histogram", Histogram); addIcon("refresh-right", RefreshRight); -addIcon("arrow-down", ArrowDown); addIcon("close", Close); addIcon("close-bold", CloseBold); addIcon("bell", Bell); @@ -89,6 +85,14 @@ import User from "@iconify-icons/ri/user-3-fill"; import Lock from "@iconify-icons/ri/lock-fill"; import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill"; import MenuFold from "@iconify-icons/ri/menu-fold-fill"; +import Setting from "@iconify-icons/ri/settings-3-line"; +import ArrowDown from "@iconify-icons/ri/arrow-down-s-line"; +import CloseLeftTags from "@iconify-icons/ri/text-direction-r"; +import CloseRightTags from "@iconify-icons/ri/text-direction-l"; +import CloseOtherTags from "@iconify-icons/ri/text-spacing"; +import CloseAllTags from "@iconify-icons/ri/subtract-line"; +import Fullscreen from "@iconify-icons/ri/fullscreen-fill"; +import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill"; addIcon("arrow-right-s-line", ArrowRightSLine); addIcon("arrow-left-s-line", ArrowLeftSLine); addIcon("logout-circle-r-line", LogoutCircleRLine); @@ -116,6 +120,14 @@ addIcon("user", User); addIcon("lock", Lock); addIcon("menu-unfold", MenuUnfold); addIcon("menu-fold", MenuFold); +addIcon("setting", Setting); +addIcon("arrow-down", ArrowDown); +addIcon("close-left-tags", CloseLeftTags); +addIcon("close-right-tags", CloseRightTags); +addIcon("close-other-tags", CloseOtherTags); +addIcon("close-all-tags", CloseAllTags); +addIcon("fullscreen", Fullscreen); +addIcon("exit-fullscreen", ExitFullscreen); // Font Awesome 4 import FaUser from "@iconify-icons/fa/user"; diff --git a/src/layout/components/navbar.vue b/src/layout/components/navbar.vue index 1bdc53535..e6c71f35a 100644 --- a/src/layout/components/navbar.vue +++ b/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(); - - - - - - +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(() => { diff --git a/src/layout/hooks/useTag.ts b/src/layout/hooks/useTag.ts index 70bbe84d8..ae8d51229 100644 --- a/src/layout/hooks/useTag.ts +++ b/src/layout/hooks/useTag.ts @@ -14,20 +14,15 @@ import type { StorageConfigs } from "/#/index"; import { useEventListener } from "@vueuse/core"; import { useRoute, useRouter } from "vue-router"; import { transformI18n, $t } from "/@/plugins/i18n"; +import { useSettingStoreHook } from "/@/store/modules/settings"; import { useMultiTagsStoreHook } from "/@/store/modules/multiTags"; import { storageLocal, toggleClass, hasClass } from "@pureadmin/utils"; -import close from "/@/assets/svg/close.svg?component"; -import refresh from "/@/assets/svg/refresh.svg?component"; -import closeAll from "/@/assets/svg/close_all.svg?component"; -import closeLeft from "/@/assets/svg/close_left.svg?component"; -import closeOther from "/@/assets/svg/close_other.svg?component"; -import closeRight from "/@/assets/svg/close_right.svg?component"; - export function useTags() { const route = useRoute(); const router = useRouter(); const instance = getCurrentInstance(); + const pureSetting = useSettingStoreHook(); const buttonTop = ref(0); const buttonLeft = ref(0); @@ -53,46 +48,60 @@ export function useTags() { const tagsViews = reactive>([ { - icon: refresh, + icon: "refresh-right", text: $t("buttons.hsreload"), divided: false, disabled: false, show: true }, { - icon: close, + icon: "close", text: $t("buttons.hscloseCurrentTab"), divided: false, disabled: multiTags.value.length > 1 ? false : true, show: true }, { - icon: closeLeft, + icon: "close-left-tags", text: $t("buttons.hscloseLeftTabs"), divided: true, disabled: multiTags.value.length > 1 ? false : true, show: true }, { - icon: closeRight, + icon: "close-right-tags", text: $t("buttons.hscloseRightTabs"), divided: false, disabled: multiTags.value.length > 1 ? false : true, show: true }, { - icon: closeOther, + icon: "close-other-tags", text: $t("buttons.hscloseOtherTabs"), divided: true, disabled: multiTags.value.length > 2 ? false : true, show: true }, { - icon: closeAll, + icon: "close-all-tags", text: $t("buttons.hscloseAllTabs"), divided: false, disabled: multiTags.value.length > 1 ? false : true, show: true + }, + { + icon: "fullscreen", + text: $t("buttons.hswholeFullScreen"), + divided: true, + disabled: false, + show: true + }, + { + icon: "fullscreen", + text: $t("buttons.hscontentFullScreen"), + divided: false, + disabled: false, + show: true } ]); @@ -172,6 +181,12 @@ export function useTags() { } } + function onContentFullScreen() { + pureSetting.hiddenSideBar + ? pureSetting.changeSetting({ key: "hiddenSideBar", value: false }) + : pureSetting.changeSetting({ key: "hiddenSideBar", value: true }); + } + onMounted(() => { if (!showModel.value) { const configure = storageLocal.getItem( @@ -201,6 +216,7 @@ export function useTags() { buttonTop, buttonLeft, translateX, + pureSetting, activeIndex, getTabStyle, iconIsActive, @@ -213,6 +229,7 @@ export function useTags() { onMounted, onMouseenter, onMouseleave, - transformI18n + transformI18n, + onContentFullScreen }; } diff --git a/src/layout/index.vue b/src/layout/index.vue index 641ea0a84..7dbeb82aa 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -7,16 +7,13 @@ import { useSettingStoreHook } from "/@/store/modules/settings"; import { deviceDetection, useDark, useGlobal } from "@pureadmin/utils"; import { h, reactive, computed, onMounted, defineComponent } from "vue"; -import backTop from "/@/assets/svg/back_top.svg?component"; -import fullScreen from "/@/assets/svg/full_screen.svg?component"; -import exitScreen from "/@/assets/svg/exit_screen.svg?component"; - import navbar from "./components/navbar.vue"; import tag from "./components/tag/index.vue"; import appMain from "./components/appMain.vue"; import setting from "./components/setting/index.vue"; import Vertical from "./components/sidebar/vertical.vue"; import Horizontal from "./components/sidebar/horizontal.vue"; +import backTop from "/@/assets/svg/back_top.svg?component"; const { isDark } = useDark(); const { layout } = useLayout(); @@ -102,12 +99,6 @@ onMounted(() => { } }); -function onFullScreen() { - pureSetting.hiddenSideBar - ? pureSetting.changeSetting({ key: "hiddenSideBar", value: false }) - : pureSetting.changeSetting({ key: "hiddenSideBar", value: true }); -} - const layoutHeader = defineComponent({ render() { return h( @@ -127,31 +118,11 @@ const layoutHeader = defineComponent({ !pureSetting.hiddenSideBar && (layout.value.includes("vertical") || layout.value.includes("mix")) ? h(navbar) - : h("div"), + : null, !pureSetting.hiddenSideBar && layout.value.includes("horizontal") ? h(Horizontal) - : h("div"), - h( - tag, - {}, - { - default: () => [ - h( - "span", - { - onClick: onFullScreen - }, - { - default: () => [ - !pureSetting.hiddenSideBar - ? h(fullScreen, { class: "dark:text-white" }) - : h(exitScreen, { class: "dark:text-white" }) - ] - } - ) - ] - } - ) + : null, + h(tag) ] } ); @@ -226,10 +197,6 @@ const layoutHeader = defineComponent({ } } -.main-hidden { - margin-left: 0 !important; -} - .app-mask { background: #000; opacity: 0.3; diff --git a/src/layout/types.ts b/src/layout/types.ts index 249b5145d..bf66d145c 100644 --- a/src/layout/types.ts +++ b/src/layout/types.ts @@ -1,4 +1,3 @@ -import { Component } from "vue"; export const routerArrays: Array = [ { path: "/welcome", @@ -33,7 +32,7 @@ export type multiTagsType = { }; export type tagsViewsType = { - icon: Component; + icon: string; text: string; divided: boolean; disabled: boolean; diff --git a/src/style/dark.scss b/src/style/dark.scss index 2c86fba60..515c98dd3 100644 --- a/src/style/dark.scss +++ b/src/style/dark.scss @@ -45,8 +45,7 @@ html.dark { } .arrow-left, - .arrow-right, - .right-button li { + .arrow-right { border-right: 1px solid $border-style; } } diff --git a/src/views/guide/index.vue b/src/views/guide/index.vue index 33d5176bf..e09fce365 100644 --- a/src/views/guide/index.vue +++ b/src/views/guide/index.vue @@ -15,14 +15,6 @@ const steps = [ position: "left" } }, - { - element: "#header-screenfull", - popover: { - title: "全屏", - description: "你可以在这里进行全屏切换", - position: "left" - } - }, { element: "#header-translation", popover: {