From e844cbd9100ea98f156379c711f418d3a4822976 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=89?= <huan0016@gmail.com>
Date: Sat, 21 Oct 2023 06:46:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B8=B8=E6=88=8F=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/chat.js | 95 +++++++++++++++++++++++++++++++++--------------------
 1 file changed, 60 insertions(+), 35 deletions(-)

diff --git a/src/chat.js b/src/chat.js
index 27282b6..0e4aa25 100644
--- a/src/chat.js
+++ b/src/chat.js
@@ -1,5 +1,5 @@
 import { get, set, del, update, createStore, values } from 'idb-keyval'
-import { Span, Button, List, ListItem, TextArea, createElement } from './weigets.js'
+import { Span, Button, List, ListItem, TextArea, createElement, Input } from './weigets.js'
 
 export default class Chat {
     constructor({ name, EventListeners = {}, onsend, onexit }) {
@@ -7,46 +7,62 @@ export default class Chat {
         this.store = createStore(`db-chat-${name}`, `store-chat-${name}`)
         this.ul = List({ classList: ['chat-list'] })
         this.EventListeners = EventListeners
-        document.body.appendChild(createElement({
+        this.element = createElement({
+            style: {
+                position: 'fixed', bottom: 0, left: '50%',
+                maxWidth: '64rem', width: '100%',
+                transform: 'translate(-50%, 0)',
+                display: 'none',
+            },
             children: [
                 this.ul,
-                TextArea({
-                    type: 'text',
-                    placeholder: '输入聊天内容',
+                createElement({
                     style: {
-                        height: '5rem',
+                        display: 'flex',
                         margin: '1rem 2rem',
-                        padding: '1rem',
-                        boxSizing: 'border-box',
-                        boxShadow: '0 0 1rem #eee',
                     },
-                    onkeydown: event => {
-                        const text = event.target.value.trim()
-                        if (text && event.ctrlKey && event.key === 'Enter') {
-                            this.发送消息(text)
-                            event.target.value = ''
-                        }
-                    }
-                }),
-                Button({
-                    textContent: '发送(ctrl+Enter)',
-                    onclick: event => {
-                        const text = event.target.previousSibling.value.trim()
-                        if (text) {
-                            this.发送消息(text)
-                            event.target.previousSibling.value = ''
-                        }
-                    },
-                    style: {
-                        margin: '1rem 2rem',
-                        padding: '.5rem 1rem',
-                        boxSizing: 'border-box',
-                        boxShadow: '0 0 1rem #eee',
-                        borderRadius: '1rem',
-                    }
-                }),
+                    children: [
+                        Input({
+                            type: 'text',
+                            placeholder: '输入聊天内容',
+                            style: {
+                                flex: 1,
+                                height: '3rem',
+                                padding: '0 1rem',
+                                boxSizing: 'border-box',
+                                boxShadow: '0 0 1rem #eee',
+                                border: 'none',
+                                outline: 'none',
+                            },
+                            onkeydown: event => {
+                                const text = event.target.value.trim()
+                                if (text && event.key === 'Enter') {
+                                    this.发送消息(text)
+                                    event.target.value = ''
+                                }
+                            }
+                        }),
+                        Button({
+                            textContent: '发送(Enter)',
+                            onclick: event => {
+                                const text = event.target.previousSibling.value.trim()
+                                if (text) {
+                                    this.发送消息(text)
+                                    event.target.previousSibling.value = ''
+                                }
+                            },
+                            style: {
+                                padding: '.5rem 1rem',
+                                boxSizing: 'border-box',
+                                boxShadow: '0 0 1rem #eee',
+                                borderRadius: '1rem',
+                            }
+                        }),
+                    ]
+                })
             ]
-        }))
+        })
+        document.body.appendChild(this.element)
         document.head.appendChild(createElement({
             innerText: `
             ul.chat-list {
@@ -69,6 +85,15 @@ export default class Chat {
             }`
         }, 'style'))
         this.载入消息()
+        this.挂载全局快捷键()
+    }
+    挂载全局快捷键() {
+        document.addEventListener('keydown', event => {
+            if (event.key === 'Enter' || event.key === '/') {
+                this.element.style.display = 'block'
+                this.element.querySelector('input').focus()
+            }
+        })
     }
     // 收到应答(对方确认消息已被接收)
     answer(data) {