From 44a166112dbec7c25f19ddaaf317c7a3b48cc4d3 Mon Sep 17 00:00:00 2001
From: lipenghui <mrkezhi@163.com>
Date: Mon, 29 Jan 2024 16:51:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:1.=20=E4=BF=AE=E5=A4=8D=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E7=BC=A9=E6=94=BE=E9=97=AE=E9=A2=98=EF=BC=9B2.=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E6=A8=A1=E5=9E=8B=E5=88=87=E6=8D=A2=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=8E=A7=E5=88=B6=E5=8F=B0=E6=8A=A5=E8=AD=A6=E5=91=8A=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AppMessage/index.vue     | 16 +++-----
 src/components/AppModelSelect/index.vue |  2 +-
 src/components/AppTextarea/index.vue    | 49 ++++++++++++++++++++++++-
 3 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/src/components/AppMessage/index.vue b/src/components/AppMessage/index.vue
index 882e6f0..7eae641 100644
--- a/src/components/AppMessage/index.vue
+++ b/src/components/AppMessage/index.vue
@@ -43,11 +43,12 @@ const filstDivTop = ref(0)
 const defaultScrollTop = ref(0) // 默认滚动距离
 const isAutoScroll = ref(true) // 是否自动滚动
 const conversationData = computed(() => messageStore.getConversationData)
+const throttleSetHrefTarget = throttle(setHrefTarget, 500)
 
 watch(
   () => props.list[props.list.length - 1],
   () => {
-    throttle(setHrefTarget, 500)
+    throttleSetHrefTarget()
     if (isAutoScroll.value) {
       scrollToBottom()
     }
@@ -55,16 +56,10 @@ watch(
   { immediate: true },
 )
 
-watch(
-  () => messageStore.messageStatus,
-  () => {
-    setHrefTarget()
-  },
-)
 watch(
   () => props.list.length,
   () => {
-    setHrefTarget()
+    throttleSetHrefTarget()
   },
 )
 
@@ -141,7 +136,7 @@ async function setHrefTarget() {
 
 onMounted(async () => {
   scrollToBottom()
-  setHrefTarget()
+  throttleSetHrefTarget()
 })
 </script>
 
@@ -152,7 +147,7 @@ onMounted(async () => {
         <div class="content">
           <MdPreview
             :editor-id="`preview-only-user${index}${Date.now()}`"
-            :model-value="`[我是连接](https://open.ys7.com/console/device.html?_blank)${item.content}`"
+            :model-value="item.content"
           />
         </div>
         <img class="icon-user" src="@/assets/images/conversation/user.png" alt="">
@@ -241,7 +236,6 @@ onMounted(async () => {
         :deep(.md-editor-preview-wrapper) {
           img {
             width: 400px;
-            height: 400px;
             display: block;
           }
         }
diff --git a/src/components/AppModelSelect/index.vue b/src/components/AppModelSelect/index.vue
index 087f6c2..cb4b538 100644
--- a/src/components/AppModelSelect/index.vue
+++ b/src/components/AppModelSelect/index.vue
@@ -8,7 +8,7 @@ import { SvgIcon } from '@/components/SvgIcon'
 interface Props {
   activeIndex: number
   options: ModelSelect[]
-  disabled: boolean
+  disabled?: boolean
 }
 const props = withDefaults(defineProps<Props>(), {
   activeIndex: 0,
diff --git a/src/components/AppTextarea/index.vue b/src/components/AppTextarea/index.vue
index 852c90a..0bed10b 100644
--- a/src/components/AppTextarea/index.vue
+++ b/src/components/AppTextarea/index.vue
@@ -2,7 +2,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { Button, Image, Textarea, Upload, message } from 'ant-design-vue'
-import { CloseOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue'
+import { CloseOutlined, EyeOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue'
 import { SvgIcon } from '@/components/SvgIcon'
 import { isEmpty, trim } from '@/utils/is'
 import { useMessageStore } from '@/store/moules/messageStore/index'
@@ -47,6 +47,8 @@ const emit = defineEmits([
 const messageStore = useMessageStore()
 const value = ref('')
 const uploadLoading = ref<boolean>(false)
+const visible = ref<boolean>(false) // 自定义图片预览
+
 const fileUrl = computed({
   get: () => props.defaultFileUrl,
   set: value => emit('update:defaultFileUrl', value),
@@ -101,6 +103,13 @@ function stopMessage() {
   emit('stopMessage')
 }
 
+/**
+ * @description: 设置图片预览
+ */
+function setVisible(value: boolean): void {
+  visible.value = value
+}
+
 /**
  * @description: 图片上传前的处理
  */
@@ -168,11 +177,17 @@ async function handleCustomRequest(option: any) {
             <div class="img">
               <Image
                 :width="60"
-                :height="60"
                 :src="fileUrl"
                 alt="example"
+                :preview="{
+                  visible,
+                  onVisibleChange: setVisible,
+                }"
                 fallback="data:image/png;base64,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"
               ></Image>
+              <div class="preview-handle-box" @click="() => setVisible(true)">
+                <EyeOutlined class="icon" />
+              </div>
             </div>
             <CloseOutlined class="delete-icon" @click="$emit('deleteFile')"></CloseOutlined>
           </div>
@@ -233,8 +248,38 @@ async function handleCustomRequest(option: any) {
     }
 
     .img {
+      width: 60px;
+      height: 60px;
       border-radius: 5px;
       overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid #eee;
+      position: relative;
+      .preview-handle-box {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s;
+        .icon {
+          display: none;
+        }
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.6);
+          .icon {
+            color: #fff;
+            display: block;
+          }
+        }
+      }
     }
 
     .delete-icon {