完成大量美化

frontend/src/index.css

@@ -10,7 +10,7 @@
   height: 100vh;
   background-color: var(--color-bg-primary);
   color: var(--color-text-primary);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family: var(--font-body); /* 全局使用微软雅黑 */
   overflow: hidden;
 }
 
@@ -25,18 +25,69 @@
   margin-top: 0; /* Ensure panels start from top */
 }
 
-/* Smooth transitions for theme changes */
-.app,
-.app * {
+/* Smooth transitions for theme changes - only apply to specific properties */
+.app {
   transition: background-color var(--transition-normal), 
-              color var(--transition-normal),
-              border-color var(--transition-normal),
-              box-shadow var(--transition-normal);
+              color var(--transition-normal);
+}
+
+.app * {
+  /* Remove global transition to improve performance */
+}
+
+/* ==================== Panel Layout - Proportional Ratio ==================== */
+
+/* CSS Variables for layout ratios */
+:root {
+  /* Fixed mode: 1 : 3.5 : 1.25 (default) */
+  --left-fixed: 1fr;
+  --middle-fixed: 3.5fr;
+  --right-fixed: 1.25fr;
+  
+  /* Expanded mode: 1.8 : 2 : 1 */
+  --left-expanded: 1.8fr;
+  --middle-expanded: 2fr;
+  --right-expanded: 1fr;
+}
+
+.main-container {
+  display: grid;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  min-width: 0;
+  gap: 0; /* Panels have their own borders */
+  padding: 0;
+  margin-top: 0; /* Ensure panels start from top */
+  transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Wrapper containers for hover detection */
+.sidebar-left-wrapper,
+.chat-area-wrapper,
+.sidebar-right-wrapper {
+  min-width: 0;
+  min-height: 0; /* 允许 flex/grid 收缩 */
+  overflow: hidden;
+  display: flex; /* 确保子元素可以占满高度 */
+  flex-direction: column;
+  transition: flex-basis 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Fixed mode (default): 1 : 3.5 : 1.25 */
+.app.chat-mode .main-container,
+.sidebar-mode-fixed ~ .chat-area-wrapper {
+  grid-template-columns: var(--left-fixed) var(--middle-fixed) var(--right-fixed);
+}
+
+/* Expanded mode: 1.8 : 2 : 1 */
+.app.edit-mode .main-container,
+.sidebar-mode-expanded,
+.sidebar-mode-smart.sidebar-expanded {
+  grid-template-columns: var(--left-expanded) var(--middle-expanded) var(--right-expanded) !important;
 }
 
-/* ==================== Panel Layout - 1:2:1 Ratio ==================== */
 .sidebar-left {
-  flex: 0 0 25%;  /* 左侧 25% */
   min-width: 0;
   max-width: none;
   background-color: var(--color-bg-secondary);
@@ -48,9 +99,15 @@
   transition: box-shadow var(--transition-normal);
 }
 
+/* Highlight left sidebar in edit mode */
+.app.edit-mode .sidebar-left {
+  box-shadow: 2px 0 8px rgba(102, 126, 234, 0.15);
+}
+
 .chat-area {
-  flex: 0 0 50%;  /* 中间 50% */
+  flex: 1; /* 占据 wrapper 的全部高度 */
   min-width: 0;
+  min-height: 0; /* 允许 flex 收缩 */
   display: flex;
   flex-direction: column;
   background-color: var(--color-bg-primary);
@@ -80,7 +137,6 @@
 }
 
 .sidebar-right {
-  flex: 0 0 25%;  /* 右侧 25% */
   min-width: 0;
   max-width: none;
   background-color: var(--color-bg-secondary);
@@ -92,6 +148,11 @@
   transition: box-shadow var(--transition-normal);
 }
 
+/* Slightly fade right sidebar in edit mode */
+.app.edit-mode .sidebar-right {
+  opacity: 0.85;
+}
+
 /* Custom scrollbar for webkit browsers */
 .sidebar-left::-webkit-scrollbar,
 .sidebar-right::-webkit-scrollbar {
@@ -113,3 +174,59 @@
 .sidebar-right::-webkit-scrollbar-thumb:hover {
   background-color: var(--color-scrollbar-hover);
 }
+
+/* ==================== Responsive Breakpoints ==================== */
+
+/* Large screens (>1920px) - Add minimum width constraints */
+@media (min-width: 1920px) {
+  .app.chat-mode .main-container,
+  .sidebar-mode-fixed ~ .chat-area-wrapper {
+    grid-template-columns: minmax(280px, var(--left-fixed)) var(--middle-fixed) minmax(340px, var(--right-fixed));
+  }
+  
+  .app.edit-mode .main-container,
+  .sidebar-mode-expanded,
+  .sidebar-mode-smart.sidebar-expanded {
+    grid-template-columns: minmax(350px, var(--left-expanded)) var(--middle-expanded) minmax(250px, var(--right-expanded)) !important;
+  }
+}
+
+/* Medium screens (1024px - 1439px) - Compress ratios */
+@media (min-width: 1024px) and (max-width: 1439px) {
+  :root {
+    --left-chat: 0.9fr;
+    --middle-chat: 3.8fr;
+    --right-chat: 1.1fr;
+    
+    --left-edit: 1.3fr;
+    --middle-edit: 2.7fr;
+    --right-edit: 0.9fr;
+  }
+}
+
+/* Small screens (<1024px) - Hide right sidebar */
+@media (max-width: 1023px) {
+  .app.chat-mode .main-container,
+  .app.edit-mode .main-container,
+  .sidebar-mode-fixed ~ .chat-area-wrapper,
+  .sidebar-mode-expanded,
+  .sidebar-mode-smart.sidebar-expanded {
+    grid-template-columns: 1fr 3fr;
+  }
+  
+  .sidebar-right {
+    display: none;
+  }
+}
+
+/* Mobile/Tablet (<768px) - Single column layout */
+@media (max-width: 767px) {
+  .main-container {
+    grid-template-columns: 1fr;
+  }
+  
+  .sidebar-left,
+  .sidebar-right {
+    display: none;
+  }
+}