feat: 拖拽布局-左侧布局优化

demoHtml/flex/GEMINI.md

@@ -21,4 +21,5 @@
 
 ## 要求
 * 执行任何任务的时候，请先输出你的思路，等待我确认之后再修改代码
-* 有任何不确认的地方，请先向我确认再执行任务
+* 有任何不确认的地方，请先向我确认再执行任务
+* 请任何时候使用中文与我沟通或者确认，包括项目中使用注释也使用中文

demoHtml/flex/css/index.css

@@ -49,10 +49,11 @@ html {
     border-bottom: 2px solid #667eea;
 }
 
-/* Components panel */
+/* 组件面板 */
 #components-panel {
     position: relative;
-    flex: 1;
+    width: 150px; /* 固定宽度 */
+    flex: none; /* 禁用flex伸缩 */
     background-color: #fff;
     border-right: 1px solid #e0e0e0;
     display: flex;
@@ -64,14 +65,12 @@ html {
     padding: 10px;
     overflow-y: auto;
     display: flex;
-    flex-direction: row;
+    flex-direction: column; /* 垂直堆叠组件 */
-    flex-wrap: wrap;
-    align-content: flex-start;
     gap: 10px;
 }
 
 .component-item {
-    width: calc(50% - 5px);
+    width: 100%; /* 组件宽度占满父容器，实现一行一个 */
     height: 120px;
     border-radius: 8px;
     cursor: pointer;
@@ -117,17 +116,18 @@ html {
 .action-btn {
     position: relative;
     width: 100%;
-    height: 50px;
+    height: auto; /* 高度自适应内容 */
     display: flex;
+    flex-direction: column; /* 子元素垂直堆叠 */
     align-items: center;
     justify-content: center;
-    padding: 0 10px;
+    padding: 10px; /* 添加垂直内边距 */
 }
 .action-btn .trash-container,
 .action-btn .save-container {
-    width: 46%;
+    width: 100%; /* 宽度占满父容器 */
     height: 40px;
-    margin: 0 2%;
+    margin: 5px 0; /* 添加垂直外边距，移除水平外边距 */
     border-radius: 8px;
     display: flex;
     align-items: center;