feat:首页新增快捷会话

src/modules/conversation-chat/DialogCommonUsed.vue

@@ -1,44 +1,70 @@
 <template>
-  <div class="dialog-common-used">
-    <div class="dialog-common-used-item" v-for="item in used_list" :key="item.value" @click="handleClick(item)">
-      <img :src="item.icon" alt="" />
-      <div class="dialog-common-used-item-text">{{ item.value }}</div>
+  <div class="dialog-common-tips">
+    <div class="dialog-common-used" v-if="!current_List_key">
+      <div
+        class="dialog-common-used-item"
+        ref="usedItemRefs"
+        v-for="item in used_list"
+        :key="item.value"
+        @click="handleClick(item)"
+      >
+        <img :src="item.icon" alt="" />
+        <div class="dialog-common-used-item-text">{{ item.value }}</div>
+      </div>
+    </div>
+    <div v-if="current_List_key" class="dialog-common_search_list" ref="searchListDialog">
+      <UsedSearchList :current_List_key="current_List_key" @quickSend="toSend"></UsedSearchList>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
 import file_1 from '../../assets/chat/file-1.png';
 import file_2 from '../../assets/chat/file-2.png';
 import file_3 from '../../assets/chat/file-3.png';
 import edit_1 from '../../assets/chat/edit-1.png';
+import UsedSearchList from './dialog-common-used/UsedSearchList.vue';
+
+const emit = defineEmits(['quickSend']);
 
-const emit = defineEmits(['updateAskTxt']);
 const used_list = ref([
-  {
-    value: '总结文本',
-    icon: file_1
-  },
-  {
-    value: '帮我写',
-    icon: edit_1
-  },
-  {
-    value: '方案构思',
-    icon: file_2
-  },
-  {
-    value: '提供建议',
-    icon: file_3
-  }
+  { value: '总结文本', icon: file_1, key: 'summary_text' },
+  { value: '帮我写', icon: edit_1, key: 'help_write' },
+  { value: '方案构思', icon: file_2, key: 'plan_concept' },
+  { value: '提供建议', icon: file_3, key: 'provide_suggest' }
 ]);
-/**
- *
- * */
+
+const current_List_key = ref('');
+const searchListDialog = ref(null);
+const usedItemRefs = ref(null);
+
+// 点击 usedItem 时赋值并显示 UsedSearchList
 const handleClick = (item) => {
-  emit('updateAskTxt', item.value);
+  current_List_key.value = item.key;
 };
+const toSend = (text) => {
+  emit('quickSend', text);
+};
+// 全局点击事件处理
+const handleGlobalClick = (event) => {
+  // 检查点击是否发生在 searchListDialog 和 usedItemRefs 以外的区域
+  const clickedOutsideUsedItems = !usedItemRefs.value.some((ref) => ref.contains(event.target));
+  console.log(clickedOutsideUsedItems);
+  if (searchListDialog.value && !searchListDialog.value.contains(event.target) && clickedOutsideUsedItems) {
+    current_List_key.value = ''; // 隐藏 UsedSearchList
+  }
+};
+// 添加全局点击事件监听
+onMounted(() => {
+  // 确保 DOM 更新完成后再添加事件监听
+  // document.addEventListener('click', handleGlobalClick);
+});
+
+// 移除全局点击事件监听
+onUnmounted(() => {
+  document.removeEventListener('click', handleGlobalClick);
+});
 </script>
 <style scoped>
 .dialog-common-used {

src/modules/conversation-chat/DialogInput.vue

@@ -389,7 +389,12 @@ onUnmounted(() => {
 });
 
 defineExpose({
-  clear: clear
+  clear: clear,
+  options: {
+    text: input_text_value.value,
+    files: [],
+    config: action_config.value
+  }
 });
 </script>
 

src/modules/conversation-chat/dialog-common-used/UsedSearchList.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="search-list" ref="search_list_dialog">
+    <UsedSearchListItem
+      v-for="item in current_search_list"
+      :item="item"
+      key="item"
+      @click="toSend(item)"
+    ></UsedSearchListItem>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import UsedSearchListItem from './UsedSearchListItem.vue';
+import { summary_text_options, help_write_options, plan_options, suggestion_options } from './common';
+
+const props = defineProps({
+  current_List_key: String
+});
+const emit = defineEmits(['quickSend', 'close']);
+
+const key_map = {
+  summary_text: summary_text_options,
+  help_write: help_write_options,
+  plan_concept: plan_options,
+  provide_suggest: suggestion_options
+};
+const current_search_list = computed(() => {
+  return key_map[props.current_List_key];
+});
+
+const search_list_dialog = ref(null);
+const toSend = (text) => {
+  emit('quickSend', text);
+};
+</script>
+<style scoped lang="css">
+.search-list {
+  padding: 10px 20px;
+  border-radius: 12px;
+  background: #ffffff;
+  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
+}
+</style>

src/modules/conversation-chat/dialog-common-used/UsedSearchListItem.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="search-item">
+    <icon-search />
+    <span>{{ item }}</span>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: String
+});
+</script>
+<style scoped>
+.search-item {
+  /* height: 40px;
+  line-height: 40px; */
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 40px;
+  cursor: pointer;
+}
+.search-item:hover {
+  background: #f3f3f3;
+}
+</style>

