smart-ask-answer-web/src/views/smart-ask-answer/assistant-2/index.vue

<template>
  <div class="assistant-2">
    <div class="assistant-head">
      <img src="./imgs/logo-1.png"/>
      <div class="title">
        <div>深圳口岸服务网</div>
        <div>{{'Shenzhen Port Service Platform'.toUpperCase()}}</div>
      </div>
      <div class="sub-title">"i口岸"通关小助理</div>
      <div class="tips">
        <div class="__hover" @click="state.showHelp = true">使用帮助</div>
        <div class="split"/>
        <div class="__hover" @click="state.showAgreement = true">用户协议</div>
        <div class="split"/>
        <div class="__hover" @click="state.showDisclaimers = true">免责声明</div>
      </div>
    </div>
    <div class="assistant-main">
      <div class="assistant-main-list">
        <div class="assistant-main-list-hot">
          <div class="list-head">
            <img src="./imgs/hot-icon.png"/>
            热门主题
          </div>
          <div class="hot-theme">
            <div class="left __hover" @click="onThemeScroll(-100)"/>
            <div class="themes" ref="ref_theme">
              <template v-for="item in state.hotList.theme">
                <div class="item __hover" :class="{active: state.hotList.themeId == item.id}" @click="initQuestion(item.id)">{{item.themeName}}</div>
              </template>
            </div>
            <div class="right __hover" @click="onThemeScroll(100)"/>
          </div>
          <div class="question-title">
            热点问题
          </div>
          <div class="hot-question">
            <template v-if="state.hotList.question.length > 0">
              <template v-for="item in state.hotList.question">
                <div class="item">
                  <div/>
                  <div class="__hover" @click="ref_chat.setText(item.hotContent, true)">
                    <CzrEllipsis :value="item.hotContent"/>
                  </div>
                </div>
              </template>
            </template>
            <div class="none_1" v-else>
              <img src="@/views/smart-ask-answer/assistant-2/imgs/none.png"/>
            </div>
          </div>
        </div>
        <div class="assistant-main-list-ask">
          <div class="list-head">
            <img src="./imgs/ask-icon.png"/>
            提问记录
            <div class="__hover" @click="onClearAsk">清空记录</div>
          </div>
          <div class="list-content">
            <template v-if="state.askList.length > 0">
              <template v-for="(item, index) in state.askList">
                <div class="item __hover">
                  <img src="./imgs/ask-icon-2.png"/>
                  <span @click="ref_chat.setText(item)">{{item}}</span>
                  <img src="./imgs/ask-del.png" class="__hover" @click="onDelAsk(index)"/>
                </div>
              </template>
            </template>
            <div class="none_1" v-else>
              <img src="@/views/smart-ask-answer/assistant-2/imgs/none.png"/>
            </div>
          </div>
        </div>
      </div>
      <div class="assistant-main-content">
        <chatCom ref="ref_chat" @getText="getText"/>
      </div>
    </div>
    <CzrDialog
        :show="state.showHelp"
        width="560px"
        :show-submit="false"
        :show-close="false"
        :hiddenStyle="true"
    >
      <div class="dialog">
        <div class="dialog-title" style="background: linear-gradient(90deg, #677AFD, #8695FD);">
          <img src="@/views/smart-ask-answer/assistant-2/imgs/icon-1.png"/>使用帮助<SvgIcon name="czr_close_1" color="#ffffff" size="16" class="__hover" @click="state.showHelp = false"/>
        </div>
        <div class="dialog-content help">
          <div><div>我学习了<span>口岸知识</span>，能帮您解决口岸相关问题。</div></div>
          <div><div>提问字数应控制在<span>200字以内</span>，简要描述业务相关问题，避免出现<span>事例说明</span>和具体<span>个人信息</span>。</div></div>
          <div><div>提问范围应在<span>业务以内</span>，避免与业务无关的内容。</div></div>
          <div><div>提问描述应<span>完整简明</span>，避免仅输入“去哪里办理？”、“要带什么材料”等问法。</div></div>
          <div><div>提问内容尽量避免出现<span>字母、数字、特殊符号</span>等非简体中文文字内容。</div></div>
          <div><div>提问避免上<span>上下文分割</span>，避免多次重复提问同一个问题。</div></div>
        </div>
      </div>
    </CzrDialog>
    <CzrDialog
        :show="state.showAgreement"
        width="560px"
        height="560px"
        :show-submit="false"
        :show-close="false"
        :hiddenStyle="true"
    >
      <div class="dialog">
        <div class="dialog-title" style="background: linear-gradient(90deg, #2780FD, #579BFC);">
          <img src="@/views/smart-ask-answer/assistant-2/imgs/icon-2.png"/>用户协议<SvgIcon name="czr_close_1" color="#ffffff" size="16" class="__hover" @click="state.showAgreement = false"/>
        </div>
        <div class="dialog-content agreement">
          <div>
            <div>尊敬的用户：</div>
            <div>欢迎您使用深圳口岸服务网“i口岸”通关小助理（以下简称“本系统”）。在本协议中，用户统一被称为“您”，请您务必仔细阅读并充分理解本协议内容。若您不同意本协议及其各项条款，请立即停止使用本系统。若您继续使用本系统，则视为您已经理解、同意并自愿接受本协议的所有内容。</div>
            <div>本协议的条款将不定期根据现实情况作出调整及更新，不再另行通知，请您自行保持关注。您在更新的协议条款发布之后继续使用本平台，即视为您已接受修改后的协议。</div>
            <div>在本协议中，您需确认，代表您使用本系统的用户已获得充分且合法的授权，且该用户有权代表您接受并履行本协议所规定的各项义务。同时，您应明确知晓并同意，本系统仅向年满18周岁且具备完全民事行为能力的自然人授予使用权限，未成年人及无完全民事行为能力人请在监护人帮助下使用本系统。</div>
            <div class="title">一、服务使用和信息内容规范</div>
            <div>(一) 内容合法性与合规性</div>
            <div>您郑重承诺，在使用本系统时，将严格遵守国家法律法规，不得从事任何违法或违反本协议的活动，严禁发布虚假信息或不当信息。对于违反本规定的内容，本系统将依法采取相应处理措施，包括但不限于不予正常显示、发出警告、限制平台功能使用、封禁账号等。在使用本系统的过程中，您有责任确保所输入的内容不得违反任何法律法规，严禁侵犯他人合法权益（包括但不限于知识产权及其他民事权利），并且应当严格遵守社会公序良俗。在输入内容之前，请仔细检查，避免输入敏感信息或机密信息。</div>
            <div>(二) 内容发布与传播规范</div>
            <div>若您需要对外发布或传播本系统所生成的内容，应当确保此类发布或传播行为符合法律规定的标识要求。 本系统致力于为用户生成高质量的内容，并采取了一系列安全措施对不当内容进行过滤。然而，鉴于AI技术的固有特性，本系统无法完全保证所生成内容的合法性、准确性或适用性。因此，您有义务自行对内容进行审查，并对自身基于该内容所实施的行为负责。本系统对内容不承担任何法律责任，亦不会因您使用内容或违反本协议的行为而承担任何法律责任。 当您对外发布本系统生成的内容时，您应当对所发布内容的真实性负责。</div>
            <div>(三) 内容使用注意事项</div>
            <div>本系统所输出的内容仅供参考，不宜将其作为专业建议或用于商业用途。在可能产生重大影响的情形下，建议您向权威机构进行咨询。您应自行承担因依赖本系统输出内容而产生的一切风险和后果。 除非本协议有明确规定或法律法规另有要求，本系统不会将您的输入内容或输出内容用于AI模型训练或其他任何用途。 您应当确保所有经您授权使用本系统的用户均严格遵守本协议的各项规定。</div>
            <div class="title">二、有限责任</div>
            <div>(一) 服务质量与连续性</div>
            <div>本系统将依据现有的技术水平和条件为您提供服务，并尽力保障服务的连贯性和安全性。但需明确的是，本系统不保证服务的可用性、可靠性或连续性。为了持续提升服务质量，我们可能会不定期对系统进行更新、维护或暂停服务，在此过程中本系统无需对由此给您造成的任何影响承担责任。</div>
            <div>(二) 用户责任与赔偿</div>
            <div>您应确保所输入内容的授权来源合法有效，若因输入内容引发任何纠纷或造成损失，均由您自行承担。若给本系统造成损失的，您应当依法予以赔偿。 若您对本系统输出的内容存在异议，请及时向本系统反馈。本系统将认真对待并妥善处理，但对于因您传播敏感信息或存在歧义内容而引发的侵权、纠纷或损失，本系统不承担任何责任。</div>
            <div>本系统将依法对违法内容进行处理，但不保证能够及时发现并处理所有违法内容。您应当对输入和输出内容的合法性负责。对于因非故意或重大过失导致的数据问题，本系统不承担任何法律责任。 本系统对任何间接性、后果性、惩戒性、偶然性或特殊性损害均不承担责任。 在使用本系统过程中，您应当遵守国家相关法律法规。</div>
          </div>
        </div>
      </div>
    </CzrDialog>
    <CzrDialog
        :show="state.showDisclaimers"
        width="560px"
        height="560px"
        :show-submit="false"
        :show-close="false"
        :hiddenStyle="true"
    >
      <div class="dialog">
        <div class="dialog-title" style="background: linear-gradient(90deg, #F95955, #FE817E);">
          <img src="@/views/smart-ask-answer/assistant-2/imgs/icon-3.png"/>免责声明<SvgIcon name="czr_close_1" color="#ffffff" size="16" class="__hover" @click="state.showDisclaimers = false"/>
        </div>
        <div class="dialog-content disclaimers">
          <div>
            <div>尊敬的用户：</div>
            <div>您好！深圳口岸服务网“i口岸”通关小助理是一款旨在为用户提供精准、便捷的自动答复服务的工具，为确保服务的合规性与信息的准确性，特此发布以下内容：</div>
            <div class="title">一、内容合规声明：</div>
            <div>深圳口岸服务网“i口岸”通关小助理严格遵守《生成式人工智能服务管理办法》等相关规定，确保使用具有合法来源的数据和基础模型，所提供的答复内容合法、客观、真实。所有通过本助手生成的信息均经过严格的训练和筛选，不含有任何违法、虚假或误导性的内容，我们也将持续监控并优化服务，以应对可能出现的合规风险。</div>
            <div class="title">二、免责声明：</div>
            <div>1.深圳口岸服务网“i口岸”通关小助理答复内容是通过人工智能技术生成，所提供的信息仅供参考。若有存在某些歧义或不够准确的答复情况，建议您访问来源链接中的原始文件，并以原文内容为最终依据。</div>
            <div>2.当深圳口岸服务网“i口岸”通关小助理的自动答复中包含链接至其他网站时，请您以所链接网页上的具体内容为准。</div>
            <div>3.对基于深圳口岸服务网“i口岸”通关小助理答复内容进行截图、转载等操作的用户，我们提醒您务必尊重并保护第三方的知识产权及其他合法权益。若在此过程中涉及侵犯任何第三方的合法权益，相关法律责任将由用户本人承担。本网站不承担由此产生的任何法律责任。</div>
            <div>感谢您使用深圳口岸服务网“i口岸”通关小助理，期待为您提供更优质的服务。</div>
          </div>
        </div>
      </div>
    </CzrDialog>
  </div>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, onBeforeMount, onMounted, reactive, ref, watch} from "vue";
