From 137f80fca39d220eb25d56a7fe5a0b7e9851e971 Mon Sep 17 00:00:00 2001 From: godo Date: Fri, 29 Nov 2024 09:59:12 +0800 Subject: [PATCH] add ai chat --- README.md | 1 + frontend/public/markdown/scripts/dialog.css | 10 ----- frontend/src/assets/chat.scss | 38 +++++++++++++---- .../src/components/localchat/AiChatInfo.vue | 18 ++++---- .../src/components/localchat/AiChatLeft.vue | 29 ++++--------- .../src/components/localchat/AiChatMain.vue | 12 +++++- frontend/src/stores/aichat.ts | 39 +++++++++++++---- frontend/src/stores/db.ts | 2 +- frontend/src/util/markdown.ts | 42 ++++--------------- 9 files changed, 96 insertions(+), 95 deletions(-) diff --git a/README.md b/README.md index 70abfa6..3f3566e 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,7 @@ - 修复word格式问题以及导出名字不对 - markdown新增ai优化/续写/纠错/翻译/总结,生成大纲,根据大纲一键创建文章 - 更改文档存储方式,支持选择文件夹 +- 内网聊天新增ai对话,可保存对话历史,可更换模型和prompt ## 🏭 第三阶段目标(十二月底发布) 1. **文档处理与Markdown智能升级**: diff --git a/frontend/public/markdown/scripts/dialog.css b/frontend/public/markdown/scripts/dialog.css index b50f1e8..bfaecc9 100644 --- a/frontend/public/markdown/scripts/dialog.css +++ b/frontend/public/markdown/scripts/dialog.css @@ -102,20 +102,12 @@ font-size: 14px; /* 调整字体大小 */ color: #333333; /* 文字颜色调整为深色 */ cursor: pointer; - transition: background 0.3s, box-shadow 0.2s, transform 0.2s; /* 平滑过渡效果 */ } .ai-dialog-button:hover { background: linear-gradient(145deg, #f0f8ff, #e6f3ff); /* 悬停时的更亮渐变背景 */ - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 略微加深阴影 */ - transform: scale(1.02); /* 微微放大 */ } -.ai-dialog-button:active { - background: linear-gradient(145deg, #e6f3ff, #f0f8ff); /* 按下时的更亮渐变背景 */ - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 减轻阴影 */ - transform: scale(0.98); /* 微微缩小 */ -} /* 模态对话框的基本样式 */ .modal { @@ -197,8 +189,6 @@ .modal-button-ok:hover { background: linear-gradient(145deg, #f0f8ff, #e6f3ff); /* 悬停时的更亮渐变背景 */ - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 略微加深阴影 */ - transform: scale(1.02); /* 微微放大 */ } /* 取消按钮 */ diff --git a/frontend/src/assets/chat.scss b/frontend/src/assets/chat.scss index 9be0919..bb09168 100644 --- a/frontend/src/assets/chat.scss +++ b/frontend/src/assets/chat.scss @@ -12,19 +12,19 @@ height: 100%; /* 确保messsage-area占据其父元素的全部高度 */ } - .input-area { padding: 0.6rem; - align-items: center; position: absolute; width: 100%; bottom: 0; - .input-panel { border-radius: 5px; max-width: 90%; margin: 0 auto; + .ai-input-area{ + margin-left: 10px; + } } } } @@ -50,11 +50,6 @@ padding-bottom: 120px; } -// @media (max-height: 900px) { -// .message-container { -// height: calc(100vh - 300px); /* 或者根据实际情况调整 */ -// } -// } .no-message-container { height: 100%; @@ -71,4 +66,29 @@ :deep(.md-editor-preview-wrapper) { padding: 0px; -} \ No newline at end of file +} +.top-menu { + display: flex; + justify-content: flex-end; /* 将按钮放在右边 */ + align-items: center; /* 垂直居中对齐 */ + gap: 10px; /* 按钮之间的间距 */ + padding: 10px; /* 内边距,可以根据需要调整 */ + } + + .top-menu-button { + display: flex; + align-items: center; + justify-content: center; + width: 30px; /* 按钮的宽度 */ + height: 30px; /* 按钮的高度 */ + border-radius: 50%; /* 圆形按钮 */ + background-color: #ffffff; /* 白色背景 */ + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */ + cursor: pointer; + transition: background-color 0.3s, box-shadow 0.2s; /* 平滑过渡效果 */ + } + + .top-menu-button:hover { + background-color: #f0f8ff; /* 悬停时的背景颜色 */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 悬停时的阴影效果 */ + } \ No newline at end of file diff --git a/frontend/src/components/localchat/AiChatInfo.vue b/frontend/src/components/localchat/AiChatInfo.vue index 70243c2..10c3dce 100644 --- a/frontend/src/components/localchat/AiChatInfo.vue +++ b/frontend/src/components/localchat/AiChatInfo.vue @@ -7,20 +7,20 @@ function changPrompt(id:number) { const promptData:any = chatStore.promptList.find((item:any) => { return item.id == id; }); - console.log(promptData) + //console.log(promptData) if(promptData) { chatStore.editInfo.prompt = promptData.prompt; } } const changeInfo = async () => { const info = chatStore.editInfo; - + console.log(info) if (!info.title) { - notifyInfo(t("chat.inputTitle")); + notifyInfo(t("aichat.inputTitle")); return; } if (!info.model) { - notifyInfo(t("chat.selectModel")); + notifyInfo(t("aichat.selectModel")); return; } if (!info.prompt) { @@ -29,17 +29,15 @@ const changeInfo = async () => { delete info.id; if (chatStore.isEditor) { - //console.log(info); await chatStore.updateChat(info, chatStore.activeId); - chatStore.chatInfo = info; - notifySuccess(t("chat.editsuccess")); + notifySuccess(t("aichat.editsuccess")); } else { const promptData = { prompt: info.prompt, - promptName: info.promptName, + promptId: info.promptId, }; - await chatStore.addChat(info.title, info.model, promptData, info.kid); - notifySuccess(t("chat.addsuccess")); + await chatStore.addChat(info.title, info.model, promptData, ""); + notifySuccess(t("aichat.addsuccess")); } await chatStore.getActiveChat(); chatStore.showInfo = false; diff --git a/frontend/src/components/localchat/AiChatLeft.vue b/frontend/src/components/localchat/AiChatLeft.vue index 31082d1..2243685 100644 --- a/frontend/src/components/localchat/AiChatLeft.vue +++ b/frontend/src/components/localchat/AiChatLeft.vue @@ -4,20 +4,7 @@ import { Search } from "@element-plus/icons-vue"; // import { t } from "@/i18n"; // import { notifyInfo,notifySuccess } from "@/util/msg.ts"; const chatStore = useAiChatStore(); -const showBox = (flag: any) => { - chatStore.isEditor = flag; - if (flag === true) { - chatStore.editInfo = toRaw(chatStore.chatInfo); - } else { - chatStore.editInfo = { - title: "", - model: "", - prompt: "", - promptName: "", - }; - } - chatStore.showInfo = true; -}; +