37 lines
1.4 KiB
Markdown
37 lines
1.4 KiB
Markdown
# 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
|