skytek_xinliang
106 lines
2.7 KiB
Vue
106 lines
2.7 KiB
Vue
<template>
|
|
<v-col
|
|
v-if="features.showFavorites && showFavoritesBar && !isMobile"
|
|
class="d-flex align-center pr-2 pl-3 py-1 bg-surface"
|
|
>
|
|
<div class="favorites-label text-body-2 text-no-wrap pe-2">
|
|
{{ favoritesConfig.label }}
|
|
</div>
|
|
<div class="favorites-list flex-grow-1 d-flex flex-wrap ga-2">
|
|
<transition-group class="d-flex flex-wrap ga-2" name="favorite-list" tag="div">
|
|
<v-chip
|
|
v-for="item in favoriteItems"
|
|
:key="item.path ?? item.title"
|
|
class="favorite-item"
|
|
closable
|
|
color="secondary"
|
|
size="small"
|
|
variant="outlined"
|
|
@click="emit('select', item)"
|
|
@click:close="emit('remove-favorite', item)"
|
|
>
|
|
<v-icon v-if="item.icon" class="me-1" size="16" :icon="item.icon" />
|
|
<span class="text-caption">{{ item.title }}</span>
|
|
</v-chip>
|
|
</transition-group>
|
|
<v-btn
|
|
v-if="favoritesConfig.showAdd"
|
|
class="favorite-add"
|
|
color="primary"
|
|
size="small"
|
|
variant="outlined"
|
|
@click="emit('add-favorite')"
|
|
>
|
|
<v-icon class="mr-1" size="16" :icon="mdiPlus" />
|
|
<span class="text-caption">{{ favoritesConfig.addLabel }}</span>
|
|
</v-btn>
|
|
</div>
|
|
<v-btn
|
|
aria-label="隱藏常用功能列"
|
|
color="grey"
|
|
size="small"
|
|
variant="text"
|
|
@click="emit('toggle-favorites-bar', false)"
|
|
>
|
|
<v-icon :icon="mdiEyeOff" />
|
|
</v-btn>
|
|
</v-col>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { AdminLayoutFavoritesConfig, AdminLayoutFeatures, AdminLayoutMenuItem } from './types'
|
|
import { mdiEyeOff, mdiPlus } from '@mdi/js'
|
|
|
|
interface Props {
|
|
features?: AdminLayoutFeatures
|
|
showFavoritesBar?: boolean
|
|
isMobile?: boolean
|
|
favoritesConfig?: AdminLayoutFavoritesConfig
|
|
favoriteItems?: AdminLayoutMenuItem[]
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
features: () => ({
|
|
showThemeToggle: false,
|
|
showFavorites: true,
|
|
showBreadcrumb: true,
|
|
showSearch: true,
|
|
showToolbarActions: true,
|
|
showUserInfo: true,
|
|
}),
|
|
showFavoritesBar: true,
|
|
isMobile: false,
|
|
favoritesConfig: () => ({
|
|
label: '',
|
|
addLabel: '',
|
|
showAdd: false,
|
|
}),
|
|
favoriteItems: () => [],
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
select: [item: AdminLayoutMenuItem]
|
|
'add-favorite': []
|
|
'remove-favorite': [item: AdminLayoutMenuItem]
|
|
'toggle-favorites-bar': [value: boolean]
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.favorite-item {
|
|
text-transform: none;
|
|
}
|
|
|
|
.favorite-list-enter-active,
|
|
.favorite-list-leave-active,
|
|
.favorite-list-move {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.favorite-list-enter-from,
|
|
.favorite-list-leave-to {
|
|
opacity: 0;
|
|
transform: scale(0.92);
|
|
}
|
|
</style>
|