# Project Rules for Funtime Design System

## 1. Tech Stack Constraints
- **Framework**: Vue 3 (Composition API, `<script setup lang="ts">`)
- **Language**: TypeScript (Strict Mode)
- **UI Library**: Element Plus
- **State Management**: Pinia
- **Build Tool**: Vite
- **CSS Preprocessor**: SCSS (scoped)
- **Icons**: `@element-plus/icons-vue`

## 2. Coding Standards

### Components
- **Syntax**: Must use `<script setup lang="ts">`. **NO** Options API allowed.
- **UI Components**: Prioritize **Element Plus** components.
- **Props**: Define props using TypeScript interfaces/types.
- **Styling**: Use scoped SCSS. Ensure responsive design.

### State Management (Pinia)
- **Syntax**: Use Setup Store syntax: `defineStore('id', () => { ... })`.
- **Reactivity**: Use `ref` or `reactive` for state.
- **Usage**: Export composable hooks (e.g., `useDesignStore`).

### Mock Data
- **Format**: JSON or TypeScript array.
- **Structure**: Follow `vite-plugin-mock` structure.
- **Content**: Use realistic data relevant to a product design context.

## 3. Design Guidelines
- **Layout**: Use `src/layout/index.vue` as the main layout structure (Sidebar + Header).
- **Colors**:
  - Primary: `#409eff` (Element Plus Default)
  - Background: `#f5f7fa`
- **Typography**: Helvetica Neue, Arial, sans-serif.

## 4. Interaction & UX Rules
- **User Feedback**: MUST use `ElMessage.success` or `ElMessage.error` for add/delete/update operations.
- **Loading States**: Display loading indicators during asynchronous operations.
- **Form Validation**: All input forms MUST include basic validation (at least non-empty checks).