dvcp_v2_webapp/components/AiAssist.vue

<script>
import AiDrag from "./AiDrag.vue";
import {Loading} from "element-ui";

export default {
  name: "AiAssist",
  components: {AiDrag},
  data() {
    return {
      dialog: false,
      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" @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">
      <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>
      </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;
  }

  :deep(.assistDialog) {
    .border-box-content {
      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 {
      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>