From 96d13ee431fef2fb5eaba05654cd7e0216ce36ab Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期五, 28 六月 2024 16:53:26 +0800
Subject: [PATCH] 新建聊天室
---
src/directive/customDirective.ts | 8 ++
src/views/project/ch/home/component/waterRight/top.vue | 6 +-
src/components/chat/Chat.vue | 15 ++++
src/directive/index.ts | 4 +
src/components/chat/components/playBar/PlayBar.vue | 2
src/layout/component/sidebar/waterLeftAside/asideNew.vue | 65 +++++++++++++--------
src/stores/chatRoom.ts | 23 ++++---
src/layout/component/sidebar/waterLeftAside/types.ts | 8 +-
8 files changed, 86 insertions(+), 45 deletions(-)
diff --git a/src/components/chat/Chat.vue b/src/components/chat/Chat.vue
index b0d66bc..cf387e6 100644
--- a/src/components/chat/Chat.vue
+++ b/src/components/chat/Chat.vue
@@ -44,6 +44,8 @@
import { md } from './libs/markdown';
import { RoleEnum, roleImageMap, type ChatMessage } from './types';
import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue';
+import { activeChatRoom } from '/@/stores/chatRoom';
+import router from '/@/router';
let apiKey = '';
let isConfig = ref(false);
@@ -71,8 +73,13 @@
if (getAPIKey()) {
switchConfigStatus();
}
- const inputValue = history.state.inputValue;
- messageContent.value = inputValue;
+ if (!activeChatRoom.value) {
+ router.replace({
+ name: 'Home',
+ });
+ return;
+ }
+ messageContent.value = activeChatRoom.value.title;
sendOrSave();
});
@@ -144,6 +151,10 @@
const sendOrSave = () => {
if (!messageContent.value.length) return;
+ if (activeChatRoom.value.isInitial) {
+ activeChatRoom.value.title = messageContent.value;
+ activeChatRoom.value.isInitial = false;
+ }
if (isConfig.value) {
if (saveAPIKey(messageContent.value.trim())) {
switchConfigStatus();
diff --git a/src/components/chat/components/playBar/PlayBar.vue b/src/components/chat/components/playBar/PlayBar.vue
index 129c347..ca50d83 100644
--- a/src/components/chat/components/playBar/PlayBar.vue
+++ b/src/components/chat/components/playBar/PlayBar.vue
@@ -6,7 +6,7 @@
</el-button>
</div>
<div class="set-input">
- <el-input @keydown.enter="isTalking || emits('sendClick')" v-model="inputValue" placeholder="鍦ㄨ繖閲岃緭鍏ユ偍鐨勯棶棰樺紑濮嬪拰AI瀵硅瘽" class="set-inputAnswer" />
+ <el-input v-elInputFocus @keydown.enter="isTalking || emits('sendClick')" v-model="inputValue" placeholder="鍦ㄨ繖閲岃緭鍏ユ偍鐨勯棶棰樺紑濮嬪拰AI瀵硅瘽" class="set-inputAnswer" />
</div>
<div class="h100 flex items-center">
<div class="upload_img space-y">
diff --git a/src/directive/customDirective.ts b/src/directive/customDirective.ts
index c67350f..83738b5 100644
--- a/src/directive/customDirective.ts
+++ b/src/directive/customDirective.ts
@@ -53,6 +53,14 @@
});
}
+export const eleFocusDirective =(app:App)=>{
+ app.directive('elInputFocus',{
+ mounted:(el)=>{
+ el.querySelector('input.el-input__inner')?.focus()
+ }
+ })
+}
+
/**
* 鑷畾涔夋嫋鍔ㄦ寚浠�
* @description 浣跨敤鏂瑰紡锛歷-drag="[dragDom,dragHeader]"锛屽 `<div v-drag="['.drag-container .el-dialog', '.drag-container .el-dialog__header']"></div>`
diff --git a/src/directive/index.ts b/src/directive/index.ts
index acc59b8..926f0be 100644
--- a/src/directive/index.ts
+++ b/src/directive/index.ts
@@ -1,6 +1,6 @@
import type { App } from 'vue';
import { authDirective } from '/@/directive/authDirective';
-import { wavesDirective, dragDirective } from '/@/directive/customDirective';
+import { wavesDirective, dragDirective,eleFocusDirective } from '/@/directive/customDirective';
import { inputLimit } from '/@/directive/inputLimit';
/**
@@ -18,4 +18,6 @@
dragDirective(app);
// 杈撳叆闄愬埗鎸囦护
inputLimit(app);
+ eleFocusDirective(app);
+
}
diff --git a/src/layout/component/sidebar/waterLeftAside/asideNew.vue b/src/layout/component/sidebar/waterLeftAside/asideNew.vue
index c576779..c2a4fd3 100644
--- a/src/layout/component/sidebar/waterLeftAside/asideNew.vue
+++ b/src/layout/component/sidebar/waterLeftAside/asideNew.vue
@@ -28,18 +28,18 @@
<div class="flex-auto text-[#ccc] flex flex-col items-center mt-6 overflow-y-auto" ref="chatRoomRef">
<div
- :class="{ 'bg-[#41424a]': index === activeIndex }"
+ :class="{ 'bg-[#41424a]': item.id === activeRoomId }"
class="group flex items-center w-full h-10 rounded-md cursor-pointer px-2 py-2 flex-0"
v-for="(item, index) in chatRoomList"
:key="index"
- @click="roomClick(item, index)"
+ @click="roomClick(item)"
>
<div class="ywicon icon-xiaoxi flex-0 mr-2.5"></div>
<div class="flex-auto text-ellipsis text-nowrap text-sm group-hover:text-[#0084ff]">chat room</div>
<div class="text-gray-100 flex items-center space-x-2 ml-1">
<div class="ywicon invisible icon-bianji visible group-hover:visible !text-sm"></div>
- <el-popconfirm title="纭畾鍒犻櫎杩欎釜鑱婂ぉ瀹わ紵" @confirm.stop="confirmDeleteChatRoom(item, index)">
+ <el-popconfirm title="纭畾鍒犻櫎杩欎釜鑱婂ぉ瀹わ紵" @confirm.stop="confirmDeleteChatRoom(item)">
<template #reference>
<div class="ywicon invisible icon-shanchu3 visible group-hover:visible"></div>
</template>
@@ -53,11 +53,10 @@
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
-import { nextTick, reactive, ref, watch } from 'vue';
+import { nextTick, onMounted, reactive, ref } from 'vue';
import type { ChatRoomItem } from './types';
import router from '/@/router';
-import { chatRoomList } from '/@/stores/chatRoom';
-import { Local } from '/@/utils/storage';
+import { activeRoomId, chatRoomList } from '/@/stores/chatRoom';
let state = reactive({
searchInput: '',
selectDateOption: [
@@ -87,47 +86,63 @@
state.isShowDate = !state.isShowDate;
};
-const activeIndex = ref(null);
+const gotoAnswerPage = (room: ChatRoomItem) => {
+ if (room.isInitial) {
+ router.push({
+ name: 'Home',
+ });
+ } else {
+ router.push({
+ name: 'AskAnswer',
+ query: {
+ id: room.id,
+ },
+ });
+ }
+};
+
const newChatRoomClick = () => {
const newRoom = {
+ id: new Date().getTime() + '' + Math.floor(Math.random() * 1000),
isInitial: true,
title: 'chat room',
};
- console.log("馃殌 ~ chatRoomList.value:", chatRoomList.value)
-
if (!chatRoomList.value) {
chatRoomList.value = [newRoom];
} else {
chatRoomList.value.unshift(newRoom);
}
- activeIndex.value = 0;
+ activeRoomId.value = newRoom.id;
nextTick(() => {
- router.push({
- name: 'Home',
- });
+ gotoAnswerPage(newRoom);
});
};
-const roomClick = (room: ChatRoomItem, index: number) => {
- activeIndex.value = index;
- router.push({
- name: 'Home',
- });
+const roomClick = (room: ChatRoomItem) => {
+ activeRoomId.value = room.id;
+ gotoAnswerPage(room);
};
-const confirmDeleteChatRoom = (room: ChatRoomItem, index: number) => {
+const confirmDeleteChatRoom = (room: ChatRoomItem) => {
const foundIndex = chatRoomList.value.findIndex((item) => item === room);
chatRoomList.value.splice(foundIndex, 1);
+ if (chatRoomList.value.length === 0) {
+ newChatRoomClick();
+ return;
+ }
+ roomClick(chatRoomList.value[0]);
chatRoomRef.value.firstElementChild?.scrollIntoView();
- activeIndex.value = 0;
};
-watch(
- () => chatRoomList.value,
- (val) => {
- Local.set('chatRoomList', val);
+onMounted(() => {
+ if (router.currentRoute.value.name === 'Home') {
+ if (!chatRoomList.value || chatRoomList.value.length === 0) {
+ newChatRoomClick();
+ } else {
+ roomClick(chatRoomList.value[0]);
+ }
}
-);
+});
</script>
<style scoped lang="scss">
.set-input {
diff --git a/src/layout/component/sidebar/waterLeftAside/types.ts b/src/layout/component/sidebar/waterLeftAside/types.ts
index f712e24..34d41dd 100644
--- a/src/layout/component/sidebar/waterLeftAside/types.ts
+++ b/src/layout/component/sidebar/waterLeftAside/types.ts
@@ -1,8 +1,8 @@
export type ChatRoomItem = {
-
- isInitial:Boolean,
- title:String,
- content?:String
+ id:string;
+ isInitial:boolean,
+ title:string,
+ content?:string
}
\ No newline at end of file
diff --git a/src/stores/chatRoom.ts b/src/stores/chatRoom.ts
index 1036447..13421b5 100644
--- a/src/stores/chatRoom.ts
+++ b/src/stores/chatRoom.ts
@@ -1,13 +1,18 @@
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
import type { ChatRoomItem } from '../layout/component/sidebar/waterLeftAside/types';
import { Local } from '../utils/storage';
-export const chatRoomList = computed<ChatRoomItem[]>({
- get: () => {
- return Local.get('chatRoomList') ?? [];
+export const chatRoomList = ref<ChatRoomItem[]>(Local.get('chatRoomList'));
+
+watch(
+ () => chatRoomList.value,
+ (val) => {
+ Local.set('chatRoomList', val);
},
- set: (value) => {
- console.log("馃殌 ~ value:", value)
- Local.set('chatRoomList', value);
- },
-});
+ {
+ deep: true,
+ }
+);
+
+export const activeRoomId = ref(null);
+export const activeChatRoom = computed(() => chatRoomList.value?.find((item) => item.id === activeRoomId.value));
diff --git a/src/views/project/ch/home/component/waterRight/top.vue b/src/views/project/ch/home/component/waterRight/top.vue
index 0e707fc..bf73d7e 100644
--- a/src/views/project/ch/home/component/waterRight/top.vue
+++ b/src/views/project/ch/home/component/waterRight/top.vue
@@ -26,16 +26,16 @@
import { reactive, ref } from 'vue';
import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue';
import router from '/@/router';
+import { activeChatRoom } from '/@/stores/chatRoom';
const emits = defineEmits(['sendClick']);
const inputValue = ref('');
const sendClick = () => {
if(!inputValue.value) return;
+ activeChatRoom.value.title = inputValue.value;
router.push({
name: 'AskAnswer',
- state: {
- inputValue: inputValue.value,
- },
+
});
};
let state = reactive({
--
Gitblit v1.9.3