更新chat的ui界面
This commit is contained in:
539943419 committed
1 parent
530e54a596
commit
709cac04f6
6 files changed
+111
-60
No files matched your search
+70
-50
@@ -1,52 +1,58 @@
|
||||
<template>
|
||||
<n-flex style="padding-top: 10px;padding-bottom: 10px;">
|
||||
<n-input v-model:value="groupCode" type="text" placeholder="输入邀请码" style="flex:1">
|
||||
<template #suffix>
|
||||
<n-icon :component="CopyOutline" style="cursor: pointer;" @click='toClipboard(groupCode)' />
|
||||
</template>
|
||||
</n-input>
|
||||
<n-flex>
|
||||
<n-button @click="createGroup" :disabled="groupCode !== ''" :type="groupCode !== '' ? 'default' : 'primary'"
|
||||
ghost>
|
||||
创建群组
|
||||
</n-button>
|
||||
<n-button @click="joinGroup(groupCode)" :disabled="groupCode === ''"
|
||||
:type="groupCode === '' ? 'default' : 'primary'" ghost>
|
||||
加入群组
|
||||
</n-button>
|
||||
<n-flex vertical>
|
||||
<n-flex style="padding-top: 10px;">
|
||||
<n-input v-model:value="groupCode" type="text" placeholder="输入邀请码" style="flex:1">
|
||||
<template #suffix>
|
||||
<n-icon :component="CopyOutline" style="cursor: pointer;" @click='toClipboard(groupCode)' />
|
||||
</template>
|
||||
</n-input>
|
||||
<n-flex>
|
||||
<n-button @click="createGroup" :disabled="groupCode !== ''" :type="groupCode !== '' ? 'default' : 'primary'"
|
||||
ghost>
|
||||
创建群组
|
||||
</n-button>
|
||||
<n-button @click="joinGroup(groupCode)" :disabled="groupCode === ''"
|
||||
:type="groupCode === '' ? 'default' : 'primary'" ghost>
|
||||
加入群组
|
||||
</n-button>
|
||||
<n-button @click="shareWithQR()" :disabled="activeGID === null" v-show="activeGID !== null"
|
||||
:type="activeGID === null ? 'default' : 'primary'">
|
||||
分享群组
|
||||
</n-button>
|
||||
<n-select v-model:value="activeGID" :options="joinedGroup.map(gid => { return { label: gid, value: gid } })" v-show="activeGID !== null"
|
||||
placeholder="未加入群组" style="flex:1;user-select: none;" />
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
<!-- <n-flex style="padding-top: 10px;padding-bottom: 10px;">
|
||||
<n-select v-model:value="activeGID" :options="joinedGroup.map(gid => { return { label: gid, value: gid } })"
|
||||
placeholder="选择当前查看群组" style="flex:1" />
|
||||
<n-button @click="shareWithQR()" :disabled="activeGID === null"
|
||||
:type="activeGID === null ? 'default' : 'primary'">
|
||||
分享群组
|
||||
</n-button>
|
||||
</n-flex> -->
|
||||
<!-- <n-data-table :columns="columns"
|
||||
:data="activeGID ? Messages[activeGID].map(v => { v.timestampString = new Date(v.timestamp).toLocaleString(); return v }).reverse() : []"
|
||||
:row-props="null" :bordered="false" :single-line="false" :max-height="400" /> -->
|
||||
<div style="flex:1; position: relative;min-height: none;">
|
||||
<chatui style="margin-bottom: 10px; height: 65vh"
|
||||
:messages="activeGID ? Messages[activeGID].map(v => { v.timestampString = new Date(v.timestamp).toLocaleString(); return v }).reverse() : []"/>
|
||||
|
||||
<n-input v-model:value="msg" type="textarea" placeholder="发送信息" :autosize="{
|
||||
minRows: 1,
|
||||
maxRows: 2
|
||||
}" @keydown="handleKeyDown">
|
||||
<template #suffix>
|
||||
<n-icon :component="SendOutline" style="cursor: pointer;" @click='sendMsg(activeGID, msg)'/>
|
||||
</template>
|
||||
</n-input>
|
||||
|
||||
<!-- <n-button @click="sendMsg(activeGID, msg)" :disabled="msg === '' || activeGID === null"
|
||||
:type="msg === '' || activeGID === null ? 'default' : 'primary'">
|
||||
发送消息
|
||||
</n-button> -->
|
||||
</div>
|
||||
</n-flex>
|
||||
<!-- <n-text> createTest gID:{{ gID }}<br />key:{{ key }}<br />code:{{ gID+key }}</n-text>
|
||||
<n-input
|
||||
v-model:value="codeInput"
|
||||
type="textarea"
|
||||
placeholder="测试加入群组"
|
||||
/>
|
||||
<n-button @click="joinGroup(codeInput)">
|
||||
joinTest
|
||||
</n-button> -->
|
||||
<n-input v-model:value="msg" type="textarea" placeholder="测试发送信息" :autosize="{
|
||||
minRows: 3,
|
||||
maxRows: 3
|
||||
}" />
|
||||
<n-flex style="padding-top: 10px;padding-bottom: 10px;">
|
||||
<n-select v-model:value="activeGID" :options="joinedGroup.map(gid => { return { label: gid, value: gid } })"
|
||||
placeholder="选择当前查看群组" style="flex:1" />
|
||||
<n-button @click="sendMsg(activeGID, msg)" :disabled="msg === '' || activeGID === null"
|
||||
:type="msg === '' || activeGID === null ? 'default' : 'primary'">
|
||||
发送消息
|
||||
</n-button>
|
||||
<n-button @click="shareWithQR()" :disabled="activeGID === null"
|
||||
:type="activeGID === null ? 'default' : 'primary'">
|
||||
分享群组
|
||||
</n-button>
|
||||
</n-flex>
|
||||
<!-- <n-button @click="dataTest.length = 0">
|
||||
clearMsg
|
||||
</n-button> -->
|
||||
<n-data-table :columns="columns"
|
||||
:data="activeGID ? Messages[activeGID].map(v => { v.timestampString = new Date(v.timestamp).toLocaleString(); return v }).reverse() : []"
|
||||
:row-props="null" :bordered="false" :single-line="false" :max-height="400" />
|
||||
|
||||
|
||||
<n-modal v-model:show="showModal">
|
||||
@@ -58,7 +64,9 @@
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<n-qr-code :value="QRCodeData" style="padding: 0;" :size="256" error-correction-level="Q" :v-if="showModal" :icon-src='QRIconUrl' :icon-size="128"/>
|
||||
<n-qr-code :value="QRCodeData" style="padding: 0;" :size="256" error-correction-level="Q" :v-if="showModal"
|
||||
:icon-src='0?QRIconUrl:null'
|
||||
:icon-size="128"/>
|
||||
</n-card>
|
||||
</n-modal>
|
||||
</template>
|
||||
@@ -72,8 +80,9 @@ import { useSettingStore } from "@/pinia/store";
|
||||
import { generateKey, encryptString } from '@/func/upload';
|
||||
import { decryptString } from '@/func/download';
|
||||
import WebsocketHeartbeatJs from 'websocket-heartbeat-js';
|
||||
import { CopyOutline } from '@vicons/ionicons5'
|
||||
import { CopyOutline,SendOutline } from '@vicons/ionicons5'
|
||||
import getQueryString from '@/func/getQuery'
|
||||
import chatui from "@/components/chatui.vue"
|
||||
|
||||
|
||||
|
||||
@@ -122,6 +131,10 @@ const columnsTest = [
|
||||
key: "msg"
|
||||
},
|
||||
];
|
||||
function handleKeyDown(e){
|
||||
console.log(e)
|
||||
|
||||
}
|
||||
|
||||
// 用于二维码分享
|
||||
const showModal = ref(false)
|
||||
@@ -212,7 +225,7 @@ socket.onmessage = (event) => {
|
||||
} else if (type === 'gMsg') {
|
||||
let gID = msg.gID
|
||||
let key = gID2key[gID].key
|
||||
Messages.value[msg.gID].push({ type: msg.type, msg: decryptString(key, msg.msg), from: msg.from, timestamp: msg.timestamp })
|
||||
Messages.value[msg.gID].push({ type: msg.type,type1:msg.type1, msg: decryptString(key, msg.msg), from: msg.from, timestamp: msg.timestamp })
|
||||
// console.log(Messages.value)
|
||||
dataTest.value.push({ from: 'decrypt', msg: decryptString(key, msg.msg) })
|
||||
}
|
||||
@@ -261,11 +274,18 @@ function joinGroup_Verify(gID) {
|
||||
}
|
||||
|
||||
function sendMsg(gID, msg) {
|
||||
if(msg === '' || activeGID.value === null)return
|
||||
let key = gID2key[gID].key
|
||||
msg = encryptString(key, msg, setting)
|
||||
socket.send(JSON.stringify({ type: 'message', msg, gID }))
|
||||
socket.send(JSON.stringify({ type: 'message',type1:'text', msg, gID }))
|
||||
}
|
||||
|
||||
function sendImg(gID,code){
|
||||
if(msg === '' || activeGID.value === null)return
|
||||
let key = gID2key[gID].key
|
||||
msg = encryptString(key, msg, setting)
|
||||
socket.send(JSON.stringify({ type: 'message',type1:'img', msg, gID }))
|
||||
}
|
||||
|
||||
|
||||
// 通过地址传参并加入传入的群组
|
||||
|
||||
@@ -79,6 +79,7 @@ async function login() {
|
||||
settingData.setJWT(data.token,keepTokenLocal)
|
||||
settingData.setUserID(userIDInput.value,keepTokenLocal)
|
||||
settingData.setUserGroup(data.userGroup,keepTokenLocal)
|
||||
message.success(`登录成功`);
|
||||
} catch (e) {
|
||||
isLogining.value = false
|
||||
message.error(`登录失败`);
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<n-text style="font-size: 16px;user-select: none;">点击此处或者拖动文件到该区域来上传</n-text>
|
||||
<n-p depth="3" style="margin: 8px 0 0 0;user-select: none;">
|
||||
最大支持200MB大小文件，其实只是懒得做分片上传而已
|
||||
<br />虽然理论上没有人有能力审查你上传的东西
|
||||
<!-- <br />虽然理论上没有人有能力审查你上传的东西 -->
|
||||
<br />反正没人用写这么多干什么。。。
|
||||
</n-p>
|
||||
</n-upload-dragger>
|
||||
|
||||
Reference in new issue
Block a user