first commit

历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/聊天室/fontend/js/config/index.js

@@ -0,0 +1,3 @@
+var url ={
+    socketBaseUrl:'ws://127.0.0.1:3000'
+}

历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/聊天室/fontend/js/lib/rem.js

@@ -0,0 +1,10 @@
+((w, d) => {
+    function setSize() {
+        var screenWidth = d.documentElement.clientWidth;
+        var currentFontSize = screenWidth * 100 / 750;
+        d.documentElement.style.fontSize = currentFontSize + 'px';
+    }
+    w.addEventListener('resize', setSize);
+    w.addEventListener('pageShow', setSize)
+    w.addEventListener('DOMContentLoaded', setSize)
+})(window, document)

历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/聊天室/fontend/js/page/index.js

@@ -0,0 +1,356 @@
+const { contextBridge, ipcRenderer } = require('electron')
+
+class index {
+    constructor() {
+
+        this.levelq
+        this.emitEvent()
+        this.onEvent()
+        this.setting()
+        this.sendMessage1()
+        this.user = getItem("UserInfo")
+        this.ChangeProperties()
+        this.fontsty = {
+            font: "",
+            color: "",
+            background: ""
+        }
+    }
+    emitEvent() {
+        //向后端发送群成员信息
+        sk.emit('text', getItem("UserInfo"));
+    }
+
+    renderSystemMessage(text) {
+        $(".c_left").append(`
+            <li class="system_message">
+                <span>${text}</span>
+            </li>
+        `)
+    }
+
+    //接受后端发送的数据
+    onEvent() {
+        //窗口抖动
+        sk.on('ShakeMessage', (data) => {
+            if (data.user_name == this.user.user_name) {
+                this.renderSystemMessage(`你发送了窗口抖动`)
+            } else {
+                this.renderSystemMessage(`${data.user_name}给你发送了窗口抖动`)
+            }
+
+        })
+        //抖动  
+        sk.on('openShake', (data) => {
+
+            ipcRenderer.send('windowsShake')
+        })
+        //禁言
+        sk.on('MushinopenShake', (data) => {
+            this.Mushinopen()
+        })
+
+        sk.on('MushinsocketAll', (data) => {
+            this.Mushinopen()
+        })
+        //加群通知
+        sk.on('WelcomeUser', (data) => {
+            this.renderSystemMessage(data)
+        })
+        //
+        //群成员
+        sk.on('onLineUserList', (data) => {
+            console.log("群成员", data)
+            $(".c_right .title").text(`群成员 ${data.length}`)
+            $(".c_right ul").empty()
+
+            data.forEach(v => {
+                $(".c_right ul").append(`
+                <li>
+                    <div class="use">
+                        <img src="${v.user_img}" alt="">
+                        <span class="dd">${v.user_name}</span>
+                    </div>
+                    ${v.level == 3
+                        ? ''
+                        : `<i class="iconfont icon-yonghu ${v.level == 1 ? 'qz' : 'gly'}"></i>`
+                    }
+                    
+                </li>
+               `)
+            });
+            //获取等级
+            console.log("data.level", data[data.length - 1].level)
+            this.levelq = data[data.length - 1].level
+
+            let set = this
+            //禁言
+            $(".use img").click(function () {
+                let name = $(this).parent().find(".dd").text()
+                console.log("name", name)
+                console.log("name5555", set.user.user_name)
+                if (name == set.user.user_name) {
+
+                } else {
+                    set.user.Mushinname = name
+                    sk.emit('Mushinsocket', set.user)
+                }
+
+
+                // console.log(1)
+
+            })
+        })
+
+        //获取其他人发送的消息
+
+        sk.on("ServerMessage", data => {
+            console.log("获取别人发送的数据", data)
+            this.renderMessage(data, 'medd', "s", data.fontsty)
+
+        })
+        //获取图片
+        sk.on('uploadImgName', data => {
+            data.message = `
+                <img class="gif_img" src="http://127.0.0.1:3000/upload/${data.message}" alt="">
+            `
+            this.renderMessage(data, "other", "s", this.fontsty)
+        })
+    }
+
+    Mushinopen() {
+        let index = 60
+        $(".input").attr("contenteditable", "false");
+        $(".input").addClass("cus");
+        console.log("进来了")
+        console.log($(".input").removeProp('id'))
+        this.renderSystemMessage("你被禁60秒")
+        let dd = $(".system_message span").last()
+        let jishi = setInterval(() => {
+            index -= 1;
+            dd.text(`你被禁${index}秒`)
+        }, 1000)
+        setTimeout(() => {
+            $(".input").attr("contenteditable", "");
+            $(".input").removeClass("cus");
+            dd.text(`你已被解除禁言`)
+            clearInterval(jishi)
+
+        }, 60000)
+
+    }
+
+    setting() {
+        let set = this
+        $(".user img").attr({
+            src: getItem("UserInfo").user_img
+        })
+
+        $(".user .name").text(getItem("UserInfo").user_name)
+        $(".header .room_name").text(getItem("UserInfo").room_id)
+
+        //点击禁言
+        $(".icon-jinyan").click(function () {
+            sk.emit("Allsilenced",set.user)
+        })
+
+
+        //抖动
+        $(".icon-shake").click(function () {
+            console.log(1)
+            //向后端发送数据
+            delete set.user.clickUserName
+            sk.emit('socketShake', set.user)
+        })
+
+
+
+        //图片点击事件
+        $(".icon-tupian1").click(async function () {
+            let path = await ipcRenderer.invoke('openFileSelect')
+            console.log("你选择的文件路径未：", path);
+            let Base64url = await imgToBase64(path)
+            console.log("imgToBase64：", Base64url);
+            set.user.message = `
+                <img class="gif_img" src="${path}" alt="">
+            `
+            set.user.timestamp = timestamp();
+            set.renderMessage(set.user, 'me', "gif", set.fontsty)
+
+            sk.emit("uploadFile", {
+                user: set.user,
+                base64: Base64url,
+                fileType: path.match(/\.(\w+)$/)[1]
+            })
+        })
+
+        //将表情添加到表情
+        for (let i = 0; i < 274; i++) {
+            $(".emote").append(`
+                 <img src="../img/icon/${i}fix@2x.png">
+            `)
+        }
+
+        //当鼠标移动到表情上
+        $(".emote img").hover(function () {
+            $(this).attr({
+                src: `../img/icon/${$(this).index()}@2x.gif`
+            })
+        }, function () {
+            $(this).attr({
+                src: `../img/icon/${$(this).index()}fix@2x.png`
+            })
+        })
+        //将表情添加到输入框
+        $(".emote img").click(function () {
+            $(".input").append(`
+              <img class="emote_img" src="../img/icon/${$(this).index()}@2x.gif" alt="">
+            `)
+        })
+
+
+        //添加动图
+        for (let i = 0; i <= 12; i++) {
+            $(".gif").append(`
+                <img class="gif_img" src="../img/gif/${i}.gif" alt="">
+            `)
+        }
+
+        $(".gif img").click(function () {
+            //<img class="gif_img" src="../img/gif/8.gif" alt="">
+            console.log($(this).prop("outerHTML"))
+            set.user.message = $(this).prop("outerHTML")
+            console.log(set.user.message)
+            set.user.timestamp = timestamp()
+            console.log(set.user)
+            set.user.fontsty = set.fontsty
+            sk.emit('sendMessage', set.user);
+            set.renderMessage(set.user, 'me', 'gif', set.fontsty)
+        })
+
+        //图标点击
+        $(".f_action i").click(function () {
+
+            if ($(this).index() <= 3) {
+                //判断当前是否是显示状态
+                if ($(".menu").css("display") == "none") {
+                    $(".menu").show()
+                    set.changeActive($(".menu_footer li").eq($(this).index()))
+                } else {
+                    if ($(".menu_footer li").eq($(this).index()).hasClass("active")) {
+                        $(".menu").hide()
+                    } else {
+                        set.changeActive($(".menu_footer li").eq($(this).index()))
+                    }
+                    //判断点击前面四个
+
+                }
+
+
+            }
+        })
+        $(".menu_footer li").click(function () {
+            set.changeActive($(this))
+        })
+    }
+
+    ChangeProperties() {
+        let s = this;
+        $(".font select").on("change", function () {
+            s.fontsty.font = $(".font select").val()
+        });
+
+        $(".font input").on("change", function () {
+
+            s.fontsty.color = $(".font input").val()
+        });
+
+        $(".back input").on("change", function () {
+
+            s.fontsty.background = $(".back input").val()
+        });
+    }
+    changeActive(el) {
+        el.eq($(this).index()).addClass("active").siblings().removeClass("active")
+
+        $(".menu_title").text($(el).text())
+        $(".menu_list .menu_item").eq($(el).index()).addClass("active").siblings().removeClass("active")
+    }
+
+    sendMessage1() {
+        var self = this;
+        console.log(0)
+        $(".input").keydown(function (event) {
+            console.log(1)
+            let { keyCode, ctrlKey } = event;
+            if (keyCode == 13 && ctrlKey) {
+                $(".input").append("<div><br></div>")
+                self.moveEnd($(".input")[0], 'end')
+                console.log(2)
+            } else if (keyCode == 13) {
+                console.log(3)
+                if ($(".input").html().length != 0) {
+
+                    self.user.message = $(".input").html()
+                    self.user.timestamp = timestamp()
+                    console.log("self.levelq", self.levelq)
+                    self.user.level = self.levelq
+                    self.user.fontsty = self.fontsty
+                    console.log(4)
+                    sk.emit("sendMessage", self.user)
+                    self.renderMessage(self.user, 'me', "s", self.fontsty)
+                    $(".input").html("")
+                    //将我的消息发送到后端
+                }
+                return false;
+            }
+        });
+    }
+
+    moveEnd(el) {
+        el.focus();
+        var range = window.getSelection();
+        range.selectAllChildren(el);
+        range.collapseToEnd();
+    }
+
+    renderMessage(v, type, img, sty) {
+        let set = this
+        console.log("v.timestamp", v.timestamp)
+        console.log(v)
+        $(".c_left").append(`
+        
+    <li class="${type == "me" ? 'm_r' : ''} ">
+        <div class="time">${format('hh:mm:ss', v.timestamp)}</div>
+        <div class="item">
+            <img class="avatar" src="${v.user_img}" alt="">
+            <div class="text">
+                <div class="name">
+                ${v.level == 3 ? "" : `<span ${v.level == 1 ? `class="tips_qz" > 群主` : `class="tips_gly">管理员`}</span>`}
+                  <lb class="u_n">${v.user_name}</lb>
+                    
+                </div>
+                <div class="message ${img == "gif" ? 'noback' : ''}" style="font-size: ${sty.font}; color:  ${sty.color} !important; background-color:  ${sty.background} !important;">${v.message}</div>
+            </div>
+        </div>
+    </li>
+    `);
+        //给头像添加点击事件
+        $(".c_left .avatar").last().click(function () {
+            let name = $(this).parent().find(".u_n").text()
+
+
+            set.user.clickUserName = $(this).parent().find(".u_n").text()//获取name
+            console.log($(this).parent().find(".u_n").text())
+            console.log("set.user", set.user)
+            sk.emit('socketShake', set.user)
+
+        })
+    }
+
+}
+
+new index()
+
+
+ //向后端发送数据

