AI 前端开发 Prompt 模板库

使用说明 ：以下模板可直接复制到 Cursor / Claude / ChatGPT 中使用。将 {} 中的内容替换为你的实际项目信息即可。

模板一：管理后台列表页

适用场景

用户管理、订单管理、商品管理、日志管理等最常见的后台列表页面。

Prompt 模板

复制代码

请用 {Vue 3.4 + TypeScript + Element Plus 2.5} 写一个 {用户管理} 列表页。

## 技术栈
- Vue 3.4 Composition API + <script setup>
- TypeScript（严格模式，禁止 any）
- Element Plus 2.5
- Axios（请求封装在 @/utils/request）
- Pinia（状态管理在 @/stores/user）

## 页面布局
顶部：面包屑导航 + 页面标题

搜索区域（el-form inline 布局）：
1. {关键词} 输入框，placeholder="请输入{用户名}"，支持回车搜索
2. {状态下拉框}：全部 / 启用 / 禁用，allowClear
3. {时间范围选择器}：创建时间范围
4. 搜索按钮（type="primary"）、重置按钮、导出按钮

操作栏（搜索区域下方）：
- 新增按钮（type="primary"）
- 批量删除按钮（danger，需二次确认）

数据表格（el-table）：
| 字段 | 类型 | 展示方式 |
|------|------|----------|
| ID | number | 普通文本 |
| {用户名} | string | 普通文本 |
| {邮箱} | string | 普通文本 |
| {头像} | string | el-image，40x40 圆角 |
| {状态} | enum | el-tag：active=success(启用), inactive=info(禁用) |
| {角色} | string | el-tag |
| {创建时间} | string | 格式化：YYYY-MM-DD HH:mm |
| 操作 | - | 编辑按钮(link) + 删除按钮(link, danger) |

表格功能：
- 支持多选（el-table-column type="selection"）
- 支持排序（ID、创建时间）
- 支持行内编辑（状态可下拉切换）
- loading 状态
- 空数据时显示 el-empty 组件

分页（el-pagination）：
- 支持 pageSize 切换（10/20/50/100）
- 显示总条数
- 跳转至某页

