# 产品设计系统 - 提示词 (Prompt) 约束指南

本指南旨在规范如何使用 AI 辅助生成符合 `Funtime Design System` 标准的代码和内容。本系统基于 **Vue 3 + TypeScript + Element Plus + Pinia** 构建。

## 1. 技术栈约束 (Tech Stack Constraints)

在生成代码时，请始终遵循以下技术栈版本和规范：

- **框架**: Vue 3 (Composition API, `<script setup lang="ts">`)
- **语言**: TypeScript (严格模式)
- **UI 组件库**: Element Plus
- **状态管理**: Pinia
- **构建工具**: Vite
- **CSS 预处理**: CSS / SCSS (scoped)
- **图标库**: `@element-plus/icons-vue`

## 2. 代码生成提示词模板 (Code Generation Prompts)

### 2.1 新增组件 (New Component)

当你需要 AI 生成一个新的 UI 组件时，请使用以下结构：

> **Role**: Senior Vue 3 Engineer
> **Task**: Create a new component named `[ComponentName]`
> **Requirements**:
> 1. Use `<script setup lang="ts">`.
> 2. Use **Element Plus** components for UI.
> 3. Implement props interface definition using TypeScript.
> 4. Use **Pinia** store if global state is needed (refer to `useDesignStore`).
> 5. Ensure responsive design and proper styling (scoped CSS).
> 6. Do NOT use `Options API`.
> **Context**: This component is part of a Product Design System.

### 2.2 模拟数据 (Mock Data)

当需要填充数据时：

> **Task**: Generate mock data for `[FeatureName]`
> **Format**: JSON or TypeScript array
> **Constraint**:
> - Use `vite-plugin-mock` structure if creating an API mock.
> - Data should look realistic for a product design context (e.g., project names, status, user counts).
> - Refer to `mock/index.ts` for existing patterns.

### 2.3 状态管理 (State Management)

当修改 Pinia Store 时：

> **Task**: Update `src/store/design.ts`
> **Action**: Add state/actions for `[Feature]`
> **Constraint**:
> - Use Setup Store syntax (`defineStore('id', () => { ... })`).
> - Keep state reactive using `ref` or `reactive`.
> - Export a composable hook `use[StoreName]`.

## 3. 设计规范 (Design Guidelines)

- **布局**: 使用 `src/layout/index.vue` 作为主布局，包含侧边栏导航和顶部 Header。
- **颜色**:
  - Primary: `#409eff` (Element Plus Default)
  - Background: `#f5f7fa`
- **字体**: Helvetica Neue, Arial, sans-serif

## 4. 交互规范 (Interaction Rules)

- **反馈**: 所有的增删改操作必须有用户反馈 (使用 `ElMessage.success` 或 `ElMessage.error`)。
- **加载状态**: 异步操作期间应展示 Loading 状态。
- **表单验证**: 所有输入表单必须包含基本的非空验证。

## 5. 示例 (Example)

**请求**: "创建一个用户列表页面，包含搜索功能。"

**AI 应回复的代码结构**:

```vue
<template>
  <div class="user-list">
    <el-card>
      <template #header>
        <div class="header-actions">
           <el-input v-model="searchQuery" placeholder="Search users..." />
           <el-button type="primary">Add User</el-button>
        </div>
      </template>
      <el-table :data="filteredUsers">
        <!-- Columns -->
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
// Imports...

// Logic...
</script>
```