前端组件库

Appearance

Return to top
On this page

CardAgent 组件

组件介绍

CardAgent 是一个卡片式代理展示组件，用于展示代理信息，包括头像、标题、描述和创建者信息。支持普通定制和高级定制两种状态。

示例：

数据库智能问答
读取数据库表结构信息并根据用户问题生成sql查询语句查询结果。
admin
在线文章解读
根据URL实时读取在线文章，按照用户要求解读文章。
admin
ai工地排查
读取数据库表结构信息并根据用户问题生成sql查询语句查询结果。
admin
会议纪要助手
读取数据库表结构信息并根据用户问题生成sql查询语句查询结果。
admin
<template>
  <div>
    <div class="site">
      <div v-for="item in list"  :key="item.title" class="site-item">
        <lz-card-agent
          :title="item.title"
          :description="item.description"
          :tyType="item.tyType"
          :avatar="item.avatar"
          :createdByName="item.createdByName"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const list = ref([
  {
    title: '数据库智能问答',
    description: '读取数据库表结构信息并根据用户问题生成sql查询语句查询结果。',
    tyType: 1,
    avatar: 'https://oss.jczxw.cn:9000/public/assets/png/数据库.png',
    createdByName: 'admin'
  },
  {
    title: '在线文章解读',
    description: '根据URL实时读取在线文章，按照用户要求解读文章。',
    tyType: 0,
    avatar: 'https://oss.jczxw.cn:9000/public/assets/png/在线文章解读.png',
    createdByName: 'admin'
  },
  {
    title: 'ai工地排查',
    description: '读取数据库表结构信息并根据用户问题生成sql查询语句查询结果。',
    tyType: 1,
    avatar: 'https://oss.jczxw.cn:9000/public/assets/png/ai工地排查.png',
    createdByName: 'admin'
  },
  {
    title: '会议纪要助手',
    description: '读取数据库表结构信息并根据用户问题生成sql查询语句查询结果。',
    tyType: 1,
    avatar: 'https://oss.jczxw.cn:9000/public/assets/png/会议纪要助手.png',
    createdByName: 'admin'
  }
])

</script>

<style scoped lang="scss">
.site-item {
  margin-bottom: 20px;
}
</style>

<template>
  <div>
    <div class="site">
      <div v-for="item in list"  :key="item.title" class="site-item">
        <lz-card-agent
          :title="item.title"
          :description="item.description"
          :tyType="item.tyType"
          :avatar="item.avatar"
          :createdByName="item.createdByName"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const list = ref([
  {
    title: '数据库智能问答',
    description: '读取数据库表结构信息并根据用户问题生成sql查询语句查询结果。',
    tyType: 1,
    avatar: 'https://oss.jczxw.cn:9000/public/assets/png/数据库.png',
    createdByName: 'admin'
  },
  {
    title: '在线文章解读',
    description: '根据URL实时读取在线文章，按照用户要求解读文章。',
    tyType: 0,
    avatar: 'https://oss.jczxw.cn:9000/public/assets/png/在线文章解读.png',
    createdByName: 'admin'
  },
  {
    title: 'ai工地排查',
    description: '读取数据库表结构信息并根据用户问题生成sql查询语句查询结果。',
    tyType: 1,
    avatar: 'https://oss.jczxw.cn:9000/public/assets/png/ai工地排查.png',
    createdByName: 'admin'
  },
  {
    title: '会议纪要助手',
    description: '读取数据库表结构信息并根据用户问题生成sql查询语句查询结果。',
    tyType: 1,
    avatar: 'https://oss.jczxw.cn:9000/public/assets/png/会议纪要助手.png',
    createdByName: 'admin'
  }
])

</script>

<style scoped lang="scss">
.site-item {
  margin-bottom: 20px;
}
</style>

属性 (Props)

属性名类型默认值说明
titlestring''卡片标题
descriptionstring''卡片描述
avatarstring''代理头像图片地址
tyTypenumber0代理类型：0-普通定制，1-高级定制
createdByNamestringundefined创建者名称
seniorSvgstringundefined高级定制标识图片地址
userSvgstringundefined用户头像图片地址

方法 (Methods)

方法名参数说明
无无无

插槽 (Slots)

插槽名说明
默认插槽无

事件 (Events)

事件名参数说明
无无无

样式 (Styles)

组件支持以下样式类：

  • .card-box: 卡片外层容器
  • .card-box-agent: 卡片内容区域
  • .agent-left: 左侧头像区域
  • .agent-right: 右侧信息区域
  • .title: 标题区域
  • .description: 描述区域
  • .createName: 创建者名称区域
  • .senior: 高级定制标识区域
  • .user: 用户头像区域