✨ 添加聊天消息右键菜单

package.json

@@ -19,13 +19,15 @@
   "dependencies": {
     "@formkit/auto-animate": "1.0.0-beta.6",
     "@highlightjs/vue-plugin": "^2.1.0",
+    "@imengyu/vue3-context-menu": "^1.2.10",
     "@msgpack/msgpack": "^2.8.0",
     "@tauri-apps/api": "^1.4.0",
     "@unocss/reset": "^0.54.0",
     "@vueuse/components": "^10.0.0",
     "@vueuse/core": "^10.0.0",
     "@vueuse/rxjs": "^10.0.0",
     "ant-design-vue": "^3.2.17",
+    "clipboard": "^2.0.11",
     "dayjs": "^1.11.7",
     "dexie": "^3.2.3",
     "highlight.js": "^11.7.0",

src/components/ChatBox.vue

@@ -2,7 +2,7 @@
 import { useDebounceFn } from '@vueuse/core'
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue'
 import { watchEffect } from 'vue'
-import { onBeforeRouteLeave } from 'vue-router'
+import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
 
 import { Behav } from '@/adapter/behav'
@@ -15,9 +15,10 @@ import ChatRequest from '@/components/ChatRequest.vue'
 import SendButton from '@/components/SendButton.vue'
 import TimeSeparator from '@/components/TimeSeparator.vue'
 import { db } from '@/database'
-import { useChatStore, useStatusStore } from '@/stores'
+import { useChatStore, useStatusStore, useSessionStore } from '@/stores'
 
 import type { User, Group } from '@/database'
+import type { State } from '@/stores/session'
 import type { PartialOptions, OverlayScrollbars } from 'overlayscrollbars'
 
 const { chatType, chatId } = defineProps<{
@@ -38,6 +39,8 @@ const chat = useChatStore()
 
 const status = useStatusStore()
 
+const session = useSessionStore()
+
 const chatInput = $ref<InstanceType<typeof ChatInput> | null>(null)
 
 const scroller = $ref<InstanceType<typeof OverlayScrollbarsComponent> | null>(null)
@@ -125,6 +128,11 @@ function lockScroll() {
   scrollLock = true
 }
 
+onBeforeRouteUpdate(async (to, from) => {
+  session.saveSessionState(from.fullPath)
+  await session.loadSessionState(to.fullPath, to.params.chatType as State['type'], to.params.chatId as State['id'])
+})
+
 onBeforeRouteLeave((_, from) => {
   status.latelySession = from.fullPath
 })

src/components/ChatInput.vue

@@ -8,7 +8,7 @@ import { useRoute } from 'vue-router'
 import AudioIcon from '@/assets/audio_file.svg?url'
 import VideoIcon from '@/assets/video_file.svg?url'
 import { db } from '@/database'
-import { useStatusStore } from '@/stores'
+import { useStatusStore, useSessionStore } from '@/stores'
 import { createFileCache, getUserAvatar, getGroupAvatar, nonNullable, getUserNickname } from '@/utils'
 
 import type { Contents } from '@/adapter/content'
@@ -25,6 +25,8 @@ const route = useRoute()
 
 const status = useStatusStore()
 
+const session = useSessionStore()
+
 const inputBox = $ref<HTMLDivElement | null>(null)
 
 onMounted(() => {
@@ -106,6 +108,7 @@ function clearContent(): void {
   if (inputBox) {
     inputBox.textContent = ''
   }
+  clearReplyMessage()
 }
 
 /** 获取输入内容 */
@@ -123,6 +126,14 @@ function getContent(): Contents[] | null {
       contents.push(content)
     }
   }
+  if (session.state?.replyMessage) {
+    contents.unshift({
+      type: 'reply',
+      data: {
+        message_id: session.state.replyMessage.id,
+      },
+    })
+  }
   return contents
 }
 
@@ -221,16 +232,45 @@ const tribute = new Tribute<Mentions>({
     return item.name + item.id
   },
 })
+
+function clearReplyMessage(): void {
+  if (session.state) {
+    session.state.replyMessage = undefined
+  }
+}
+
+function onBackspace(): void {
+  if (inputBox?.textContent === '') {
+    clearReplyMessage()
+  }
+}
 </script>
 
 <template>
   <OverlayScrollbarsComponent class="h-full max-h-25 w-full rounded-2xl bg-gray-100" defer>
+    <div v-show="session.state?.replyMessage" class="mx-2 mt-1.5 rounded-lg bg-gray-200 px-3 py-1.5">
+      <div class="text-sm text-gray-400">
+        <div>{{ session.state?.replyMessage?.nickname }}:</div>
+        <div class="flex flex-row items-center justify-between gap-1">
+          <div class="restrict-rows-1">
+            {{ session.state?.replyMessage?.message }}
+          </div>
+          <span
+            i="carbon-close-outline"
+            class="inline-block flex-none text-base"
+            hover="text-gray-500"
+            @click="clearReplyMessage"
+          ></span>
+        </div>
+      </div>
+    </div>
     <div
       ref="inputBox"
       class="whitespace-pre-wrap break-all bg-gray-100 px-2 py-1 align-middle text-sm text-gray-500 caret-gray-500/50 outline-none"
       contenteditable
       @paste.prevent="onPaste"
       @keydown.ctrl.enter="$emit('send')"
+      @keydown.backspace="onBackspace"
     ></div>
   </OverlayScrollbarsComponent>
 </template>

src/components/ChatMessage.vue

@@ -157,6 +157,7 @@ async function pokeUser(): Promise<void> {
             v-show="showMessage"
             class="!bg-transparent"
             :class="{ 'bubble-padding': !(onlyImage || onlyType('video')) }"
+            :message-id="scene.message_id"
             :messages="scene.message"
             :only-image="onlyImage"
           />