1b7694cee0
All checks were successful
git提交控制 AiDA WEB-Node.js main 分支构建部署 / build (20.19.0) (push) Has been skipped
89 lines
2.3 KiB
Vue
89 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { showConfirmDialog } from 'vant'
|
|
import MyEvent from '@/utils/myEvent'
|
|
|
|
const router = useRouter()
|
|
const currentRoute = computed(() => router.currentRoute.value.path)
|
|
|
|
defineProps({
|
|
/** 是否显示占位符 */
|
|
isPlaceholder: { type: Boolean, default: false }
|
|
})
|
|
|
|
const handleClickReturn = () => {
|
|
router.back()
|
|
// emit('clickReturn')
|
|
}
|
|
const onHome = (nav) => {
|
|
showConfirmDialog({
|
|
title: 'Return to Home Page?',
|
|
message: 'You have unsaved changes. Your progress will be lost.',
|
|
confirmButtonText: 'Yes',
|
|
cancelButtonText: 'Cancel',
|
|
})
|
|
.then(() => {
|
|
MyEvent.emit('clear-generate-state')
|
|
// MyEvent.emit('clearAllCache')
|
|
nav.path && router.push(nav.path)
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
const navs = [
|
|
{ label: 'Home', icon: 'home', size: 73, path: '/workshop/home', on: onHome },
|
|
{ label: 'Library', icon: 'library', size: 53, path: '/workshop/library' },
|
|
// { label: 'Profile', icon: 'profile', size: 55, path: '/workshop/profile' }
|
|
]
|
|
const onNavClick = (nav) => {
|
|
if (currentRoute.value !== nav.path) nav.on ? nav.on(nav) : nav.path && router.push(nav.path)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="footer-navigation main">
|
|
<div
|
|
v-for="nav in navs"
|
|
:key="nav.path"
|
|
:class="{ active: currentRoute === nav.path }"
|
|
@click="onNavClick(nav)"
|
|
>
|
|
<SvgIcon :name="`${nav.icon}_${currentRoute === nav.path ? '1' : '0'}`" size="55" />
|
|
<!-- <span class="label">{{ nav.label }}</span> -->
|
|
</div>
|
|
</div>
|
|
<!-- <div class="footer-navigation placeholder" v-show="isPlaceholder"></div> -->
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.footer-navigation {
|
|
width: 100%;
|
|
height: var(--footer-navigation-height, 14.9rem);
|
|
}
|
|
.footer-navigation.main {
|
|
// position: fixed;
|
|
// bottom: 0;
|
|
// z-index: var(--footer-navigation-z-index, 999);
|
|
background-color: var(--footer-navigation-background, #fff);
|
|
box-shadow: -2.6rem -1.4rem 3.47rem 0 rgba(0, 0, 0, 0.05);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
> div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
// &.active > * {
|
|
// color: #0d99ff;
|
|
// }
|
|
> .label {
|
|
margin-top: 1.6rem;
|
|
font-family: satoshiRegular;
|
|
font-weight: 500;
|
|
font-size: 2.4rem;
|
|
line-height: 89%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|