This commit is contained in:
45
library/components/VabApp/index.vue
Normal file
45
library/components/VabApp/index.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<script lang="ts" setup>
|
||||
import { useHead } from '@vueuse/head'
|
||||
import { pwa } from '@/config'
|
||||
import { enLocale, zhLocale } from '@/i18n'
|
||||
|
||||
const route = useRoute()
|
||||
const { locale: language } = useI18n()
|
||||
|
||||
const locale = computed(() =>
|
||||
language.value === 'en' ? enLocale : zhLocale
|
||||
)
|
||||
|
||||
const VabUpdate = defineAsyncComponent(
|
||||
() => import('@/plugins/VabUpdate/index.vue')
|
||||
)
|
||||
|
||||
const siteData = reactive({
|
||||
description: '',
|
||||
})
|
||||
watchEffect(() => {
|
||||
siteData.description = `${'Vue'} ${'Admin'} ${'Plus'}-${route.meta.title} - 简介、官网、首页、文档和下载 - 前端开发框架`
|
||||
})
|
||||
useHead({
|
||||
meta: [
|
||||
{
|
||||
name: `description`,
|
||||
content: computed(() => siteData.description),
|
||||
},
|
||||
],
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-config-provider
|
||||
:button="{
|
||||
autoInsertSpace: true,
|
||||
}"
|
||||
:locale="locale"
|
||||
>
|
||||
<router-view v-slot="{ Component }">
|
||||
<component :is="Component" />
|
||||
</router-view>
|
||||
<vab-update v-if="pwa" ref="vabUpdateRef" />
|
||||
</el-config-provider>
|
||||
</template>
|
||||
28
library/components/VabAppMain/index.vue
Normal file
28
library/components/VabAppMain/index.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<script lang="ts" setup>
|
||||
import { useRoutesStore } from '@/store/modules/routes'
|
||||
import { handleActivePath } from '@/utils/routes'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const routesStore: any = useRoutesStore()
|
||||
const { tab, activeMenu } = storeToRefs(routesStore)
|
||||
|
||||
watch(
|
||||
route,
|
||||
() => {
|
||||
if (tab.value.data !== route.matched[0].name)
|
||||
tab.value.data = route.matched[0].name
|
||||
activeMenu.value.data = handleActivePath(route)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="vab-app-main">
|
||||
<section>
|
||||
<vab-router-view />
|
||||
</section>
|
||||
<vab-footer />
|
||||
</div>
|
||||
</template>
|
||||
109
library/components/VabAvatar/index.vue
Normal file
109
library/components/VabAvatar/index.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { toLoginRoute } from '@/utils/routes'
|
||||
import { translate } from '@/i18n'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const userStore = useUserStore()
|
||||
const { avatar, username } = storeToRefs(userStore)
|
||||
const { logout } = userStore
|
||||
|
||||
const active = ref(false)
|
||||
|
||||
const handleVisibleChange = (val: boolean) => {
|
||||
active.value = val
|
||||
}
|
||||
const handleCommand = async (command: string) => {
|
||||
switch (command) {
|
||||
case 'logout':
|
||||
await logout()
|
||||
await router.push(toLoginRoute(route.fullPath))
|
||||
break
|
||||
case 'personalCenter':
|
||||
await router.push('/setting/personalCenter')
|
||||
break
|
||||
case 'friendlyTip':
|
||||
await router.push('/friendly-tip')
|
||||
break
|
||||
case 'shop':
|
||||
await window.open('https://vuejs-core.cn/shop-vite')
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dropdown @command="handleCommand" @visible-change="handleVisibleChange">
|
||||
<span class="avatar-dropdown">
|
||||
<el-avatar class="user-avatar" :src="avatar" />
|
||||
<div class="user-name">
|
||||
<span class="hidden-xs-only" :title="username">
|
||||
{{ username }}
|
||||
</span>
|
||||
<vab-icon
|
||||
class="vab-dropdown"
|
||||
:class="{ 'vab-dropdown-active': active }"
|
||||
icon="arrow-down-s-line"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="personalCenter">
|
||||
<vab-icon icon="user-line" />
|
||||
<span>{{ translate('个人中心') }}</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="shop">
|
||||
<vab-icon icon="vuejs-line" />
|
||||
<span>{{ translate('shop vite') }}</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="logout">
|
||||
<vab-icon icon="logout-circle-r-line" />
|
||||
<span>{{ translate('退出登录') }}</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar-dropdown {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
|
||||
.user-avatar {
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-left: 15px;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
margin-left: 6px;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
span {
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
[class*='ri-'] {
|
||||
margin-left: 3px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
65
library/components/VabBreadcrumb/index.vue
Normal file
65
library/components/VabBreadcrumb/index.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<script lang="ts" setup>
|
||||
import { useRoutesStore } from '@/store/modules/routes'
|
||||
import { translate } from '@/i18n'
|
||||
import { handleMatched } from '@/utils/routes'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const routesStore = useRoutesStore()
|
||||
const { getRoutes: routes } = storeToRefs(routesStore)
|
||||
|
||||
const breadcrumbList = computed(() =>
|
||||
handleMatched(routes.value, route.path).filter(
|
||||
(item: any) => !item.meta.breadcrumbHidden
|
||||
)
|
||||
)
|
||||
const handleTo = (path: string | undefined = '') => {
|
||||
return { path }
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-breadcrumb class="vab-breadcrumb" separator=">">
|
||||
<el-breadcrumb-item
|
||||
v-for="(item, index) in breadcrumbList"
|
||||
:key="index"
|
||||
:to="handleTo(item.redirect)"
|
||||
>
|
||||
<vab-icon
|
||||
v-if="item.meta.icon"
|
||||
:icon="item.meta.icon"
|
||||
:is-custom-svg="item.meta.isCustomSvg"
|
||||
/>
|
||||
<span v-if="item.meta.title">{{ translate(item.meta.title) }}</span>
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vab-breadcrumb {
|
||||
height: $base-nav-height;
|
||||
font-size: $base-font-size-default;
|
||||
line-height: $base-nav-height;
|
||||
|
||||
:deep() {
|
||||
.el-breadcrumb__item {
|
||||
.el-breadcrumb__inner {
|
||||
font-weight: normal;
|
||||
color: #515a6e;
|
||||
i,
|
||||
svg {
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.el-breadcrumb__inner {
|
||||
a {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
65
library/components/VabCard/index.vue
Normal file
65
library/components/VabCard/index.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
header: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
bodyStyle: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
shadow: {
|
||||
type: String,
|
||||
default: 'never',
|
||||
} as any,
|
||||
skeleton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
skeletonRows: {
|
||||
type: Number,
|
||||
default: 4, //显示的数量会比传入的数量多 1
|
||||
},
|
||||
})
|
||||
|
||||
let timer: any = null
|
||||
const skeletonShow = ref(true)
|
||||
|
||||
timer = setTimeout(() => {
|
||||
skeletonShow.value = false
|
||||
}, 500)
|
||||
|
||||
onBeforeRouteLeave((to, from, next) => {
|
||||
clearInterval(timer)
|
||||
next()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card :body-style="bodyStyle" class="vab-card" :shadow="shadow">
|
||||
<template v-if="$slots.header || header" #header>
|
||||
<slot name="header">{{ header }}</slot>
|
||||
</template>
|
||||
<el-skeleton
|
||||
v-if="skeleton"
|
||||
animated
|
||||
:loading="skeletonShow"
|
||||
:rows="skeletonRows"
|
||||
>
|
||||
<template #default>
|
||||
<slot class="vab-card-transition" />
|
||||
</template>
|
||||
</el-skeleton>
|
||||
<slot v-else class="vab-card-transition" />
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vab-card {
|
||||
&-transition {
|
||||
transition: $base-transition;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
69
library/components/VabColorfulCard/index.vue
Normal file
69
library/components/VabColorfulCard/index.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
shadow: {
|
||||
type: String,
|
||||
default: 'never',
|
||||
} as any,
|
||||
colorFrom: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
colorTo: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card
|
||||
class="vab-colorful-card"
|
||||
:shadow="shadow"
|
||||
:style="{
|
||||
background: `linear-gradient(50deg, ${colorFrom}, ${colorTo})`,
|
||||
}"
|
||||
>
|
||||
<template #header>{{ title }}</template>
|
||||
<vab-icon v-if="icon" :icon="icon" />
|
||||
<slot />
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vab-colorful-card {
|
||||
position: relative;
|
||||
min-height: 120px;
|
||||
cursor: pointer;
|
||||
|
||||
* {
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
|
||||
:deep() {
|
||||
.el-card__header {
|
||||
color: var(--el-color-white);
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
right: 20px;
|
||||
font-size: 60px;
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
392
library/components/VabColumnBar/index.vue
Normal file
392
library/components/VabColumnBar/index.vue
Normal file
@@ -0,0 +1,392 @@
|
||||
<script lang="ts" setup>
|
||||
import variables from '@vab/styles/variables/variables.module.scss'
|
||||
import { isExternal } from '@/utils/validate'
|
||||
import { translate } from '@/i18n'
|
||||
import { useRoutesStore } from '@/store/modules/routes'
|
||||
import { defaultOpeneds, openFirstMenu, uniqueOpened } from '@/config'
|
||||
import { useSettingsStore } from '@/store/modules/settings'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const { theme, collapse } = storeToRefs(settingsStore)
|
||||
const { foldSideBar, openSideBar } = settingsStore
|
||||
const routesStore = useRoutesStore()
|
||||
const {
|
||||
getTab: tab,
|
||||
getTabMenu: tabMenu,
|
||||
getActiveMenu: activeMenu,
|
||||
getRoutes: routes,
|
||||
getPartialRoutes: partialRoutes,
|
||||
}: any = storeToRefs(routesStore)
|
||||
|
||||
const handleTabClick = () => {
|
||||
nextTick(() => {
|
||||
if (isExternal(tabMenu.value.path)) {
|
||||
window.open(tabMenu.value.path)
|
||||
setTimeout(() => {
|
||||
router.push(`/direct?path=/`)
|
||||
}, 500)
|
||||
} else if (openFirstMenu)
|
||||
router.push(tabMenu.value.redirect || tabMenu.value)
|
||||
})
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
const foldUnfold: any = document.querySelector(
|
||||
'.fold-unfold'
|
||||
) as HTMLElement
|
||||
if (theme.value.layout === 'column' && route.meta.noColumn) {
|
||||
foldSideBar()
|
||||
if (foldUnfold) foldUnfold.style = 'display:none'
|
||||
} else {
|
||||
openSideBar()
|
||||
if (foldUnfold) foldUnfold.style = ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-scrollbar
|
||||
class="vab-column-bar-container"
|
||||
:class="{
|
||||
'is-collapse': collapse,
|
||||
['vab-column-bar-container-' + theme.columnStyle]: true,
|
||||
}"
|
||||
>
|
||||
<vab-logo />
|
||||
<el-tabs
|
||||
v-model="tab.data"
|
||||
tab-position="left"
|
||||
@tab-click="handleTabClick"
|
||||
>
|
||||
<template v-for="(item, index) in routes" :key="index + item.name">
|
||||
<el-tab-pane :name="item.name">
|
||||
<template #label>
|
||||
<div
|
||||
class="vab-column-grid"
|
||||
:class="{
|
||||
['vab-column-grid-' + theme.columnStyle]: true,
|
||||
}"
|
||||
:title="translate(item.meta.title)"
|
||||
>
|
||||
<div>
|
||||
<vab-icon
|
||||
v-if="item.meta.icon"
|
||||
:icon="item.meta.icon"
|
||||
:is-custom-svg="item.meta.isCustomSvg"
|
||||
/>
|
||||
<span>
|
||||
{{ translate(item.meta.title) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
|
||||
<el-menu
|
||||
:background-color="variables['column-second-menu-background']"
|
||||
:default-active="activeMenu.data"
|
||||
:default-openeds="defaultOpeneds"
|
||||
mode="vertical"
|
||||
:unique-opened="uniqueOpened"
|
||||
>
|
||||
<el-divider>
|
||||
{{ translate(tabMenu ? tabMenu.meta.title : tabMenu) }}
|
||||
</el-divider>
|
||||
<template v-for="item in partialRoutes" :key="item.path">
|
||||
<vab-menu v-if="!item.meta.hidden" :item="item" />
|
||||
</template>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use 'sass:math';
|
||||
@mixin active {
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
background-color: $base-column-second-menu-active !important;
|
||||
|
||||
i,
|
||||
svg {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: var(--el-color-primary);
|
||||
background-color: $base-column-second-menu-active !important;
|
||||
}
|
||||
}
|
||||
|
||||
.vab-column-bar-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: var(--el-left-menu-width);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: $base-column-second-menu-background;
|
||||
box-shadow: $base-box-shadow;
|
||||
|
||||
&-vertical,
|
||||
&-card,
|
||||
&-arrow {
|
||||
:deep() {
|
||||
.el-tabs + .el-menu {
|
||||
left: $base-left-menu-width-min;
|
||||
width: calc(
|
||||
var(--el-left-menu-width) - #{$base-left-menu-width-min}
|
||||
);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal {
|
||||
:deep() {
|
||||
.logo-container-column {
|
||||
.logo {
|
||||
width: $base-left-menu-width-min * 1.3 !important;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: $base-left-menu-width-min * 1.3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs + .el-menu {
|
||||
left: $base-left-menu-width-min * 1.3;
|
||||
width: calc(
|
||||
var(--el-left-menu-width) -
|
||||
#{$base-left-menu-width-min} * 1.3
|
||||
);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-card {
|
||||
:deep() {
|
||||
.el-tabs {
|
||||
.el-tabs__item {
|
||||
padding: 5px !important;
|
||||
|
||||
.vab-column-grid {
|
||||
width: $base-left-menu-width-min - 10 !important;
|
||||
height: $base-left-menu-width-min - 10 !important;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: transparent !important;
|
||||
|
||||
.vab-column-grid {
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs + .el-menu {
|
||||
left: $base-left-menu-width-min + 10;
|
||||
width: calc(
|
||||
var(--el-left-menu-width) -
|
||||
#{$base-left-menu-width-min} - 20px
|
||||
);
|
||||
}
|
||||
|
||||
.el-sub-menu .el-sub-menu__title,
|
||||
.el-menu-item {
|
||||
min-width: 180px;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
:deep() {
|
||||
.el-tabs {
|
||||
.el-tabs__item {
|
||||
&.is-active {
|
||||
background: transparent !important;
|
||||
|
||||
.vab-column-grid {
|
||||
background: transparent !important;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
content: '';
|
||||
border-color: transparent
|
||||
#{var(--el-color-white)} transparent
|
||||
transparent;
|
||||
border-style: solid dashed dashed;
|
||||
border-width: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs + .el-menu {
|
||||
left: $base-left-menu-width-min + 10;
|
||||
width: calc(
|
||||
var(--el-left-menu-width) -
|
||||
#{$base-left-menu-width-min} - 20px
|
||||
);
|
||||
}
|
||||
|
||||
.el-sub-menu .el-sub-menu__title,
|
||||
.el-menu-item {
|
||||
min-width: 180px;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vab-column-grid {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: $base-left-menu-width-min;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
|
||||
&-vertical,
|
||||
&-card,
|
||||
&-arrow {
|
||||
justify-content: center;
|
||||
height: $base-left-menu-width-min;
|
||||
|
||||
> div {
|
||||
svg {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: $base-font-size-default + 2;
|
||||
height: $base-font-size-default + 2;
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
[class*='ri-'] {
|
||||
display: block;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal {
|
||||
justify-content: left;
|
||||
width: $base-left-menu-width-min * 1.3;
|
||||
height: #{math.div($base-left-menu-width-min, 1.3)};
|
||||
padding-left: #{math.div($base-padding, 2)};
|
||||
}
|
||||
}
|
||||
|
||||
:deep() {
|
||||
* {
|
||||
transition: $base-transition;
|
||||
}
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.el-tabs {
|
||||
position: fixed;
|
||||
box-shadow: $base-box-shadow;
|
||||
|
||||
.el-tabs__header.is-left {
|
||||
margin-right: 0 !important;
|
||||
|
||||
.el-tabs__nav-wrap.is-left {
|
||||
margin-right: 0 !important;
|
||||
background: $base-column-first-menu-background;
|
||||
|
||||
.el-tabs__nav-scroll {
|
||||
height: calc(
|
||||
100vh - #{$base-logo-height}
|
||||
) !important;
|
||||
overflow-y: auto !important;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__nav {
|
||||
height: auto !important;
|
||||
overflow: hidden !important;
|
||||
background: $base-column-first-menu-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
color: var(--el-color-white);
|
||||
|
||||
&.is-active {
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__nav-prev,
|
||||
.el-tabs__active-bar.is-left,
|
||||
.el-tabs--left .el-tabs__nav-wrap.is-left::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: 0;
|
||||
|
||||
.el-divider {
|
||||
margin: 0 0 #{$base-margin} 0;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
&__text {
|
||||
color: var(--el-color-black);
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
height: $base-menu-item-height;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: $base-menu-item-height;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
|
||||
@include active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-collapse {
|
||||
:deep() {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
104
library/components/VabErrorLog/index.vue
Normal file
104
library/components/VabErrorLog/index.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<script lang="ts" setup>
|
||||
import { useErrorLogStore } from '@/store/modules/errorLog'
|
||||
|
||||
const errorLogStore = useErrorLogStore()
|
||||
const { errorLogs } = storeToRefs(errorLogStore)
|
||||
const { clearErrorLog } = errorLogStore
|
||||
|
||||
const state = reactive({
|
||||
dialogVisible: false,
|
||||
})
|
||||
const searchList = [
|
||||
{
|
||||
title: '百度搜索',
|
||||
url: 'https://www.baidu.com/baidu?wd=',
|
||||
icon: 'baidu-line',
|
||||
},
|
||||
{
|
||||
title: '谷歌搜索',
|
||||
url: 'https://www.google.com/search?q=',
|
||||
icon: 'google-line',
|
||||
},
|
||||
]
|
||||
|
||||
const clearAll = () => {
|
||||
state.dialogVisible = false
|
||||
clearErrorLog()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="errorLogs.length > 0">
|
||||
<el-badge
|
||||
type="danger"
|
||||
:value="errorLogs.length"
|
||||
@click="state.dialogVisible = true"
|
||||
>
|
||||
<vab-icon icon="bug-line" />
|
||||
</el-badge>
|
||||
|
||||
<el-dialog
|
||||
v-model="state.dialogVisible"
|
||||
append-to-body
|
||||
title="admin-plus 异常捕获(温馨提示：错误必须解决)"
|
||||
width="70%"
|
||||
>
|
||||
<el-table border :data="errorLogs">
|
||||
<el-table-column label="报错路由">
|
||||
<template #default="{ row }">
|
||||
<a :href="row.url" target="_blank">
|
||||
<el-tag type="success">{{ row.url }}</el-tag>
|
||||
</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="错误信息">
|
||||
<template #default="{ row }">
|
||||
<el-tag type="danger">{{ row.err.message }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="错误详情" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-popover placement="top-start" trigger="hover">
|
||||
{{ row.err.stack }}
|
||||
<template #reference>
|
||||
<el-button>查看</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="380">
|
||||
<template #default="{ row }">
|
||||
<a
|
||||
v-for="(item, index) in searchList"
|
||||
:key="index"
|
||||
:href="item.url + row.err.message"
|
||||
target="_blank"
|
||||
>
|
||||
<el-button>
|
||||
<vab-icon :icon="item.icon" />
|
||||
{{ item.title }}
|
||||
</el-button>
|
||||
</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<template #footer>
|
||||
<el-button @click="state.dialogVisible = false">
|
||||
取 消
|
||||
</el-button>
|
||||
<el-button type="danger" @click="clearAll">暂不显示</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-badge) {
|
||||
.el-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
22
library/components/VabFold/index.vue
Normal file
22
library/components/VabFold/index.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<script lang="ts" setup>
|
||||
import { useSettingsStore } from '@/store/modules/settings'
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const { collapse } = storeToRefs(settingsStore)
|
||||
const { toggleCollapse } = settingsStore
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<vab-icon
|
||||
class="fold-unfold"
|
||||
:icon="collapse ? 'menu-unfold-line' : 'menu-fold-line'"
|
||||
@click="toggleCollapse"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fold-unfold {
|
||||
color: var(--el-color-grey);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
47
library/components/VabFooter/index.vue
Normal file
47
library/components/VabFooter/index.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<script lang="ts" setup>
|
||||
import { useSettingsStore } from '@/store/modules/settings'
|
||||
|
||||
const fullYear = new Date().getFullYear()
|
||||
const settingsStore = useSettingsStore()
|
||||
const { title } = storeToRefs(settingsStore)
|
||||
|
||||
// 国家法律法规要求显示备案号 实际项目请自行修改为自己的备案信息及域名
|
||||
// const beianShow = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="vab-footer">
|
||||
Copyright
|
||||
<vab-icon icon="copyright-line" />
|
||||
{{ fullYear }} {{ title }}
|
||||
<!-- <a
|
||||
v-if="beianShow"
|
||||
class="beian"
|
||||
href="https://beian.miit.gov.cn/#/Integrated/index"
|
||||
target="_blank"
|
||||
>
|
||||
鲁ICP备2021002317号-1
|
||||
</a> -->
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vab-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 55px;
|
||||
padding: 0 #{$base-padding} 0 #{$base-padding};
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--el-color-white);
|
||||
border-top: 1px dashed #{$base-border-color};
|
||||
|
||||
i {
|
||||
margin: 0 5px;
|
||||
}
|
||||
.beian {
|
||||
margin-left: 5px;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
16
library/components/VabFullScreen/index.vue
Normal file
16
library/components/VabFullScreen/index.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<script lang="ts" setup>
|
||||
import { useSettingsStore } from '@/store/modules/settings'
|
||||
|
||||
const { isFullscreen, toggle } = useFullscreen()
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const { theme } = storeToRefs(settingsStore)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<vab-icon
|
||||
v-if="theme.showFullScreen"
|
||||
:icon="isFullscreen ? 'fullscreen-exit-fill' : 'fullscreen-fill'"
|
||||
@click="toggle"
|
||||
/>
|
||||
</template>
|
||||
233
library/components/VabHeader/index.vue
Normal file
233
library/components/VabHeader/index.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<script lang="ts" setup>
|
||||
import variables from '@vab/styles/variables/variables.module.scss'
|
||||
import { useRoutesStore } from '@/store/modules/routes'
|
||||
|
||||
defineProps({
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'horizontal',
|
||||
},
|
||||
})
|
||||
|
||||
const routesStore = useRoutesStore()
|
||||
const { getActiveMenu: activeMenu, getRoutes: routes } =
|
||||
storeToRefs(routesStore)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="vab-header">
|
||||
<div class="vab-main">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<vab-logo />
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div class="right-panel">
|
||||
<el-menu
|
||||
v-if="'horizontal' === layout"
|
||||
:active-text-color="variables['menu-color-active']"
|
||||
:background-color="variables['menu-background']"
|
||||
:default-active="activeMenu.data"
|
||||
menu-trigger="hover"
|
||||
mode="horizontal"
|
||||
style="width: 100%"
|
||||
:text-color="variables['menu-color']"
|
||||
>
|
||||
<template
|
||||
v-for="(item, index) in routes.flatMap(
|
||||
(route) =>
|
||||
route['meta'] &&
|
||||
route['meta']['levelHidden'] &&
|
||||
route['children']
|
||||
? [...route['children']]
|
||||
: route
|
||||
)"
|
||||
>
|
||||
<vab-menu
|
||||
v-if="
|
||||
item['meta'] && !item['meta']['hidden']
|
||||
"
|
||||
:key="index + item['name']"
|
||||
:item="item"
|
||||
:layout="layout"
|
||||
/>
|
||||
</template>
|
||||
</el-menu>
|
||||
<vab-error-log />
|
||||
<vab-lock />
|
||||
<vab-search />
|
||||
<vab-notice />
|
||||
<vab-full-screen />
|
||||
<vab-language />
|
||||
<vab-theme />
|
||||
<vab-refresh />
|
||||
<vab-avatar />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use 'sass:math';
|
||||
|
||||
$base-menu-height: 40px;
|
||||
.vab-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: flex-end;
|
||||
height: $base-header-height;
|
||||
background: $base-menu-background;
|
||||
|
||||
.vab-main {
|
||||
padding: 0 #{$base-padding} 0 #{$base-padding};
|
||||
|
||||
.right-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: $base-header-height;
|
||||
|
||||
:deep() {
|
||||
.el-sub-menu__icon-more {
|
||||
margin-top: #{math.div($base-menu-height - 20, 2)} !important;
|
||||
margin-right: 20px !important;
|
||||
}
|
||||
|
||||
> .el-menu--horizontal.el-menu {
|
||||
> .el-sub-menu > .el-sub-menu__title {
|
||||
padding-right: 0;
|
||||
|
||||
> .el-sub-menu__icon-arrow {
|
||||
position: relative !important;
|
||||
margin-top: -5px !important;
|
||||
margin-right: 0;
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
> .el-menu-item {
|
||||
.el-tag {
|
||||
position: relative !important;
|
||||
margin-top: 0 !important;
|
||||
margin-right: -20px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.vab-dot {
|
||||
float: right;
|
||||
margin-top: #{math.div(
|
||||
$base-header-height - 6,
|
||||
2
|
||||
)} +
|
||||
1;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1199px) {
|
||||
.el-tag {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: 0 !important;
|
||||
* {
|
||||
border: 0 !important;
|
||||
}
|
||||
&.el-menu--horizontal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
height: $base-menu-height;
|
||||
border: 0 !important;
|
||||
|
||||
> .el-menu-item,
|
||||
> .el-sub-menu {
|
||||
height: $base-menu-height;
|
||||
margin-right: 3px;
|
||||
line-height: $base-menu-height;
|
||||
border-radius: 3px;
|
||||
|
||||
.el-sub-menu__icon-arrow {
|
||||
float: right;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
> .el-sub-menu__title {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
height: $base-menu-height;
|
||||
line-height: $base-menu-height;
|
||||
border: 0 !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[class*='ri-'],
|
||||
.vab-icon {
|
||||
margin-left: 0;
|
||||
color: var(--el-color-white);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-sub-menu {
|
||||
.vab-icon {
|
||||
margin-top: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-sub-menu,
|
||||
.el-menu-item {
|
||||
i,
|
||||
.vab-icon {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border: 0 !important;
|
||||
|
||||
.el-sub-menu__title {
|
||||
border: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
&.is-active {
|
||||
background: var(--el-color-primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-name {
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
|
||||
.user-name + i {
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
|
||||
[class*='ri-'] {
|
||||
margin-left: $base-margin;
|
||||
color: var(--el-color-white);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button {
|
||||
svg {
|
||||
margin-right: 0;
|
||||
color: var(--el-color-white);
|
||||
cursor: pointer;
|
||||
fill: var(--el-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
30
library/components/VabLanguage/index.vue
Normal file
30
library/components/VabLanguage/index.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<script lang="ts" setup>
|
||||
import { useSettingsStore } from '@/store/modules/settings'
|
||||
import getPageTitle from '@/utils/pageTitle'
|
||||
|
||||
const { locale } = useI18n()
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const { theme } = storeToRefs(settingsStore)
|
||||
const { changeLanguage } = settingsStore
|
||||
|
||||
const handleCommand = (language: string) => {
|
||||
changeLanguage(language)
|
||||
locale.value = language
|
||||
document.title = getPageTitle(route.meta.title)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dropdown v-if="theme.showLanguage" @command="handleCommand">
|
||||
<vab-icon icon="translate" />
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="zh">中文简体</el-dropdown-item>
|
||||
<el-dropdown-item command="en">English</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
27
library/components/VabLink/index.vue
Normal file
27
library/components/VabLink/index.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<script lang="ts" setup>
|
||||
import { isExternal } from '@/utils/validate'
|
||||
|
||||
const props = defineProps({
|
||||
to: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const type = computed(() => (isExternal(props.to) ? 'a' : 'router-link'))
|
||||
|
||||
const linkProps = () =>
|
||||
isExternal(props.to)
|
||||
? {
|
||||
href: props.to,
|
||||
target: '_blank',
|
||||
rel: 'noopener',
|
||||
}
|
||||
: { to: props.to }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="type" v-bind="linkProps()">
|
||||
<slot />
|
||||
</component>
|
||||
</template>
|
||||
225
library/components/VabLock/index.vue
Normal file
225
library/components/VabLock/index.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { useSettingsStore } from '@/store/modules/settings'
|
||||
import { translate } from '@/i18n'
|
||||
|
||||
const vFocus: any = {
|
||||
mounted(el: HTMLElement) {
|
||||
el.querySelector('input')?.focus()
|
||||
},
|
||||
}
|
||||
|
||||
const userStore = useUserStore()
|
||||
const { avatar } = storeToRefs(userStore)
|
||||
const settingsStore = useSettingsStore()
|
||||
const { theme, lock, title } = storeToRefs(settingsStore)
|
||||
const { handleLock: _handleLock, handleUnLock: _handleUnLock } =
|
||||
settingsStore
|
||||
|
||||
const background = ref(
|
||||
`https://gcore.jsdelivr.net/gh/zxwk1998/image/vab-image-lock/${Math.round(Math.random() * 31)}.jpg`
|
||||
)
|
||||
const randomBackground = () => {
|
||||
background.value = `https://gcore.jsdelivr.net/gh/zxwk1998/image/vab-image-lock/${Math.round(Math.random() * 31)}.jpg`
|
||||
}
|
||||
|
||||
const validatePass = (rule: any, value: string, callback: any) => {
|
||||
if (value === '' || value !== '123456') {
|
||||
callback(new Error('请输入正确的密码'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
const formRef = ref()
|
||||
const form = ref({
|
||||
password: '123456',
|
||||
})
|
||||
const rules = {
|
||||
password: [{ validator: validatePass, trigger: 'blur' }],
|
||||
}
|
||||
|
||||
let lockIcon = true
|
||||
const handleUnLock = () => {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
lockIcon = false
|
||||
setTimeout(async () => {
|
||||
await _handleUnLock()
|
||||
lockIcon = true
|
||||
await randomBackground()
|
||||
const el = document.querySelector(
|
||||
'.vab-side-bar'
|
||||
) as HTMLElement
|
||||
if (el) el.removeAttribute('style')
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleLock = () => {
|
||||
_handleLock()
|
||||
const el = document.querySelector('.vab-side-bar') as HTMLElement
|
||||
if (el) el.style.display = 'none'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<vab-icon v-if="theme.showLock" icon="lock-line" @click="handleLock" />
|
||||
<transition v-if="theme.showLock" mode="out-in" name="fade-transform">
|
||||
<div v-if="lock" class="vab-screen-lock">
|
||||
<div
|
||||
class="vab-screen-lock-background"
|
||||
:style="{
|
||||
background: `fixed url(${background}) center`,
|
||||
backgroundSize: '100% 100%',
|
||||
filter: 'blur(10px)',
|
||||
}"
|
||||
></div>
|
||||
|
||||
<div class="vab-screen-lock-content">
|
||||
<div class="vab-screen-lock-content-title">
|
||||
<el-avatar :size="180" :src="avatar" />
|
||||
<vab-icon
|
||||
:icon="lockIcon ? 'lock-line' : 'lock-unlock-line'"
|
||||
/>
|
||||
{{ title }} {{ translate('屏幕已锁定') }}
|
||||
</div>
|
||||
<div class="vab-screen-lock-content-form">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item label="" :label-width="0" prop="password">
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
v-focus
|
||||
autocomplete="off"
|
||||
placeholder="请输出密码123456"
|
||||
type="password"
|
||||
>
|
||||
<template #suffix>
|
||||
<el-button
|
||||
native-type="submit"
|
||||
type="primary"
|
||||
@click="handleUnLock"
|
||||
>
|
||||
<vab-icon
|
||||
:icon="
|
||||
lockIcon
|
||||
? 'lock-line'
|
||||
: 'lock-unlock-line'
|
||||
"
|
||||
/>
|
||||
{{ translate('解锁') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<span @click="randomBackground">
|
||||
{{ translate('切换壁纸') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vab-screen-lock {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $base-z-index;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: $base-transition;
|
||||
|
||||
&-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $base-z-index - 1;
|
||||
}
|
||||
|
||||
&-content {
|
||||
z-index: $base-z-index;
|
||||
padding: 40px 95px 40px 95px;
|
||||
color: #252a30;
|
||||
text-align: center;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 15px;
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
> span {
|
||||
font-size: $base-font-size-small;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-title {
|
||||
line-height: 50px;
|
||||
color: #252a30;
|
||||
text-align: center;
|
||||
|
||||
.ri-lock-line,
|
||||
.ri-lock-unlock-line {
|
||||
display: block;
|
||||
margin: auto !important;
|
||||
font-size: 30px;
|
||||
color: #252a30 !important;
|
||||
transition: $base-transition;
|
||||
}
|
||||
}
|
||||
|
||||
&-form {
|
||||
:deep() {
|
||||
.el-input__inner {
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
padding-right: 0;
|
||||
.el-input__suffix {
|
||||
right: 0;
|
||||
|
||||
.el-button {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
i {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__validateIcon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.vab-screen-lock-content {
|
||||
width: auto !important;
|
||||
margin: 5vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
123
library/components/VabLogo/index.vue
Normal file
123
library/components/VabLogo/index.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<script lang="ts" setup>
|
||||
import { useSettingsStore } from '@/store/modules/settings'
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const { theme, logo, title } = storeToRefs(settingsStore)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="logo-container"
|
||||
:class="{
|
||||
['logo-container-' + theme.layout]: true,
|
||||
}"
|
||||
>
|
||||
<router-link to="/">
|
||||
<span class="logo">
|
||||
<!-- 使用自定义svg示例 -->
|
||||
<vab-icon v-if="logo" :icon="logo" is-custom-svg />
|
||||
</span>
|
||||
<span
|
||||
class="title"
|
||||
:class="{ 'hidden-xs-only': theme.layout === 'horizontal' }"
|
||||
>
|
||||
{{ title }}
|
||||
</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin container {
|
||||
position: relative;
|
||||
height: $base-header-height;
|
||||
overflow: hidden;
|
||||
line-height: $base-header-height;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@mixin logo {
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
color: $base-title-color;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
@mixin title {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 20px;
|
||||
line-height: 55px;
|
||||
vertical-align: middle;
|
||||
color: $base-title-color;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
&-horizontal,
|
||||
&-common {
|
||||
@include container;
|
||||
|
||||
.logo {
|
||||
svg,
|
||||
img {
|
||||
@include logo;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@include title;
|
||||
}
|
||||
}
|
||||
|
||||
&-vertical,
|
||||
&-column,
|
||||
&-comprehensive,
|
||||
&-float {
|
||||
@include container;
|
||||
|
||||
height: $base-logo-height;
|
||||
line-height: $base-logo-height;
|
||||
text-align: center;
|
||||
|
||||
.logo {
|
||||
svg,
|
||||
img {
|
||||
@include logo;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@include title;
|
||||
max-width: calc(var(--el-left-menu-width) - 60px);
|
||||
}
|
||||
}
|
||||
|
||||
&-column {
|
||||
background: $base-column-second-menu-background !important;
|
||||
|
||||
.logo {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: $base-left-menu-width-min;
|
||||
height: $base-logo-height;
|
||||
margin: 0;
|
||||
background: $base-column-first-menu-background;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-left: $base-left-menu-width-min !important;
|
||||
color: var(--el-color-black) !important;
|
||||
background: $base-column-second-menu-background !important;
|
||||
@include title;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
82
library/components/VabMenu/components/VabMenuItem.vue
Normal file
82
library/components/VabMenu/components/VabMenuItem.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<script lang="ts" setup>
|
||||
import { useSettingsStore } from '@/store/modules/settings'
|
||||
import { isExternal } from '@/utils/validate'
|
||||
import { translate } from '@/i18n'
|
||||
import { isHashRouterMode } from '@/config'
|
||||
|
||||
const props = defineProps({
|
||||
itemOrMenu: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const $pub: any = inject('$pub')
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const { device } = storeToRefs(settingsStore)
|
||||
const { foldSideBar } = settingsStore
|
||||
|
||||
const handleLink = () => {
|
||||
const routePath = props.itemOrMenu.path
|
||||
const target = props.itemOrMenu.meta.target
|
||||
if (target === '_blank') {
|
||||
if (isExternal(routePath)) window.open(routePath)
|
||||
else if (route.path !== routePath)
|
||||
isHashRouterMode
|
||||
? window.open(`/#${routePath}`)
|
||||
: window.open(routePath)
|
||||
} else {
|
||||
if (isExternal(routePath)) window.location.href = routePath
|
||||
else if (route.path !== routePath) {
|
||||
if (device.value === 'mobile') foldSideBar()
|
||||
router.push(props.itemOrMenu.path)
|
||||
} else $pub('reload-router-view')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-menu-item :index="itemOrMenu.path" @click="handleLink">
|
||||
<vab-icon
|
||||
v-if="itemOrMenu.meta.icon"
|
||||
:icon="itemOrMenu.meta.icon"
|
||||
:is-custom-svg="itemOrMenu.meta.isCustomSvg"
|
||||
:title="translate(itemOrMenu.meta.title)"
|
||||
/>
|
||||
<span :title="translate(itemOrMenu.meta.title)">
|
||||
{{ translate(itemOrMenu.meta.title) }}
|
||||
</span>
|
||||
<el-tag v-if="itemOrMenu.meta.badge" effect="dark" type="danger">
|
||||
{{ itemOrMenu.meta.badge }}
|
||||
</el-tag>
|
||||
<span v-if="itemOrMenu.meta.dot" class="vab-dot vab-dot-error">
|
||||
<span />
|
||||
</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use 'sass:math';
|
||||
:deep(.el-tag) {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
height: 16px;
|
||||
padding-right: 4px;
|
||||
padding-left: 4px;
|
||||
// margin-top: #{math.div($base-menu-item-height - 16, 2)};
|
||||
line-height: 16px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.vab-dot {
|
||||
position: absolute !important;
|
||||
right: 20px;
|
||||
// margin-top: #{math.div($base-menu-item-height - 6, 2)};
|
||||
}
|
||||
</style>
|
||||
36
library/components/VabMenu/components/VabSubMenu.vue
Normal file
36
library/components/VabMenu/components/VabSubMenu.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<script lang="ts" setup>
|
||||
import { translate } from '@/i18n'
|
||||
import { useSettingsStore } from '@/store/modules/settings'
|
||||
|
||||
defineProps({
|
||||
itemOrMenu: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const settingsStore: any = useSettingsStore()
|
||||
const { theme }: any = storeToRefs(settingsStore)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-sub-menu
|
||||
:index="itemOrMenu.path"
|
||||
:teleported="theme.layout != 'horizontal'"
|
||||
>
|
||||
<template #title>
|
||||
<vab-icon
|
||||
v-if="itemOrMenu.meta.icon"
|
||||
:icon="itemOrMenu.meta.icon"
|
||||
:is-custom-svg="itemOrMenu.meta.isCustomSvg"
|
||||
:title="translate(itemOrMenu.meta.title)"
|
||||
/>
|
||||
<span :title="translate(itemOrMenu.meta.title)">
|
||||
{{ translate(itemOrMenu.meta.title) }}
|
||||
</span>
|
||||
</template>
|
||||
<slot />
|
||||
</el-sub-menu>
|
||||
</template>
|
||||
83
library/components/VabMenu/index.vue
Normal file
83
library/components/VabMenu/index.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<component
|
||||
:is="menuComponent"
|
||||
v-if="!item.meta.hidden"
|
||||
:item-or-menu="item"
|
||||
>
|
||||
<template v-if="item.children && item.children.length">
|
||||
<vab-menu
|
||||
v-for="route in item.children"
|
||||
:key="route.path"
|
||||
:item="route"
|
||||
/>
|
||||
</template>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
/* 防止偶发性自动导入失败 */
|
||||
import { computed, defineComponent } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useSettingsStore } from '@/store/modules/settings'
|
||||
|
||||
const imports = require.context('./components', true, /\.vue$/)
|
||||
const Components: {
|
||||
[key: string]: any
|
||||
} = {}
|
||||
imports.keys().forEach((key) => {
|
||||
Components[key.replace(/(\/|\.|vue)/g, '')] = imports(key).default
|
||||
})
|
||||
|
||||
export default defineComponent({
|
||||
name: 'VabMenu',
|
||||
components: Components,
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const settingsStore = useSettingsStore()
|
||||
const { collapse } = storeToRefs(settingsStore)
|
||||
|
||||
const menuComponent = computed(() =>
|
||||
props.item.children &&
|
||||
props.item.children.some((_route: any) => {
|
||||
return _route.meta.hidden !== true
|
||||
})
|
||||
? 'VabSubMenu'
|
||||
: 'VabMenuItem'
|
||||
)
|
||||
|
||||
return {
|
||||
collapse,
|
||||
menuComponent,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vab-menu-children-height {
|
||||
height: 60vh !important;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--由于element-plus
|
||||
bug使用teleported=false会导致多级路由无法显示，故所有菜单必须生成至body下，样式必须放到body下-->
|
||||
<style lang="scss">
|
||||
.el-popper.is-light {
|
||||
border: 0 !important;
|
||||
}
|
||||
</style>
|
||||
165
library/components/VabNav/index.vue
Normal file
165
library/components/VabNav/index.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<script lang="ts" setup>
|
||||
import { useRoutesStore } from '@/store/modules/routes'
|
||||
import { translate } from '@/i18n'
|
||||
import { isExternal } from '@/utils/validate'
|
||||
import { openFirstMenu } from '@/config'
|
||||
|
||||
defineProps({
|
||||
layout: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const routesStore: any = useRoutesStore()
|
||||
const {
|
||||
getTab: tab,
|
||||
getTabMenu: tabMenu,
|
||||
getRoutes: routes,
|
||||
} = storeToRefs(routesStore)
|
||||
|
||||
const handleTabClick = () => {
|
||||
nextTick(() => {
|
||||
if (isExternal(tabMenu.value.path)) {
|
||||
window.open(tabMenu.value.path)
|
||||
setTimeout(() => {
|
||||
router.push('/')
|
||||
}, 1000)
|
||||
} else if (openFirstMenu)
|
||||
router.push(tabMenu.value.redirect || tabMenu.value)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="vab-nav">
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="4">
|
||||
<div class="left-panel">
|
||||
<vab-fold v-if="layout !== 'float'" />
|
||||
<el-tabs
|
||||
v-if="layout === 'comprehensive'"
|
||||
v-model="tab.data"
|
||||
tab-position="top"
|
||||
@tab-click="handleTabClick"
|
||||
>
|
||||
<template
|
||||
v-for="(item, index) in routes"
|
||||
:key="index + item.name"
|
||||
>
|
||||
<el-tab-pane :name="item.name">
|
||||
<template #label>
|
||||
<vab-icon
|
||||
v-if="item.meta.icon"
|
||||
:icon="item.meta.icon"
|
||||
:is-custom-svg="item.meta.isCustomSvg"
|
||||
style="min-width: 16px"
|
||||
/>
|
||||
<span>
|
||||
{{ translate(item.meta.title) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
<vab-breadcrumb v-else class="hidden-xs-only" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="20">
|
||||
<div class="right-panel">
|
||||
<vab-error-log />
|
||||
<vab-lock />
|
||||
<vab-search />
|
||||
<vab-notice />
|
||||
<vab-full-screen />
|
||||
<vab-language />
|
||||
<vab-theme />
|
||||
<vab-refresh />
|
||||
<vab-avatar />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vab-nav {
|
||||
position: relative;
|
||||
height: $base-nav-height;
|
||||
padding-right: $base-padding;
|
||||
padding-left: $base-padding;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
background: var(--el-color-white);
|
||||
box-shadow: $base-box-shadow;
|
||||
|
||||
.left-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
height: $base-nav-height;
|
||||
|
||||
:deep() {
|
||||
.fold-unfold {
|
||||
margin-right: $base-margin;
|
||||
}
|
||||
|
||||
.el-tabs {
|
||||
width: 100%;
|
||||
margin-left: $base-margin;
|
||||
|
||||
.el-tabs__header {
|
||||
margin: 0;
|
||||
|
||||
> .el-tabs__nav-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.el-icon-arrow-left,
|
||||
.el-icon-arrow-right {
|
||||
font-weight: 600;
|
||||
color: var(--el-color-grey);
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
i {
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: $base-nav-height;
|
||||
|
||||
:deep() {
|
||||
[class*='ri-'] {
|
||||
margin-left: $base-margin;
|
||||
color: var(--el-color-grey);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button {
|
||||
[class*='ri-'] {
|
||||
margin-left: 0;
|
||||
color: var(--el-color-white);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
356
library/components/VabNotice/index.vue
Normal file
356
library/components/VabNotice/index.vue
Normal file
@@ -0,0 +1,356 @@
|
||||
<script lang="ts" setup>
|
||||
import { useSettingsStore } from '@/store/modules/settings'
|
||||
import { translate } from '@/i18n'
|
||||
import { getList } from '@/api/notice'
|
||||
|
||||
const $baseMessage: any = inject('$baseMessage')
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const { theme } = storeToRefs(settingsStore)
|
||||
|
||||
const activeName = ref('notice')
|
||||
const notices: any = ref([])
|
||||
const badge = ref(undefined)
|
||||
|
||||
const fetchData = async () => {
|
||||
const {
|
||||
data: { list, total },
|
||||
} = await getList()
|
||||
notices.value = list
|
||||
badge.value = total === 0 ? undefined : total
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
if (theme.value.showNotice) fetchData()
|
||||
})
|
||||
|
||||
const handleClick = () => {
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleClearNotice = () => {
|
||||
badge.value = undefined
|
||||
notices.value = []
|
||||
$baseMessage('清空消息成功', 'success', 'vab-hey-message-success')
|
||||
}
|
||||
|
||||
const formatTime = (time: string) => {
|
||||
const date = new Date(time)
|
||||
const now = new Date()
|
||||
const diff = now.getTime() - date.getTime()
|
||||
const minutes = Math.floor(diff / 60000)
|
||||
const hours = Math.floor(diff / 3600000)
|
||||
const days = Math.floor(diff / 86400000)
|
||||
|
||||
if (minutes < 1) return '刚刚'
|
||||
if (minutes < 60) return `${minutes}分钟前`
|
||||
if (hours < 24) return `${hours}小时前`
|
||||
if (days < 7) return `${days}天前`
|
||||
return date.toLocaleDateString()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-badge
|
||||
v-if="theme.showNotice"
|
||||
class="notice-badge"
|
||||
type="danger"
|
||||
:value="badge"
|
||||
>
|
||||
<el-popover
|
||||
placement="bottom-end"
|
||||
popper-class="notice-popover"
|
||||
:show-arrow="false"
|
||||
:width="380"
|
||||
>
|
||||
<template #reference>
|
||||
<div class="notice-trigger">
|
||||
<vab-icon icon="notification-line" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="notice-container">
|
||||
<div class="notice-header">
|
||||
<h3>{{ translate('消息中心') }}</h3>
|
||||
<el-button
|
||||
class="clear-btn"
|
||||
size="small"
|
||||
text
|
||||
type="primary"
|
||||
@click="handleClearNotice"
|
||||
>
|
||||
<vab-icon icon="delete-bin-line" />
|
||||
{{ translate('清空') }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
class="notice-tabs"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<el-tab-pane :label="translate('通知')" name="notice">
|
||||
<div class="notice-list">
|
||||
<el-scrollbar height="320px">
|
||||
<div
|
||||
v-if="notices.length === 0"
|
||||
class="empty-state"
|
||||
>
|
||||
<vab-icon
|
||||
class="empty-icon"
|
||||
icon="notification-off-line"
|
||||
/>
|
||||
<p>{{ translate('暂无通知') }}</p>
|
||||
</div>
|
||||
<div v-else class="notice-items">
|
||||
<div
|
||||
v-for="(item, index) in notices"
|
||||
:key="index"
|
||||
class="notice-item"
|
||||
>
|
||||
<div class="notice-avatar">
|
||||
<el-avatar
|
||||
:size="40"
|
||||
:src="item.image"
|
||||
/>
|
||||
<div
|
||||
v-if="!item.read"
|
||||
class="notice-status"
|
||||
></div>
|
||||
</div>
|
||||
<div class="notice-content">
|
||||
<div
|
||||
class="notice-text"
|
||||
v-html="item.notice"
|
||||
></div>
|
||||
<div class="notice-time">
|
||||
{{
|
||||
formatTime(
|
||||
item.time || new Date()
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="translate('邮件')" name="email">
|
||||
<div class="notice-list">
|
||||
<el-scrollbar height="320px">
|
||||
<div
|
||||
v-if="notices.length === 0"
|
||||
class="empty-state"
|
||||
>
|
||||
<vab-icon
|
||||
class="empty-icon"
|
||||
icon="mail-line"
|
||||
/>
|
||||
<p>{{ translate('暂无邮件') }}</p>
|
||||
</div>
|
||||
<div v-else class="notice-items">
|
||||
<div
|
||||
v-for="(item, index) in notices"
|
||||
:key="index"
|
||||
class="notice-item"
|
||||
>
|
||||
<div class="notice-avatar">
|
||||
<el-avatar
|
||||
:size="40"
|
||||
:src="item.image"
|
||||
/>
|
||||
<div
|
||||
v-if="!item.read"
|
||||
class="notice-status"
|
||||
></div>
|
||||
</div>
|
||||
<div class="notice-content">
|
||||
<div class="notice-text">
|
||||
{{ item.email }}
|
||||
</div>
|
||||
<div class="notice-time">
|
||||
{{
|
||||
formatTime(
|
||||
item.time || new Date()
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-popover>
|
||||
</el-badge>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.notice-badge {
|
||||
:deep(.el-badge__content) {
|
||||
background: linear-gradient(135deg, #ff6b6b, #ee5a52);
|
||||
}
|
||||
}
|
||||
|
||||
.notice-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.notice-container {
|
||||
.notice-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px 12px;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-danger);
|
||||
background: var(--el-color-danger-light-9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice-tabs {
|
||||
:deep(.el-tabs__header) {
|
||||
padding: 0 20px;
|
||||
margin: 0;
|
||||
|
||||
.el-tabs__nav-wrap {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.is-active {
|
||||
font-weight: 500;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__active-bar {
|
||||
min-width: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-tabs__content) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-list {
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 200px;
|
||||
color: var(--el-text-color-placeholder);
|
||||
|
||||
.empty-icon {
|
||||
margin-bottom: 12px;
|
||||
font-size: 48px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-items {
|
||||
padding: 8px 0;
|
||||
|
||||
.notice-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 12px 20px;
|
||||
margin: 0 8px;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
.notice-avatar {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
margin-right: 12px;
|
||||
|
||||
.notice-status {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--el-color-danger);
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.notice-text {
|
||||
margin-bottom: 4px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--el-text-color-primary);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.notice-time {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.notice-popover {
|
||||
padding: 0 !important;
|
||||
border: 1px solid var(--el-border-color-lighter) !important;
|
||||
border-radius: 12px !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
|
||||
|
||||
.el-popover__title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<el-col :span="24">
|
||||
<div class="bottom-panel">
|
||||
<slot />
|
||||
</div>
|
||||
</el-col>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
span: {
|
||||
type: Number,
|
||||
default: 14,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-col :lg="span" :md="24" :sm="24" :xl="span" :xs="24">
|
||||
<div class="left-panel">
|
||||
<slot />
|
||||
</div>
|
||||
</el-col>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
span: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-col :lg="span" :md="24" :sm="24" :xl="span" :xs="24">
|
||||
<div class="right-panel">
|
||||
<slot />
|
||||
</div>
|
||||
</el-col>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<el-col :span="24">
|
||||
<div class="top-panel">
|
||||
<slot />
|
||||
</div>
|
||||
</el-col>
|
||||
</template>
|
||||
60
library/components/VabQueryForm/index.vue
Normal file
60
library/components/VabQueryForm/index.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<el-row class="vab-query-form" :gutter="0">
|
||||
<slot />
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use 'sass:math';
|
||||
@mixin panel {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
min-height: $base-input-height;
|
||||
margin: 0 0 #{math.div($base-margin, 2)} 0;
|
||||
.el-form-item__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
> .el-button {
|
||||
margin: 0 10px #{math.div($base-margin, 2)} 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.vab-query-form {
|
||||
:deep() {
|
||||
.el-form-item:first-child {
|
||||
margin: 0 0 #{math.div($base-margin, 2)} 0 !important;
|
||||
}
|
||||
|
||||
.el-form-item + .el-form-item {
|
||||
margin: 0 0 #{math.div($base-margin, 2)} 0 !important;
|
||||
|
||||
.el-button {
|
||||
margin: 0 0 0 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.top-panel {
|
||||
@include panel;
|
||||
}
|
||||
|
||||
.bottom-panel {
|
||||
@include panel;
|
||||
border-top: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
@include panel;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
@include panel;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
20
library/components/VabRefresh/index.vue
Normal file
20
library/components/VabRefresh/index.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<script lang="ts" setup>
|
||||
import { useSettingsStore } from '@/store/modules/settings'
|
||||
|
||||
const $pub: any = inject('$pub')
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const { theme } = storeToRefs(settingsStore)
|
||||
|
||||
const refreshRoute = () => {
|
||||
$pub('reload-router-view')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<vab-icon
|
||||
v-if="theme.showRefresh"
|
||||
icon="refresh-line"
|
||||
@click="refreshRoute"
|
||||
/>
|
||||
</template>
|
||||
80
library/components/VabRouterView/index.vue
Normal file
80
library/components/VabRouterView/index.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<script lang="ts" setup>
|
||||
import VabProgress from 'nprogress'
|
||||
import { useSettingsStore } from '@/store/modules/settings'
|
||||
import { useTabsStore } from '@/store/modules/tabs'
|
||||
import { handleActivePath } from '@/utils/routes'
|
||||
import { keepAliveMaxNum } from '@/config'
|
||||
import { VabRouteRecord } from '/#/router'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const $sub: any = inject('$sub')
|
||||
const $unsub: any = inject('$unsub')
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const { theme } = storeToRefs(settingsStore)
|
||||
const tabsStore = useTabsStore()
|
||||
const { getVisitedRoutes: visitedRoutes } = storeToRefs(tabsStore)
|
||||
|
||||
const componentRef = ref()
|
||||
const routerKey = ref()
|
||||
const keepAliveNameList = ref()
|
||||
|
||||
const updateKeepAliveNameList = (refreshRouteName = null) => {
|
||||
keepAliveNameList.value = visitedRoutes.value
|
||||
.filter(
|
||||
(item: VabRouteRecord) =>
|
||||
!item.meta.noKeepAlive && item.name !== refreshRouteName
|
||||
)
|
||||
.flatMap((item: VabRouteRecord) => item.name)
|
||||
}
|
||||
|
||||
// 更新KeepAlive缓存页面
|
||||
watchEffect(() => {
|
||||
routerKey.value = handleActivePath(route, true)
|
||||
updateKeepAliveNameList()
|
||||
})
|
||||
|
||||
// 获取源码地址
|
||||
$sub('get-code', () => {
|
||||
window.open(
|
||||
`https://github.com/zxwk2024/admin-plus/blob/main/${componentRef.value.$options.__source}`
|
||||
)
|
||||
})
|
||||
|
||||
$sub('reload-router-view', (refreshRouteName: any = route.name) => {
|
||||
if (theme.value.showProgressBar) VabProgress.start()
|
||||
const cacheActivePath = routerKey.value
|
||||
routerKey.value = null
|
||||
updateKeepAliveNameList(refreshRouteName)
|
||||
nextTick(() => {
|
||||
routerKey.value = cacheActivePath
|
||||
updateKeepAliveNameList()
|
||||
})
|
||||
setTimeout(() => {
|
||||
if (theme.value.showProgressBar) VabProgress.done()
|
||||
}, 200)
|
||||
})
|
||||
|
||||
// onUnmounted(() => {
|
||||
// $unsub('get-code')
|
||||
// $unsub('reload-router-view')
|
||||
// })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition
|
||||
mode="out-in"
|
||||
:name="theme.showPageTransition ? 'fade-transform' : 'no-transform'"
|
||||
>
|
||||
<keep-alive :include="keepAliveNameList" :max="keepAliveMaxNum">
|
||||
<component
|
||||
:is="Component"
|
||||
:key="routerKey"
|
||||
ref="componentRef"
|
||||
/>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
</template>
|
||||
517
library/components/VabSearch/index.vue
Normal file
517
library/components/VabSearch/index.vue
Normal file
@@ -0,0 +1,517 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useRoutesStore } from '@/store/modules/routes'
|
||||
|
||||
const isMac = /macintosh|mac os x/i.test(navigator.userAgent)
|
||||
const MOD_KEY = isMac ? 'metaKey' : 'ctrlKey'
|
||||
|
||||
const show = ref(false)
|
||||
const search = ref('')
|
||||
const activeIndex = ref(0)
|
||||
const inputRef = ref<HTMLInputElement | null>(null)
|
||||
|
||||
const routesStore = useRoutesStore()
|
||||
const { getRoutes } = storeToRefs(routesStore)
|
||||
const router = useRouter()
|
||||
|
||||
// 递归平铺所有菜单项
|
||||
function flattenMenus(
|
||||
routes: any[],
|
||||
basePath = '',
|
||||
parentIcon = undefined
|
||||
): any[] {
|
||||
let result: any[] = []
|
||||
routes.forEach((route) => {
|
||||
if (route.meta && route.meta.hidden) return
|
||||
const fullPath = route.path.startsWith('/')
|
||||
? route.path
|
||||
: `${basePath}/${route.path}`
|
||||
const icon =
|
||||
route.meta && route.meta.icon ? route.meta.icon : parentIcon
|
||||
if (route.meta && route.meta.title) {
|
||||
result.push({
|
||||
title: route.meta.title,
|
||||
path: fullPath,
|
||||
icon,
|
||||
...route.meta,
|
||||
})
|
||||
}
|
||||
if (route.children && route.children.length > 0) {
|
||||
result = result.concat(
|
||||
flattenMenus(route.children, fullPath, icon)
|
||||
)
|
||||
}
|
||||
})
|
||||
return result
|
||||
}
|
||||
|
||||
const menuList = computed(() => flattenMenus(getRoutes.value))
|
||||
|
||||
// 搜索历史（localStorage）
|
||||
const HISTORY_KEY = 'vab_search_history'
|
||||
const searchHistory = ref<string[]>([])
|
||||
function loadHistory() {
|
||||
const raw = localStorage.getItem(HISTORY_KEY)
|
||||
searchHistory.value = raw ? JSON.parse(raw) : []
|
||||
}
|
||||
function saveHistory(keyword: string) {
|
||||
if (!keyword) return
|
||||
let arr = searchHistory.value.filter((item) => item !== keyword)
|
||||
arr.unshift(keyword)
|
||||
if (arr.length > 8) arr = arr.slice(0, 8)
|
||||
searchHistory.value = arr
|
||||
localStorage.setItem(HISTORY_KEY, JSON.stringify(arr))
|
||||
}
|
||||
function removeHistory(keyword: string) {
|
||||
searchHistory.value = searchHistory.value.filter(
|
||||
(item) => item !== keyword
|
||||
)
|
||||
localStorage.setItem(HISTORY_KEY, JSON.stringify(searchHistory.value))
|
||||
}
|
||||
function clearHistory() {
|
||||
searchHistory.value = []
|
||||
localStorage.removeItem(HISTORY_KEY)
|
||||
}
|
||||
|
||||
// 简单模糊搜索（可扩展为拼音/多字段）
|
||||
const filteredMenus = computed(() => {
|
||||
if (!search.value) return menuList.value
|
||||
return menuList.value.filter(
|
||||
(item) =>
|
||||
item.title.toLowerCase().includes(search.value.toLowerCase()) ||
|
||||
(item.path &&
|
||||
item.path
|
||||
.toLowerCase()
|
||||
.includes(search.value.toLowerCase()))
|
||||
)
|
||||
})
|
||||
|
||||
function openSearch() {
|
||||
show.value = true
|
||||
search.value = ''
|
||||
activeIndex.value = 0
|
||||
loadHistory()
|
||||
nextTick(() => {
|
||||
inputRef.value?.focus()
|
||||
})
|
||||
}
|
||||
function closeSearch() {
|
||||
show.value = false
|
||||
}
|
||||
function selectMenu(index: number) {
|
||||
const item = filteredMenus.value[index]
|
||||
if (item && item.path) {
|
||||
saveHistory(search.value)
|
||||
closeSearch()
|
||||
|
||||
// 检查是否为外链
|
||||
if (
|
||||
item.target === '_blank' ||
|
||||
item.path.startsWith('http://') ||
|
||||
item.path.startsWith('https://') ||
|
||||
item.path.startsWith('//')
|
||||
) {
|
||||
// 外链使用window.open
|
||||
window.open(item.path, '_blank')
|
||||
} else {
|
||||
// 内部路由使用router.push
|
||||
router.push(item.path)
|
||||
}
|
||||
}
|
||||
}
|
||||
function selectHistory(keyword: string) {
|
||||
search.value = keyword
|
||||
activeIndex.value = 0
|
||||
nextTick(() => {
|
||||
inputRef.value?.focus()
|
||||
})
|
||||
}
|
||||
function onKeydown(e: KeyboardEvent) {
|
||||
if (show.value) {
|
||||
if (e.key === 'Escape') {
|
||||
closeSearch()
|
||||
} else if (e.key === 'ArrowDown') {
|
||||
e.preventDefault()
|
||||
activeIndex.value =
|
||||
(activeIndex.value + 1) % filteredMenus.value.length
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault()
|
||||
activeIndex.value =
|
||||
(activeIndex.value - 1 + filteredMenus.value.length) %
|
||||
filteredMenus.value.length
|
||||
} else if (e.key === 'Enter') {
|
||||
selectMenu(activeIndex.value)
|
||||
}
|
||||
} else {
|
||||
if ((e as any)[MOD_KEY] && e.key.toLowerCase() === 'k') {
|
||||
e.preventDefault()
|
||||
openSearch()
|
||||
}
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
window.addEventListener('keydown', onKeydown)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('keydown', onKeydown)
|
||||
})
|
||||
|
||||
function onItemClick(idx: number) {
|
||||
selectMenu(idx)
|
||||
}
|
||||
function onInputKeydown(e: KeyboardEvent) {
|
||||
if (
|
||||
e.key === 'ArrowDown' ||
|
||||
e.key === 'ArrowUp' ||
|
||||
e.key === 'Enter' ||
|
||||
e.key === 'Escape'
|
||||
) {
|
||||
// 交由全局keydown处理
|
||||
e.preventDefault()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="vab-search-trigger hidden-xs-only">
|
||||
<vab-icon
|
||||
icon="search-line"
|
||||
title="菜单搜索 ({{ isMac ? '⌘+K' : 'Ctrl+K' }})"
|
||||
@click="openSearch"
|
||||
/>
|
||||
</span>
|
||||
<teleport to="body">
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="show"
|
||||
class="vab-spotlight-mask"
|
||||
@click.self="closeSearch"
|
||||
>
|
||||
<div class="vab-spotlight-card">
|
||||
<div class="vab-spotlight-input-wrap">
|
||||
<vab-icon
|
||||
class="vab-spotlight-input-icon"
|
||||
icon="search-line"
|
||||
/>
|
||||
<input
|
||||
ref="inputRef"
|
||||
v-model="search"
|
||||
autocomplete="off"
|
||||
class="vab-spotlight-input"
|
||||
:placeholder="
|
||||
isMac ? '搜索菜单… (⌘+K)' : '搜索菜单… (Ctrl+K)'
|
||||
"
|
||||
@keydown="onInputKeydown"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="searchHistory.length"
|
||||
class="vab-spotlight-history-wrap"
|
||||
>
|
||||
<div class="vab-spotlight-history">
|
||||
<div class="vab-spotlight-history-title">
|
||||
搜索历史
|
||||
<span
|
||||
class="vab-spotlight-history-clear"
|
||||
@click="clearHistory"
|
||||
>
|
||||
清空
|
||||
</span>
|
||||
</div>
|
||||
<div class="vab-spotlight-history-list">
|
||||
<span
|
||||
v-for="item in searchHistory"
|
||||
:key="item"
|
||||
class="vab-spotlight-history-item"
|
||||
>
|
||||
<span @click="selectHistory(item)">
|
||||
{{ item }}
|
||||
</span>
|
||||
<vab-icon
|
||||
class="vab-spotlight-history-del"
|
||||
icon="close-circle-fill"
|
||||
@click.stop="removeHistory(item)"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="vab-spotlight-list">
|
||||
<li
|
||||
v-for="(item, idx) in filteredMenus"
|
||||
:key="item.path + item.title"
|
||||
:class="[
|
||||
'vab-spotlight-item',
|
||||
{ active: idx === activeIndex },
|
||||
]"
|
||||
@mousedown.prevent="onItemClick(idx)"
|
||||
@mouseenter="activeIndex = idx"
|
||||
>
|
||||
<vab-icon
|
||||
v-if="item.icon"
|
||||
class="vab-spotlight-item-icon"
|
||||
:icon="item.icon"
|
||||
/>
|
||||
<div class="vab-spotlight-item-content">
|
||||
<div class="vab-spotlight-item-title">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="vab-spotlight-item-path">
|
||||
{{ item.path }}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
v-if="filteredMenus.length === 0"
|
||||
class="vab-spotlight-empty"
|
||||
>
|
||||
<div v-if="!search">请输入关键词进行搜索</div>
|
||||
<div v-else>无匹配菜单</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<button
|
||||
class="vab-spotlight-fab"
|
||||
title="菜单搜索 ({{ isMac ? '⌘+K' : 'Ctrl+K' }})"
|
||||
@click="openSearch"
|
||||
>
|
||||
<vab-icon icon="search-line" />
|
||||
</button>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.vab-spotlight-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(30, 34, 45, 0.25);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
.vab-spotlight-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 600px;
|
||||
max-width: 96vw;
|
||||
padding: 0 0 8px 0;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
|
||||
backdrop-filter: blur(12px) saturate(120%);
|
||||
animation: fadeInUp 0.18s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
.vab-spotlight-input-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24px 28px 12px 28px;
|
||||
}
|
||||
.vab-spotlight-input-icon {
|
||||
margin-right: 10px;
|
||||
font-size: 22px;
|
||||
color: #666;
|
||||
}
|
||||
.vab-spotlight-input {
|
||||
flex: 1;
|
||||
padding: 8px 0;
|
||||
font-size: 20px;
|
||||
color: #222;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
.vab-spotlight-list {
|
||||
max-height: 340px;
|
||||
padding: 0 8px 0 8px;
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
}
|
||||
.vab-spotlight-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 18px;
|
||||
margin-bottom: 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
transition: background 0.18s;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.active,
|
||||
&:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
.vab-spotlight-item-icon {
|
||||
margin-right: 14px;
|
||||
font-size: 26px !important;
|
||||
color: #666;
|
||||
}
|
||||
.vab-spotlight-item-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
.vab-spotlight-item-title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
color: #222;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.vab-spotlight-item-path {
|
||||
margin-top: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.vab-spotlight-empty {
|
||||
padding: 32px 0 24px 0;
|
||||
font-size: 15px;
|
||||
color: #aaa;
|
||||
text-align: center;
|
||||
}
|
||||
.vab-spotlight-fab {
|
||||
position: fixed;
|
||||
right: 32px;
|
||||
bottom: 32px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
font-size: 28px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
background: #666;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 4px 16px 0 rgba(102, 102, 102, 0.18);
|
||||
transition:
|
||||
background 0.18s,
|
||||
box-shadow 0.18s,
|
||||
transform 0.18s;
|
||||
&:hover {
|
||||
background: #888;
|
||||
box-shadow: 0 8px 32px 0 rgba(102, 102, 102, 0.18);
|
||||
transform: translateY(-2px) scale(1.06);
|
||||
}
|
||||
&:active {
|
||||
background: #555;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.vab-spotlight-card {
|
||||
width: 98vw;
|
||||
min-width: 0;
|
||||
padding: 0 0 8px 0;
|
||||
}
|
||||
.vab-spotlight-input-wrap {
|
||||
padding: 18px 10px 10px 10px;
|
||||
}
|
||||
.vab-spotlight-fab {
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
.vab-search-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 22px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition: color 0.18s;
|
||||
&:hover {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.vab-spotlight-history-wrap {
|
||||
padding: 0 28px 0 28px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.vab-spotlight-history-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
}
|
||||
.vab-spotlight-history-clear {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
.vab-spotlight-history-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.vab-spotlight-history-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 12px 2px 10px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
background: #f5f7fa;
|
||||
border-radius: 16px;
|
||||
transition:
|
||||
background 0.18s,
|
||||
color 0.18s;
|
||||
&:hover {
|
||||
color: #666;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
.vab-spotlight-history-del {
|
||||
margin-left: 4px;
|
||||
font-size: 14px;
|
||||
color: #bbb;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
214
library/components/VabSideBar/index.vue
Normal file
214
library/components/VabSideBar/index.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<script lang="ts" setup>
|
||||
import variables from '@vab/styles/variables/variables.module.scss'
|
||||
import { useRoutesStore } from '@/store/modules/routes'
|
||||
import { useSettingsStore } from '@/store/modules/settings'
|
||||
import { defaultOpeneds, uniqueOpened } from '@/config'
|
||||
|
||||
const props = defineProps({
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'vertical',
|
||||
},
|
||||
})
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const { collapse } = storeToRefs(settingsStore)
|
||||
const routesStore = useRoutesStore()
|
||||
const {
|
||||
getRoutes: routes,
|
||||
getActiveMenu: activeMenu,
|
||||
getPartialRoutes: partialRoutes,
|
||||
} = storeToRefs(routesStore)
|
||||
|
||||
const handleRoutes = computed(() => {
|
||||
return props.layout === 'comprehensive'
|
||||
? partialRoutes.value
|
||||
: routes.value.flatMap((route: any) =>
|
||||
route.meta.levelHidden && route.children
|
||||
? [...route.children]
|
||||
: route
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-scrollbar
|
||||
class="vab-side-bar"
|
||||
:class="{
|
||||
'is-collapse': collapse,
|
||||
'side-bar-common': layout === 'common',
|
||||
}"
|
||||
>
|
||||
<vab-logo
|
||||
v-if="
|
||||
layout === 'vertical' ||
|
||||
layout === 'comprehensive' ||
|
||||
layout === 'float'
|
||||
"
|
||||
/>
|
||||
<el-menu
|
||||
:active-text-color="variables['menu-color-active']"
|
||||
:background-color="variables['menu-background']"
|
||||
:collapse="collapse"
|
||||
:collapse-transition="false"
|
||||
:default-active="activeMenu.data"
|
||||
:default-openeds="defaultOpeneds"
|
||||
menu-trigger="click"
|
||||
mode="vertical"
|
||||
:text-color="variables['menu-color']"
|
||||
:unique-opened="uniqueOpened"
|
||||
>
|
||||
<template
|
||||
v-for="(item, index) in handleRoutes"
|
||||
:key="index + item.name"
|
||||
>
|
||||
<vab-menu v-if="!item.meta.hidden" :item="item" />
|
||||
</template>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin active {
|
||||
&:hover {
|
||||
color: var(--el-color-white);
|
||||
background-color: $base-menu-active;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: var(--el-color-white);
|
||||
background-color: $base-menu-active;
|
||||
}
|
||||
}
|
||||
|
||||
.vab-side-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $base-z-index + 1;
|
||||
width: var(--el-left-menu-width);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: $base-menu-background;
|
||||
box-shadow: $base-box-shadow;
|
||||
transition: $base-transition;
|
||||
|
||||
&.side-bar-common {
|
||||
top: $base-header-height;
|
||||
height: calc(100vh - #{$base-header-height});
|
||||
}
|
||||
|
||||
&.is-collapse {
|
||||
width: $base-left-menu-width-min;
|
||||
border-right: 0;
|
||||
|
||||
:deep() {
|
||||
.el-menu--collapse.el-menu {
|
||||
> .el-menu-item,
|
||||
> .el-sub-menu {
|
||||
text-align: center;
|
||||
|
||||
.el-tag {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-menu--collapse {
|
||||
border-right: 0;
|
||||
|
||||
.el-sub-menu__icon-arrow {
|
||||
right: 10px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep() {
|
||||
.el-scrollbar__wrap {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
height: $base-menu-item-height;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: $base-menu-item-height;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
|
||||
i {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
@include active;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--由于element-plus
|
||||
bug使用teleported=false会导致多级路由无法显示，故所有菜单必须生成至body下，样式必须放到body下-->
|
||||
<style lang="scss">
|
||||
@mixin menuActiveHover {
|
||||
&:hover,
|
||||
&.is-active {
|
||||
i {
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
|
||||
color: var(--el-color-white);
|
||||
background: var(--el-color-primary);
|
||||
|
||||
.el-sub-menu__title {
|
||||
i {
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
|
||||
color: var(--el-color-white);
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.el-popper {
|
||||
.el-menu--vertical {
|
||||
.el-menu-item,
|
||||
.el-sub-menu {
|
||||
height: $base-menu-item-height;
|
||||
text-overflow: ellipsis;
|
||||
line-height: $base-menu-item-height;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
@include menuActiveHover;
|
||||
|
||||
i {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.el-sub-menu__title {
|
||||
height: $base-menu-item-height;
|
||||
text-overflow: ellipsis;
|
||||
line-height: $base-menu-item-height;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
@include menuActiveHover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
614
library/components/VabTabs/index.vue
Normal file
614
library/components/VabTabs/index.vue
Normal file
@@ -0,0 +1,614 @@
|
||||
<script lang="ts" setup>
|
||||
import { useTabsStore } from '@/store/modules/tabs'
|
||||
import { useRoutesStore } from '@/store/modules/routes'
|
||||
import { useSettingsStore } from '@/store/modules/settings'
|
||||
import { handleActivePath, handleTabs } from '@/utils/routes'
|
||||
import { translate } from '@/i18n'
|
||||
import { VabRoute, VabRouteRecord } from '/#/router'
|
||||
|
||||
defineProps({
|
||||
layout: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const $pub: any = inject('$pub')
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const { theme } = storeToRefs(settingsStore)
|
||||
const routesStore = useRoutesStore()
|
||||
const { getRoutes: routes } = storeToRefs(routesStore)
|
||||
const tabsStore = useTabsStore()
|
||||
const { getVisitedRoutes: visitedRoutes } = storeToRefs(tabsStore)
|
||||
const {
|
||||
addVisitedRoute,
|
||||
delVisitedRoute,
|
||||
delOthersVisitedRoutes,
|
||||
delLeftVisitedRoutes,
|
||||
delRightVisitedRoutes,
|
||||
delAllVisitedRoutes,
|
||||
} = tabsStore
|
||||
|
||||
const tabActive = ref('')
|
||||
const active = ref(false)
|
||||
|
||||
const hoverRoute = ref()
|
||||
const visible = ref(false)
|
||||
const top = ref(0)
|
||||
const left = ref(0)
|
||||
|
||||
const isActive = (path: string) => path === handleActivePath(route, true)
|
||||
const isNoCLosable = (tag: any) => tag.meta.noClosable
|
||||
const handleTabClick = (tab: any) => {
|
||||
if (!isActive(tab.name)) router.push(visitedRoutes.value[tab.index])
|
||||
}
|
||||
const handleVisibleChange = (val: boolean) => {
|
||||
active.value = val
|
||||
}
|
||||
const initNoCLosableTabs = (routes: VabRouteRecord[]) => {
|
||||
routes.forEach((_route) => {
|
||||
if (_route.meta.noClosable) addTabs(_route)
|
||||
if (_route.children) initNoCLosableTabs(_route.children)
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 添加标签页
|
||||
* @param tag route
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
const addTabs = async (tag: VabRoute | VabRouteRecord) => {
|
||||
const tab = handleTabs(tag)
|
||||
if (tab) {
|
||||
await addVisitedRoute(tab)
|
||||
tabActive.value = tab.path
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 根据原生路径删除标签中的标签
|
||||
* @param rawPath 原生路径
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
const handleTabRemove: any = async (rawPath: string) => {
|
||||
if (isActive(rawPath)) await toLastTab()
|
||||
await delVisitedRoute(rawPath)
|
||||
}
|
||||
const handleCommand = (command: string) => {
|
||||
switch (command) {
|
||||
case 'refreshThisTab':
|
||||
refreshThisTab()
|
||||
break
|
||||
case 'closeOthersTabs':
|
||||
closeOthersTabs()
|
||||
break
|
||||
case 'closeLeftTabs':
|
||||
closeLeftTabs()
|
||||
break
|
||||
case 'closeRightTabs':
|
||||
closeRightTabs()
|
||||
break
|
||||
case 'closeAllTabs':
|
||||
closeAllTabs()
|
||||
break
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 刷新当前标签页
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
const refreshThisTab = () => {
|
||||
$pub('reload-router-view')
|
||||
}
|
||||
/**
|
||||
* 删除其他标签页
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
const closeOthersTabs = async () => {
|
||||
if (hoverRoute.value) {
|
||||
await router.push(hoverRoute.value)
|
||||
await delOthersVisitedRoutes(hoverRoute.value.path)
|
||||
} else await delOthersVisitedRoutes(handleActivePath(route, true))
|
||||
await closeMenu()
|
||||
}
|
||||
/**
|
||||
* 删除左侧标签页
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
const closeLeftTabs = async () => {
|
||||
if (hoverRoute.value) {
|
||||
await router.push(hoverRoute.value)
|
||||
await delLeftVisitedRoutes(hoverRoute.value.path)
|
||||
} else await delLeftVisitedRoutes(handleActivePath(route, true))
|
||||
await closeMenu()
|
||||
}
|
||||
/**
|
||||
* 删除右侧标签页
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
const closeRightTabs = async () => {
|
||||
if (hoverRoute.value) {
|
||||
await router.push(hoverRoute.value)
|
||||
await delRightVisitedRoutes(hoverRoute.value.path)
|
||||
} else await delRightVisitedRoutes(handleActivePath(route, true))
|
||||
await closeMenu()
|
||||
}
|
||||
/**
|
||||
* 删除所有标签页
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
const closeAllTabs = async () => {
|
||||
await delAllVisitedRoutes()
|
||||
await toLastTab()
|
||||
await closeMenu()
|
||||
}
|
||||
/**
|
||||
* 跳转最后一个标签页
|
||||
*/
|
||||
const toLastTab = async () => {
|
||||
const latestView = visitedRoutes.value
|
||||
.filter((_: any) => _.path !== handleActivePath(route, true))
|
||||
.slice(-1)[0]
|
||||
if (latestView) await router.push(latestView)
|
||||
else await router.push('/')
|
||||
}
|
||||
|
||||
const { x, y } = useMouse()
|
||||
const openMenu = () => {
|
||||
left.value = x.value
|
||||
top.value = y.value
|
||||
visible.value = true
|
||||
}
|
||||
const closeMenu = () => {
|
||||
visible.value = false
|
||||
hoverRoute.value = null
|
||||
}
|
||||
|
||||
initNoCLosableTabs(routes.value)
|
||||
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
addTabs(route)
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
)
|
||||
watchEffect(() => {
|
||||
if (visible.value) document.body.addEventListener('click', closeMenu)
|
||||
else document.body.removeEventListener('click', closeMenu)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="vab-tabs">
|
||||
<vab-fold v-if="layout === 'common'" />
|
||||
<el-tabs
|
||||
v-model="tabActive"
|
||||
class="vab-tabs-content"
|
||||
:class="{
|
||||
['vab-tabs-content-' + theme.tabsBarStyle]: true,
|
||||
}"
|
||||
type="card"
|
||||
@tab-click="handleTabClick"
|
||||
@tab-remove="handleTabRemove"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="item in visitedRoutes"
|
||||
:key="item.path"
|
||||
:closable="!isNoCLosable(item)"
|
||||
:name="item.path"
|
||||
>
|
||||
<template #label>
|
||||
<span
|
||||
style="display: inline-block"
|
||||
@contextmenu.prevent="openMenu"
|
||||
>
|
||||
<template v-if="theme.showTabsIcon">
|
||||
<vab-icon
|
||||
v-if="item.meta && item.meta.icon"
|
||||
:icon="item.meta.icon"
|
||||
:is-custom-svg="item.meta.isCustomSvg"
|
||||
/>
|
||||
<!-- 如果没有图标那么取第二级的图标 -->
|
||||
<vab-icon v-else :icon="item.parentIcon" />
|
||||
</template>
|
||||
<span v-if="item.meta && item.meta.title">
|
||||
{{ translate(item.meta.title) }}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-dropdown
|
||||
placement="bottom-end"
|
||||
popper-class="vab-tabs-more-dropdown"
|
||||
@command="handleCommand"
|
||||
@visible-change="handleVisibleChange"
|
||||
>
|
||||
<span
|
||||
class="vab-tabs-more"
|
||||
:class="{ 'vab-tabs-more-active': active }"
|
||||
>
|
||||
<span class="vab-tabs-more-icon">
|
||||
<i class="box box-t"></i>
|
||||
<i class="box box-b"></i>
|
||||
</span>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="tabs-more">
|
||||
<el-dropdown-item command="refreshThisTab">
|
||||
<vab-icon icon="refresh-line" />
|
||||
<span>
|
||||
{{ translate('刷新') }}
|
||||
</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="closeOthersTabs">
|
||||
<vab-icon icon="close-line" />
|
||||
<span>
|
||||
{{ translate('关闭其他') }}
|
||||
</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="closeLeftTabs">
|
||||
<vab-icon icon="arrow-left-line" />
|
||||
<span>
|
||||
{{ translate('关闭左侧') }}
|
||||
</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="closeRightTabs">
|
||||
<vab-icon icon="arrow-right-line" />
|
||||
<span>
|
||||
{{ translate('关闭右侧') }}
|
||||
</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="closeAllTabs">
|
||||
<vab-icon icon="close-line" />
|
||||
<span>
|
||||
{{ translate('关闭全部') }}
|
||||
</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<ul
|
||||
v-if="visible"
|
||||
class="contextmenu el-dropdown-menu"
|
||||
:style="{ left: left + 'px', top: top + 'px' }"
|
||||
>
|
||||
<li class="el-dropdown-menu__item" @click="refreshThisTab">
|
||||
<vab-icon icon="refresh-line" />
|
||||
<span>{{ translate('刷新') }}</span>
|
||||
</li>
|
||||
<li
|
||||
class="el-dropdown-menu__item"
|
||||
:class="{ 'is-disabled': visitedRoutes.length === 1 }"
|
||||
@click="closeOthersTabs"
|
||||
>
|
||||
<vab-icon icon="close-line" />
|
||||
<span>{{ translate('关闭其他') }}</span>
|
||||
</li>
|
||||
<li
|
||||
class="el-dropdown-menu__item"
|
||||
:class="{ 'is-disabled': !visitedRoutes.indexOf(hoverRoute) }"
|
||||
@click="closeLeftTabs"
|
||||
>
|
||||
<vab-icon icon="arrow-left-line" />
|
||||
<span>{{ translate('关闭左侧') }}</span>
|
||||
</li>
|
||||
<li
|
||||
class="el-dropdown-menu__item"
|
||||
:class="{
|
||||
'is-disabled':
|
||||
visitedRoutes.indexOf(hoverRoute) ===
|
||||
visitedRoutes.length - 1,
|
||||
}"
|
||||
@click="closeRightTabs"
|
||||
>
|
||||
<vab-icon icon="arrow-right-line" />
|
||||
<span>{{ translate('关闭右侧') }}</span>
|
||||
</li>
|
||||
<li class="el-dropdown-menu__item" @click="closeAllTabs">
|
||||
<vab-icon icon="close-line" />
|
||||
<span>{{ translate('关闭全部') }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use 'sass:math';
|
||||
.vab-tabs {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: $base-tabs-height;
|
||||
padding-right: $base-padding;
|
||||
padding-left: $base-padding;
|
||||
user-select: none;
|
||||
background: var(--el-color-white);
|
||||
border-top: 1px solid #f6f6f6;
|
||||
|
||||
:deep() {
|
||||
.fold-unfold {
|
||||
margin-right: $base-margin;
|
||||
}
|
||||
|
||||
[class*='ri'] {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.vab-icon {
|
||||
vertical-align: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
width: calc(100% - 40px);
|
||||
|
||||
&-card {
|
||||
height: #{$base-tag-item-height};
|
||||
|
||||
:deep() {
|
||||
.el-tabs__nav-next,
|
||||
.el-tabs__nav-prev {
|
||||
height: #{$base-tag-item-height};
|
||||
line-height: #{$base-tag-item-height};
|
||||
}
|
||||
|
||||
.el-tabs__header {
|
||||
margin: 0 0 1px 0;
|
||||
border-bottom: 0;
|
||||
|
||||
.el-tabs__nav {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
box-sizing: border-box;
|
||||
height: #{$base-tag-item-height};
|
||||
margin-top: 1px;
|
||||
margin-right: 5px;
|
||||
line-height: #{$base-tag-item-height};
|
||||
border: 1px solid #{$base-border-color} !important;
|
||||
border-radius: #{$base-border-radius};
|
||||
transition: padding 0.3s
|
||||
cubic-bezier(0.645, 0.045, 0.355, 1) !important;
|
||||
|
||||
&.is-active {
|
||||
color: var(--el-color-primary);
|
||||
outline: none;
|
||||
background: var(--el-color-primary-light-9);
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-smart {
|
||||
height: #{$base-tag-item-height};
|
||||
|
||||
:deep() {
|
||||
.el-tabs__nav-next,
|
||||
.el-tabs__nav-prev {
|
||||
height: #{$base-tag-item-height};
|
||||
line-height: #{$base-tag-item-height};
|
||||
}
|
||||
|
||||
.el-tabs__header {
|
||||
margin: 0 0 1px 0;
|
||||
border-bottom: 0;
|
||||
|
||||
.el-tabs__nav {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
height: #{$base-tag-item-height};
|
||||
margin-top: 1px;
|
||||
margin-right: 5px;
|
||||
line-height: #{$base-tag-item-height};
|
||||
outline: none;
|
||||
border: 0;
|
||||
transition: padding 0.3s
|
||||
cubic-bezier(0.645, 0.045, 0.355, 1) !important;
|
||||
|
||||
&.is-active {
|
||||
outline: none;
|
||||
background: var(--el-color-primary-light-9);
|
||||
|
||||
&:after {
|
||||
width: 100%;
|
||||
transition: #{$base-transition};
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
content: '';
|
||||
background-color: var(--el-color-primary);
|
||||
transition: #{$base-transition};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--el-color-primary-light-9);
|
||||
|
||||
&:after {
|
||||
width: 100%;
|
||||
transition: #{$base-transition};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-smooth {
|
||||
height: #{$base-tag-item-height} + 4;
|
||||
|
||||
:deep() {
|
||||
.el-tabs__nav-next,
|
||||
.el-tabs__nav-prev {
|
||||
height: #{$base-tag-item-height} + 14;
|
||||
line-height: #{$base-tag-item-height} + 14;
|
||||
}
|
||||
|
||||
.el-tabs__header {
|
||||
margin: 0 0 -1px 0;
|
||||
border-bottom: 0;
|
||||
|
||||
.el-tabs__nav {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
height: #{$base-tag-item-height} + 4;
|
||||
padding: 0 30px 0 30px;
|
||||
margin-top: math.div(
|
||||
$base-tabs-height - $base-tag-item-height - 3.1,
|
||||
2
|
||||
);
|
||||
margin-right: -18px;
|
||||
line-height: #{$base-tag-item-height} + 4;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
border: 0;
|
||||
transition: padding 0.3s
|
||||
cubic-bezier(0.645, 0.045, 0.355, 1) !important;
|
||||
&.is-closable:hover {
|
||||
padding: 0 30px 0 30px;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
padding: 0 30px 0 30px;
|
||||
color: var(--el-color-primary);
|
||||
outline: none;
|
||||
background: var(--el-color-primary-light-9);
|
||||
mask: url('~@/assets/tabs_images/vab-tab.png');
|
||||
mask-size: 100% 100%;
|
||||
|
||||
&:hover {
|
||||
padding: 0 30px 0 30px;
|
||||
color: var(--el-color-primary);
|
||||
background: var(--el-color-primary-light-9);
|
||||
mask: url('~@/assets/tabs_images/vab-tab.png');
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
|
||||
&.is-closable {
|
||||
padding: 0 30px 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
padding: 0 30px 0 30px;
|
||||
color: var(--el-color-black);
|
||||
background: #dee1e6;
|
||||
mask: url('~@/assets/tabs_images/vab-tab.png');
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contextmenu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
.el-dropdown-menu__item:hover {
|
||||
color: var(--el-color-primary);
|
||||
background: var(--el-color-primary-light-9);
|
||||
}
|
||||
}
|
||||
|
||||
&-more {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
text-align: left;
|
||||
|
||||
&-active,
|
||||
&:hover {
|
||||
&:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.vab-tabs-more-icon {
|
||||
transform: rotate(90deg);
|
||||
|
||||
.box-t {
|
||||
&:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.box:before,
|
||||
.box:after {
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
display: inline-block;
|
||||
color: #9a9a9a;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease-out;
|
||||
|
||||
.box {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 8px;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
content: '';
|
||||
background: #9a9a9a;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 8px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
content: '';
|
||||
background: #9a9a9a;
|
||||
}
|
||||
}
|
||||
|
||||
.box-t {
|
||||
&:before {
|
||||
transition: transform 0.3s ease-out 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
515
library/components/VabTheme/components/VabThemeDrawer.vue
Normal file
515
library/components/VabTheme/components/VabThemeDrawer.vue
Normal file
@@ -0,0 +1,515 @@
|
||||
<script lang="ts" setup>
|
||||
import { translate } from '@/i18n'
|
||||
import { useSettingsStore } from '@/store/modules/settings'
|
||||
|
||||
const $sub: any = inject('$sub')
|
||||
const $unsub: any = inject('$unsub')
|
||||
const $baseLoading: any = inject('$baseLoading')
|
||||
|
||||
const settingsStore: any = useSettingsStore()
|
||||
const { theme, device }: any = storeToRefs(settingsStore)
|
||||
const { saveTheme, resetTheme, updateTheme }: any = settingsStore
|
||||
|
||||
const state = reactive({
|
||||
drawerVisible: false,
|
||||
})
|
||||
|
||||
const handleOpenTheme = () => {
|
||||
state.drawerVisible = true
|
||||
}
|
||||
|
||||
const updateMenuWidth = () => {
|
||||
useCssVar('--el-left-menu-width', ref(null)).value =
|
||||
theme.value.menuWidth
|
||||
}
|
||||
|
||||
const setDefaultTheme = async () => {
|
||||
await resetTheme()
|
||||
await updateTheme()
|
||||
state.drawerVisible = false
|
||||
if (document.body.getBoundingClientRect().width - 1 < 992)
|
||||
location.reload()
|
||||
}
|
||||
|
||||
const handleSaveTheme = async () => {
|
||||
await saveTheme()
|
||||
state.drawerVisible = false
|
||||
if (document.body.getBoundingClientRect().width - 1 < 992)
|
||||
location.reload()
|
||||
}
|
||||
|
||||
const shuffle = (val: string | boolean, list: (string | boolean)[]) =>
|
||||
list.filter((_) => _ !== val)[(Math.random() * (list.length - 1)) | 0]
|
||||
|
||||
const randomTheme = async () => {
|
||||
const loading = $baseLoading(0)
|
||||
// 随机换肤重置移除主题，防止代码更新影响样式
|
||||
await resetTheme()
|
||||
|
||||
theme.value.themeName = shuffle(theme.value.themeName, [
|
||||
'blue-black',
|
||||
'blue-white',
|
||||
'ocean',
|
||||
'green-black',
|
||||
'green-white',
|
||||
'purple-black',
|
||||
'purple-white',
|
||||
'red-black',
|
||||
'red-white',
|
||||
])
|
||||
theme.value.columnStyle = shuffle(theme.value.columnStyle, [
|
||||
'vertical',
|
||||
'horizontal',
|
||||
'card',
|
||||
'arrow',
|
||||
])
|
||||
// theme.value.background = shuffle(theme.value.background, [
|
||||
// 'none',
|
||||
// 'vab-background',
|
||||
// ])
|
||||
theme.value.tabsBarStyle = shuffle(theme.value.tabsBarStyle, [
|
||||
'card',
|
||||
'smart',
|
||||
'smooth',
|
||||
])
|
||||
theme.value.showTabsIcon = shuffle(theme.value.showTabsIcon, [
|
||||
true,
|
||||
false,
|
||||
])
|
||||
theme.value.layout =
|
||||
device.value === 'desktop'
|
||||
? shuffle(theme.value.layout, [
|
||||
'horizontal',
|
||||
'vertical',
|
||||
'column',
|
||||
'comprehensive',
|
||||
'common',
|
||||
'float',
|
||||
])
|
||||
: 'vertical'
|
||||
|
||||
try {
|
||||
await updateTheme()
|
||||
await saveTheme()
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
loading.close()
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
$sub('theme', () => {
|
||||
handleOpenTheme()
|
||||
})
|
||||
$sub('random-theme', () => {
|
||||
randomTheme()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
$unsub('theme')
|
||||
$unsub('random-theme')
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-drawer
|
||||
v-model="state.drawerVisible"
|
||||
append-to-body
|
||||
class="vab-drawer"
|
||||
direction="rtl"
|
||||
size="285px"
|
||||
:title="translate('主题配置')"
|
||||
>
|
||||
<el-scrollbar height="88vh">
|
||||
<el-form ref="form" label-position="left" :model="theme">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
{{ translate('布局') }}
|
||||
<el-tooltip
|
||||
:content="
|
||||
translate(
|
||||
'布局配置仅' +
|
||||
'在电脑视窗下生效，手机视窗时将' +
|
||||
'默认锁定为纵向布局'
|
||||
)
|
||||
"
|
||||
effect="dark"
|
||||
placement="top"
|
||||
>
|
||||
<vab-icon icon="question-line" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-select
|
||||
v-model="theme.layout"
|
||||
:disabled="device === 'mobile'"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
key="column"
|
||||
:label="translate('分栏')"
|
||||
value="column"
|
||||
/>
|
||||
<el-option
|
||||
key="comprehensive"
|
||||
:label="translate('综合')"
|
||||
value="comprehensive"
|
||||
/>
|
||||
<el-option
|
||||
key="vertical"
|
||||
:label="translate('纵向')"
|
||||
value="vertical"
|
||||
/>
|
||||
<el-option
|
||||
key="horizontal"
|
||||
:label="translate('横向')"
|
||||
value="horizontal"
|
||||
/>
|
||||
<el-option
|
||||
key="common"
|
||||
:label="translate('常规')"
|
||||
value="common"
|
||||
/>
|
||||
<el-option
|
||||
key="float"
|
||||
:label="translate('浮动')"
|
||||
value="float"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="translate('主题')">
|
||||
<el-select v-model="theme.themeName" @change="updateTheme">
|
||||
<el-option
|
||||
key="blue-black"
|
||||
:label="translate('蓝黑')"
|
||||
value="blue-black"
|
||||
/>
|
||||
<el-option
|
||||
key="blue-white"
|
||||
:label="translate('蓝白')"
|
||||
value="blue-white"
|
||||
/>
|
||||
<el-option
|
||||
key="green-black"
|
||||
:label="translate('绿黑')"
|
||||
value="green-black"
|
||||
/>
|
||||
<el-option
|
||||
key="green-white"
|
||||
:label="translate('绿白')"
|
||||
value="green-white"
|
||||
/>
|
||||
<el-option
|
||||
key="purple-black"
|
||||
:label="translate('紫黑')"
|
||||
value="purple-black"
|
||||
/>
|
||||
<el-option
|
||||
key="purple-white"
|
||||
:label="translate('紫白')"
|
||||
value="purple-white"
|
||||
/>
|
||||
<!-- 红黑、红白主题完成群文档任务免费获取 -->
|
||||
<el-option
|
||||
key="red-black"
|
||||
:label="translate('红黑')"
|
||||
value="red-black"
|
||||
/>
|
||||
<el-option
|
||||
key="red-white"
|
||||
:label="translate('红白')"
|
||||
value="red-white"
|
||||
/>
|
||||
<el-option
|
||||
key="ocean"
|
||||
:label="translate('渐变')"
|
||||
value="ocean"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="vab-item-custom">
|
||||
<template #label>
|
||||
{{ translate('菜单背景') }}
|
||||
<el-tooltip
|
||||
:content="
|
||||
translate(
|
||||
'支持纵向布局' +
|
||||
'、分栏布局、综合' +
|
||||
'布局、常规布局，不支持横' +
|
||||
'向布局、浮动' +
|
||||
'布局'
|
||||
)
|
||||
"
|
||||
effect="dark"
|
||||
placement="top"
|
||||
>
|
||||
<vab-icon icon="question-line" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-radio-group
|
||||
v-model="theme.background"
|
||||
:disabled="
|
||||
theme.layout === 'float' ||
|
||||
theme.layout === 'horizontal'
|
||||
"
|
||||
@change="updateTheme"
|
||||
>
|
||||
<el-radio-button
|
||||
class="none"
|
||||
label="none"
|
||||
value="none"
|
||||
/>
|
||||
<el-radio-button
|
||||
class="vab-background"
|
||||
label="vab-background"
|
||||
value="vab-background"
|
||||
/>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="translate('菜单宽度')">
|
||||
<el-select
|
||||
v-model="theme.menuWidth"
|
||||
:disabled="
|
||||
theme.layout === 'float' ||
|
||||
theme.layout === 'horizontal'
|
||||
"
|
||||
@change="updateMenuWidth"
|
||||
>
|
||||
<el-option key="266px" label="266px" value="266px" />
|
||||
<el-option key="277px" label="277px" value="277px" />
|
||||
<el-option key="288px" label="288px" value="288px" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="translate('标签')">
|
||||
<el-switch v-model="theme.showTabs" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
{{ translate('标签图标') }}
|
||||
<el-tooltip
|
||||
:content="translate('标签开启时生效')"
|
||||
effect="dark"
|
||||
placement="top"
|
||||
>
|
||||
<vab-icon icon="question-line" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-switch
|
||||
v-model="theme.showTabsIcon"
|
||||
:disabled="!theme.showTabs"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
{{ translate('标签风格') }}
|
||||
<el-tooltip
|
||||
:content="translate('标签开启时生效')"
|
||||
effect="dark"
|
||||
placement="top"
|
||||
>
|
||||
<vab-icon icon="question-line" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-select
|
||||
v-model="theme.tabsBarStyle"
|
||||
:disabled="!theme.showTabs"
|
||||
>
|
||||
<el-option
|
||||
key="card"
|
||||
:label="translate('卡片')"
|
||||
value="card"
|
||||
/>
|
||||
<el-option
|
||||
key="smart"
|
||||
:label="translate('灵动')"
|
||||
value="smart"
|
||||
/>
|
||||
<el-option
|
||||
key="smooth"
|
||||
:label="translate('圆滑')"
|
||||
value="smooth"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
{{ translate('分栏风格') }}
|
||||
<el-tooltip
|
||||
:content="translate('分栏布局时生效')"
|
||||
effect="dark"
|
||||
placement="top"
|
||||
>
|
||||
<vab-icon icon="question-line" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-select
|
||||
v-model="theme.columnStyle"
|
||||
:disabled="theme.layout !== 'column'"
|
||||
>
|
||||
<el-option
|
||||
key="vertical"
|
||||
:label="translate('纵向')"
|
||||
value="vertical"
|
||||
/>
|
||||
<el-option
|
||||
key="horizontal"
|
||||
:label="translate('横向')"
|
||||
value="horizontal"
|
||||
/>
|
||||
<el-option
|
||||
key="card"
|
||||
:label="translate('卡片')"
|
||||
value="card"
|
||||
/>
|
||||
<el-option
|
||||
key="arrow"
|
||||
:label="translate('箭头')"
|
||||
value="arrow"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="translate('头部固定')">
|
||||
<el-switch
|
||||
v-model="theme.fixedHeader"
|
||||
:disabled="theme.layout === 'common'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="translate('国际化')">
|
||||
<el-switch v-model="theme.showLanguage" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="translate('进度条')">
|
||||
<el-switch v-model="theme.showProgressBar" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="translate('刷新')">
|
||||
<el-switch v-model="theme.showRefresh" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="translate('搜索')">
|
||||
<el-switch v-model="theme.showSearch" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="translate('通知')">
|
||||
<el-switch v-model="theme.showNotice" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="translate('全屏')">
|
||||
<el-switch v-model="theme.showFullScreen" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="translate('锁屏')">
|
||||
<el-switch v-model="theme.showLock" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="translate('页面动画')">
|
||||
<el-switch v-model="theme.showPageTransition" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
<template #footer>
|
||||
<el-button type="primary" @click="handleSaveTheme">
|
||||
{{ translate('保存') }}
|
||||
</el-button>
|
||||
<el-button @click="setDefaultTheme">
|
||||
{{ translate('恢复默认') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use 'sass:math';
|
||||
.vab-drawer {
|
||||
// position: relative;
|
||||
.el-drawer__header {
|
||||
padding: $base-padding $base-padding 0 $base-padding;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.el-drawer__body {
|
||||
padding-right: 0;
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
height: calc(100vh - 80px);
|
||||
padding-right: $base-padding;
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: $base-margin * 2 0 $base-margin * 2 0;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&__label {
|
||||
flex: 1 1;
|
||||
i {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&.vab-item-custom {
|
||||
display: block !important;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.el-radio-button {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
|
||||
&.is-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
box-shadow: 0 0 2px 2px #1890ff;
|
||||
}
|
||||
|
||||
.el-radio-button__orig-radio,
|
||||
.el-radio-button__inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.none {
|
||||
font-family: 'remixicon', sans-serif !important;
|
||||
font-size: 16px;
|
||||
font-weight: 580;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
background: #f7f7f7 none;
|
||||
background-size: cover;
|
||||
|
||||
&:before {
|
||||
content: '\eace';
|
||||
}
|
||||
}
|
||||
|
||||
&.vab-background {
|
||||
background: url(~@/assets/theme_images/background-1.png);
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
width: 115px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-drawer__footer {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $base-z-index + 1;
|
||||
display: flex;
|
||||
padding: math.div($base-padding, 2);
|
||||
background: var(--el-color-white);
|
||||
border-top: 1px solid #{$base-border-color};
|
||||
}
|
||||
}
|
||||
</style>
|
||||
168
library/components/VabTheme/components/VabThemeSetting.vue
Normal file
168
library/components/VabTheme/components/VabThemeSetting.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<script lang="ts" setup>
|
||||
import { useSettingsStore } from '@/store/modules/settings'
|
||||
import { translate } from '@/i18n'
|
||||
|
||||
const $pub: any = inject('$pub')
|
||||
//const $baseMessage: any = inject('$baseMessage')
|
||||
|
||||
const settingsStore: any = useSettingsStore()
|
||||
const { theme }: any = storeToRefs(settingsStore)
|
||||
|
||||
const handleOpenTheme = () => {
|
||||
$pub('theme')
|
||||
}
|
||||
const randomTheme = () => {
|
||||
$pub('random-theme')
|
||||
}
|
||||
const buy = () => {
|
||||
window.open('https://vuejs-core.cn/authorization')
|
||||
}
|
||||
// const getCode = () => {
|
||||
// if (process.env.NODE_ENV === 'development') $pub('get-code')
|
||||
// else
|
||||
// ElMessageBox.prompt(
|
||||
// '请输入密码(密码在购买时获得，跳转后需登录购买时绑定的github账号)',
|
||||
// '温馨提示',
|
||||
// {
|
||||
// confirmButtonText: '确定',
|
||||
// cancelButtonText: '取消',
|
||||
// }
|
||||
// )
|
||||
// .then(({ value }) => {
|
||||
// if (value !== 'vabp') {
|
||||
// $baseMessage(
|
||||
// '密码不正确！',
|
||||
// 'error',
|
||||
// 'vab-hey-message-error'
|
||||
// )
|
||||
// return
|
||||
// }
|
||||
// $pub('get-code')
|
||||
// })
|
||||
// .catch(() => {})
|
||||
// }
|
||||
|
||||
const removeLocalStorage = () => {
|
||||
localStorage.clear()
|
||||
location.reload()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul v-if="theme.showThemeSetting" class="vab-theme-setting">
|
||||
<li @click="handleOpenTheme">
|
||||
<a>
|
||||
<vab-icon icon="brush-2-line" />
|
||||
<p>{{ translate('主题配置') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
<li @click="randomTheme">
|
||||
<a>
|
||||
<vab-icon icon="apps-line" />
|
||||
<p>{{ translate('随机换肤') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
<li @click="buy">
|
||||
<a>
|
||||
<vab-icon icon="shopping-cart-2-line" />
|
||||
<p>{{ translate('购买源码') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
<!-- <li @click="getCode">
|
||||
<a>
|
||||
<vab-icon icon="file-copy-line" />
|
||||
<p>{{ translate('拷贝源码') }}</p>
|
||||
</a>
|
||||
</li> -->
|
||||
<li @click="removeLocalStorage">
|
||||
<a>
|
||||
<vab-icon icon="delete-bin-4-line" />
|
||||
<p>
|
||||
{{ translate('清理缓存') }}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vab-theme-setting {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
z-index: $base-z-index - 2;
|
||||
padding: 10px 0 0 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background: var(--el-color-white);
|
||||
border: 1px solid #{$base-border-color};
|
||||
border-top-left-radius: $base-border-radius + 3;
|
||||
border-bottom-left-radius: $base-border-radius + 3;
|
||||
box-shadow: 0 0 50px 0 rgb(82 63 105 / 15%);
|
||||
transform: translateY(-50%);
|
||||
|
||||
> li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 8px 10px 10px;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
&:nth-child(2) {
|
||||
[class*='ri-'] {
|
||||
animation: rotate 6s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
$colors: (
|
||||
1: #3698fd,
|
||||
2: #1bc3bb,
|
||||
3: #faa500,
|
||||
4: #b37feb,
|
||||
5: #ef4c5d,
|
||||
);
|
||||
|
||||
@each $key, $color in $colors {
|
||||
&:nth-child(#{$key}) {
|
||||
a {
|
||||
color: $color;
|
||||
background: mix($base-color-white, $color, 90%);
|
||||
transition:
|
||||
color 0.15s ease,
|
||||
background-color 0.15s ease,
|
||||
border-color 0.15s ease,
|
||||
box-shadow 0.15s ease,
|
||||
-webkit-box-shadow 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-white);
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
background: #f6f8f9;
|
||||
border-radius: $base-border-radius + 3;
|
||||
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: $base-font-size-small;
|
||||
line-height: 25px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
18
library/components/VabTheme/index.vue
Normal file
18
library/components/VabTheme/index.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<script lang="ts" setup>
|
||||
import { useSettingsStore } from '@/store/modules/settings'
|
||||
|
||||
const $pub: any = inject('$pub')
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const { theme } = storeToRefs(settingsStore)
|
||||
|
||||
const handleOpenTheme = () => {
|
||||
$pub('theme')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span v-if="theme.showTheme">
|
||||
<vab-icon icon="brush-2-line" @click="handleOpenTheme" />
|
||||
</span>
|
||||
</template>
|
||||
Reference in New Issue
Block a user