xiaoshu/src/components/Talk.vue

<template>
  <main>
    <section>
      <div class="suggestions">
        <p>
          嗨，早上好，试着问我
        </p>
        <div v-for="(item, key) in suggestions" :key="key">
          <a-typography-paragraph style="flex: 1; margin: 0; font-size: 14px; gba(255, 255, 255, 1);" :ellipsis="{rows: 1, css: true}">{{item}}</a-typography-paragraph>
          <p @click="chooseSuggestion(item)">试一试</p>
        </div>
      </div>
      <dialog-wrap :agentInfo="data" :userInfo="userInfo" :isSetting="false" :readonly="readonly" @setReadonly="setReadonly" />
    </section>
    <message-input :readonly="readonly" />
  </main>
</template>
<script>
import { defineComponent, ref, inject } from 'vue';
import MessageInput from './MessageInput.vue';
import DialogWrap from './DialogWrap.vue';
export default defineComponent({
  components: {
    MessageInput,
    DialogWrap
  },
  props: [],
  setup() {
    const { helper } = inject('$global');
    const readonly = ref(false);
    const suggestions = [
      '如何有效监控软件开发进度？',
      '软件开发中的安全漏洞如何预防？',
      '如何保证软件功能的完整性和稳定性？'
    ];
    const userInfo = {
      name: '奇橙',
      avatar: 'https://s21.ax1x.com/2024/04/18/pFzyA0O.png'
    };
    const data = {
      avatar: 'https://s21.ax1x.com/2024/04/18/pFzyA0O.png',
      title: '论文解读助手',
      name: '@奇橙',
      content: '你好，我是一名专业的论文检索助手，可以帮你查找并详细解读你需要的学术论文。',
      hot: 345,
      star: 34,
      id: '111'
    };
    const setReadonly = (status) => {
      readonly.value = status;
    };
    const chooseSuggestion = (text) => {
      if (!readonly.value) {
        helper.$bus.emit('send-message', text);
      }
    };
    return {
      suggestions,
      data,
      readonly,
      userInfo,
      setReadonly,
      chooseSuggestion
    }
  },
});
</script>
<style scoped>
  main {
    margin: 20px 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    padding-bottom: 20px;
    >section {
      flex: 1;
      overflow-y: auto;
      .suggestions {
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 14px -2px rgba(0, 0, 0, 0.1);
        padding: 16px;
        >p {
          color: rgba(16, 16, 16, 1);
          font-size: 18px;
          margin-bottom: 40px;
          font-weight: bold;
        }
        >div {
          height: 30px;
          align-items: center;
          display: flex;
          padding-bottom: 24px;
          margin-top: 24px;
          border-bottom: 1px solid rgba(229, 229, 229, 1);
          >p {
            border-radius: 15px;
            background-color: rgba(136, 176, 75, 0.1);
            color: rgba(136, 176, 75, 1);
            font-size: 14px;
            width: 70px;
            height: 30px;
            text-align: center;
            cursor: pointer;
            line-height: 30px;
            &:hover {
              background-color: rgba(136, 176, 75, 0.05);
            }
          }
        }
      }
    }
  }
</style>