koishi-plugin-chat-patch 3.0.2 → 5.0.1

package/client/web/src/components/GlobalSessionSearchBar.vue

@@ -0,0 +1,301 @@
+<!--
+ * @FileDescription: 快速打开会话搜索栏
+ * @Author: Mr.Lee
+ * @Date:
+ *      2025/08/19
+ * @Version:
+ *      1.0 - 初始版本
+ * @Description:
+ *      该组件用于在全局范围内快速搜索和选择会话。
+ *      通过按下 Ctrl + E 快捷键打开搜索栏，用户可以输入关键词来过滤会话列表。
+ *      支持上下键选择会话，回车键确认选择。
+ *      被VSC的快捷键 Ctrl + E 激励创作的
+-->
+<template>
+    <Teleport to="body">
+        <Transition name="global-session-search-bar">
+            <div v-if="show"
+                class="mask-background"
+                @click.stop.prevent="close">
+                <div ref="content" class="global-session-search-bar ss-card">
+                    <label for="global-session-search-input" class="sr-only">{{ $t('搜索会话') }}</label>
+                    <input
+                        id="global-session-search-input"
+                        ref="input"
+                        v-search="searchInfo"
+                        class="ss-input"
+                        :placeholder="$t('搜索 ……')"
+                        @focusout="close">
+                    <template v-if="showSessions.length > 0">
+                        <hr>
+                        <div ref="sessionList">
+                            <div v-for="(session, key) in showSessions"
+                                :key="session.user_id ?? session.group_id"
+                                :class="{
+                                    'session-item': true,
+                                    'selected': selectId === key,
+                                }"
+                                @click="choiceSession(session)">
+                                <TinySessionBody
+                                    ref="sessionItems"
+                                    :session="session"
+                                    from="global-search" />
+                                <span v-if="
+                                    (session.group_id ?? session.user_id) === chatStore.chatInfo.show.id">
+                                    {{ $t('当前会话') }}
+                                </span>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import {
+    ref,
+    watchEffect,
+    computed,
+    shallowReactive,
+    useTemplateRef,
+    nextTick,
+} from 'vue'
+import TinySessionBody from './TinySessionBody.vue'
+import { vSearch, useEventListener } from '../function/utils/appUtil'
+import { UserFriendElem, UserGroupElem } from '../function/elements/information'
+import { login } from '../function/connect'
+import { backend } from '../runtime/backend'
+import { matchPinyin } from '../function/utils/pinyin'
+import { useUIStore } from '../state/ui'
+import { useContactStore } from '../state/contact'
+import { useChatStore } from '../state/chat'
+
+//#region == 移植相关 ====================================================================
+/**
+ * 会话对象
+ */
+type Session = UserGroupElem & UserFriendElem
+/**
+ * 切换会话
+ * @param session
+ */
+function changeSession(session: Session) {
+    const id = session.user_id ?? session.group_id
+    if (id === chatStore.chatInfo.show.id) return
+
+    contactStore.baseOnMsgList.set(String(session.user_id ?? session.group_id), session)
+    // 切换到这个聊天
+    nextTick(() => {
+        const item = document.getElementById(
+            'user-' + (session.user_id ?? session.group_id),
+        )
+        if (item) {
+            item.click()
+        }
+    })
+}
+/**
+ * 会话匹配算法
+ * @param session
+ * @param query
+ */
+function sessionSearchMatch(session: Session, query: string): boolean {
+    const value = query.toLowerCase()
+    const name = (
+        session.user_id? session.nickname + session.remark: session.group_name
+    ).toLowerCase()
+    if (name.includes(value)) return true
+    const id = session.user_id? session.user_id: session.group_id
+    if (id.toString() === value) return true
+    if (session.py_name && matchPinyin(session.py_name, value)) return true
+    return false
+}
+/**
+ * 判断有没有弹窗
+ */
+function hasPopBox() {
+    return uiStore.popBoxList.length > 0
+}
+//#endregion
+
+//#region == 常量声明 ====================================================================
+const uiStore = useUIStore()
+const contactStore = useContactStore()
+const chatStore = useChatStore()
+const show = ref<boolean>(false)
+const input = useTemplateRef<HTMLInputElement>('input')
+const sessionList = useTemplateRef<HTMLElement>('sessionList')
+const sessionItems = useTemplateRef<InstanceType<typeof TinySessionBody>[]>('sessionItems')
+const selectId = ref<number>(0)
+
+const searchInfo = shallowReactive({
+    originList: shallowReactive([] as Session[]),
+    query: shallowReactive([] as Session[]),
+    isSearch: false,
+    match: sessionSearchMatch,
+})
+
+const showSessions = computed(() => {
+    return searchInfo.isSearch ? searchInfo.query : searchInfo.originList
+})
+// 限制selectId的范围
+watchEffect(()=>{
+    if (selectId.value < 0)
+        selectId.value = showSessions.value.length - 1
+    if (selectId.value >= showSessions.value.length)
+        selectId.value = 0
+
+    // 出界滚动
+    scrollToSelected()
+})
+//#endregion
+
+//#region == 方法函数 ====================================================================
+/**
+ * 打开搜索栏
+ */
+function open() {
+    init()
+    show.value = true
+    selectId.value = 0
+
+    // 聚焦输入框
+    nextTick(() => {
+        input.value?.focus()
+    })
+}
+
+/**
+ * 关闭搜索栏
+ */
+function close() {
+    show.value = false
+    selectId.value = 0
+}
+
+/**
+ * 初始化搜索框
+ */
+function init() {
+    // 主要列表
+    const mainList: Session[] = []
+    for (const session of contactStore.userList) {
+        if (contactStore.onMsgList.find(
+            s => (
+                s.user_id && s.user_id === session.user_id
+            ) || (
+                s.group_id && s.group_id === session.group_id
+            )
+        )) continue
+        mainList.push(session)
+    }
+
+    searchInfo.originList = shallowReactive([...contactStore.onMsgList, ...mainList])
+
+    searchInfo.query = shallowReactive([])
+    searchInfo.isSearch = false
+    selectId.value = 0
+}
+
+/**
+ * 选择会话
+ * @param session 被选择的会话
+ */
+function choiceSession(session: Session) {
+    uiStore.openSideBar = false
+
+    changeSession(session)
+    close()
+}
+
+/**
+ * 根据id选择会话
+ * @param id
+ */
+function choiceSessionById(id: number) {
+    if (id < 0 || id >= showSessions.value.length) return
+    choiceSession(showSessions.value[id])
+}
+
+/**
+ * 滚动到选中的会话项
+ */
+function scrollToSelected() {
+    nextTick(() => {
+        if (!sessionItems.value) return
+        const selectedElement = sessionItems.value[selectId.value]
+        const container = sessionList.value!
+
+        if (selectedElement && container) {
+            const containerRect = container.getBoundingClientRect()
+            const elementRect = selectedElement.$el.getBoundingClientRect()
+
+            // 计算相对于容器的位置
+            const elementTop = elementRect.top - containerRect.top + container.scrollTop
+            const elementBottom = elementTop + elementRect.height
+
+            // 如果元素在可见区域上方
+            if (elementTop < container.scrollTop) {
+                container.scrollTop = elementTop
+            }
+            // 如果元素在可见区域下方
+            else if (elementBottom > container.scrollTop + container.clientHeight) {
+                container.scrollTop = elementBottom - container.clientHeight
+            }
+        }
+    })
+}
+
+/**
+ * 匹配到事件处理
+ * 会组织事件冒泡和默认行为
+ * @param e 事件
+ */
+function handleEvent(e: Event) {
+    e.stopPropagation()
+    e.preventDefault()
+}
+//#endregion
+
+//#region == 开启关闭 ====================================================================
+useEventListener(document, 'keydown', (e: KeyboardEvent) => {
+    let isOpen = false;
+    if(backend.platform === 'darwin') {
+        // macOS 使用 Command + E
+        isOpen = e.metaKey && e.key === 'e'
+    } else {
+        isOpen = e.ctrlKey && e.key === 'e'
+    }
+    if (isOpen) {
+        //开启
+        if (show.value) return
+        if (!login.status) return
+        if (hasPopBox()) return
+        handleEvent(e)
+        open()
+    }else if (e.key === 'Escape') {
+        // 关闭
+        if (!show.value) return
+        handleEvent(e)
+        close()
+    }else if (e.key === 'ArrowDown') {
+        // 下
+        if (!show.value) return
+        handleEvent(e)
+        selectId.value ++
+    }else if (e.key === 'ArrowUp') {
+        // 上
+        if (!show.value) return
+        handleEvent(e)
+        selectId.value --
+    }else if (e.key === 'Enter') {
+        // 确认
+        if (!show.value) return
+        handleEvent(e)
+        choiceSessionById(selectId.value)
+    }
+})
+//#endregion
+</script>

