1. 修复手机端返回键无法关闭 Emoji 弹窗

Author: git-hub-cc

vue/src/App.vue

@@ -213,6 +213,11 @@ function handleBackButton() {
   } else if (uiStore.activeModal) {
     uiStore.hideModal();
     handled = true;
+    // ✅ MODIFICATION START: Add check for EmojiPicker
+  } else if (uiStore.isEmojiPickerVisible) {
+    uiStore.toggleEmojiPicker(false);
+    handled = true;
+    // ✅ MODIFICATION END
   } else if (uiStore.isDetailsPanelOpen) {
     uiStore.toggleDetailsPanel(false);
     handled = true;

vue/src/components/ChatView/MessageInput.vue

@@ -100,7 +100,7 @@
       </div>
     </div>
     <EmojiPicker
-        :show="isEmojiPickerVisible"
+        :show="uiStore.isEmojiPickerVisible"
         @select-emoji="insertEmoji"
         @select-sticker="sendSticker"
     />
@@ -132,7 +132,9 @@ const uiStore = useUiStore();
 const newMessage = ref('');
 const textareaRef = ref(null);
 const fileInputRef = ref(null);
-const isEmojiPickerVisible = ref(false);
+// --- ❌ REMOVAL ---
+// const isEmojiPickerVisible = ref(false);
+// --- ❌ REMOVAL ---
 const preview = ref(null);
 const isRecording = ref(false);
 const recordingDuration = ref(0);
@@ -194,13 +196,27 @@ function send() {
 // ✅ MODIFICATION START: Handle stickerId instead of sticker object
 function sendSticker(stickerId) {
   chatStore.sendMessage({ stickerId });
-  isEmojiPickerVisible.value = false;
+  // ✅ MODIFICATION: Use store action to close
+  uiStore.toggleEmojiPicker(false);
 }
 // ✅ MODIFICATION END
 
 function insertEmoji(emoji) { const textarea = textareaRef.value; const start = textarea.selectionStart; const end = textarea.selectionEnd; newMessage.value = newMessage.value.substring(0, start) + emoji + newMessage.value.substring(end); nextTick(() => { textarea.selectionStart = textarea.selectionEnd = start + emoji.length; textarea.focus(); }); }
-function toggleEmojiPicker() { isEmojiPickerVisible.value = !isEmojiPickerVisible.value; }
-function closeEmojiPicker(event) { if (isEmojiPickerVisible.value && !event.target.closest('.picker-container, .input-container')) { isEmojiPickerVisible.value = false; } }
+
+// ✅ MODIFICATION START: Use store action
+function toggleEmojiPicker() {
+  uiStore.toggleEmojiPicker();
+}
+// ✅ MODIFICATION END
+
+// ✅ MODIFICATION START: Use store state and action
+function closeEmojiPicker(event) {
+  if (uiStore.isEmojiPickerVisible && !event.target.closest('.picker-container, .input-container')) {
+    uiStore.toggleEmojiPicker(false);
+  }
+}
+// ✅ MODIFICATION END
+
 async function handleFileSelect(event) { const file = event.target.files[0]; if (file) await processFile(file); if(event.target) event.target.value = ''; }
 async function handlePaste(event) { const file = event.clipboardData.files[0]; if (file?.type.startsWith('image/')) { event.preventDefault(); await processFile(file); } }
 async function processFile(file) {

vue/src/stores/uiStore.js

@@ -25,6 +25,10 @@ export const useUiStore = defineStore('ui', () => {
     // const manualSdpText = ref('');
     // const commentModalContent = ref(null); // No longer needed
 
+    // ✅ MODIFICATION START: Add new state for EmojiPicker
+    const isEmojiPickerVisible = ref(false);
+    // ✅ MODIFICATION END
+
     // --- ACTIONS ---
     function toggleDetailsPanel(forceState, content = 'info') {
         if (typeof forceState === 'boolean') {
@@ -37,6 +41,16 @@ export const useUiStore = defineStore('ui', () => {
         }
     }
 
+    // ✅ MODIFICATION START: Add new action to control EmojiPicker
+    function toggleEmojiPicker(forceState) {
+        if (typeof forceState === 'boolean') {
+            isEmojiPickerVisible.value = forceState;
+        } else {
+            isEmojiPickerVisible.value = !isEmojiPickerVisible.value;
+        }
+    }
+    // ✅ MODIFICATION END
+
     function showModal(modalName, prefillData = {}) {
         modalPrefillData.value = prefillData;
         // --- [移除] ---
@@ -45,6 +59,11 @@ export const useUiStore = defineStore('ui', () => {
     }
 
     function hideModal() {
+        // ✅ MODIFICATION START: Also hide emoji picker when a modal is hidden
+        if (isEmojiPickerVisible.value) {
+            isEmojiPickerVisible.value = false;
+        }
+        // ✅ MODIFICATION END
         activeModal.value = null;
         activeOverlayModal.value = null;
         modalPrefillData.value = {};
@@ -134,6 +153,9 @@ export const useUiStore = defineStore('ui', () => {
         locationViewerContent,
         isPerformingDangerousAction,
         imageCropperContent,
+        // ✅ MODIFICATION START: Expose new state and action
+        isEmojiPickerVisible,
+        // ✅ MODIFICATION END
         toggleDetailsPanel,
         showModal,
         hideModal,
@@ -146,5 +168,8 @@ export const useUiStore = defineStore('ui', () => {
         showMediaViewer,
         showLocationViewer,
         showImageCropperOverlay,
+        // ✅ MODIFICATION START: Expose new state and action
+        toggleEmojiPicker,
+        // ✅ MODIFICATION END
     };
 });