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

<!-- 会话默认对话组件 -->
<script setup lang="ts">
import { ref } from 'vue'
import DefaultImage from '@/assets/images/conversation/default_img.png'
import TestImg from '@/assets/images/a1.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'
import type { PictureType } from '@/components/AppPicture/index.d'

const leadData = {
  title: '你好，我是青鸟语言大模型-同聪~',
  subTitles: [
    '我可以自由的跟你对话～陪你聊天～帮你想方案～答疑解惑。',
    '你可以试着问我',
  ],
  image: DefaultImage,
}

const topPickList = ref<TopPickItem[]>([
  {
    id: '1',
    label: '啦啦啦啦啦啦',
  },
  {
    id: '2',
    label: '啦啦啦啦啦啦',
  },
  {
    id: '3',
    label: '啦啦啦啦啦啦啦啦啦啦啦啦',
  },
  {
    id: '4',
    label: '啦啦啦啦啦啦',
  },
  {
    id: '5',
    label: '啦啦啦啦啦啦',
  },
])

const roleList = ref<PictureType[]>([
  {
    id: '1',
    image: TestImg,
    name: '法律顾问',
    type: '2',
  },
  {
    id: '1',
    image: TestImg,
    name: '法律顾问',
    type: '2',
  },
  {
    id: '1',
    image: TestImg,
    name: '法律顾问',
    type: '2',
  },
  {
    id: '1',
    image: TestImg,
    name: '法律顾问',
    type: '2',
  },
])
</script>

<template>
  <AppContentDefaultBox>
    <AppModelSelect></AppModelSelect>
    <AppDefaultLead
      class="mt-10"
      :title="leadData.title"
      :sub-titles="leadData.subTitles"
      :image="leadData.image"
    ></AppDefaultLead>
    <AppTopPicks class="pl-20 mt-10" :list="topPickList"></AppTopPicks>

    <div 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.name"
            :image="item.image"
          ></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 roleList"
            :key="index"
            class="picture-item"
            :name="item.name"
            :image="item.image"
            type="entire"
          ></AppPicture>
        </div>
      </div>
    </div>
  </AppContentDefaultBox>
</template>

<style lang="scss" scoped>
.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>