ai应用对话预览

src/views/Student/components/AIWorkModal.vue

@@ -1,14 +1,28 @@
 <template>
   <Modal :visible="visible" :width="720" :closeButton="true" @update:visible="val => emit('update:visible', val)">
-    <div>
-      <h3>AI 应用作业</h3>
-      <pre>{{ work }}</pre>
-    </div>
+    <div class="sddd_box">
+				<template v-for="item in messageList" :key="item.uid">
+					<div>
+						<div class="na_m_item" v-if="item.role == 'user' && item.content">
+							<div class="na_m_i_name">
+								{{ item.sender }}
+							</div>
+							<div class="na_m_i_content" v-html="item.content"></div>
+						</div>
+						<div class="na_m_item" v-if="item.role == 'assistant' && item.content">
+							<div class="na_m_i_name aiName">
+								{{ item.sender }}
+							</div>
+							<div class="na_m_i_content" v-html="item.content"></div>
+						</div>
+					</div>
+				</template>
+			</div>
   </Modal>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, watch, ref} from 'vue'
 import Modal from '@/components/Modal.vue'
 
 const props = defineProps<{
@@ -24,4 +38,64 @@ const visible = computed({
   get: () => props.visible,
   set: (v: boolean) => emit('update:visible', v)
 })
-</script> 
+
+const messageList = ref<any[]>([])
+
+watch(() => props.visible, () => {
+  if (props.work && props.visible) {
+    const messageListRaw = JSON.parse(props.work.content)
+    const messages: any[] = messageListRaw.flatMap((item: any) => item.messages)
+    messageList.value = messages
+  }
+})
+</script>
+
+
+<style  scoped>
+.sddd_box {
+	width: 100%;
+	height: 60vh;
+	overflow: auto;
+	background-color: #f4f4f4;
+	box-sizing: border-box;
+	padding: 20px;
+}
+
+.sddd_bottom {
+	display: flex;
+	margin-top: 20px;
+	justify-content: flex-end;
+}
+
+.na_m_item {
+	width: 100%;
+	height: auto;
+	margin: 10px 0;
+}
+
+.na_m_i_name {
+	width: fit-content;
+	max-width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 10px 10px;
+	display: flex;
+	align-items: center;
+	border-radius: 10px 10px 0 0;
+	background-color: #9747ff;
+	color: #fff;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+.aiName {
+	background-color: #0560fc;
+}
+.na_m_i_content {
+	padding: 10px;
+	border: solid 1px #e7e7e7;
+	box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
+	border-radius: 0 0 12px 12px;
+	background-color: #fff;
+}
+</style>