45 lines
1.2 KiB
Vue
45 lines
1.2 KiB
Vue
<template>
|
|
<!-- App Header | 应用头部 -->
|
|
<header class="flex items-center justify-between px-4 md:px-8 py-4 border-b border-[var(--border-color)]">
|
|
<!-- Left slot | 左侧插槽 -->
|
|
<div class="flex items-center gap-2">
|
|
<slot name="left">
|
|
<!-- Default: empty or logo -->
|
|
</slot>
|
|
</div>
|
|
|
|
<!-- Right section | 右侧区域 -->
|
|
<div class="flex items-center gap-4">
|
|
<!-- Center slot | 中间插槽 -->
|
|
<slot name="center"></slot>
|
|
|
|
<!-- Theme toggle | 主题切换 -->
|
|
<button
|
|
@click="toggleTheme"
|
|
class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
|
|
>
|
|
<n-icon :size="20">
|
|
<SunnyOutline v-if="isDark" />
|
|
<MoonOutline v-else />
|
|
</n-icon>
|
|
</button>
|
|
|
|
<!-- Right slot | 右侧插槽 -->
|
|
<slot name="right"></slot>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup>
|
|
/**
|
|
* App Header component | 应用头部组件
|
|
* Reusable header with slots for customization
|
|
*/
|
|
import { NIcon } from 'naive-ui'
|
|
import {
|
|
SunnyOutline,
|
|
MoonOutline
|
|
} from '@vicons/ionicons5'
|
|
import { isDark, toggleTheme } from '../stores/theme'
|
|
</script>
|