package/client/web/src/components/History.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="history-box">
+        <div v-if="history.record.length === 0" class="space">
+            <font-awesome-icon :icon="['fas', 'inbox']" />
+            <span>{{ $t('空空如也') }}</span>
+        </div>
+        <div v-else class="main">
+            <tiny-session-body
+                v-for="session in history.record"
+                :key="session.user_id ?? session.group_id"
+                :session="session"
+                @click="changeSession(session)" />
+        </div>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { Session } from '../function/elements/information';
+import { useChatStore } from '../state/chat';
+import { useSessionHistoryStore } from '../state/sessionHistory';
+import { useContactStore } from '../state/contact';
+import { nextTick } from 'vue';
+import TinySessionBody from './TinySessionBody.vue';
+
+const history = useSessionHistoryStore()
+const contactStore = useContactStore()
+const chatStore = useChatStore()
+
+/**
+ * 切换会话
+ * @param session
+ */
+function changeSession(session: Session) {
+    const id = session.user_id ?? session.group_id
+    if (id === chatStore.chatInfo.show.id) return
+
+    contactStore.baseOnMsgList.set(String(session.user_id ?? session.group_id), session)
+    // 切换到这个聊天
+    nextTick(() => {
+        const item = document.getElementById(
+            'user-' + (session.user_id ?? session.group_id),
+        )
+        if (item) {
+            item.click()
+        }
+    })
+}
+</script>

