添加chat功能

src/views/chat.vue

@@ -0,0 +1,139 @@
+<template>
+    <n-button @click="createGroup">
+        createTest
+    </n-button>
+    <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="测试发送信息"
+    />
+    <n-button @click="sendMsg(codeInput.substring(0,8),msg)">
+        sendMsgTest
+    </n-button>
+    <n-button @click="data.length = 0">
+        clearMsg
+    </n-button>
+    <n-data-table
+        :columns="columns"
+        :data="data"
+        :row-props="null"
+        :max-height="250"
+        :bordered="false"
+        :single-line="false"
+    />
+</template>
+
+<script setup>
+import {ref} from 'vue'
+import {NText,NDataTable,NButton,NInput} from 'naive-ui'
+import { useSettingStore } from "@/pinia/store";
+import { generateKey,encryptString } from '@/func/upload';
+import { decryptString } from '@/func/download';
+
+
+
+const setting = useSettingStore();
+const serverPort = setting.serverPort;
+const baseUrl = 'ws' + "://" + location.hostname + ":" + serverPort;
+
+const columns = [
+    {
+        title: "from",
+        key: "from"
+    },
+    {
+        title: "message",
+        key: "msg"
+    },
+];
+const data = ref([])
+const gID = ref('')
+const codeInput = ref('')
+const key = ref('')
+const msg = ref('')
+const joinedGroup = []
+
+
+const gID2key = {}
+
+
+const socket = new WebSocket(baseUrl);
+socket.addEventListener("open", (event) => {
+//   socket.send("");
+});
+
+
+socket.addEventListener("message", (event) => {
+    const msg = JSON.parse(event.data)
+    data.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
+            }else if(type1 === 'joinVerify'){
+                let gID = msg.gID
+                let key = gID2key[gID]
+                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)
+                }
+            }else if(type1 === 'history'){
+                let gID = msg.gID
+                let key = gID2key[gID]
+                for(let m of JSON.parse(msg.history)){
+                    data.value.push({from:'decrypt',msg:decryptString(key,m.msg)})
+                }
+            }
+        }else if(type === 'gMsg'){
+            let gID = msg.gID
+            let key = gID2key[gID]
+            data.value.push({from:'decrypt',msg:decryptString(key,msg.msg)})
+        }
+    }
+});
+
+function createGroup(){
+    let keyt = generateKey(setting)
+    key.value = keyt
+    socket.send(JSON.stringify({type:'create',verify:encryptString(keyt,'miaoSpring',setting)}))
+}
+
+function joinGroup(code){
+    var gID = code.substring(0, 8);
+    var key = code.substring(8);
+    if(joinedGroup.includes(gID)){
+        return
+    }
+    gID2key[gID] = key
+    joinGroup_Verify(gID)
+}
+
+function joinGroup_Verify(gID){
+    socket.send(JSON.stringify({type:'join',type1:'verify',gID}))
+}
+
+function sendMsg(gID,msg){
+    let key = gID2key[gID]
+    msg = encryptString(key,msg,setting)
+    socket.send(JSON.stringify({type:'message',msg,gID}))
+}
+
+
+</script>
+
+<style>
+</style>

src/views/downloadFileMiao.vue

