koishi-plugin-chat-patch 2.0.1 → 2.1.1

package/client/index.scss

@@ -10,6 +10,44 @@
 }
 
 .chat-patch-wrapper {
+  /* 完全隐藏滚动条 - 增强版 */
+  .mobile-scrollbar-fix {
+    /* 隐藏 Element Plus 滚动条组件 */
+    .el-scrollbar__bar {
+      display: none !important;
+      opacity: 0 !important;
+      width: 0 !important;
+      height: 0 !important;
+    }
+    
+    .el-scrollbar__thumb {
+      display: none !important;
+    }
+    
+    .el-scrollbar__wrap {
+      overflow-x: hidden !important;
+      
+      /* 隐藏原生滚动条 - 所有浏览器 */
+      scrollbar-width: none !important; /* Firefox */
+      -ms-overflow-style: none !important; /* IE/Edge */
+      
+      &::-webkit-scrollbar {
+        display: none !important; /* Chrome/Safari */
+        width: 0 !important;
+        height: 0 !important;
+        background: transparent !important;
+      }
+      
+      &::-webkit-scrollbar-track {
+        display: none !important;
+      }
+      
+      &::-webkit-scrollbar-thumb {
+        display: none !important;
+      }
+    }
+  }
+
   color: var(--chat-text);
   background-color: var(--chat-bg);
   
@@ -37,4 +75,16 @@
     width: 100%;
     height: 100%;
     border: none;
+}
+
+.message-highlight {
+  animation: highlight-fade 1.5s ease-in-out;
+  border-radius: 8px;
+}
+
+@keyframes highlight-fade {
+  0% { background-color: transparent; }
+  10% { background-color: rgba(64, 158, 255, 0.4); filter: brightness(1.2); }
+  30% { background-color: rgba(64, 158, 255, 0.4); filter: brightness(1.2); }
+  100% { background-color: transparent; }
 }

package/client/vue/chat-logic.ts

@@ -1,5 +1,5 @@
-import { ref, computed, onMounted, nextTick, onUnmounted, reactive } from 'vue'
-import { receive } from '@koishijs/client'
+import { ref, computed, onMounted, nextTick, onUnmounted, reactive, watch } from 'vue'
+import { receive, send } from '@koishijs/client'
 import { useChatData } from './composables/useChatData'
 import { useChatActions } from './composables/useChatActions'
 import { useImageCache } from './composables/useImageCache'
@@ -19,24 +19,45 @@ export function useChatLogic() {
   const { getCachedImageUrl, cacheImage } = useImageCache()
 
   // 状态管理
+  const menu = ref({ show: false, x: 0, y: 0, type: '', id: '', isPinned: false, hasMedia: false })
   const selectedBot = ref('')
   const selectedChannel = ref('')
   const inputText = ref('')
   const uploadedImages = ref<any[]>([])
   const scrollRef = ref<any>(null)
+  const inputRef = ref<any>(null)
   const isMobile = ref(false)
-  const mobileView = ref<'bots' | 'channels' | 'messages' | 'forward' | 'image'>('bots')
+  const mobileView = ref<'bots' | 'channels' | 'messages' | 'forward' | 'image' | 'profile' | 'raw'>('bots')
   const isLoadingHistory = ref(false)
+  const keyboardHeight = ref(0) // 键盘高度
 
   // 合并转发详情状态
   const forwardData = reactive({
     messages: [] as any[]
   })
+  const forwardDialogVisible = ref(false)
 
   // 图片查看器状态
   const imageViewer = reactive({
     url: ''
   })
+  const imageViewerVisible = ref(false)
+  const imageZoom = ref(1)
+
+  // 原始消息查看状态
+  const rawMessage = reactive({
+    content: ''
+  })
+  const rawMessageVisible = ref(false)
+
+  // 引用/回复状态
+  const replyingTo = ref<any>(null)
+
+  // 用户资料状态
+  const userProfile = reactive({
+    data: null as any
+  })
+  const userProfileVisible = ref(false)
 
   // 计算属性
   const currentChannels = computed(() => getChannels(selectedBot.value))
@@ -45,6 +66,10 @@ export function useChatLogic() {
     const c = currentChannels.value.find(i => i.id === selectedChannel.value)
     return c ? c.name : ''
   })
