mirror of
https://github.com/fawney19/Aether.git
synced 2026-01-08 10:42:29 +08:00
e9a6233655
- 更新 Logo 相关组件 (AetherLogo, HeaderLogo, RippleLogo 等) - 优化图表组件 (BarChart, LineChart, ScatterChart) - 改进公共组件 (AlertDialog, EmptyState, LoadingState) - 调整布局组件 (AppShell, SidebarNav, PageHeader 等) - 优化 ActivityHeatmap 统计组件
51 lines
1.1 KiB
Vue
51 lines
1.1 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-3">
|
|
<slot name="icon">
|
|
<div
|
|
v-if="icon"
|
|
class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10"
|
|
>
|
|
<component
|
|
:is="icon"
|
|
class="h-5 w-5 text-primary"
|
|
/>
|
|
</div>
|
|
</slot>
|
|
|
|
<div>
|
|
<h1 class="text-2xl font-semibold text-foreground sm:text-3xl">
|
|
{{ title }}
|
|
</h1>
|
|
<p
|
|
v-if="description"
|
|
class="mt-1 text-sm text-muted-foreground"
|
|
>
|
|
{{ description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="$slots.actions"
|
|
class="flex items-center gap-2"
|
|
>
|
|
<slot name="actions" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Component } from 'vue'
|
|
|
|
interface Props {
|
|
title: string
|
|
description?: string
|
|
icon?: Component
|
|
}
|
|
|
|
defineProps<Props>()
|
|
</script>
|