import CzrDialog from "@/components/czr-ui/CzrDialog.vue";
import chatCom from './chat.vue'
import {
  cmsAiQueryHotReclist,
  cmsAiQueryHotThemelist,
  staticConQueryQuestionslist, matterQueryMatterlist, policyInfoQueryPolicyInfolist
} from "@/views/smart-ask-answer/assistant-2/cms/api";
import chatLogo from "./imgs/avatar.png";

const askSplit = 'd95839a9-1b75-8ba3-06e7-8fc46aff233b'
const askKey = 'assistant_askList'
const state: any = reactive({
  showHelp: false,
  showAgreement: false,
  showDisclaimers: false,
  askList: localStorage.getItem(askKey) ? localStorage.getItem(askKey).split(askSplit) : [],
  hotList: {
    theme: [],
    themeId: '',
    question: [],
  },
})
const ref_theme = ref()
const ref_chat = ref()
const getText = (text: string) => {
  setAskList(text)
}
const setAskList = (text: string) => {
  const nowAsk = localStorage.getItem(askKey) ? localStorage.getItem(askKey).split(askSplit) : []
  nowAsk.unshift(text)
  localStorage.setItem(askKey, nowAsk.slice(0, 20).join(askSplit))
  state.askList = nowAsk
}
const onDelAsk = (index) => {
  state.askList.splice(index, 1)
  localStorage.setItem(askKey, state.askList.join(askSplit))
}
const onClearAsk = () => {
  state.askList = []
  localStorage.setItem(askKey, state.askList.join(askSplit))
}
const initTheme = () => {
  const params = {
    data: {
      pageIndex: 1,
      pageSize: 10,
    }
  }
  cmsAiQueryHotThemelist(params).then(res => {
    state.hotList.theme = res?.data?.list || []
    if (state.hotList.theme.length > 0) {
      initQuestion(state.hotList.theme[0].id)
    }
  })
}
const initQuestion = (id) => {
  state.hotList.themeId = id
  const params = {
    data: {
      pageIndex: 1,
      pageSize: 10,
      condition: {
        themeId: id
      }
    }
  }
  cmsAiQueryHotReclist(params).then(res => {
    state.hotList.question = res?.data?.list || []
  })
}
const onThemeScroll = (step) => {
  ref_theme.value.scrollTo(ref_theme.value.scrollLeft + step, 0)
}
onBeforeMount(() => {
  document.title = '"i口岸"通关小助理'
  let link: any = document.querySelector("link[rel*='icon']") || document.createElement('link');
  link.type = 'image/x-icon';
  link.rel = 'shortcut icon';
  link.href = chatLogo;
  document.head.appendChild(link);
})
onMounted(() => {
  initTheme()
})
</script>

