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

16
app/pages/management/users/index.vue
View File

@@ -1,9 +1,9 @@
<template>
<UContainer class="py-8">
<div class="mx-auto max-w-6xl space-y-4">
<div class="space-y-1.5">
<UBadge label="Super Admin" color="primary" variant="soft" class="rounded-full" />
<h1 class="text-2xl font-bold text-highlighted sm:text-3xl">
<UContainer class="page-shell">
<div class="space-y-5">
<div class="page-header">
<UBadge label="Super Admin" color="primary" variant="soft" class="page-eyebrow" />
<h1 class="page-title">
User management
</h1>
</div>
@@ -16,7 +16,7 @@
icon="i-lucide-key-round"
/>
<UCard class="border border-default bg-default shadow-sm" :ui="{ body: 'p-0 sm:p-0' }">
<UCard class="surface-card overflow-hidden rounded-lg" :ui="{ body: 'p-0 sm:p-0' }">
<template #header>
<div class="flex flex-col gap-2.5 lg:flex-row lg:items-center lg:justify-between">
<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
@@ -49,8 +49,8 @@
</template>
<div class="overflow-x-auto">
<div class="min-w-[900px]" aria-label="Users">
<div class="grid grid-cols-[56px_minmax(190px,1.4fr)_minmax(150px,1fr)_120px_minmax(190px,1.2fr)_150px_minmax(230px,auto)] items-center gap-3 border-b border-default bg-muted px-4 py-2 text-xs font-semibold uppercase text-muted">
<div class="compact-table min-w-[900px]" aria-label="Users">
<div class="grid grid-cols-[56px_minmax(190px,1.4fr)_minmax(150px,1fr)_120px_minmax(190px,1.2fr)_150px_minmax(230px,auto)] items-center gap-3 border-b border-default bg-muted px-4 py-3 text-xs font-semibold uppercase text-muted">
<div>Order</div>
<div>Display Name</div>
<div>PIC Phone</div>