package/client/web/src/components/LazyLottie.vue

@@ -0,0 +1,82 @@
+<template>
+    <div ref="lottieContainer" :class="['lazy-lottie', {'loaded': loaded }]">
+        <Lottie
+            ref="lottieRef"
+            :animation-link="animationLink"
+            :title="title"
+            :auto-play="false"
+            @on-animation-loaded="loaded = true" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { Vue3Lottie as Lottie } from 'vue3-lottie'
+
+defineProps<{
+    animationLink: string
+    title?: string
+}>()
+
+const lottieContainer = ref<HTMLElement | null>(null)
+const lottieRef = ref<any>(null)
+const loaded = ref(false)
+let observer: IntersectionObserver | null = null
+
+const playAnimation = () => {
+    if (!lottieRef.value) return
+    try {
+        lottieRef.value.play?.()
+    } catch (e) {
+        // do nothing
+    }
+}
+
+const pauseAnimation = () => {
+    if (lottieRef.value) {
+        lottieRef.value.pause?.()
+    }
+}
+
+onMounted(() => {
+    if (!lottieContainer.value) return
+
+    observer = new IntersectionObserver(
+        (entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
+                    playAnimation()
+                } else if (entry.intersectionRatio < 0.1) {
+                    pauseAnimation()
+                }
+            })
+        },
+        {
+            rootMargin: '50px',
+            threshold: [0.1, 0.5, 0.9]
+        }
+    )
+
+    observer.observe(lottieContainer.value)
+})
+
+onUnmounted(() => {
+    pauseAnimation()
+    if (observer && lottieContainer.value) {
+        observer.unobserve(lottieContainer.value)
+        observer.disconnect()
+        observer = null
+    }
+})
+</script>
+
+<style scoped>
+.lazy-lottie {
+    display: inline-block;
+    min-height: 100px;
+    min-width: 100px;
+}
+.lazy-lottie.loaded {
+    background: transparent !important;
+}
+</style>

package/client/web/src/components/MergePan.vue

