规则文件

.trae/rules/project-rules.md

@@ -0,0 +1,40 @@
+# 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).