src/modules/conversation-chat/dialog-common-used/common.js

@@ -0,0 +1,39 @@
+// 总结文本
+export const summary_text_options = [
+  '帮我总结人工智能发展的核心观点',
+  '帮我总结基因编辑技术发展历程的核心要点',
+  '帮我总结虚拟现实在教育领域应用的主要模式',
+  '帮我总结新能源汽车电池技术突破的核心方向',
+  '帮我总结大数据在医疗诊断辅助中的核心价值',
+  '帮我总结远程办公模式对企业管理的重要变革'
+];
+
+//帮我写
+export const help_write_options = [
+  '帮我写300字的检讨',
+  '帮我写一篇英语作文',
+  '帮我写一份简历',
+  '帮我写1篇读后感',
+  '帮我写1篇小说',
+  '帮我写1首歌'
+];
+
+// 方案构思
+export const plan_options = [
+  '帮我构思一个基因编辑技术在农业育种中的应用方案',
+  '帮我构思一个利用虚拟现实技术打造沉浸式文旅体验的方案',
+  '帮我构思一个新能源汽车电池回收再利用的商业方案',
+  '帮我构思一个基于 5G 技术的智慧工厂建设方案',
+  '帮我构思一个大数据驱动的精准营销方案',
+  '帮我构思一个智能物流配送路径优化方案 '
+];
+
+// 提供建议
+export const suggestion_options = [
+  '提供关于职场沟通技巧提升的建议',
+  '提供关于亲子户外活动组织的建议',
+  '提供关于备考职业资格证书的建议',
+  '提供关于企业员工培训体系优化的建议',
+  '提供关于制定个人健身计划的建议',
+  '提供关于开展社区公益活动的建议'
+];

src/views/conversation/ConversationChatContainer.vue

@@ -85,6 +85,7 @@
             v-if="show_welcome"
             :style="style_conversation_chat_list"
             @updateAskTxt="updatAskTxt"
+            @quickSend="quickSend"
           ></DialogCommonUsed>
         </div>
 
@@ -677,6 +678,18 @@ const ask_input_text = ref('');
 const updatAskTxt = (txt) => {
   ask_input_text.value = txt;
 };
+
+const dialog_input = ref(null);
+
+const quickSend = (txt) => {
+  ask_input_text.value = txt;
+  const config = dialog_input.value.options.config;
+  handleInputSubmit({
+    config,
+    text: txt,
+    files: []
+  });
+};
 /**
  * 编辑文本
  * */