原型设计系统

DESIGN_PROMPTS.md

@@ -0,0 +1,99 @@
+# 产品设计系统 - 提示词 (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>
+```