chore: 项目说明, feat: 添加好友(WIP), fix: 输入框无法置底

ling_chair_http/index.css

@@ -43,3 +43,12 @@ body {
     margin-top: 60px;
     z-index: 100;
 }
+
+[n-id=pageChatSeesion]::after {
+    content: "";
+    position: sticky;
+    bottom: 0;
+    display: block;
+    height: var(--pseudo-height); /* 设置伪元素的高度 */
+    z-index: -1; /* 防止遮挡实际内容 */
+  }

ling_chair_http/index.html

@@ -41,6 +41,7 @@
   <!-- 代替私人 fixed 并提供更好的兼容性 -->
   <script src="https://cdn.jsdelivr.net/gh/wilddeer/stickyfill@2.1.0/dist/stickyfill.min.js"></script>
   <script src="https://unpkg.com/jquery@3.7.1/dist/jquery.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
   <link rel="icon" href="icon.ico" />
   <title>铃之椅</title>
 </head>
@@ -49,7 +50,7 @@
   class="mdui-theme-primary-teal mdui-theme-accent-teal mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-layout-auto"
   id="app">
 
-  <input n-id="textCopier" class="mdui-hidden" />
+  <input n-id="textCopierBtn" class="mdui-hidden" />
 
   <div id="lingchair-app" style="height: 100%;">
     <!-- 侧滑栏 -->
@@ -66,6 +67,10 @@
           <i class="mdui-list-item-icon mdui-icon material-icons">account_circle</i>
           <div class="mdui-list-item-content">资料</div>
         </li>
+        <li class="mdui-list-item mdui-ripple" onclick="new mdui.Dialog(viewBinding.dialogMyProfile.get(0)).open()">
+          <i class="mdui-list-item-icon mdui-icon material-icons">person_add</i>
+          <div class="mdui-list-item-content">新的好友</div>
+        </li>
         <li class="mdui-subheader">客户端</li>
         <li class="mdui-list-item mdui-ripple">
           <i class="mdui-list-item-icon mdui-icon material-icons">settings</i>
@@ -94,7 +99,10 @@
         <a onclick="ContactsList.reloadList()" n-id="contactsRefresh" class="mdui-btn mdui-btn-icon mdui-ripple">
           <i class="mdui-icon material-icons">refresh</i>
         </a>
-        <a class="mdui-btn mdui-btn-icon mdui-ripple" n-id="switchNotifications" mdui-tooltip="{content:'开/关通知'}">
+        <a onclick="ContactsList.openAddDialog()" n-id="contactsAdd" class="mdui-btn mdui-btn-icon mdui-ripple">
+          <i class="mdui-icon material-icons">add</i>
+        </a>
+        <a class="mdui-btn mdui-btn-icon mdui-ripple" n-id="switchNotifications">
           <i class="mdui-icon material-icons" n-id="switchNotificationsIcon">notifications_off</i>
         </a>
         <a mdui-menu="{target: '#appbar-menu'}" class="mdui-btn mdui-btn-icon mdui-ripple">
@@ -110,7 +118,7 @@
 
     <!-- Tab 栏 -->
     <div class="mdui-tab mdui-accent-theme mdui-theme-color-auto" style="position: fixed; z-index: 114;width: 100%;"
-      mdui-tab>
+      mdui-tab n-id="chatTab">
       <!-- 侧滑栏的 z-index 是2000, 在移动端会直接覆盖 -->
       <a href="#page-chat-list" n-id="tabChatList" class="mdui-ripple">常用</a>
       <a href="#page-contacts" n-id="tabContacts" class="mdui-ripple">通讯录</a>
@@ -136,12 +144,14 @@
         <div class="mdui-center" style="margin: 15px;"><a href="javascript:;" onclick="ChatMsgAdapter.loadMore()"
             class="mdui-text-color-theme">点我</a>继续加载前面的聊天记录, 或者<a href="javascript:;"
             onclick="ChatMsgAdapter.scrollToBottom()" class="mdui-text-color-theme">回到底部</a></div>
-        <div n-id="pageChatSeesion" style="flex: 1 1 auto;display: flex;flex-direction: column;"></div>
+        <div n-id="pageChatSeesion" style="flex: 1 1 auto;display: flex;flex-direction: column;position: relative;">
+        </div>
       </div>
       <!-- 妈的黑化了 私人玩意这么难整 早知道 z-index 弄死它得了 浪费我时间 我就没试过这么离谱的样式表 第三方库真难写CSS 就应该先写后端的 啊啊啊啊啊啊 -->
       <!-- 不黑化了 因为 stickyfill -->
       <div class="mdui-toolbar mdui-theme-color-auto"
