539943419/miaoShare
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改chat界面样式，增加复制文本消息功能

Browse Source
This commit is contained in:
539943419 committed 2024-07-20 09:16:49 +08:00
1 parent b29add4ae5
commit cf4297cc3c
6 files changed
+5142 -50
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/chatui.vue
+74 -23
View File
@@ -1,18 +1,12 @@
<template>
<!-- <div style="border: 1px solid rgb(239, 239, 245);border-radius: 5px;position: relative;"> -->
<n-scrollbar
style="padding: 10px;padding-right: 15px; border: 1px solid rgb(239, 239, 245);border-radius: 5px;position: relative;">
<n-scrollbar class="scrollbar">
<n-image-group>
<div v-for="msg of props.messages">
<div style="color:slategrey;">{{ `${msg.from.split('-')[0]} ${msg.timestampString}` }}</div>
<div style="background-color: rgb(239, 239, 245); padding: 2px 7px; width: fit-content; border-radius: 5px; white-space: pre-wrap;"
v-if="msg.type1 === 'text'">
<div class="message-title">{{ `${msg.from.split('-')[0]} ${msg.timestampString}` }}</div>
<div class="message-text" v-if="msg.type1 === 'text'">
<span>{{ msg.msg }}</span>
<!-- <span v-if="msg.type1 === 'img'"> -->
<!-- <n-image :src="imgUrlCache[msg.msg]" width="100" style="margin-top: 5px;border-radius: 5px;" /> -->
<!-- img->>{{ msg.msg }} -->
<!-- </span> -->
<n-icon :component="CopyOutline" class="message-text-copy" @click='toClipboard(msg.msg)' />
</div>
<div v-if="msg.type1 === 'img'">
<span>
@@ -22,10 +16,8 @@
</span>
</div>
<div v-if="msg.type1 === 'file'"
style="background-color: rgb(239, 239, 245); padding: 2px 7px; width: fit-content; border-radius: 5px;">
<n-flex style="justify-content: center;align-items: center;user-select: none;cursor: pointer;"
@click="downloadFile(msg.msg)">
<div v-if="msg.type1 === 'file'" class="message-file">
<n-flex class="message-file-content" @click="downloadFile(msg.msg)">
<n-icon :component="DownloadIcon" size="50" style="margin-top: 0px;"></n-icon>
<n-flex vertical v-if="fileInfoCache[msg.msg]">
<div style="font-weight: 500;margin-top: 8px;font-size: large;">
@@ -39,9 +31,9 @@
<!-- lets show u a bullshit -->
<div>
{{ fileStatus2String[fileInfoCache[msg.msg].status ? fileInfoCache[msg.msg].status :
'Unknow'] ? fileStatus2String[fileInfoCache[msg.msg].status ?
fileInfoCache[msg.msg].status : 'Unknow'] : fileInfoCache[msg.msg].status ?
fileInfoCache[msg.msg].status : 'Unknow' }}
'Unknow'] ? fileStatus2String[fileInfoCache[msg.msg].status ?
fileInfoCache[msg.msg].status : 'Unknow'] : fileInfoCache[msg.msg].status ?
fileInfoCache[msg.msg].status : 'Unknow' }}
</div>
</n-flex>
</n-flex>
@@ -63,10 +55,12 @@
import { NScrollbar, NEmpty, NImage, NImageGroup, NSkeleton, NIcon, NFlex } from 'naive-ui'
import { ref, watch } from 'vue';
import { useSettingStore } from "@/pinia/store";
import { decrypt, decryptString,downloadFromUint8Array } from '../func/download'
import { CubeOutline as DownloadIcon } from '@vicons/ionicons5'
import { decrypt, decryptString, downloadFromUint8Array } from '../func/download'
import { CubeOutline as DownloadIcon, CopyOutline } from '@vicons/ionicons5'
import fileSize2String from '@/func/fileSize2String'
import useClipboard from "vue-clipboard3";
const { toClipboard } = useClipboard();
const setting = useSettingStore();
const serverPort = setting.serverPort;
const baseUrl = location.protocol + "//" + location.hostname + ":" + serverPort + "/";
@@ -140,7 +134,7 @@ async function downloadFile(code) {
decrypt(key, data).then(data => {
fileInfoCache.value[code].status = `finish`;
fileInfoCache.value[code].data = data
downloadFromUint8Array(data,fileInfoCache.value[code].fileName)
downloadFromUint8Array(data, fileInfoCache.value[code].fileName)
resolve(data)
});
})
@@ -149,8 +143,8 @@ async function downloadFile(code) {
console.error(err);
});
})
}else if(fileInfoCache.value[code].status === 'finish'){
downloadFromUint8Array(fileInfoCache.value[code].data,fileInfoCache.value[code].fileName)
} else if (fileInfoCache.value[code].status === 'finish') {
downloadFromUint8Array(fileInfoCache.value[code].data, fileInfoCache.value[code].fileName)
}
};
@@ -259,4 +253,61 @@ watch(() => props.messages, async () => {
})
</script>
<style></style>
<style scoped lang="scss">
.scrollbar {
padding: 10px;
padding-right: 15px;
border: 1px solid rgb(239, 239, 245);
border-radius: 5px;
position: relative;
.message-title {
color: slategrey;
}
.message-text {
position: relative;
background-color: rgb(239, 239, 245);
padding: 2px 7px;
// padding-right: 5px;
width: fit-content;
max-width: calc(100% - 28px);
border-radius: 5px;
white-space: pre-wrap;
.message-text-copy {
cursor: pointer;
position: absolute;
bottom: 8px;
right: -10px;
height: 7px;
width: 7px;
opacity: 0;
}
}
.message-text:hover .message-text-copy {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.message-text:not(:hover) .message-text-copy {
opacity: 0;
transition: opacity 0.3s ease-in-out;
transition-delay: 0.5s;
}
.message-file {
background-color: rgb(239, 239, 245);
padding: 2px 7px;
width: fit-content;
border-radius: 5px;
.message-file-content {
justify-content: center;
align-items: center;
user-select: none;
cursor: pointer;
}
}
}
</style>