历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/聊天室/fontend/js/page/loginf.js

@@ -0,0 +1,66 @@
+const {ipcRenderer} = require('electron')
+
+class Login {
+    constructor() {
+        this.bindEvent()
+    }
+
+    bindEvent() {
+
+        $(".loginbut").click(() => {
+   
+           
+            if ($(".roomid").val().length == 0) {
+                new $.zui.Messager('房间号不为空', {
+                    type: 'danger' 
+                }).show();
+                return;
+            }
+
+            if ($(".username").val().length == 0) {
+                new $.zui.Messager('用户名不为空', {
+                    type: 'danger' 
+                }).show();
+                return;
+            }
+            //添加到浏览器
+            setItem("UserInfo",{
+                user_name: $(".username").val(),
+                room_id: $(".roomid").val(),
+                user_img: $(".user_img").attr("src")
+            });
+
+            ipcRenderer.send('set-title')
+        })
+
+        let fileType = ""
+        for (let i = 1; i <= 10; i++) {
+            if (i == 3 || i == 4 || i == 5) {
+                fileType = "gif"
+            } else {
+                fileType = "jpg"
+            }
+
+            $(".modal-body").append(`
+                <img src="../img/${i}.${fileType}" alt="">
+            `)
+        }
+
+        $(".modal-body img").click(function(){
+            console.log(this);
+            alert(1)
+            $(".user_img").attr({
+                src: $(this).attr("src")
+            })
+
+            $('#myModal').modal('hide')
+        })
+
+
+        $(".user_img").click(() => {
+           
+        })
+    }
+}
+
+new Login()