+  const selectedBotPlatform = computed(() => {
+    const bot = bots.value.find(b => b.selfId === selectedBot.value)
+    return bot?.platform || 'unknown'
+  })
 
   // 方法
   const selectBot = (id: string) => {
@@ -64,23 +89,74 @@ export function useChatLogic() {
 
     await nextTick()
     scrollToBottom()
+
+    // 针对图片加载导致的滚动偏移，在 300ms 和 800ms 后再次校准底部
+    setTimeout(scrollToBottom, 300)
+    setTimeout(scrollToBottom, 800)
   }
 
   const goBack = () => {
-    if (mobileView.value === 'image') mobileView.value = 'messages'
-    else if (mobileView.value === 'forward') mobileView.value = 'messages'
-    else if (mobileView.value === 'messages') mobileView.value = 'channels'
-    else if (mobileView.value === 'channels') mobileView.value = 'bots'
+    if (isMobile.value && mobileView.value !== 'bots') {
+      // 手机端使用 history.back()，由 popstate 监听器处理视图切换
+      window.history.back()
+    } else {
+      // PC 端或初始页面的逻辑
+      if (mobileView.value === 'image') {
+        mobileView.value = 'messages'
+        imageZoom.value = 1
+      }
+      else if (mobileView.value === 'forward') mobileView.value = 'messages'
+      else if (mobileView.value === 'profile') mobileView.value = 'messages'
+      else if (mobileView.value === 'raw') mobileView.value = 'messages'
+      else if (mobileView.value === 'messages') mobileView.value = 'channels'
+      else if (mobileView.value === 'channels') mobileView.value = 'bots'
+    }
   }
 
+  // 处理手机物理返回键
+  const handlePopState = (e: PopStateEvent) => {
+    if (!isMobile.value) return
+    if (e.state && e.state.view) {
+      mobileView.value = e.state.view
+    } else {
+      mobileView.value = 'bots'
+    }
+  }
+
+  // 监听视图变化，同步到 history state
+  watch(mobileView, (newView, oldView) => {
+    if (!isMobile.value) return
+    // 只有在非 popstate 导致的改变时才 pushState (简单判断：如果当前 state 不匹配则 push)
+    if (window.history.state?.view !== newView) {
+      window.history.pushState({ view: newView }, '')
+    }
+  })
+
   const showForward = (elements: any[]) => {
     forwardData.messages = elements.filter(e => e.type === 'message')
-    mobileView.value = 'forward'
+    if (isMobile.value) {
+      mobileView.value = 'forward'
+    } else {
+      forwardDialogVisible.value = true
+    }
   }
 
   const openImageViewer = (url: string) => {
     imageViewer.url = url
-    mobileView.value = 'image'
+    imageZoom.value = 1
+    if (isMobile.value) {
+      mobileView.value = 'image'
+    } else {
+      imageViewerVisible.value = true
+    }
+  }
+
+  const handleImageWheel = (e: WheelEvent) => {
+    if (e.deltaY < 0) {
+      imageZoom.value = Math.min(imageZoom.value + 0.1, 3)
+    } else {
+      imageZoom.value = Math.max(imageZoom.value - 0.1, 0.5)
+    }
   }
 
   const downloadImage = (url: string) => {
@@ -121,26 +197,368 @@ export function useChatLogic() {
     if (!selectedBot.value || !selectedChannel.value) return
     if (!inputText.value.trim() && !uploadedImages.value.length) return
 
-    const res = await sendMessage(selectedBot.value, selectedChannel.value, inputText.value, uploadedImages.value)
+    let content = inputText.value
+    if (replyingTo.value) {
+      // 优先使用真实 ID 进行引用
+      const quoteId = replyingTo.value.realId || replyingTo.value.id
+      content = `<quote id="${quoteId}"/>${content}`
+    }
+
+    const res = await sendMessage(selectedBot.value, selectedChannel.value, content, uploadedImages.value)
     if (res?.success) {
       inputText.value = ''
       uploadedImages.value = []
+      replyingTo.value = null
       scrollToBottom()
     } else {
       ElMessage.error(res?.error || '发送失败')
     }
   }
 
+  // 复读消息 (+1)
+  const repeatMessage = async (msg: any) => {
+    if (!selectedBot.value || !selectedChannel.value) return
+
+    // 复读消息内容
+    let content = msg.content
+
+    // 处理引用逻辑
+    if (msg.quote) {
+      // 如果原消息有引用，保留引用
+      const quoteId = msg.quote.id
+      // 检查引用ID是否为临时ID
+      if (quoteId && !quoteId.startsWith('bot-msg-')) {
+        content = `<quote id="${quoteId}"/>${content}`
+      } else {
+        // 引用ID是临时ID，不添加引用，只发送内容
+        content = msg.content
+      }
+    } else if (msg.isBot || msg.userId === selectedBot.value) {
+      // 如果是复读机器人自己的消息
+      const messageId = msg.realId || msg.id
+
+      // 检查消息ID是否为临时ID（以bot-msg-开头）
+      if (messageId && messageId.startsWith('bot-msg-')) {
+        // 临时ID，不使用引用，直接发送内容
+        content = msg.content
+      } else if (messageId) {
+        // 真实ID，可以使用引用
+        content = `<quote id="${messageId}"/>${content}`
+      } else {
+        // 没有ID，只发送内容
+        content = msg.content
+      }
+    }
+
+    const res = await sendMessage(selectedBot.value, selectedChannel.value, content, [])
+    if (res?.success) {
+      scrollToBottom()
+    } else {
+      ElMessage.error(res?.error || '复读失败')
+    }
+  }
+
+  // 机器人右键菜单
+  const onBotMenu = (e: MouseEvent, bot: any) => {
+    e.preventDefault()
+    e.stopPropagation()
+    menu.value = {
+      show: true,
+      x: e.clientX,
+      y: e.clientY,
+      type: 'bot',
+      id: bot.selfId,
+      isPinned: pinnedBots.value.has(bot.selfId),
+      hasMedia: false
+    }
+  }
+
+  // 频道右键菜单
+  const onChannelMenu = (e: MouseEvent, channel: any) => {
+    e.preventDefault()
+    e.stopPropagation()
+    menu.value = {
+      show: true,
+      x: e.clientX,
+      y: e.clientY,
+      type: 'channel',
+      id: channel.id,
+      isPinned: pinnedChannels.value.has(`${selectedBot.value}:${channel.id}`),
+      hasMedia: false
+    }
+  }
+
+  // 消息右键菜单
+  const onMessageMenu = (e: MouseEvent, msg: any) => {
+    // 如果菜单已经显示，则关闭它并允许原生菜单弹出（第二次右键逻辑）
+    if (menu.value.show && menu.value.type === 'message' && menu.value.id === msg.id) {
+      menu.value.show = false
+      return
+    }
+
+    e.preventDefault()
+    e.stopPropagation()
+
+    const hasMedia = msg.elements?.some((el: any) => ['image', 'img', 'mface', 'audio', 'video'].includes(el.type))
+    menu.value = {
+      show: true,
+      x: e.clientX,
+      y: e.clientY,
+      type: 'message',
+      id: msg.id,
+      isPinned: false,
+      data: msg,
+      hasMedia
+    } as any
+  }
+
+  // 统一处理菜单动作
+  const handleMenuAction = async (action: string) => {
+    const type = menu.value.type
+    const id = menu.value.id
+    const isPinned = menu.value.isPinned
+    menu.value.show = false
+
+    if (action === 'pin') {
+      if (type === 'bot') await togglePinBot(id, isPinned, pinnedBots.value)
+      else await togglePinChannel(selectedBot.value, id, isPinned, pinnedChannels.value)
+    } else if (action === 'delete') {
+      // 删除逻辑保持在 index.vue 中通过 ElMessageBox 确认，或者这里直接处理
+      if (type === 'bot') await deleteBotData(id)
+      else await deleteChannelData(selectedBot.value, id)
+      location.reload()
+    }
+  }
+
+  // 兼容手机端的复制函数
+  const copyToClipboard = (text: string) => {
+    if (!text) {
+      ElMessage.warning('未复制任何内容')
+      return Promise.resolve()
+    }
+    if (navigator.clipboard && window.isSecureContext) {
+      return navigator.clipboard.writeText(text)
+    } else {
+      // 回退方案
+      const textArea = document.createElement("textarea")
+      textArea.value = text
+      textArea.style.position = "fixed"
+      textArea.style.left = "-999999px"
+      textArea.style.top = "-999999px"
+      document.body.appendChild(textArea)
+      textArea.focus()
+      textArea.select()
+      return new Promise<void>((res, rej) => {
+        document.execCommand('copy') ? res() : rej()
+        textArea.remove()
+      })
+    }
+  }
+
+  const handleMessageAction = async (action: string) => {
+    const msg = (menu.value as any).data
+    menu.value.show = false
+    if (!msg) return
+
+    if (action === 'copy') {
+      // 移除 HTML 标签
+      const text = (msg.content || '').replace(/<[^>]+>/g, '')
+      if (!text) {
+        ElMessage.warning('未复制任何内容')
+      } else {
+        copyToClipboard(text).then(() => ElMessage.success('已复制到剪贴板'))
+      }
+    } else if (action === 'copy-raw') {
+      // 查看原始消息，包含引用标签
+      let raw = msg.content || ''
+      if (msg.quote) {
+        raw = `<quote id="${msg.quote.id}"/>${raw}`
+      }
+      rawMessage.content = raw
+      if (isMobile.value) {
+        mobileView.value = 'raw'
+      } else {
+        rawMessageVisible.value = true
+      }
+    } else if (action === 'plus1') {
+      await repeatMessage(msg)
+    } else if (action === 'reply') {
+      replyingTo.value = msg
+      // 自动聚焦输入框
+      nextTick(() => {
+        // Element Plus 的 el-input 需要访问其内部的 textarea
+        const inputEl = inputRef.value?.$el?.querySelector('textarea') || inputRef.value?.ref
+        if (inputEl) {
+          inputEl.focus()
+        } else {
+          inputRef.value?.focus?.()
+        }
+      })
+    } else if (action === 'download') {
+      const media = msg.elements?.find((el: any) => ['image', 'img', 'mface', 'audio', 'video'].includes(el.type))
+      const url = media?.attrs?.src || media?.attrs?.url || media?.attrs?.file
+      if (url) downloadImage(url)
+    }
+  }
+
+  // 显示用户资料
+  const showUserProfile = async (msg: any) => {
+    if (!selectedBot.value) return
+
+    const res = await (send as any)('get-user-info', {
+      selfId: selectedBot.value,
+      userId: msg.userId,
+      guildId: msg.guildId
+    })
+
+    if (res.success) {
+      userProfile.data = res.data
+      if (isMobile.value) {
+        mobileView.value = 'profile'
+      } else {
+        userProfileVisible.value = true
+      }
+    } else {
+      ElMessage.error(res.error || '获取用户信息失败')
+    }
+  }
+
+  // 定位消息并高亮
+  const scrollToMessage = async (id: string) => {
+    // 尝试在当前列表中查找，优先匹配 data-id
+    let el = document.querySelector(`[data-id="${id}"]`) || document.getElementById(id)
+
+    if (!el) {
+      // 如果没找到，尝试向上加载历史记录
+      if (isLoadingHistory.value) return
+
+      ElMessage.info('正在向上查找历史消息...')
+
+      // 最多尝试向上查找 3 次
+      for (let i = 0; i < 3; i++) {
+        await loadHistory(selectedBot.value, selectedChannel.value)
+        // 等待 DOM 更新
+        await new Promise(resolve => setTimeout(resolve, 150))
+        el = document.querySelector(`[data-id="${id}"]`) || document.getElementById(id)
+        if (el) break
+      }
+    }
+
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      // 找到消息内容容器进行高亮
+      const contentEl = el.querySelector('.cursor-context-menu') || el
+      contentEl.classList.add('message-highlight')
+      setTimeout(() => contentEl.classList.remove('message-highlight'), 1500)
+    } else {
+      ElMessage.warning('消息太久远，已不在当前列表中')
+    }
+  }
+
+  // 处理粘贴图片
+  const handlePaste = async (event: ClipboardEvent) => {
+    const items = event.clipboardData?.items
+    if (!items) return
+
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf('image') !== -1) {
+        const file = items[i].getAsFile()
+        if (file) {
+          // 模拟文件上传逻辑
+          const reader = new FileReader()
+          reader.onload = async (e) => {
+            const base64 = e.target?.result as string
+            const res = await (send as any)('upload-image', {
+              file: base64,
+              filename: `pasted_image_${Date.now()}.png`,
+              mimeType: file.type
+            })
+            if (res.success) {
+              uploadedImages.value.push({
+                tempId: res.tempId,
+                preview: URL.createObjectURL(file),
+                filename: `pasted_image_${Date.now()}.png`
+              })
+            }
+          }
+          reader.readAsDataURL(file)
+        }
+      }
+    }
+  }
+
   const checkMobile = () => {
     isMobile.value = window.innerWidth <= 768
   }
 
