# Deotaland Frontend (Vue 3 + Element Plus)

This template implements the requested design system, i18n, routing, and performance features.

## Stack
- Vue 3 (Vite, JavaScript)
- Element Plus 2.x (auto-import, CSS styles)
- Vue Router 4
- Vue I18n 9.x (zh/en, default zh)
- unplugin-auto-import / unplugin-vue-components / unplugin-icons (Feather icons)
- vue3-lazyload (images)
- vue-virtual-scroller@next (large lists)

## Scripts
- `npm run dev` – start dev server
- `npm run build` – production build
- `npm run preview` – preview build

## Features
- Design system: primary `#6B46C1`, accent `#A78BFA`, text `#1F2937`, bg `#F3F4F6`, radius 8px
- 8px spacing grid, card-based layout, subtle shadows, 200ms ease-in-out transitions
- Dark theme: toggle via header switch; relies on Element Plus dark CSS variables
- I18n: language switch persists to `localStorage`
- Routing: Home and List pages; unknown routes redirect to `/`
- Performance: lazy-loaded gallery images, virtual scroller rendering 2000+ items smoothly

## Structure
- `src/styles/` – `base.css`, `theme.css`
- `src/locales/` – i18n configuration
- `src/router/` – router setup
- `src/views/` – `Home.vue`, `List.vue`
- `src/components/` – `Gallery.vue`

## Notes
- Feather icons via `unplugin-icons` components (e.g., `<i-feather-home />`)
- Ensure network access for Inter font (Google Fonts); replace with local font if needed