🚀 Vue3 AI对话框进阶篇：自定义AI输出规则与预设会话，让AI成为你的专业编程助手！

谦卑沉程
261 阅读8分钟

Vue3 AI对话框进阶篇：自定义AI输出规则与预设会话，让AI成为你的专业编程助手！

还记得我们上期介绍的那款颜值与实力并存的 Vue3 AI 对话框吗？今天我们来深入探索它的高级功能——自定义AI输出规则和预设会话！这些功能让AI不再是简单的聊天工具，而是真正的专业编程助手。

📖 上期回顾：🚀 抖音风 Web AI 对话框：Vue 3 集成 DeepSeek & Gemini 2.0，代码高亮 + 移动端适配！

核心亮点

智能预设会话系统

想象一下，你只需要用中文描述"我要做一个用户管理页面"，AI就能自动生成专业的Vue3代码配置！（每个人组件封装不一致，只需要去定制AI输出规则，就能按照你的组件输出方式来生成）这就是预设会话的魅力：

  • CRUD页面配置助手：专业的前端工程师助手
  • 自然语言转代码：用中文描述，生成专业组件配置
  • 预设会话标识：星标标记，一目了然
  • 预设保护机制：预设会话不可删除，确保稳定性

代码导出功能

AI生成的代码不用复制粘贴，一键导出成文件！

  • 一键导出代码：智能识别代码块，支持多种格式
  • 智能文件命名：根据代码类型自动生成文件名
  • 多代码块合并：自动合并多个代码片段
  • 代码类型识别：支持TypeScript、JavaScript、Vue等

功能详解

1. 自定义AI输出规则（根据自己组件使用方式来自定义输出规则）

简单来说，就是给AI制定"工作规范"，让它按照我们的要求生成代码。项目通过 src/config/prompts.js 文件来实现：

// 专业前端工程师助手提示词
export const CRUD_SYSTEM_PROMPT = `你是一名专业的前端工程师助手，专门帮助开发者生成Vue3 + Search + Table的配置代码。

## 你的专业领域：
- Vue3 Composition API
- Search搜索组件
- Table表格组件
- TypeScript类型定义
- 表格和表单配置生成

## 工作规则：
1. **代码生成**：根据字段描述自动生成searchParams和tableColumns配置
2. **类型推断**：根据字段名称和描述智能推断合适的组件类型
3. **最佳实践**：遵循Vue3和Search/Table的最佳实践
4. **代码规范**：生成的代码要有良好的可读性和维护性
5. **中文注释**：为生成的代码添加清晰的中文注释

## 代码生成格式：
请按照以下格式生成代码：

\`\`\`typescript
import { SEARCH_PARAM_TYPE,SEARCH_PARAM } from "@/components/Search/SearchDefine";
import { TABLE_COLUMN } from "@/components/Table/TableDefine";
import { DictEnum, getDictByFieldCode,getLabel } from "@/dictionary/getDicOrigin";
import SelectDialog from "@/components/SelectDialog/index.vue";
import { h } from "vue";

// 搜索参数配置
export const searchParams: SEARCH_PARAM[] = [
  // 根据字段生成搜索配置
];

// 表格列配置
export const tableColumns: TABLE_COLUMN[] = [
  // 根据字段生成表格列配置
];
\`\`\`

请始终以专业、高效的方式协助前端开发工作。`;

智能规则映射（AI会自动判断）：

  • 文本类字段（如姓名、地址） → 输入框
  • 选择类字段（如状态、分类） → 下拉选择
  • 日期类字段（如生日、创建时间） → 日期选择器
  • 数字类字段（如年龄、价格） → 数字输入框
  • 布尔类字段（如是否启用） → 开关按钮
  • 自定义组件 → 自定义渲染

2. 预设会话系统

预设会话就像是给AI配备了"专业技能包"，让它在特定领域更专业。

预设会话特性：

