ui: 添加了面板間自由分割的支持

client/index.html

@@ -13,9 +13,8 @@
     <link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css" />
     <link rel="stylesheet" href="./static/material_icons.css" />
 
-    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
-    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+    <script src="https://unpkg.com/split.js@1.6.5/dist/split.min.js"></script>
 
     <title>TheWhiteSilk</title>
 
@@ -79,6 +78,16 @@
             image-rendering: crisp-edges;
             -ms-interpolation-mode: nearest-neighbor;
         }
+
+        .gutter {
+            background-color: rgb(var(--mdui-color-surface-variant));;
+            background-repeat: no-repeat;
+            background-position: 50%;
+        }
+
+        .gutter.gutter-horizontal {
+            cursor: col-resize;
+        }
     </style>
 </head>
 
@@ -91,6 +100,7 @@
     </script>
     <script type="module">
         import App from './ui/App.jsx'
+        import { React, ReactDOM } from './Imports.ts'
         ReactDOM.createRoot(document.getElementById('app')).render(React.createElement(App, null))
 
         let onResize = () => {
@@ -100,6 +110,14 @@
         }
         window.addEventListener('resize', onResize)
         onResize()
+
+        window.addEventListener('load', () => {
+            Split(['#SideBar', '#ChatFragment'], {
+                sizes: [25, 75],
+                minSize: [200, 400],
+                gutterSize: 2,
+            })
+        })
     </script>
 </body>
 

client/ui/App.jsx

@@ -11,7 +11,7 @@ import { React } from '../Imports.ts'
 
 export default function App() {
     const [recentsList, setRecentsList] = React.useState([
-        /* {
+         {
             userId: 0,
             avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
             nickName: "麻油衣酱",
@@ -22,11 +22,11 @@ export default function App() {
             avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
             nickName: "Maya Fey",
             content: "我是绫里真宵, 是一名灵媒师~"
-        }, */
+        }, 
     ])
     const [contactsMap, setContactsMap] = React.useState({
         所有: [
-            /* {
+             {
                 userId: 0,
                 avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
                 nickName: "麻油衣酱",
@@ -35,7 +35,7 @@ export default function App() {
                 userId: 0,
                 avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
                 nickName: "Maya Fey",
-            }, */
+            }, 
         ],
     })
     const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents')
@@ -100,7 +100,6 @@ export default function App() {
                 {
                     // 最近聊天
                     <mdui-list style={{
-                        width: "35%",
                         overflowY: 'auto',
                         paddingRight: '10px',
                         display: navigationItemSelected == "Recents" ? null : 'none'
@@ -119,7 +118,6 @@ export default function App() {
                 {
                     // 联系人列表
                     <mdui-list style={{
-                        width: "35%",
                         overflowY: 'auto',
                         paddingRight: '10px',
                         display: navigationItemSelected == "Contacts" ? null : 'none'
@@ -144,16 +142,6 @@ export default function App() {
                     </mdui-list>
                 }
             </div>
-            {
-                // 分割线
-            }
-            {/* <div style={{
-                // 我们删除了 body 的padding 因此不需要再 calc 了
-                height: 'var(--whitesilk-window-height)',
-                marginRight: '10px',
-            }}>
-                <mdui-divider vertical></mdui-divider>
-            </div> */}
             {
                 // 聊天页面
             }