修正AES加密字符串中对emoji处理的编码问题

src/views/chat.vue

@@ -1,8 +1,20 @@
 <template>
-    <n-button @click="createGroup">
-        createTest
-    </n-button>
-    <n-text> createTest gID:{{ gID }}<br />key:{{ key }}<br />code:{{ gID+key }}</n-text>
+    <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>
+    </n-flex>
+    <!-- <n-text> createTest gID:{{ gID }}<br />key:{{ key }}<br />code:{{ gID+key }}</n-text>
     <n-input
             v-model:value="codeInput"
             type="textarea"
@@ -10,43 +22,84 @@
     />
     <n-button @click="joinGroup(codeInput)">
         joinTest
-    </n-button>
+    </n-button> -->
     <n-input
             v-model:value="msg"
             type="textarea"
             placeholder="测试发送信息"
+            :autosize="{
+                minRows: 3,
+                maxRows: 3
+            }"
     />
-    <n-button @click="sendMsg(codeInput.substring(0,8),msg)">
-        sendMsgTest
-    </n-button>
-    <n-button @click="data.length = 0">
+    <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-flex>
+    <!-- <n-button @click="dataTest.length = 0">
         clearMsg
-    </n-button>
+    </n-button> -->
     <n-data-table
         :columns="columns"
-        :data="data"
+        :data="activeGID?Messages[activeGID].map(v=>{v.timestampString = new Date(v.timestamp).toLocaleString();return v}):[]"
         :row-props="null"
-        :max-height="250"
         :bordered="false"
         :single-line="false"
+        :max-height="400"
     />
 </template>
 
 <script setup>
 import {ref} from 'vue'
-import {NText,NDataTable,NButton,NInput} from 'naive-ui'
+import { useNotification } from "naive-ui";
+import useClipboard from "vue-clipboard3";
+import {NIcon,NFlex,NDataTable,NButton,NInput,NSelect} from 'naive-ui'
 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'
 
 
 
+const notification = useNotification();
+const { toClipboard } = useClipboard();
+
 const setting = useSettingStore();
 const serverPort = setting.serverPort;
 const baseUrl = 'ws' + "://" + location.hostname + ":" + serverPort;
 
 const columns = [
+    {
+        "title": "type",
+        "key": "type",
+        width: 80
+    },
+    {
+        "title": "from",
+        "key": "from",
+        width: 80
+    },
+    {
+        "title": "timestamp",
+        "key": "timestampString",
+        width: 150,
+        // sorter: {
+        //     compare: (a, b) => {
+        //         // console.log(a,b,new Date(a),parseInt(new Date(a)) - parseInt(new Date(b)))
+        //         return parseInt(new Date(a.timestamp)) - parseInt(new Date(b.timestamp))
+        //     },
+        // }
+    },
+    {
+        "title": "msg",
+        "key": "msg"
+    }
+]
+const columnsTest = [
     {
         title: "from",
         key: "from"
@@ -56,16 +109,31 @@ const columns = [
         key: "msg"
     },
 ];
-const data = ref([])
-const gID = ref('')
-const codeInput = ref('')
+
+// 凭此code进入群组
+const groupCode = ref('')
+
+// 当前活跃的群组ID
+const activeGID = ref(null)
+
+// 临时生成的key，之后与返回的code结合形成groupCode
 const key = ref('')
+
+// 存储所有消息，通过gID查询一个群组的消息,{msg,from,timestamp}
+const Messages = ref({})
+
+const dataTest = ref([])
+const gID = ref('')
+// const codeInput = ref('')
 const msg = ref('')
-const joinedGroup = []
+
+const joinedGroup = ref([])
+// 由server随机分配uuid
 const uuid = ref('')
 
 
 const gID2key = {}
+
 const options = {
     url: baseUrl,
     pingTimeout: 20000, 
@@ -79,32 +147,42 @@ let socket = new WebsocketHeartbeatJs(options);
 // socket.addEventListener("open", (event) => {
 // //   socket.send("");
 // });
+// setInterval(()=>console.log(activeGID.value),1000)
 
 
 socket.onmessage= (event) => {
     const msg = JSON.parse(event.data)
-    data.value.push({from:'server',msg:event.data})
+    dataTest.value.push({from:'server',msg:event.data})
     if(msg.type){
         let type = msg.type
         if(type === 'sMsg'){
             let type1 = msg.type1
             if(type1 === 'create'){
                 gID.value=msg.gID
+                groupCode.value = msg.gID + key.value
+                joinGroup(groupCode.value)
             }else if(type1 === 'joinVerify'){
                 let gID = msg.gID
                 let key = gID2key[gID].key
-                // console.log(gID2key,gID,key)
                 let res = decryptString(key,msg.verify)
                 console.log(res,key,msg.verify)
+
+                // 验证成功，正式加入群组
                 if(res === 'miaoSpring'){
                     socket.send(JSON.stringify({type:'join',type1:'success',gID}))
-                    joinedGroup.push(msg.gID)
+                    joinedGroup.value.push(msg.gID)
+                    Messages.value[msg.gID] = []
+                    if(activeGID.value === null){
+                        activeGID.value = msg.gID
+                    }
                 }
             }else if(type1 === 'history'){
                 let gID = msg.gID
                 let key = gID2key[gID].key
+                Messages.value[msg.gID].length = 0
                 for(let m of JSON.parse(msg.history)){
-                    data.value.push({from:'decrypt',msg:decryptString(key,m.msg)})
+                    Messages.value[msg.gID].push({type:m.type,msg:decryptString(key,m.msg),from:m.from,timestamp:m.timestamp})
+                    dataTest.value.push({from:'decrypt',msg:decryptString(key,m.msg)})
                 }
             }else if(type1 ===  'uuid'){
                 uuid.value = msg.uuid
@@ -112,7 +190,9 @@ socket.onmessage= (event) => {
         }else if(type === 'gMsg'){
             let gID = msg.gID
             let key = gID2key[gID].key
-            data.value.push({from:'decrypt',msg:decryptString(key,msg.msg)})
+            Messages.value[msg.gID].push({type:msg.type,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)})
         }
     }
 };
@@ -123,9 +203,9 @@ socket.onopen = ()=>{
     }else{
         socket.send(JSON.stringify({type:'uuid',type1:'get'}))
     }
-    console.log(joinedGroup)
-    let toJoin = [...joinedGroup]
-    joinedGroup.length = 0
+    // console.log(joinedGroup)
+    let toJoin = [...joinedGroup.value]
+    joinedGroup.value.length = 0
     for(let gID of toJoin){
         let code = gID+gID2key[gID].key
         console.log(code)
@@ -146,7 +226,7 @@ function createGroup(){
 function joinGroup(code){
     var gID = code.substring(0, 8);
     var key = code.substring(8);
-    if(joinedGroup.includes(gID)){
+    if(joinedGroup.value.includes(gID)){
         return
     }
     gID2key[gID] = {}