From a5f3331c2431c6f47f92f18c891c827f94e435be Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Fri, 9 May 2025 17:47:50 +0800
Subject: [PATCH] perf: sidebar style

---
 .../home-sidebar/HomeSidebar.module.css       |  8 +--
 .../home-titlebar/HomeTittleBar.module.css    |  2 +-
 web/src/app/home/layout.module.css            | 22 +++++++--
 web/src/app/home/layout.tsx                   | 49 ++++++++++++-------
 4 files changed, 53 insertions(+), 28 deletions(-)

diff --git a/web/src/app/home/components/home-sidebar/HomeSidebar.module.css b/web/src/app/home/components/home-sidebar/HomeSidebar.module.css
index ce8b99f5..f0103254 100644
--- a/web/src/app/home/components/home-sidebar/HomeSidebar.module.css
+++ b/web/src/app/home/components/home-sidebar/HomeSidebar.module.css
@@ -2,14 +2,14 @@
     box-sizing: border-box;
     width: 200px;
     height: 100vh;
-    background-color: #ffffff;
+    background-color: #eee;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: space-between;
     padding-block: 1rem;
     user-select: none;
-    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
+    /* box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); */
 }
 
 .langbotIconContainer {
@@ -64,7 +64,6 @@
     margin: 0.8rem 0;
     padding-left: 2rem;
     font-size: 1rem;
-    background-color: #fff;
     border-radius: 12px;
     display: flex;
     flex-direction: row;
@@ -81,7 +80,6 @@
 }
 
 .sidebarUnselected {
-    background-color: white;
     color: #6C6C6C;
 }
 
@@ -94,7 +92,6 @@
 .sidebarBottomContainer {
     width: 100%;
     height: 100px;
-    background-color: #ffffff;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -104,7 +101,6 @@
 .sidebarBottomChildContainer {
     width: 100%;
     height: 50px;
-    background-color: aqua;
     display: flex;
     flex-direction: row;
 }
\ No newline at end of file
diff --git a/web/src/app/home/components/home-titlebar/HomeTittleBar.module.css b/web/src/app/home/components/home-titlebar/HomeTittleBar.module.css
index 7fa83d68..8a9a7da4 100644
--- a/web/src/app/home/components/home-titlebar/HomeTittleBar.module.css
+++ b/web/src/app/home/components/home-titlebar/HomeTittleBar.module.css
@@ -7,7 +7,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    background-color: #f2f2f2;
+    background-color: #fafafa;
 }
 
 .titleText {
diff --git a/web/src/app/home/layout.module.css b/web/src/app/home/layout.module.css
index 0055b2dc..312d8932 100644
--- a/web/src/app/home/layout.module.css
+++ b/web/src/app/home/layout.module.css
@@ -4,14 +4,28 @@
     height: 100vh;
     display: flex;
     flex-direction: row;
+    background-color: #eee;
 }
 
 /* 主内容区域 */
 .main {
-    background-color: #f2f2f2;
-    overflow: auto;
-    width: 100%;
-    height: 100%;
+    background-color: #fafafa;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    /* height: 100vh; */
+    width: calc(100% - 1.2rem);
+    height: calc(100% - 1.2rem);
+    overflow: hidden;
+    border-radius: 1.5rem 0 0 1.5rem;
+    margin-left: 0.6rem;
+    margin-top: 0.6rem;
+}
+
+.mainContent {
     padding: 1.5rem;
     padding-left: 2rem;
+    flex: 1;
+    overflow-y: auto;
+    background-color: #fafafa;
 }
\ No newline at end of file
diff --git a/web/src/app/home/layout.tsx b/web/src/app/home/layout.tsx
index b3828614..5e4781c1 100644
--- a/web/src/app/home/layout.tsx
+++ b/web/src/app/home/layout.tsx
@@ -6,9 +6,9 @@ import HomeSidebar from '@/app/home/components/home-sidebar/HomeSidebar';
 import HomeTitleBar from '@/app/home/components/home-titlebar/HomeTitleBar';
 import React, { useState } from 'react';
 import { SidebarChildVO } from '@/app/home/components/home-sidebar/HomeSidebarChild';
-import { Layout } from 'antd';
+// import { Layout } from 'antd';
 
-const { Sider, Content } = Layout;
+// const { Sider, Content } = Layout;
 
 export default function HomeLayout({
   children,
@@ -21,24 +21,39 @@ export default function HomeLayout({
   };
 
   return (
-    <Layout className={styles.homeLayoutContainer}>
-      {/* homeLayoutContainer 是整个容器的入口,使用 flex 的左右布局 */}
+    // <Layout className={styles.homeLayoutContainer}>
+    //   {/* homeLayoutContainer 是整个容器的入口,使用 flex 的左右布局 */}
 
-      <Sider className="left">
+    //   <Sider className="left">
+    //     <HomeSidebar onSelectedChangeAction={onSelectedChangeAction} />
+    //     {/* HomeSidebar 为侧边栏 */}
+    //   </Sider>
+
+    //   <Layout className="right">
+    //     {/* right 为内容显示区域，right使用 flex 上下布局，right 使用 flex 布局吃掉剩余部分 */}
+
+    //     <HomeTitleBar title={title} />
+
+    //     <Content className={styles.main}>
+    //       {/* mainContent 为主页面 */}
+    //       {children}
+    //     </Content>
+    //   </Layout>
+    // </Layout>
+
+    <div className={styles.homeLayoutContainer}>
+      <aside className={styles.sidebar}>
         <HomeSidebar onSelectedChangeAction={onSelectedChangeAction} />
-        {/* HomeSidebar 为侧边栏 */}
-      </Sider>
-
-      <Layout className="right">
-        {/* right 为内容显示区域，right使用 flex 上下布局，right 使用 flex 布局吃掉剩余部分 */}
-
+      </aside>
+      
+      <div className={styles.main}>
         <HomeTitleBar title={title} />
-
-        <Content className={styles.main}>
-          {/* mainContent 为主页面 */}
+        
+        <main className={styles.mainContent}>
           {children}
-        </Content>
-      </Layout>
-    </Layout>
+        </main>
+      </div>
+
+    </div>
   );
 }