const PRESET_SESSIONS = [
  {
    title: "CRUD页面配置",
    crtTime: new Date(),
    messages: [
      {
        role: "assistant",
        content: `欢迎使用CRUD页面配置助手！🎉
        
我是专业的前端工程师助手，专门帮助您生成Vue3 + Search + Table的配置代码。`
...
      }
    ],
    isPreset: true // 预设会话标记
  }
];

预设会话优势：

  • 视觉区分：星标图标 + 特殊样式，一眼就能看出来
  • 保护机制：不可删除、不可重命名，避免误操作
  • 即开即用：无需配置，开箱即用
  • 专业指导：内置详细使用说明和示例

image.png

3. 智能代码导出

不用再复制粘贴代码了！AI生成代码后，直接点击"导出代码"按钮就能下载文件。

image.png

导出功能特色：

  • 智能识别：自动识别代码块类型和语言
  • 自动命名：文件名格式 generated-code-时间戳.扩展名
  • 多块合并：一个回复里有多个代码块？自动合并成一个文件
  • 安全过滤：只有AI回复的代码才显示导出按钮
  • 格式支持：TypeScript、JavaScript、Vue、HTML、CSS等

实际使用场景

场景一：用户管理页面

你只需要这样描述：

我要做一个用户管理页面，包含以下字段：

  • 用户ID（数字）
  • 用户名（文本）
  • 邮箱（文本）
  • 状态（选择：启用/禁用）
  • 注册时间（日期）

AI自动生成完整代码：

import { SEARCH_PARAM_TYPE, SEARCH_PARAM } from "@/components/Search/SearchDefine";
import { TABLE_COLUMN } from "@/components/Table/TableDefine";
import { DictEnum, getDictByFieldCode, getLabel } from "@/dictionary/getDicOrigin";
import { h } from "vue";

// 搜索参数配置
export const searchParams: SEARCH_PARAM[] = [
  {
    field: "userId",
    label: "用户ID",
    type: SEARCH_PARAM_TYPE.INPUT_NUMBER,
    placeholder: "请输入用户ID",
    // 数字类型输入框，适合精确查询用户ID
  },
  {
    field: "username",
    label: "用户名",
    type: SEARCH_PARAM_TYPE.INPUT,
    placeholder: "请输入用户名",
    // 文本输入框，支持模糊搜索
    props: {
      clearable: true,
    },
  },
  {
    field: "email",
    label: "邮箱",
    type: SEARCH_PARAM_TYPE.INPUT,
    placeholder: "请输入邮箱",
    // 邮箱搜索框
    props: {
      clearable: true,
    },
  },
  {
    field: "status",
    label: "状态",
    type: SEARCH_PARAM_TYPE.SELECT,
    placeholder: "请选择状态",
    // 状态选择器，使用字典数据
    options: [
      { label: "启用", value: "1" },
      { label: "禁用", value: "0" },
    ],
    props: {
      clearable: true,
    },
  },
  {
    field: "registerTime",
    label: "注册时间",
    type: SEARCH_PARAM_TYPE.DATE_PICKER,
    placeholder: "请选择注册时间",
    // 日期选择器，支持范围选择
    props: {
      type: "daterange",
      "start-placeholder": "开始日期",
      "end-placeholder": "结束日期",
    },
  },
];

// 表格列配置
export const tableColumns: TABLE_COLUMN[] = [
  {
    type: "selection",
    width: 50,
    align: "center",
    // 选择列
  },
  {
    type: "index",
    width: 60,
    align: "center",
    label: "序号",
    // 序号列
  },
  {
    prop: "userId",
    label: "用户ID",
    width: 80,
    align: "center",
    // 用户ID列，数字类型居中显示
  },
  {
    prop: "username",
    label: "用户名",
    minWidth: 120,
    showOverflowTooltip: true,
    // 用户名列，设置最小宽度和溢出提示
  },
  {
    prop: "email",
    label: "邮箱",
    minWidth: 180,
    showOverflowTooltip: true,
    // 邮箱列，设置较宽的最小宽度
  },
  {
    prop: "status",
    label: "状态",
    width: 100,
    align: "center",
    // 状态列，使用字典格式化显示
    formatter: (row) => {
      return getLabel(
        [
          { label: "启用", value: "1" },
          { label: "禁用", value: "0" },
        ],
        row.status
      );
    },
  },
  {
    prop: "registerTime",
    label: "注册时间",
    width: 180,
    align: "center",
    // 注册时间列，居中显示
    formatter: (row) => {
      return row.registerTime || "-";
    },
  },
  {
    label: "操作",
    width: 150,
    align: "center",
    fixed: "right",
    // 操作列，固定右侧
    slot: "operation",
  },
];