@@ -0,0 +1,239 @@
+<template>
+    <div style="width:auto">
+        <!-- <p>downloadProcess:{{ downloadProcess }}%</p>
+        <button @click="downloadFile">下载</button>-->
+        <n-input
+            v-model:value="downloadFileID"
+            type="textarea"
+            placeholder="于此处粘贴输入取件码&#13;&#10;多行也能正确识别"
+            :autosize="{
+                minRows: 3,
+                maxRows: 5
+            }"
+        />
+
+        <n-flex justify="end" style="margin: 10px 0;position:relative">
+            <n-button type="error" @click="downloadFileID = null">清空输入</n-button>
+            <n-button type="primary" @click="praseInput">开始下载</n-button>
+        </n-flex>
+        <n-data-table
+            :columns="columns"
+            :data="downloadQuene"
+            :max-height="250"
+            :bordered="false"
+            :single-line="false"
+            style="user-select: none;"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useSettingStore } from "@/pinia/store";
+import {decrypt, decryptString, downloadFromUint8Array} from '../func/download'
+import {NInput,NFlex,NDataTable,NButton} from 'naive-ui'
+
+var downloadFileID = ref();
+
+const setting = useSettingStore();
+
+// 服务端端口
+const serverPort = setting.serverPort;
+
+var baseUrl =
+    location.protocol + "//" + location.hostname + ":" + serverPort + "/";
+// console.log(baseUrl);
+
+// const blob2Uint8Array = function(blob) {
+//     return new Promise((resolve, reject) => {
+//         let reader = new FileReader();
+//         reader.readAsArrayBuffer(blob);
+//         reader.onload = function() {
+//             let buffer = reader.result;
+//             let uint8array = new Uint8Array(buffer);
+//             resolve(uint8array);
+//         };
+//         reader.onerror = function() {
+//             reject(reader.error);
+//         };
+//     });
+// };
+// const decrypt = (key, data) => {
+//     return blob2Uint8Array(data).then(data => {
+//         // 无加密
+//         if(key.length === 0){
+//             return data
+//         }
+//         // SM4
+//         if (key.length >= 34) {
+//             key = key.substring(3);
+//             // console.log([...data])
+//             var decryptedBytes = new Uint8Array(
+//                 sm4.decrypt([...data], key, { output: "array" })
+//             );
+//             return decryptedBytes;
+//         } else {
+//             // AES
+//             key = aesjs.utils.utf8.toBytes(key);
+//             var aesCtr = new aesjs.ModeOfOperation.ctr(
+//                 key,
+//                 new aesjs.Counter(5)
+//             );
+//             var decryptedBytes = aesCtr.decrypt(data);
+//             return decryptedBytes;
+//         }
+//     });
+// };
+// const decryptString = (key, str) => {
+//     // 无加密
+//     if(key.length === 0){
+//         return sm4.decrypt(str, 'miaospringmiaospringmiaospringao');
+//     }
+//     // SM4
+//     // console.log(key,key.length)
+//     if (key.length >= 34) {
+//         key = key.substring(3);
+//         return sm4.decrypt(str, key);
+//     }
+//     // AES
+//     var data = new Uint8Array(
+//         Base64.decode(str)
+//             .split(",")
+//             .map(n => parseInt(n))
+//     );
+//     key = aesjs.utils.utf8.toBytes(key);
+//     var aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(5));
+//     var decryptedBytes = aesCtr.decrypt(data);
+//     var decryptedStr = aesjs.utils.utf8.fromBytes(decryptedBytes);
+//     return decryptedStr;
+// };
+
+// const downloadFromUint8Array = (data, fileName) => {
+//     let uint8Array = data;
+//     let blob = new Blob([uint8Array], { type: "text/plain" });
+//     // 使用file-saver.js
+//     saveAs(blob, fileName);
+
+//     //let url = URL.createObjectURL(blob);
+//     //let a = document.createElement("a");
+//     //a.href = url;
+//     //a.download = fileName;
+//     //a.click();
+//     //URL.revokeObjectURL(url);
+// };
+
+
+// 刷新展示的下载进度
+const updateDownloadQuene = (code, key, value) => {
+    for (let index in downloadQuene.value) {
+        if (downloadQuene.value[index].code == code) {
+            downloadQuene.value[index][key] = value;
+        }
+    }
+};
+const praseInput = () => {
+    let codeArray = downloadFileID.value.split("\n");
+    for (let code of codeArray) {
+        if (
+            code === "" ||
+            downloadQuene.value.filter(m => m.code == code).length !== 0
+        )
+            continue;
+        // console.log(code);
+        let dp = {
+            code: code,
+            fileName: "有的事总是不得而知",
+            downloadProcess: "连接中。。。"
+        };
+        downloadQuene.value.push(dp);
+        downloadFile(code);
+    }
+};
+
+const downloadFile = code => {
+    var id = code.substring(0, 8);
+    var key = code.substring(8);
+    var fileName;
+    const params = {
+        fileName: id
+    };
+    const options = {
+        method: "GET"
+    };
+    fetch(baseUrl + "file/download?" + new URLSearchParams(params), options)
+        .then(res => {
+            fileName = res.headers.get("File-Name");
+            fileName = decryptString(key, fileName);
+            updateDownloadQuene(code, "fileName", fileName);
+            const total = +res.headers.get("Content-Length");
+            let loaded = 0;
+
+            const clone = res.clone();
+            const reader = res.body.getReader();
+            // 感觉怪怪的
+            const read = async () => {
+                const { done, value } = await reader.read();
+                if (done) {
+                    // console.log(clone)
+                    return clone;
+                }
+                loaded += value.length;
+                const percent = (loaded / total) * 100;
+                // downloadProcess['downloadProcess'] = `下载进度：${percent.toFixed(2)}%`;
+                updateDownloadQuene(
+                    code,
+                    "downloadProcess",
+                    `下载进度：${percent.toFixed(2)}%`
+                );
+                // downloadProcess.value = percent.toFixed(2);
+                return read();
+            };
+            return read();
+        })
+        .then(res => {
+            var data = res.blob();
+            return data;
+        })
+        .then(data => {
+            // downloadProcess['downloadProcess'] = '解密中'
+            updateDownloadQuene(code, "downloadProcess", `解密中`);
+            decrypt(key, data).then(data => {
+                updateDownloadQuene(code, "downloadProcess", `已完成`);
+                downloadFromUint8Array(data, fileName);
+            });
+        })
+        .catch(err => {
+            updateDownloadQuene(
+                code,
+                "fileName",
+                `出错，可能是文件过期或下载次数用完`
+            );
+            updateDownloadQuene(code, "downloadProcess", `出错`);
+            console.error(err);
+        });
+};
+// 下载队列
+const downloadQuene = ref([]);
+const columns = [
+    {
+        title: "取件码",
+        key: "code",
+        width: 100
+    },
+    {
+        title: "文件名",
+        key: "fileName",
+        width: 100
+    },
+    {
+        title: "下载状态",
+        key: "downloadProcess",
+        width: 150
+    }
+];
+// 进度条进度
+const progressPercentage = ref(60);
+</script>
+
+<style>
+</style>

