Browse Source

perf: 同步完整版分支代码

i18n
xiaoxian521 3 years ago
parent
commit
f65446c495
  1. 2
      src/layout/components/appMain.vue
  2. 2
      src/layout/components/screenfull/index.vue
  3. 3
      src/layout/components/sidebar/sidebarItem.vue
  4. 51
      src/layout/components/tag/index.scss
  5. 14
      src/layout/components/tag/index.vue
  6. 28
      src/layout/index.vue
  7. 7
      src/store/modules/settings.ts
  8. 16
      src/style/sidebar.scss

2
src/layout/components/appMain.vue

@ -74,7 +74,7 @@ const transitionMain = defineComponent({
:style="[ :style="[
hideTabs && layout ? 'padding-top: 48px;' : '', hideTabs && layout ? 'padding-top: 48px;' : '',
!hideTabs && layout ? 'padding-top: 85px;' : '', !hideTabs && layout ? 'padding-top: 85px;' : '',
hideTabs && !layout ? 'padding-top: 62px' : '',
hideTabs && !layout ? 'padding-top: 48px' : '',
!hideTabs && !layout ? 'padding-top: 98px;' : '' !hideTabs && !layout ? 'padding-top: 98px;' : ''
]" ]"
> >

2
src/layout/components/screenfull/index.vue

@ -23,7 +23,7 @@ const { isFullscreen, toggle } = useFullscreen();
<style lang="scss" scoped> <style lang="scss" scoped>
.screen-full { .screen-full {
width: 36px; width: 36px;
height: 62px;
height: 48px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;

3
src/layout/components/sidebar/sidebarItem.vue

@ -129,7 +129,8 @@ function resolvePath(routePath) {
:style="{ :style="{
width: pureApp.sidebar.opened ? '125px' : '', width: pureApp.sidebar.opened ? '125px' : '',
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis'
textOverflow: 'ellipsis',
outline: 'none'
}" }"
@mouseover="hoverMenu(onlyOneChild)" @mouseover="hoverMenu(onlyOneChild)"
> >

51
src/layout/components/tag/index.scss

@ -58,41 +58,64 @@
} }
} }
@keyframes close {
from {
transform: translate(-50%, -50%);
}
to {
transform: translate(0, -50%);
}
}
.tags-view { .tags-view {
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
display: flex; display: flex;
align-items: center; align-items: center;
box-shadow: 0 0 1px #888;
color: var(--el-text-color-regular); color: var(--el-text-color-regular);
background: #fff; background: #fff;
position: relative;
box-shadow: 0 0 1px #888;
.scroll-item { .scroll-item {
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
padding: 2px 6px;
display: inline-block;
padding: 0 6px 0 6px;
box-shadow: 0 0 1px #888;
position: relative; position: relative;
margin-right: 4px; margin-right: 4px;
height: 28px; height: 28px;
line-height: 25px;
display: inline-block;
line-height: 28px;
transition: all 0.4s; transition: all 0.4s;
cursor: pointer;
.el-icon-close { .el-icon-close {
font-size: 10px; font-size: 10px;
color: #1890ff; color: #1890ff;
cursor: pointer; cursor: pointer;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transition: font-size 0.2s;
&:hover { &:hover {
border-radius: 50%; border-radius: 50%;
color: #fff; color: #fff;
background: #b4bccc; background: #b4bccc;
font-size: 14px;
font-size: 13px;
} }
} }
&.is-closable:not(:first-child) { &.is-closable:not(:first-child) {
&:hover { &:hover {
padding-right: 8px;
padding-right: 18px;
&:not(.is-active) {
.el-icon-close {
animation: close 200ms ease-in forwards;
}
}
} }
} }
} }
@ -213,11 +236,19 @@
cursor: not-allowed; cursor: not-allowed;
} }
.is-active {
.scroll-item.is-active {
background-color: #eaf4fe; background-color: #eaf4fe;
position: relative; position: relative;
color: #fff; color: #fff;
&:not(:first-child) {
padding-right: 18px;
}
.el-icon-close {
transform: translate(0, -50%);
}
a { a {
color: #1890ff; color: #1890ff;
} }
@ -252,14 +283,8 @@
} }
} }
/* 卡片模式 */
.card-active {
border: 1px solid #1890ff;
}
/* 卡片模式下鼠标移入显示蓝色边框 */ /* 卡片模式下鼠标移入显示蓝色边框 */
.card-in { .card-in {
border: 1px solid #1890ff;
color: #1890ff; color: #1890ff;
a { a {

14
src/layout/components/tag/index.vue

@ -38,6 +38,7 @@ import { transformI18n } from "/@/utils/i18n";
import { storageLocal } from "/@/utils/storage"; import { storageLocal } from "/@/utils/storage";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { handleAliveRoute, delAliveRoutes } from "/@/router"; import { handleAliveRoute, delAliveRoutes } from "/@/router";
import { useSettingStoreHook } from "/@/store/modules/settings";
import { usePermissionStoreHook } from "/@/store/modules/permission"; import { usePermissionStoreHook } from "/@/store/modules/permission";
import { toggleClass, removeClass, hasClass } from "/@/utils/operate"; import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
import { RouteConfigs, relativeStorageType, tagsViewsType } from "../../types"; import { RouteConfigs, relativeStorageType, tagsViewsType } from "../../types";
@ -49,6 +50,7 @@ const activeIndex = ref<number>(-1);
let refreshButton = "refresh-button"; let refreshButton = "refresh-button";
const instance = getCurrentInstance(); const instance = getCurrentInstance();
let relativeStorage: relativeStorageType; let relativeStorage: relativeStorageType;
const pureSetting = useSettingStoreHook();
const showTags = ref(storageLocal.getItem("tagsVal") || false); const showTags = ref(storageLocal.getItem("tagsVal") || false);
const tabDom = templateRef<HTMLElement | null>("tabDom", null); const tabDom = templateRef<HTMLElement | null>("tabDom", null);
const containerDom = templateRef<HTMLElement | null>("containerDom", null); const containerDom = templateRef<HTMLElement | null>("containerDom", null);
@ -471,7 +473,9 @@ function openMenu(tag, e) {
} else { } else {
buttonLeft.value = left; buttonLeft.value = left;
} }
buttonTop.value = e.clientY + 10;
pureSetting.hiddenSideBar
? (buttonTop.value = e.clientY)
: (buttonTop.value = e.clientY - 40);
setTimeout(() => { setTimeout(() => {
visible.value = true; visible.value = true;
}, 10); }, 10);
@ -479,7 +483,10 @@ function openMenu(tag, e) {
// tags // tags
function tagOnClick(item) { function tagOnClick(item) {
showMenuModel(item.path);
router.push({
path: item?.path
});
showMenuModel(item?.path);
} }
// //
@ -573,8 +580,9 @@ onBeforeMount(() => {
@contextmenu.prevent="openMenu(item, $event)" @contextmenu.prevent="openMenu(item, $event)"
@mouseenter.prevent="onMouseenter(item, index)" @mouseenter.prevent="onMouseenter(item, index)"
@mouseleave.prevent="onMouseleave(item, index)" @mouseleave.prevent="onMouseleave(item, index)"
@click="tagOnClick(item)"
> >
<router-link :to="item.path" @click="tagOnClick(item)">{{
<router-link :to="item.path">{{
transformI18n(item.meta.title, item.meta.i18n) transformI18n(item.meta.title, item.meta.i18n)
}}</router-link> }}</router-link>
<el-icon <el-icon

28
src/layout/index.vue

@ -1,8 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { import {
h, h,
ref,
unref,
reactive, reactive,
computed, computed,
onMounted, onMounted,
@ -29,9 +27,8 @@ import setting from "./components/setting/index.vue";
import Vertical from "./components/sidebar/vertical.vue"; import Vertical from "./components/sidebar/vertical.vue";
import Horizontal from "./components/sidebar/horizontal.vue"; import Horizontal from "./components/sidebar/horizontal.vue";
const instance = getCurrentInstance().appContext.app.config.globalProperties;
const hiddenSideBar = ref(instance.$config?.HiddenSideBar);
const pureSetting = useSettingStoreHook(); const pureSetting = useSettingStoreHook();
const instance = getCurrentInstance().appContext.app.config.globalProperties;
// serverConfig.jsonstorage // serverConfig.jsonstorage
const layout = computed(() => { const layout = computed(() => {
@ -136,9 +133,9 @@ const $_resizeHandler = () => {
}; };
function onFullScreen() { function onFullScreen() {
unref(hiddenSideBar)
? (hiddenSideBar.value = false)
: (hiddenSideBar.value = true);
pureSetting.hiddenSideBar
? pureSetting.changeSetting({ key: "hiddenSideBar", value: false })
: pureSetting.changeSetting({ key: "hiddenSideBar", value: true });
} }
onMounted(() => { onMounted(() => {
@ -167,10 +164,10 @@ const layoutHeader = defineComponent({
}, },
{ {
default: () => [ default: () => [
!hiddenSideBar.value && layout.value.includes("vertical")
!pureSetting.hiddenSideBar && layout.value.includes("vertical")
? h(navbar) ? h(navbar)
: h("div"), : h("div"),
!hiddenSideBar.value && layout.value.includes("horizontal")
!pureSetting.hiddenSideBar && layout.value.includes("horizontal")
? h(Horizontal) ? h(Horizontal)
: h("div"), : h("div"),
h( h(
@ -183,7 +180,7 @@ const layoutHeader = defineComponent({
{ onClick: onFullScreen }, { onClick: onFullScreen },
{ {
default: () => [ default: () => [
!hiddenSideBar.value ? h(fullScreen) : h(exitScreen)
!pureSetting.hiddenSideBar ? h(fullScreen) : h(exitScreen)
] ]
} }
) )
@ -208,8 +205,15 @@ const layoutHeader = defineComponent({
class="drawer-bg" class="drawer-bg"
@click="handleClickOutside(false)" @click="handleClickOutside(false)"
/> />
<Vertical v-show="!hiddenSideBar && layout.includes('vertical')" />
<div :class="['main-container', hiddenSideBar ? 'main-hidden' : '']">
<Vertical
v-show="!pureSetting.hiddenSideBar && layout.includes('vertical')"
/>
<div
:class="[
'main-container',
pureSetting.hiddenSideBar ? 'main-hidden' : ''
]"
>
<div v-if="set.fixedHeader"> <div v-if="set.fixedHeader">
<layout-header /> <layout-header />
<!-- 主体内容 --> <!-- 主体内容 -->

7
src/store/modules/settings.ts

@ -5,13 +5,15 @@ import { getConfig } from "/@/config";
interface SettingState { interface SettingState {
title: string; title: string;
fixedHeader: boolean; fixedHeader: boolean;
hiddenSideBar: boolean;
} }
export const useSettingStore = defineStore({ export const useSettingStore = defineStore({
id: "pure-setting", id: "pure-setting",
state: (): SettingState => ({ state: (): SettingState => ({
title: getConfig().Title, title: getConfig().Title,
fixedHeader: getConfig().FixedHeader
fixedHeader: getConfig().FixedHeader,
hiddenSideBar: getConfig().HiddenSideBar
}), }),
getters: { getters: {
getTitle() { getTitle() {
@ -19,6 +21,9 @@ export const useSettingStore = defineStore({
}, },
getFixedHeader() { getFixedHeader() {
return this.fixedHeader; return this.fixedHeader;
},
getHiddenSideBar() {
return this.HiddenSideBar;
} }
}, },
actions: { actions: {

16
src/style/sidebar.scss

@ -117,6 +117,7 @@
.el-menu-item, .el-menu-item,
.el-sub-menu__title { .el-sub-menu__title {
height: 50px;
color: $menuText; color: $menuText;
padding: 0 20px 0 40px; padding: 0 20px 0 40px;
@ -169,7 +170,7 @@
justify-content: space-around; justify-content: space-around;
background: $menuBg; background: $menuBg;
width: 100%; width: 100%;
height: 62px;
height: 48px;
align-items: center; align-items: center;
.horizontal-header-left { .horizontal-header-left {
@ -211,7 +212,7 @@
justify-content: flex-end; justify-content: flex-end;
.dropdown-badge { .dropdown-badge {
height: 62px;
height: 48px;
color: $subMenuActiveText; color: $subMenuActiveText;
&:hover { &:hover {
@ -228,7 +229,7 @@
} }
.globalization { .globalization {
height: 62px;
height: 48px;
width: 40px; width: 40px;
padding: 11px; padding: 11px;
cursor: pointer; cursor: pointer;
@ -241,7 +242,7 @@
.el-dropdown-link { .el-dropdown-link {
width: 100px; width: 100px;
height: 62px;
height: 48px;
padding: 10px; padding: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -265,7 +266,7 @@
} }
.el-icon-setting { .el-icon-setting {
height: 62px;
height: 48px;
width: 40px; width: 40px;
padding: 12px; padding: 12px;
display: flex; display: flex;
@ -296,7 +297,8 @@
.submenu-title-noDropdown, .submenu-title-noDropdown,
.el-sub-menu__title { .el-sub-menu__title {
height: 60px;
height: 48px;
line-height: 48px;
background: $menuBg; background: $menuBg;
} }
@ -362,6 +364,8 @@
.el-menu-item, .el-menu-item,
.el-sub-menu__title { .el-sub-menu__title {
height: 50px;
line-height: 50px;
color: $menuText; color: $menuText;
background-color: $subMenuBg; background-color: $subMenuBg;

Loading…
Cancel
Save