宋杰
2 weeks ago
3 changed files with 614 additions and 19 deletions
-
517src/views/components/HistoryRecord.vue
-
53src/views/components/emotionalBottomRadar.vue
-
63src/views/homePage.vue
@ -0,0 +1,517 @@ |
|||
<template> |
|||
<div class="history-record-container" :class="{ 'collapsed': isCollapsed }"> |
|||
<!-- 收起状态的展开按钮和图标 --> |
|||
<div v-if="isCollapsed" class="collapsed-container"> |
|||
<img class="collapsed-icon" src="src/assets/img/Selectmodel/机器人手机.png" alt="icon" /> |
|||
<div class="collapsed-toggle-btn" @click="toggleCollapse"> |
|||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
|||
</svg> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 历史记录内容 --> |
|||
<div class="history-content" v-show="!isCollapsed"> |
|||
<!-- 折叠/展开按钮 --> |
|||
<div class="toggle-btn" @click="toggleCollapse"> |
|||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
|||
</svg> |
|||
</div> |
|||
<!-- 标题 --> |
|||
<div class="history-header"> |
|||
<div class="history-actions"> |
|||
<img src="/src/assets/img/homePage/logo.png" alt="Logo" class="logo-img" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 历史记录列表 --> |
|||
<div class="history-list"> |
|||
<div |
|||
v-for="(record, index) in filteredHistory" |
|||
:key="record.id" |
|||
class="history-item" |
|||
@click="selectRecord(record)" |
|||
:class="{ 'active': selectedRecordId === record.id }" |
|||
> |
|||
<div class="record-content"> |
|||
<div class="record-type"> |
|||
<span class="type-badge" :class="record.type"> |
|||
{{ record.type === 'AIchat' ? '夺宝奇兵' : 'AI情绪' }} |
|||
</span> |
|||
</div> |
|||
<div class="record-text">{{ record.question }}</div> |
|||
<div class="record-time">{{ formatTime(record.timestamp) }}</div> |
|||
</div> |
|||
<div class="record-actions"> |
|||
<button class="delete-btn" @click.stop="deleteRecord(record.id)" title="删除"> |
|||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
|||
</svg> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 空状态 --> |
|||
<div v-if="filteredHistory.length === 0" class="empty-state"> |
|||
<div class="empty-icon"> |
|||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 1H5C3.89 1 3 1.89 3 3V21C3 22.1 3.89 23 5 23H19C20.1 23 21 22.1 21 21V9M19 9H14V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> |
|||
</svg> |
|||
</div> |
|||
<p class="empty-text">暂无历史记录</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, computed, onMounted, watch } from 'vue' |
|||
|
|||
// Props |
|||
const props = defineProps({ |
|||
currentType: { |
|||
type: String, |
|||
default: 'AIchat' // 'AIchat' 或 'AiEmotion' |
|||
} |
|||
}) |
|||
|
|||
// Emits |
|||
const emit = defineEmits(['selectRecord', 'recordAdded', 'startNewChat']) |
|||
|
|||
// 响应式数据 |
|||
const isCollapsed = ref(false) |
|||
const selectedRecordId = ref(null) |
|||
const historyRecords = ref([]) |
|||
|
|||
// 计算属性 |
|||
const filteredHistory = computed(() => { |
|||
return historyRecords.value |
|||
}) |
|||
|
|||
// 方法 |
|||
const toggleCollapse = () => { |
|||
isCollapsed.value = !isCollapsed.value |
|||
// 保存折叠状态到本地存储 |
|||
localStorage.setItem('historyRecordCollapsed', isCollapsed.value) |
|||
} |
|||
|
|||
const addRecord = (question, type = props.currentType) => { |
|||
const newRecord = { |
|||
id: Date.now() + Math.random(), |
|||
question: question.trim(), |
|||
type: type, |
|||
timestamp: new Date().toISOString(), |
|||
answer: '' // 可以后续添加回答内容 |
|||
} |
|||
|
|||
// 添加到列表开头 |
|||
historyRecords.value.unshift(newRecord) |
|||
|
|||
// 限制历史记录数量（最多保存100条） |
|||
if (historyRecords.value.length > 100) { |
|||
historyRecords.value = historyRecords.value.slice(0, 100) |
|||
} |
|||
|
|||
// 保存到本地存储 |
|||
saveToLocalStorage() |
|||
|
|||
emit('recordAdded', newRecord) |
|||
} |
|||
|
|||
const selectRecord = (record) => { |
|||
selectedRecordId.value = record.id |
|||
emit('selectRecord', record) |
|||
} |
|||
|
|||
const deleteRecord = (recordId) => { |
|||
const index = historyRecords.value.findIndex(record => record.id === recordId) |
|||
if (index > -1) { |
|||
historyRecords.value.splice(index, 1) |
|||
saveToLocalStorage() |
|||
|
|||
// 如果删除的是当前选中的记录，清除选中状态 |
|||
if (selectedRecordId.value === recordId) { |
|||
selectedRecordId.value = null |
|||
} |
|||
} |
|||
} |
|||
|
|||
const clearHistory = () => { |
|||
if (confirm('确定要清空所有历史记录吗？')) { |
|||
historyRecords.value = [] |
|||
selectedRecordId.value = null |
|||
saveToLocalStorage() |
|||
} |
|||
} |
|||
|
|||
const formatTime = (timestamp) => { |
|||
const date = new Date(timestamp) |
|||
const now = new Date() |
|||
const diff = now - date |
|||
|
|||
// 小于1分钟 |
|||
if (diff < 60000) { |
|||
return '刚刚' |
|||
} |
|||
|
|||
// 小于1小时 |
|||
if (diff < 3600000) { |
|||
return `${Math.floor(diff / 60000)}分钟前` |
|||
} |
|||
|
|||
// 小于1天 |
|||
if (diff < 86400000) { |
|||
return `${Math.floor(diff / 3600000)}小时前` |
|||
} |
|||
|
|||
// 大于1天 |
|||
if (diff < 604800000) { |
|||
return `${Math.floor(diff / 86400000)}天前` |
|||
} |
|||
|
|||
// 超过一周，显示具体日期 |
|||
return date.toLocaleDateString('zh-CN', { |
|||
month: 'short', |
|||
day: 'numeric', |
|||
hour: '2-digit', |
|||
minute: '2-digit' |
|||
}) |
|||
} |
|||
|
|||
const saveToLocalStorage = () => { |
|||
localStorage.setItem('aiChatHistoryRecords', JSON.stringify(historyRecords.value)) |
|||
} |
|||
|
|||
const loadFromLocalStorage = () => { |
|||
try { |
|||
const saved = localStorage.getItem('aiChatHistoryRecords') |
|||
if (saved) { |
|||
historyRecords.value = JSON.parse(saved) |
|||
} |
|||
|
|||
// 加载折叠状态 |
|||
const collapsedState = localStorage.getItem('historyRecordCollapsed') |
|||
if (collapsedState !== null) { |
|||
isCollapsed.value = collapsedState === 'true' |
|||
} |
|||
} catch (error) { |
|||
console.error('加载历史记录失败:', error) |
|||
historyRecords.value = [] |
|||
} |
|||
} |
|||
|
|||
// 暴露方法和状态给父组件 |
|||
defineExpose({ |
|||
addRecord, |
|||
clearHistory, |
|||
isCollapsed |
|||
}) |
|||
|
|||
// 生命周期 |
|||
onMounted(() => { |
|||
loadFromLocalStorage() |
|||
}) |
|||
|
|||
// 监听历史记录变化，自动保存 |
|||
watch(historyRecords, () => { |
|||
saveToLocalStorage() |
|||
}, { deep: true }) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.history-record-container { |
|||
position: fixed; |
|||
left: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
width: 300px; |
|||
background: rgb(4, 47, 144); |
|||
border-right: 1px solid rgba(255, 255, 255, 0.1); |
|||
backdrop-filter: blur(10px); |
|||
z-index: 1000; |
|||
transition: transform 0.3s ease; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.history-record-container.collapsed { |
|||
transform: translateX(-260px); |
|||
} |
|||
|
|||
.toggle-btn { |
|||
position: absolute; |
|||
right: 15px; |
|||
top: 20px; |
|||
width: 32px; |
|||
height: 32px; |
|||
background: rgba(255, 255, 255, 0.1); |
|||
border: 1px solid rgba(255, 255, 255, 0.2); |
|||
border-radius: 6px; |
|||
color: white; |
|||
cursor: pointer; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
transition: all 0.3s ease; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.toggle-btn:hover { |
|||
background: rgba(255, 255, 255, 0.2); |
|||
border-color: rgba(255, 255, 255, 0.3); |
|||
} |
|||
|
|||
.collapsed-container { |
|||
position: fixed; |
|||
right: 4px; |
|||
top: 5%; |
|||
transform: translateY(-50%); |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
gap: 8px; |
|||
z-index: 1000; |
|||
} |
|||
|
|||
.collapsed-icon { |
|||
width: 24px; |
|||
height: 24px; |
|||
object-fit: contain; |
|||
} |
|||
|
|||
.collapsed-toggle-btn { |
|||
width: 32px; |
|||
height: 32px; |
|||
background: rgba(255, 255, 255, 0.1); |
|||
border: 1px solid rgba(255, 255, 255, 0.2); |
|||
border-radius: 6px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
transition: all 0.3s ease; |
|||
color: white; |
|||
} |
|||
|
|||
.collapsed-toggle-btn:hover { |
|||
background: rgba(255, 255, 255, 0.2); |
|||
border-color: rgba(255, 255, 255, 0.3); |
|||
} |
|||
|
|||
.history-content { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding: 20px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.history-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 20px; |
|||
padding-bottom: 15px; |
|||
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
|||
} |
|||
|
|||
.history-actions { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.logo-img { |
|||
height: auto; |
|||
width: 80%; |
|||
object-fit: contain; |
|||
} |
|||
|
|||
|
|||
.new-chat-btn { |
|||
width: 100%; |
|||
padding: 12px 16px; |
|||
border: none; |
|||
border-radius: 8px; |
|||
background: rgba(255, 255, 255, 0.1); |
|||
color: white; |
|||
font-size: 14px; |
|||
cursor: pointer; |
|||
transition: all 0.3s ease; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
gap: 8px; |
|||
} |
|||
|
|||
.new-chat-btn:hover { |
|||
background: rgba(255, 255, 255, 0.2); |
|||
transform: translateY(-1px); |
|||
} |
|||
|
|||
.new-chat-btn:active { |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
.history-list { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
scrollbar-width: thin; |
|||
scrollbar-color: rgba(255, 255, 255, 0.3) transparent; |
|||
} |
|||
|
|||
.history-list::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
|
|||
.history-list::-webkit-scrollbar-track { |
|||
background: transparent; |
|||
} |
|||
|
|||
.history-list::-webkit-scrollbar-thumb { |
|||
background: rgba(255, 255, 255, 0.3); |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
.history-list::-webkit-scrollbar-thumb:hover { |
|||
background: rgba(255, 255, 255, 0.5); |
|||
} |
|||
|
|||
.history-item { |
|||
background: rgba(255, 255, 255, 0.05); |
|||
border-radius: 8px; |
|||
margin-bottom: 8px; |
|||
padding: 12px; |
|||
cursor: pointer; |
|||
transition: all 0.2s ease; |
|||
border: 1px solid transparent; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.history-item:hover { |
|||
background: rgba(255, 255, 255, 0.1); |
|||
transform: translateX(4px); |
|||
} |
|||
|
|||
.history-item.active { |
|||
background: rgba(255, 255, 255, 0.15); |
|||
border-color: rgba(255, 255, 255, 0.3); |
|||
} |
|||
|
|||
.record-content { |
|||
flex: 1; |
|||
min-width: 0; |
|||
} |
|||
|
|||
.record-type { |
|||
margin-bottom: 6px; |
|||
} |
|||
|
|||
.type-badge { |
|||
display: inline-block; |
|||
padding: 2px 8px; |
|||
border-radius: 12px; |
|||
font-size: 10px; |
|||
font-weight: 500; |
|||
text-transform: uppercase; |
|||
} |
|||
|
|||
.type-badge.AIchat { |
|||
background: rgba(52, 152, 219, 0.2); |
|||
color: #3498db; |
|||
border: 1px solid rgba(52, 152, 219, 0.3); |
|||
} |
|||
|
|||
.type-badge.AiEmotion { |
|||
background: rgba(155, 89, 182, 0.2); |
|||
color: #9b59b6; |
|||
border: 1px solid rgba(155, 89, 182, 0.3); |
|||
} |
|||
|
|||
.record-text { |
|||
color: white; |
|||
font-size: 13px; |
|||
line-height: 1.4; |
|||
margin-bottom: 6px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.record-time { |
|||
color: rgba(255, 255, 255, 0.6); |
|||
font-size: 11px; |
|||
} |
|||
|
|||
.record-actions { |
|||
margin-left: 8px; |
|||
opacity: 0; |
|||
transition: opacity 0.2s ease; |
|||
} |
|||
|
|||
.history-item:hover .record-actions { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.delete-btn { |
|||
background: rgba(231, 76, 60, 0.2); |
|||
border: none; |
|||
border-radius: 4px; |
|||
color: #e74c3c; |
|||
padding: 4px; |
|||
cursor: pointer; |
|||
transition: all 0.2s ease; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.delete-btn:hover { |
|||
background: rgba(231, 76, 60, 0.3); |
|||
transform: scale(1.1); |
|||
} |
|||
|
|||
.empty-state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 40px 20px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.empty-icon { |
|||
margin-bottom: 16px; |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
.empty-icon svg { |
|||
color: white; |
|||
} |
|||
|
|||
.empty-text { |
|||
color: rgba(255, 255, 255, 0.6); |
|||
font-size: 14px; |
|||
margin: 0; |
|||
} |
|||
|
|||
/* 移动端适配 */ |
|||
@media (max-width: 768px) { |
|||
.history-record-container { |
|||
width: 280px; |
|||
} |
|||
|
|||
.history-record-container.collapsed { |
|||
transform: translateX(-240px); |
|||
} |
|||
|
|||
.history-content { |
|||
padding: 15px; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue