先提交一波

components/AiAssist.vue

@@ -1,13 +1,34 @@
 <script>
+import AiDrag from "./AiDrag.vue";
+
 export default {
-  name: "AiAssist"
+  name: "AiAssist",
+  components: {AiDrag},
+  data() {
+    return {
+      dialog: false,
+      prompt: ""
+    }
+  }
 }
 </script>
 
 <template>
   <section class="AiAssist">
-    <img src="https://cdn.cunwuyun.cn/dvcp/dv/aiIcon.png"/>
-    <div class="avatar-text" v-text="'全局AI助手'"/>
+    <div class="pointer" @click="dialog=true">
+      <img src="https://cdn.cunwuyun.cn/dvcp/dv/aiIcon.png"/>
+      <div class="avatar-text" v-text="'全局AI助手'"/>
+    </div>
+    <ai-drag class="assistDialog" v-if="dialog" :resizable="false">
+      <dv-border-box-1 background-color="#001C30">
+        <div class="inbox">
+          <div>慧智会言</div>
+          <el-input v-model="prompt" placeholder="您说,我在听~" clearable size="small">
+            <template #append><i class="el-icon-microphone">语音输入</i></template>
+          </el-input>
+        </div>
+      </dv-border-box-1>
+    </ai-drag>
   </section>
 </template>
 
@@ -15,6 +36,23 @@ export default {
 .AiAssist {
   .avatar-text {
     text-align: center;
+    color: white;
+  }
+
+  :deep(.assistDialog) {
+    .border-box-content {
+      padding: 8px 10px;
+      width: initial;
+    }
+
+    .inbox {
+      min-width: 400px;
+      box-shadow: 4px 4px 10px #23ECFD inset, -4px -4px 10px #23ECFD inset;
+      height: 100%;
+      $v: 14px;
+      $vv: calc(100% - #{$v});
+      clip-path: polygon($v 0, $vv 0, 100% $v, 100% $vv, $vv 100%, $v 100%, 0 $vv, 0 $v);
+    }
   }
 }
 </style>