more css

code-server-like/static/css/index.css

@@ -10,23 +10,45 @@ body {
   background-color: #f1f1f1;
   border-bottom: 1px solid #ddd;
 }
-
-#container {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1; /* 让容器填满剩余空间 */
+  /* 核心容器设置为 Flexbox */
+  #container {
+    display: flex;
+    height: 100vh; /* 高度占满整个视口 */
 }
 
+/* 文件树区域（左侧） */
+#fileTree {
+    width: 20%;  /* 固定宽度为 20% */
+    height: 100%;
+    border-right: 1px solid #ddd;
+    padding: 10px;
+    overflow-y: auto;
+    background-color: #f0f0f0;  /* 背景颜色可调整 */
+}
+
+/* 右侧的内容区域，分为编辑器和终端 */
+#contentArea {
+    display: flex;
+    flex-direction: column;
+    width: 80%;  /* 右侧占据 80% */
+}
+
+/* 编辑器部分 */
 #editorContainer {
-  flex-grow: 3; /* 让编辑器占据三分之二空间 */
-  border-bottom: 1px solid #ddd;
-  background-color: #f5f5f5; /* 可以调整编辑器背景颜色 */
+    flex-grow: 3;  /* 编辑器占据大部分空间，3:1 */
+    border-bottom: 1px solid #ddd;
+    background-color: #f5f5f5;  /* 可以调整编辑器背景颜色 */
+    padding: 10px;
 }
 
+/* 终端部分 */
 #terminal {
-  flex-grow: 1; /* 让终端占据剩余的空间 */
-  border-top: 1px solid #ddd;
-  background-color: black;
+    flex-grow: 1;  /* 终端占据剩余的空间 */
+    border-top: 1px solid #ddd;
+    background-color: black;
+    color: white;  /* 终端文本颜色 */
+    padding: 10px;
+    overflow-y: auto;
 }
 #fileTree { width: 20%;height: 100%; border-right: 1px solid #ddd; padding: 10px; overflow-y: auto; }
 #searchSidebar {  border-left: 1px solid #ddd;  display: none; overflow-y: auto; }