历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/聊天室/fontend/js/page/utils.js

@@ -0,0 +1,302 @@
+class Utils {
+
+
+    footer() {
+        let curretHref = location.href
+        let list = [
+            { title: "首页", icon: "home", href: "index.html" },
+            { title: "机构", icon: "jigou", href: "mechanism.html" },
+            { title: "模特", icon: "me", href: "mannequin.html" },
+            { title: "我的", icon: "wo", href: "Itsmine.html" },
+        ]
+
+        let html =
+            `
+           <ul class="footer">
+               ${list.map((v) => {
+                return `
+                    <li class="${curretHref.includes(v.href) ? "active" : ""}">
+                        <a href="${v.href}">
+                             <i class="iconfont icon-${v.icon}"></i>
+                             <p>${v.title}</p>
+                        </a>
+                    </li>
+                    `
+            })
+            }
+           </ul>
+        `
+        $("body").insertAdjacentHTML("beforeend", html)
+    }
+
+
+    customMethods() {
+        Array.prototype.map = function (callback) {
+            let result = []
+            for (let index = 0; index < this.length; index++) {
+                result.push(callback(this[index], index, this))
+            }
+            return result.toString().replaceAll(",", "");
+        }
+
+        Element.prototype.html = function (name) {
+            this.innerHTML += name;
+        }
+
+        //为单个多个元素绑定 click事件
+
+        //Eventcode是点击事件里所写的代码  例如：sss.onclick=()=>{   Eventcode是这里面的方法  }
+        NodeList.prototype.tap = function (Eventcode) {
+
+            this.forEach((v, i) => ClickTransfer(v, Eventcode, i))
+
+        }
+
+        //为单个元素绑定 click事件
+        Element.prototype.tap = function (Eventcode) {
+            ClickTransfer(this, Eventcode)
+
+        }
+
+        //
+
+        let ClickTransfer = (v, Eventcode, i) => {
+            v.onclick = (e) => {
+                console.log()
+                Eventcode({ v, i, e })
+            }
+        }
+        //添加类
+        Element.prototype.appClass = function (name) {
+            this.classList.add(name)
+            return this
+        }
+
+        Element.prototype.siblings = function () {
+            return Array.from(this.parentElement.children).filter(v => v != this)
+        }
+        //循环删除
+        Array.prototype.removeClass = function (name) {
+            this.forEach(v => bindElementRemoveClass(v, name))
+            return this;
+        }
+        //删除单个类
+        Element.prototype.removeClass = function (name) {
+            bindElementRemoveClass(this, name)
+            return this;
+        }
+
+        var bindElementRemoveClass = (v, name) => {
+            v.classList.remove(name)
+        }
+    }
+
+    //详情头部
+    header(title = "", like = "") {
+        $("body").html(`
+            <div class="header_pub">
+                <div class="left">
+                    <i class="iconfont icon-back1"></i>
+                    <span class="ellipsis">${title}</span>
+                </div>
+                ${like}
+                
+            </div>
+        `);
+
+        $(".header_pub .icon-back1").tap(() => {
+            history.back()
+        })
+    }
+
+
+
+    $(className) {
+        return document.querySelector(className);
+    }
+
+    _(className) {
+        return document.querySelectorAll(className);
+    }
+
+    query(name) {
+        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+        var r = window.location.search.substr(1).match(reg);
+        if (r != null)
+            return decodeURIComponent(r[2]);
+        return null;
+    }
+    item(dom, data, type = 1) {
+        console.log(type)
+        if (type == 1 || type) {
+            dom.innerHTML = ""
+        }
+
+        data.forEach((v, i) => {
+            dom.html(`
+            <li>
+                 <a>
+                     <div class="img">
+                        <img src="${v.img_src || v.preview}" alt="">
+                        <span>${v.total || v.shuliang || v.quantity}P</span>
+                     </div>
+                     <div class="title ellipsis">${v.title}</div>
+                     ${type == 3 ? "" : `<div class="model ellipsis">${v.user || `模特：${(v?.renwulist.length != 0 ? v.renwulist[0].name : '')||(v.renwulist.length != 0 ? v.renwulist[0].name : '')}`}</div>
+                     <div class="jg ellipsis"> ${v.source || `机构：${v.jigoulist[0].name}`}</div>`}
+                     
+                </a>
+                ${type == 3 ? "" : `<div class="tag">${(v.biaoqianlist || v.tags).map(item => { return `<a href="">${item.name || item.title}</a>` })}</div>`}
+                
+        </li>
+            `)
+        })
+    }
+
+    //添加到浏览器
+    setItem(key, value) {
+
+        localStorage.setItem(key, value.constructor == Object || value.constructor == Array ? JSON.stringify(value) : value)
+    }
+
+    //从浏览器获取数据
+    getItem(key) {
+        return localStorage.getItem(key) == null ? false : JSON.parse(localStorage.getItem(key))
+    }
+
+    //添加a标签点击
+    clicka(dom, data, href) {
+        console.log(data)
+
+        _(dom).tap(({ v, i }) => {
+
+            let clickaadd = () => {
+                let sss = {
+                    id: data[i].id,
+                    img_src: data[i].img_src || data[i].preview,
+                    title: data[i].title,
+                    renwulist: data[i].renwulist || data[i].user,
+                    jigoulist: data[i].jigoulist || data[i].source,
+                    biaoqianlist: data[i].biaoqianlist || data[i].tags,
+                    shuliang: data[i].shuliang || data[i].total
+                }
+                let ddd = getItem("History")
+                ddd.unshift(sss)
+                //添加到浏览器
+                setItem("History", ddd)
+                window.location.href = `${href}?id=${data[i].id}&quantity=${data[i].total || data[i].shuliang||data[i].quantity}&title=${encodeURIComponent(data[i].title)}&img_src=${data[i].preview || data[i].img_src}`
+            }
+            // window.location.href = `${href}?id=${data[i].id}&quantity=${data[i].total || data[i].shuliang}&title=${encodeURIComponent(data[i].title)}&img_src=${data[i].preview || data[i].img_src}`
+
+            // 添加历史记录
+            let ty = false;
+            try {
+
+                getItem("History").forEach(v => {
+                    if (data[i].id == v.id) {
+                        let data1 = getItem("History").filter(item => item.id != data[i].id)
+                        
+                        setItem("History", data1)
+                        
+                        clickaadd()
+                        ty = true
+                    }
+                })
+
+            } catch (e) {
+                if (e.message != "第三") throw e;
+            };
+
+            if (ty == false) {
+                clickaadd()
+            }
+
+        })
+    }
+
+    initSocket(){
+        window.sk=io("ws://127.0.0.1:3000")
+    }
+
+
+
+    timestamp() {
+        return new Date().getTime()
+    }
+
+    format(fmt, time){
+        time = new Date(time)
+        var o = {
+          "M+" : time.getMonth()+1,                 //月份
+          "d+" : time.getDate(),                    //日
+          "h+" : time.getHours(),                   //小时
+          "m+" : time.getMinutes(),                 //分
+          "s+" : time.getSeconds(),                 //秒
+          "q+" : Math.floor((time.getMonth()+3)/3), //季度
+          "S"  : time.getMilliseconds()             //毫秒
+        };
+
+        if(/(y+)/.test(fmt)){
+          fmt=fmt.replace(RegExp.$1, (time.getFullYear()+"").substr(4 - RegExp.$1.length));
+        }
+
+        for(var k in o){
+          if(new RegExp("("+ k +")").test(fmt)){
+            fmt = fmt.replace(
+              RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
+          }
+        }
+
+        return fmt;
+      }
+
+
+      async imgToBase64(url) {
+        var file = await getFileFromUrl(url);
+        var reader  = new FileReader();
+        return new Promise((resolve, reject) => {
+          reader.addEventListener("load", function () {
+            var base64gif = reader.result; 
+            resolve(base64gif)
+          }, false);
+    
+          if (file) {
+            reader.readAsDataURL(file);
+          }
+        })
+        
+      }
+      //转化为 file
+
+      getFileFromUrl(url) {
+        let fileName = url.substr(url.lastIndexOf(".") -1 )
+        let type = url.match(/\.(\w+)$/)[1]
+        console.log(type);
+    
+        return new Promise((resolve, reject) => {
+          var blob = null;
+          var xhr = new XMLHttpRequest();
+          xhr.open("GET", url);
+          xhr.setRequestHeader('Accept', `image/${type}`);
+          xhr.responseType = "blob";
+          // 加载时处理
+          xhr.onload = () => {
+            // 获取返回结果
+            blob = xhr.response;
+            let file = new File([blob], fileName, { type: `image/${type}` });
+            // 返回结果
+            resolve(file);
+          };
+          xhr.onerror = (e) => {
+            reject(e)
+          };
+          // 发送
+          xhr.send();
+        });
+      }
+}
+
+let {
+    
+     setItem, getItem, initSocket,timestamp,format,imgToBase64,getFileFromUrl
+} = new Utils()
+initSocket()