|
|
@@ -0,0 +1,382 @@
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue'
|
|
|
+import { Popover, Popup, Overlay, Swipe, SwipeItem, Field } from 'vant'
|
|
|
+import AppEmpty from '@/ui/empty/index.vue'
|
|
|
+
|
|
|
+const rightAction = ref({
|
|
|
+ show: false,
|
|
|
+ actions: [
|
|
|
+ { text: '新对话', className: 'highlight-text' },
|
|
|
+ { text: '历史对话' }
|
|
|
+ ]
|
|
|
+})
|
|
|
+
|
|
|
+function onSelectRightAction (action) {
|
|
|
+ console.log('action', action)
|
|
|
+ if (action.text === '新对话') {
|
|
|
+ doNewQuestion()
|
|
|
+ } else {
|
|
|
+ historyModel.value.show = true
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const historyModel = ref({
|
|
|
+ show: false
|
|
|
+})
|
|
|
+
|
|
|
+function doNewQuestion () {
|
|
|
+ historyModel.value.show = false
|
|
|
+}
|
|
|
+
|
|
|
+function goHistory () {
|
|
|
+ historyModel.value.show = false
|
|
|
+}
|
|
|
+
|
|
|
+const promptModel = ref({
|
|
|
+ current: 0,
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ text: '111我是 [XXX公司] 的 [采销员]，我想看 [华北地区] 最近一个月与 [光刻胶] 相关的标讯。'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '222我是 [XXX公司] 的 [采销员]，我想看 [华北地区] 最近一个月与 [光刻胶] 相关的标讯。'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '333我是 [XXX公司] 的 [采销员]，我想看 [华北地区] 最近一个月与 [光刻胶] 相关的标讯。'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+})
|
|
|
+
|
|
|
+function onChangePrompt (index) {
|
|
|
+ promptModel.value.current = index
|
|
|
+}
|
|
|
+
|
|
|
+const promptEle = ref(null)
|
|
|
+function doChangePrompt (val) {
|
|
|
+ if (val) {
|
|
|
+ promptEle.value.next()
|
|
|
+ } else {
|
|
|
+ promptEle.value.prev()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function doSelectPrompt (item) {
|
|
|
+ questionModel.value.input = item.text
|
|
|
+}
|
|
|
+
|
|
|
+const questionModel = ref({
|
|
|
+ input: '',
|
|
|
+ inputTheme: 'full'
|
|
|
+})
|
|
|
+
|
|
|
+function doClickInputIcon (type) {
|
|
|
+ console.log('t', type)
|
|
|
+ switch (type) {
|
|
|
+ case 'full': {
|
|
|
+ questionModel.value.inputTheme = 'full'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ case 'scale': {
|
|
|
+ questionModel.value.inputTheme = 'scale'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ case 'submit': {
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class='ai-search--page'>
|
|
|
+ <div class='ai-search--header flex flex-(items-center justify-between)'>
|
|
|
+ <div class='flex flex-(items-center justify-between)'>
|
|
|
+ <span class='back-icon'>
|
|
|
+ <i class="iconfont icon-back"></i>
|
|
|
+ </span>
|
|
|
+ <div class='flex flex-(items-center justify-between) header-left'>
|
|
|
+ <img class='main-logo-img' src="@/assets/image/public/logo_new.png" />
|
|
|
+ <div class='main-logo'>
|
|
|
+ <span class='main-text'>剑鱼标讯</span>
|
|
|
+ <br>
|
|
|
+ <span>jianyu360.cn</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <popover
|
|
|
+ placement="bottom-end"
|
|
|
+ :offset='[-16, 12]'
|
|
|
+ v-model="rightAction.show"
|
|
|
+ trigger="click"
|
|
|
+ :actions="rightAction.actions"
|
|
|
+ @select="onSelectRightAction"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <span class='right-icon'>
|
|
|
+ <i class="iconfont icon-gengduo-shuxiang"></i>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </popover>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class='ai-search--content'>
|
|
|
+ <div class='ai-search--empty'>
|
|
|
+ <app-empty state="ai">你想看看啥子？快告诉我吧~</app-empty>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class='question-prompt-container'>
|
|
|
+
|
|
|
+ <swipe ref='promptEle' @change="onChangePrompt" :show-indicators='false' :loop='false'>
|
|
|
+ <swipe-item v-for='(item, index) in promptModel.list' :key='index'>
|
|
|
+ <div class='question-prompt-item'>
|
|
|
+ <div class="custom-indicator flex flex-(items-center justify-between)">
|
|
|
+ <span class='prompt-tip-text'>您可以参照示例进行提问：</span>
|
|
|
+ <div class='prompt-arrow flex flex-(items-center justify-between)'>
|
|
|
+ <span @click='doChangePrompt(false)' class='prompt-arrow-icon' :class='{"active": index > 0}'>
|
|
|
+ <i class='iconfont icon-up'></i>
|
|
|
+ </span>
|
|
|
+ <div>{{ promptModel.current + 1 }} / {{ promptModel.list.length }}</div>
|
|
|
+ <span @click='doChangePrompt(true)' class='prompt-arrow-icon' :class='{"active": index < promptModel.list.length - 1}'>
|
|
|
+ <i class='iconfont icon-down'></i>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div @click='doSelectPrompt(item)'>{{item.text}}</div>
|
|
|
+ </div>
|
|
|
+ </swipe-item>
|
|
|
+ </swipe>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <overlay :z-index='2' :show="questionModel.inputTheme === 'full'" @click='doClickInputIcon("scale")' />
|
|
|
+ <div class='question-input-container' :class='questionModel.inputTheme'>
|
|
|
+ <div class='question-input-item'>
|
|
|
+ <field
|
|
|
+ v-model="questionModel.input"
|
|
|
+ center
|
|
|
+ clearable
|
|
|
+ row='1'
|
|
|
+ :autosize='{
|
|
|
+ maxHeight: 100,
|
|
|
+ minHeight: 24
|
|
|
+ }'
|
|
|
+ type="textarea"
|
|
|
+ placeholder="发消息..."
|
|
|
+ >
|
|
|
+ <template #button>
|
|
|
+ <div class='input-icon-container flex flex-(col items-center justify-between)'>
|
|
|
+ <img v-if='questionModel.inputTheme === "scale"' @click='doClickInputIcon("full")' class='input-icon full-icon' src='@/assets/image/ai-search/scale.png' alt='submit'>
|
|
|
+ <img v-if='questionModel.inputTheme === "full"' @click='doClickInputIcon("scale")' class='input-icon scale-icon' src='@/assets/image/ai-search/disscale.png' alt='submit'>
|
|
|
+ <img @click='doClickInputIcon("submit")' class='input-icon submit-icon' src='@/assets/image/icon/icon-submit.png' alt='submit'>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </field>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <popup
|
|
|
+ overlay-class='ai-search--history-overlay'
|
|
|
+ class='ai-search--history-popup'
|
|
|
+ v-model="historyModel.show"
|
|
|
+ position="right"
|
|
|
+ closeable
|
|
|
+ close-icon="clear"
|
|
|
+ >
|
|
|
+ <div class='history-list-container'>
|
|
|
+ <div>
|
|
|
+ <div class='history-list--time'>今天</div>
|
|
|
+ <div class='history-list--item' @click='goHistory'>华北地区光刻胶市场动态</div>
|
|
|
+ <div class='history-list--item' @click='goHistory'>华北地区光刻胶市场动态</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class='history-empty-container flex flex-(col items-center justify-center)'>
|
|
|
+ <div class='flex flex-(col items-center align-center)'>
|
|
|
+ <app-empty state='back'>您还没有和我聊天呢，现在开始吧</app-empty>
|
|
|
+ <div class='new-question-button' @click='doNewQuestion'>开启对话</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang='scss' scoped>
|
|
|
+.ai-search-- {
|
|
|
+ //
|
|
|
+ &page {
|
|
|
+ ::v-deep {}
|
|
|
+
|
|
|
+ .new-question-button {
|
|
|
+ width: 160px;
|
|
|
+ height: 48px;
|
|
|
+ line-height: 48px;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: linear-gradient(101.8deg, #2ABED1 0%, #0A6CFF 100%);
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &header {
|
|
|
+ &--left {}
|
|
|
+
|
|
|
+ .main-logo {
|
|
|
+ color: rgba(155, 156, 163, 1);
|
|
|
+ font-size: 12px;
|
|
|
+ .main-text {
|
|
|
+ display: inline-block;
|
|
|
+ color: rgba(95, 94, 100, 1);
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-logo-img {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .back-icon {
|
|
|
+ padding: 10px 12px;
|
|
|
+ margin-right: 24px;
|
|
|
+ i {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #5F5E64;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-icon {
|
|
|
+ padding: 10px 12px;
|
|
|
+ i {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 24px;
|
|
|
+ color: rgba(39, 38, 54, 1);
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &content {
|
|
|
+
|
|
|
+ .question-input-container {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 36px;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 3;
|
|
|
+
|
|
|
+
|
|
|
+ .question-input-item {
|
|
|
+ margin: 16px;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0px 4px 12px 0px rgba(29, 29, 29, 0.1);
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ &.full {
|
|
|
+ bottom: 0;
|
|
|
+ height: 475px;
|
|
|
+ border-top-left-radius: 8px;
|
|
|
+ border-top-right-radius: 8px;
|
|
|
+ background: url('@/assets/image/ai-search/bg.png') right no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ .question-input-item {
|
|
|
+ box-shadow: unset;
|
|
|
+ border: unset;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .van-field {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.scale {}
|
|
|
+
|
|
|
+ .van-field {
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .input-icon-container {}
|
|
|
+ .input-icon {
|
|
|
+ width: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .question-prompt-container {
|
|
|
+ .question-prompt-item {
|
|
|
+ min-height: 100px;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid var(--brand-2-abed-112, rgba(42, 190, 209, 0.12));
|
|
|
+ box-shadow: 0px 4px 12px 0px rgba(29, 29, 29, 0.1);
|
|
|
+ background: linear-gradient(167.96deg, #FFFFFF 0%, #EDFEFF 45.31%, rgba(237, 254, 255, 0) 100%);
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ padding: 12px;
|
|
|
+ margin: 16px;
|
|
|
+ color: rgba(23, 24, 38, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .prompt-arrow {
|
|
|
+ .prompt-arrow-icon {
|
|
|
+ color: #C0C4CC;
|
|
|
+ &.active {
|
|
|
+ color: rgba(42, 190, 209, 1);
|
|
|
+ }
|
|
|
+ .icon-up {
|
|
|
+ display: inline-block;
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ }
|
|
|
+ .icon-down {
|
|
|
+ display: inline-block;
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-indicator {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: rgba(95, 94, 100, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &empty {
|
|
|
+ margin-top: 69px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &history-overlay {
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+ &history-popup {
|
|
|
+ height: 100%;
|
|
|
+ width: 280px;
|
|
|
+ background-color: #fff;
|
|
|
+ .history-empty-container {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .history-list-container {
|
|
|
+ padding: 12px;
|
|
|
+ .history-list--time {
|
|
|
+ color: rgba(155, 156, 163, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .history-list--item {
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #171826;
|
|
|
+ padding: 10px 12px;
|
|
|
+ background: linear-gradient(167.96deg, #FFFFFF 0%, #EDFEFF 45.31%, rgba(237, 254, 255, 0) 100%);
|
|
|
+ border: 0.5px solid rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zhangyuhan
