前端+AI项目学习笔记day12

三十、咨询记录详情

定义弹窗

获取每行数据

获取会话消息列表

定义接口

引入接口

调用

显示对话列表

样式

<style lang="scss" scoped> .session-title { font-weight: 500; color: #333; margin-bottom: 4px; } .session-preview { font-size: 13px; color: #666; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .session-detail { max-height: 70vh; overflow-y: auto; .detail-header { margin-bottom: 20px; padding: 16px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef; } .detail-row { display: flex; align-items: center; margin-bottom: 8px; :last-child { margin-bottom: 0; } .detail-label { font-weight: 500; color: #495057; min-width: 80px; margin-right: 8px; } .detail-value { color: #333; } } } .messages-container { margin-top: 20px; .messages-header { margin-bottom: 16px; h4 { margin: 0; color: #333; font-size: 16px; font-weight: 500; } } .messages-list { max-height: 400px; overflow-y: auto; border: 1px solid #e9ecef; border-radius: 8px; padding: 16px; background: #fff; .message-item { margin-bottom: 12px; padding: 12px; border-radius: 8px; background: #f8f9fa; border: 1px solid #e9ecef; :last-child { margin-bottom: 0; } &.user-message { background: #e8f4fd; } &.ai-message { background: #f0f9f0; } } .message-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; .sender { font-weight: 500; color: #333; display: flex; align-items: center; gap: 4px; } .time { font-size: 12px; color: #999; } .message-content { color: #333; line-height: 1.6; white-space: pre-wrap; margin-top: 8px; font-size: 14px; } } } } </style>

添加loading

关闭按钮

三十一、情绪日志列表

定义接口

引入

<template> <div> <PageHead title="情绪日志" /> <TableSearch :formItem="formItem" @search="handleSearch" /> </div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="id" label="用户ID" width="80" /> <el-table-column label="会话ID" width="80"> <template #default="scope"> <el-avatar>{{ scope.row.nickname }}</el-avatar> </template> </el-table-column> <el-table-column prop="diaryDate" label="记录日期" width="120" /> <el-table-column label="情绪评分"> <template #default="scope"> <el-rate :model-value="scope.row.moodScore" :max="10" disabled /> </template> </el-table-column> <el-table-column label="生活指标" width="120"> <template #default="scope"> <div> <p> 睡眠：{{ scope.row.sleepQuality }} / 5 </p> <p> 压力：{{ scope.row.stressLevel }} / 5 </p> </div> </template> </el-table-column> <el-table-column prop="emotionTriggers" label="情绪触发因素" width="120" /> <el-table-column prop="diaryContent" label="日记内容" width="250" /> <el-table-column label="操作" width="240" fixed="right"> <template #default="scope"> <el-button type="primary" text>详情</el-button> <el-button type="danger" text>删除</el-button> </template> </el-table-column> </el-table> <el-pagination style="margin-top: 25px;" :page-size="pagination.size" layout="prev, pager, next" :total="pagination.total" @change="handleChange" /> </template> <script setup> import { ref,onMounted,reactive } from 'vue' import { getEmotionalPage } from '@/api/admin' import PageHead from '@/components/PageHead.vue' import TableSearch from '@/components/TableSearch.vue' const formItem = [ {comp:'input',prop:'userId',label:'用户ID',placeholder:'请输入用户ID'}, {comp:'select',prop:'moodScoreRange',label:'情绪评分',placeholder:'请选择评分',options:[ {label:'低分（1-3）',value:'1-3'}, {label:'中分（4-6）',value:'4-6'}, {label:'高分（7-10）',value:'7-10'} ]} ] //列表 const tableData = ref([]) //分页参数 const pagination = reactive({ currentPage: 1, size: 10, total: 0 }) const handleSearch = async (formData) => { const params = { ...formData, ...pagination } const {records,total} = await getEmotionalPage(params) tableData.value = records pagination.total = total } //分页 const handleChange = (page) => { pagination.currentPage = page handleSearch() } onMounted(() => { handleSearch() }) </script>