From fbae37b91f88bb547e1ffb7215b3b495894ebec0 Mon Sep 17 00:00:00 2001 From: maven <2163098428@qq.com> Date: 星期四, 07 八月 2025 16:57:38 +0800 Subject: [PATCH] yys 新增ai模块 --- src/assets/img/emoji/slightly-smiling-face.png | 0 src/assets/img/fileImg/txt.png | 0 src/assets/img/emoji/取消.png | 0 src/views/chatHome/chatHomeIndex/home.vue | 190 +++++++++++++ src/assets/img/emoji/thumbs-up-yellow.png | 0 src/assets/img/emoji/money-bag.png | 0 src/assets/img/emoji/new-moon-face.png | 0 src/assets/img/emoji/clown-face.png | 0 src/assets/img/emoji/ok-hand-yellow.png | 0 src/assets/img/emoji/rainbow.png | 0 src/assets/img/fileImg/unknowfile.png | 0 src/assets/img/emoji/thinking-face.png | 0 src/assets/img/emoji/hibiscus.png | 0 src/assets/img/fileImg/word.png | 0 src/router/index.js | 15 + src/assets/img/emoji/jack-o-lantern.png | 0 src/assets/img/emoji/rocket.png | 0 src/assets/img/fileImg/ppt.png | 0 src/assets/img/emoji/money-mouth-face.png | 0 src/assets/img/emoji/smiling-face-with-horns.png | 0 src/assets/img/emoji/shamrock.png | 0 src/assets/img/emoji/face-screaming-in-fear.png | 0 src/assets/img/emoji/lips.png | 0 src/assets/img/emoji/two-hearts.png | 0 src/assets/img/head_portrait.jpg | 0 src/assets/img/emoji/face-with-tongue.png | 0 src/assets/img/emoji/smiling-face-with-sunglasses.png | 0 src/assets/img/emoji/thought-balloon.png | 0 src/components/FileCard.vue | 81 +++++ src/utils/util.js | 92 ++++++ src/assets/img/emoji/smiling-face-with-heart-eyes.png | 0 src/assets/img/emoji/victory-hand-yellow.png | 0 src/assets/img/fileImg/excel.png | 0 src/assets/img/fileImg/zpi.png | 0 src/assets/img/emoji/pouting-face.png | 0 src/assets/img/emoji/shangchuan.png | 0 src/assets/img/emoji/sparkles.png | 0 src/assets/img/emoji/loudly-crying-face.png | 0 src/views/chatHome/chatHomeIndex/MobileChat.vue | 457 ++++++++++++++++++++++++++++++++ src/assets/img/emoji/star.png | 0 src/assets/img/emoji/tired-face.png | 0 src/assets/img/emoji/face-vomiting.png | 0 src/assets/img/logo.png | 0 src/assets/img/emoji/ghost.png | 0 src/assets/img/emoji/pile-of-poo.png | 0 src/assets/img/fileImg/pdf.png | 0 src/assets/img/emoji/face-without-mouth.png | 0 src/assets/img/emoji/smiling-face.png | 0 src/assets/img/head_portrait1.png | 0 49 files changed, 835 insertions(+), 0 deletions(-) diff --git a/src/assets/img/emoji/clown-face.png b/src/assets/img/emoji/clown-face.png new file mode 100644 index 0000000..fd77228 --- /dev/null +++ b/src/assets/img/emoji/clown-face.png Binary files differ diff --git a/src/assets/img/emoji/face-screaming-in-fear.png b/src/assets/img/emoji/face-screaming-in-fear.png new file mode 100644 index 0000000..d6332ce --- /dev/null +++ b/src/assets/img/emoji/face-screaming-in-fear.png Binary files differ diff --git a/src/assets/img/emoji/face-vomiting.png b/src/assets/img/emoji/face-vomiting.png new file mode 100644 index 0000000..dcc556f --- /dev/null +++ b/src/assets/img/emoji/face-vomiting.png Binary files differ diff --git a/src/assets/img/emoji/face-with-tongue.png b/src/assets/img/emoji/face-with-tongue.png new file mode 100644 index 0000000..b2e228e --- /dev/null +++ b/src/assets/img/emoji/face-with-tongue.png Binary files differ diff --git a/src/assets/img/emoji/face-without-mouth.png b/src/assets/img/emoji/face-without-mouth.png new file mode 100644 index 0000000..e48a05a --- /dev/null +++ b/src/assets/img/emoji/face-without-mouth.png Binary files differ diff --git a/src/assets/img/emoji/ghost.png b/src/assets/img/emoji/ghost.png new file mode 100644 index 0000000..8a4b03a --- /dev/null +++ b/src/assets/img/emoji/ghost.png Binary files differ diff --git a/src/assets/img/emoji/hibiscus.png b/src/assets/img/emoji/hibiscus.png new file mode 100644 index 0000000..5fddeb5 --- /dev/null +++ b/src/assets/img/emoji/hibiscus.png Binary files differ diff --git a/src/assets/img/emoji/jack-o-lantern.png b/src/assets/img/emoji/jack-o-lantern.png new file mode 100644 index 0000000..7014639 --- /dev/null +++ b/src/assets/img/emoji/jack-o-lantern.png Binary files differ diff --git a/src/assets/img/emoji/lips.png b/src/assets/img/emoji/lips.png new file mode 100644 index 0000000..40915bd --- /dev/null +++ b/src/assets/img/emoji/lips.png Binary files differ diff --git a/src/assets/img/emoji/loudly-crying-face.png b/src/assets/img/emoji/loudly-crying-face.png new file mode 100644 index 0000000..d72008d --- /dev/null +++ b/src/assets/img/emoji/loudly-crying-face.png Binary files differ diff --git a/src/assets/img/emoji/money-bag.png b/src/assets/img/emoji/money-bag.png new file mode 100644 index 0000000..df46b05 --- /dev/null +++ b/src/assets/img/emoji/money-bag.png Binary files differ diff --git a/src/assets/img/emoji/money-mouth-face.png b/src/assets/img/emoji/money-mouth-face.png new file mode 100644 index 0000000..f7c4cdf --- /dev/null +++ b/src/assets/img/emoji/money-mouth-face.png Binary files differ diff --git a/src/assets/img/emoji/new-moon-face.png b/src/assets/img/emoji/new-moon-face.png new file mode 100644 index 0000000..8942b8b --- /dev/null +++ b/src/assets/img/emoji/new-moon-face.png Binary files differ diff --git a/src/assets/img/emoji/ok-hand-yellow.png b/src/assets/img/emoji/ok-hand-yellow.png new file mode 100644 index 0000000..4dbd427 --- /dev/null +++ b/src/assets/img/emoji/ok-hand-yellow.png Binary files differ diff --git a/src/assets/img/emoji/pile-of-poo.png b/src/assets/img/emoji/pile-of-poo.png new file mode 100644 index 0000000..28f149a --- /dev/null +++ b/src/assets/img/emoji/pile-of-poo.png Binary files differ diff --git a/src/assets/img/emoji/pouting-face.png b/src/assets/img/emoji/pouting-face.png new file mode 100644 index 0000000..0265aa2 --- /dev/null +++ b/src/assets/img/emoji/pouting-face.png Binary files differ diff --git a/src/assets/img/emoji/rainbow.png b/src/assets/img/emoji/rainbow.png new file mode 100644 index 0000000..7794ded --- /dev/null +++ b/src/assets/img/emoji/rainbow.png Binary files differ diff --git a/src/assets/img/emoji/rocket.png b/src/assets/img/emoji/rocket.png new file mode 100644 index 0000000..04a7619 --- /dev/null +++ b/src/assets/img/emoji/rocket.png Binary files differ diff --git a/src/assets/img/emoji/shamrock.png b/src/assets/img/emoji/shamrock.png new file mode 100644 index 0000000..8fe0836 --- /dev/null +++ b/src/assets/img/emoji/shamrock.png Binary files differ diff --git a/src/assets/img/emoji/shangchuan.png b/src/assets/img/emoji/shangchuan.png new file mode 100644 index 0000000..af16fb4 --- /dev/null +++ b/src/assets/img/emoji/shangchuan.png Binary files differ diff --git a/src/assets/img/emoji/slightly-smiling-face.png b/src/assets/img/emoji/slightly-smiling-face.png new file mode 100644 index 0000000..be7dd9f --- /dev/null +++ b/src/assets/img/emoji/slightly-smiling-face.png Binary files differ diff --git a/src/assets/img/emoji/smiling-face-with-heart-eyes.png b/src/assets/img/emoji/smiling-face-with-heart-eyes.png new file mode 100644 index 0000000..c838d4f --- /dev/null +++ b/src/assets/img/emoji/smiling-face-with-heart-eyes.png Binary files differ diff --git a/src/assets/img/emoji/smiling-face-with-horns.png b/src/assets/img/emoji/smiling-face-with-horns.png new file mode 100644 index 0000000..b79738c --- /dev/null +++ b/src/assets/img/emoji/smiling-face-with-horns.png Binary files differ diff --git a/src/assets/img/emoji/smiling-face-with-sunglasses.png b/src/assets/img/emoji/smiling-face-with-sunglasses.png new file mode 100644 index 0000000..58b8604 --- /dev/null +++ b/src/assets/img/emoji/smiling-face-with-sunglasses.png Binary files differ diff --git a/src/assets/img/emoji/smiling-face.png b/src/assets/img/emoji/smiling-face.png new file mode 100644 index 0000000..3c2915b --- /dev/null +++ b/src/assets/img/emoji/smiling-face.png Binary files differ diff --git a/src/assets/img/emoji/sparkles.png b/src/assets/img/emoji/sparkles.png new file mode 100644 index 0000000..4d11a1b --- /dev/null +++ b/src/assets/img/emoji/sparkles.png Binary files differ diff --git a/src/assets/img/emoji/star.png b/src/assets/img/emoji/star.png new file mode 100644 index 0000000..44f80bb --- /dev/null +++ b/src/assets/img/emoji/star.png Binary files differ diff --git a/src/assets/img/emoji/thinking-face.png b/src/assets/img/emoji/thinking-face.png new file mode 100644 index 0000000..33d791d --- /dev/null +++ b/src/assets/img/emoji/thinking-face.png Binary files differ diff --git a/src/assets/img/emoji/thought-balloon.png b/src/assets/img/emoji/thought-balloon.png new file mode 100644 index 0000000..892eedc --- /dev/null +++ b/src/assets/img/emoji/thought-balloon.png Binary files differ diff --git a/src/assets/img/emoji/thumbs-up-yellow.png b/src/assets/img/emoji/thumbs-up-yellow.png new file mode 100644 index 0000000..c30b6ae --- /dev/null +++ b/src/assets/img/emoji/thumbs-up-yellow.png Binary files differ diff --git a/src/assets/img/emoji/tired-face.png b/src/assets/img/emoji/tired-face.png new file mode 100644 index 0000000..d1deba8 --- /dev/null +++ b/src/assets/img/emoji/tired-face.png Binary files differ diff --git a/src/assets/img/emoji/two-hearts.png b/src/assets/img/emoji/two-hearts.png new file mode 100644 index 0000000..4259b46 --- /dev/null +++ b/src/assets/img/emoji/two-hearts.png Binary files differ diff --git a/src/assets/img/emoji/victory-hand-yellow.png b/src/assets/img/emoji/victory-hand-yellow.png new file mode 100644 index 0000000..fc46ce2 --- /dev/null +++ b/src/assets/img/emoji/victory-hand-yellow.png Binary files differ diff --git "a/src/assets/img/emoji/\345\217\226\346\266\210.png" "b/src/assets/img/emoji/\345\217\226\346\266\210.png" new file mode 100644 index 0000000..30df0a9 --- /dev/null +++ "b/src/assets/img/emoji/\345\217\226\346\266\210.png" Binary files differ diff --git a/src/assets/img/fileImg/excel.png b/src/assets/img/fileImg/excel.png new file mode 100644 index 0000000..ae8929c --- /dev/null +++ b/src/assets/img/fileImg/excel.png Binary files differ diff --git a/src/assets/img/fileImg/pdf.png b/src/assets/img/fileImg/pdf.png new file mode 100644 index 0000000..3653045 --- /dev/null +++ b/src/assets/img/fileImg/pdf.png Binary files differ diff --git a/src/assets/img/fileImg/ppt.png b/src/assets/img/fileImg/ppt.png new file mode 100644 index 0000000..2362d61 --- /dev/null +++ b/src/assets/img/fileImg/ppt.png Binary files differ diff --git a/src/assets/img/fileImg/txt.png b/src/assets/img/fileImg/txt.png new file mode 100644 index 0000000..0ce91dc --- /dev/null +++ b/src/assets/img/fileImg/txt.png Binary files differ diff --git a/src/assets/img/fileImg/unknowfile.png b/src/assets/img/fileImg/unknowfile.png new file mode 100644 index 0000000..75e22fb --- /dev/null +++ b/src/assets/img/fileImg/unknowfile.png Binary files differ diff --git a/src/assets/img/fileImg/word.png b/src/assets/img/fileImg/word.png new file mode 100644 index 0000000..97e8a69 --- /dev/null +++ b/src/assets/img/fileImg/word.png Binary files differ diff --git a/src/assets/img/fileImg/zpi.png b/src/assets/img/fileImg/zpi.png new file mode 100644 index 0000000..de3c681 --- /dev/null +++ b/src/assets/img/fileImg/zpi.png Binary files differ diff --git a/src/assets/img/head_portrait.jpg b/src/assets/img/head_portrait.jpg new file mode 100644 index 0000000..dd345b3 --- /dev/null +++ b/src/assets/img/head_portrait.jpg Binary files differ diff --git a/src/assets/img/head_portrait1.png b/src/assets/img/head_portrait1.png new file mode 100644 index 0000000..3134bd5 --- /dev/null +++ b/src/assets/img/head_portrait1.png Binary files differ diff --git a/src/assets/img/logo.png b/src/assets/img/logo.png new file mode 100644 index 0000000..b53ef8a --- /dev/null +++ b/src/assets/img/logo.png Binary files differ diff --git a/src/components/FileCard.vue b/src/components/FileCard.vue new file mode 100644 index 0000000..d14ec48 --- /dev/null +++ b/src/components/FileCard.vue @@ -0,0 +1,81 @@ +<template> + <div class="file-card"> + <img src="@/assets/img/fileImg/unknowfile.png" alt="" v-if="fileType == 0"/> + <img src="@/assets/img/fileImg/word.png" alt="" v-else-if="fileType == 1"/> + <img src="@/assets/img/fileImg/excel.png" alt="" v-else-if="fileType == 2"/> + <img src="@/assets/img/fileImg/ppt.png" alt="" v-else-if="fileType == 3"/> + <img src="@/assets/img/fileImg/pdf.png" alt="" v-else-if="fileType == 4"/> + <img src="@/assets/img/fileImg/zpi.png" alt="" v-else-if="fileType == 5"/> + <img src="@/assets/img/fileImg/txt.png" alt="" v-else/> + <div class="word"> + <span + >{{file.name || '鏈煡'}}</span + > + <span>154kb</span> + </div> + </div> +</template> + +<script> +export default { + // props: ["fileType", "file"], + props: { + fileType: Number, + file: File, + default() { + return {}; + }, + }, + watch: { + file() { + console.log(this.file); + }, + }, + mounted() { + console.log(this.file); + console.log(this.fileType); + } +}; +</script> + +<style lang="scss" scoped> +.file-card { + width: 250px; + height: 100px; + background-color: rgb(45, 48, 63); + border-radius: 20px; + display: flex; + justify-content: center; + align-items: center; + padding: 10px; + box-sizing: border-box; + cursor: pointer; + &:hover { + background-color: rgb(33, 36, 54); + } + img { + width: 60px; + height: 60px; + } + .word { + width: 60%; + margin-left: 10px; + overflow: hidden; + span { + width: 90%; + display: inline-block; + color: #fff; + } + span:first-child { + font-size: 14px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + span:last-child { + font-size: 12px; + color: rgb(180, 180, 180); + } + } +} +</style> \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 3c69a74..10adf72 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -57,6 +57,7 @@ component: () => import('@/views/error/401'), hidden: true }, + { path: '', component: Layout, @@ -71,6 +72,20 @@ ] }, { + path: '/main/MobileChat', + component: Layout, + redirect: '', + hidden: true, + children: [ + { + path: '', + component: () => import('@/views/chatHome/chatHomeIndex/MobileChat'), + name: 'MobileChat', + meta: { title: 'AI瀵硅瘽', icon: 'dashboard', affix: true} + } + ] + }, + { path: '/user', component: Layout, hidden: true, diff --git a/src/utils/util.js b/src/utils/util.js new file mode 100644 index 0000000..78846dc --- /dev/null +++ b/src/utils/util.js @@ -0,0 +1,92 @@ +//闃叉姈 +export function debounce(fn) { + console.log(1) + let t = null //鍙細鎵ц涓�娆� + debugger + + return function (){ + if(t){ + clearTimeout(t) + } + t = setTimeout(()=>{ + console.log(temp); //鍙互鑾峰彇 + // console.log(arguments[0]) //undefined + fn.apply(this,arguments) + //鍦ㄨ繖涓洖璋冨嚱鏁伴噷闈㈢殑argument鏄繖涓洖璋冨嚱鏁扮殑鍙傛暟锛屽洜涓烘病鏈夊弬鏁版墍浠ndefined锛屽彲浠ラ�氳繃澶栭潰鐨勫嚱鏁拌祴鍊兼潵杩涜璁块棶 + //涔熷彲浠ユ敼鍙樻垚绠ご鍑芥暟,绠ご鍑芥暟鐨則his鏄寚鍚戝畾涔夊嚱鏁扮殑閭d竴灞傜殑锛屾墍浠ヨ闂埌鐨刟rguments鏄笂涓�灞傚嚱鏁扮殑arguments + },1000) + + } +} +//鑺傛祦 +export function throttle(fn, delay = 200) { + let timer = null + console.log(fn); + debugger + return function () { + if(timer) return + timer = setTimeout(() => { + debugger + fn.apply(this,arguments) + timer = null + }) + } + } +//涓嬫媺鍔ㄧ敾 + export function animation(obj, target, fn1) { + // console.log(fn1); + // fn鏄竴涓洖璋冨嚱鏁帮紝鍦ㄥ畾鏃跺櫒缁撴潫鐨勬椂鍊欐坊鍔� + // 姣忔寮�瀹氭椂鍣ㄤ箣鍓嶅厛娓呴櫎鎺夊畾鏃跺櫒 + clearInterval(obj.timer); + obj.timer = setInterval(function () { + // 姝ラ暱璁$畻鍏紡 瓒婃潵瓒婂皬 + // 姝ラ暱鍙栨暣 + var step = (target - obj.scrollTop) / 10; + step = step > 0 ? Math.ceil(step) : Math.floor(step); + if (obj.scrollTop >= target) { + clearInterval(obj.timer); + // 濡傛灉fn1瀛樺湪锛岃皟鐢╢n + if (fn1) { + fn1(); + } + } else { + // 姣�30姣灏卞皢鏂扮殑鍊肩粰obj.left + obj.scrollTop = obj.scrollTop + step; + } + }, 10); + } + + //鍒ゆ柇鏂囦欢绫诲瀷 + export function judgeFileType(file) { + if (file == null||file == ""){ + alert("璇烽�夋嫨瑕佷笂浼犵殑鍥剧墖!"); + return false; + } + if (file.lastIndexOf('.')==-1){ //濡傛灉涓嶅瓨鍦�"." + alert("璺緞涓嶆纭�!"); + return false; + } + var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"; + var extName = file.substring(file.lastIndexOf(".")).toLowerCase();//锛堟妸璺緞涓殑鎵�鏈夊瓧姣嶅叏閮ㄨ浆鎹负灏忓啓锛� + if(AllImgExt.indexOf(extName+"|")==-1) + { + ErrMsg="璇ユ枃浠剁被鍨嬩笉鍏佽涓婁紶銆傝涓婁紶 "+AllImgExt+" 绫诲瀷鐨勬枃浠讹紝褰撳墠鏂囦欢绫诲瀷涓�"+extName; + alert(ErrMsg); + return false; + } + } + + //鏂囦欢绫诲瀷 + export function fileType() { + return { + 'application/msword': 'word', + 'application/pdf': 'pdf', + 'application/vnd.ms-powerpoint': 'ppt', + 'application/vnd.ms-excel': 'excel', + 'aplication/zip': 'zpi', + } + } + + export function filterArr(arr) { + return arr.filter(item => item.flag !== false); + } \ No newline at end of file diff --git a/src/views/chatHome/chatHomeIndex/MobileChat.vue b/src/views/chatHome/chatHomeIndex/MobileChat.vue new file mode 100644 index 0000000..36a6dd7 --- /dev/null +++ b/src/views/chatHome/chatHomeIndex/MobileChat.vue @@ -0,0 +1,457 @@ +<template> + <div class="mobile-chat-wrapper" style="height: 91vh;"> + <div class="chat-history"> + <div class="chat-content" ref="chatContent"> + <div class="chat-wrapper" v-for="(item, index) in chatList" :key="index"> + <div class="chat-friend" v-if="item.uid !== '1001'"> + <div class="info-time"> + <img :src="item.headImg" alt="" /> + <span>{{ item.name }}</span> + <span>{{ item.time }}</span> + </div> + <div class="chat-text" v-if="item.chatType == 0"> + <template v-if="isSend && index === chatList.length - 1"> + <span class="flash_cursor"></span> + </template> + <template v-else> + <pre>{{ item.msg }}</pre> + </template> + </div> + <div class="chat-img" v-if="item.chatType == 1"> + <img :src="item.msg" alt="琛ㄦ儏" v-if="item.extend.imgType == 1" style="width: 100px; height: 100px" /> + <el-image :src="item.msg" :preview-src-list="srcImgList" v-else> </el-image> + </div> + <div class="chat-img" v-if="item.chatType == 2"> + <div class="word-file"> + <FileCard :fileType="item.extend.fileType" :file="item.msg"></FileCard> + </div> + </div> + </div> + <div class="chat-me" v-else> + <div class="info-time"> + <span>{{ item.name }}</span> + <span>{{ item.time }}</span> + <img :src="item.headImg" alt="" /> + </div> + <div class="chat-text" v-if="item.chatType == 0"> + {{ item.msg }} + </div> + <div class="chat-img" v-if="item.chatType == 1"> + <img :src="item.msg" alt="琛ㄦ儏" v-if="item.extend.imgType == 1" style="width: 100px; height: 100px" /> + <el-image style="max-width: 300px; border-radius: 10px" :src="item.msg" :preview-src-list="srcImgList" v-else> </el-image> + </div> + <div class="chat-img" v-if="item.chatType == 2"> + <div class="word-file"> + <FileCard :fileType="item.extend.fileType" :file="item.msg"></FileCard> + </div> + </div> + </div> + </div> + </div> + </div> +<!-- <div class="chat-input-wrapper">--> +<!-- <div style="display: flex; align-items: center">--> +<!-- <input v-model="inputMsg" @change="sendText" class="input-text" autofocus placeholder="缁橠eepSeek鍙戦�佹秷鎭�" />--> +<!-- <img class="send-icon" src="@/assets/img/emoji/rocket.png" alt="" @click="sendText" />--> + +<!-- </div>--> +<!-- </div>--> + </div> +</template> + +<script setup> +import { ref, reactive, onMounted, nextTick,onActivated } from 'vue' +import { useRoute } from 'vue-router' +import { animation } from '@/utils/util' +import chatGPTHeadImg from '@/assets/img/head_portrait1.png' +import headPortrait from '@/assets/img/head_portrait.jpg' +import FileCard from '@/components/FileCard.vue' +import { ElMessage } from "element-plus" + +// 瀹氫箟鍝嶅簲寮忔暟鎹� +const route = useRoute() +const chatContent = ref(null) +const ws = ref(null) +const chatList = ref([ + { + headImg: chatGPTHeadImg, + name: '灏忔櫤', + time: new Date().toLocaleTimeString(), + msg: ' 灏忔櫤涓烘偍鏈嶅姟', + chatType: 0, + uid: '1002' + } +]) +const inputMsg = ref('') +const isSend = ref(false) +const fileList = ref([]) +const isProcessing = ref(false) +const loading = ref(false) +const srcImgList = ref([]) + +// 鍒犻櫎鍥剧墖 +const deleteImg = (index) => { + if (index >= 0 && index < fileList.value.length) { + fileList.value.splice(index, 1) + } +} + +// WebSocket娑堟伅鎺ユ敹 +const websocketonmessage = (e) => { + const redata = JSON.parse(e.data) + //鏁版嵁鎺ユ敹 + let chatGPT = { + headImg: headPortrait, + name: 'DeepSeek', + time: new Date().toLocaleTimeString(), + msg: redata[0].text, + chatType: 0, //淇℃伅绫诲瀷锛�0鏂囧瓧锛�1鍥剧墖 + uid: '1002' //uid + } + sendMsg(chatGPT) + isSend.value = false +} + +// WebSocket鍙戦�佹秷鎭� +const websocketsend = (Data) => { + console.log("鍗冲皢鍙戦�佹秷鎭�", Data) + if (ws.value && ws.value.readyState === WebSocket.OPEN) { + console.log("鍙戦�佹秷鎭�", ws.value) + console.log("鍙戦�佹秷鎭�", Data) + let fileUrls = fileList.value.map(item => item.file.fileUrl) + //鏁版嵁鍙戦�� + ws.value.send(Data + ":" + fileUrls.join(",")) + fileList.value = [] + inputMsg.value = '' + } +} + +// 鍙戦�佹枃鏈秷鎭� +const sendText = () => { + if (inputMsg.value) { + let chatMsg = { + headImg: headPortrait, + name: '鍗ч緳', + time: new Date().toLocaleTimeString(), + msg: inputMsg.value, + chatType: 0, //淇℃伅绫诲瀷锛�0鏂囧瓧锛�1鍥剧墖 + uid: '1001' //uid + } + sendMsg(chatMsg) + let chatGPT = { + headImg: headPortrait, + name: 'DeepSeek', + time: new Date().toLocaleTimeString(), + msg: "", + chatType: 0, //淇℃伅绫诲瀷锛�0鏂囧瓧锛�1鍥剧墖 + uid: '1002' //uid + } + chatList.value.push(chatGPT) // 灏嗘帴鏀跺埌鐨勬秷鎭瓨鍌ㄥ埌 messages 鏁扮粍 + inputMsg.value = '' + loading.value = true + isSend.value = true + websocketsend(chatMsg.msg) + } else { + ElMessage({ + message: '娑堟伅涓嶈兘涓虹┖鍝', + type: 'warning' + }) + } +} + +// 鍙戦�佷俊鎭� +const sendMsg = (msgList) => { + chatList.value.push(msgList) + scrollBottom() +} + +// 鑾峰彇绐楀彛楂樺害骞舵粴鍔ㄨ嚦鏈�搴曞眰 +const scrollBottom = () => { + nextTick(() => { + const scrollDom = chatContent.value + animation(scrollDom, scrollDom.scrollHeight - scrollDom.offsetHeight) + }) +} + +// 缁勪欢鎸傝浇鏃舵墽琛� +onActivated(() => { + chatList.value = [] + chatList.value.push({ + headImg: chatGPTHeadImg, + name: '灏忔櫤', + time: new Date().toLocaleTimeString(), + msg: '灏忔櫤涓烘偍鏈嶅姟', + chatType: 0, + uid: '1002' + }) + chatList.value.push({ + headImg: chatGPTHeadImg, + name: '鍗ч緳', + time: new Date().toLocaleTimeString(), + msg: route.query.keyWord, + chatType: 0, + uid: '1001' + }) + // 娣诲姞涓�涓┖鐨勫洖澶嶆秷鎭崰浣� + const replyMsg = { + headImg: chatGPTHeadImg, + name: '灏忔櫤', + time: new Date().toLocaleTimeString(), + msg: '', + chatType: 0, + uid: '1002' + } + chatList.value.push(replyMsg) + scrollBottom() + + // 濡傛灉鏈夋煡璇㈠叧閿瓧锛屽垯妯℃嫙娴佸紡杈撳嚭 + if (route.query.keyWord) { + simulateStreamingOutput(replyMsg) + } +}) +// 妯℃嫙娴佸紡杈撳嚭 +const simulateStreamingOutput = (msgObj) => { + // 鐢熸垚0.8-1.8绉掍箣闂寸殑闅忔満寤惰繜 + const delay = Math.random() * 1000 + 800 + + // 妯℃嫙鍥炲鍐呭锛堝疄闄呭簲鐢ㄤ腑搴斾粠API鑾峰彇锛� + const responseText = `鍏充簬"${route.query.keyWord}"鐨勯棶棰橈紝鎴戞潵涓烘偍瑙g瓟锛歕n\n杩欐槸涓�涓ず渚嬪洖澶嶅唴瀹癸紝灞曠ず娴佸紡杈撳嚭鏁堟灉銆傚湪瀹為檯搴旂敤涓紝杩欓噷浼氭槸鏉ヨ嚜AI鐨勭湡瀹炲洖澶嶅唴瀹广�俓n\n璇风◢绛夛紝鎴戞鍦ㄦ暣鐞嗙浉鍏充俊鎭�...` + + + isSend.value = true + + let index = 0 + const interval = setInterval(() => { + isSend.value = true + if (index < responseText.length) { + msgObj.msg += responseText.charAt(index) + index++ + isSend.value = false + scrollBottom() + } else { + clearInterval(interval) + isSend.value = false + } + }, 50) // 姣�50ms杈撳嚭涓�涓瓧绗︼紝妯℃嫙娴佸紡鏁堟灉 +} +</script> + +<style lang="scss" scoped> +.mobile-chat-wrapper { + display: flex; + flex-direction: column; + overflow: hidden; + height: 91vh; + position: relative; + background-color: white; + + .chat-history { + flex: 1 1 0; + overflow-y: auto; + } + + .chat-input-wrapper { + padding: 8px 16px 8px 8px; + position: absolute; + left: 0; + right: 0; + bottom: 0; + .file-tt{ + flex-direction: column; + width: 200px; + display: flex; + padding: 5px; + border-radius: 5px; + margin-right: 5px; + background: #cacaca; + .file-item{ + width: 200px; + overflow:hidden; + word-wrap: break-word; + text-overflow:ellipsis; + display:-webkit-box; + -webkit-box-orient:vertical; + -webkit-line-clamp:2; + } + } + + .send-icon { + height: 40px; + margin-left: 16px; + } + .input-text{ + font-size: 18px; + width: 100%; + border-radius: 20px; + height: 80px; + padding-left: 10px; + //padding-top: 10px; + border: none; + color: black; /* 淇敼鏂囨湰棰滆壊涓虹櫧鑹� */ + background-color: #f5f4f4; /* 淇敼鑳屾櫙棰滆壊涓烘繁鐏拌壊 */ + } + } + + .chat-content { + width: 100%; + height: 80%; + overflow-y: scroll; + padding: 20px; + box-sizing: border-box; + + &::-webkit-scrollbar { + width: 0; + /* Safari,Chrome 闅愯棌婊氬姩鏉� */ + height: 0; + /* Safari,Chrome 闅愯棌婊氬姩鏉� */ + display: none; + /* 绉诲姩绔�乸ad 涓奡afari锛孋hrome锛岄殣钘忔粴鍔ㄦ潯 */ + } + + .chat-wrapper { + position: relative; + word-break: break-all; + + .chat-friend { + width: 100%; + float: left; + margin-bottom: 20px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + + .chat-text { + max-width: 90%; + padding: 20px; + border-radius: 20px 20px 20px 5px; + background-color: rgb(245, 248, 248); + color: black; + + &:hover { + background-color: rgb(232, 232, 232); + } + + pre { + white-space: break-spaces; + } + } + + .chat-img { + img { + width: 100px; + height: 100px; + } + } + + .info-time { + margin: 10px 0; + color: black; + font-size: 14px; + + img { + width: 30px; + height: 30px; + border-radius: 50%; + vertical-align: middle; + margin-right: 10px; + } + + span:last-child { + color: rgb(101, 104, 115); + margin-left: 10px; + vertical-align: middle; + } + } + } + + .chat-me { + width: 100%; + float: right; + margin-bottom: 20px; + position: relative; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-end; + + .chat-text { + float: right; + max-width: 90%; + padding: 20px; + border-radius: 20px 20px 5px 20px; + background-color: rgb(29, 144, 245); + color: #fff; + + &:hover { + background-color: rgb(26, 129, 219); + } + } + + .chat-img { + img { + max-width: 300px; + max-height: 200px; + border-radius: 10px; + } + } + + .info-time { + margin: 10px 0; + color: black; + font-size: 14px; + display: flex; + justify-content: flex-end; + + img { + width: 30px; + height: 30px; + border-radius: 50%; + vertical-align: middle; + margin-left: 10px; + } + + span { + line-height: 30px; + } + + span:first-child { + color: rgb(101, 104, 115); + margin-right: 10px; + vertical-align: middle; + } + } + } + } + } + .flash_cursor { + width: 20px; + height: 30px; + display: inline-block; + background: #d6e3f5; + opacity: 1; + animation: glow 800ms ease-out infinite alternate; + } + @keyframes glow { + 0% { + opacity: 1; + } + + 25% { + opacity: 0.5; + } + + 50% { + opacity: 0; + } + + 75% { + opacity: 0.5; + } + + 100% { + opacity: 1; + } + } +} +</style> diff --git a/src/views/chatHome/chatHomeIndex/home.vue b/src/views/chatHome/chatHomeIndex/home.vue new file mode 100644 index 0000000..445ad3c --- /dev/null +++ b/src/views/chatHome/chatHomeIndex/home.vue @@ -0,0 +1,190 @@ +<template> +<div class="home"> + <div style="background: white;color: black;font-size: 30px;" class="logo"> + <div class="logo-one" style="font-weight: bold"> +<!-- <img src="/src/assets/img/logo.png" style="width: 50px;height: 50px;margin: 0 10px" />--> + <div><i>娣崡涓滄柟鍖婚櫌闆嗗洟DeepSeek搴旂敤骞冲彴</i></div> + </div> + <div class="input"> + <input type="text" v-model="keyWord" class="input-text" placeholder="缁橠eepSeek鍙戦�佹秷鎭�" @keyup.enter="sendMsg" /> + <div style="font-size: 13px;color: #808080;display: flex;justify-content: space-between;padding: 10px;"> + <div style="display: flex;justify-content: center;align-items: center;"> +<!-- <div style="display: flex;justify-content: center;align-items: center;">--> +<!-- <img src="/src/assets/img/logo.png" style="width: 15px;height: 15px;margin: 0 5px" />--> +<!-- <span>娣卞害鎬濊��(R1)</span>--> +<!-- </div>--> +<!-- <div style="display: flex;justify-content: center;align-items: center;">--> +<!-- <img src="/src/assets/img/logo.png" style="width: 15px;height: 15px;margin: 0 5px" />--> +<!-- <span>鑱旂綉鎼滅储</span>--> +<!-- </div>--> + </div> + <div style="display: flex;justify-content: center;align-items: center;margin-right: 5px;"> +<!-- <img src="/src/assets/img/logo.png" style="width: 25px;height: 25px;margin: 0 5px" />--> + <img src="@/assets/img/emoji/rocket.png" style="width: 25px;height: 25px;margin: 0 5px" @click="sendMsg"/> + </div> + </div> + </div> + <div style="width: 780px;"> + <div style="font-weight: bold;margin: 30px 0;">鐑棬鎺ㄨ崘</div> + <div class="keywords"> + <div class="keywordss" @click="sendMsgDefault(keyWordOne)"> + <p class="fontSize aaa">{{keyWordOne}}</p> + <p class="fontSize">閫夋嫨绉戠┖:鏍规嵁鐥呮儏閫夋嫨鐩稿簲鐨勭瀹�(濡傚唴绉戙�佸绉戙�佸効绉戠瓑)</p> + <p class="fontSize">鎸傚彿鏂瑰紡:鐜板満鎸傚彿:鍦ㄥ尰闄㈡寕鍙风獥鍙f帓闃熷姙鐞嗐�傜嚎涓婃寕鍙�:閫氳繃鍖婚櫌瀹樼綉銆佸井</p> + <p class="fontSize">淇″叕浼楀彿鎴栫涓夋柟骞冲彴棰勭害...</p> + </div> + <div class="keywordss" @click="sendMsgDefault(keyWordTwo)"> + <p class="fontSize aaa">{{keyWordTwo}}</p> + <p class="fontSize">鏅�氱梾鎴�:鎺㈣鏃堕棶涓�鑸负姣忓ぉ涓婂崍10:00-12:00锛屼笅鍗�14:00-20.00銆傛瘡娆℃帰瑙嗕汉</p> + <p class="fontSize">鏁颁笉瓒呰繃2浜猴紝鎺㈣鏃堕棿涓嶈秴杩�30鍒嗛挓銆�</p> + <p class="fontSize">閲嶇棁鐩戞姢瀹�(1CU):鎺㈣鏃堕棶杈冪煭锛岄�氬父涓烘瘡澶�15:00-16:00銆傛帰瑙嗕汉鏁�.</p> + </div> + </div> + <div class="keywords"> + <div class="keywordss" @click="sendMsgDefault(keyWordFive)"> + <p class="fontSize aaa">{{keyWordFive}}</p> + <p class="fontSize">閫夋嫨浣撴濂楅:鏍规嵁涓汉闇�姹傞�夋嫨鍩虹濂楄交鎴栦笓椤规鏉忓銆�</p> + <p class="fontSize">棰勭害鏂瑰紡:绾夸笂棰勭害:閫氳繃鍖婚櫌瀹樼綉銆佸井淇″叕浼楀彿鎴栫涓夋柟骞冲彴棰勭害銆傜數璇濊鲍</p> + <p class="fontSize">绾�:鎷ㄦ墦鍖婚櫌浣撴涓績鐢佃瘽杩涜棰勭害銆傜幇鍦洪绾�:鐩存帴鍒颁綋妫�涓績</p> + </div> + <div class="keywordss" @click="sendMsgDefault(keyWordSix)"> + <p class="fontSize aaa">{{keyWordSix}}</p> + <p class="fontSize">鍖荤敓纭鍑洪櫌:涓绘不鍖荤敓璇勪及鎮h�呯梾鎯呭悗锛屽紑鍏峰嚭闄€��</p> + <p class="fontSize">缁撶畻璐圭敤:鎮h�呮垨瀹跺睘鎼哄甫浣忛櫌鎶奸噾鍗曘�佸尰淇濆崱绛夋潗鏂欏埌鍑洪櫌缁撶畻绐楀彛鍔炵悊銆傛牳</p> + <p class="fontSize">瀵硅垂鐢ㄦ槑缁嗭紝鏀粯鑷垂閮ㄥ垎鎴栧姙鐞嗗尰淇濇姤閿�..</p> + </div> + </div> + <div class="keywords"> + <div class="keywordss" @click="sendMsgDefault(keyWordServen)"> + <p class="fontSize aaa">{{keyWordServen}}</p> + <p class="fontSize">闄㈠唴鎶曡瘔:鐩存帴鍚戝尰闄㈠尰鍔$鎴栨偅鑰呮湇鍔′腑蹇冨弽鏄犻棶棰樸�傚~鍐欐姇璇夎〃锛屾彁渚涜缁�</p> + <p class="fontSize">鎯呭喌鍜岃瘉鎹�(濡傜梾鍘嗐�佸綍闊崇瓑)銆�</p> + <p class="fontSize">涓婄骇閮ㄩ棬鎶曡瘔:鍚戝綋鍦板崼鐢熻兘搴峰鍛樹細鎴栧尰鐤楃籂绾疯皟瑙e鍛樹細鎶曡瘔銆傛嫧鎵撯��</p> + </div> + <div class="keywordss" @click="sendMsgDefault(keyWordEight)"> + <p class="fontSize aaa">{{keyWordEight}}</p> + <p class="fontSize">鐢宠杞櫌:鎮h�呮垨瀹跺睘鍚戜富娌诲尰鐢熸彁鍑鸿浆闄㈢敵璇枫�傚尰鐢熻瘎浼扮梾鎯咃紝纭鏄惁闇�瑕�</p> + <p class="fontSize">杞櫌銆�</p> + <p class="fontSize">寮�鍏疯浆闄㈣瘉鏄�:涓绘不鍖荤敓寮�鍏疯浆闄㈣瘉鏄庯紝璇存槑杞櫌鍘熷洜鍜岀梾鎯�..鈥�</p> + </div> + </div> + </div> + </div> + + <div></div> +</div> +</template> + +<script setup> +import { ref,onMounted } from "vue"; +import {useRoute,useRouter} from "vue-router" +const route = useRoute(); +const router = useRouter(); +const keyWord = ref(''); +const keyWordOne = ref('鍖婚櫌鎸傚彿娴佺▼鏄�庢牱鐨�?'); +const keyWordTwo = ref('鍖婚櫌鎺㈣鏃堕棶鏈夊摢浜涜瀹�?'); +const keyWordFive = ref('鍖婚櫌濡備綍棰勭害浣撴?'); +const keyWordSix = ref('鍖婚櫌濡備綍鍔炵悊鍑洪櫌鎵嬬画?'); +const keyWordServen = ref('鍖婚櫌濡備綍鎶曡瘔鍖荤枟鏈嶅姟璐ㄩ噺?'); +const keyWordEight = ref('鍖婚櫌濡備綍鍔炵悊杞櫌鎵嬬画?'); + +onMounted(() => { + // const script = document.createElement('script'); + // script.src = '/src/assets/js/index.js'; + // // script.type = 'module' + // script.onload = () => { + // console.log('index.js 宸插姞杞�'); + // }; + // document.head.appendChild(script); +}); +const sendMsg = () => { + router.push({ path: '/main/MobileChat',query:{ keyWord: keyWord.value} }) +} + +const sendMsgDefault = (value) => { + router.push({ path: '/main/MobileChat',query:{ keyWord: value} }) +} + +</script> + +<style lang="scss" scoped> +.home { + width: 100%; + height: 91vh; + display: flex; + flex-direction: column; + align-items: center; + + .logo { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + z-index: 99; + width: 100%; + height: 100%; + color: #fff; + cursor: pointer; + overflow: hidden; + background-color: #F0F6F9; + + .keywords { + display: flex; + width: 100%; + height: 90px; + line-height: 80px; + justify-content: space-between; + margin: 10px 0; + + .keywordss { + box-shadow: 0px 2px 5px #b8b8b8; + width: 48%; + background: #e0edfc; + border-radius: 10px; + + .aaa { + font-weight: bold; + font-size: 12px; + } + + .fontSize { + font-size: 10px; + height: 15px; + line-height: 15px; + margin: 6px; + } + } + } + + .logo-one { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 20px; + } + + .input { + width: 780px; + height: 150px; + background: #f5f4f4; + border-radius: 20px; + + .input-text { + font-size: 18px; + width: 568px; + border-radius: 20px 20px 0 0; + height: 90px; + padding-left: 10px; + border: none; + color: black; + background-color: #f5f4f4; + } + + .input-text:focus { + outline: none; + border: none; + } + } + } +} +</style> -- Gitblit v1.9.3