msg-row.vue

<template>
  <div class="msg">
    <div class="msg-ctx">
        <div class="msg-ctx-user" :class="{ 'msg-ctx-user__role': data.role === 'user' }">
            <template v-if="data.role === 'user'">
                你
            </template>
            <img v-else src="../assets/ChatGPT.svg" alt="">
        </div>
        <div class="msg-ctx-msg">
            <template v-if="data.loading">
                loading
            </template>
            <template v-else>
                <vue-markdown-it :source="data.content"/>
            </template>
        </div>
    </div>
  </div>
</template>

<script>
import VueMarkdownIt from 'vue3-markdown-it'
import 'highlight.js/styles/a11y-dark.css'

export default {
    components: {
        VueMarkdownIt
    },
    props: {
        data: {
            type: Object,
            default: () => {
                return {
                    loading: true
                }
            }
        }
    }
}
</script>

<style lang="less">
.msg {
    width: 100%;
    &-ctx {
        box-sizing: border-box;
        padding: 24px;
        display: flex;
        max-width: 760px;
        margin: 0 auto;
        &-user {
            display: flex;
            color: #FFF;
            align-items: center;
            justify-content: center;
            background: #F73048;
            border-radius: 3px;
            width: 36px;
            height: 36px;
            & > img {
                width: 24px;
                height: 24px;
            }
        }
        &-user__role {
            background: #507999;
        }
        &-msg {
            margin: 0 0 0 20px;
            flex: 1;
            color: #FFF;
            font-size: 16px;
            line-height: 32px;
        }
    }
}
.msg:nth-child(even) {
    background: rgba(70, 72, 84, 1);
}
</style>