+  // 监听键盘弹出（通过 visualViewport 或 window resize）
+  const updateKeyboardHeight = () => {
+    if (!isMobile.value) {
+      keyboardHeight.value = 0
+      return
+    }
+
+    // 使用 visualViewport API（现代浏览器）
+    if (window.visualViewport) {
+      const viewportHeight = window.visualViewport.height
+      const windowHeight = window.innerHeight
+      const calculatedHeight = Math.max(0, windowHeight - viewportHeight)
+
+      // 只有当键盘高度变化超过50px时才更新（避免小幅抖动）
+      if (Math.abs(calculatedHeight - keyboardHeight.value) > 50) {
+        keyboardHeight.value = calculatedHeight
+      }
+    } else {
+      keyboardHeight.value = 0
+    }
+  }
+
   // 生命周期
   let dispose: any[] = []
 
   onMounted(async () => {
     checkMobile()
     window.addEventListener('resize', checkMobile)
+    window.addEventListener('click', () => menu.value.show = false)
+    window.addEventListener('popstate', handlePopState)
+
+    // 监听键盘弹出
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener('resize', updateKeyboardHeight)
+      window.visualViewport.addEventListener('scroll', updateKeyboardHeight)
+    }
+    window.addEventListener('resize', updateKeyboardHeight)
+
+    // 监听输入框聚焦和失焦
+    const handleFocus = () => {
+      // 延迟更新，等待键盘完全弹出
+      setTimeout(updateKeyboardHeight, 300)
+    }
+    const handleBlur = () => {
+      // 延迟更新，等待键盘完全收起
+      setTimeout(() => {
+        keyboardHeight.value = 0
+      }, 100)
+    }
+
+    // 为输入框添加事件监听
+    nextTick(() => {
+      const textarea = inputRef.value?.$el?.querySelector('textarea')
+      if (textarea) {
+        textarea.addEventListener('focus', handleFocus)
+        textarea.addEventListener('blur', handleBlur)
+        dispose.push(() => {
+          textarea.removeEventListener('focus', handleFocus)
+          textarea.removeEventListener('blur', handleBlur)
+        })
+      }
+    })
+
+    // 初始化 history state
+    if (isMobile.value) {
+      window.history.replaceState({ view: mobileView.value }, '')
+    }
+
     await loadConfig()
     await loadInitialData()
 
@@ -171,10 +589,29 @@ export function useChatLogic() {
       }
     })
     if (typeof d3 === 'function') dispose.push(d3)
