前端+AI项目学习笔记day12

三十、咨询记录详情定义弹窗获取每行数据获取会话消息列表定义接口引入接口调用显示对话列表样式style langscss 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 :formItemformItem searchhandleSearch / /div el-table :datatableData stylewidth: 100% el-table-column propid label用户ID width80 / el-table-column label会话ID width80 template #defaultscope el-avatar{{ scope.row.nickname }}/el-avatar /template /el-table-column el-table-column propdiaryDate label记录日期 width120 / el-table-column label情绪评分 template #defaultscope el-rate :model-valuescope.row.moodScore :max10 disabled / /template /el-table-column el-table-column label生活指标 width120 template #defaultscope div p 睡眠{{ scope.row.sleepQuality }} / 5 /p p 压力{{ scope.row.stressLevel }} / 5 /p /div /template /el-table-column el-table-column propemotionTriggers label情绪触发因素 width120 / el-table-column propdiaryContent label日记内容 width250 / el-table-column label操作 width240 fixedright template #defaultscope el-button typeprimary text详情/el-button el-button typedanger text删除/el-button /template /el-table-column /el-table el-pagination stylemargin-top: 25px; :page-sizepagination.size layoutprev, pager, next :totalpagination.total changehandleChange / /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