ai-error-assistant-mobile 0.0.7 → 0.0.9

package/components/demo/src/chat-tools.vue

@@ -21,46 +21,45 @@
           <img alt="" src="../static/zan-active.png" v-else/>
         </div>
       </el-tooltip>
-      <el-drawer
-          :visible.sync="drawer"
-          direction="btt"
-          size="80%"
-          :wrapperClosable="false"
-          :modal="false"
-          custom-class="feedback-drawer"
-      >
-        <div class="drawer-content">
-          <div class="drawer-header">
-            <div class="drawer-title">
-              你的反馈将 <br/>
-              帮助职教一问优化进步
-            </div>
-          </div>
-          <div class="error-list">
-            <div class="section-title">请选择问题类型</div>
-            <el-checkbox-group v-model="errors" class="checkbox-group">
-              <el-checkbox v-for="item in errorList"
-                           :key="item.code"
-                           :label="item.code"
-                           border
-                           class="check">
-                {{ item.name }}
-              </el-checkbox>
-            </el-checkbox-group>
-            <div class="section-title">其他问题描述</div>
-            <el-input v-model="input"
-                      :rows="4"
-                      maxlength="30"
-                      show-word-limit
-                      placeholder="请输入其他问题描述（选填）"
-                      resize="none"
-                      type="textarea"/>
-            <div class="sumit-button">
-              <el-button type="primary" :disabled="canSubmit" @click="doCai(listData)">提交反馈</el-button>
-            </div>
-          </div>
-        </div>
-      </el-drawer>
+          <el-drawer
+                :visible.sync="drawer"
+                direction="btt"
+                size="80%"
+                :wrapperClosable="false"
+                :modal="false"
+                custom-class="feedback-drawer"
+                get-container="body"
+                @close="cancelDrawer"
+            >
+                <div class="drawer-content">
+                    <div class="drawer-header">
+                        <div class="drawer-title">
+                            你的反馈将 <br/>
+                            帮助职教一问优化进步
+                        </div>     
+                    </div>
+                    <div class="error-list">
+                        <el-checkbox-group v-model="errors">
+                            <el-checkbox v-for="item in errorList"
+                                        :key="item.code"
+                                        :label="item.code"
+                                        border
+                                        class="check">
+                                {{ item.name }}
+                            </el-checkbox>
+                        </el-checkbox-group>
+                        <el-input v-model="input" :rows="4"
+                                maxlength="30"
+                                placeholder="其他"
+                                resize="none"
+                                type="textarea" />
+                        <div class="sumit-button">
+                            <el-button :disabled="canSubmit" @click="doCai(listData)">提交</el-button>
+                        </div>
+                    </div>
+    
+                </div>
+            </el-drawer>
       <el-tooltip :disabled="true" content="踩" effect="light" placement="bottom">
         <div class="tools-icon" @click="openDrawer" v-if="!listData.cai">
           <img alt="" src="../static/cai.png">
