ai-error-assistant-mobile 0.0.3 → 0.0.5

package/components/demo/api/index.js

@@ -120,4 +120,20 @@ export async function sendMessageEventSource(params, signal, onmessage) {
         body: JSON.stringify(params),
         onmessage,
     });
-}
+}
+
+/**
+ * 提交意见反馈
+ * @param {FormData} formData
+ * @param {string} token
+ * @returns {Promise}
+ */
+export const submitFeedback = (formData, token) => {
+    return request({
+        url: prefix + '/assistant/tools/feedback',
+        method: 'post',
+        headers: { 'Content-Type': 'multipart/form-data' },
+        data: formData,
+    });
+}
+

package/components/demo/src/chat.vue

@@ -587,6 +587,16 @@ export default {
   }
 }
 
+:deep {
+  .robot-message {
+    ol,ul{
+      font-size: 14px;
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
+
 @media screen and (min-width: 768px) {
   .chat-contain {
     padding: 1rem;

package/components/demo/src/feedback.vue

@@ -0,0 +1,319 @@
+<template>
+  <div class="feedback-drawer-wrap">
+    <div class="feedback-mask" @click="$emit('close')"></div>
+    <div class="feedback-drawer" :class="{ open: true }">
+      <div class="feedback-header">
+        <div class="header-icon-wrap">
+          <svg class="header-icon" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="16" fill="#7a8bff"/><text x="16" y="22" text-anchor="middle" font-size="20" fill="#fff">!</text></svg>
+        </div>
+        <button class="close-btn" @click="$emit('close')">×</button>
+        <h2>您的反馈对我们很重要</h2>
+        <p class="subtitle">请详细描述您遇到的问题，我们会尽快处理</p>
+      </div>
+      <el-form :model="form" :rules="rules" ref="feedbackForm" label-width="0">
+        <div class="feedback-form">
+          <div class="form-group">
+            <el-form-item prop="description" style="margin-bottom: 0px;">
+              <label for="description">问题描述</label>
+              <textarea
+                id="description"
+                v-model="form.description"
+                placeholder="请详细描述您遇到的问题，以便我们更好地帮助您"
+                rows="4"
+              />
+            </el-form-item>
+          </div>
+          <div class="form-group">
+            <el-form-item prop="phone">
+              <label for="phone">联系方式</label>
+              <input
+                id="phone"
+                v-model="form.phone"
+                placeholder="方便我们联系您解决问题"
+              />
+            </el-form-item>
+          </div>
+          <label class="upload-label">上传图片</label>
+          <div class="upload-section">
+         
+            <div class="upload-row">
+              <el-upload
+                class="el-upload-feedback"
+                action="#"
+                :auto-upload="false"
+                :limit="1"
+                :on-change="onElUploadChange"
+                :before-upload="beforeElUpload"
+                :file-list="elFileList"
+                :show-file-list="true"
+                list-type="picture-card"
+                accept="image/*"
+              >
+                <i class="el-icon-plus"></i>
+              </el-upload>
+            </div>
+            <div class="upload-tip">最多上传1张图片，大小不超过10MB</div>
+          </div>
+          <div class="submit-section">
+            <el-button type="primary" @click="submitForm" class="submit-button" block>提交反馈</el-button>
+          </div>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Upload, Form, FormItem, Button } from 'element-ui';
+import { submitFeedback } from '../../demo/api/index';
+export default {
+  name: 'Feedback',
+  components: { Upload, ElForm: Form, ElFormItem: FormItem, ElButton: Button },
+  props: {
+    businessSource: {
+      type: String,
+      default: ''
+      },
+    },   
+  data() {
+    return {
+      form: {
+        description: '',
+        phone: ''
+      },
+      elFileList: [],
+      token: '',
+      rules: {
+        description: [
+          { required: true, message: '请输入问题描述', trigger: 'blur' },
+        ],
+        phone: []
+      }
+    };
+  },
+  methods: {
+    beforeElUpload(file) {
+      const MAX_SIZE = 1024 * 1024 * 10;
+      if (file.size > MAX_SIZE) {
+        this.$message.warning('图片大小不能超过10MB');
+        return false;
+      }
+      return true;
+    },
+    onElUploadChange(file, fileList) {
+      this.elFileList = fileList.slice(-1); // 只保留最后一张
+    },
+    submitForm() {
+      this.$refs.feedbackForm.validate(valid => {
+        if (!valid) return;
+        this.onSubmit();
+      });
+    },
+    async onSubmit() {
+      const formData = new FormData();
+      formData.append('description', this.form.description);
+      if (this.form.phone) formData.append('phone', this.form.phone);
+      if (this.elFileList.length > 0 && this.elFileList[0].raw) {
+        formData.append('file', this.elFileList[0].raw);
+      }
+      try {
+        const response = await submitFeedback(formData, this.businessSource);
+        if (response === '反馈成功') {
+          this.$message.success('提交成功');
+          this.form.description = '';
+          this.form.phone = '';
+          this.elFileList = [];
+        } else {
+          this.$message.warning(response.data.message || '提交失败');
+        }
+      } catch (error) {
+        this.$message.closeAll && this.$message.closeAll();
+        this.$message.error('提交失败，请稍后重试');
+      }
+    }
+  },
+};
+</script>
+
+<style scoped>
+.feedback-drawer-wrap {
+  position: fixed;
+  z-index: 2000;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+.feedback-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0,0,0,0.35);
+  z-index: 1;
+}
+.feedback-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #eef2ff;
+  z-index: 2;
+  box-shadow: -2px 0 16px rgba(0,0,0,0.08);
+  border-radius: 0;
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100vw);
+  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
+}
+.feedback-drawer.open {
+  transform: translateX(0);
+}
+.close-btn {
+  position: absolute;
+  top: -15px;
+  right: 16px;
+  background: none;
+  border: none;
+  font-size: 28px;
+  color: #888;
+  cursor: pointer;
+  z-index: 10;
+  line-height: 1;
+}
+.feedback-header {
+  text-align: center;
+  margin: 24px 0 32px;
+  position: relative;
+}
+.header-icon-wrap {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 12px;
+}
+.header-icon {
+  color: #7a8bff;
+}
+.feedback-header h2 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323233;
+  margin: 0 0 8px;
+}
+.feedback-header .subtitle {
+  font-size: 14px;
+  color: #8c8c8c;
+  margin: 0;
+}
+.feedback-form {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.04);
+  padding: 20px;
+  margin: 0 16px 16px 16px;
+}
+.form-group {
+  margin-bottom: 18px;
+}
+.form-group label {
+  font-weight: 500;
+  color: #4a4a4a;
+  display: block;
+}
+.form-group textarea,
+.form-group input {
+  width: 100%;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-size: 15px;
+  color: #323233;
+  background: #f5f7fa;
+  resize: none;
+  box-sizing: border-box;
+}
+.upload-section {
+  background-color: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.04);
+}
+.upload-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  font-size: 15px;
+  font-weight: 500;
+  color: #4a4a4a;
+}
+.upload-tip {
+  margin-top: 12px;
+  font-size: 12px;
+  color: #8c8c8c;
+  text-align: center;
+}
+.submit-section {
+  margin: 32px 16px 0 16px;
+}
+.submit-button {
+  width: 100%;
+  height: 44px;
+  font-size: 16px;
+  font-weight: 500;
+  background: linear-gradient(135deg, #7a8bff 0%, #a3b3ff 100%);
+  border: none;
+  border-radius: 22px;
+  color: #fff;
+  box-shadow: 0 4px 12px rgba(122, 139, 255, 0.3);
+  transition: all 0.3s;
+}
+.submit-button:active {
+  transform: translateY(1px);
+  box-shadow: 0 2px 8px rgba(122, 139, 255, 0.3);
+}
+.upload-label {
+    font-weight: 500;
+    color: #4a4a4a;
+    display: block;
+    line-height: 40px;
+    font-size: 14px;
+}
+.upload-row {
+  display: flex;
+  align-items: flex-start;
+}
+.el-upload-feedback {
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+}
+.el-upload-feedback .el-upload {
+  margin-right: 8px;
+}
+.el-upload-feedback .el-upload-list {
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+.el-upload-feedback >>> .el-upload-list__item {
+  width: 100px !important;
+  height: 100px !important;
+  margin: 0 8px 0 0 !important;
+}
+.el-upload-feedback >>> .el-upload--picture-card {
+  width: 100px !important;
+  height: 100px !important;
+  line-height: 100px !important;
+}
+.el-upload-feedback >>> .el-upload-list__item-thumbnail {
+  width: 64px !important;
+  height: 64px !important;
+  object-fit: cover;
+  border-radius: 8px;
+}
+.el-upload-feedback >>> .el-icon-plus {
+  font-size: 24px !important;
+  line-height: 64px !important;
+}
+</style> 

package/components/demo/src/main.vue

@@ -1,10 +1,19 @@
 <template>
   <div class="ai-contain" v-if="visible">
+    <div
+        class="nav-top-space"
+        :style="`height: ${navTopHeight}px`"
+    ></div>
     <div class="ai-contain-header">
       <div class="header-left">
         <i class="el-icon-back" @click="closeMessage"></i>
         <span class="title-font">错题解析</span>
       </div>
+      <div class="header-right">
+        <div class="feedback-icon" @click="feedback">
+          <img alt="" src="../static/feedback.png" style="width: 20px; height: 20px"/>
+        </div>
+      </div>
     </div>
     <div v-if="!courseFlag" class="message-wrap">
       <div class="message-line">{{ message }}</div>
@@ -39,19 +48,32 @@
       <!--                此功能公测期间对正式版用户开放-->
       <!--            </p>-->
     </template>
+    <el-drawer
+      :visible.sync="showFeedback"
+      direction="rtl"
+      size="100%"
+      :with-header="false"
+      custom-class="feedback-el-drawer"
+      :modal="false"
+      :close-on-click-modal="false"
+    >
+      <feedback @close="showFeedback = false" :businessSource="businessSource"/>
+    </el-drawer>
   </div>
 </template>
 <script>
 import Chat from './chat.vue';
+import Feedback from './feedback.vue';
 import Cookies from "js-cookie";
 import {getUserInfo} from '../utils/config';
-import {checkCourseIdIsExist, queryCallWord} from '../api/index';
+import {checkCourseIdIsExist, queryCallWord, ssoAuth} from '../api/index';
 import cache from "../plugins/cache";
 
 export default {
   name: 'AiErrorAssistantMobile',
   components: {
-    Chat
+    Chat,
+    Feedback
   },
   props: {
     visible: true,
@@ -59,6 +81,10 @@ export default {
     businessSource: {
       type: String,
       default: ''
+    },
+    navTopHeight: {
+      type: Number,
+      default: 0
     }
   },
   computed: {
@@ -93,19 +119,24 @@ export default {
       showMoreQA: false,
       showFile: false,
       avatarUrl: '',
+      showFeedback: false,
     }
   },
-  mounted() {
+  async mounted() {
     if (!Cookies.get("token")) {
       return this.$message.warning('未获取到登录信息,请重新登录');
     }
-    getUserInfo(Cookies.get("token"), this.businessSource, async () => {
-      const wordRes = await queryCallWord(this.resId);
-      if (!wordRes) return;
-      const {showMoreQA, isShowFile} = wordRes;
-      this.showMoreQA = showMoreQA;
-      this.showFile = !!isShowFile;
-      this.avatarUrl = cache.session.getJSON('USER_AVATAR_URL');
+    await ssoAuth(Cookies.get("token"), this.businessSource).then(async (ssoRes) => {
+      if (ssoRes) {
+        const wordRes = await queryCallWord(this.resId);
+        if (!wordRes) return;
+        const {showMoreQA, isShowFile} = wordRes;
+        this.showMoreQA = showMoreQA;
+        this.showFile = !!isShowFile;
+        if (ssoRes?.avatarUrl) {
+          this.avatarUrl = ssoRes.avatarUrl;
+        }
+      }
     });
   },
   methods: {
@@ -155,6 +186,9 @@ export default {
       }
       return true;
     },
+    feedback() {
+      this.showFeedback = true;
+    },
   }
 }
 </script>
@@ -208,6 +242,29 @@ export default {
         }
       }
     }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+      margin-right: 12px;
+      .feedback-icon {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: none;
+        cursor: pointer;
+        transition: background 0.2s;
+        &:active {
+          background: #ececec;
+        }
+        svg {
+          display: block;
+        }
+      }
+    }
   }
 
   .logo-title {
@@ -405,4 +462,14 @@ export default {
     }
   }
 }
