Переглянути джерело

style: 将评价固定展示

zhouyuhao 6 місяців тому
батько
коміт
efe0b20af6
2 змінених файлів з 18 додано та 16 видалено
  1. 3 0
      src/styles/reset.scss
  2. 15 16
      src/views/AIRobotChat/src/AIRobotChat.vue

+ 3 - 0
src/styles/reset.scss

@@ -204,6 +204,9 @@ div.markdown-body ul {
   & > ul {
     margin-left: 0;
   }
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .markdown-body blockquote {

+ 15 - 16
src/views/AIRobotChat/src/AIRobotChat.vue

@@ -48,7 +48,7 @@ const isShowFooterShadow = ref(false)
 // 是否显示header的底部阴影
 const isShowHeaderShadow = ref(false)
 
-const loadingAnswer = ref(false) // 是否正在加载答案
+const loadingAnswer = ref(false) // 是否正在请求答案
 interface MessageItem {
   id?: string // 唯一标识
   type: 'robot' | 'user'
@@ -96,7 +96,7 @@ const progressStatus = {
 
 const isShowTips = ref(false) // 是否展示提示信息
 
-const isShowLoadingDots = ref(false) // 是否展示加载点
+const isShowLoadingDots = ref(false) // 是否展示加载点(加载答案)
 const parseHtmlString = (data) => {
   if (!data) {
     isShowLoadingDots.value = false // 停止显示加载点
@@ -300,6 +300,13 @@ const handleFeedback = (index, feedback) => {
       }
     })
 }
+// 判断是否展示评价icon
+const shouldShowFeedback = (msg, index) => {
+  if (index === messages.value.length - 1 && isShowLoadingDots.value) {
+    return false
+  }
+  return msg.type === 'robot' && msg.isAnswer
+}
 
 const emit = defineEmits(['close'])
 // 关闭聊天窗口
@@ -417,7 +424,7 @@ defineExpose({
           "
         ></LoadingDots>
         <!-- 评价  -->
-        <div class="review" v-if="msg.isShowFeedback && msg.isAnswer && msg.type === 'robot'">
+        <div class="review" v-if="shouldShowFeedback(msg, index)">
           <el-button
             v-if="msg.feedback !== 'Cood'"
             class="el-button--text"
@@ -427,7 +434,7 @@ defineExpose({
           </el-button>
           <div v-if="msg.feedback === 'Cood'" style="width: 16px; text-align: center">
             <span
-              style="color: var(--color-theme); font-size: 14px"
+              style="color: var(--color-theme)"
               class="font_family icon-icon_good__filled_b"
             ></span>
           </div>
@@ -440,7 +447,7 @@ defineExpose({
           </el-button>
           <div v-if="msg.feedback === 'Not Good'" style="width: 16px; text-align: center">
             <span
-              style="color: var(--color-theme); font-size: 14px"
+              style="color: var(--color-theme)"
               class="font_family icon-icon_notgood__filled_b"
             ></span>
           </div>
@@ -606,22 +613,15 @@ defineExpose({
     .message-item {
       position: relative;
       display: inline-block;
-      padding: 11px 16px;
+      padding: 12px 16px;
       margin-bottom: 7px;
       border-radius: 12px;
       background-color: var(--scoring-bg-color);
       .review {
-        position: absolute;
-        bottom: -24px;
-        left: 0;
         display: flex;
         align-items: center;
-        gap: 13px;
-        width: 100%;
-        height: 30px;
-        margin-top: 10px;
-        padding-left: 30px;
-        padding-top: 5px;
+        gap: 16px;
+        margin-top: 12px;
 
         button.el-button + .el-button {
           margin-left: 0px;
@@ -650,7 +650,6 @@ defineExpose({
         width: 16px;
         span {
           color: var(--color-neutral-2);
-          font-size: 14px;
         }
         &:hover {
           span {