From b094b3f9142a1d5b981de51a843caadc7f0f4abe Mon Sep 17 00:00:00 2001
From: satori <huan0016@gmail.com>
Date: Mon, 26 Aug 2024 01:00:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BF=AB=E6=8D=B7=E5=AE=9A=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.js | 18 +++++++++++++++++-
 main.js  | 18 +++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/index.js b/index.js
index 0195d52..29eff8c 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,22 @@
-import { div, span, pre, h1, p, ul, li, button } from './main.js'
+import { div, span, pre, h1, p, ul, li, button, createElement } from './main.js'
 import { Dialog } from './wigets/dialog.js'
 
+// 会话/账户
+document.body.appendChild(createElement({
+    style: {
+        position: 'fixed',
+        top: 0,
+        right: 0,
+    },
+    children: [
+        div.text('session')
+    ]
+}))
+
+document.body.appendChild(div.fixed.t_2.r_2.bg_red_500.childs([
+    div.text('session-x')
+]))
+
 // 动画三阶段
 // 1. 初始状态
 // 2. 变化过程
diff --git a/main.js b/main.js
index 2d89bd3..c8bed22 100644
--- a/main.js
+++ b/main.js
@@ -51,7 +51,13 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
                 'px': ['paddingLeft', 'paddingRight'],
                 'py': ['paddingTop', 'paddingBottom'],
                 'mx': ['marginLeft', 'marginRight'],
-                'my': ['marginTop', 'marginBottom']
+                'my': ['marginTop', 'marginBottom'],
+                't': ['top'],
+                'b': ['bottom'],
+                'l': ['left'],
+                'r': ['right'],
+                'x': ['left', 'right'],
+                'y': ['top', 'bottom']
             }
 
             if (styleMap.hasOwnProperty(key)) {
@@ -61,6 +67,16 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
                 return
             }
 
+            // 支持快捷定位 position
+            if (['static', 'fixed', 'absolute', 'relative', 'sticky'].includes(key)) {
+                element.style.position = key
+            }
+
+            // 支持快捷布局 display
+            if (['block', 'inline-block', 'flex', 'grid'].includes(key)) {
+                element.style.display = key
+            }
+
             // TODO 支持颜色输入
             if (key === 'color') {
                 element.style.color = value