100 lines
3.2 KiB
Markdown
100 lines
3.2 KiB
Markdown
# 产品设计系统 - 提示词 (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>
|
|
```
|