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 }}
-
-
- 改进建议
-
-
-
-
-
-
-
+
+
+
+
+
@@ -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