add

.env.development

 NODE_ENV=development
-VITE_USER_APP_API_URL=192.168.31.112
+VITE_USER_APP_API_URL=192.168.31.120
\ No newline at end of file

auto-imports.d.ts

@@ -5,5 +5,6 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
+  const ElLoading: typeof import('element-plus/es')['ElLoading']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
 }

index.html

@@ -31,7 +31,7 @@
       console.log(scaleRatio,fontSize, 'scaleRatio')
       // 4.开始缩放网页
       console.log(scaleRatio,'scaleRatio')
-      document.body.style = `zoom:${scaleRatio}`;
+      // document.body.style = `zoom:${scaleRatio}`;
       console.log(document.body, ' document.body')
     }
   </script>

src/axios/index.ts

@@ -6,7 +6,6 @@ const instance = axios.create({
   // baseURL:'/api',
   timeout: 1000, // 设置请求超时时间
 });
-console.log(import.meta.env, "import.meta.env");
 instance.interceptors.request.use(
   (config: any) => {
     // 在发送请求之前做些什么，例如添加 token

src/components/AutomaticPrompt.vue

@@ -37,7 +37,7 @@
         ref="elAutocomplete"
         placeholder="输入信息"
         contenteditable="true"
-        style="outline: none; "
+        style="outline: none;"
         @paste.prevent="handlePaste"
         @focus="removeDefaultContent"
         @input="handleSelect"
@@ -71,6 +71,7 @@ const imgShowWidth = ref<number>(50)
 const imgShowHeight = ref<number>(50)
 const showEmotion = ref<boolean>(false)
 const handleEmotion = (i: any) => {
+  console.log(i, '打印')
   elAutocomplete.value.innerHTML += i
   inputVal.value = elAutocomplete.value.innerHTML
   showEmotion.value = false
@@ -83,15 +84,7 @@ const upfile = () => {
 const fileImgChange = async () => {
   var e: any = window.event || event
   var oFile = e.target.files[0]
-  console.log(oFile.type)
-  if (oFile.type == 'image/png') {
-    await setfileEvent(e.target)
-  } else {
-    upLoadFilesHander(oFile).then((ress) => {
-    const { success, result }: any = ress;
-    console.log(result,)
-  })
-  }
+  await setfileEvent(oFile)
   const loading: any = ElLoading?.service({
     lock: true,
     text: '上传中...',
@@ -99,29 +92,37 @@ const fileImgChange = async () => {
   })
   loading.close()
 }
-const setfileEvent = async (clipboardData: any) => {
-  const img = getPasteImageFile(clipboardData.files)
-  if (!img) {
-    return
-  }
-  const uploadRes = await fileToBase64(img)
-  if (!uploadRes) {
-    return
+const setfileEvent = async (file: any) => {
+  var html = ''
+  const { result }: any = await upLoadFilesHander(file)
+  const uploadRes = result
+  if (!uploadRes) return
+  if (file.type.includes('image')) {
+    html = await getImageObject(
+      uploadRes,
+      imgShowWidth.value,
+      imgShowHeight.value,
+    )
+  } else {
+    html = await getFileObject(uploadRes, file)
   }
-  const oImage = await getImageObject(
-    uploadRes,
-    imgShowWidth.value,
-    imgShowHeight.value,
-  )
-  console.log(oImage, 'oImage')
-  elAutocomplete.value.innerHTML += oImage.outerHTML
-  inputVal.value = oImage.outerHTML
+  console.log(html, 'html打印')
+  elAutocomplete.value.innerHTML += html.outerHTML
+  inputVal.value += html.outerHTML
   elAutocomplete.value.focus()
 }
+
 const handleSelect = (value: any) => {
   inputVal.value = value.target.innerHTML
 }
-
+const getFileObject = (url: any, oFile: any) => {
+  var aTag = document.createElement('a')
+  aTag.href = url
+  aTag.download = oFile.name
+  aTag.target = 'view_window'
+  aTag.textContent = oFile.name
+  return aTag
+}
 const emit = defineEmits(['updateState'])
 watch(inputVal, async (newValue) => {
   if (!newValue) elAutocomplete.value.innerHTML = ''
@@ -172,13 +173,11 @@ const handlePasteImageFile = async (clipboardData: any) => {
   )
   cursorInsert(oImage)
   inputVal.value = elAutocomplete.value.innerHTML
-  // elAutocomplete.value.innerHTML = inputVal.value;
 }
 
 // 获取一个 image object
 const getImageObject = (uploadRes: any, showWidth: any, showHeight: any) => {
   const oImage = new Image(showWidth, showHeight)
-
   const datasetFields = ['width', 'height']
   const datasetSizes: any = {
     width: '200',
@@ -273,8 +272,9 @@ defineExpose({
 .el-autocomplete {
   width: 100%;
   max-width: 100%;
-  height: calc(100vh  - 732px);
+  height: calc(100vh - 60vh - 130px);
   overflow: auto;
+  font-size: 14px;
 }
 .el-autocomplete img {
   max-width: 100%; /* 设置图片最大宽度为容器宽度 */

src/minxins/UploadMixin.ts

@@ -117,7 +117,6 @@ export const upLoadHander = async (obj: any) => {
     if (resResult) {
       const query = {};
       // const res: any = await getUploadConfigInfo(query);
-
       const result: any = uploadMixin.upLoadMixinResult;
       if (uploadMixin.uploadMixinType === "txcos") {
         //走对象存储
@@ -172,18 +171,21 @@ export const upLoadHander = async (obj: any) => {
             async: false,
           }
         );
-        if (uploadRes.success && uploadRes.message) {
+        let data = uploadRes.data;
+        console.log(data,'uploadRes')
+        if (data.success && data.message) {
           //保存绝对路径，不然小程序会有问题
-          let url = uploadRes.message;
-          url = uploadRes.message.replaceAll("//", "/");
-          const pre = url.startsWith("/") ? "" : "/";
-          url = `http://${VUE_APP_API_URL}/sys/common/static` + pre + url;
-          console.log(url, "图片上传失败");
+          let url = data.message;
+          // console.log(url,'url')
+          // url = data.message.replaceAll("//", "/");
+          // const pre = url.startsWith("/") ? "" : "/";
+          // url = `http://${VUE_APP_API_URL}/sys/common/static` + pre + url;
+          // console.log(url, "图片上传成功");
           obj.onSuccess({ success: true, message: url });
         } else {
           obj.onError({
             success: false,
-            message: uploadRes.message || "图片上传失败",
+            message: data.message || "图片上传失败",
           });
         }
       }

src/router/index.ts

@@ -3,7 +3,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: "/",
     name: "home",
-    component: () => import(/* @vite-ignore */ `@/views/HomeView.vue`),
+    component: () => import(/* @vite-ignore */ `@/views/homeView.vue`),
   },
   {
     path: "/loging",

src/store/modules/user.ts

@@ -24,6 +24,7 @@ export const useUserStore = defineStore("user", {
       this.customerInfo = res;
     },
     setUserInfo(res: any) {
+      console.log(res,'res')
       this.userInfo = res;
     },
     setUserListMessages(res: any) {

src/test.ts

+interface aaa{
+    name:string
+}
+interface aaa{
+    age:number;
+}
\ No newline at end of file

src/views/HomeView.vue

@@ -20,7 +20,6 @@
             <div class="we-connecting">
               We are connecting you to online customer service
             </div>
-
             <!-- 推荐商品 -->
             <div
               class="message-container message-container-right"
@@ -183,7 +182,7 @@
                   </div>
                   <div class="design-requirements">
                     <div>{{ message.content.flieName }}</div>
-                    <div class="img">
+                    <div class="img" @click="downLoad(message)" >
                       <img :src="require('../assets/icon_download.png')" />
                     </div>
                   </div>
@@ -192,15 +191,6 @@
             </div>
           </el-main>
           <el-footer class="el-footer" :style="{ border: '1px solid #E9ECF1' }">
-            <!-- <div class="static-box">
-              <div
-                v-for="(item, index) in staticList"
-                :key="index"
-                class="staticList"
-              >
-                <div>{{ item }}</div>
-              </div>
-            </div> -->
             <AutomaticPrompt
               @keydown.enter="handleButtonClick"
               @updateState="getState"
@@ -232,11 +222,11 @@
           class="shirnk-aside"
           v-shrink="{ isShrink, width: '0px' }"
           :style="{
-            height: 'calc(100vh - 60px)',
+            height: 'calc( 100vh - 60px )',
           }"
         >
           <div class="shrink-text" @click="changeiShrink">
-            <el-icon size="30">
+            <el-icon size="15">
               <DArrowLeft v-if="isShrink" />
               <DArrowRight v-if="!isShrink" />
             </el-icon>
@@ -331,22 +321,43 @@
                   />
                 </el-form-item>
                 <el-form-item>
-                  <div class="requirements-box" v-if="!isUpload">
+                  <!-- <input
+                    class="requirements-box"
+                    v-if="!isUpload"
+                    type="file"
+                    @change="fileImgChange"
+                  /> -->
+                  <input
+                    type="file"
+                    ref="requireFile"
+                    style="display: none;"
+                    accept="image/bmp,image/jpeg,image/jpg,image/png"
+                    @change="fileImgChange"
+                  />
+                  <div
+                    class="requirements-box"
+                    v-if="!ruleForm.flieUrl"
+                    @click="requireFileOk"
+                  >
                     <el-button icon="UploadFilled" class="uploadInfo" />
                     <div class="upload">
-                      <div class="upload-name">Click to upload</div>
-                      <div>or drag and drap</div>
+                      <div class="click-to-upload">
+                        Click to upload
+                      </div>
+                      <div class="or-drag-and-drap">or drag and drap</div>
                     </div>
                   </div>
-                  <div class="requirements-box1" v-if="isUpload">
+                  <div class="requirements-box1" v-if="ruleForm.flieUrl">
                     <div class="box">
                       <div class="upload-name">{{ ruleForm.flieName }}</div>
                       <div class="upload-info">
                         <el-icon color="green"><CircleCheck /></el-icon>
-                        <span>200KB</span>
+                        <span>{{ ruleForm.flieSize }}KB</span>
                       </div>
                     </div>
-                    <el-icon :size="20"><Delete /></el-icon>
+                    <el-icon :size="20" @click="deleteFlieName(ruleForm)">
+                      <Delete />
+                    </el-icon>
                   </div>
                 </el-form-item>
                 <el-form-item prop="EmailAddress" label="Email Address">
@@ -382,16 +393,20 @@ import '@luohc92/vue3-image-viewer/dist/style.css'
 import { checkMesssages } from '../axios/model/user'
 import { require } from '@/utils/index'
 import { useRoute } from 'vue-router'
+import { upLoadFilesHander } from '../minxins/UploadMixin'
 const route = useRoute()
 const routeParams = route.query
 const pageType = routeParams.type || 1
+const requireFile = ref<any>(null)
 const ruleForm = ref({
   ProductName: 'Product Name',
   Email: '1143572217@qq.com',
   purchaseQuantity: 'Product Category',
   China: '',
   price: 5000,
-  flieName: 'Tech design requirements.pdf',
+  flieName: '',
+  flieSize:0,
+  flieUrl: '',
   otherRequirements:
     'Other requirements explanation Other requirements explanation Other requirements explanation Other requirements explanation Other requirements explanation',
   EmailAddress: 'from china',
@@ -399,13 +414,11 @@ const ruleForm = ref({
 
 let isShrink = ref('')
 const changeiShrink = () => {
-  console.log(isShrink.value, 'value')
   isShrink.value = !isShrink.value
 }
 //收缩
 const vShrink: Directive<HTMLElement, boolean | Props> = {
   mounted(el, binding) {
-    console.log(el, binding, '打印')
     let { option } = formatCOlorOption(binding.value)
     option.isUpdate && renderStyle(el, option)
   },
@@ -414,17 +427,12 @@ const vShrink: Directive<HTMLElement, boolean | Props> = {
     let { option } = formatCOlorOption(binding.value)
     if (option.isShrink) {
       renderStyle(el, option)
-      //此时此刻还需要添加一个p对象
-      // renderAddNodes(el, option)
     } else {
       let obj = {
         ...option,
         width: '292px',
       }
-      // for (let key in option) obj[key] = ''
       renderStyle(el, obj)
-      //此时此刻需要清空对象p
-      // renderAddNodes(el, option)
     }
   },
 }
@@ -432,6 +440,27 @@ const vShrink: Directive<HTMLElement, boolean | Props> = {
 function renderStyle(el, option) {
   for (let key in option) el.style[key] = option[key]
 }
+
+function fileImgChange() {
+  var e: any = window.event || event
+  var oFile = e.target.files[0]
+  upLoadFilesHander(oFile).then((ress) => {
+    const { success, result }: any = ress
+    if (success) {
+      console.log(oFile, 'oFile')
+      ruleForm.value.flieUrl = result
+      ruleForm.value.flieName = oFile.name
+      ruleForm.value.flieSize = oFile.size
+      console.log(ruleForm,'ruleForm')
+    }
+  })
+  const loading: any = ElLoading?.service({
+    lock: true,
+    text: '上传中...',
+    spinner: 'el-icon-loading',
+  })
+  loading.close()
+}
 //合并指令传递的数据和默认配置的数据
 function formatCOlorOption(val: string | Props) {
   const option =
@@ -445,12 +474,21 @@ function formatCOlorOption(val: string | Props) {
     option,
   }
 }
-//登录
+const deleteFlieName = (val: any) => {
+  console.log(isUpload.value, '打印', 'val')
+  ruleForm.value.flieUrl = ''
+}
+
+//过渡
 const defaultStyle: {
   transition?: string
 } = {
   transition: 'all 0.6s linear',
 }
+const requireFileOk = () => {
+  console.log(requireFile.value, 'value')
+  requireFile.value.click()
+}
 const rules = reactive({
   ProductName: [
     {
@@ -491,7 +529,7 @@ const rules = reactive({
 const ruleFormRef = ref<FormInstance>()
 const customerInfo = ref({})
 const messages = ref([])
-const isUpload = true
+const isUpload = ref<Boolean>(true)
 const productInfo = ref({
   productImg: require('../assets/shop.jpg'),
   productName: 'The secret to looking glowup nowadays',
@@ -538,6 +576,8 @@ const connectMsg = () => {
     })
     let VUE_APP_API_URL = import.meta.env.VITE_USER_APP_API_URL
     const toIp = `ws://${VUE_APP_API_URL}:8081?type=yk&code=${useUser.userInfo.username}&kf=${store.customerInfo.username}`
+    console.log(toIp, 'toIpWS')
+    console.log(toIp, 'toIpWS001')
     useUser.connect()
     initWebSocket(toIp)
     setTimeout(() => {
@@ -630,16 +670,14 @@ const submitForm = (e) => {
   messages.value?.push(data)
   sendWebSocket(data)
 }
+const openWindow = (event: any) => {
+  urlDownload(event)
+}
 const handleMessageClick = (event: any) => {
   const target = event.target
+  console.log(target, 'target')
   if (target.tagName === 'A') {
-    if (target.innerHTML === '解决') {
-      alert('感谢您的使用')
-    } else if (target.innerHTML === '未解决') {
-      alert('很抱歉未能解决你的问题')
-    } else {
-      handleLinkClick(target.innerHTML)
-    }
+    openWindow(target.href)
   } else if (target.tagName === 'IMG') {
     // 点击的图片进行放大操作
     ImageViewer({
@@ -654,16 +692,22 @@ const handleMessageClick = (event: any) => {
     })
   }
 }
+const downLoad = (message: any) => {
+  urlDownload(message.content.flieUrl)
+}
 
-//查看消息将其改为已读
-const getCheckMesssages = async (res: any) => {
-  try {
-    const { success, result, message }: any = await checkMesssages({
-      username: res.username,
-    })
-  } catch (error) {
-    console.log(error)
-  }
+const urlDownload = (url, fileName = '下载文件') => {
+  // 创建隐藏的可下载链接
+  let eleLink = document.createElement('a')
+  eleLink.download = fileName
+  eleLink.style.display = 'none'
+  eleLink.href = url
+  // 触发点击
+  document.body.appendChild(eleLink)
+  eleLink.click()
+  // 然后移除
+  console.log(url, '下载url')
+  document.body.removeChild(eleLink)
 }
 
 const handleLinkClick = (msg: string) => {
@@ -688,7 +732,6 @@ const toSendLink = (e: any) => {
     to: customerInfo.value.username,
     form: store.userInfo.username,
   }
-
   messages.value?.push(data)
   sendWebSocket(data)
 }
@@ -696,15 +739,21 @@ const toSendLink = (e: any) => {
 <style lang="scss" scoped>
 .shirnk-aside {
   position: relative;
-  overflow: hidden;
-  overflow: initial;
+  overflow-y: scroll;
+  overflow: inherit;
+
   .shrink-text {
     position: absolute;
     top: 50%;
     transform: translate(-50%);
-    width: 20px;
-    height: 20px;
-    left: -20px;
+    line-height: 15px;
+    height: 15px;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 15px;
+    left: -12px;
     font-size: 10px;
   }
 }
@@ -1512,9 +1561,36 @@ const toSendLink = (e: any) => {
     }
   }
 }
+.click-to-upload {
+  color: #073a3d;
+  font-family: 'Inter';
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+.or-drag-and-drap {
+  color: #475467;
+  font-family: 'Inter';
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+}
 .recently-input-box {
   padding: 12px;
 }
+.requirements-box {
+  position: relative;
+  z-index: 0;
+}
+input {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  background: transparent;
+}
 .requirements-box,
 .requirements-box1 {
   .box {
@@ -1562,6 +1638,12 @@ const toSendLink = (e: any) => {
   border: 1px solid #eaecf0;
   padding: 12px 58px 12px 14px;
 }
+.click-to-upload {
+  line-height: 20px;
+}
+.or-drag-and-drap {
+  line-height: 20px;
+}
 .requirements-box1 {
   background: #f6f9fcff;
 }

vite.config.ts

@@ -48,5 +48,6 @@ export default defineConfig({
     host: "0.0.0.0",
     port: 8082,
     open: false,
+    overlay:true,
   },
 });