From 7866aa30bd13dab1fc0662e1baf6675d0dc1b282 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 02 四月 2025 15:42:30 +0800
Subject: [PATCH] 修改意见
---
src/components/chat/components/playBar/phrase/CommonPhrases.vue | 293 +++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 185 insertions(+), 108 deletions(-)
diff --git a/src/components/chat/components/playBar/phrase/CommonPhrases.vue b/src/components/chat/components/playBar/phrase/CommonPhrases.vue
index b99dd18..61bde4d 100644
--- a/src/components/chat/components/playBar/phrase/CommonPhrases.vue
+++ b/src/components/chat/components/playBar/phrase/CommonPhrases.vue
@@ -1,22 +1,32 @@
<template>
- <div class="container" :class="isHome ? 'top-[100%] mt-[8px]' : 'bottom-[100%] mb-[8px]'">
+ <div ref="commonPhrasesRef" class="container" :class="isHome ? 'top-[100%] mt-[8px]' : 'bottom-[100%] mb-[8px]'">
<div class="container_header">
- <div class="title">甯哥敤璇�</div>
+ <div class="question">甯哥敤璇�</div>
<span class="ywifont ywicon-guanbi text-[15px] cursor-pointer text-[#767a97]" @click="closeCommonPhrases"></span>
</div>
<div class="container_content">
- <div class="set_phrases" :style="{ height: commonPhrases.length * 40 + 'px' }">
+ <div class="set_phrases" :style="{ height: commonPhrases.length * 46 + 'px' }">
<div class="w-full h-full absolute top-0">
<div class="py-0 mt-0 box-border h-full">
<div style="overflow-anchor: none" v-for="(item, index) in commonPhrases" :key="index">
- <div class="phase_item">
+ <div class="phase_item" @click="titleClick(item)">
<div class="flex flex-col">
- <div class="title">
- {{ item.title }}
+ <div class="question">
+ {{ item.question }}
</div>
- <div class="content">
+ <!-- <div class="content">
{{ item.content }}
- </div>
+ </div> -->
+ </div>
+ <div class="py-2">
+ <span
+ class="ywifont ywicon-bianji cursor-pointer text-[#767a97] pt-[4px] pr-[6px] pb-[2px] pl-0 rounded-lg !text-[13px]"
+ @click.stop="editCommonPhrases(item)"
+ ></span>
+ <span
+ class="ywifont ywicon-shanchu3 cursor-pointer text-[red] pt-[4px] pr-[6px] pb-[2px] pl-0 rounded-lg"
+ @click.stop="deleteCommonPhrases(item)"
+ ></span>
</div>
</div>
</div>
@@ -24,115 +34,182 @@
</div>
</div>
</div>
- <div class="container_add">
+ <div class="container_add" @click="addCommonPhrases">
<span class="ywifont ywicon-jia text-[15px] cursor-pointer text-[#767a97]"></span>
+ <div class="grow">娣诲姞甯哥敤璇�</div>
</div>
+ <el-dialog
+ v-model="state.useCommonPhrasesDialog"
+ :title="`${showCommonPhrases}甯哥敤璇璥"
+ width="500"
+ :before-close="handleClose"
+ style="z-index: 999"
+ >
+ <el-input v-model="state.inputCommonPhrases" :rows="10" type="textarea" placeholder="鑷畾涔夊父鐢ㄨ"></el-input>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="handleClose">鍙栨秷</el-button>
+ <el-button type="primary" @click="submitCommonPhrases" :disabled="is_input_title">
+ {{ showCommonPhrases }}
+ </el-button>
+ </div>
+ </template>
+ </el-dialog>
</div>
</template>
<script setup lang="ts">
-import { ref } from 'vue';
-const commonPhrases = ref([
- {
- id: 1,
- title: '浣犲ソ锛岃闂湁浠�涔堝彲浠ュ府鍔╂偍锛�',
- content: '鎮ㄥソ锛屾垜鎯冲挩璇竴涓嬪叧浜庢偍鐨勮鍗曘��',
- },
- {
- id: 2,
- title: '娴嬭瘯1?',
- content: '鎴戞兂鍜ㄨ涓�涓嬪叧浜庢偍鐨勮鍗曘��',
- },
- {
- id: 3,
- title: '娴嬭瘯2?',
- content: '鎴戞兂鍜ㄨ涓�涓嬪叧浜庢偍鐨勮鍗曘��',
- },
-]);
-const props = defineProps(['isHome']);
-const closeCommonPhrases = () => {};
-</script>
-<style scoped lang="scss">
-.container {
- position: absolute;
- width: 100%;
- max-height: 45vh;
- padding: 0 8px 8px;
- left: 0px;
- border-radius: 12px;
- background-color: #ffffff;
- border: 1px solid #e5e5e5;
- box-shadow: 0px 8px 25px 0px #0000000d;
- display: flex;
- flex-direction: column;
- z-index: 100;
- &_header {
- width: 100%;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- padding: 10px 6px;
- color: #060607;
- .title {
- font-size: 14px;
- color: #060607;
- font-weight: 600;
- line-height: 20px;
- letter-spacing: 0.25px;
- flex-grow: 1;
- display: flex;
- }
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { computed, onMounted, reactive, ref } from 'vue';
+import { addUserSample, deleteUserSample, listUserSample, updateUserSample } from '/@/api/ai/chat';
+import { activeGroupType, activeRoomId, activeSampleId, setRoomConfig } from '/@/stores/chatRoom';
+import { onClickOutside } from '@vueuse/core';
+const state = reactive({
+ useCommonPhrasesDialog: false,
+ show_sample_title: false,
+ inputCommonPhrases: '',
+ sample_title: null,
+ sample_id: null,
+});
+const commonPhrases = ref([]);
+const props = defineProps({
+ isHome: Boolean,
+});
+const isShow = defineModel('isShow', {
+ type: Boolean,
+});
+//#region ====================== 鏄惁鏄剧ず甯哥敤璇� ======================
+const showCommonPhrases = computed(() => {
+ return state.show_sample_title == true ? (state.sample_title = '缂栬緫') : (state.sample_title = '娣诲姞');
+});
+const is_input_title = computed(() => {
+ return state.inputCommonPhrases == '' ? true : false;
+});
+const closeCommonPhrases = () => {
+ isShow.value = false;
+};
+//#endregion
+//#region ====================== 鑾峰彇甯哥敤璇� ======================
+const updatePhrase = async () => {
+ const res = await listUserSample({
+ group_type: activeGroupType.value,
+ });
+ if (res.json_ok) {
+ commonPhrases.value = res.values;
}
- &_content {
- width: 100%;
- max-height: 40vh;
- height: fit-content;
- .set_phrases {
- outline: none;
- overflow-y: auto;
- position: relative;
- transition: height 0.1s linear;
- .phase_item {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- cursor: pointer;
- padding: 6px 8px;
- flex-shrink: 0;
- background: #fff;
- border-radius: 8px;
- width: 100%;
- .title {
- font-size: 14px;
- color: #060607;
- font-family: PingFang HK;
- font-weight: 600;
- font-style: normal;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- .content {
- font-size: 12px;
- color: #5e6772;
- font-family: PingFang SC;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- }
+};
+//#endregion
+//#region ====================== 娣诲姞甯哥敤璇� ======================
+//鍏抽棴甯哥敤璇脊绐�
+const handleClose = () => {
+ state.useCommonPhrasesDialog = false;
+};
+//鎵撳紑甯哥敤璇脊绐�
+const addCommonPhrases = () => {
+ state.useCommonPhrasesDialog = true;
+ state.show_sample_title = false;
+ state.inputCommonPhrases = '';
+};
+const editCommonPhrases = (item) => {
+ state.useCommonPhrasesDialog = true;
+ state.show_sample_title = true;
+ state.inputCommonPhrases = item.question;
+ state.sample_id = item.id;
+};
+const deleteCommonPhrases = (row) => {
+ ElMessageBox.confirm(`浣犵‘瀹氳鍒犻櫎甯哥敤璇悧?`, '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ dangerouslyUseHTMLString: true,
+ closeOnClickModal: false,
+ type: 'warning',
+ }).then(async () => {
+ const res = await deleteUserSample({
+ sample_id: row.id,
+ });
+ const foundIndex = commonPhrases.value.findIndex((item) => item === row);
+ foundIndex > -1 && commonPhrases.value.splice(foundIndex, 1);
+ });
+};
+//鎻愪氦甯哥敤璇�
+const submitCommonPhrases = async () => {
+ if (state.show_sample_title) {
+ const res = await updateUserSample({
+ sample_id: state.sample_id,
+ question: state.inputCommonPhrases,
+ });
+ if (res.json_ok) {
+ const foundIndex = commonPhrases.value.findIndex((item) => item.id === state.sample_id);
+ foundIndex > -1 && (commonPhrases.value[foundIndex].question = state.inputCommonPhrases);
+ handleClose();
}
+ } else {
+ addCommonPhrasesData();
}
- &_add {
- display: flex;
- flex-direction: row;
- align-items: center;
- cursor: pointer;
- padding: 6px 8px;
- background: #fff;
- border-radius: 8px;
+};
+//娣诲姞涓�鏉℃暟鎹簮
+const addCommonPhrasesData = async () => {
+ const res = await addUserSample({
+ question: state.inputCommonPhrases,
+ group_type: activeGroupType.value,
+ });
+ if (res.json_ok) {
+ commonPhrases.value.push({
+ id: res.sample_id,
+ question: state.inputCommonPhrases,
+ });
+ handleClose();
+ }
+};
+//#endregion
+//#region ====================== 甯哥敤璇埌瀵硅瘽妗� ======================
+const emits = defineEmits<{
+ (event: 'updateInput', val): void;
+}>();
+const titleClick = (item) => {
+ emits('updateInput', item.question);
+ isShow.value = false;
+ setRoomConfig(activeRoomId.value, 'isAnswerByLLM', false);
+ activeSampleId.value = item.id;
+};
+const commonChatByUser = (data) => {
+ const question = data.question;
+ const isCommon = commonPhrases.value.findIndex((item) => item.question === question) > -1;
+ if (isCommon) {
+ return ElMessage.warning('璇ラ棶棰樺凡瀛樺湪甯哥敤璇腑');
+ } else {
+ state.inputCommonPhrases = question;
+ addCommonPhrasesData();
+ }
+};
+//#endregion
+
+const commonPhrasesRef = ref<HTMLDivElement>(null);
+onClickOutside(
+ commonPhrasesRef,
+ () => {
+ isShow.value = false;
+ },
+ {
+ ignore: ['.el-message-box'],
+ }
+);
+
+const addPhrase = (val) =>{
+ if (!props.isHome) {
+ let obj = {
+ id: val?.historyId,
+ question: val?.content.values,
+ };
+ commonChatByUser(obj);
+ isShow.value = true;
}
}
+onMounted(() => {
+ updatePhrase();
+});
+defineExpose({ addPhrase, updatePhrase });
+</script>
+<style scoped lang="scss">
+@use './index.scss';
</style>
--
Gitblit v1.9.3