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>