first commit

历届学生/fontendseven/项目练习/上课项目/聊天/fontend/js/page/index.js

@@ -0,0 +1,210 @@
+const { ipcRenderer } = require('electron')
+
+class Index {
+    constructor() {
+        this.fontSetting = {
+            color: "#000",
+            size: "16px",
+            background: '#1e6eff'
+        }
+        this.socket = WebSocketClass.getInstance();
+        this.UserInfo = JSON.parse(localStorage.getItem("UserInfo"));
+        setTimeout(() => {
+            this.joinGround();
+
+            this.socket.send(null, (res) => {
+                this.renderMessage("", res);
+            }, "to");
+
+        }, 300);
+        $(".group_name").text(this.UserInfo.room)
+        $(".right span").text(this.UserInfo.name)
+        $(".right img").attr({src: this.UserInfo.img})
+        this.bindUserInput();
+        this.bindEvent();
+    }
+
+    joinGround() {
+        this.socket.send({
+            type: "SocketSystem",
+            action: 'join',
+            data: this.UserInfo
+        }, (res) => {
+            console.log("----------------- res ", res)
+            $(".chat_record").append(`
+              <li>
+                <p class="system">${res}</p>
+              </li>
+            `)
+
+            this.socket.send({
+                type: "SocketUser",
+                action: 'userList',
+                data: this.UserInfo
+            }, res => {
+                $(".online_user_list").empty()
+                res.forEach(v => {
+                    $(".online_user_list").append(`
+                        <li>
+                            <img src="${v.userAuthor}" alt="">
+                            <span>${v.userName}</span>
+                          </li>
+                    `)
+                })
+
+                console.log("在线用户列表：", res)
+            },"userList")
+        }, "SocketSystem")
+    }
+
+    bindUserInput() {
+
+        $(".record_text").bind("keypress", (e) => {
+            // 回车被按下
+            if (e.keyCode == 13) {
+                e.preventDefault();
+                if ($(".record_text").html().length != 0) {
+                    this.sendMessage(
+                        `<div class="iiiiii" style="color: ${this.fontSetting.color}; font-size: ${this.fontSetting.size}; background-color: ${this.fontSetting.background}">
+                            ${$(".record_text").html()}
+                          </div>`
+                    )
+                }
+            }
+        })
+    }
+
+    sendMessage(data) {
+        this.UserInfo.message =  data;
+        this.socket.send({
+            type: "SocketUser",
+            action: 'send',
+            data: this.UserInfo
+        });
+
+        $(".record_text").html("")
+        this.renderMessage("me", this.UserInfo);
+    }
+
+    bindEvent() {
+        $(".footer_action .icon_action").click(function () {
+            var liArr = $(".menu_footer li")
+            liArr.click(function () {
+
+                $(".menu_content .menu_item").eq(
+                    $(this).index()
+                ).addClass("active")
+                    .siblings().removeClass("active")
+
+                $(this).addClass("active")
+                    .siblings().removeClass("active")
+            })
+
+            if ($(liArr[$(this).index()]).hasClass("active")) {
+                $(".menu").hide()
+                $(liArr[$(this).index()]).removeClass("active")
+            } else {
+                $(".menu").show()
+                $(liArr[$(this).index()]).addClass("active")
+                    .siblings().removeClass("active")
+
+                $(".menu_content .menu_item").eq(
+                    $(this).index()
+                ).addClass("active")
+                    .siblings().removeClass("active")
+            }
+        })
+
+        $("body").click(function (event) {
+            var liArr = $(".menu_footer li")
+
+            var hidden = () => {
+                $(".menu").hide()
+                liArr.each(function (i, e) {
+                    $(e).removeClass("active")
+                })
+            }
+
+            if ($(event.target).attr("class") == undefined) {
+                hidden()
+            } else {
+                if (
+                    $(event.target).attr("class").includes("menu") ||
+                    $(event.target).attr("class").includes("iconfont")
+                ) {
+
+                } else {
+                    hidden()
+                }
+            }
+        })
+
+        // 表情
+        for (var i = 0; i<274; i++) {
+            $(".expr").append(`
+              <img class="emio" src="../img/icon/${i}fix@2x.png"/>
+            `)
+        }
+
+        $(".expr img").on("mouseover", function () {
+            $(this).attr({
+                src: `../img/icon/${$(this).index()}@2x.gif`
+            })
+        })
+
+        $(".expr img").on("mouseout", function () {
+            $(this).attr({
+                src: `../img/icon/${$(this).index()}fix@2x.png`
+            })
+        });
+
+        $(".expr img").click(function (){
+            $(".record_text").append($(this).clone())
+        })
+
+        // GIF
+        for (var i = 0; i<=12; i++) {
+            $(".gif").append(`
+              <img src="../img/gif/${i}.gif"/>
+            `)
+        }
+
+        var slef = this;
+        $(".gif img").click(function (){
+            slef.sendMessage(`<img class="gif_img" src="${$(this).attr("src")}" />`);
+        })
+
+        $(".menu_select").change(function () {
+            slef.fontSetting.size = $(this).val()
+        })
+
+        $(".menu_color").on("input",function () {
+            slef.fontSetting.color = $(this).val()
+        })
+
+        $(".menu_qipao_color").on("input",function () {
+            slef.fontSetting.background = $(this).val()
+        })
+
+        $(".icon-zhendong").click(function () {
+            ipcRenderer.send('shake', '')
+        })
+
+    }
+
+    // 渲染页面消息列表的页面
+    renderMessage(type = "", data) {
+        $(".chat_record").append(`
+          <li class="${type}">
+            <img class="user_img" src="${data.img}" alt="">
+            <div class="right_mes">
+              <div class="name">${data.name}</div>
+              <div class="message">${data.message}</div>
+            </div>
+          </li>
+        `)
+    }
+
+}
+
+new Index();

历届学生/fontendseven/项目练习/上课项目/聊天/fontend/js/page/login.js

@@ -0,0 +1,64 @@
+const { ipcRenderer } = require('electron')
+
+class Login {
+    constructor() {
+       this.renderImg();
+       this.bindEnter();
+    }
+
+    renderImg() {
+        var fileType = ""
+        for (var i = 1; i <= 10; i++) {
+            if (i == 3 || i == 4 || i == 5) {
+                fileType = ".gif"
+            } else {
+                fileType = ".jpg"
+            }
+
+            $(".modal-body").append(`
+              <img class="${ i == 1 ? 'active': ''}" src="../img/${i}${fileType}" alt="">
+            `);
+
+            $(".modal-body img").click(function () {
+
+                $(".user_img").attr({ src: $(this).attr("src") })
+                $(this).addClass("active").siblings().removeClass("active")
+                $('#myModal').modal('hide');
+
+
+            })
+        }
+    }
+
+    bindEnter() {
+        $(".enter").click(function () {
+            if ($(".name").val().length == 0) {
+                new $.zui.Messager('昵称不能为空', {
+                    icon: 'times',
+                    type: 'danger'
+                }).show();
+                return false;
+            }
+
+
+            if ($(".room").val().length == 0) {
+                new $.zui.Messager('房号不能为空', {
+                    icon: 'times',
+                    type: 'danger'
+                }).show();
+                return false;
+            }
+
+            localStorage.setItem("UserInfo",JSON.stringify({
+                img: $(".user_img").attr("src"),
+                name: $(".name").val(),
+                room: $(".room").val()
+            }));
+
+            ipcRenderer.sendSync('open', 'index')
+
+        })
+    }
+}
+
+new Login();