-        style="position: sticky;max-width: 100%;margin-bottom: -30px;bottom: 0;z-index: 101;">
+        style="position: sticky;max-width: 100%;margin-bottom: -30px;bottom: 0;z-index: 101;"
+        n-id="inputToolbar">
         <ul class="mdui-menu" id="msg-input-more">
           <li class="mdui-menu-item">
             <a class="mdui-ripple">插入图片</a>
@@ -250,6 +260,42 @@
         onclick="User.setNick(viewBinding.dialogEditNickNick.val(), () => {mdui.snackbar('已保存, 刷新页面生效');viewBinding.dialogEditNickClose.click()})">保存</button>
     </div>
   </div>
+
+  <!-- 懂得都懂 -->
+  <div class="mdui-dialog" n-id="dialogNewFriendRequest">
+    <div class="mdui-dialog-title">
+      新的好友请求
+    </div>
+    <div class="mdui-dialog-content" style="margin-left:15px;margin-right:15px;">
+      <div class="mdui-textfield">
+        <label class="mdui-textfield-label">昵称</label>
+        <input n-id="dialogEditNickNick" class="mdui-textfield-input" maxlength="30" type="text" />
+      </div>
+    </div>
+    <div class="mdui-dialog-actions">
+      <button class="mdui-btn mdui-ripple" mdui-dialog-close>关闭</button>
+    </div>
+  </div>
+
+  <!-- 懂得都懂 -->
+  <div class="mdui-dialog" n-id="dialogNewContact">
+    <div class="mdui-dialog-title">
+      添加好友/群
+    </div>
+    <div class="mdui-dialog-content" style="margin-left:15px;margin-right:15px;">
+      <div class="mdui-textfield">
+        <label class="mdui-textfield-label">好友/群的ID (不是名称)</label>
+        <input n-id="dialogNewContactID" class="mdui-textfield-input" maxlength="30" type="text" />
+      </div>
+      <select class="mdui-select" mdui-select="{position: 'top'}" n-id="dialogNewContactType">
+        <option value="single">好友</option>
+        <option value="group">群聊</option>
+      </select>
+    </div>
+    <div class="mdui-dialog-actions">
+      <button class="mdui-btn mdui-ripple" mdui-dialog-close onclick="ContactsList.add(viewBinding.dialogNewContactID.val(), viewBinding.dialogNewContactType.val())">确认并关闭</button>
+      <button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
+    </div>
   </div>
 
   <div class="mdui-hidden">

ling_chair_http/index.js

@@ -125,14 +125,18 @@ $.ajax({
 
 // Toolbar 快捷按钮绑定
 viewBinding.contactsRefresh.hide()
+viewBinding.contactsAdd.hide()
 viewBinding.tabChatList.on("show.mdui.tab", () => {
     viewBinding.contactsRefresh.hide()
+    viewBinding.contactsAdd.hide()
 })
 viewBinding.tabContacts.on("show.mdui.tab", () => {
     viewBinding.contactsRefresh.show()
+    viewBinding.contactsAdd.show()
 })
 viewBinding.tabChatSeesion.on("show.mdui.tab", () => {
     viewBinding.contactsRefresh.hide()
+    viewBinding.contactsAdd.hide()
 })
 
 viewBinding.tabChatSeesion.hide()
@@ -189,11 +193,12 @@ if (localStorage.useNotifications == "true")
 
 // https://www.runoob.com/w3cnote/javascript-copy-clipboard.html
 function copyText(t) {
-    let cp = viewBinding.textCopier.get(0)
-    cp.value = t
-    cp.select()
-    cp.setSelectionRange(0, 99999)
-    navigator.clipboard.writeText(cp.value)
+    let btn = viewBinding.textCopierBtn
+    btn.attr("data-clipboard-text", t)
+    new ClipboardJS(btn.get(0)).on('success', (e) => {
+        e.clearSelection()
+    })
+    btn.click()
 }
 
 // https://zhuanlan.zhihu.com/p/162910462
@@ -318,6 +323,14 @@ class ContactsList {
 
         })
     }
+    static add(name, type) {
+        if (type == "single") {
+
+        }
+    }
+    static openAddDialog() {
+        new mdui.Dialog(viewBinding.dialogNewContact.get(0)).open()
+    }
 }
 
 // 第一次写前端的消息加载, 代码很乱, 还请原谅~