## 接口定义
```typescript
// 列表查询
GET /api/{users}
Request: {
  page: number;        // 当前页，默认 1
  pageSize: number;    // 每页条数，默认 10
  keyword?: string;    // 关键词
  status?: string;     // 状态
  startTime?: string;  // 开始时间
  endTime?: string;    // 结束时间
}
Response: {
  code: number;
  data: {
    list: User[];
    total: number;
    summary?: {         // 统计信息
      totalCount: number;
      activeCount: number;
      inactiveCount: number;
    }
  };
  message: string;
}

// 删除
DELETE /api/{users}/:id
Response: { code, data: boolean, message }

// 批量删除
DELETE /api/{users}/batch
Request: { ids: number[] }
Response: { code, data: { success: number; fail: number }, message }

// 状态切换
PATCH /api/{users}/:id/status
Request: { status: 'active' | 'inactive' }
Response: { code, data: User, message }

TypeScript 类型

typescript 复制代码

interface User {
  id: number;
  username: string;
  email: string;
  avatar: string;
  status: 'active' | 'inactive';
  role: string;
  createdAt: string;
}

type UserStatus = 'active' | 'inactive';

输出要求

使用

模板二：复杂表单页（新增/编辑）

适用场景

用户新增/编辑、商品发布、配置表单、审批表单等。

Prompt 模板

请用 {Vue 3.4 + TypeScript + Element Plus 2.5} 写一个 {用户} {新增/编辑} 表单页。

技术栈

Vue 3.4 Composition API +

表单字段

字段名	类型	是否必填	校验规则	组件
{用户名}	string	是	3-20 位字母数字下划线	el-input
{密码}	string	新增必填	6-20 位，至少含字母和数字	el-input type="password"
{确认密码}	string	新增必填	必须与密码一致	el-input type="password"
{邮箱}	string	是	邮箱格式	el-input
{手机号}	string	否	手机号格式	el-input
{头像}	string	否	-	el-upload 单图上传
{性别}	enum	否	-	el-radio-group
{状态}	enum	是	-	el-switch
{角色}	array	是	至少选一个	el-select multiple
{部门}	tree	否	-	el-tree-select
{备注}	string	否	最多 200 字	el-input type="textarea"

页面功能

表单分块展示（基本信息 / 联系信息 / 其他信息）
新增和编辑共用同一组件，通过路由参数 mode 区分
编辑时自动回显数据（调用 GET /api/{users}/:id）
提交按钮 loading 状态
提交成功后返回上一页并刷新列表
表单校验失败时自动滚动到第一个错误字段
离开页面时未保存提示（beforeRouteLeave）

接口定义

typescript 复制代码

// 新增
POST /api/{users}
Request: Omit<User, 'id' | 'createdAt'>
Response: { code, data: User, message }

// 编辑
PUT /api/{users}/:id
Request: Partial<User>
Response: { code, data: User, message }

// 详情回显
GET /api/{users}/:id
Response: { code, data: User, message }

// 上传头像
POST /api/upload
Content-Type: multipart/form-data
Response: { code, data: { url: string }, message }

输出要求

严格 TypeScript，所有表单字段定义 interface
表单校验规则完整，使用 Element Plus 的 form rules
密码和确认密码的一致性校验
图片上传处理 loading 和错误状态
编辑模式下密码字段可选填（不改则不传）
代码注释中文

模板三：数据看板/仪表盘

适用场景

首页数据概览、运营看板、实时监控页面。

Prompt 模板

请用 {Vue 3.4 + TypeScript + Element Plus 2.5 + ECharts} 写一个 {数据看板} 页面。

技术栈

Vue 3.4 + TypeScript
Element Plus 2.5（指标卡片、表格、日期选择器）
ECharts 5（图表）
封装在 @/components/Charts 中的通用图表组件

页面结构

顶部筛选栏：

时间范围选择器（快捷选项：今天/本周/本月/本年/自定义）
刷新按钮（手动刷新数据）
自动刷新开关（默认关闭，开启后每 30s 刷新）

指标卡片区（4 列布局）：

指标名	数值	环比	趋势图标
{总用户数}	12,345	+12.5%	上升绿色箭头
{活跃用户数}	3,456	-5.2%	下降红色箭头
{订单总额}	¥234,567	+8.1%	上升
{转化率}	12.3%	+2.1%	上升

图表区（2x2 网格）：

{用户增长趋势} - 折线图（近30天每日新增）
{用户来源分布} - 饼图（PC/移动端/小程序）
{订单金额分布} - 柱状图（按金额区间）
{24小时活跃度} - 面积图

底部表格区：

最近 {10} 条 {订单} 记录
点击可跳转到详情页

接口定义

typescript 复制代码

// 看板数据（聚合接口）
GET /api/dashboard
Request: { startTime: string; endTime: string }
Response: {
  code: number;
  data: {
    metrics: {
      totalUsers: { value: number;环比: number };
      activeUsers: { value: number; 环比: number };
      // ...
    };
    charts: {
      userGrowth: Array<{ date: string; count: number }>;
      sourceDistribution: Array<{ name: string; value: number }>;
      // ...
    };
    recentOrders: Order[];
  }
}

输出要求

图表使用封装的通用组件，传入 data 和 config 即可渲染
支持响应式布局（窗口变化时图表自动 resize）
数据加载时显示 skeleton 或 loading
自动刷新使用 setInterval，组件卸载时清除
数字变化时添加 count-up 动画效果
严格 TypeScript

模板四：接口对接（Mock 转真实）

适用场景

AI 生成了 Mock 数据，需要改成对接真实后端接口。

Prompt 模板

请帮我把以下使用 Mock 数据的代码改成对接真实接口。

当前代码

vue 复制代码

[粘贴 AI 生成的代码]

接口信息

地址：{GET /api/users}
请求方法：{GET}
请求参数：{page, pageSize, keyword, status}
响应结构：

json 复制代码

{
  "code": 200,
  "data": {
    "list": [
      { "id": 1, "name": "张三", "email": "zhangsan@example.com", "status": "active" }
    ],
    "total": 100
  },
  "message": "success"
}

要求

使用已有的 request 封装（@/utils/request），不要直接调用 axios
请求发送时显示 loading，请求结束关闭 loading
接口成功：渲染数据
接口返回空数组：显示 "暂无数据" 的 Empty 组件
接口报错（500/404/网络错误）：显示错误提示，表格不白屏
参数变化时自动重新请求（如搜索、分页、筛选）
组件卸载时取消未完成的请求（使用 AbortController）
严格 TypeScript，定义接口返回类型

模板五：代码审查与优化

适用场景

让 AI 审查现有代码，找出潜在问题。

Prompt 模板

请审查以下前端代码，找出所有潜在问题并给出修复建议。

待审查代码

typescript 复制代码

[粘贴代码]

审查维度

安全问题
- 是否存在 XSS 风险（v-html / dangerouslySetInnerHTML / innerHTML）？
- 是否有敏感信息泄露（token 打印到 console / 硬编码密钥）？
- 是否有 CSRF 防护缺失？
性能问题
- 是否存在不必要的重渲染？
- 大数据列表是否做虚拟滚动或分页？
- 图片是否懒加载？
- 是否有内存泄漏（定时器/订阅未清理）？
边界情况
- 空数组/空对象处理
- 超长文本是否截断或换行？
- 接口返回异常数据结构时是否崩溃？
- 网络超时/断网处理
TypeScript 类型
- 是否有 any 类型？
- 可选属性是否正确标记？
- 泛型使用是否合理？
代码规范
- 命名是否清晰？
- 是否有重复代码可以提取？
- 组件是否过大（超过 300 行建议拆分）？

输出格式

对每个问题按以下格式输出：

复制代码

[严重级别] 问题描述
位置：文件路径:行号
修复建议：具体代码

严重级别：致命（必须修）/ 严重（建议修）/ 提示（可选）

复制代码

---

## 模板六：框架迁移（Vue ↔ React）

### 适用场景
把 Vue 组件转成 React，或反之。

### Prompt 模板

请将以下 Vue 3 组件转换为 React 18 组件。

源组件代码

vue 复制代码

[粘贴 Vue 代码]

转换要求

使用 React 18 + TypeScript + Hooks
UI 组件库使用 Ant Design 5（对应 Element Plus 的组件）
状态管理使用 Zustand（对应 Pinia）
路由使用 React Router 6
保持原有功能完全一致
保持原有 TypeScript 类型定义
添加适当的 useMemo / useCallback 优化性能
组件卸载时清理副作用

目标组件映射参考

Vue	React

输出要求

完整可运行的 React 组件代码
严格 TypeScript，禁止 any
代码注释中文

模板七：调试排错

适用场景

遇到报错让 AI 帮忙定位原因。

Prompt 模板

我的前端代码出现以下问题，请帮我定位原因并给出修复方案。

问题描述

{页面加载后白屏 / 点击按钮无反应 / 表格数据不显示 / 页面卡顿}

错误信息

复制代码

[粘贴浏览器 Console 报错]
[粘贴 Network 面板的请求响应]

环境信息

框架版本：{Vue 3.4.21 / React 18.2.0}
组件库版本：{Element Plus 2.5.3 / Ant Design 5.15.0}
浏览器：{Chrome 120}
构建工具：{Vite 5.0}

已尝试的解决方法

{已尝试重启服务，无效}
{已清除浏览器缓存，无效}

期望

请帮我：

分析报错原因
给出最小修复方案
解释为什么会发生这个问题（帮助我理解，下次避免）

模板八：通用组件封装

适用场景

封装可复用的表格、表单、选择器等组件。

Prompt 模板

请帮我封装一个通用的 {ProTable} 组件。

需求背景

项目中大量页面都是"搜索表单 + 数据表格 + 分页"的结构，每次重复写很繁琐。希望封装一个通用组件，传入配置即可生成完整页面。

技术栈

Vue 3.4 + TypeScript
Element Plus 2.5

组件 API 设计

typescript 复制代码

interface ProTableProps<T> {
  // 列定义
  columns: ProColumn<T>[];
  // 数据请求函数
  request: (params: any) => Promise<{ list: T[]; total: number }>;
  // 搜索表单配置
  searchConfig?: SearchConfig;
  // 工具栏按钮
  toolbar?: ToolbarAction[];
  // 是否显示行选择
  rowSelection?: boolean;
  // 是否显示分页
  pagination?: boolean | PaginationConfig;
  // 操作列
  actions?: TableAction<T>[];
}

interface ProColumn<T> {
  title: string;
  dataIndex: keyof T;
  width?: number;
  sortable?: boolean;
  searchType?: 'input' | 'select' | 'dateRange' | 'number';
  searchOptions?: { label: string; value: any }[];
  render?: (row: T) => VNode;
}

使用示例

vue 复制代码

<template>
  <ProTable
    :columns="columns"
    :request="fetchUserList"
    :toolbar="[{ label: '新增', type: 'primary', onClick: handleAdd }]"
    row-selection
    :actions="[
      { label: '编辑', onClick: handleEdit },
      { label: '删除', danger: true, onClick: handleDelete }
    ]"
  />
</template>

输出要求

完整组件代码（单文件 .vue）
支持泛型，类型安全
内置 loading、空状态、错误处理
搜索条件变化自动触发请求（防抖 300ms）
分页变化触发请求
批量操作支持
代码注释中文

模板九：项目初始化/脚手架搭建

适用场景

从零搭建一个新的管理后台项目。

Prompt 模板

请帮我搭建一个完整的管理后台项目骨架。

技术栈

前端框架：Vue 3.4 + TypeScript
构建工具：Vite 5
UI 组件库：Element Plus 2.5
状态管理：Pinia
路由：Vue Router 4
HTTP 请求：Axios
代码规范：ESLint + Prettier

目录结构要求

复制代码

src/
  api/              # 接口定义
    types/          # 接口类型定义
    modules/        # 按模块组织的接口
  assets/           # 静态资源
  components/       # 公共组件
    ProTable/       # 通用表格
    ProForm/        # 通用表单
    Charts/         # 图表封装
  composables/      # 组合式函数（Vueuse）
  directives/       # 自定义指令
  layouts/          # 布局组件
    BasicLayout.vue # 侧边栏 + 顶部栏 + 内容区
  router/           # 路由配置
    index.ts        # 路由入口
    routes.ts       # 路由表
    guards.ts       # 路由守卫
  stores/           # Pinia 状态管理
    modules/        # 按模块的 store
  styles/           # 全局样式
    variables.scss  # SCSS 变量
    mixins.scss     # 混入
  utils/            # 工具函数
    request.ts      # Axios 封装
    storage.ts      # localStorage 封装
    validate.ts     # 表单校验规则
  views/            # 页面视图
    login/          # 登录页
    dashboard/      # 首页看板
    system/         # 系统管理（用户/角色/菜单）
  App.vue
  main.ts

需要实现的功能

登录页
- 用户名密码登录
- 记住密码
- 登录后存储 token
- 登录拦截（未登录跳转登录页）
布局组件
- 左侧可折叠菜单栏
- 顶部面包屑 + 用户信息下拉
- 标签页（支持多开页面）
- 内容区滚动隔离
Axios 封装
- 请求拦截：自动加 token
- 响应拦截：统一错误处理、401 跳转登录
- 请求取消（AbortController）
路由配置
- 动态路由（根据权限生成菜单）
- 路由懒加载
- 404 页面
代码规范
- ESLint 配置文件
- Prettier 配置文件
- VSCode 推荐插件和设置

输出要求

生成完整项目目录和文件
每个文件包含完整可运行代码
严格 TypeScript
代码注释中文
提供 package.json 的完整依赖列表

模板十：性能优化

适用场景

页面卡顿、加载慢、内存泄漏等性能问题。

Prompt 模板

请帮我优化以下页面的性能。

当前问题

{页面首次加载超过 3 秒}
{表格数据超过 500 条时明显卡顿}
{内存占用持续上升，不释放}

当前代码

vue 复制代码

[粘贴代码]

优化目标

首屏加载优化
- 路由懒加载
- 组件异步加载
- 第三方库按需引入
- gzip 压缩
运行时性能优化
- 大数据表格使用虚拟滚动
- 图片懒加载
- 防抖/节流处理高频事件
- 避免不必要的重渲染
内存优化
- 清理定时器和事件监听
- 大型对象及时释放引用
- 避免闭包持有大对象
网络优化
- 接口合并（减少请求数）
- 缓存策略
- 分页加载/无限滚动

输出要求

逐行分析性能瓶颈
给出优化后的完整代码
说明每项优化的原理和预期收益
严格 TypeScript

Prompt 编写黄金法则

1. 结构分层

【技术栈声明】→【功能需求】→【接口定义】→【输出要求】

复制代码

### 2. 需求具体化
| ❌ 模糊 | ✅ 具体 |
|--------|--------|
| "好看一点" | "使用 Element Plus 默认主题，禁止内联样式" |
| "功能全一点" | "包含搜索、表格、分页、批量删除、导出" |
| "处理错误" | "接口 500 时显示 '服务器繁忙'，404 时显示 '数据不存在'" |

### 3. 提供上下文
- 技术栈精确到 minor 版本号（Vue 3.4 不是 Vue 3）
- 接口定义包含完整的 TypeScript 类型
- 说明项目中已有的封装（request、组件库配置等）

### 4. 迭代优化
第一次生成的代码通常不完美，通过追问优化：

"请把内联样式改成 Element Plus 的 class"
"请添加表单校验规则"
"请处理接口超时的情况"
"请把这个大组件拆分成小组件"

本模板库持续更新，建议根据实际项目积累个人 Prompt 库。

AI 前端开发 Prompt 模板库