LFeng/Thing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

测试

Browse Source
This commit is contained in:
zhongluofeng
2026-07-17 18:28:37 +08:00
parent d8006a19e9
commit 2d9a8ddef6
57 changed files with 90 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Sidebar.vue
+24 -32
View File
@@ -21,34 +21,32 @@ const displayModules = computed(() => {
<template>
<aside
class="w-17 flex flex-col items-center py-4 border-r border-border transition-all duration-300"
class="w-17 shrink-0 flex flex-col items-center py-4 border-r border-border transition-[background-color,border-color] duration-300"
:style="{ backgroundColor: 'var(--effect-bg)', backdropFilter: 'var(--effect-blur)' }"
>
<div class="flex flex-col gap-1">
<TransitionGroup name="module-flip">
<div v-for="module in displayModules" :key="module.id">
<Tooltip>
<TooltipTrigger as-child>
<Button
:variant="activeModule === module.id ? 'default' : 'ghost'"
size="icon"
class="h-10 w-10 rounded-lg transition-all duration-300"
:class="{
'bg-primary text-primary-foreground shadow-md': activeModule === module.id,
'hover:bg-secondary/50': activeModule !== module.id
}"
:title="module.name"
@click="emit('change', module.id)"
>
<component :is="getModuleIcon(module.icon)" class="h-5 w-5" />
</Button>
</TooltipTrigger>
<TooltipContent side="right" class="w-fit">
<p>{{ module.name }}</p>
</TooltipContent>
</Tooltip>
</div>
</TransitionGroup>
<div v-for="module in displayModules" :key="module.id">
<Tooltip>
<TooltipTrigger as-child>
<Button
:variant="activeModule === module.id ? 'default' : 'ghost'"
size="icon"
class="h-10 w-10 rounded-lg transition-[background-color,color,box-shadow] duration-300"
:class="{
'bg-primary text-primary-foreground shadow-md': activeModule === module.id,
'hover:bg-secondary/50': activeModule !== module.id
}"
:title="module.name"
@click="emit('change', module.id)"
>
<component :is="getModuleIcon(module.icon)" class="h-5 w-5" />
</Button>
</TooltipTrigger>
<TooltipContent side="right" class="w-fit">
<p>{{ module.name }}</p>
</TooltipContent>
</Tooltip>
</div>
</div>
<div class="flex-1"></div>
@@ -58,7 +56,7 @@ const displayModules = computed(() => {
<Button
:variant="activeModule === 'settings' ? 'default' : 'ghost'"
size="icon"
class="h-10 w-10 rounded-lg transition-all duration-300"
class="h-10 w-10 rounded-lg transition-[background-color,color,box-shadow] duration-300"
:class="{
'bg-primary text-primary-foreground shadow-md': activeModule === 'settings',
'hover:bg-secondary/50': activeModule !== 'settings'
@@ -75,9 +73,3 @@ const displayModules = computed(() => {
</Tooltip>
</aside>
</template>
<style scoped>
.module-flip-move {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>