98 lines
3.1 KiB
Vue
98 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { ChevronDown } from '@lucide/vue'
|
|
import type { ClientNavigationNode } from '@/navigation/clientNavigation'
|
|
|
|
const props = defineProps<{
|
|
node: ClientNavigationNode
|
|
activePath: string
|
|
openedKeys: ReadonlySet<string>
|
|
activeParentKeys: ReadonlySet<string>
|
|
badges?: Readonly<Record<string, { count: number | null; error: string }>>
|
|
level?: number
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
navigate: [path: string]
|
|
toggle: [key: string]
|
|
}>()
|
|
|
|
const badge = computed(() => props.badges?.[props.node.key])
|
|
const badgeTitle = computed(() => badge.value?.error || `${badge.value?.count ?? 0} 个柜次待上传资料或确认回执`)
|
|
|
|
const groupId = computed(() => `client-nav-group-${props.node.key}`)
|
|
</script>
|
|
|
|
<template>
|
|
<li
|
|
class="client-nav-node"
|
|
v-if="node.children"
|
|
:data-nav-key="node.key"
|
|
:class="{
|
|
'has-divider-before': node.dividerBefore,
|
|
'is-active-parent': activeParentKeys.has(node.key),
|
|
}"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="client-sidebar-group-trigger"
|
|
:aria-expanded="openedKeys.has(node.key)"
|
|
:aria-controls="groupId"
|
|
@click="emit('toggle', node.key)"
|
|
>
|
|
<component
|
|
:is="node.icon"
|
|
class="client-sidebar-node-icon"
|
|
:size="level ? 16 : 20"
|
|
aria-hidden="true"
|
|
/>
|
|
<span>{{ node.title }}</span>
|
|
<ChevronDown class="client-sidebar-group-chevron" :size="16" aria-hidden="true" />
|
|
</button>
|
|
|
|
<ul
|
|
v-show="openedKeys.has(node.key)"
|
|
:id="groupId"
|
|
class="client-nav-submenu"
|
|
>
|
|
<ClientSidebarMenuNode
|
|
v-for="child in node.children"
|
|
:key="child.key"
|
|
:node="child"
|
|
:badges="badges"
|
|
:active-path="activePath"
|
|
:opened-keys="openedKeys"
|
|
:active-parent-keys="activeParentKeys"
|
|
:level="(level ?? 0) + 1"
|
|
@navigate="emit('navigate', $event)"
|
|
@toggle="emit('toggle', $event)"
|
|
/>
|
|
</ul>
|
|
</li>
|
|
|
|
<li v-else class="client-nav-node" :data-nav-key="node.key" :class="{ 'has-divider-before': node.dividerBefore }">
|
|
<RouterLink
|
|
:to="node.path"
|
|
class="client-sidebar-link"
|
|
:aria-current="node.path === activePath ? 'page' : undefined"
|
|
@click="emit('navigate', node.path)"
|
|
>
|
|
<component
|
|
:is="node.icon"
|
|
class="client-sidebar-node-icon"
|
|
:size="level ? 16 : 20"
|
|
aria-hidden="true"
|
|
/>
|
|
<span>{{ node.title }}</span>
|
|
<span v-if="badge?.error || (badge?.count != null && badge.count > 0)" class="client-nav-badge"
|
|
:title="badgeTitle" :aria-label="badgeTitle" role="status">
|
|
{{ badge?.error ? '!' : badge!.count! > 99 ? '99+' : badge?.count }}
|
|
</span>
|
|
</RouterLink>
|
|
</li>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.client-sidebar-link .client-nav-badge { display: inline-flex; flex: 0 0 auto; min-width: 23px; height: 23px; align-items: center; justify-content: center; margin-left: auto; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; background: #ef4444; color: #fff; box-shadow: 0 3px 9px rgb(239 68 68 / 24%); font-size: 12px; font-weight: 700; line-height: 1; }
|
|
</style>
|