Kingsmai/dticket.tootaio.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): standardize page layouts and component styling

Browse Source 
Introduce structural CSS classes for page shells, headers, and surface cards
Update primary theme color to red and neutral to zinc across the application
This commit is contained in:
xiaomai
2026-05-08 16:25:42 +08:00
parent bc009cffda
commit 227c64d346
12 changed files with 454 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/layouts/default.vue
View File

@@ -1,7 +1,5 @@
<template>
<div class="relative min-h-dvh bg-default text-default">
<div class="pointer-events-none absolute inset-x-0 top-0 h-72 bg-gradient-to-b from-primary/10 via-primary/0 to-transparent opacity-80" />
<div class="relative min-h-dvh bg-muted text-default">
<template v-if="auth.user.value">
<Transition
enter-active-class="transition-opacity duration-200 ease-out"
@@ -30,11 +28,11 @@
>
<aside
v-if="mobileMenuOpen"
class="fixed inset-y-2 left-2 z-50 flex w-[min(20rem,calc(100vw-1rem))] flex-col rounded-[28px] border border-default/80 bg-default/96 p-3 shadow-2xl backdrop-blur-xl lg:hidden"
class="fixed inset-y-2 left-2 z-50 flex w-[min(20rem,calc(100vw-1rem))] flex-col rounded-lg border border-default/80 bg-default/96 p-3 shadow-2xl backdrop-blur-xl lg:hidden"
>
<div class="flex items-start justify-between gap-3 rounded-3xl border border-default bg-gradient-to-br from-primary/12 via-default to-default px-4 py-4">
<div class="flex items-start justify-between gap-3 rounded-lg border border-default bg-elevated px-4 py-4">
<div class="flex min-w-0 items-center gap-3">
<div class="flex size-11 shrink-0 items-center justify-center rounded-2xl bg-primary/12 text-primary">
<div class="flex size-11 shrink-0 items-center justify-center rounded-lg bg-primary/12 text-primary">
<UIcon name="i-lucide-grid-2x2" class="size-5" />
</div>
@@ -64,11 +62,11 @@
:key="item.to"
:to="item.to"
:aria-current="isMenuItemActive(item) ? 'page' : undefined"
class="group flex min-h-14 items-center gap-3 rounded-2xl border px-4 py-3 text-sm font-medium transition-all duration-200"
class="group flex min-h-14 items-center gap-3 rounded-lg border px-4 py-3 text-sm font-medium transition-all duration-200"
:class="mobileMenuItemClasses(item)"
>
<div
class="flex size-10 shrink-0 items-center justify-center rounded-2xl transition-colors duration-200"
class="flex size-10 shrink-0 items-center justify-center rounded-lg transition-colors duration-200"
:class="mobileMenuIconClasses(item)"
>
<UIcon :name="item.icon" class="size-5" />
@@ -79,9 +77,9 @@
</nav>
<div class="mt-auto space-y-3 border-t border-default pt-3">
<div class="rounded-3xl border border-default bg-default/90 px-4 py-4 shadow-sm">
<div class="rounded-lg border border-default bg-elevated px-4 py-4 shadow-sm">
<div class="flex items-center gap-3">
<div class="flex size-11 shrink-0 items-center justify-center rounded-2xl bg-muted text-highlighted">
<div class="flex size-11 shrink-0 items-center justify-center rounded-lg bg-muted text-highlighted">
<UIcon name="i-lucide-user-round" class="size-5" />
</div>
@@ -109,7 +107,7 @@
color="neutral"
variant="ghost"
icon="i-lucide-house"
class="w-full justify-start rounded-2xl"
class="w-full justify-start rounded-lg"
@click="mobileMenuOpen = false"
/>
@@ -118,7 +116,7 @@
color="neutral"
variant="ghost"
icon="i-lucide-languages"
class="w-full justify-start rounded-2xl"
class="w-full justify-start rounded-lg"
:aria-label="t('common.switchLanguage')"
@click="toggleLocale"
/>
@@ -129,7 +127,7 @@
color="neutral"
variant="outline"
icon="i-lucide-log-out"
class="w-full justify-start rounded-2xl"
class="w-full justify-start rounded-lg"
@click="logout"
/>
</div>
@@ -138,9 +136,9 @@
<div class="relative lg:grid lg:min-h-dvh lg:grid-cols-[17.5rem_minmax(0,1fr)]">
<aside class="sticky top-0 hidden h-dvh flex-col border-r border-default/80 bg-default/92 px-5 py-5 backdrop-blur-xl lg:flex">
<div class="rounded-[28px] border border-default bg-gradient-to-br from-primary/12 via-default to-default px-4 py-4 shadow-sm">
<div class="rounded-lg border border-default bg-elevated px-4 py-4 shadow-sm">
<div class="flex items-center gap-3">
<div class="flex size-12 shrink-0 items-center justify-center rounded-2xl bg-primary/12 text-primary">
<div class="flex size-12 shrink-0 items-center justify-center rounded-lg bg-primary/12 text-primary">
<UIcon name="i-lucide-grid-2x2" class="size-6" />
</div>
@@ -161,11 +159,11 @@
:key="item.to"
:to="item.to"
:aria-current="isMenuItemActive(item) ? 'page' : undefined"
class="group flex min-h-14 items-center gap-3 rounded-2xl border px-4 py-3 text-sm font-medium transition-all duration-200"
class="group flex min-h-14 items-center gap-3 rounded-lg border px-4 py-3 text-sm font-medium transition-all duration-200"
:class="desktopMenuItemClasses(item)"
>
<div
class="flex size-10 shrink-0 items-center justify-center rounded-2xl transition-colors duration-200"
class="flex size-10 shrink-0 items-center justify-center rounded-lg transition-colors duration-200"
:class="desktopMenuIconClasses(item)"
>
<UIcon :name="item.icon" class="size-5" />
@@ -179,9 +177,9 @@
</nav>
<div class="mt-auto space-y-3">
<div class="rounded-[28px] border border-default bg-default/90 px-4 py-4 shadow-sm">
<div class="rounded-lg border border-default bg-elevated px-4 py-4 shadow-sm">
<div class="flex items-center gap-3">
<div class="flex size-11 shrink-0 items-center justify-center rounded-2xl bg-muted text-highlighted">
<div class="flex size-11 shrink-0 items-center justify-center rounded-lg bg-muted text-highlighted">
<UIcon name="i-lucide-user-round" class="size-5" />
</div>
@@ -210,7 +208,7 @@
color="neutral"
variant="ghost"
icon="i-lucide-house"
class="justify-start rounded-2xl"
class="justify-start rounded-lg"
/>
<UButton
@@ -218,7 +216,7 @@
color="neutral"
variant="ghost"
icon="i-lucide-languages"
class="justify-start rounded-2xl"
class="justify-start rounded-lg"
:aria-label="t('common.switchLanguage')"
@click="toggleLocale"
/>
@@ -229,19 +227,19 @@
color="neutral"
variant="outline"
icon="i-lucide-log-out"
class="justify-start rounded-2xl"
class="justify-start rounded-lg"
@click="logout"
/>
</div>
</div>
</aside>
<div class="min-w-0">
<div class="min-w-0 bg-muted">
<header class="sticky top-0 z-30 border-b border-default/80 bg-default/92 backdrop-blur-xl lg:hidden">
<UContainer class="py-3">
<div class="flex items-center justify-between gap-3">
<div class="flex min-w-0 items-center gap-3 rounded-2xl border border-default bg-default/80 px-3 py-2 shadow-sm">
<div class="flex size-10 shrink-0 items-center justify-center rounded-2xl bg-primary/12 text-primary">
<div class="flex min-w-0 items-center gap-3 rounded-lg border border-default bg-elevated px-3 py-2 shadow-sm">
<div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/12 text-primary">
<UIcon name="i-lucide-grid-2x2" class="size-5" />
</div>
@@ -286,8 +284,8 @@
<header class="relative border-b border-default/80 bg-default/92 backdrop-blur-xl">
<UContainer class="py-4 md:py-5">
<div class="flex items-center justify-between gap-3">
<div class="flex min-w-0 items-center gap-3 rounded-2xl border border-default bg-default/80 px-3 py-2 shadow-sm">
<div class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
<div class="flex min-w-0 items-center gap-3 rounded-lg border border-default bg-elevated px-3 py-2 shadow-sm">
<div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
<UIcon name="i-lucide-grid-2x2" class="size-5" />
</div>