大屏开发

components/AiAssist.vue

@@ -1,5 +1,6 @@
 <script>
 import AiDrag from "./AiDrag.vue";
+import {Loading} from "element-ui";
 
 export default {
   name: "AiAssist",
@@ -7,33 +8,74 @@ export default {
   data() {
     return {
       dialog: false,
-      prompt: ""
+      prompt: "",
+      content: "",
+      assistPos: {}
     }
+  },
+  methods: {
+    confirm() {
+      const loading = Loading.service({fullscreen: true, text: "助手回复中..."});
+      if (this.prompt.includes("")) {
+        setTimeout(() => {
+          loading.close()
+          this.dialog = false
+          if (/(网格建设|居民报事|居民档案|两委干部|敏感词)/.test(this.prompt)) {
+
+          }
+        },)
+      } else {
+        this.content = "抱歉，我还没有学习到关于这个话题的内容，无法提供相关信息。您可以选择其他问题，我将努力为您解答。"
+        loading.close()
+        this.dialog = false
+      }
+      this.prompt = ""
+    }
+  },
+  watch: {
+    dialog(v) {
+      document.body.onclick = v ? () => this.dialog = false : null
+    }
+  },
+  mounted() {
+    const {x, y} = this.$el.getBoundingClientRect()
+    this.assistPos = {left: `calc(50vw - ${x}px)`, top: `calc(50vh - ${y}px)`}
   }
 }
 </script>
 
 <template>
-  <section class="AiAssist">
+  <section class="AiAssist" @click.stop>
     <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>
+      <div class="inbox" :style="assistPos" v-if="!content">
+        <dv-border-box-1 background-color="#001C30">
+          <div class="title mar-b32 mar-t16">慧智会言</div>
           <el-input v-model="prompt" placeholder="您说,我在听~" clearable size="small">
             <template #append><i class="el-icon-microphone">语音输入</i></template>
           </el-input>
+          <div class="flex center gap-8 mar-t56">
+            <div class="btn" @click="dialog=false">取消</div>
+            <div class="btn" @click="confirm">确定</div>
+          </div>
+        </dv-border-box-1>
+        <div class="reply">
+          <div v-html="content"/>
         </div>
-      </dv-border-box-1>
+      </div>
     </ai-drag>
   </section>
 </template>
 
 <style scoped lang="scss">
+$theme-color: #23ECFD;
 .AiAssist {
+  color: white;
+  font-size: 14px;
+
   .avatar-text {
     text-align: center;
     color: white;
@@ -41,18 +83,83 @@ export default {
 
   :deep(.assistDialog) {
     .border-box-content {
-      padding: 8px 10px;
-      width: initial;
+      padding: 16px 28px;
+      position: relative;
+      $gap-v: 6px;
+      $gap-h: 8px;
+
+      &:after {
+        position: absolute;
+        left: $gap-h;
+        right: $gap-h;
+        top: $gap-v;
+        bottom: $gap-v;
+        content: " ";
+        box-shadow: 4px 4px 10px $theme-color inset, -4px -4px 10px $theme-color inset;
+        $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);
+        pointer-events: none;
+      }
     }
 
     .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);
+      width: 400px;
+      height: 230px;
+      position: fixed;
+      transform: translate(-50%, -50%);
+
+      .title {
+        text-align: center;
+        font-size: 14px;
+        background-image: url("https://cdn.cunwuyun.cn/dvcp/dv/weiyang/titleBg.png");
+        background-repeat: no-repeat;
+        background-position: center bottom;
+      }
+
+      .el-input {
+        input {
+          background: transparent;
+          border-color: $theme-color;
+          color: white;
+
+          &::placeholder {
+            color: #B3DAE5;
+          }
+        }
+
+        .el-input-group__append {
+          user-select: none;
+          color: white;
+          background: $theme-color;
+          border-color: $theme-color;
+        }
+      }
     }
+
+    .reply {
+      min-width: 300px;
+      min-height: 400px;
+      $bg: rgba(#0A2234, .88);
+      background-image: linear-gradient(to bottom, #5ac8f6 0, $bg 20px, $bg 100%);
+      box-shadow: 1px 1px 1px $theme-color inset, -1px -1px 1px $theme-color inset;
+      $w: 16px;
+      $h: 14px;
+      $r: 200px;
+      $vv: calc(100% - #{$w});
+      $hh: calc(100% - #{$h});
+      clip-path: polygon($w 0, calc(100% - #{$w} * 2 - #{$r}) 0, calc(100% - #{$w} - #{$r}) $h, $vv $h, 100% calc(#{$h} * 2), 100% $hh, $vv 100%, $w 100%, 0 $hh, 0 $h);
+    }
+  }
+
+  .btn {
+    background-image: linear-gradient(180deg, #5ac8f666 0%, #01336566 84%);
+    box-shadow: inset 0 2px 8px 0 #33bbff80;
+    border-radius: 4px;
+    line-height: 30px;
+    text-align: center;
+    cursor: pointer;
+    padding: 0 16px;
   }
 }
 </style>