feat: 添加底部按钮动画效果并优化代码

- 为底部按钮添加显示/隐藏的过渡动画效果
- 移除vconsole调试工具相关代码
- 优化图片上传相关代码结构
- 修复底部按钮状态控制逻辑

js/index.js

@@ -282,13 +282,14 @@ createApp({
             getCursorPosition("text");
         };
 
-        const fixedState = ref(false);
+        let isBottomState = ref(false); // 底部按钮 显示
         const onEditorFocus = () => {
+            isBottomState.value = true;
             setTimeout(() => getKeyboardHeight(), 500);
         };
 
         const onEditorBlur = () => {
-            // fixedState.value = false;
+            isBottomState.value = false;
         };
 
         // 判断是否为空
@@ -354,7 +355,6 @@ createApp({
 
         const insertImage = (event) => {
             const file = event.target.files[0];
-
             if (!file) return; // 处理未选择文件的情况
 
             if (file.size > maxSize) {
@@ -362,7 +362,13 @@ createApp({
                 return;
             }
 
-            const reader = new FileReader();
+            // 不要删除，后面会用
+            // const formData = new FormData();
+            // formData.append("file", file);
+            // formData.append("name", file.name);
+            // formData.append("type", "image");
+            // console.log("formData", formData);
+
             reader.onload = (e) => {
                 const imgSrc = e.target.result;
                 console.log("imgSrc", imgSrc);
@@ -374,7 +380,6 @@ createApp({
                     range.insertNode(img);
                     const div = document.createElement("div");
                     range.insertNode(div);
-
                     judgeIsEmpty();
                 } catch (error) {
                     console.error("插入图片出错:", error);
@@ -433,8 +438,8 @@ createApp({
             // 公式：元素顶部相对于视口的位置 + 滚动距离 - 目标位置（视口高度的30%）
             // const targetPosition = window.scrollY + rect.top - viewportHeight * 0.3; // 30%位置，比正中间更靠上
             const height = type == "emoji" ? 300 : keyboardHeight;
+            // console.log(height);
             const targetPosition = window.scrollY + rect.top - (originalWindowHeight - height) + 40;
-            console.log("originalWindowHeight", originalWindowHeight, "targetPosition", targetPosition, "window.scrollY", window.scrollY, "targetPosition");
 
             // 平滑滚动到目标位置
             if (Math.abs(targetPosition - window.scrollY) > 10) {
@@ -469,6 +474,6 @@ createApp({
             if (currentHeight < originalWindowHeight) keyboardHeight = originalWindowHeight - currentHeight;
         };
 
-        return { operateRef, fixedState, onEditorBlur, onEditorFocus, cutAnonymity, isEmpty, selectEmoji, closeEmoji, openEmoji, optionEmoji, emojiState, insertLabel, editorRef, info, title, titleLength, titleTextarea, adjustTextareaHeight, isPTitle, paragraphTitle, insertImage, onEditorInput };
+        return { isBottomState, operateRef, onEditorBlur, onEditorFocus, cutAnonymity, isEmpty, selectEmoji, closeEmoji, openEmoji, optionEmoji, emojiState, insertLabel, editorRef, info, title, titleLength, titleTextarea, adjustTextareaHeight, isPTitle, paragraphTitle, insertImage, onEditorInput };
     },
 }).mount("#appIndex");