@@ -0,0 +1,127 @@
+<template>
+    <div :class="'merge-pan' + (chatStore.mergeMsgStack.length > 0 ? ' show' : '')">
+        <div @click="closeMergeMsg" />
+        <div class="ss-card">
+            <div>
+                <font-awesome-icon style="margin-top: 5px" :icon="['fas', 'message']" />
+                <span>{{ $t('合并消息') }}</span>
+                <font-awesome-icon v-if="stack.length <= 1" :icon="['fas', 'xmark']" @click="exitMergeMsg" />
+                <font-awesome-icon v-else :icon="['fas', 'angles-left']" @click="exitMergeMsg" />
+            </div>
+            <div v-if="nowData === undefined">
+                <!-- 无内容 -->
+            </div>
+            <TransitionGroup v-else :name="settingsStore.sysConfig.opt_fast_animation ? '' : 'msglist'" tag="div">
+                <template v-for="(msgIndex, index) in nowData.messageList" :key="'merge-' + nowData.forwardMsg.message[0].id + '-' + index">
+                    <NoticeBody v-if=" isShowTime( nowData.messageList[index - 1] ?
+                                    nowData.messageList[index - 1].time : undefined, msgIndex.time, index == 0)"
+                        :id="uuid()"
+                        :key="'notice-time-' + index"
+                        :data="{ sub_type: 'time', time: msgIndex.time }" />
+                    <!-- [已删除]消息 -->
+                    <NoticeBody
+                        v-else-if="isDeleteMsg(msgIndex)"
+                        :key="'delete-' + msgIndex.message_id"
+                        :data="{ sub_type: 'delete' }" />
+                    <!-- 合并转发消息忽略是不是自己的判定 -->
+                    <MsgBody
+                        :data="msgIndex"
+                        :type="'merge'"
+                        :image-list-header="mergeImgHead" />
+                </template>
+            </TransitionGroup>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { v4 as uuid } from 'uuid'
+    import { computed, ref, watch, onMounted } from 'vue'
+
+    import MsgBody from '../components/MsgBody.vue'
+    import NoticeBody from '../components/NoticeBody.vue'
+
+    import { Img } from '../function/model/img'
+    import { i18n } from '../main'
+    import { useSettingsStore } from '../state/settings'
+    import { type MergeStackData } from '../function/elements/information'
+    import { isDeleteMsg, isShowTime } from '../function/utils/msgUtil'
+    import { useChatStore } from '../state/chat'
+
+    defineOptions({ name: 'MergePan' })
+
+    const $t = i18n.global.t
+
+    const chatStore = useChatStore()
+    const settingsStore = useSettingsStore()
+    const stack = chatStore.mergeMsgStack
+    const nowData = ref<MergeStackData | undefined>()
+    const mergeImgHead = computed(() =>
+        Img.fromList((nowData.value?.imageList ?? []).map(item => item.img_url))
+    )
+
+    /**
+     * 退出一层合并转发弹窗
+     */
+    function exitMergeMsg() {
+        stack.length--
+    }
+
+    /**
+     * 关闭合并转发弹窗
+     */
+    function closeMergeMsg() {
+        stack.length = 0
+    }
+
+    function isMergeOpen() {
+        return stack.length > 0
+    }
+
+    defineExpose({ closeMergeMsg, isMergeOpen })
+
+    onMounted(() => {
+        watch(
+            () => chatStore.mergeMsgStack.length,
+            () => {
+                // 最后一个保留下来做展开关闭动画
+                if (stack.length === 0) {
+                    // 清理下垃圾
+                    chatStore.mergeMessageImgList = undefined
+                }
+                else nowData.value = stack.at(-1)
+            }
+        )
+        watch(
+            () => nowData.value?.imageList,
+            () => {
+                if (chatStore.mergeMsgStack.length === 0 || nowData.value?.imageList === undefined) return
+                chatStore.mergeMessageImgList = nowData.value.imageList
+            }
+        )
+    })
+</script>
+
+<style scoped>
+    /* 消息动画 */
+    .msglist-move {
+        transition: all 0.3s;
+    }
+
+    .msglist-enter-active {
+        transition: all 0.4s;
+    }
+
+    .msglist-leave-active {
+        transition: all 0.2s;
+    }
+
+    .msglist-enter-from {
+        transform: translateX(-50px);
+        opacity: 0;
+    }
+
+    .msglist-leave-to {
+        opacity: 0;
+    }
+</style>