qn-ai-pc/src/components/AppConversationDefault/index.vue

<!-- 会话默认对话组件 -->
<script setup lang="ts">
import type { Props } from './index.d'
import DefaultImage from '@/assets/images/conversation/default_img.png'
import { SvgIcon } from '@/components/SvgIcon'
import { AppContentDefaultBox } from '@/components/AppContentDefaultBox'
import { AppDefaultLead } from '@/components/AppDefaultLead'
import { AppModelSelect } from '@/components/AppModelSelect'
import { AppTopPicks } from '@/components/AppTopPicks'
import type { TopPickItem } from '@/components/AppTopPicks/index.d'
import { AppPicture } from '@/components/AppPicture'

const props = withDefaults(defineProps<Props>(), {
  isPick: false,
  isHot: false,
  height: '100%',
  leadData: () => ({
    title: '你好，我是青鸟语言大模型-同聪~',
    subTitles: [
      '我可以自由的跟你对话～陪你聊天～帮你想方案～答疑解惑。',
      '你可以试着问我',
    ],
    image: DefaultImage,
  }),
  topPickList: () => [
    {
      id: '1',
      label: '写一首赞美祖国的诗',
    },
    {
      id: '2',
      label: '帮我指定一个路旅游计划',
    },
    {
      id: '3',
      label: 'AI会代替人类工作吗？',
    },
    {
      id: '4',
      label: '历史上的今天发生了什么？',
    },
    {
      id: '5',
      label: '红烧牛肉的做法',
    },
  ],
})

const emit = defineEmits(['handleHot', 'handlePick'])

function handlePick(index: number, item: TopPickItem) {
  emit('handlePick', index, item)
}
</script>

<template>
  <AppContentDefaultBox class="content-default-style">
    <AppModelSelect></AppModelSelect>
    <AppDefaultLead
      class="mt-20"
      :title="leadData.title"
      :sub-titles="leadData.subTitles"
      :image="leadData.image"
    ></AppDefaultLead>
    <AppTopPicks
      v-if="props.isPick"
      class="pl-20 mt-10"
      :list="props.topPickList"
      @change="handlePick"
    >
    </AppTopPicks>

    <div v-if="props.isHot" class="pl-20 mt-10 flex justify-between items-end">
      <div class="category-box">
        <div class="top flex items-center">
          <p class="title">
            常用角色
          </p>
          <p class="sub-title truncate">
            我会转换为不同的角色跟你对话
          </p>
          <SvgIcon class="icon" name="more"></SvgIcon>
        </div>
        <div class="picture-box flex">
          <AppPicture
            v-for="(item, index) in roleList"
            :key="index"
            class="picture-item-role"
            :name="item.roleName"
            :image="item.roleImg"
            @click="$emit('handleHot', index, item)"
          ></AppPicture>
        </div>
      </div>
      <div class="category-box">
        <div class="top flex items-center">
          <p class="title">
            热门应用
          </p>
          <p class="sub-title truncate">
            这里或许有你想要的好东西
          </p>
          <SvgIcon class="icon" name="more"></SvgIcon>
        </div>
        <div class="picture-box flex">
          <AppPicture
            v-for="(item, index) in applyList"
            :key="index"
            class="picture-item"
            :name="item.roleName"
            :image="item.roleImg"
            type="entire"
            @click="$emit('handleHot', index, item)"
          ></AppPicture>
        </div>
      </div>
    </div>
  </AppContentDefaultBox>
</template>

<style lang="scss" scoped>
.content-default-style {
  height: v-bind(height);
  overflow-y: auto;
}

.category-box {
  width: calc(50% - 10px);
  padding: 15px 20px;
  background-color: #edf3ff;
  border-radius: 8px;
  .top {
    position: relative;
    .title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 0;
    }
    .sub-title {
      color: #6d7278;
      margin-left: 30px;
      margin-bottom: 0;
    }
    .icon {
      width: 45px;
      height: 18px;
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 6px;
    }
  }
  .picture-box {
    margin-top: 20px;
    .picture-item-role {
      margin-left: -10px;
    }
    .picture-item + .picture-item {
      margin-left: 15px;
    }
  }
}
</style>