优化 header

src/client/admin/layouts/MainLayout.tsx

@@ -108,12 +108,13 @@ export const MainLayout = () => {
   
   return (
     <Layout style={{ minHeight: '100vh' }}>
-      <Sider 
-        trigger={null} 
-        collapsible 
+      <Sider
+        trigger={null}
+        collapsible
         collapsed={collapsed}
         width={240}
         className="custom-sider"
+        theme='light'
         style={{
           overflow: 'auto',
           height: '100vh',
@@ -122,6 +123,8 @@ export const MainLayout = () => {
           top: 0,
           bottom: 0,
           zIndex: 100,
+          transition: 'all 0.2s ease',
+          boxShadow: '2px 0 8px 0 rgba(29, 35, 41, 0.05)',
         }}
       >
         <div className="p-4">
@@ -156,12 +159,9 @@ export const MainLayout = () => {
       </Sider>
       
       <Layout style={{ marginLeft: collapsed ? 80 : 240, transition: 'margin-left 0.2s' }}>
-        <Header className="p-0 flex justify-between items-center" 
-          style={{ 
-            position: 'sticky', 
-            top: 0, 
-            zIndex: 99, 
-            boxShadow: '0 1px 4px rgba(0,21,41,0.08)',
+        <div className="sticky top-0 z-50 bg-white shadow-sm transition-all duration-200 h-16 flex items-center justify-between pl-2"
+          style={{
+            boxShadow: '0 1px 4px rgba(0,21,41,0.08)'
           }}
         >
           <Button
@@ -191,10 +191,10 @@ export const MainLayout = () => {
               </Space>
             </Dropdown>
           </Space>
-        </Header>
+        </div>
         
-        <Content className="m-6" style={{ overflow: 'initial' }}>
-          <div className="site-layout-content p-6 rounded-lg">
+        <Content className="m-6" style={{ overflow: 'initial', transition: 'all 0.2s ease' }}>
+          <div className="site-layout-content p-6 rounded-lg bg-white shadow-sm">
             <Outlet />
           </div>
           

src/style.css

@@ -1 +1,55 @@
 @import 'tailwindcss';
+
+/* 全局滚动条样式 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* 响应式断点 */
+@media (max-width: 768px) {
+  .custom-sider {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+  
+  .site-layout-content {
+    padding: 1rem !important;
+  }
+}
+
+/* 全局过渡效果 */
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+/* 内容区域阴影优化 */
+.shadow-sm {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+/* 按钮悬停效果 */
+.ant-btn:hover {
+  transform: translateY(-1px);
+}
+
+/* 卡片样式优化 */
+.ant-card {
+  border-radius: 8px;
+}