feat(编辑器): 优化移动端编辑器交互体验

- 修复键盘弹出时底部操作栏遮挡问题，添加固定定位效果
- 改进光标定位逻辑，适配不同输入场景
- 增加内容预填充功能，便于测试和演示
- 调整底部间距和动画高度，适配不同设备
- 添加vConsole调试工具便于移动端调试

css/index.css

@@ -48,8 +48,7 @@ editor {
 .container {
   min-height: 100vh;
   background-color: #f5f5f5;
-  padding-bottom: 3.2rem;
-  padding-bottom: 8.6667rem;
+  padding-bottom: 300px;
   padding-top: 0.4rem;
 }
 .container .title-box {
@@ -81,7 +80,7 @@ editor {
   border-radius: 0.4rem;
 }
 .container .editor-box .editor {
-  margin: 0.4rem;
+  margin: 0.4rem 0.4rem 0.2rem;
   width: 8.6rem;
   min-height: 10rem;
   border: none;
@@ -121,7 +120,24 @@ editor {
   height: 1px;
   display: inline-block;
 }
-.container .editor-box .label {
+.container .editor-box .operate-box {
+  display: flex;
+  flex-direction: column;
+  padding-top: 0.2rem;
+  transition: all 0.3s ease-in-out;
+}
+.container .editor-box .operate-box.fixed {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  background-color: #fff;
+  z-index: 999;
+}
+.container .editor-box .operate-box.fixed .label {
+  width: 100vw;
+}
+.container .editor-box .operate-box .label {
   white-space: nowrap;
   /* height: 0.84rem; */
   margin-bottom: 0.2rem;
@@ -129,7 +145,7 @@ editor {
   overflow: auto;
   padding-bottom: 0.2rem;
 }
-.container .editor-box .label .item {
+.container .editor-box .operate-box .label .item {
   width: fit-content;
   height: 0.64rem;
   line-height: 0.64rem;
@@ -140,19 +156,19 @@ editor {
   padding: 0 0.24rem;
   display: inline-flex;
 }
-.container .editor-box .label .item:not(:last-of-type) {
+.container .editor-box .operate-box .label .item:not(:last-of-type) {
   margin-right: 0.2rem;
 }
-.container .editor-box .label .item:first-of-type {
+.container .editor-box .operate-box .label .item:first-of-type {
   margin-left: 0.4rem;
 }
-.container .editor-box .label .item:last-of-type {
+.container .editor-box .operate-box .label .item:last-of-type {
   margin-right: 0.4rem;
 }
-.container .editor-box .btn-list {
+.container .editor-box .operate-box .btn-list {
   margin: 0 0.4rem 0.4rem;
 }
-.container .editor-box .btn-list .item {
+.container .editor-box .operate-box .btn-list .item {
   width: fit-content;
   height: 0.72rem;
   line-height: 0.72rem;
@@ -166,15 +182,15 @@ editor {
   margin-right: 0.2rem;
   position: relative;
 }
-.container .editor-box .btn-list .item.pitch {
+.container .editor-box .operate-box .btn-list .item.pitch {
   background-color: #f6f6bd;
 }
-.container .editor-box .btn-list .item .icon {
+.container .editor-box .operate-box .btn-list .item .icon {
   width: 0.4rem;
   height: 0.4rem;
   margin-right: 0.14rem;
 }
-.container .editor-box .btn-list .item .file {
+.container .editor-box .operate-box .btn-list .item .file {
   opacity: 0;
   /* 隐藏输入框 */
   background: transparent;
@@ -186,7 +202,7 @@ editor {
   height: 100%;
   cursor: pointer;
 }
-.container .editor-box .btn-list .item .file::after {
+.container .editor-box .operate-box .btn-list .item .file::after {
   content: "";
   width: 100%;
   height: 100%;
@@ -194,14 +210,14 @@ editor {
   top: 0;
   left: 0;
 }
-.container .editor-box .btn-list .unfold {
+.container .editor-box .operate-box .btn-list .unfold {
   width: 0.72rem;
   height: 0.72rem;
   background-color: #f6f6f6;
   border: 0.0133rem solid #ebebeb;
   border-radius: 1.4667rem;
 }
-.container .editor-box .btn-list .unfold .icon {
+.container .editor-box .operate-box .btn-list .unfold .icon {
   width: 0.32rem;
   height: 0.32rem;
 }
@@ -292,7 +308,7 @@ editor {
     height: 0;
   }
   100% {
-    height: 8.6667rem;
+    height: 300px;
   }
 }
 .container .pop .emoji-system-list .item {