Browse Source

fix:1. 修复图片缩放问题;2. 修改模型切换组件控制台报警告;

dxj
李朋徽 1 year ago
parent
commit
44a166112d
  1. 16
      src/components/AppMessage/index.vue
  2. 2
      src/components/AppModelSelect/index.vue
  3. 49
      src/components/AppTextarea/index.vue

16
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;
}
}

2
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,

49
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 {

Loading…
Cancel
Save