From 44cc5e24946a279dbdf09f58b1492dd055ff2dde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=89?= <huan0016@gmail.com>
Date: Wed, 4 Oct 2023 18:01:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=B9=E5=87=BA=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/client.js  |  5 ++++-
 public/weigets.js | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/public/client.js b/public/client.js
index 3f202d9..5de8f77 100644
--- a/public/client.js
+++ b/public/client.js
@@ -1,4 +1,4 @@
-import { List, ListItem, Avatar, Span } from './weigets.js'
+import { List, ListItem, Avatar, Span, Dialog } from './weigets.js'
 
 export default class ClientList {
     constructor({ channels = {}, EventListeners = {}, name: username, onexit }) {
@@ -228,6 +228,9 @@ export default class ClientList {
                     src: item.avatar ?? '/favicon.ico',
                     onclick: event => {
                         event.stopPropagation()
+                        // 点击插入一个弹出层
+                        const dialog = Dialog({})
+                        document.body.appendChild(dialog)
                     }
                 }),
                 Span({
diff --git a/public/weigets.js b/public/weigets.js
index 8c8b407..6c030a6 100644
--- a/public/weigets.js
+++ b/public/weigets.js
@@ -37,3 +37,39 @@ export function Avatar(options) {
     element.onerror = () => element.src = '/favicon.ico'
     return element
 }
+
+// 弹出窗口, 高斯模糊背景, 进入离开动画过渡
+export function Dialog(options) {
+    const element = createElement(options, 'div')
+    const content = createElement({ classList: ['content'] })
+    element.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 1000;
+        width: 100%;
+        height: 100%;
+        backdrop-filter: blur(5px);
+        duration: 0.5s;
+        transition: all 0.5s;
+    `
+    content.classList.add('dialog')
+    content.style.cssText = `
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        padding: 1em;
+        background-color: #fff;
+        border-radius: 0.5em;
+        box-shadow: 0 0 1em #ccc;
+    `
+    element.appendChild(content)
+    // 点击空白处关闭
+    element.onclick = event => {
+        if (event.target === element) {
+            element.remove()
+        }
+    }
+    return element
+}