From 6612c139e886551e031aed587fd8915a7e090e48 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期二, 15 十月 2024 17:46:46 +0800
Subject: [PATCH] 修改高级示例的样式
---
src/components/chat/components/playBar/PlayBar.vue | 91 ++++++++++++++++++++++++++++++++++++---------
1 files changed, 72 insertions(+), 19 deletions(-)
diff --git a/src/components/chat/components/playBar/PlayBar.vue b/src/components/chat/components/playBar/PlayBar.vue
index 9a882b5..663f339 100644
--- a/src/components/chat/components/playBar/PlayBar.vue
+++ b/src/components/chat/components/playBar/PlayBar.vue
@@ -5,6 +5,8 @@
<img src="/static/images/wave/PlugIn.png" class="set-icon box-border" />
</el-button>
</div>
+ <InfoDetail class="text-base" v-model="infoDetailIsShow" :item="detailMapRow" />
+
<div class="set-input">
<!-- @input="inputText" -->
@@ -16,35 +18,32 @@
:autosize="{ minRows: 1, maxRows: 8 }"
v-elInputFocus
@keydown="keydownInput"
+ @input="inputText"
v-model="inputValue"
placeholder="鍦ㄨ繖閲岃緭鍏ユ偍鐨勯棶棰樺紑濮嬪拰AI瀵硅瘽"
>
</el-input>
- <!-- <div
- v-if="tipIsShow"
+ <div
+ v-show="tipIsShow"
+ ref="tipEleRef"
class="absolute rounded-md bg-white border border-solid border-gray-400 py-2 z-10"
:style="{ left: popUpPosition.left + 'px', bottom: popUpPosition.bottom + 'px' }"
>
+ <div class="font-bold text-sm text-nowrap overflow-hidden text-ellipsis max-w-80 mb-1 px-2">Ctrl+鏁板瓧蹇嵎杈撳叆</div>
<div class="text-gray-400 text-sm text-nowrap overflow-hidden text-ellipsis max-w-80 mb-1 px-2">{{ inputValue }}</div>
<div class="max-w-96 flex flex-col">
- <div class="hover:bg-gray-300 py-2 cursor-pointer px-5 text-nowrap overflow-hidden text-ellipsis">
- <span class="text-sm text-gray-500">1</span>
- <span> 瓒呴煶鏁板彂鎾掑湴鏂圭儲鐑︾儲鐑︾儲鐑︾儲鐑︾儲鐑︾儲鐑︾儲鐑︾儲鍙戝皠鐐瑰彂灏勭偣鍙戝皠鐐瑰彂 </span>
- </div>
- <div class="hover:bg-gray-300 py-2 cursor-pointer px-5 text-nowrap overflow-hidden text-ellipsis">
- <span class="text-sm text-gray-500">2</span>
- <span> asfdfasf </span>
- </div>
- <div class="hover:bg-gray-300 py-2 cursor-pointer px-5 text-nowrap overflow-hidden text-ellipsis">
- <span class="text-sm text-gray-500">3</span>
- <span> 鎴戠殑鍙告硶 </span>
- </div>
- <div class="hover:bg-gray-300 py-2 cursor-pointer px-5 text-nowrap overflow-hidden text-ellipsis">
- <span class="text-sm text-gray-500">4</span>
- <span> 缁檌鍝︽垜灏� </span>
+ <div
+ class="hover:bg-gray-300 py-2 cursor-pointer px-5 text-nowrap overflow-hidden text-ellipsis"
+ v-for="(item, index) in similarList"
+ :key="index"
+ @click="similarClick(item)"
+ >
+ <span class="text-sm text-gray-500 pr-1.5">{{ index + 1 }}</span>
+ <span> {{ item?.question }} </span>
+ <!-- <span class="text-blue-400 font-bold cursor-pointer hover:underline" @click.stop="tipMetricsClick">娴嬭瘯鏄�</span> -->
</div>
</div>
- </div> -->
+ </div>
</div>
<div class="h100 flex items-center">
<div class="upload_img space-y">
@@ -80,6 +79,11 @@
import getCaretCoordinates from 'textarea-caret';
import { computed, nextTick, ref } from 'vue';
import VoicePage from './voicePage/VoicePage.vue';
+import { querySimilarityHistory } from '/@/api/ai/chat';
+import { useClickOther } from '/@/hooks/useClickOther';
+import InfoDetail from './InfoDetail.vue';
+
+import { onClickOutside } from '@vueuse/core';
const emits = defineEmits(['sendClick']);
const props = defineProps(['isTalking', 'isHome']);
const voicePageIsShow = defineModel('voicePageIsShow', {
@@ -90,7 +94,8 @@
type: String,
});
-const tipIsShow = computed(() => !!inputValue.value.trim());
+const tipIsShow = computed(() => !!inputValue.value.trim() && similarList.value?.length > 0 && triggerShow.value);
+const triggerShow = ref(false);
const inputRef = ref<InputInstance>(null);
const updateInputValue = (val) => {
@@ -109,12 +114,31 @@
emits('sendClick');
} else if (isDigitalInput) {
const num = Number(e.code.replace('Digit', ''));
+ const mapValue = similarList.value[num - 1]?.question;
+ if (mapValue) {
+ inputValue.value = mapValue;
+ triggerShow.value = false;
+ }
}
}
};
+
+const similarClick = (item) => {
+ if (item.question) {
+ inputValue.value = item.question;
+ triggerShow.value = false;
+ }
+};
+
+const tipEleRef = ref<HTMLDivElement>(null);
+
const popUpPosition = ref({
left: null,
bottom: null,
+});
+
+onClickOutside(tipEleRef, () => {
+ triggerShow.value = false;
});
const inputText = (text) => {
nextTick(() => {
@@ -128,8 +152,26 @@
const leftOffset = 9;
popUpPosition.value.left = caret.left + leftOffset;
popUpPosition.value.bottom = container.offsetHeight + bottomOffset;
+ triggerShow.value = true;
+ if (lastIsFinish) {
+ querySimilarityApi(text);
+ }
}, 0);
});
+};
+
+const similarList = ref([]);
+let lastIsFinish = true;
+const querySimilarityApi = async (text: string) => {
+ if (!text) return;
+ lastIsFinish = false;
+ const res = await querySimilarityHistory({
+ question: text,
+ });
+ lastIsFinish = true;
+ const handleValues = res?.values ?? [];
+
+ similarList.value = props.isHome ? handleValues.slice(0, 3) : handleValues;
};
const audioChangeWord = () => {
navigator.getUserMedia(
@@ -142,6 +184,17 @@
}
);
};
+
+
+//#region ====================== 楂樹寒鎸囨爣鐐瑰嚮======================
+const infoDetailIsShow = ref(false);
+const detailMapRow = ref(null);
+
+const tipMetricsClick = (row) => {
+ detailMapRow.value = row;
+ infoDetailIsShow.value = true;
+};
+//#endregion
</script>
<style scoped lang="scss">
.set-waterTitle {
--
Gitblit v1.9.3