diff --git a/src/styles/global.scss b/src/styles/global.scss new file mode 100644 index 0000000..ed3eb12 --- /dev/null +++ b/src/styles/global.scss @@ -0,0 +1,19 @@ +.typing-indicator { + span { + width: 4px; + height: 4px; + background: var(--el-color-primary); + border-radius: 50%; + display: inline-block; + margin: 0 1px; + animation: bounce 1.4s infinite ease-in-out; + } + + span:nth-child(1) { animation-delay: -0.32s; } + span:nth-child(2) { animation-delay: -0.16s; } +} + +@keyframes bounce { + 0%, 80%, 100% { transform: scale(0.8); } + 40% { transform: scale(1.2); } +} \ No newline at end of file diff --git a/src/views/chat/ChatInterface.vue b/src/views/chat/ChatInterface.vue index 6bdc6be..ad6937a 100644 --- a/src/views/chat/ChatInterface.vue +++ b/src/views/chat/ChatInterface.vue @@ -26,18 +26,17 @@
{{ message.question }}
- - - 改进建议 - - - - - - - +
+ + +
+
@@ -65,6 +64,7 @@
+
@@ -117,8 +117,9 @@ import { useChatStore } from '@/store/chat' import ChatHeader from '@/views/chat/components/ChatHeader.vue' import ChatInput from '@/views/chat/components/ChatInput.vue' import VoiceInput from '@/views/chat/components/VoiceInput.vue' +import EvaluationButton from '@/views/chat/components/EvaluationButton.vue' import { ElTag, ElButton, ElAvatar, ElIcon } from 'element-plus' -import { CaretBottom, CaretRight, Microphone, ChatDotSquare } from '@element-plus/icons-vue' +import { Microphone, ChatDotSquare, Close } from '@element-plus/icons-vue' import userAvatarUrl from '@/assets/user.png'; import customAvatarUrl from '@/assets/custom.png'; @@ -635,41 +636,15 @@ html.dark .background-section .background-content { } } } +} - .evaluation-toggle-btn { - padding: 6px 0; // Adjust padding for link button - font-size: 13px; - - .el-icon { - margin-left: 4px; - vertical-align: middle; - } - - .evaluation-icon { - &.typing-indicator { - padding: 0; - display: inline-flex; - align-items: center; - gap: 2px; - margin-left: 4px; - vertical-align: middle; - - span { - width: 4px; - height: 4px; - background: var(--el-color-primary); - border-radius: 50%; - animation: bounce 1.4s infinite ease-in-out; - - &:nth-child(1) { animation-delay: -0.32s; } - &:nth-child(2) { animation-delay: -0.16s; } - } - } - } - } +.message-wrapper.user .message-text-wrapper { + display: flex; + align-items: center; } .evaluation-section { + position: relative; margin-top: 12px; font-size: 14px; background: var(--el-bg-color); @@ -678,7 +653,6 @@ html.dark .background-section .background-content { box-shadow: var(--el-box-shadow-light); max-width: 100%; border: 1px solid var(--el-border-color-lighter); - position: relative; .evaluation-content { padding: 16px 24px 16px 16px; @@ -745,6 +719,21 @@ html.dark .background-section .background-content { } } +.evaluation-close-btn { + position: absolute; + top: 8px; + right: 8px; + z-index: 2; + font-size: 14px; + background: transparent; + border: none; + color: var(--el-text-color-primary); + transition: color 0.2s; +} +.evaluation-close-btn:hover { + color: var(--el-color-primary); +} + .input-area-wrapper { display: flex; align-items: flex-end; @@ -948,4 +937,16 @@ html.dark .background-section .background-content { 0%, 80%, 100% { transform: scale(0.8); } 40% { transform: scale(1.2); } } + +.message-actions { + opacity: 0; + pointer-events: none; + transition: opacity 0.2s; +} + +.message-content:hover .message-actions, +.message-content:focus-within .message-actions { + opacity: 1; + pointer-events: auto; +} \ No newline at end of file diff --git a/src/views/chat/components/EvaluationButton.vue b/src/views/chat/components/EvaluationButton.vue new file mode 100644 index 0000000..657e813 --- /dev/null +++ b/src/views/chat/components/EvaluationButton.vue @@ -0,0 +1,51 @@ + + + + + \ No newline at end of file