+
+.feedback-el-drawer {
+  z-index: 2000;
+  .el-drawer__body {
+    padding: 0;
+    height: 100vh;
+    background: #eef2ff;
+    overflow: auto;
+  }
+}
 </style>

package/components/demo/utils/config.js

@@ -86,14 +86,14 @@ export const cacheMessageList = [
 //     });
 //     cache.session.setJSON('SRKJ_TOKEN_CACHE', userRes);
 // }
-export const getUserInfo = async (token, businessSource, fn) => {
-    await ssoAuth(token, businessSource).then(async (ssoRes) => {
-        if (ssoRes?.avatarUrl){
-            cache.session.setJSON('USER_AVATAR_URL', ssoRes.avatarUrl);
-        }else{
-            cache.session.setJSON('USER_AVATAR_URL', '');
-        }
-    });
-    cache.session.setJSON('SRKJ_TOKEN_CACHE', token);
-    if (fn) fn();
-}
+// export const getUserInfo = async (token, businessSource, fn) => {
+//     await ssoAuth(token, businessSource).then(async (ssoRes) => {
+//         if (ssoRes?.avatarUrl){
+//             cache.session.setJSON('USER_AVATAR_URL', ssoRes.avatarUrl);
+//         }else{
+//             cache.session.setJSON('USER_AVATAR_URL', '');
+//         }
+//     });
+//     cache.session.setJSON('SRKJ_TOKEN_CACHE', token);
+//     if (fn) fn();
+// }