敏感词方案2

src/views/smart-ask-answer/assistant-2/chat.vue

@@ -80,7 +80,7 @@ const state: any = reactive({
   badMap: new Map(),
   autoList: [],
   chatConfig: {},
-  isSuggest: true
+  isSuggest: true,
 })
 const ref_text = ref()
 const ref_chatMsg = ref()
@@ -101,13 +101,11 @@ const onSend = (text = '') => {
       state.text = ''
     }
     state.isSuggest = true
-    if (state.chatConfig.sensitive_word_avoidance.enabled && state.chatConfig.sensitive_word_avoidance.type === 'keywords') {
-      state.chatConfig.sensitive_word_avoidance.config.keywords.split('\n').forEach(v => {
-        if (state.params.query.includes(v)) {
-          state.isSuggest = false
-        }
-      })
-    }
+    state.chatConfig.sensitive_word_avoidance?.config?.keywords?.split('\n')?.forEach(v => {
+      if (state.params.query.includes(v)) {
+        state.isSuggest = false
+      }
+    })
     emit('getText', state.params.query)
     const ask = {
       type: 'ask',
@@ -139,6 +137,10 @@ const onSend = (text = '') => {
         state.params.parent_message_id = messageEnd.message_id
         state.loading = false
         if (state.chatConfig?.suggested_questions_after_answer?.enabled && state.isSuggest) {
+          const warningStr = state.chatConfig?.sensitive_word_avoidance?.config?.outputs_config?.preset_response
+          if (warningStr && answer.content.includes(warningStr)) {
+            return
+          }
           fetchSuggestedQuestions(state.params.parent_message_id, true, window.czrConfig.dify.appId).then((res: any) => {
             answer.suggest = res.data
             scrollToEnd()

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

@@ -1,81 +1,83 @@
 <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 class="assistant-block">
+      <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>
-    <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 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="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 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>
-                </div>
+                </template>
               </template>
-            </template>
-            <div class="none_1" v-else>
-              <img src="@/views/smart-ask-answer/assistant-2/imgs/none.png"/>
+              <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-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"/>
-                  <div class="__hover" @click="ref_chat.setText(item)">
-                    <CzrEllipsis :value="item"/>
+          <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"/>
+                    <div class="__hover" @click="ref_chat.setText(item)">
+                      <CzrEllipsis :value="item"/>
+                    </div>
+                    <img src="./imgs/ask-del.png" class="__hover" @click="onDelAsk(index)"/>
                   </div>
-                  <img src="./imgs/ask-del.png" class="__hover" @click="onDelAsk(index)"/>
-                </div>
+                </template>
               </template>
-            </template>
-            <div class="none_1" v-else>
-              <img src="@/views/smart-ask-answer/assistant-2/imgs/none.png"/>
+              <div class="none_1" v-else>
+                <img src="@/views/smart-ask-answer/assistant-2/imgs/none.png"/>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="assistant-main-content">
-        <chatCom ref="ref_chat" @getText="getText"/>
+        <div class="assistant-main-content">
+          <chatCom ref="ref_chat" @getText="getText"/>
+        </div>
       </div>
     </div>
     <CzrDialog
@@ -253,7 +255,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-::-webkit-scrollbar-thumb { background-color: transparent; }
+//::-webkit-scrollbar-thumb { background-color: transparent; }
 .none_1 {
   width: 100%;
   height: 100%;
@@ -268,292 +270,299 @@ onMounted(() => {
   background-repeat: no-repeat;
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  .assistant-head {
+  overflow: auto;
+  .assistant-block {
     display: flex;
+    flex-direction: column;
+    justify-content: center;
     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;
+    width: 80rem;
+    height: 55.25rem;
+    overflow: hidden;
+    margin: auto;
+    .assistant-head {
       display: flex;
       align-items: center;
-      justify-content: center;
-      gap: 1.25rem;
-      .split {
-        width: 0.06rem;
-        height: 0.88rem;
-        background-color: #D32521;
+      .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;
+    .assistant-main {
       display: flex;
-      flex-direction: column;
-      gap: 24px;
-      .assistant-main-list-hot {
-        height: 26.38rem;
-        width: 100%;
-        position: relative;
+      gap: 1.5rem;
+      height: 47.75rem;
+      .assistant-main-list {
+        width: 24.25rem;
         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;
+        gap: 24px;
+        .assistant-main-list-hot {
+          height: 26.38rem;
           width: 100%;
+          position: relative;
           display: flex;
-          align-items: center;
-          font-family: Microsoft YaHei;
-          font-weight: bold;
-          font-size: 1.25rem;
-          color: #333333;
-          >img {
-            margin-right: 0.5rem;
+          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;
           }
-        }
-        .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;
+          .list-head {
+            margin-top: 1.44rem;
+            z-index: 2;
+            width: 100%;
             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;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            font-size: 1.25rem;
+            color: #333333;
+            >img {
+              margin-right: 0.5rem;
             }
           }
-          .right {
-            transform: rotate(180deg);
+          .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);
+                }
+              }
+            }
           }
-          .themes {
+          .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;
-            flex: 1;
-            overflow-x: auto;
-            &::-webkit-scrollbar {
-              height: 0;
+            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 {
-              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 {
+              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-size: 1.13rem;
-                color: #D32521;
-                background-color: rgba(211, 37, 33, 0.1);
+                font-weight: 400;
+                font-size: 1rem;
+                color: #111111;
+                overflow: hidden;
               }
             }
           }
         }
-        .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;
+        .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: '';
-            width: 0.31rem;
-            height: 100%;
-            background: #D32521;
+            background-image: url("./imgs/ask-bg.png");
+            background-size: 100% 100%;
+            width: 100%;
+            height: 6.13rem;
             position: absolute;
-            left: 0;
             top: 0;
+            left: 0;
+            z-index: 0;
           }
-        }
-        .hot-question {
-          flex: 1;
-          margin: 1rem 0;
-          overflow-y: auto;
-          display: flex;
-          flex-direction: column;
-          gap: 0.5rem;
-          .item {
+          .list-head {
+            margin-top: 1.44rem;
+            z-index: 2;
+            width: 100%;
             display: flex;
             align-items: center;
-            >:nth-child(1) {
-              width: 0.31rem;
-              height: 0.31rem;
-              background: #D32521;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            font-size: 1.25rem;
+            color: #333333;
+            >img {
               margin-right: 0.5rem;
             }
-            >:nth-child(2) {
-              flex: 1;
+            >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: 1rem;
+              font-size: 0.88rem;
               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 {
+          .list-content {
+            margin-top: 1.5rem;
             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(2) {
-              flex: 1;
-              overflow: hidden;
-            }
-            >:nth-child(3) {
-              margin-left: auto;
-              margin-right: 1rem;
-            }
-            &:hover {
-              background: #F1F4F8;
+            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(2) {
+                flex: 1;
+                overflow: hidden;
+              }
+              >:nth-child(3) {
+                margin-left: auto;
+                margin-right: 1rem;
+              }
+              &:hover {
+                background: #F1F4F8;
+              }
             }
           }
         }
       }
-    }
-    .assistant-main-content {
-      width: 49.25rem;
-      flex: 1;
+      .assistant-main-content {
+        width: 49.25rem;
+        flex: 1;
+      }
     }
   }
 }

src/views/smart-ask-answer/assistant/chat.vue

@@ -79,11 +79,18 @@ const state: any = reactive({
   goodMap: new Map(),
   badMap: new Map(),
   autoList: [],
-  chatConfig: {}
+  chatConfig: {},
+  isSuggest: true
 })
 const ref_text = ref()
 const ref_chatMsg = ref()
 const ref_auto = ref()
+const scrollToEnd = () => {
+  ref_chatMsg.value.scrollTo({
+    top: ref_chatMsg.value.scrollHeight,
+    behavior: 'smooth'
+  });
+}
 const onSend = (text = '') => {
   if ((isValue(state.text.trim()) || text) && !state.loading) {
     state.loading = true
@@ -93,6 +100,12 @@ const onSend = (text = '') => {
       state.params.query = state.text + ''
       state.text = ''
     }
+    state.isSuggest = true
+    state.chatConfig.sensitive_word_avoidance?.config?.keywords?.split('\n')?.forEach(v => {
+      if (state.params.query.includes(v)) {
+        state.isSuggest = false
+      }
+    })
     emit('getText', state.params.query)
     const ask = {
       type: 'ask',
@@ -111,10 +124,7 @@ const onSend = (text = '') => {
     }, {
       onData: (message: string, isFirstMessage: boolean, { conversationId: newConversationId, messageId, taskId }: any) => {
         answer.content += message
-        ref_chatMsg.value.scrollTo({
-          top: ref_chatMsg.value.scrollHeight,
-          behavior: 'smooth'
-        });
+        scrollToEnd()
       },
       onFile(file) {},
       onThought(thought) {},
@@ -126,9 +136,14 @@ const onSend = (text = '') => {
         answer.messageId = messageEnd.message_id
         state.params.parent_message_id = messageEnd.message_id
         state.loading = false
-        if (state.chatConfig?.suggested_questions_after_answer?.enabled) {
+        if (state.chatConfig?.suggested_questions_after_answer?.enabled && state.isSuggest) {
+          const warningStr = state.chatConfig?.sensitive_word_avoidance?.config?.outputs_config?.preset_response
+          if (warningStr && answer.content.includes(warningStr)) {
+            return
+          }
           fetchSuggestedQuestions(state.params.parent_message_id, true, window.czrConfig.dify.appId).then((res: any) => {
             answer.suggest = res.data
+            scrollToEnd()
           })
         }
       },

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

@@ -1,53 +1,76 @@
 <template>
   <div class="assistant">
-    <div class="assistant-title">
-      深圳口岸服务网
-      <span>“i口岸”通关小助理</span>
-    </div>
-    <div class="assistant-main">
-      <div class="assistant-main-list">
-        <div class="assistant-main-list-tips">
-          <div class="__hover" @click="state.showHelp = true">使用帮助</div>
-          <div class="__hover" @click="state.showAgreement = true">用户协议</div>
-          <div class="__hover" @click="state.showDisclaimers = true">免责声明</div>
-        </div>
-        <div class="assistant-main-list-ask">
-          <div class="title_1">
-            提问记录
-            <div class="clear __hover" @click="onClearAsk">
-              <img src="@/views/smart-ask-answer/assistant/imgs/clear.png"/>清空
-            </div>
+    <div class="assistant-block">
+      <div class="assistant-title">
+        深圳口岸服务网
+        <span>“i口岸”通关小助理</span>
+      </div>
+      <div class="assistant-main">
+        <div class="assistant-main-list">
+          <div class="assistant-main-list-tips">
+            <div class="__hover" @click="state.showHelp = true">使用帮助</div>
+            <div class="__hover" @click="state.showAgreement = true">用户协议</div>
+            <div class="__hover" @click="state.showDisclaimers = true">免责声明</div>
           </div>
-          <div class="list_1" v-if="state.askList.length > 0">
-            <template v-for="(item, index) in state.askList">
-              <div class="item">
-                <span class="__hover" @click="ref_chat.setText(item)">{{item}}</span>
-                <div class="del __hover" @click="onDelAsk(index)">删除</div>
+          <div class="assistant-main-list-ask">
+            <div class="title_1">
+              提问记录
+              <div class="clear __hover" @click="onClearAsk">
+                <img src="@/views/smart-ask-answer/assistant/imgs/clear.png"/>清空
               </div>
-            </template>
-          </div>
-          <div class="none_1" v-else>
-            <img src="@/views/smart-ask-answer/assistant/imgs/none.png"/>
-          </div>
-        </div>
-        <div class="assistant-main-list-hot">
-          <div class="assistant-main-list-hot-theme">
-            <div class="title_1">热门主题</div>
-            <div class="list" v-if="state.hotList.theme.length > 0">
-              <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>
+            </div>
+            <div class="list_1" v-if="state.askList.length > 0">
+              <template v-for="(item, index) in state.askList">
+                <div class="item">
+                  <span class="__hover" @click="ref_chat.setText(item)">{{item}}</span>
+                  <div class="del __hover" @click="onDelAsk(index)">删除</div>
+                </div>
               </template>
             </div>
             <div class="none_1" v-else>
               <img src="@/views/smart-ask-answer/assistant/imgs/none.png"/>
             </div>
           </div>
-          <div class="assistant-main-list-hot-question">
-            <div class="title_1">热点问题</div>
-            <div class="list_1" v-if="state.hotList.question.length > 0">
-              <template v-for="item in state.hotList.question">
+          <div class="assistant-main-list-hot">
+            <div class="assistant-main-list-hot-theme">
+              <div class="title_1">热门主题</div>
+              <div class="list" v-if="state.hotList.theme.length > 0">
+                <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="none_1" v-else>
+                <img src="@/views/smart-ask-answer/assistant/imgs/none.png"/>
+              </div>
+            </div>
+            <div class="assistant-main-list-hot-question">
+              <div class="title_1">热点问题</div>
+              <div class="list_1" v-if="state.hotList.question.length > 0">
+                <template v-for="item in state.hotList.question">
+                  <div class="item">
+                    <span class="__hover" @click="ref_chat.setText(item.hotContent, true)">{{item.hotContent}}</span>
+                  </div>
+                </template>
+              </div>
+              <div class="none_1" v-else>
+                <img src="@/views/smart-ask-answer/assistant/imgs/none.png"/>
+              </div>
+            </div>
+          </div>
+          <div class="assistant-main-list-advise" v-loading="state.adviseList.loading">
+            <div class="title_1">
+              智能推荐
+              <div class="options">
+                <template v-for="(item, index) in state.adviseList.options">
+                  <div v-if="index > 0" class="split"/>
+                  <div class="text __hover" :class="{active: state.adviseList.value == item.value}" @click="state.adviseList.value = item.value">{{item.label}}</div>
+                </template>
+              </div>
+            </div>
+            <div class="list_1" v-if="state.adviseList[state.adviseList.value].length > 0">
+              <template v-for="item in state.adviseList[state.adviseList.value]">
                 <div class="item">
-                  <span class="__hover" @click="ref_chat.setText(item.hotContent, true)">{{item.hotContent}}</span>
+                  <span class="__hover" @click="toUrl(item.url)">{{item.name}}</span>
                 </div>
               </template>
             </div>
@@ -56,31 +79,10 @@
             </div>
           </div>
         </div>
-        <div class="assistant-main-list-advise" v-loading="state.adviseList.loading">
-          <div class="title_1">
-            智能推荐
-            <div class="options">
-              <template v-for="(item, index) in state.adviseList.options">
-                <div v-if="index > 0" class="split"/>
-                <div class="text __hover" :class="{active: state.adviseList.value == item.value}" @click="state.adviseList.value = item.value">{{item.label}}</div>
-              </template>
-            </div>
-          </div>
-          <div class="list_1" v-if="state.adviseList[state.adviseList.value].length > 0">
-            <template v-for="item in state.adviseList[state.adviseList.value]">
-              <div class="item">
-                <span class="__hover" @click="toUrl(item.url)">{{item.name}}</span>
-              </div>
-            </template>
-          </div>
-          <div class="none_1" v-else>
-            <img src="@/views/smart-ask-answer/assistant/imgs/none.png"/>
-          </div>
+        <div class="assistant-main-content">
+          <chatCom ref="ref_chat" @getText="getText" @getSuggest="getSuggest" @loadingSuggest="state.adviseList.loading = true"/>
         </div>
       </div>
-      <div class="assistant-main-content">
-        <chatCom ref="ref_chat" @getText="getText" @getSuggest="getSuggest" @loadingSuggest="state.adviseList.loading = true"/>
-      </div>
     </div>
     <CzrDialog
         :show="state.showHelp"
@@ -380,191 +382,198 @@ onMounted(() => {
   background-color: #f4f6f9;
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-  .assistant-title {
-    margin-top: 1rem;
-    font-family: AlibabaPuHuiTi;
-    font-weight: bold;
-    font-size: 50px;
-    color: #111111;
-    letter-spacing: 5px;
-    >span {
-      font-size: 46px;
-      color: #FFFFFF;
-      background: linear-gradient(90deg, #F83C37, #5086FD);
-      border-radius: 8px;
-      padding: 6px 16px 6px 0;
-    }
-  }
-  .assistant-main {
+  overflow: auto;
+  .assistant-block {
     display: flex;
-    gap: 36px;
-    height: 86%;
-    .assistant-main-list {
-      width: 579px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 24px;
-      .assistant-main-list-tips {
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        >div {
-          width: 177px;
-          height: 56px;
-          border-radius: 8px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-family: Microsoft YaHei;
-          font-weight: 400;
-          font-size: 18px;
-          color: #FFFFFF;
-          gap: 12px;
-          &:before {
-            content: '';
-            width: 25px;
-            height: 25px;
-          }
-          &:nth-child(1) {
-            background: linear-gradient(0deg, #677AFD, #8695FD);
-            &:before {
-              background-image: url("@/views/smart-ask-answer/assistant/imgs/icon-1.png");
-            }
-          }
-          &:nth-child(2) {
-            background: linear-gradient(0deg, #2780FD, #579BFC);
-            &:before {
-              background-image: url("@/views/smart-ask-answer/assistant/imgs/icon-2.png");
-            }
-          }
-          &:nth-child(3) {
-            background: linear-gradient(0deg, #F95955, #FE817E);
-            &:before {
-              background-image: url("@/views/smart-ask-answer/assistant/imgs/icon-3.png");
-            }
-          }
-        }
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    width: 1500px;
+    height: 864px;
+    overflow: hidden;
+    margin: auto;
+    .assistant-title {
+      margin-top: 1rem;
+      font-family: AlibabaPuHuiTi;
+      font-weight: bold;
+      font-size: 50px;
+      color: #111111;
+      letter-spacing: 5px;
+      >span {
+        font-size: 46px;
+        color: #FFFFFF;
+        background: linear-gradient(90deg, #F83C37, #5086FD);
+        border-radius: 8px;
+        padding: 6px 16px 6px 0;
       }
-      .assistant-main-list-ask, .assistant-main-list-hot, .assistant-main-list-advise {
-        width: 100%;
-        flex: 1;
-        background: #FFFFFF;
-        border-radius: 16px;
-        padding: 24px;
-        overflow: hidden;
+    }
+    .assistant-main {
+      display: flex;
+      gap: 36px;
+      height: 86%;
+      .assistant-main-list {
+        width: 579px;
         display: flex;
         flex-direction: column;
-      }
-      .assistant-main-list-ask {
-        .title_1 {
-          .clear {
-            width: 68px;
-            height: 28px;
-            background: rgba(211,37,33,0);
-            border-radius: 4px;
-            border: 1px solid #1D64FD;
+        align-items: center;
+        gap: 24px;
+        .assistant-main-list-tips {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          >div {
+            width: 177px;
+            height: 56px;
+            border-radius: 8px;
             display: flex;
             align-items: center;
             justify-content: center;
             font-family: Microsoft YaHei;
             font-weight: 400;
-            font-size: 14px;
-            color: #1D64FD;
-            >img {
-              margin-right: 4px;
-
+            font-size: 18px;
+            color: #FFFFFF;
+            gap: 12px;
+            &:before {
+              content: '';
+              width: 25px;
+              height: 25px;
+            }
+            &:nth-child(1) {
+              background: linear-gradient(0deg, #677AFD, #8695FD);
+              &:before {
+                background-image: url("@/views/smart-ask-answer/assistant/imgs/icon-1.png");
+              }
+            }
+            &:nth-child(2) {
+              background: linear-gradient(0deg, #2780FD, #579BFC);
+              &:before {
+                background-image: url("@/views/smart-ask-answer/assistant/imgs/icon-2.png");
+              }
+            }
+            &:nth-child(3) {
+              background: linear-gradient(0deg, #F95955, #FE817E);
+              &:before {
+                background-image: url("@/views/smart-ask-answer/assistant/imgs/icon-3.png");
+              }
             }
           }
         }
-      }
-      .assistant-main-list-hot {
-        flex-direction: row;
-        .assistant-main-list-hot-theme {
-          width: 222px;
+        .assistant-main-list-ask, .assistant-main-list-hot, .assistant-main-list-advise {
+          width: 100%;
+          flex: 1;
+          background: #FFFFFF;
+          border-radius: 16px;
+          padding: 24px;
+          overflow: hidden;
           display: flex;
           flex-direction: column;
-          .list {
-            margin-top: 22px;
-            display: flex;
-            flex-wrap: wrap;
-            align-content: flex-start;
-            height: 118px;
-            gap: 8px;
-            .item {
-              height: 34px;
-              background: linear-gradient(90deg, #418EFA, #8795FD);
+        }
+        .assistant-main-list-ask {
+          .title_1 {
+            .clear {
+              width: 68px;
+              height: 28px;
+              background: rgba(211,37,33,0);
               border-radius: 4px;
+              border: 1px solid #1D64FD;
               display: flex;
               align-items: center;
               justify-content: center;
               font-family: Microsoft YaHei;
               font-weight: 400;
               font-size: 14px;
-              color: #FFFFFF;
-              padding: 0 14px;
-              &.active {
-                background: #d32520;
+              color: #1D64FD;
+              >img {
+                margin-right: 4px;
+
               }
             }
           }
         }
-        .assistant-main-list-hot-question {
-          overflow: hidden;
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          margin-left: 12px;
-          position: relative;
-          background-color: #f4f6fa;
-          padding: 12px 20px;
-          border-radius: 16px;
-          .title_1 {
-            font-size: 20px;
-          }
-          .list_1 {
-            margin-top: 14px;
-            height: 96px;
-            .item {
-              >span {
-                min-height: 34px;
-                line-height: 34px;
+        .assistant-main-list-hot {
+          flex-direction: row;
+          .assistant-main-list-hot-theme {
+            width: 222px;
+            display: flex;
+            flex-direction: column;
+            .list {
+              margin-top: 22px;
+              display: flex;
+              flex-wrap: wrap;
+              align-content: flex-start;
+              height: 118px;
+              gap: 8px;
+              .item {
+                height: 34px;
+                background: linear-gradient(90deg, #418EFA, #8795FD);
+                border-radius: 4px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                font-size: 14px;
+                color: #FFFFFF;
+                padding: 0 14px;
+                &.active {
+                  background: #d32520;
+                }
               }
             }
           }
-        }
-      }
-      .assistant-main-list-advise {
-        .title_1 {
-          .options {
+          .assistant-main-list-hot-question {
+            overflow: hidden;
+            flex: 1;
             display: flex;
-            align-items: center;
-            gap: 20px;
-            font-family: Microsoft YaHei;
-            font-weight: 400;
-            font-size: 16px;
-            color: #1D64FD;
-            .split {
-              width: 1px;
-              height: 14px;
-              background: #1D64FD;
+            flex-direction: column;
+            margin-left: 12px;
+            position: relative;
+            background-color: #f4f6fa;
+            padding: 12px 20px;
+            border-radius: 16px;
+            .title_1 {
+              font-size: 20px;
             }
-            .text {
-              &.active {
-                color: #d32520;
+            .list_1 {
+              margin-top: 14px;
+              height: 96px;
+              .item {
+                >span {
+                  min-height: 34px;
+                  line-height: 34px;
+                }
+              }
+            }
+          }
+        }
+        .assistant-main-list-advise {
+          .title_1 {
+            .options {
+              display: flex;
+              align-items: center;
+              gap: 20px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              font-size: 16px;
+              color: #1D64FD;
+              .split {
+                width: 1px;
+                height: 14px;
+                background: #1D64FD;
+              }
+              .text {
+                &.active {
+                  color: #d32520;
+                }
               }
             }
           }
         }
       }
-    }
-    .assistant-main-content {
-      width: 825px;
-      flex: 1;
+      .assistant-main-content {
+        width: 825px;
+        flex: 1;
+      }
     }
   }
 }