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

22
app/pages/security/index.vue
View File

@@ -1,17 +1,17 @@
<template>
<UContainer class="py-8">
<div class="mx-auto max-w-5xl space-y-6">
<div class="space-y-2">
<UBadge label="Security" color="primary" variant="soft" class="rounded-full" />
<h1 class="text-3xl font-bold text-highlighted">
<UContainer class="page-shell-narrow">
<div class="space-y-6">
<div class="page-header">
<UBadge label="Security" color="primary" variant="soft" class="page-eyebrow" />
<h1 class="page-title">
Password and passkey settings
</h1>
</div>
<div class="grid gap-6 lg:grid-cols-[1.05fr_0.95fr]">
<UCard class="border border-default bg-default">
<UCard class="surface-card overflow-hidden rounded-lg">
<template #header>
<h2 class="text-xl font-semibold text-highlighted">
<h2 class="text-lg font-semibold text-highlighted">
Change password
</h2>
</template>
@@ -39,15 +39,15 @@
</UForm>
</UCard>
<UCard class="border border-default bg-default">
<UCard class="surface-card overflow-hidden rounded-lg">
<template #header>
<h2 class="text-xl font-semibold text-highlighted">
<h2 class="text-lg font-semibold text-highlighted">
Passkeys
</h2>
</template>
<div class="space-y-5">
<div class="rounded-2xl border border-default bg-muted/40 p-4">
<div class="surface-panel rounded-lg p-4">
<div class="flex items-center justify-between gap-3">
<div>
<div class="text-sm font-semibold text-highlighted">
@@ -79,7 +79,7 @@
<div
v-for="passkey in passkeys"
:key="passkey.id"
class="rounded-2xl border border-default bg-default px-4 py-4"
class="surface-panel rounded-lg px-4 py-4"
>
<div class="flex items-center justify-between gap-3">
<div>