WEB端的 弹框尺寸可以放大,但不做缩小。

This commit is contained in:
aixianling
2024-08-19 11:06:00 +08:00
parent 438cbaa978
commit 1ea55c9e13
2 changed files with 59 additions and 9 deletions

View File

@@ -2,6 +2,7 @@
import ChatContent from "./components/chatContent.vue"; import ChatContent from "./components/chatContent.vue";
import ThinkingBar from "./components/thinkingBar.vue"; import ThinkingBar from "./components/thinkingBar.vue";
import {mapState} from "vuex"; import {mapState} from "vuex";
import AiDrag from "../../dv/AiDrag.vue";
export default { export default {
name: "AiCopilot", name: "AiCopilot",
@@ -39,7 +40,7 @@ export default {
{icon: "https://cdn.sinoecare.com/i/2024/07/04/66866eda99e4d.png", label: "删除", click: row => v.handleDeleteConversation(row.conversationId)}, {icon: "https://cdn.sinoecare.com/i/2024/07/04/66866eda99e4d.png", label: "删除", click: row => v.handleDeleteConversation(row.conversationId)},
] ]
}, },
components: {ThinkingBar, ChatContent}, components: {AiDrag, ThinkingBar, ChatContent},
methods: { methods: {
getHistory(params) { getHistory(params) {
this.http.post("/app/appaicopilotinfo/list", null, {params}).then(res => { this.http.post("/app/appaicopilotinfo/list", null, {params}).then(res => {
@@ -140,7 +141,7 @@ export default {
<template> <template>
<section class="AiCopilot"> <section class="AiCopilot">
<div class="copilot" v-if="show"> <ai-drag class="copilot" v-if="show" :w="468" :h="600" :minHeight="600" :minWidth="468" :x="-480" :y="-542">
<div class="flex header"> <div class="flex header">
<b class="fill" v-text="title"/> <b class="fill" v-text="title"/>
<div class="expandBtn pointer" v-text="expandBtn" @click="expand=!expand"/> <div class="expandBtn pointer" v-text="expandBtn" @click="expand=!expand"/>
@@ -181,7 +182,7 @@ export default {
</div> </div>
</div> </div>
</div> </div>
</div> </ai-drag>
<img class="icon" src="https://cdn.sinoecare.com/i/2024/06/04/665ec6f5ef213.png" @click="show=!show"/> <img class="icon" src="https://cdn.sinoecare.com/i/2024/06/04/665ec6f5ef213.png" @click="show=!show"/>
</section> </section>
</template> </template>
@@ -197,10 +198,23 @@ export default {
z-index: 1888; z-index: 1888;
.copilot { .copilot {
border-radius: 0 0 8px 8px; :deep(.vdr) {
height: 600px; border-radius: 0 0 8px 8px;
background: #FFFFFF; height: 600px;
box-shadow: 0 0 20px 1px #0a255c1a; background: #FFFFFF;
box-shadow: 0 0 20px 1px #0a255c1a;
border: none;
.handle {
opacity: 0;
}
&:hover {
.handle {
opacity: 1;
}
}
}
.header { .header {
height: 48px; height: 48px;
@@ -256,7 +270,7 @@ export default {
& + .right { & + .right {
border-left-color: #ddd; border-left-color: #ddd;
width: 660px; min-width: 660px;
} }
} }
@@ -372,7 +386,8 @@ export default {
} }
.right { .right {
width: 468px; width: 100%;
min-width: 468px;
height: 100%; height: 100%;
padding: 14px 0 14px 14px; padding: 14px 0 14px 14px;
align-items: stretch; align-items: stretch;

View File

@@ -0,0 +1,35 @@
<template>
<section class="AiDrag">
<vue-draggable-resizable v-bind="$attrs">
<slot/>
</vue-draggable-resizable>
</section>
</template>
<script>
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
import VueDraggableResizable from 'vue-draggable-resizable'
export default {
name: "AiDrag",
components: {VueDraggableResizable},
props: {
type: {default: "show"} //show:只拖拽
}
}
</script>
<style lang="scss" scoped>
.AiDrag {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
:deep(.vdr) {
pointer-events: auto;
}
}
</style>