funtime_design/.trae/rules/project-rules.md

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).