+
+    // 监听机器人消息更新（发送成功后从虚拟 ID 转为真实 ID）
+    const d4 = receive('bot-message-updated', (data: any) => {
+      const channelKey = `${selectedBot.value}:${selectedChannel.value}`
+      if (data.channelKey !== channelKey) return
+
+      const msg = currentMessages.value.find(m => m.id === data.tempId)
+      if (msg) {
+        msg.sending = false
+        msg.realId = data.realId
+      }
+    })
+    if (typeof d4 === 'function') dispose.push(d4)
   })
 
   onUnmounted(() => {
     window.removeEventListener('resize', checkMobile)
+    window.removeEventListener('popstate', handlePopState)
+    window.removeEventListener('resize', updateKeyboardHeight)
+    if (window.visualViewport) {
+      window.visualViewport.removeEventListener('resize', updateKeyboardHeight)
+      window.visualViewport.removeEventListener('scroll', updateKeyboardHeight)
+    }
     dispose.forEach(d => d?.())
   })
 
@@ -196,7 +633,18 @@ export function useChatLogic() {
     mobileView,
     forwardData,
     imageViewer,
+    imageZoom,
+    rawMessage,
     isLoadingHistory,
+    forwardDialogVisible,
+    imageViewerVisible,
+    rawMessageVisible,
+    replyingTo,
+    userProfile,
+    userProfileVisible,
+    selectedBotPlatform,
+    menu,
+    keyboardHeight,
 
     // 方法
     selectBot,
@@ -212,7 +660,19 @@ export function useChatLogic() {
     goBack,
     showForward,
     openImageViewer,
+    handleImageWheel,
     downloadImage,
-    handleScroll
+    handleScroll,
+    repeatMessage,
+    handlePaste,
+    copyToClipboard,
+    onBotMenu,
+    onChannelMenu,
+    onMessageMenu,
+    handleMenuAction,
+    handleMessageAction,
+    showUserProfile,
+    inputRef,
+    scrollToMessage
   }
 }

package/client/vue/composables/useChatData.ts

@@ -95,10 +95,12 @@ export function useChatData() {
       chatData.value.channels[selfId] = {}
     }
     if (!chatData.value.channels[selfId][channelId]) {
+      const isDirect = msg.isDirect || channelId.includes('private')
       chatData.value.channels[selfId][channelId] = {
         id: channelId,
-        name: msg.guildName || msg.username || channelId,
-        type: msg.channelType || 0
+        name: isDirect ? `私聊（${msg.username || channelId}）` : (msg.guildName || channelId),
+        type: msg.channelType || 0,
+        isDirect
       }
     }