<style lang="scss" scoped>
::-webkit-scrollbar-thumb { background-color: transparent; }
.none_1 {
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.assistant-2 {
  background-image: url("./imgs/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .assistant-head {
    display: flex;
    align-items: center;
    .title {
      border-right: 2px solid rgba(0, 0, 0, 0.2);
      line-height: 1;
      padding-right: 1.5rem;
      margin-right: 1.5rem;
      >div:nth-child(1) {
        font-weight: bold;
        font-size: 2.25rem;
        color: #111111;
      }
      >div:nth-child(2) {
        margin-top: 4px;
        font-family: Roboto;
        font-weight: 400;
        font-size: 0.81rem;
        color: #111111;
      }
    }
    .sub-title {
      font-weight: 500;
      font-size: 2.38rem;
      color: #000000;
    }
    .tips {
      width: 19.69rem;
      height: 2.25rem;
      margin-left: 12.19rem;
      background: #FEF0F0;
      border-radius: 1.13rem;
      font-weight: 400;
      font-size: 1rem;
      color: #D32521;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.25rem;
      .split {
        width: 0.06rem;
        height: 0.88rem;
        background-color: #D32521;
      }
    }
  }
  .assistant-main {
    display: flex;
    gap: 1.5rem;
    height: 47.75rem;
    .assistant-main-list {
      width: 24.25rem;
      display: flex;
      flex-direction: column;
      gap: 24px;
      .assistant-main-list-hot {
        height: 26.38rem;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        background: #FFFFFF;
        border-radius: 0.5rem;
        padding: 0 1.5rem;
        &:before {
          content: '';
          background-image: url("./imgs/hot-bg.png");
          background-size: 100% 100%;
          width: 100%;
          height: 6.44rem;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 0;
        }
        .list-head {
          margin-top: 1.44rem;
          z-index: 2;
          width: 100%;
          display: flex;
          align-items: center;
          font-family: Microsoft YaHei;
          font-weight: bold;
          font-size: 1.25rem;
          color: #333333;
          >img {
            margin-right: 0.5rem;
          }
        }
        .hot-theme {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 0.5rem;
          margin-top: 1.94rem;
          z-index: 2;
          padding-bottom: 0.6rem;
          border-bottom: 1px solid #E6E9ED;
          .left, .right {
            width: 2rem;
            height: 2rem;
            background: #FFFFFF;
            border-radius: 0.4rem 0 0 0.4rem;
            border: 1px solid #E6E9ED;
            display: flex;
            align-items: center;
            justify-content: center;
            &:after {
              content: '';
              background-image: url("./imgs/left-arrow.png");
              width: 0.44rem;
              height: 0.63rem;
              background-size: 100% 100%;
              background-repeat: no-repeat;
            }
            &:hover {
              background-color: #F4F6F9;
            }
          }
          .right {
            transform: rotate(180deg);
          }
          .themes {
            display: flex;
            flex: 1;
            overflow-x: auto;
            &::-webkit-scrollbar {
              height: 0;
            }
            .item {
              flex: 0 0 auto;
              font-family: Microsoft YaHei;
              font-weight: bold;
              font-size: 1rem;
              color: #666666;
              padding: 0.63rem 0.5rem;
              border-radius: 0.25rem;
              &.active {
                font-family: Microsoft YaHei;
                font-size: 1.13rem;
                color: #D32521;
                background-color: rgba(211, 37, 33, 0.1);
              }
            }
          }
        }
        .question-title {
          margin-top: 1.06rem;
          width: fit-content;
          font-family: Microsoft YaHei;
          font-weight: bold;
          font-size: 1.13rem;
          color: #D32521;
          padding: 0.25rem 0.5rem 0.25rem 0.75rem;
          background-color: rgba(211, 37, 33, 0.1);
          display: flex;
          position: relative;
          &:before {
            content: '';
            width: 0.31rem;
            height: 100%;
            background: #D32521;
            position: absolute;
            left: 0;
            top: 0;
          }
        }
        .hot-question {
          flex: 1;
          margin: 1rem 0;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          .item {
            display: flex;
            align-items: center;
            >:nth-child(1) {
              width: 0.31rem;
              height: 0.31rem;
              background: #D32521;
              margin-right: 0.5rem;
            }
            >:nth-child(2) {
              flex: 1;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 1rem;
              color: #111111;
              overflow: hidden;
            }
          }
        }
      }
      .assistant-main-list-ask {
        margin-top: auto;
        height: 19.81rem;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        background: #FFFFFF;
        border-radius: 0.5rem;
        padding: 0 1.5rem;
        &:before {
          content: '';
          background-image: url("./imgs/ask-bg.png");
          background-size: 100% 100%;
          width: 100%;
          height: 6.13rem;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 0;
        }
        .list-head {
          margin-top: 1.44rem;
          z-index: 2;
          width: 100%;
          display: flex;
          align-items: center;
          font-family: Microsoft YaHei;
          font-weight: bold;
          font-size: 1.25rem;
          color: #333333;
          >img {
            margin-right: 0.5rem;
          }
          >div {
            margin-left: auto;
            width: 4.63rem;
            height: 1.63rem;
            background: rgba(255,255,255,0.29);
            border-radius: 0.25rem;
            border: 1px solid #E6E9ED;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 0.88rem;
            color: #111111;
          }
        }
        .list-content {
          margin-top: 1.5rem;
          width: 100%;
          flex: 1;
          margin-bottom: 1rem;
          overflow-y: auto;
          .item {
            width: 100%;
            height: 2.19rem;
            border-radius: 0.25rem;
            display: flex;
            align-items: center;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 1rem;
            color: #111111;
            >:nth-child(1) {
              margin-left: 0.5rem;
              margin-right: 0.94rem;
            }
            >:nth-child(3) {
              margin-left: auto;
              margin-right: 1rem;
            }
            &:hover {
              background: #F1F4F8;
            }
          }
        }
      }
    }
    .assistant-main-content {
      width: 49.25rem;
      flex: 1;
    }
  }
}
.dialog {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 8px 20px 0px rgba(197,199,211,0.5);
  .dialog-title {
    height: 72px;
    border-radius: 16px 16px 0px 0px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 24px;
    color: #FFFFFF;
    >img {
      margin-right: 12px;
      width: 28px;
      height: 28px;
    }
    .svg-icon {
      margin-left: auto;
    }
  }
  .dialog-content {
    flex: 1;
    background-color: #ffffff;
    border-radius: 0 0 16px 16px;
    &.help {
      padding: 0 24px;
      >div {
        padding: 16px 0;
        border-bottom: 1px dashed #D8DAE5;
        display: flex;
        align-items: center;
        position: relative;
        &:before {
          content: '';
          min-width: 6px;
          min-height: 6px;
          background: #D32521;
          position: absolute;
          top: 26px;
        }
        &:last-child {
          border-bottom: none;
        }
        >div {
          margin-left: 14px;
          font-weight: 500;
          font-size: 16px;
          color: #111111;
          line-height: 26px;
          text-align: justify;
          >span {
            font-weight: bold;
          }
        }
      }
    }
    &.agreement, &.disclaimers {
      padding: 20px 12px 20px 38px;
      overflow: hidden;
      >div {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        padding-right: 20px;
        text-align: justify;
        >div {
          font-weight: 400;
          font-size: 14px;
          color: #111111;
          line-height: 30px;
          text-indent: 4ch;
          &:first-child {
            text-indent: 0;
          }
          &.title {
            font-weight: bold;
            text-indent: 0;
          }
        }
      }
      }
  }
}
</style>