PromptCards

PromptCards 用卡片展示提示词，适合放在欢迎页中引导用户开始对话。

导入方式

按需导入

import { PromptCards } from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

完整导入

import * as AiChatVue from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

app.use(AiChatVue)

// 模板中可直接使用 <PromptCards />

基础用法

当前选择：尚未选择

<script setup lang="ts">
import { ref } from 'vue'
import { PromptCards } from '@weimin96/ai-chat-vue'
import { promptCards } from '../../.vitepress/theme/demo-data'

const selected = ref('尚未选择')
</script>

<template>
  <div>
    <PromptCards
      :cards="promptCards"
      @select="(prompt) => (selected = prompt)"
    />
    <p style="margin-top: 12px; font-size: 13px">当前选择：{{ selected }}</p>
  </div>
</template>

API

属性	类型	默认值	说明
cards	Array<{ icon?: string; title: string; prompt: string }>	必填	提示卡片列表

事件	说明
select	选择卡片时返回 prompt