|
|
|
@ -1,11 +1,8 @@ |
|
|
|
<template> |
|
|
|
<div |
|
|
|
v-if="!isMobile" |
|
|
|
class="history-record-container" |
|
|
|
:class="{ |
|
|
|
containerNoMobile: !isMobile && isCollapsed, |
|
|
|
|
|
|
|
containerIsMobile: isMobile && isCollapsed, |
|
|
|
|
|
|
|
collapsed: !isCollapsed, |
|
|
|
}" |
|
|
|
> |
|
|
|
@ -13,22 +10,39 @@ |
|
|
|
<div v-if="isCollapsed" class="collapsed-container"> |
|
|
|
<img |
|
|
|
class="collapsed-icon" |
|
|
|
src="src/assets/img/Selectmodel/机器人手机.png" |
|
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/74430a4ebbb67aefc713bf694147fb2a.png" |
|
|
|
alt="icon" |
|
|
|
/> |
|
|
|
<img |
|
|
|
class="collapsed-toggle-btn" |
|
|
|
@click="openHistory" |
|
|
|
src=" https://d31zlh4on95l9h.cloudfront.net/images/b2d784f8607ab65081f5289459581bfe.png" |
|
|
|
alt="icon" |
|
|
|
/> |
|
|
|
<div class="collapsed-toggle-btn" @click="openHistory"> |
|
|
|
<el-icon><ArrowRight /></el-icon> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="isCollapsed" class="collapsed-bottom-container"> |
|
|
|
<div class="collapsed-bottom-btn" @click="handleFeedbackClick"> |
|
|
|
<img |
|
|
|
class="collapsed-bottom-feedback" |
|
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/41d6e25c19466718d462bcee2f050140.png" |
|
|
|
alt="icon" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="collapsed-bottom-btn" @click="handleAnnouncementClick"> |
|
|
|
<img |
|
|
|
class="collapsed-bottom-announcement" |
|
|
|
@click="openHistory" |
|
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/c51c7fbb68671729801fb10d65bd7789.png" |
|
|
|
alt="icon" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 历史记录内容 --> |
|
|
|
<div class="history-content" v-show="!isCollapsed"> |
|
|
|
<!-- 折叠/展开按钮 --> |
|
|
|
<div class="toggle-btn" @click="closeHistory"> |
|
|
|
<el-icon><ArrowLeft /></el-icon> |
|
|
|
</div> |
|
|
|
<!-- 标题 --> |
|
|
|
<div class="history-header"> |
|
|
|
<div class="head-container"> |
|
|
|
<!-- 标题 --> |
|
|
|
<div class="history-actions"> |
|
|
|
<img |
|
|
|
src="/src/assets/img/homePage/logo.png" |
|
|
|
@ -36,8 +50,14 @@ |
|
|
|
class="logo-img" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<!-- 折叠/展开按钮 --> |
|
|
|
<img |
|
|
|
class="toggle-btn" |
|
|
|
@click="closeHistory" |
|
|
|
src=" https://d31zlh4on95l9h.cloudfront.net/images/b2d784f8607ab65081f5289459581bfe.png" |
|
|
|
alt="icon" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 历史记录列表 --> |
|
|
|
<div class="history-list"> |
|
|
|
<div |
|
|
|
@ -80,7 +100,118 @@ |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 空状态 --> |
|
|
|
<div v-if="filteredHistory.length === 0" class="empty-state"> |
|
|
|
<div class="empty-icon"> |
|
|
|
<el-icon class="documentDelete"><DocumentDelete /></el-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 class="bottom-container"> |
|
|
|
<div class="bottom-btn" @click="handleFeedbackClick"> |
|
|
|
<img |
|
|
|
class="bottom-feedback" |
|
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/41d6e25c19466718d462bcee2f050140.png" |
|
|
|
alt="icon" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="bottom-btn" @click="handleAnnouncementClick"> |
|
|
|
<img |
|
|
|
class="bottom-announcement" |
|
|
|
@click="openHistory" |
|
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/c51c7fbb68671729801fb10d65bd7789.png" |
|
|
|
alt="icon" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div |
|
|
|
v-else |
|
|
|
class="mobile-history-record-container" |
|
|
|
:class="{ |
|
|
|
mobileCollapsed: !isCollapsed, |
|
|
|
}" |
|
|
|
> |
|
|
|
<!-- 历史记录内容 --> |
|
|
|
<div class="history-content" v-show="!isCollapsed"> |
|
|
|
<div class="mobile-head-container"> |
|
|
|
<!-- 折叠/展开按钮 --> |
|
|
|
<img |
|
|
|
class="mobile-toggle-btn" |
|
|
|
@click="closeHistory" |
|
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/37fe3d79a8a700f6c674c9f0e7af066b.png" |
|
|
|
alt="icon" |
|
|
|
/> |
|
|
|
<!-- 标题 --> |
|
|
|
<div class="mobile-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 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"> |
|
|
|
@ -104,6 +235,26 @@ |
|
|
|
<p class="empty-text">暂无历史记录</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="mobile-bottom-container"> |
|
|
|
<div class="mobile-bottom-btn" @click="handleFeedbackClick"> |
|
|
|
<img |
|
|
|
class="mobile-bottom-feedback" |
|
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/41d6e25c19466718d462bcee2f050140.png" |
|
|
|
alt="icon" |
|
|
|
/> |
|
|
|
<div class="mobile-bottom-text">用户反馈</div> |
|
|
|
</div> |
|
|
|
<div class="mobile-bottom-btn" @click="handleAnnouncementClick"> |
|
|
|
<img |
|
|
|
class="mobile-bottom-announcement" |
|
|
|
@click="openHistory" |
|
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/c51c7fbb68671729801fb10d65bd7789.png" |
|
|
|
alt="icon" |
|
|
|
/> |
|
|
|
<div class="mobile-bottom-text">公告</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
@ -124,7 +275,13 @@ const props = defineProps({ |
|
|
|
}); |
|
|
|
|
|
|
|
// Emits |
|
|
|
const emit = defineEmits(["selectRecord", "recordAdded", "startNewChat"]); |
|
|
|
const emit = defineEmits([ |
|
|
|
"selectRecord", |
|
|
|
"recordAdded", |
|
|
|
"startNewChat", |
|
|
|
"showAnnouncement", |
|
|
|
"showFeedback", |
|
|
|
]); |
|
|
|
|
|
|
|
// 响应式数据 |
|
|
|
const isCollapsed = ref(false); |
|
|
|
@ -145,13 +302,11 @@ const toggleCollapse = () => { |
|
|
|
|
|
|
|
const openHistory = () => { |
|
|
|
isCollapsed.value = false; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const closeHistory = () => { |
|
|
|
isCollapsed.value = true; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
const selectRecord = (record) => { |
|
|
|
selectedRecordId.value = record.id; |
|
|
|
@ -253,6 +408,16 @@ const loadFromLocalStorage = () => { |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 处理公告按钮点击 |
|
|
|
const handleAnnouncementClick = () => { |
|
|
|
emit("showAnnouncement"); |
|
|
|
}; |
|
|
|
|
|
|
|
// 处理用户反馈按钮点击 |
|
|
|
const handleFeedbackClick = () => { |
|
|
|
emit("showFeedback"); |
|
|
|
}; |
|
|
|
|
|
|
|
// 暴露方法和状态给父组件 |
|
|
|
defineExpose({ |
|
|
|
addRecord, |
|
|
|
@ -278,40 +443,64 @@ watch( |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.history-record-container { |
|
|
|
min-width: 40px; |
|
|
|
width: 3%; |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
bottom: 0; |
|
|
|
|
|
|
|
background: rgb(4, 47, 144); |
|
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
|
border-right: 1px solid rgba(255, 255, 255, 0.1); |
|
|
|
backdrop-filter: blur(10px); |
|
|
|
z-index: 1000; |
|
|
|
transition: width 0.3s ease; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
/* justify-content: center; */ |
|
|
|
} |
|
|
|
|
|
|
|
.containerNoMobile { |
|
|
|
width: 40px; |
|
|
|
} |
|
|
|
|
|
|
|
.containerIsMobile { |
|
|
|
.mobile-history-record-container { |
|
|
|
width: 0px; |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
bottom: 0; |
|
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
|
border-right: 1px solid rgba(255, 255, 255, 0.1); |
|
|
|
backdrop-filter: blur(10px); |
|
|
|
z-index: 1000; |
|
|
|
transition: width 0.3s ease; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.history-record-container.collapsed { |
|
|
|
.collapsed { |
|
|
|
width: 300px; |
|
|
|
} |
|
|
|
|
|
|
|
.mobileCollapsed { |
|
|
|
width: 80vw; |
|
|
|
} |
|
|
|
|
|
|
|
.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); |
|
|
|
transform: rotate(180deg); |
|
|
|
border-radius: 6px; |
|
|
|
color: white; |
|
|
|
cursor: pointer; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
transition: all 0.3s ease; |
|
|
|
z-index: 10; |
|
|
|
} |
|
|
|
|
|
|
|
.mobile-toggle-btn { |
|
|
|
width: 10%; |
|
|
|
height: auto; |
|
|
|
border-radius: 6px; |
|
|
|
color: white; |
|
|
|
cursor: pointer; |
|
|
|
@ -328,28 +517,24 @@ watch( |
|
|
|
} |
|
|
|
|
|
|
|
.collapsed-container { |
|
|
|
position: fixed; |
|
|
|
right: 4px; |
|
|
|
top: 5%; |
|
|
|
transform: translateY(-50%); |
|
|
|
width: 100%; |
|
|
|
margin-top: 60px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
gap: 8px; |
|
|
|
gap: 20px; |
|
|
|
z-index: 1000; |
|
|
|
} |
|
|
|
|
|
|
|
.collapsed-icon { |
|
|
|
width: 24px; |
|
|
|
height: 24px; |
|
|
|
width: 80%; |
|
|
|
height: auto; |
|
|
|
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); |
|
|
|
width: 80%; |
|
|
|
height: auto; |
|
|
|
border-radius: 6px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
@ -364,14 +549,69 @@ watch( |
|
|
|
border-color: rgba(255, 255, 255, 0.3); |
|
|
|
} |
|
|
|
|
|
|
|
.collapsed-bottom-container { |
|
|
|
width: 100%; |
|
|
|
height: 16%; |
|
|
|
margin-top: auto; |
|
|
|
background-color: rgba(106, 0, 255, 0.2); |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
gap: 30px; |
|
|
|
z-index: 1000; |
|
|
|
} |
|
|
|
|
|
|
|
.collapsed-bottom-btn { |
|
|
|
width: 100%; |
|
|
|
/* height: 50%; */ |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
/* align-items: center; */ |
|
|
|
} |
|
|
|
|
|
|
|
.collapsed-bottom-feedback { |
|
|
|
width: 60%; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
.collapsed-bottom-feedback:hover { |
|
|
|
transform: scale(1.1); |
|
|
|
} |
|
|
|
.collapsed-bottom-announcement { |
|
|
|
width: 60%; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
.collapsed-bottom-announcement:hover { |
|
|
|
transform: scale(1.1); |
|
|
|
} |
|
|
|
.history-content { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
padding: 20px; |
|
|
|
width: 100%; |
|
|
|
/* padding: 20px; */ |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.head-container { |
|
|
|
margin-top: 20%; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
.mobile-head-container { |
|
|
|
padding: 5px 0px 5px 20px; |
|
|
|
/* margin-left: 20px; */ |
|
|
|
/* width: 100%; */ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
border-bottom: 2px solid #414141; |
|
|
|
/* justify-content: center; */ |
|
|
|
} |
|
|
|
|
|
|
|
.history-header { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
@ -383,12 +623,20 @@ watch( |
|
|
|
|
|
|
|
.history-actions { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.mobile-history-actions { |
|
|
|
margin-left: auto; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.logo-img { |
|
|
|
height: auto; |
|
|
|
width: 80%; |
|
|
|
width: 70%; |
|
|
|
object-fit: contain; |
|
|
|
} |
|
|
|
|
|
|
|
@ -564,11 +812,82 @@ watch( |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom-container { |
|
|
|
width: 100%; |
|
|
|
height: 16%; |
|
|
|
margin-top: auto; |
|
|
|
background-color: rgba(106, 0, 255, 0.2); |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.mobile-bottom-container { |
|
|
|
border-top: 2px solid #414141; |
|
|
|
width: 100%; |
|
|
|
height: 16%; |
|
|
|
margin-top: auto; |
|
|
|
background-color: rgba(106, 0, 255, 0.2); |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom-btn { |
|
|
|
width: 50%; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.mobile-bottom-btn { |
|
|
|
width: 100%; |
|
|
|
height: 50%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom-feedback { |
|
|
|
width: 30%; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.mobile-bottom-feedback { |
|
|
|
margin-left: 20px; |
|
|
|
height: 60%; |
|
|
|
width: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom-feedback:hover { |
|
|
|
transform: scale(1.2); |
|
|
|
} |
|
|
|
|
|
|
|
.bottom-announcement { |
|
|
|
width: 30%; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.mobile-bottom-announcement { |
|
|
|
margin-left: 20px; |
|
|
|
height: 60%; |
|
|
|
width: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.mobile-bottom-text { |
|
|
|
color: white; |
|
|
|
margin-left: 10px; |
|
|
|
font-size: 1.1rem; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom-announcement:hover { |
|
|
|
transform: scale(1.2); |
|
|
|
} |
|
|
|
|
|
|
|
/* 移动端适配 */ |
|
|
|
@media (max-width: 768px) { |
|
|
|
|
|
|
|
.history-content { |
|
|
|
padding: 15px; |
|
|
|
/* padding: 15px; */ |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
no99
1 week ago
