i/Aether
1
0
Fork 0
mirror of https://github.com/fawney19/Aether.git synced 2026-01-03 00:02:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(frontend): 优化公共组件和布局组件

Browse Source 
- 更新 Logo 相关组件 (AetherLogo, HeaderLogo, RippleLogo 等)
- 优化图表组件 (BarChart, LineChart, ScatterChart)
- 改进公共组件 (AlertDialog, EmptyState, LoadingState)
- 调整布局组件 (AppShell, SidebarNav, PageHeader 等)
- 优化 ActivityHeatmap 统计组件
This commit is contained in:
fawney19
2025-12-12 16:15:16 +08:00
parent 44e7117d4a
commit e9a6233655
21 changed files with 1130 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/layout/AppShell.vue
View File

@@ -1,5 +1,8 @@
<template>
<div class="app-shell" :class="{ 'pt-24': showNotice }">
<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"
@@ -8,8 +11,8 @@
</div>
<div class="app-shell__backdrop">
<div class="app-shell__gradient app-shell__gradient--primary"></div>
<div class="app-shell__gradient app-shell__gradient--accent"></div>
<div class="app-shell__gradient app-shell__gradient--primary" />
<div class="app-shell__gradient app-shell__gradient--accent" />
</div>
<div class="app-shell__body">
@@ -21,7 +24,10 @@
<slot name="sidebar" />
</aside>
<div class="app-shell__content" :class="contentClass">
<div
class="app-shell__content"
:class="contentClass"
>
<slot name="header" />
<main :class="mainClass">
<slot />

20
frontend/src/components/layout/CardSection.vue
View File

@@ -1,13 +1,22 @@
<template>
<Card :class="cardClasses">
<div v-if="title || description || $slots.header" :class="headerClasses">
<div
v-if="title || description || $slots.header"
:class="headerClasses"
>
<slot name="header">
<div class="flex items-center justify-between">
<div>
<h3 v-if="title" class="text-lg font-medium leading-6 text-foreground">
<h3
v-if="title"
class="text-lg font-medium leading-6 text-foreground"
>
{{ title }}
</h3>
<p v-if="description" class="mt-1 text-sm text-muted-foreground">
<p
v-if="description"
class="mt-1 text-sm text-muted-foreground"
>
{{ description }}
</p>
</div>
@@ -22,7 +31,10 @@
<slot />
</div>
<div v-if="$slots.footer" :class="footerClasses">
<div
v-if="$slots.footer"
:class="footerClasses"
>
<slot name="footer" />
</div>
</Card>

6
frontend/src/components/layout/MobileNav.vue
View File

@@ -4,7 +4,11 @@
<!-- Logo头部 - 移动端优化 -->
<div class="flex items-center gap-3 rounded-2xl bg-card/90 px-4 py-3 shadow-lg shadow-primary/20 ring-1 ring-border backdrop-blur">
<div class="flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-2xl bg-background shadow-md shadow-primary/20 flex-shrink-0">
<img src="/aether_adaptive.svg" alt="Logo" class="h-8 w-8 sm:h-10 sm:w-10" />
<img
src="/aether_adaptive.svg"
alt="Logo"
class="h-8 w-8 sm:h-10 sm:w-10"
>
</div>
<!-- 文字部分 - 小屏隐藏 -->
<div class="hidden sm:block">

20
frontend/src/components/layout/PageHeader.vue
View File

@@ -3,8 +3,14 @@
<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
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>
@@ -12,14 +18,20 @@
<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">
<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">
<div
v-if="$slots.actions"
class="flex items-center gap-2"
>
<slot name="actions" />
</div>
</div>

15
frontend/src/components/layout/Section.vue
View File

@@ -1,13 +1,22 @@
<template>
<section :class="sectionClasses">
<div v-if="title || description || $slots.header" class="mb-6">
<div
v-if="title || description || $slots.header"
class="mb-6"
>
<slot name="header">
<div class="flex items-center justify-between">
<div>
<h2 v-if="title" class="text-lg font-medium text-foreground">
<h2
v-if="title"
class="text-lg font-medium text-foreground"
>
{{ title }}
</h2>
<p v-if="description" class="mt-1 text-sm text-muted-foreground">
<p
v-if="description"
class="mt-1 text-sm text-muted-foreground"
>
{{ description }}
</p>
</div>

20
frontend/src/components/layout/SidebarNav.vue
View File

@@ -1,16 +1,26 @@
<template>
<nav class="sidebar-nav w-full px-3">
<div v-for="(group, index) in items" :key="index" class="space-y-1 mb-5">
<div
v-for="(group, index) in items"
:key="index"
class="space-y-1 mb-5"
>
<!-- Section Header -->
<div v-if="group.title" class="px-2.5 pb-1 flex items-center gap-2" :class="index > 0 ? 'pt-1' : ''">
<div
v-if="group.title"
class="px-2.5 pb-1 flex items-center gap-2"
:class="index > 0 ? 'pt-1' : ''"
>
<span class="text-[10px] font-medium text-muted-foreground/50 font-mono tabular-nums">{{ String(index + 1).padStart(2, '0') }}</span>
<span class="text-[10px] font-semibold text-muted-foreground/70 uppercase tracking-[0.1em]">{{ group.title }}</span>
</div>
<!-- Links -->
<div class="space-y-0.5">
<template v-for="item in group.items" :key="item.href">
<template
v-for="item in group.items"
:key="item.href"
>
<RouterLink
:to="item.href"
class="group relative flex items-center justify-between px-2.5 py-2 rounded-lg transition-all duration-200"
@@ -35,7 +45,7 @@
<div
v-if="isItemActive(item.href)"
class="w-1 h-1 rounded-full bg-primary"
></div>
/>
</RouterLink>
</template>
</div>