CSS 布局修正

Author: cyfung1031

src/pages/components/layout/MainLayout.tsx

@@ -201,7 +201,7 @@ const MainLayout: React.FC<{
       locale={arcoLocale(i18n.language)}
     >
       {contextHolder}
-      <Layout>
+      <Layout className={"uno-min-h-screen"}>
         <Layout.Header
           style={{
             height: "50px",
@@ -382,7 +382,7 @@ const MainLayout: React.FC<{
           </Space>
         </Layout.Header>
         <Layout
-          className={`uno-absolute uno-top-50px uno-bottom-0 uno-w-full ${className}`}
+          className={`uno-bottom-0 uno-w-full ${className}`}
           style={{
             background: "var(--color-fill-2)",
           }}

src/pages/components/layout/Sider.tsx

@@ -49,7 +49,7 @@ const Sider: React.FC = () => {
   return (
     <HashRouter>
       <SiderGuide ref={guideRef} />
-      <Layout.Sider className="uno-h-full" collapsed={collapsed} width={170}>
+      <Layout.Sider collapsed={collapsed} width={170}>
         <div className="uno-flex uno-flex-col uno-justify-between uno-h-full">
           <Menu style={{ width: "100%" }} selectedKeys={[menuSelect]} selectable onClickMenuItem={handleMenuClick}>
             <CustomLink to="/">
@@ -160,23 +160,25 @@ const Sider: React.FC = () => {
         style={{
           borderLeft: "1px solid var(--color-bg-5)",
           overflow: "hidden",
-          padding: 10,
-          height: "100%",
+          padding: 0,
+          height: "auto",
           boxSizing: "border-box",
           position: "relative",
         }}
       >
-        <Routes>
-          <Route index element={<ScriptList />} />
-          <Route path="/script/editor">
-            <Route path=":uuid" element={<ScriptEditor />} />
-            <Route path="" element={<ScriptEditor />} />
-          </Route>
-          <Route path="/subscribe" element={<SubscribeList />} />
-          <Route path="/logger" element={<Logger />} />
-          <Route path="/tools" element={<Tools />} />
-          <Route path="/setting" element={<Setting />} />
-        </Routes>
+        <div className="uno-absolute uno-inset-0 uno-m-[10px]">
+          <Routes>
+            <Route index element={<ScriptList />} />
+            <Route path="/script/editor">
+              <Route path=":uuid" element={<ScriptEditor />} />
+              <Route path="" element={<ScriptEditor />} />
+            </Route>
+            <Route path="/subscribe" element={<SubscribeList />} />
+            <Route path="/logger" element={<Logger />} />
+            <Route path="/tools" element={<Tools />} />
+            <Route path="/setting" element={<Setting />} />
+          </Routes>
+        </div>
       </Layout.Content>
     </HashRouter>
   );

src/pages/options/routes/script/ScriptEditor.tsx

@@ -1118,17 +1118,18 @@ function ScriptEditor() {
               />
             ))}
           </Tabs>
-          <div className="uno-flex uno-flex-grow uno-flex-1">
+          <div className="uno-flex uno-flex-grow uno-flex-1 uno-relative">
             {editors.map((item) => {
               if (item.active) {
                 document.title = `${i18nName(item.script)} - Script Editor`;
               }
               return (
                 <div
-                  className="uno-w-full"
+                  className="uno-w-full uno-absolute"
                   key={`fe_${item.script.uuid}`}
                   style={{
                     display: item.active ? "block" : "none",
+                    inset: 0,
                   }}
                 >
                   <WarpEditor