ai-error-assistant-mobile 0.0.3 → 0.0.4

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/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

@@ -5,6 +5,11 @@
         <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,10 +44,22 @@
       <!--                此功能公测期间对正式版用户开放-->
       <!--            </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';
@@ -51,7 +68,8 @@ import cache from "../plugins/cache";
 export default {
   name: 'AiErrorAssistantMobile',
   components: {
-    Chat
+    Chat,
+    Feedback
   },
   props: {
     visible: true,
@@ -93,6 +111,7 @@ export default {
       showMoreQA: false,
       showFile: false,
       avatarUrl: '',
+      showFeedback: false,
     }
   },
   mounted() {
@@ -155,6 +174,9 @@ export default {
       }
       return true;
     },
+    feedback() {
+      this.showFeedback = true;
+    },
   }
 }
 </script>
@@ -208,6 +230,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 +450,14 @@ export default {
     }
   }
 }
+
+.feedback-el-drawer {
+  z-index: 2000;
+  .el-drawer__body {
+    padding: 0;
+    height: 100vh;
+    background: #eef2ff;
+    overflow: auto;
+  }
+}
 </style>