feat: initialize project with event order form

This commit establishes the initial structure of the Nuxt application, centered around a new event order form.

Key changes include:
- Setting up the main app layout with a header, footer, and color mode support using @nuxt/ui.
- Creating a multi-part event order form on the index page.
- Introducing a `useEventOrder` composable to manage form state and validation with Zod.
- Adding modular form components under `app/components/eventOrder`.
- Including project configuration files for pnpm, VSCode, and global CSS.
This commit is contained in:
xiaomai
2025-10-16 15:22:29 +08:00
parent 9341e2ef0f
commit eb69f6c48e
15 changed files with 551 additions and 4 deletions

41
.github/copilot-instructions.md vendored Normal file
View File

@@ -0,0 +1,41 @@
This repository is a small Nuxt 4 site (TypeScript + Vue 3) using the `@nuxt/ui` component kit.
Quick context
- Framework: Nuxt 4 (see `nuxt.config.ts`). compatibilityDate is 2025-07-15 and `@nuxt/ui` is enabled.
- Scripts: `dev`, `build`, `generate`, `preview` are defined in `package.json`. Use `pnpm` in this workspace (pnpm-lock present).
- UI: Pages and layout live under `app/` (Nuxt App Directory). Components from `@nuxt/ui` (prefixed with `U*`) are used throughout.
What an AI coding agent should know/do first
- Run local dev: `pnpm dev` to start Nuxt dev server (http://localhost:3000). Changes in `app/` hot-reload.
- Preserve TypeScript usage: files use `lang="ts"` in SFCs and `typescript` is a dependency.
- Styling: `app/assets/css/main.css` imports Tailwind and `@nuxt/ui`. Avoid removing these imports.
Project-specific patterns and conventions
- Use Nuxt app directory layout: `app/app.vue`, `app/layouts/default.vue`, `app/pages/*.vue`. Add pages/components under `app/`.
- UI primitives: Expect `UApp`, `UHeader`, `UMain`, `UFooter`, `UPageHero`, `UContainer`, `UForm`, `UCard`, `UInput`, `USelect`, etc. These are provided by `@nuxt/ui` — prefer those over adding new UI libraries.
- Minimal global JS: logic is inside pages via `<script setup lang="ts">`. Prefer composition API and `reactive`/`ref` patterns as in `app/pages/index.vue`.
- Validation: the example uses `zod` (imported locally in the page). If adding validation follow the zod pattern (schema + z.infer for types).
Integration and external dependencies
- No backend code in this repo — it's a frontend site. If integrating APIs, add runtime config to `nuxt.config.ts` and use Nuxt server or composables to centralize calls.
- Build & preview: `pnpm build` then `pnpm preview` to check production output.
When editing or adding files
- Keep naming under `app/` and follow existing patterns (SFC + TS + `script setup`).
- Add imports for UI components only when needed; many U* components are globally available via `@nuxt/ui`.
- Update `app/assets/css/main.css` only to add project-specific styles; don't remove `@nuxt/ui` or Tailwind imports.
Examples to reference when making changes
- `nuxt.config.ts` — module list and devtools flag.
- `package.json` — available scripts.
- `app/pages/index.vue` — form structure, `zod` usage, `reactive` state, `U*` components.
- `app/layouts/default.vue` — shows header/footer composition and use of slots for `UHeader` and `UFooter`.
Failure modes & quick checks
- If the dev server fails, check Node version and `pnpm install` exit logs; `nuxt prepare` runs on postinstall.
- Type errors appear when SFCs change TS types — run `pnpm dev` and inspect terminal/console errors.
If unclear or missing context
- Ask the maintainer whether there are environment variables, deployment targets, or private packages to consider before adding integrations or CI.
End of instructions — ask for feedback if anything here is unclear or you'd like more granular conventions (commit messages, PR checks, etc.).