@@ -99,6 +98,10 @@ export default {
     isLast: {
       type: Boolean,
       default: false
+    },
+    navTopHeight: {
+      type: Number,
+      default: 0
     }
   },
   data() {
@@ -120,6 +123,8 @@ export default {
   methods: {
     cancelDrawer() {
       this.drawer = false;
+      this.input = '';
+      this.errors = [];
     },
     openDrawer() {
       this.drawer = true;
@@ -161,7 +166,11 @@ export default {
       list.cai = !list.cai;
       list.zan = false;
       if (list.cai) {
-        this.$message.success('感谢您的反馈');
+        this.$message({
+          message: '感谢您的反馈',
+          type: 'success',
+          offset: this.navTopHeight
+        });
       }
       this.drawer = false;
       this.input = '';
@@ -244,235 +253,207 @@ export default {
   }
 }
 
+/* 抽屉样式 */
 .feedback-drawer {
-  .drawer-content {
-    padding: 1.5rem;
-    height: 100%;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    background: #fff;
-    border-radius: 1rem 1rem 0 0;
-  }
-
-  .drawer-header {
-    margin-bottom: 2rem;
-    text-align: center;
-
-    .drawer-title {
-      font-weight: 600;
-      font-size: 1.5rem;
-      color: #333;
-      line-height: 1.875rem;
+    // 确保抽屉在最顶层
+    z-index: 9999 !important;
+    
+    .drawer-content {
+        padding: 1.5rem;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        background: #fff;
+        border-radius: 1rem 1rem 0 0;
+        // 添加底部内边距为安全区域留出空间
+        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
     }
-  }
-
-  .error-list {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
 
-    .section-title {
-      font-size: 1rem;
-      color: #666;
-      margin-bottom: 0.5rem;
+    .drawer-header {
+        margin-bottom: 2rem;
+        text-align: center;
+        position: relative;
+        
+        .drawer-title {
+            font-weight: 600;
+            font-size: 1.5rem;
+            color: #333;
+            line-height: 1.875rem;
+        }
+        
+        .el-icon-close {
+            position: absolute;
+            right: 0;
+            top: 0;
+            font-size: 1.5rem;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
     }
 
-    .checkbox-group {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.75rem;
-      justify-content: center;
-
-      .el-checkbox {
-        margin: 0;
-        padding: 0.75rem 1rem;
-        border-radius: 0.5rem;
-        transition: all 0.3s;
-
-        &:hover {
-          background: #f5f7fa;
+    .error-list {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+
+        .el-checkbox-group {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.75rem;
+            justify-content: center;
+
+            .el-checkbox {
+                margin: 0;
+                padding: 0.75rem 1rem;
+                border-radius: 0.5rem;
+                transition: all 0.3s;
+
+                &:hover {
+                    background: #f5f7fa;
+                }
+
+                &.is-checked {
+                    background: #ecf5ff;
+                    border-color: #409EFF;
+
+                    .el-checkbox__label {
+                        color: #409EFF;
+                    }
+                }
+            }
         }
 
-        &.is-checked {
-          background: #ecf5ff;
-          border-color: #409EFF;
-
-          .el-checkbox__label {
-            color: #409EFF;
-          }
+        .el-input {
+            width: 100%;
+
+            .el-textarea__inner {
+                border-radius: 0.75rem;
+                padding: 1rem;
+                font-size: 0.875rem;
+                line-height: 1.5;
+                resize: none;
+                border-color: #dcdfe6;
+                transition: all 0.3s;
+
+                &:focus {
+                    border-color: #409EFF;
+                    box-shadow: 0 0 0 2px rgba(64, 158, 255, .2);
+                }
+            }
         }
-      }
-    }
 
-    .el-input {
-      width: 100%;
-
-      .el-textarea__inner {
-        border-radius: 0.75rem;
-        padding: 1rem;
-        font-size: 0.875rem;
-        line-height: 1.5;
-        resize: none;
-        border-color: #dcdfe6;
-        transition: all 0.3s;
-
-        &:focus {
-          border-color: #409EFF;
-          box-shadow: 0 0 0 2px rgba(64, 158, 255, .2);
+        .sumit-button {
+            margin-top: auto;
+            text-align: center;
+            padding-top: 1rem;
+
+            .el-button {
+                width: 100%;
+                padding: 0.875rem;
+                font-size: 1rem;
+                border-radius: 0.75rem;
+                font-weight: 500;
+                // 动态背景色，默认白色
+                background: #f5f7fa;
+                border: 1px solid #dcdfe6;
+                // 选中时有蓝色背景
+                &:not(:disabled) {
+                    background: linear-gradient(180deg, #5fa5ff 0%, #316cff 100%);
+                    color: #fff;
+                    border: none;
+                }
+            }
         }
-      }
-    }
-
-    .sumit-button {
-      margin-top: auto;
-      text-align: center;
-      padding-top: 1rem;
-
-      .el-button {
-        width: 100%;
-        padding: 0.875rem;
-        font-size: 1rem;
-        border-radius: 0.75rem;
-        font-weight: 500;
-      }
     }
-  }
 }
 
-// 移动端适配
+/* 移动端适配 */
 @media screen and (max-width: 768px) {
-  .robot-tools {
-    .robot-reanswer {
-      width: 5.5rem;
-      height: 1.75rem;
-      font-size: 0.75rem;
-
-      i {
-        font-size: 1rem;
-      }
-    }
-
-    .tools-icon {
-      width: 2.25rem;
-      height: 1.75rem;
-
-      img {
-        width: 1.125rem;
-        height: 1.125rem;
-      }
-    }
-  }
-
-  .feedback-drawer {
-    .drawer-content {
-      padding: 1.25rem;
-    }
-
-    .drawer-header {
-      margin-bottom: 1.5rem;
-
-      .drawer-title {
-        font-size: 1.25rem;
-      }
-    }
-
-    .error-list {
-      gap: 1.25rem;
-
-      .section-title {
-        font-size: 0.9375rem;
-      }
-
-      .checkbox-group {
-        gap: 0.5rem;
-
-        .el-checkbox {
-          padding: 0.625rem 0.875rem;
-          font-size: 0.875rem;
+    .feedback-drawer {
+        .drawer-content {
+            padding: 1.25rem;
+            padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
         }
-      }
 
-      .el-input {
-        .el-textarea__inner {
-          font-size: 0.8125rem;
-          padding: 0.875rem;
+        .drawer-header {
+            margin-bottom: 1.5rem;
+
+            .drawer-title {
+                font-size: 1.25rem;
+            }
         }
-      }
 
-      .sumit-button {
-        .el-button {
-          padding: 0.75rem;
-          font-size: 0.9375rem;
+        .error-list {
+            gap: 1.25rem;
+
+            .el-checkbox-group {
+                gap: 0.5rem;
+
+                .el-checkbox {
+                    padding: 0.625rem 0.875rem;
+                    font-size: 0.875rem;
+                }
+            }
+
+            .el-input {
+                .el-textarea__inner {
+                    font-size: 0.8125rem;
+                    padding: 0.875rem;
+                }
+            }
+
+            .sumit-button {
+                .el-button {
+                    padding: 0.75rem;
+                    font-size: 0.9375rem;
+                }
+            }
         }
-      }
     }
-  }
 }
 
 @media screen and (max-width: 480px) {
-  .robot-tools {
-    .robot-reanswer {
-      width: 6rem;
-      height: 2rem;
-      font-size: 0.75rem;
-    }
-
-    .tools-icon {
-      width: 2rem;
-      height: 2rem;
-
-      img {
-        width: 1rem;
-        height: 1rem;
-      }
-    }
-  }
-
-  .feedback-drawer {
-    .drawer-content {
-      padding: 1rem;
-    }
-
-    .drawer-header {
-      margin-bottom: 1.25rem;
-
-      .drawer-title {
-        font-size: 1.125rem;
-      }
-    }
-
-    .error-list {
-      gap: 1rem;
-
-      .section-title {
-        font-size: 0.875rem;
-      }
-
-      .checkbox-group {
-        gap: 0.375rem;
-
-        .el-checkbox {
-          padding: 0.5rem 0.75rem;
-          font-size: 0.8125rem;
+    .feedback-drawer {
+        .drawer-content {
+            padding: 1rem;
+            padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
         }
-      }
 
-      .el-input {
-        .el-textarea__inner {
-          font-size: 0.75rem;
-          padding: 0.75rem;
+        .drawer-header {
+            margin-bottom: 1.25rem;
+
+            .drawer-title {
+                font-size: 1.125rem;
+            }
         }
-      }
 
-      .sumit-button {
-        .el-button {
-          padding: 0.625rem;
-          font-size: 0.875rem;
+        .error-list {
+            gap: 1rem;
+
+            .el-checkbox-group {
+                gap: 0.375rem;
+
+                .el-checkbox {
+                    padding: 0.5rem 2.75rem;
+                    font-size: 0.8125rem;
+                }
+            }
+
+            .el-input {
+                .el-textarea__inner {
+                    font-size: 0.75rem;
+                    padding: 0.75rem;
+                }
+            }
+
+            .sumit-button {
+                .el-button {
+                    padding: 0.625rem;
+                    font-size: 0.875rem;
+                }
+            }
         }
-      }
     }
-  }
 }
 </style>

package/components/demo/src/chat.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="chat-contain" ref="chatContainer">
-    <error-chat :question-stem="analyExercise" :businessSource="businessSource" @on-init="errorChatInit"/>
+    <error-chat :question-stem="analyExercise" :businessSource="businessSource" :navTopHeight="navTopHeight" @on-init="errorChatInit"/>
     <div v-for="(list, index) in messageData" :key="index"
          :class="{'user-list': list.type === 'user'}"
          class="message">
       <div v-if="list.type === 'user' && avatarUrl" class="robot">
         <img :src="avatarUrl" alt="" style="width: 48px; height: 48px; border-radius: 50%;">
       </div>
-      <div v-if="list.type === 'user' && avatarUrl===''" class="robot user">user</div>
+      <div v-else-if="list.type === 'user'" class="robot user">user</div>
       <div :class="{'user-info': list.type === 'user'}" class="robot-message">
         <div v-html="list.message"></div>
         <div v-if="list.type === 'robot' && list.links.length > 0 && showFile" class="link">
@@ -73,6 +73,7 @@
                     :detail-data="list"
                     :sending="list.sending"
                     :is-last="index === messageData.length - 1"
+                    :navTopHeight="navTopHeight"
                     @on-reanswer="(list) => reanswer(list, index)"
                     @on-stop-chat="onStopChat"/>
       </div>
@@ -125,6 +126,10 @@ export default {
       type: String,
       default: '',
     },
+    navTopHeight: {
+      type: Number,
+      default: 0
+    }
   },
   data() {
     return {
@@ -298,12 +303,19 @@ export default {
     },
     async clearChat() {
       if (this.messageData.length < 1) {
-        this.$message.warning('当前对话为最新对话');
-        return;
+        return this.$message({
+          message: '当前对话为最新对话',
+          type: 'warning',
+          offset: this.navTopHeight
+        });
       }
       await chartClear(this.chatId);
       this.messageData = []
-      this.$message.success('对话清除成功！');
+      this.$message({
+        message: '对话清除成功!',
+        type: 'success',
+        offset: this.navTopHeight
+      });
     },
     reanswer(list, index) {
       list.index = index;
@@ -363,6 +375,10 @@ export default {
 .chat-contain {
   height: 100%;
   overflow-y: auto;
+  /* 隔离滚动 */
+  overscroll-behavior: contain;
+  isolation: isolate;
+  contain: layout style paint;
   -webkit-overflow-scrolling: touch;
   padding: 0.75rem;
   box-sizing: border-box;

package/components/demo/src/error-chat.vue

@@ -102,6 +102,10 @@ export default {
       type: String,
       default: ''
     },
+    navTopHeight: {
+      type: Number,
+      default: 0
+    }
   },
   data() {
     return {
@@ -158,7 +162,11 @@ export default {
             }
           }
         } catch (e) {
-          this.$message.warning('解析失败' + e);
+          this.$message({
+            message: '解析失败' + e,
+            type: 'warning',
+            offset: this.navTopHeight
+          });
           this.analysisData = {key: true};
           console.log(e);
         }
@@ -188,7 +196,11 @@ export default {
         this.analysisData = JSON.parse(content);
         this.detailData.errId = errId;
       } catch (e) {
-        this.$message.warn('解析失败');
+        this.$message({
+          message: '解析失败' + e,
+          type: 'warning',
+          offset: this.navTopHeight
+        });
         this.analysisData = {key: true};
         console.log(e);
       }

package/components/demo/src/feedback.vue

@@ -104,7 +104,11 @@ export default {
     beforeElUpload(file) {
       const MAX_SIZE = 1024 * 1024 * 10;
       if (file.size > MAX_SIZE) {
-        this.$message.warning('图片大小不能超过10MB');
+        this.$message({
+          message: '图片大小不能超过10MB',
+          type: 'warning',
+          offset: this.navTopHeight
+        });
         return false;
       }
       return true;
@@ -128,16 +132,28 @@ export default {
       try {
         const response = await submitFeedback(formData, this.businessSource);
         if (response === '反馈成功') {
-          this.$message.success('提交成功');
+          this.$message({
+            message: '提交成功',
+            type: 'success',
+            offset: this.navTopHeight
+          });
           this.form.description = '';
           this.form.phone = '';
           this.elFileList = [];
         } else {
-          this.$message.warning(response.data.message || '提交失败');
+          this.$message({
+            message: response.data.message || '提交失败',
+            type: 'warning',
+            offset: this.navTopHeight
+          });
         }
       } catch (error) {
         this.$message.closeAll && this.$message.closeAll();
-        this.$message.error('提交失败，请稍后重试');
+        this.$message({
+          message:'提交失败，请稍后重试',
+          type: 'error',
+          offset: this.navTopHeight
+        });
       }
     }
   },