mirror of
https://github.com/fawney19/Aether.git
synced 2026-01-03 08:12:26 +08:00
e9a6233655
- 更新 Logo 相关组件 (AetherLogo, HeaderLogo, RippleLogo 等) - 优化图表组件 (BarChart, LineChart, ScatterChart) - 改进公共组件 (AlertDialog, EmptyState, LoadingState) - 调整布局组件 (AppShell, SidebarNav, PageHeader 等) - 优化 ActivityHeatmap 统计组件
62 lines
1.5 KiB
Vue
62 lines
1.5 KiB
Vue
<template>
|
|
<div
|
|
class="app-shell"
|
|
:class="{ 'pt-24': showNotice }"
|
|
>
|
|
<div
|
|
v-if="showNotice"
|
|
class="fixed top-6 left-0 right-0 z-50 flex justify-center px-4"
|
|
>
|
|
<slot name="notice" />
|
|
</div>
|
|
|
|
<div class="app-shell__backdrop">
|
|
<div class="app-shell__gradient app-shell__gradient--primary" />
|
|
<div class="app-shell__gradient app-shell__gradient--accent" />
|
|
</div>
|
|
|
|
<div class="app-shell__body">
|
|
<aside
|
|
v-if="$slots.sidebar"
|
|
class="app-shell__sidebar"
|
|
:class="sidebarClass"
|
|
>
|
|
<slot name="sidebar" />
|
|
</aside>
|
|
|
|
<div
|
|
class="app-shell__content"
|
|
:class="contentClass"
|
|
>
|
|
<slot name="header" />
|
|
<main :class="mainClass">
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
showNotice?: boolean
|
|
contentClass?: string
|
|
mainClass?: string
|
|
sidebarClass?: string
|
|
}>(), {
|
|
showNotice: false,
|
|
contentClass: '',
|
|
mainClass: '',
|
|
sidebarClass: '',
|
|
})
|
|
|
|
const showNotice = computed(() => props.showNotice)
|
|
|
|
// contentClass and mainClass are now just the props, base classes are in template
|
|
const contentClass = computed(() => props.contentClass)
|
|
const mainClass = computed(() => ['app-shell__main', props.mainClass].filter(Boolean).join(' '))
|
|
const sidebarClass = computed(() => props.sidebarClass)
|
|
</script>
|