@@ -407,8 +420,10 @@ class ChatMsgAdapter {
     static addSystemMsg(m, re) {
         let e
         if (re)
+            // 加到头部
             e = $($.parseHTML(m)).prependTo(viewBinding.pageChatSeesion)
         else
+            // 加到尾部
             e = $($.parseHTML(m)).appendTo(viewBinding.pageChatSeesion)
         return e
     }
@@ -416,7 +431,8 @@ class ChatMsgAdapter {
         let elementRect = viewBinding.pageChatSeesion.get(0).getBoundingClientRect()
         return (elementRect.bottom <= window.innerHeight)
     }
-    // 不会压栈 只添加消息 返回消息的JQ对象
+    // 添加消息 返回消息的JQ对象
+    // name: 用户id  m: 消息  t: 时间戳  re: 默认加到尾部  msgid: 消息id
     static async addMsg(name, m, t, re, msgid) {
 
         let nick = await NickCache.getNick(name) // re.data == null ? name : re.data.nick
@@ -505,6 +521,12 @@ class ChatMsgAdapter {
     static saveToLocal() {
         localStorage["chat_msg_" + this.target] = JSON.stringify(this.msgList)
     }*/
+    // 自动调整使输入框置底 CSS真tm靠不住啊
+    static initInputResizer() {
+        let resize = () => viewBinding.pageChatSeesion.height(window.innerHeight - viewBinding.inputToolbar.height() - $("header.mdui-appbar").height() - viewBinding.chatTab.height() - 90)
+        window.addEventListener("resize", resize)
+        resize()
+    }
     // 为消息设置长按/右键事件
     static initMsgElementEvents() {
         let listeners = {}
@@ -716,7 +738,7 @@ else
 // 登录到账号
 let dialogSignIn
 // 谨防 localStorage 字符串数据大坑
-if (localStorage.isSignIn === "false")
+if (localStorage.isSignIn == "false")
     dialogSignIn = new mdui.Dialog(viewBinding.dialogSignIn.get(0), {
         modal: true,
         closeOnEsc: false,
@@ -744,3 +766,5 @@ else {
 Stickyfill.add($("*").filter((a, b) => $(b).css('position') === 'sticky'))
 
 ChatMsgAdapter.initMsgElementEvents()
+
+ChatMsgAdapter.initInputResizer()

ling_chair_http/mdui-prettier.css

@@ -34,6 +34,9 @@ body {
     height: 40px;
     border-radius: 40px;
 }
+.mdui-select-open {
+    border-radius: 10px;
+}
 
 /* 配色方案 */
 

readme.md

@@ -3,7 +3,7 @@
 欢迎来到铃之椅! 这是一个即时通讯项目, 为通讯提供更多的选择, 为人民服务
 
 > [!NOTE]
-> 本项目仍在实验阶段, 为防止源代码丢失, 先留存代码...
+> 本项目仍在实验阶段, [点我](final.md)可查看进展
 >  
 > 如果发现有任何疑问, 欢迎提问
 >  
@@ -23,10 +23,18 @@
 
   * 克隆本仓库到本地并运行本地 HTTP 服务端
  
-  * 使用本仓库提供的网页 (不推荐, 有跨域问题)
+  * 静态网页 (不推荐, 有跨域问题)
 
 ### 鸣谢
 
 WIP
 
 ### [你知道吗](.github/do_you_know.md)
+
+### 温馨提示
+
+不建议,不推荐,不赞同用于商业用途, 本项目的设计初衷是为了个人和团队使用, 而非用于圈钱, 因此如果确实需要商业化, 请考虑其他项目
+
+为什么? 因为这个项目还在初级阶段, 还有很多地方不够完善, 甚至有可能被一些 Hacker 抓到漏洞, 造成不必要的损失
+
+因此我更建议个人及团队内部使用, 亦或者加密后放在公网使用

server_src/wsApi.js

@@ -148,6 +148,21 @@ let api = {
         cb({ msg: msg, code: 0, data: { friends: friends } })
     },
 
+    // 添加好友
+    // {name: 账号, accessToken: 访问令牌} 返回 {friends: []}
+    // WIP
+    "user.addFriend": (a, cb) => {
+        if (checkEmpty([a.name, a.accessToken]))
+            return cb({ msg: "参数缺失", code: -1 })
+
+        let { msg, code, friends } = users.getFriends(a.name, a.accessToken)
+
+        if (code !== 0)
+            return cb({ msg: msg, code: code })
+
+        cb({ msg: msg, code: 0, data: { friends: friends } })
+    },
+
     "user.getNick": (a, cb) => {
         if (checkEmpty([a.name]))
             return cb({ msg: "参数缺失", code: -1 })