koishi-plugin-chat-patch 3.0.2 → 5.0.0

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

@@ -0,0 +1,168 @@
+<!--
+ * @FileDescription: 通知消息模板
+ * @Author: Stapxs
+ * @Date: 2022/12/04
+ * @Version: 1.0
+-->
+
+<template>
+    <div :id="'notice-' + id"
+        class="note">
+        <div v-if="data.notice_type && data.notice_type.indexOf('recall') >= 0" class="note-recall note-base">
+            <a>{{ info.name }}</a>
+            <span>{{ $t('撤回了一条消息') }}</span>
+            <div />
+            <a
+                v-if="data.originMsg"
+                @click="$emit('reedit', data.originMsg)">
+                {{ $t('重新编辑') }}
+            </a>
+        </div>
+        <div v-else-if="data.notice_type == 'group_ban'" class="note-ban note-base">
+            <template v-if="data.sub_type === 'ban'">
+                <template v-if="isMe(data.user_id)">
+                    <span>{{ $t('成员类型_admin') }}</span>
+                    <a>&nbsp;{{ getName(data.operator_id) }}&nbsp;</a>
+                    <span>{{ $t('禁言了你') }}</span>
+                    <span>&nbsp;{{ fTime(data.duration) }}</span>
+                </template>
+                <template v-else>
+                    <span>{{ $t('管理员禁言了') }}</span>
+                    <a>&nbsp;{{ getName(data.user_id) }}&nbsp;</a>
+                    <span>{{ fTime(data.duration) }}</span>
+                </template>
+            </template>
+            <span v-else>{{
+                $t('管理员解除了 {name} 的禁言', { name: isMe(data.user_id) ? $t('你') : getName(data.user_id)})
+            }}</span>
+        </div>
+        <div v-else-if="data.sub_type === 'delete'" class="note-recall note-base">
+            <span>{{ $t('这条消息迷失在虚空里了') }}</span>
+            <div />
+        </div>
+        <div v-else-if="data.sub_type === 'poke'"
+            class="note-notify note-base"
+            v-html="data.str + '<div class=\'space\'</div>'" />
+        <div v-else-if="data.sub_type === 'time' && data.time != undefined"
+            class="note-time note-base">
+            <a>{{ Intl.DateTimeFormat(
+                trueLang,
+                getTimeConfig(new Date(data.time * 1000)),
+            ).format(new Date(data.time * 1000))
+            }}</a>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { ref, onMounted } from 'vue'
+    import { i18n } from '../main'
+    import { useAuthStore } from '../state/auth'
+    import { useChatStore } from '../state/chat'
+    import {
+        getTimeConfig,
+        getTrueLang,
+    } from '../function/utils/systemUtil'
+    import { pokeAnime } from '../function/utils/msgUtil'
+    import { backend } from '../runtime/backend'
+
+    const $t = i18n.global.t
+
+    const authStore = useAuthStore()
+    const chatStore = useChatStore()
+
+    defineOptions({ name: 'NoticeBody' })
+
+    const props = defineProps(['data', 'id'])
+    defineEmits(['reedit'])
+
+    const trueLang = getTrueLang()
+    const info = ref(props.data) as { [key: string]: any }
+
+    function isMe(id: number) {
+        return authStore.loginInfo.uin === id
+    }
+
+    function getName(id: number) {
+        const back = chatStore.chatInfo.info.group_members.filter(
+            (item) => {
+                return item.user_id === id
+            },
+        )
+        if (back.length === 1) {
+            return back[0].card === '' || back[0].card == null? back[0].nickname: back[0].card
+        }
+        return id
+    }
+
+    function fTime(time: number) {
+        // 将秒数转换为可阅读的时间，最大单位天
+        const day = Math.floor(time / 86400)
+        const hour = Math.floor((time % 86400) / 3600)
+        const minute = Math.floor((time % 3600) / 60)
+        const second = time % 60
+
+        let back = ''
+        if (day > 0) {
+            back += `${day} ${$t('天')} `
+        }
+        if (hour > 0) {
+            back += `${hour} ${$t('小时')} `
+        }
+        if (minute > 0) {
+            back += `${minute} ${$t('分钟')} `
+        }
+        if (second > 0) {
+            back += `${second} ${$t('秒')} `
+        }
+        return back
+    }
+
+    onMounted(async () => {
+        let windowInfo = null as {
+            x: number
+            y: number
+            width: number
+            height: number
+        } | null
+        windowInfo = await backend.call(undefined, 'win:getWindowInfo', true)
+        // 补全撤回者信息
+        if (
+            info.value.notice_type &&
+            info.value.notice_type.indexOf('recall') >= 0
+        ) {
+            if (chatStore.chatInfo.show.type === 'group') {
+                const id = info.value.operator_id
+                // 寻找群成员信息
+                if (chatStore.chatInfo.info.group_members !== undefined) {
+                    const back =
+                        chatStore.chatInfo.info.group_members.filter(
+                            (item) => {
+                                return item.user_id === Number(id)
+                            },
+                        )
+                    if (back.length === 1) {
+                        info.value.name =
+                            back[0].card === '' || back[0].card == null? back[0].nickname: back[0].card
+                    } else {
+                        info.value.name = id
+                    }
+                } else {
+                    info.value.name = id
+                }
+            } else {
+                info.value.name = chatStore.chatInfo.show.name
+            }
+        }
+        // poke 通知创建对应的动画
+        // PS：只有最后一条 poke 通知会触发动画，避免反复触发动画
+        if (info.value.sub_type === 'poke' && info.value.pokeMe &&
+            info.value == chatStore.messageList[chatStore.messageList.length - 1]) {
+                let item = document.getElementById('app')
+                if (backend.isDesktop()) {
+                    item = document.getElementById('notice-' + props.id)?.getElementsByClassName('space')[0] as HTMLElement
+                }
+                pokeAnime(item, windowInfo)
+        }
+    })
+</script>

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