src/views/setting.vue

@@ -0,0 +1,83 @@
+<template>
+    <div>
+        <n-list hoverable>
+            <n-list-item>
+                <p style="font-size:larger;position:absolute;left:5px;user-select: none;">选择加密算法:</p>
+                <br />
+                <!-- <br /> -->
+                <!-- <br /> -->
+                <n-flex justify="end">
+                    <span v-for="f in fArray" style="margin:6px 5px -4px 0;">
+                        <n-button
+                            :type="f == activeFuction ? 'primary' : 'default'"
+                            @click="setActiveF(f)"
+                        >{{ f }}</n-button>
+                    </span>
+                </n-flex>
+            </n-list-item>
+            <n-list-item>
+                <p style="font-size:larger;position:absolute;left:5px;user-select: none;">选择密钥组成:</p>
+                <br />
+                <n-flex justify="end">
+                    <span v-for="k in keyButtons" style="margin:5px">
+                        <n-button
+                            :type="activeKeyButtons.includes(k) && activeFuction !== '不加密'  ? 'primary' : 'default'"
+                            :disabled="activeFuction === '不加密'"
+                            @click="setActiveK(k)"
+                        >{{ k }}</n-button>
+                    </span>
+                </n-flex justify="end">
+            </n-list-item>
+        </n-list>
+    </div>
+    <div style="width: 100vw;height:100%"></div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useSettingStore } from "@/pinia/store";
+import { useMessage, useNotification } from "naive-ui";
+import {NList,NListItem,NFlex,NButton} from 'naive-ui'
+
+const setting = useSettingStore();
+const message = useMessage();
+// const notification = useNotification();
+
+const fArray = ref(["AES128", "AES256", "SM4", "不加密"]);
+const activeFuction = ref(setting.activeFuction);
+const keyButtons = ref(["a-z", "A-Z", "0-9"]);
+const activeKeyButtons = ref(setting.activeKeyMap);
+console.log(
+    activeFuction.value,
+    activeKeyButtons.value,
+    activeKeyButtons.value.includes("A-Z")
+);
+function setActiveF(f) {
+    activeFuction.value = f;
+    setting.activeFuction = f;
+    localStorage.setItem("activeFuction", f);
+}
+function setActiveK(k) {
+    if (activeKeyButtons.value.includes(k)) {
+        if (activeKeyButtons.value.length <= 1) {
+            return message.info(`至少选择1项密钥组成`);
+        }
+        activeKeyButtons.value = activeKeyButtons.value.filter(v => v != k);
+    } else {
+        activeKeyButtons.value.push(k);
+    }
+    setting.activeKeyMap = activeKeyButtons.value;
+    localStorage.setItem(
+        "activeKeyMap",
+        JSON.stringify(activeKeyButtons.value)
+    );
+    console.log(
+        activeFuction.value,
+        activeKeyButtons.value,
+        activeKeyButtons.value.includes("A-Z")
+    );
+}
+</script>
+
+<style>
+</style>

