diff --git a/code-server-like/static/css/index.css b/code-server-like/static/css/index.css
index 6483d79..6443256 100644
--- a/code-server-like/static/css/index.css
+++ b/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; }
diff --git a/code-server-like/templates/index.html b/code-server-like/templates/index.html
index 9b4b470..0e98058 100644
--- a/code-server-like/templates/index.html
+++ b/code-server-like/templates/index.html
@@ -13,6 +13,7 @@
+