mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
feat(projects): 添加多页签风格：按钮和浏览器两种风格
This commit is contained in:
Soybean
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div class="absolute bottom-0 -left-16px flex w-32px h-full bg-white">
|
||||
<div class="relative w-1/2 h-full">
|
||||
<div class="absolute-lt w-full h-full bg-white rounded-br-8px overflow-hidden z-2">
|
||||
<div
|
||||
class="w-full h-full transition-background duration-400 ease-in-out"
|
||||
:class="{ 'bg-black bg-opacity-10': isLeftHover }"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute-lt w-full h-full transition-background duration-400 ease-in-out bg-opacity-10 z-1"
|
||||
:class="{ 'bg-primary': isPrimary, 'bg-black': isHover && !isPrimary }"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="relative w-1/2 h-full transition-background duration-400 ease-in-out"
|
||||
:class="{ 'bg-black bg-opacity-10': isLeftHover }"
|
||||
>
|
||||
<div class="absolute-lt w-full h-full bg-white rounded-tl-8px overflow-hidden z-2">
|
||||
<div
|
||||
class="w-full h-full transition-background duration-400 ease-in-out bg-opacity-10"
|
||||
:class="{ 'bg-primary': isPrimary, 'bg-black': isHover && !isPrimary }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
isPrimary: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isHover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isLeftHover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div class="absolute bottom-0 -right-16px flex w-32px h-full bg-white">
|
||||
<div
|
||||
class="relative w-1/2 h-full transition-background duration-400 ease-in-out"
|
||||
:class="{ 'bg-black bg-opacity-10': isRightHover }"
|
||||
>
|
||||
<div class="absolute-lt w-full h-full bg-white rounded-tr-8px overflow-hidden z-2">
|
||||
<div
|
||||
class="w-full h-full transition-background duration-400 ease-in-out bg-opacity-10"
|
||||
:class="{ 'bg-primary': isPrimary, 'bg-black': isHover && !isPrimary }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative w-1/2 h-full">
|
||||
<div class="absolute-lt w-full h-full bg-white rounded-bl-8px overflow-hidden z-2">
|
||||
<div
|
||||
class="w-full h-full transition-background duration-400 ease-in-out bg-opacity-10"
|
||||
:class="[isRightHover ? 'bg-black' : 'bg-white']"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute-lt w-full h-full transition-background duration-400 ease-in-out bg-opacity-10 z-1"
|
||||
:class="{ 'bg-primary': isPrimary, 'bg-black': isHover && !isPrimary }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
isPrimary: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isHover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isRightHover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,4 @@
|
||||
import LeftTabRadius from './LeftTabRadius.vue';
|
||||
import RightTabRadius from './RightTabRadius.vue';
|
||||
|
||||
export { LeftTabRadius, RightTabRadius };
|
||||
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div
|
||||
class="
|
||||
relative
|
||||
inline-flex-center
|
||||
h-34px
|
||||
px-32px
|
||||
transition-background
|
||||
duration-400
|
||||
ease-in-out
|
||||
bg-opacity-10
|
||||
cursor-pointer
|
||||
"
|
||||
:class="{ 'text-primary bg-primary z-3': active, 'bg-black z-2': isHover && !active }"
|
||||
@mouseenter="handleMouseOnTab('enter')"
|
||||
@mouseleave="handleMouseOnTab('leave')"
|
||||
>
|
||||
<span>
|
||||
<slot></slot>
|
||||
</span>
|
||||
<div
|
||||
v-if="closable"
|
||||
class="transition-width duration-400 ease-in-out overflow-hidden"
|
||||
:class="[isHover ? 'w-18px' : 'w-0']"
|
||||
>
|
||||
<icon-close :is-primary="active" @click="handleClose" />
|
||||
</div>
|
||||
<left-tab-radius
|
||||
class="transition-opacity duration-400 ease-in-out"
|
||||
:class="[showRadius ? 'opacity-100' : 'opacity-0']"
|
||||
:is-primary="active"
|
||||
:is-hover="isHover"
|
||||
:is-left-hover="isLeftHover"
|
||||
/>
|
||||
<right-tab-radius
|
||||
class="transition-opacity duration-400 ease-out"
|
||||
:class="[showRadius ? 'opacity-100' : 'opacity-0']"
|
||||
:is-primary="active"
|
||||
:is-hover="isHover"
|
||||
:is-right-hover="isRightHover"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useBoolean } from '@/hooks';
|
||||
import { IconClose } from '../common';
|
||||
import { LeftTabRadius, RightTabRadius } from './components';
|
||||
|
||||
const props = defineProps({
|
||||
currentIndex: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
activeIndex: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
hoverIndex: {
|
||||
type: Number,
|
||||
default: NaN
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
});
|
||||
const emit = defineEmits(['close', 'update:hoverIndex']);
|
||||
|
||||
const { bool: isHover, setTrue, setFalse } = useBoolean();
|
||||
|
||||
const hoveredIndex = ref(props.hoverIndex);
|
||||
function setHoverIndex(index: number) {
|
||||
hoveredIndex.value = index;
|
||||
}
|
||||
function resetHoverIndex() {
|
||||
hoveredIndex.value = NaN;
|
||||
}
|
||||
|
||||
const active = computed(() => props.currentIndex === props.activeIndex);
|
||||
const showRadius = computed(() => isHover.value || active.value);
|
||||
const isLeftHover = computed(() => active.value && props.activeIndex === hoveredIndex.value + 1);
|
||||
const isRightHover = computed(() => active.value && props.activeIndex === hoveredIndex.value - 1);
|
||||
|
||||
function handleMouseOnTab(mode: 'enter' | 'leave') {
|
||||
if (mode === 'enter') {
|
||||
setTrue();
|
||||
setHoverIndex(props.currentIndex);
|
||||
} else {
|
||||
setFalse();
|
||||
resetHoverIndex();
|
||||
}
|
||||
}
|
||||
|
||||
function handleClose(e: MouseEvent) {
|
||||
e.stopPropagation();
|
||||
emit('close');
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.hoverIndex,
|
||||
newValue => {
|
||||
setHoverIndex(newValue);
|
||||
}
|
||||
);
|
||||
watch(hoveredIndex, newValue => {
|
||||
emit('update:hoverIndex', newValue);
|
||||
});
|
||||
watch(
|
||||
() => props.activeIndex,
|
||||
() => {
|
||||
resetHoverIndex();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div
|
||||
class="
|
||||
button-tab
|
||||
inline-flex-center
|
||||
h-34px
|
||||
px-14px
|
||||
bg-white
|
||||
border-1px border-[#e5e7eb]
|
||||
rounded-2px
|
||||
cursor-pointer
|
||||
hover:text-primary hover:border-primary
|
||||
"
|
||||
:class="{ 'text-primary bg-primary bg-opacity-10 !border-primary': active }"
|
||||
>
|
||||
<span>
|
||||
<slot></slot>
|
||||
</span>
|
||||
<div v-if="closable" class="icon-close-container w-0 overflow-hidden">
|
||||
<icon-close :is-primary="true" @click="handleClose" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { IconClose } from '../common';
|
||||
|
||||
defineProps({
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
});
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
function handleClose(e: MouseEvent) {
|
||||
e.stopPropagation();
|
||||
emit('close');
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.button-tab {
|
||||
transition: all 0.4s ease-out;
|
||||
&:hover {
|
||||
.icon-close-container {
|
||||
width: 18px !important;
|
||||
}
|
||||
}
|
||||
.icon-close-container {
|
||||
transition: width 0.4s ease-out;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +0,0 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative flex-center w-18px h-18px text-14px"
|
||||
:class="{ 'text-primary': isPrimary }"
|
||||
@mouseenter="setTrue"
|
||||
@mouseleave="setFalse"
|
||||
>
|
||||
<transition name="transition-opacity">
|
||||
<icon-carbon-close-filled v-if="isHover" key="hover" class="absolute" />
|
||||
<icon-carbon-close v-else key="unhover" class="absolute" />
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useBoolean } from '@/hooks';
|
||||
|
||||
defineProps({
|
||||
isPrimary: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
const { bool: isHover, setTrue, setFalse } = useBoolean();
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,3 @@
|
||||
import IconClose from './IconClose.vue';
|
||||
|
||||
export { IconClose };
|
||||
@ -0,0 +1,4 @@
|
||||
import ButtonTab from './ButtonTab/index.vue';
|
||||
import BrowserTab from './BrowserTab/index.vue';
|
||||
|
||||
export { ButtonTab, BrowserTab };
|
||||
|
||||
@ -1,25 +1,39 @@
|
||||
<template>
|
||||
<div v-if="fixedHeaderAndTab && theme.navStyle.mode !== 'horizontal-mix'" class="multi-tab-height w-full"></div>
|
||||
<div
|
||||
class="multi-tab-height flex-y-center justify-between w-full px-10px"
|
||||
:class="{ 'multi-tab-top absolute': fixedHeaderAndTab, 'bg-[#f5f7f9]': !theme.darkMode }"
|
||||
class="multi-tab-height flex-center justify-between w-full px-10px"
|
||||
:class="{ 'multi-tab-top absolute': fixedHeaderAndTab, 'bg-[#18181c]': theme.darkMode }"
|
||||
:style="{ zIndex }"
|
||||
:align="'center'"
|
||||
justify="space-between"
|
||||
:item-style="{ paddingTop: '0px', paddingBottom: '0px' }"
|
||||
>
|
||||
<n-space :align="'center'">
|
||||
<n-tag
|
||||
<n-space v-if="theme.multiTabStyle.mode === 'button'" :align="'center'" size="small" class="h-full">
|
||||
<button-tab
|
||||
v-for="item in app.multiTab.routes"
|
||||
:key="item.path"
|
||||
:type="app.multiTab.activeRoute === item.fullPath ? 'primary' : 'default'"
|
||||
class="cursor-pointer"
|
||||
:active="app.multiTab.activeRoute === item.fullPath"
|
||||
:closable="item.name !== ROUTE_HOME.name"
|
||||
size="large"
|
||||
@click="handleClickTab(item.fullPath)"
|
||||
@close.stop="removeMultiTab(item.fullPath)"
|
||||
@close="removeMultiTab(item.fullPath)"
|
||||
>
|
||||
{{ item.meta?.title }}
|
||||
</n-tag>
|
||||
</button-tab>
|
||||
</n-space>
|
||||
<n-space v-if="theme.multiTabStyle.mode === 'browser'" :align="'flex-end'" :size="0" class="h-full px-16px">
|
||||
<browser-tab
|
||||
v-for="(item, index) in app.multiTab.routes"
|
||||
:key="item.path"
|
||||
v-model:hover-index="hoverIndex"
|
||||
:current-index="index"
|
||||
:active-index="app.activeMultiTabIndex"
|
||||
:closable="item.name !== ROUTE_HOME.name"
|
||||
@click="handleClickTab(item.fullPath)"
|
||||
@close="removeMultiTab(item.fullPath)"
|
||||
>
|
||||
{{ item.meta?.title }}
|
||||
</browser-tab>
|
||||
</n-space>
|
||||
<h3>{{ reload }}</h3>
|
||||
<div class="flex-center w-32px h-32px bg-white cursor-pointer" @click="handleReload">
|
||||
<icon-mdi-refresh class="text-16px" />
|
||||
</div>
|
||||
@ -27,13 +41,13 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, watch } from 'vue';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { NSpace, NTag } from 'naive-ui';
|
||||
import { NSpace } from 'naive-ui';
|
||||
import { useThemeStore, useAppStore } from '@/store';
|
||||
// import { useRouterChange } from '@/hooks';
|
||||
import { useReloadInject } from '@/context';
|
||||
import { ROUTE_HOME } from '@/router';
|
||||
import { ButtonTab, BrowserTab } from './components';
|
||||
|
||||
defineProps({
|
||||
zIndex: {
|
||||
@ -46,8 +60,9 @@ const route = useRoute();
|
||||
const theme = useThemeStore();
|
||||
const app = useAppStore();
|
||||
const { initMultiTab, addMultiTab, removeMultiTab, setActiveMultiTab, handleClickTab } = useAppStore();
|
||||
// const { toReload } = useRouterChange();
|
||||
const { reload, handleReload } = useReloadInject();
|
||||
const { handleReload } = useReloadInject();
|
||||
|
||||
const hoverIndex = ref(NaN);
|
||||
|
||||
const fixedHeaderAndTab = computed(() => theme.fixedHeaderAndTab || theme.navStyle.mode === 'horizontal-mix');
|
||||
const multiTabHeight = computed(() => {
|
||||
@ -59,10 +74,6 @@ const headerHeight = computed(() => {
|
||||
return `${height}px`;
|
||||
});
|
||||
|
||||
// async function handleReload() {
|
||||
// // toReload(route.fullPath);
|
||||
// }
|
||||
|
||||
function init() {
|
||||
initMultiTab();
|
||||
}
|
||||
|
||||
@ -10,6 +10,15 @@
|
||||
<setting-menu-item label="多页签">
|
||||
<n-switch :value="theme.multiTabStyle.visible" @update:value="handleMultiTabVisible" />
|
||||
</setting-menu-item>
|
||||
<setting-menu-item label="多页签风格">
|
||||
<n-select
|
||||
class="w-120px"
|
||||
size="small"
|
||||
:value="theme.multiTabStyle.mode"
|
||||
:options="theme.multiTabStyle.modeList"
|
||||
@update:value="handleMultiTabMode"
|
||||
/>
|
||||
</setting-menu-item>
|
||||
<setting-menu-item label="页面切换动画">
|
||||
<n-switch :value="theme.pageStyle.animate" @update:value="handlePageAnimate" />
|
||||
</setting-menu-item>
|
||||
@ -35,6 +44,7 @@ const {
|
||||
handleCrumbsVisible,
|
||||
handleCrumbsIconVisible,
|
||||
handleMultiTabVisible,
|
||||
handleMultiTabMode,
|
||||
handlePageAnimate,
|
||||
handlePageAnimateType
|
||||
} = useThemeStore();
|
||||
|
||||
@ -15,8 +15,8 @@
|
||||
:class="[{ 'content-padding': isHorizontalMix }, routeProps.fullPage ? 'h-full' : 'min-h-100vh']"
|
||||
>
|
||||
<global-header v-if="!isHorizontalMix" :z-index="1" />
|
||||
<global-tab :z-index="1" />
|
||||
<n-layout-content class="flex-auto" :class="{ 'bg-[#f5f7f9]': !theme.darkMode }">
|
||||
<global-tab v-if="theme.multiTabStyle.visible" :z-index="1" />
|
||||
<n-layout-content class="flex-auto p-10px" :class="{ 'bg-[#f5f7f9]': !theme.darkMode }">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive>
|
||||
<component :is="Component" v-if="routeProps.keepAlive && reload" :key="routeProps.name" />
|
||||
|
||||
Reference in New Issue
Block a user