aiwen/src/components/info-item/index.vue

<script setup lang="ts">
import type { type_dyaw_xlfw_zxhd_log } from '~/types';
import { formatTimestamp, formatTimeToShow } from '~/utils/time';
const props = defineProps<{
  left: boolean,
  virtualName?: string,
  w: number,
  d: type_dyaw_xlfw_zxhd_log
}>()


const id2name = {
  [props.d.dxzl_stu_user_id]: props.virtualName ?? props.d.dxzl_stu_user_realname,
  [props.d.dxzl_tea_user_id]: props.d.dxzl_tea_user_realname,
}


const showMsg = $computed(() => decodeURIComponent(props.d.dxzl_last_msg_content!))
</script>

<template>
  <div class="w-full" :class="left ? 'left' : 'right'">
    <div class="flex items-end r_flex-row-reverse gap-4">
      <div>{{ id2name[d.create_user_id] }}</div>
      <div class="text-sm text-hex-AFB2B6">{{ formatTimeToShow(props.d.create_dateline * 1000) }}</div>
    </div>
    <div class="flex mt-2 r_flex-row-reverse">
      <div class=" py-10px px-25px rounded-3xl min-h-44px bg-white text_wrapper" :style="`max-width:${props.w}px`"
        v-html="showMsg">
      </div>
    </div>

  </div>
</template>

<style scoped lang="scss">
.text_wrapper :deep(p) {
  margin: 0;
  padding: 0;
  word-wrap: break-word;
}


.left {
  .text_wrapper {
    border-radius: 2px 24px 24px 24px;
  }
}

.right {
  .r_flex-row-reverse {
    flex-direction: row-reverse;
  }

  .text_wrapper {
    background-color: #F9A7BE;
    color: white;
    border-radius: 24px 2px 24px 24px;
  }
}
</style>