@@ -0,0 +1,150 @@
+<template>
+    <div class="qzone-permission-pan">
+        <label :for="permissionModeInputId" class="sr-only">{{ $t('说说可见范围') }}</label>
+        <select :id="permissionModeInputId"
+            v-model="permission.mode"
+            class="qzone-permission-select">
+            <option value="public">
+                {{ $t('所有人可见') }}
+            </option>
+            <option value="friends">
+                {{ $t('好友可见') }}
+            </option>
+            <option value="allow_some">
+                {{ $t('部分好友可见') }}
+            </option>
+            <option value="private">
+                {{ $t('仅自己可见') }}
+            </option>
+            <option value="deny_some">
+                {{ $t('部分好友不可见') }}
+            </option>
+        </select>
+        <template v-if="showList">
+            <label for="qzone-permission-search" class="sr-only">{{ $t('搜索联系人') }}</label>
+            <input id="qzone-permission-search"
+                v-model="searchText"
+                class="ss-input qzone-permission-search"
+                :placeholder="$t('搜索 ……')">
+            <div class="qzone-permission-list">
+                <div v-for="session in showSessions"
+                    :key="session.user_id"
+                    class="qzone-permission-item"
+                    @click="toggleSession(session)">
+                    <TinySessionBody :session="session as any" :selected="isSelected(session)" />
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { computed, reactive, ref } from 'vue'
+    import TinySessionBody from '../components/TinySessionBody.vue'
+    import { UserGroupElem } from '../function/elements/information'
+    import { matchPinyin } from '../function/utils/pinyin'
+    import { i18n } from '../main'
+
+    defineOptions({ name: 'QzonePermissionPan' })
+
+    const permission = defineModel<{
+        mode: 'public' | 'friends' | 'allow_some' | 'private' | 'deny_some'
+        userIds: number[]
+    }>({ required: true })
+
+    const { sessions } = defineProps<{
+        sessions: UserGroupElem[]
+    }>()
+
+    const $t = i18n.global.t
+    const searchText = ref('')
+    const selectedMap = reactive(new Set<number>())
+    const permissionModeInputId = `qzone-permission-mode-${Math.random().toString(36).slice(2, 9)}`
+    const showList = computed(() => {
+        return ['allow_some', 'deny_some'].includes(permission.value.mode)
+    })
+
+    for (const userId of permission.value.userIds) {
+        selectedMap.add(userId)
+    }
+
+    const showSessions = computed(() => {
+        const value = searchText.value.trim().toLowerCase()
+        const filteredSessions = !value ? sessions : sessions.filter((session) => {
+            const name = `${session.nickname}${session.remark ?? ''}`.toLowerCase()
+            if (name.includes(value)) return true
+            const id = Number(session.user_id)
+            if (String(id).includes(value)) return true
+            if (session.py_name && matchPinyin(session.py_name, value)) return true
+            return false
+        })
+
+        return [...filteredSessions].sort((a, b) => {
+            const aSelected = selectedMap.has(getSessionId(a))
+            const bSelected = selectedMap.has(getSessionId(b))
+            if (aSelected === bSelected) return 0
+            return aSelected ? -1 : 1
+        })
+    })
+
+    function getSessionId(session: UserGroupElem) {
+        return Number(session.user_id)
+    }
+
+    function isSelected(session: UserGroupElem) {
+        return selectedMap.has(getSessionId(session))
+    }
+
+    function toggleSession(session: UserGroupElem) {
+        const id = getSessionId(session)
+        if (selectedMap.has(id)) {
+            selectedMap.delete(id)
+        } else {
+            selectedMap.add(id)
+        }
+        permission.value.userIds = Array.from(selectedMap.values())
+    }
+</script>
+
+<style scoped>
+    .qzone-permission-pan {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        min-height: 220px;
+    }
+
+    .qzone-permission-search {
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    .qzone-permission-list {
+        overflow-y: scroll;
+        overflow-x: hidden;
+        min-height: 200px;
+        max-height: 30vh;
+        width: 40vw;
+        padding: 8px;
+    }
+
+    .qzone-permission-item {
+        width: 100%;
+        cursor: pointer;
+        border-radius: 8px;
+    }
+
+    .qzone-permission-item + .qzone-permission-item {
+        margin-top: 6px;
+    }
+
+    .qzone-permission-select {
+        background: var(--color-card);
+        height: 35px;
+        color: var(--color-font);
+        border: none;
+        border-radius: 8px;
+        padding: 10px 12px;
+        font-size: 0.9rem;
+    }
+</style>

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

@@ -0,0 +1,190 @@
+<template>
+    <div class="raw-render-preview-pan">
+        <div class="raw-render-preview-pane">
+            <span v-if="rawRenderPreviewLoading" class="raw-render-preview-tip">
+                {{ $t('正在处理原始消息……') }}
+            </span>
+            <span v-else-if="rawRenderPreviewError" class="raw-render-preview-error">
+                {{ rawRenderPreviewError }}
+            </span>
+            <span v-else-if="rawRenderPreviewList.length === 0" class="raw-render-preview-tip">
+                {{ $t('还没有可预览的消息') }}
+            </span>
+            <div v-else class="raw-render-preview-msg-list">
+                <MsgBody
+                    v-for="(item, index) in rawRenderPreviewList"
+                    :key="item.message_id ?? `raw-render-preview-${index}`"
+                    :data="item"
+                    :type="'body'" />
+            </div>
+        </div>
+        <div class="raw-render-preview-title">
+            <label for="raw-render-preview-textarea">{{ $t('原始消息') }}</label>
+        </div>
+        <textarea
+            id="raw-render-preview-textarea"
+            v-model="rawRenderPreviewText"
+            class="raw-render-preview-textarea ss-input"
+            @keydown.ctrl.enter.prevent="renderRawPreview" />
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { ref } from 'vue'
+
+    import MsgBody from '../components/MsgBody.vue'
+    import { normalizeMessagesForPreview } from '../function/msg'
+    import { getMsgRawTxt } from '../function/utils/msgUtil'
+    import { useAuthStore } from '../state/auth'
+    import { i18n } from '../main'
+
+    defineOptions({ name: 'RawMsgRenderPreviewPan' })
+
+    const {
+        data,
+    } = defineProps<{
+        data?: {
+            text?: string
+        }
+    }>()
+
+    const authStore = useAuthStore()
+    const $t = i18n.global.t
+
+    const rawRenderPreviewText = ref(data?.text ?? '')
+    const rawRenderPreviewLoading = ref(false)
+    const rawRenderPreviewError = ref('')
+    const rawRenderPreviewList = ref<any[]>([])
+
+    function buildRawRenderFallbackMessage(msg: any, index: number) {
+        const previewMsg = { ...msg }
+        const senderId = Number(
+            previewMsg.sender?.user_id
+            ?? previewMsg.user_id
+            ?? authStore.loginInfo.uin
+            ?? 0,
+        )
+
+        previewMsg.message_id ??= `raw-render-preview-${index}`
+        previewMsg.time = Number(previewMsg.time ?? Math.floor(Date.now() / 1000))
+        previewMsg.post_type ??= 'message'
+        previewMsg.message = Array.isArray(previewMsg.message) ? previewMsg.message : []
+        previewMsg.sender = {
+            user_id: senderId,
+            nickname: previewMsg.sender?.nickname
+                ?? previewMsg.nickname
+                ?? authStore.loginInfo.nickname
+                ?? $t('预览消息'),
+            card: previewMsg.sender?.card ?? '',
+            ...previewMsg.sender,
+        }
+        previewMsg.raw_message ??= getMsgRawTxt(previewMsg)
+
+        return previewMsg
+    }
+
+    async function renderRawPreview() {
+        if (rawRenderPreviewText.value.trim() === '') {
+            rawRenderPreviewList.value = []
+            rawRenderPreviewError.value = ''
+            return
+        }
+
+        rawRenderPreviewLoading.value = true
+        rawRenderPreviewError.value = ''
+
+        try {
+            const raw = JSON.parse(rawRenderPreviewText.value)
+            const list = (await normalizeMessagesForPreview(raw))
+                .map((item, index) => buildRawRenderFallbackMessage(item, index))
+                .filter((item) => Array.isArray(item.message))
+
+            rawRenderPreviewList.value = list
+            if (list.length === 0) {
+                rawRenderPreviewError.value = $t('当前原始消息中没有可渲染的消息体')
+            }
+        } catch (error) {
+            rawRenderPreviewList.value = []
+            rawRenderPreviewError.value = error instanceof Error? error.message: $t('处理原始消息失败')
+        } finally {
+            rawRenderPreviewLoading.value = false
+        }
+    }
+
+    if (rawRenderPreviewText.value !== '') {
+        void renderRawPreview()
+    }
+</script>
+
+<style scoped>
+    .raw-render-preview-pan {
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+        width: calc(100% - 70px);
+    height: calc(100vh - 90px);
+    overflow-y: scroll;
+    overflow-x: hidden;
+    margin-top: 10px;
+    padding: 0 50px 20px 20px !important;
+    }
+
+    .raw-render-preview-title {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 0.9rem;
+        font-weight: 700;
+    }
+
+    .raw-render-preview-title span:last-child {
+        color: var(--color-font-2);
+        font-size: 0.8rem;
+        font-weight: 500;
+    }
+
+    .raw-render-preview-textarea,
+    .raw-render-preview-pane {
+        border: unset;
+        border-radius: 7px;
+    }
+
+    .raw-render-preview-textarea {
+        width: 100%;
+        min-height: 260px;
+        padding: 16px;
+        background: var(--color-bg);
+        color: var(--color-font);
+        resize: vertical;
+        font-family: monospace;
+        font-size: 0.85rem;
+        line-height: 1.6;
+    }
+
+    .raw-render-preview-pane {
+        background: transparent;
+    }
+
+    .raw-render-preview-msg-list {
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+    }
+
+    .raw-render-preview-tip,
+    .raw-render-preview-error {
+        display: block;
+        font-size: 0.9rem;
+        line-height: 1.6;
+    }
+
+    .raw-render-preview-tip {
+        color: var(--color-font-2);
+    }
+
+    .raw-render-preview-error {
+        color: var(--color-red);
+        white-space: pre-wrap;
+    }
+</style>