src/views/uploadFileMiao.vue

@@ -0,0 +1,266 @@
+<template>
+    <div>
+        <n-upload
+            ref="uploadRef"
+            :default-upload="false"
+            multiple
+            :custom-request="customRequest"
+            @before-upload="beforeUpload"
+        >
+            <n-upload-dragger>
+                <!-- <div style="margin-bottom: 12px">
+                    <n-icon size="48" :depth="3"></n-icon>
+                </div>-->
+                <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 />反正没人用写这么多干什么。。。
+                </n-p>
+            </n-upload-dragger>
+        </n-upload>
+        
+        <n-flex justify="end" style="margin: 10px 0;position:relative">
+            <n-input-number v-model:value="downloadCredit" placeholder="可下载次数,默认无限" clearable :min="1" :max="2147483647" style="width:max-content"/>
+            <n-button type="primary" @click="clickUpload">开始上传</n-button>
+        </n-flex>
+        <n-data-table
+            :columns="columns"
+            :data="file_Code_Map"
+            :row-props="rowProps"
+            :max-height="250"
+            :bordered="false"
+            :single-line="false"
+            style="user-select: none;"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+// import aesjs from "aes-js";
+// import { Base64 } from "js-base64";
+import { useMessage, useNotification } from "naive-ui";
+import useClipboard from "vue-clipboard3";
+import { useSettingStore } from "@/pinia/store";
+// import { sm4 } from 'sm-crypto'
+import {NUpload,NUploadDragger,NText,NP,NFlex,NDataTable,NButton,NInputNumber} from 'naive-ui'
+import {encrypt,encryptString,generateKey} from '../func/upload'
+
+const setting = useSettingStore();
+const { toClipboard } = useClipboard();
+const message = useMessage();
+const notification = useNotification();
+
+
+// 服务端端口
+const serverPort = setting.serverPort;
+
+// console.log(activeFuction,activeKeyButtons)
+// var charMap = ""
+// for(let i of setting.activeKeyMap){
+//     if(i === 'A-Z'){
+//         charMap = charMap + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
+//     }else if(i === "a-z"){
+//         charMap = charMap + 'abcdefghijklmnopqrstuvwxyz'
+//     }else if(i === '0-9'){
+//         charMap = charMap + '0123456789'
+//     }
+// }
+// // 生成密钥
+// const generateKey = function() {
+//     if(setting.activeFuction === "不加密"){
+//         return ''
+//     }
+//     var returnStr = "",
+//         length = setting.activeFuction === "AES128" ? 16 : 32
+//         // charMap = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+
+//     for (var i = 0; i < length; i++) {
+//         var index = Math.round(Math.random() * charMap.length);
+//         returnStr += charMap.substring(index, index + 1);
+//     }
+//     return returnStr;
+// };
+
+// 上传文件用
+const uploadRef = ref(null);
+
+// 分享码可用次数
+const downloadCredit = ref(null);
+
+var file_Code_Map = ref([]);
+
+var uploadProcess = ref(0);
+
+
+const baseUrl =
+    location.protocol + "//" + location.hostname + ":" + serverPort + "/";
+
+
+// const blob2Uint8Array = function(blob) {
+//     return new Promise((resolve, reject) => {
+//         let reader = new FileReader();
+//         reader.readAsArrayBuffer(blob);
+//         reader.onload = function() {
+//             let buffer = reader.result;
+//             let uint8array = new Uint8Array(buffer);
+//             resolve(uint8array);
+//         };
+//         reader.onerror = function() {
+//             reject(reader.error);
+//         };
+//     });
+// };
+// // 包含AES128和AES256
+// const AES = (key,data)=>{
+//     key = aesjs.utils.utf8.toBytes(key);
+//     var aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(5));
+//     var encryptedBytes = aesCtr.encrypt(data);
+//     return encryptedBytes;
+// }
+// const SM4 = (key,data)=>{
+//     // console.log(key)
+//     var encryptedBytes = sm4.encrypt(data,key,{padding: 'pkcs#7',output:'array'});
+//     // console.log(encryptedBytes, sm4.decrypt(encryptedBytes, key,{output:'array'}))
+//     return new Uint8Array(encryptedBytes);
+// }
+// const encrypt = (key, data, fileName) => {
+//     return blob2Uint8Array(data).then(data => {
+//         let encrypted_data = null
+//         if(setting.activeFuction === "不加密"){
+//             encrypted_data = data
+//         }else if(setting.activeFuction != "SM4"){
+//             message.info(`开始加密${fileName}`);
+//             encrypted_data = AES(key,data)
+//             message.info(`${fileName}加密完成`);
+//         }else{
+//             message.info(`开始加密${fileName}`);
+//             encrypted_data = SM4(key,data)
+//             message.info(`${fileName}加密完成`);
+//         }
+//         return encrypted_data
+//     });
+// };
+// const encryptString = (key, str) => {
+//     // console.log(key)
+//     if(setting.activeFuction === "不加密"){
+//         return sm4.encrypt(str, 'miaospringmiaospringmiaospringao')
+//     }else if(setting.activeFuction !== "SM4"){
+//         key = aesjs.utils.utf8.toBytes(key);
+//         var data = aesjs.utils.utf8.toBytes(str);
+//         var aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(5));
+//         var encryptedBytes = aesCtr.encrypt(data);
+//         return Base64.encode(encryptedBytes);
+//     }else{
+//         return sm4.encrypt(str, key)
+//     }
+// };
+
+const clickUpload = function(){
+    // for(let i of uploadRef.value)console.log(i)
+    // console.log(uploadRef.value)
+    uploadRef.value.submit();
+}
+
+const beforeUpload = async function(data) {
+    // console.log(data.file.file.size)
+    if (data.file.file.size > 200 * 1024 * 1024) {
+        message.error(`${data.file.file.name}的大小超过限制，无法上传`);
+        return false;
+    }
+    return true;
+};
+
+const customRequest = ({
+    file,
+    data,
+    headers,
+    withCredentials,
+    action,
+    onFinish,
+    onError,
+    onProgress
+}) => {
+    file = file.file;
+    var fileName = file.name;
+    const key = generateKey(setting);
+    const encryptedFileName = encryptString(key, fileName, setting);
+    var f = new Blob([file]);
+    encrypt(key, f, fileName, setting, message).then(data => {
+        message.info(`开始上传${fileName}`);
+        const params = {
+            fileName: encryptedFileName,
+            downloadCredit:downloadCredit.value == null ? -1 : downloadCredit.value
+        };
+        const xhr = new XMLHttpRequest();
+        xhr.upload.addEventListener("progress", function(event) {
+            const percent = (event.loaded / event.total) * 100;
+            uploadProcess.value = percent.toFixed(2);
+            onProgress({ percent: Math.ceil(percent) });
+        });
+        onProgress({ percent: 1 });
+        xhr.open(
+            "POST",
+            baseUrl + "file/upload?" + new URLSearchParams(params)
+        );
+        xhr.send(data);
+        xhr.onreadystatechange = () => {
+            if (xhr.readyState === 4 && xhr.status === 200) {
+                let id = xhr.responseText;
+                let code = id + key
+                // if(setting.activeFuction === "SM4"){
+                //     code = id + 'SM4' + key
+                // }
+                file_Code_Map.value.push({
+                    code: code,
+                    fileName: fileName
+                });
+                notification["success"]({
+                    content: "上传完成",
+                    meta: `${fileName} 已成功上传`,
+                    duration: 2500,
+                    keepAliveOnHover: true
+                });
+                onFinish();
+            } else {
+                console.error(xhr.statusText);
+                onError();
+            }
+        };
+    });
+};
+const columns = [
+    {
+        title: "文件名",
+        key: "fileName",
+        width: 150
+    },
+    {
+        title: "取件码（点击复制）",
+        key: "code"
+    }
+];
+
+// 记录是否复制过，第一次复制的时候提醒可以连续复制
+var copyedArray = [];
+const rowProps = row => {
+    return {
+        style: "cursor: pointer;",
+        onClick: () => {
+            toClipboard(`${copyedArray.join('\n')}\n${row.code}`.trim()).then(() => {
+                message.info(`已复制 ${row.fileName} 的取件码至剪切板`);
+                if (copyedArray.length == 0) {
+                    message.info(
+                        `可以试试点击其他取件码，也许这个玩意会自动处理剪切板内容`
+                    );
+                }
+                copyedArray.push(row.code)
+            });
+        }
+    };
+};
+</script>
+
+<style>
+</style>