feat(story-1.2): Vue 3 SPA scaffold, base component library, User entity, SpaController

Frontend:
- Vue 3 + Vite + TypeScript strict in frontend/; builds to public/build/
- Vue Router (hash-history, requiresAuth guard → /login) and Pinia
- Global SCSS design tokens with 6 full themes (Warm Craft, Playful Pop, Sage & Cream, Dusty Mauve, Ocean Dusk, Honey & Slate)
- Base components: BaseButton (5 variants), BaseInput (floating label, error state),
  BaseBottomSheet (slide-up, focus trap, tap-outside dismiss), BaseCard, BaseChip,
  BaseToast (2.5s auto-dismiss, aria-live polite), BottomNav (4 tabs, hides at 960px)
- Type stubs for all API shapes: User, Device, Image, StickerLayer, RenderedAsset, Token

Backend:
- SpaController catch-all serves public/build/index.html; excludes api/setup/token/login/register
- User entity (email+password+roles+theme); UserRepository with PasswordUpgrader
- SecurityController with /login, /logout, /register stubs; Twig login form
- security.yaml: form_login firewall, remember_me, role_hierarchy, access_control
- Migration: create user table

Verified: npm run build succeeds, GET / → 302 /login (unauthenticated)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-27 23:21:29 -04:00
parent 378b0b858b
commit a55b3bd187
39 changed files with 3243 additions and 19 deletions
+48
View File
@@ -0,0 +1,48 @@
<template>
<span :class="['chip', `chip--${variant}`]" v-bind="$attrs">
<slot />
</span>
</template>
<script setup lang="ts">
withDefaults(defineProps<{
variant?: 'default' | 'primary' | 'success' | 'warning' | 'error'
}>(), { variant: 'default' })
</script>
<style scoped lang="scss">
.chip {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: 600;
&--default {
background: var(--color-surface-2);
color: var(--color-text-muted);
}
&--primary {
background: var(--color-primary);
color: var(--color-primary-fg);
}
&--success {
background: #d4edda;
color: #155724;
}
&--warning {
background: #fff3cd;
color: #856404;
}
&--error {
background: #f8d7da;
color: #721c24;
}
}
</style>