41 lines
1.6 KiB
Markdown
41 lines
1.6 KiB
Markdown
# 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).
|