From 79772ff208094ad67b121281ca2d8f316d7a9aaf Mon Sep 17 00:00:00 2001
From: CrescentLeaf <crescentleaf@noreply.codeberg.org>
Date: Sat, 10 May 2025 00:55:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E8=BE=93=E5=85=A5=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/index.html         |  5 +++++
 client/ui/App.jsx         | 39 ++++++++++++++++++++++++++++++++++++++-
 client/ui/ShadowInner.jsx |  7 +++++++
 3 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 client/ui/ShadowInner.jsx

diff --git a/client/index.html b/client/index.html
index 49bfb58..3f0a2a7 100644
--- a/client/index.html
+++ b/client/index.html
@@ -103,6 +103,11 @@
         window.addEventListener('resize', onResize)
         onResize()
 
+        function shadowInnerInit(event) {
+            let v = event.currentTarget
+            $(v.parentElement.shadowRoot).append(v.children)
+            v.parentNode.removeChild(v)
+        }
     </script>
 </body>
 
diff --git a/client/ui/App.jsx b/client/ui/App.jsx
index 1c10a3f..c6510bf 100644
--- a/client/ui/App.jsx
+++ b/client/ui/App.jsx
@@ -3,6 +3,7 @@ import MessageContainer from "./chat/MessageContainer.js"
 import ContactsListItem from "./main/ContactsListItem.js"
 import RecentsListItem from "./main/RecentsListItem.js"
 import useEventListener from './useEventListener.js'
+import ShadowInner from './ShadowInner.js'
 
 export default function App() {
     const [recentsList, setRecentsList] = React.useState([
@@ -168,7 +169,8 @@ export default function App() {
                 // 分割线
             }
             <div style={{
-                height: 'calc(var(--whitesilk-window-height) - 16px)',
+                // 我们删除了 body 的padding 因此不需要再 calc 了
+                height: 'var(--whitesilk-window-height)',
                 marginRight: '10px',
             }}>
                 <mdui-divider vertical></mdui-divider>
@@ -193,6 +195,7 @@ export default function App() {
                 <div>
                     <MessageContainer style={{
                         height: '100%',
+                        paddingBottom: '20px',
                     }}>
                         <Message
                             nickName="Fey"
@@ -239,6 +242,40 @@ export default function App() {
                             Test
                         </Message>
                     </MessageContainer>
+                    {
+                        // 输入框
+                    }
+                    <div style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        paddingBottom: '0.1rem',
+                        paddingTop: '0.1rem',
+                        height: '4rem',
+                        position: 'sticky',
+                        bottom: '0',
+                        backgroundColor: 'rgb(var(--mdui-color-background))',
+                    }}>
+                        <mdui-text-field variant="outlined" placeholder="喵呜~">
+                            <mdui-button-icon slot="end-icon" icon="more_vert"></mdui-button-icon>
+                        </mdui-text-field>
+                        <mdui-button-icon icon="send" style={{
+                            marginTop: '0.75rem',
+                            marginBottom: '0.75rem',
+                            marginLeft: '0.75rem',
+                            marginRight: '0.4rem',
+                        }}></mdui-button-icon>
+                    </div>
+                    {/* <mdui-top-app-bar style={{
+                        position: 'sticky',
+                        bottom: '0',
+                    }}>
+                        <mdui-button-icon icon="menu"></mdui-button-icon>
+                        <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
+                        <div style={{
+                            flexGrow: 1,
+                        }}></div>
+                        <mdui-button-icon icon="more_vert"></mdui-button-icon>
+                    </mdui-top-app-bar> */}
                 </div>
             </div>
         </div>
diff --git a/client/ui/ShadowInner.jsx b/client/ui/ShadowInner.jsx
new file mode 100644
index 0000000..2e90312
--- /dev/null
+++ b/client/ui/ShadowInner.jsx
@@ -0,0 +1,7 @@
+export default function ShadowInner({ children }) {
+    return (
+        <div onLoad={window.shadowInnerInit}>
+            {children}
+        </div>
+    )
+}