场景二：商品管理页面

更复杂的需求也没问题：

我要做一个商品管理页面：

搜索条件：

  • 商品名称：文本输入框，支持模糊搜索
  • 商品分类：下拉选择，来源字典表
  • 价格范围：数字输入框，支持区间查询
  • 上架状态：单选（上架/下架/草稿）
  • 创建时间：日期范围选择器

表格列：

  • 商品ID：数字，宽度80px
  • 商品名称：文本，最小宽度120px
  • 商品图片：图片显示，宽度100px
  • 分类名称：文本，需要格式化显示
  • 价格：数字，保留2位小数，右对齐
  • 库存：数字，库存不足时红色显示
  • 状态：状态标签，不同状态不同颜色
  • 创建时间：日期时间格式
  • 操作：编辑、删除、上架/下架按钮

AI会生成完整的搜索和表格配置代码，包括：

  • 完整的搜索参数配置 - 所有搜索条件一应俱全
  • 详细的表格列定义 - 每一列都配置好了
  • 自定义格式化函数 - 价格、状态等特殊显示
  • 操作按钮配置 - 编辑、删除等操作
  • 清晰的中文注释 - 代码易读易维护

技术实现亮点

1. 模块化提示词管理

不同的AI模型（DeepSeek、Gemini）有不同的"说话方式"，我为每个模型都准备了专门的提示词：

// 提示词配置映射
export const PROMPT_CONFIG = {
  deepseek: {
    general: GENERAL_SYSTEM_PROMPT,
    crud: CRUD_SYSTEM_PROMPT
  },
  gemini: {
    general: GEMINI_GENERAL_PROMPT,
    crud: GEMINI_CRUD_PROMPT
  }
};

// 动态获取系统提示词
export const getSystemPrompt = (model, sessionType = 'general') => {
  const modelKey = model === 'gemini-chat' ? 'gemini' : 'deepseek';
  return PROMPT_CONFIG[modelKey][sessionType] || PROMPT_CONFIG[modelKey].general;
};

2. 智能代码检测与导出

系统会自动检测AI回复中是否包含代码，如果有就显示导出按钮：

// 智能代码检测
const hasCodeContent = (content) => {
  if (!content) return false;
  return content.includes('```') ||
         content.includes('export const') ||
         content.includes('import ');
};

// 一键导出功能
const handleExportCode = (content, index) => {
  const codeBlocks = extractCodeBlocks(content);
  const fileExtension = getFileExtension(codeBlocks[0].language);
  const fileName = `generated-code-${Date.now()}${fileExtension}`;
  
  downloadFile(exportContent, fileName);
  ElMessage.success(`代码已导出为 ${fileName}`);
};

未来规划

  • 更多预设场景：更多场景的预设，让AI来帮我们减少重复工作量
  • 自定义预设：用户可创建个人专属预设会话

总结

这款Vue3 AI对话框不仅仅是一个聊天工具，更是一个强大的编程助手！它的核心价值在于：

  • 降低开发门槛：用中文描述需求，AI自动生成专业代码
  • 提升开发效率：从需求到代码，一步到位
  • 简化工作流程：生成、导出、使用，无缝衔接
  • 优雅用户体验：界面美观，操作简单

相关链接

  • 项目地址：GitHub
  • 在线体验：立即体验
  • 技术栈：Vue3 + DeepSeek + Gemini 2.0 + Element Plus

如果这个项目对你有帮助，别忘了给个 ⭐ Star！你的支持是我们持续改进的动力！

avatar
文章
阅读
粉丝