From 1ea55c9e135ff90f0bc6bcf7125af90be302b050 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Mon, 19 Aug 2024 11:06:00 +0800
Subject: [PATCH] =?UTF-8?q?WEB=E7=AB=AF=E7=9A=84=20=E5=BC=B9=E6=A1=86?=
 =?UTF-8?q?=E5=B0=BA=E5=AF=B8=E5=8F=AF=E4=BB=A5=E6=94=BE=E5=A4=A7=EF=BC=8C?=
 =?UTF-8?q?=E4=BD=86=E4=B8=8D=E5=81=9A=E7=BC=A9=E5=B0=8F=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/packages/ai/AiCopilot.vue | 33 ++++++++++++++++++++++++---------
 ui/packages/basic/AiDrag.vue | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 9 deletions(-)
 create mode 100644 ui/packages/basic/AiDrag.vue

diff --git a/ui/packages/ai/AiCopilot.vue b/ui/packages/ai/AiCopilot.vue
index 0958bbb0..d6e9b73a 100644
--- a/ui/packages/ai/AiCopilot.vue
+++ b/ui/packages/ai/AiCopilot.vue
@@ -2,6 +2,7 @@
 import ChatContent from "./components/chatContent.vue";
 import ThinkingBar from "./components/thinkingBar.vue";
 import {mapState} from "vuex";
+import AiDrag from "../../dv/AiDrag.vue";
 
 export default {
   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)},
     ]
   },
-  components: {ThinkingBar, ChatContent},
+  components: {AiDrag, ThinkingBar, ChatContent},
   methods: {
     getHistory(params) {
       this.http.post("/app/appaicopilotinfo/list", null, {params}).then(res => {
@@ -140,7 +141,7 @@ export default {
 
 <template>
   <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">
         <b class="fill" v-text="title"/>
         <div class="expandBtn pointer" v-text="expandBtn" @click="expand=!expand"/>
@@ -181,7 +182,7 @@ export default {
           </div>
         </div>
       </div>
-    </div>
+    </ai-drag>
     <img class="icon" src="https://cdn.sinoecare.com/i/2024/06/04/665ec6f5ef213.png" @click="show=!show"/>
   </section>
 </template>
@@ -197,10 +198,23 @@ export default {
   z-index: 1888;
 
   .copilot {
-    border-radius: 0 0 8px 8px;
-    height: 600px;
-    background: #FFFFFF;
-    box-shadow: 0 0 20px 1px #0a255c1a;
+    :deep(.vdr) {
+      border-radius: 0 0 8px 8px;
+      height: 600px;
+      background: #FFFFFF;
+      box-shadow: 0 0 20px 1px #0a255c1a;
+      border: none;
+
+      .handle {
+        opacity: 0;
+      }
+
+      &:hover {
+        .handle {
+          opacity: 1;
+        }
+      }
+    }
 
     .header {
       height: 48px;
@@ -256,7 +270,7 @@ export default {
 
           & + .right {
             border-left-color: #ddd;
-            width: 660px;
+            min-width: 660px;
           }
         }
 
@@ -372,7 +386,8 @@ export default {
       }
 
       .right {
-        width: 468px;
+        width: 100%;
+        min-width: 468px;
         height: 100%;
         padding: 14px 0 14px 14px;
         align-items: stretch;
diff --git a/ui/packages/basic/AiDrag.vue b/ui/packages/basic/AiDrag.vue
new file mode 100644
index 00000000..8e35646b
--- /dev/null
+++ b/ui/packages/basic/AiDrag.vue
@@ -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>