koishi-plugin-chat-patch 3.0.2 → 5.0.0

package/client/web/src/components/msg-component/jsonComp/Mannounce.vue

@@ -0,0 +1,111 @@
+<template>
+    <div v-if="success" class="msg-json mannounce">
+        <div class="bottom-bar">
+            <font-awesome-icon :icon="['fas', 'bullhorn']" />
+            <span>{{ parsedContent.title }}</span>
+        </div>
+        <span>{{ parsedContent.content }}</span>
+        <img v-if="parsedContent.img" :src="parsedContent.img.url" alt=""
+            @click="viewImg()">
+    </div>
+    <span v-else class="msg-unknown">{{
+        '( ' + $t('加载失败') + ': ' + id + ' )'
+    }}</span>
+</template>
+
+<script setup lang="ts">
+import ViewerCom from '../../../components/ViewerCom.vue';
+import { Logger } from '../../../function/base'
+import { Img } from '../../../function/model/img'
+import { inject, ShallowRef } from 'vue'
+import * as z from 'zod'
+
+const { data: jsonData, id } = defineProps<{
+    data: string,
+    id: string,
+}>()
+
+const viewer = inject<{ viewer: ShallowRef<InstanceType<typeof ViewerCom> | null> }>('viewer')
+
+const base64Code = z.base64().transform((str) => {
+    const binary = atob(str)
+    const bytes = Uint8Array.from(binary, (ch) => ch.codePointAt(0)!)
+    return new TextDecoder().decode(bytes)
+})
+
+const mannounce = z
+    .object({
+        app: z.literal('com.tencent.mannounce'),
+        meta: z.object({
+            mannounce: z.object({
+                title: base64Code,
+                text: base64Code,
+                pic: z.optional(
+                    z.array(
+                        z.object({
+                            url: z.string(),
+                            width: z.number(),
+                            height: z.number(),
+                        }),
+                    ),
+                ),
+            }),
+        }),
+    })
+    .transform((o) => {
+        const out: {
+            title: string
+            content: string
+            img?: {
+                url: string
+                width: number
+                height: number
+            }
+        } = {
+            title: o.meta.mannounce.title,
+            content: o.meta.mannounce.text,
+        }
+        if (o.meta.mannounce.pic?.length === 1) {
+            out['img'] = {
+                url: `https://gdynamic.qpic.cn/gdynamic/${o.meta.mannounce.pic[0].url}/0`,
+                width: o.meta.mannounce.pic[0].width,
+                height: o.meta.mannounce.pic[0].height,
+            }
+        }
+        return out
+    })
+
+const json = JSON.parse(jsonData)
+const parsedData = mannounce.safeParse(json)
+const success = parsedData.success
+const parsedContent = parsedData.data!
+
+if (!success) {
+    new Logger().error(parsedData.error, 'Card Parse Error')
+}
+
+function viewImg(): void {
+    const viewerInstance = viewer?.viewer.value
+    if (!viewerInstance) return
+    viewerInstance.open(new Img(parsedContent.img!.url))
+}
+</script>
+
+<style scoped>
+.mannounce {
+    padding: 10px 5px 0 5px;
+}
+.mannounce > span {
+    opacity: 1 !important;
+}
+.bottom-bar {
+    margin: -15px -10px 10px -10px !important;
+    background: var(--color-main) !important;
+    border-radius: 7px !important;
+    color: var(--color-font-r);
+}
+.bottom-bar > svg,
+.bottom-bar > span {
+    opacity: 1 !important;
+}
+</style>

package/client/web/src/components/msg-component/jsonComp/Map.vue

@@ -0,0 +1,52 @@
+<template>
+    <div v-if="success" v-once class="msg-json">
+        <p>{{ parsedContent.title }}</p>
+        <ElAmap :center="[parsedContent.lng, parsedContent.lat]" :zoom="15">
+            <ElAmapMarker :position="[parsedContent.lng, parsedContent.lat]" />
+        </ElAmap>
+        <div class="bottom-bar">
+            <font-awesome-icon :icon="['fas', 'map-marker-alt']" />
+            <span>{{ parsedContent.name }}</span>
+        </div>
+    </div>
+    <span v-else class="msg-unknown">{{
+        '( ' + $t('加载失败') + ': ' + id + ' )'
+    }}</span>
+</template>
+
+<script setup lang="ts">
+import { Logger } from '../../../function/base'
+import { ElAmap, ElAmapMarker } from '@vuemap/vue-amap'
+import * as z from 'zod'
+
+const { data: jsonData, id } = defineProps<{
+    data: string,
+    id: string,
+}>()
+const map = z
+    .object({
+        app: z.literal('com.tencent.map'),
+        meta: z.object({
+            'Location.Search': z.object({
+                name: z.string(),
+                address: z.string(),
+                lat: z.coerce.number(),
+                lng: z.coerce.number(),
+            }),
+        }),
+    })
+    .transform((o) => ({
+        name: o.meta['Location.Search'].name,
+        title: o.meta['Location.Search'].address,
+        lat: o.meta['Location.Search'].lat,
+        lng: o.meta['Location.Search'].lng,
+    }))
+
+const json = JSON.parse(jsonData)
+const parsedData = map.safeParse(json)
+const success = parsedData.success
+const parsedContent = parsedData.data!
+if (!success) {
+    new Logger().error(parsedData.error, 'Card Parse Error')
+}
+</script>

package/client/web/src/components/msg-component/jsonComp/Miniapp.lua.vue

@@ -0,0 +1,53 @@
+<template>
+    <div v-if="success" class="msg-json miniapp-card" @click="openLink(parsedContent.jumpUrl)">
+        <p>{{ parsedContent.title }}</p>
+        <img :src="parsedContent.img" alt="">
+        <div class="bottom-bar">
+            <img :src="parsedContent.icon" alt="">
+            <span>{{ parsedContent.name }}</span>
+        </div>
+    </div>
+    <span v-else class="msg-unknown">{{
+        '( ' + $t('加载失败') + ': ' + id + ' )'
+    }}</span>
+</template>
+
+<script setup lang="ts">
+import { Logger } from '../../../function/base'
+import { openLink } from '../../../function/utils/appUtil'
+import * as z from 'zod'
+
+const { data: jsonData, id } = defineProps<{
+    data: string,
+    id: string,
+}>()
+
+const miniapp = z
+    .object({
+        app: z.literal('com.tencent.miniapp.lua'),
+        meta: z.object({
+            miniapp: z.object({
+                title: z.string(),
+                jumpUrl: z.string(),
+                preview: z.string(),
+                tagIcon: z.string(),
+                tag: z.string(),
+            }),
+        }),
+    })
+    .transform((o) => ({
+        title: o.meta.miniapp.title,
+        jumpUrl: o.meta.miniapp.jumpUrl,
+        img: o.meta.miniapp.preview,
+        icon: o.meta.miniapp.tagIcon,
+        name: o.meta.miniapp.tag,
+    }))
+
+const json = JSON.parse(jsonData)
+const parsedData = miniapp.safeParse(json)
+const success = parsedData.success
+const parsedContent = parsedData.data!
+if (!success) {
+    new Logger().error(parsedData.error, 'Card Parse Error')
+}
+</script>

package/client/web/src/components/msg-component/jsonComp/Miniapp.vue

@@ -0,0 +1,69 @@
+<template>
+    <div v-if="success" class="msg-json miniapp-card" @click="openLink(parsedContent.jumpUrl ?? '')">
+        <p>{{ parsedContent.title }}</p>
+        <img :src="parsedContent.img" alt="">
+        <div class="bottom-bar">
+            <img :src="parsedContent.icon" alt="">
+            <span>{{ parsedContent.name }}</span>
+        </div>
+    </div>
+    <span v-else class="msg-unknown">{{
+        '( ' + $t('加载失败') + ': ' + id + ' )'
+    }}</span>
+</template>
+
+<script setup lang="ts">
+import { Logger } from '../../../function/base'
+import { openLink } from '../../../function/utils/appUtil'
+import * as z from 'zod'
+
+const { data: jsonData, id } = defineProps<{
+    data: string,
+    id: string,
+}>()
+
+const detailSchema = z.object({
+    title: z.string(),
+    desc: z.string(),
+    icon: z.string(),
+    preview: z.string(),
+    qqdocurl: z.string().optional(),
+    url: z.string().optional(),
+}).transform((o) => ({
+    title: o.desc,
+    name: o.title,
+    icon: o.icon,
+    img: o.preview,
+    jumpUrl: o.qqdocurl ?? o.url,
+}))
+
+const invitationSchema = z.object({
+    title: z.string(),
+    name: z.string(),
+    icon: z.string(),
+    imageUrl: z.string(),
+    path: z.string().optional(),
+}).transform((o) => ({
+    title: o.title,
+    name: o.name,
+    icon: o.icon,
+    img: o.imageUrl,
+    jumpUrl: o.path,
+}))
+
+const miniapp = z.object({
+        app: z.literal('com.tencent.miniapp_01'),
+        meta: z.union([
+            z.object({ detail_1: detailSchema, }).transform(v => v.detail_1),
+            z.object({ invitation_1: invitationSchema, }).transform(v => v.invitation_1),
+        ]),
+    }).transform(o => o.meta)
+
+const json = JSON.parse(jsonData)
+const parsedData = miniapp.safeParse(json)
+const success = parsedData.success
+const parsedContent = parsedData.data!
+if (!success) {
+    new Logger().error(parsedData.error, 'Card Parse Error')
+}
+</script>

package/client/web/src/components/msg-component/jsonComp/Music.lua.vue

@@ -0,0 +1,135 @@
+<template>
+    <div v-if="success" class="msg-json">
+        <div class="music-data">
+            <div @click="openLink(parsedContent.jumpUrl)">
+                <p>{{ parsedContent.title }}</p>
+                <span>{{ parsedContent.desc }}</span>
+            </div>
+            <img :src="parsedContent.img" alt="">
+            <font-awesome-icon
+                :icon="['fas', 'play']"
+                :class="{ light: lightColor }"
+                @click="sendPlay" />
+        </div>
+        <div class="bottom-bar">
+            <img :src="parsedContent.icon" alt="">
+            <span>{{ parsedContent.name }}</span>
+        </div>
+    </div>
+    <span v-else class="msg-unknown">{{
+        '( ' + $t('加载失败') + ': ' + id + ' )'
+    }}</span>
+</template>
+
+<script setup lang="ts">
+import * as z from 'zod'
+
+import { ref } from 'vue'
+import { addMusic } from '../../../components/MusicPlayer.vue'
+import { Logger } from '../../../function/base'
+import { openLink } from '../../../function/utils/appUtil'
+import { getForegroundToneGridFromImageUrl } from '../../../function/utils/systemUtil'
+import { backend } from '../../../runtime/backend'
+
+const { data: jsonData, id } = defineProps<{
+    data: string,
+    id: string,
+}>()
+
+const music = z
+    .object({
+        app: z.literal('com.tencent.music.lua'),
+        meta: z.object({
+            music: z.object({
+                title: z.string(),
+                desc: z.string(),
+                jumpUrl: z.string(),
+                musicUrl: z.string(),
+                preview: z.string(),
+                tagIcon: z.string(),
+                tag: z.string(),
+            }),
+        }),
+    })
+    .transform((o) => ({
+        title: o.meta.music.title,
+        desc: o.meta.music.desc,
+        jumpUrl: o.meta.music.jumpUrl,
+        musicUrl: o.meta.music.musicUrl,
+        img: o.meta.music.preview,
+        icon: o.meta.music.tagIcon,
+        name: o.meta.music.tag,
+    }))
+const json = JSON.parse(jsonData)
+const parsedData = music.safeParse(json)
+const success = parsedData.success
+const parsedContent = parsedData.data!
+if (!success) {
+    new Logger().error(parsedData.error, 'Card Parse Error')
+}
+
+const getType = () => {
+    switch(parsedContent.name) {
+        case '网易云音乐': return {
+            type: 'music163',
+            data: parsedContent.jumpUrl.match(/id=(\d+)/)?.[1]
+        }
+        default: return {
+            type: 'default',
+            data: undefined
+        }
+    }
+}
+
+const lightColor = ref(true)
+ getForegroundToneGridFromImageUrl(backend.proxyUrl(parsedContent.img), 0.4).then(tone => {
+    lightColor.value = tone[1][1] === 'light'
+ })
+
+const sendPlay = () => {
+    const typeInfo = getType()
+    addMusic({
+        title: parsedContent.title,
+        author: [parsedContent.desc],
+        url: parsedContent.musicUrl,
+        type: typeInfo.type as any,
+        data: typeInfo.data,
+        cover: parsedContent.img,
+    }, 'current', true)
+}
+</script>
+
+<style scoped>
+.music-data {
+    display: flex;
+    align-items: center;
+    margin-right: -60px;
+}
+.music-data img {
+    width: 60px;
+    height: 60px;
+    border-radius: 7px;
+    margin-left: 20px;
+}
+.music-data svg {
+    --size: 20px;
+    color: #545454;
+    width: var(--size);
+    height: var(--size);
+    padding: calc(calc(60px - var(--size)) / 2);
+    transform: translateX(-100%);
+}
+.music-data svg.light {
+    color: #e5e5e5;
+}
+.music-data p {
+    text-wrap: nowrap;
+    font-weight: bold;
+    margin: 0;
+}
+.music-data span {
+    text-wrap: nowrap;
+    font-size: 0.8rem;
+    opacity: 0.7;
+}
+</style>

package/client/web/src/components/msg-component/jsonComp/Tuwen.lua.vue

@@ -0,0 +1,56 @@
+<template>
+    <div v-if="success" class="msg-json" @click="openLink(parsedContent.jumpUrl)">
+        <p>{{ parsedContent.title }}</p>
+        <span>{{ parsedContent.desc }}</span>
+        <img :src="parsedContent.img" alt="">
+        <div class="bottom-bar">
+            <img :src="parsedContent.icon" alt="">
+            <span>{{ parsedContent.name }}</span>
+        </div>
+    </div>
+    <span v-else class="msg-unknown">{{
+        '( ' + $t('加载失败') + ': ' + id + ' )'
+    }}</span>
+</template>
+
+<script setup lang="ts">
+import { Logger } from '../../../function/base';
+import { openLink } from '../../../function/utils/appUtil'
+import * as z from 'zod'
+
+const { data: jsonData, id } = defineProps<{
+    data: string,
+    id: string,
+}>()
+
+const tuwen = z
+    .object({
+        app: z.literal('com.tencent.tuwen.lua'),
+        meta: z.object({
+            news: z.object({
+                title: z.string(),
+                desc: z.string(),
+                jumpUrl: z.string(),
+                preview: z.string(),
+                tagIcon: z.string(),
+                tag: z.string(),
+            }),
+        }),
+    })
+    .transform((o) => ({
+        title: o.meta.news.title,
+        desc: o.meta.news.desc,
+        jumpUrl: o.meta.news.jumpUrl,
+        img: o.meta.news.preview,
+        icon: o.meta.news.tagIcon,
+        name: o.meta.news.tag,
+    }))
+
+const json = JSON.parse(jsonData)
+const parsedData = tuwen.safeParse(json)
+const success = parsedData.success
+const parsedContent = parsedData.data!
+if (!success) {
+    new Logger().error(parsedData.error, 'Card Parse Error')
+}
+</script>

package/client/web/src/components/notice-component/MealHungryPan.vue

@@ -0,0 +1,119 @@
+<!--
+ * @FileDescription: 饿饿！饭饭！这是求赞助弹窗模板
+ * @Author: Stapxs
+ * @Date: 2025/09/24
+ * @Version: 1.0
+-->
+
+<template>
+    <div class="meal-hungry-pan">
+        <span v-if="times">{{ $t('好耶！Stapxs QQ Lite 已经被打开 {times} 次了！', { times }) }}</span>
+        <div>
+            <div class="hun-text">
+                <span>饿饿！饭饭！</span>
+                <a>非常感谢使用本项目，并给予关注与支持；你的信任是我持续改进与维护的最大动力。</a>
+                <a>本项目驱动自咖啡，如果你觉得这个项目帮到了你，欢迎赞助我一杯咖啡！</a>
+                <a style="
+                    font-size: 0.8rem;
+                    text-align: center;
+                    display: block;
+                    margin-top: 15px;
+                    color: var(--color-font-2);
+                    ">-- 表情包：Copyright @ 鹰角网络 --</a>
+                <br>
+                <a style="
+                    text-align: center;
+                    font-size: 0.8rem;
+                    text-wrap: nowrap;
+                    color: var(--color-font-1);
+                    font-family: meow, sans-serif;
+                    ">戳下面戳下面，打开去看看嘛—— (｡•́︿•̀｡)</a>
+            </div>
+            <div>
+                <div class="meme" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { i18n } from '../../main'
+
+defineOptions({ name: 'MealHungryPan' })
+
+defineProps<{ times?: number | string }>()
+
+const $t = i18n.global.t
+</script>
+
+<style>
+@font-face {
+  src: url('../../assets/font/方正喵呜体.ttf') format('truetype');
+  font-family: 'meow';
+  font-weight: normal;
+  font-style: normal;
+}
+
+.meal-hungry-pan {
+    background-image: url('../../assets/img/cakes.svg');
+    padding: 50px 30px 20px 30px !important;
+    margin: -45px -15px 0 -15px;
+    border-radius: 7px 7px 0 0;
+    background-size: 200%;
+    z-index: -1;
+}
+.meal-hungry-pan > span {
+    background: rgba(var(--color-card-1-rgb), 0.5);
+    backdrop-filter: blur(10px);
+    margin-bottom: 10px;
+    border-radius: 7px;
+    text-align: center;
+    display: block;
+    padding: 10px;
+}
+.meal-hungry-pan > div {
+    flex-direction: row;
+    display: flex;
+}
+
+.meal-hungry-pan > div > div:last-child {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+}
+.hun-text {
+    color: var(--color-font);
+    width: 40vw;
+}
+.hun-text > span {
+    font-family: meow, sans-serif;
+    font-weight: bold;
+    font-size: 1.9rem;
+    display: block;
+}
+.hun-text > a {
+    margin-top: 10px;
+    font-size: 0.9rem;
+    display: block;
+}
+
+.meme {
+    background-image: url('../../assets/img/期待.png');
+    background-size: cover;
+    width: 160px;
+    height: 160px;
+}
+
+@media (max-width: 500px) {
+    .meal-hungry-pan > div {
+        flex-direction: column;
+    }
+    .meal-hungry-pan > div > div:last-child {
+        justify-content: right;
+        display: flex;
+    }
+    .hun-text {
+        width: 100%;
+    }
+}
+</style>

package/client/web/src/components/tooltip/CustomFaceTooltip.vue

@@ -0,0 +1,22 @@
+<template>
+    <img :src="url" :alt="$t('预览图片加载失败')" class="custom-face-tooltip">
+</template>
+
+<script setup lang="ts">
+const { url } = defineProps<{ url: string }>()
+</script>
+
+<style scoped lang="css">
+.tooltip-enter-active, .tooltip-leave-active {
+    transition: opacity 0.2s, transform 0.2s;
+    transform-origin: bottom;
+}
+.tooltip-enter-from, .tooltip-leave-to {
+    opacity: 0;
+    transform: translate(-50%, calc(-100% - 0.8rem)) scale(0.5) scaleY(0);
+}
+.tooltip-enter-to, .tooltip-leave-from {
+    opacity: 1;
+    transform: translate(-50%, calc(-100% - 0.8rem)) scale(0.5) scaleY(1);
+}
+</style>

package/client/web/src/components/tooltip/Tooltip.vue

@@ -0,0 +1,50 @@
+<template>
+    <component :is="compData.comp"
+        ref="body"
+        v-bind="compData.props"
+        v-model="model"
+        class="tooltip"
+        :style="{ position: 'absolute', left: posInfo.x + 'px', top: posInfo.y + 'px' }"
+        v-on="compData.emit || {}" />
+</template>
+
+<script setup lang="ts" generic="T extends Component">
+import { TooltipInfo } from '../../function/tooltip'
+import { type Component, onMounted, shallowReactive, useTemplateRef } from 'vue'
+
+const { compData, pos } = defineProps<TooltipInfo<T>>()
+
+const model = defineModel()
+
+const body = useTemplateRef('body')
+
+const posInfo = shallowReactive({
+    x: 0,
+    y: 0,
+})
+
+onMounted(async ()=>{
+    if (!body.value) return
+    posInfo.x = pos.x
+    posInfo.y = pos.y
+    // 高度
+    const el = (body.value as any).$el as HTMLElement
+    const panHeight = el.clientHeight
+    if (pos.y < panHeight + 20) {
+        posInfo.y = panHeight + 20
+    }
+    // 宽度
+    const menuWidth = el.clientWidth
+    const bodyWidth = document.body.clientWidth
+    if (pos.x + menuWidth > bodyWidth - 20) {
+        posInfo.x = bodyWidth - menuWidth - 10
+    }
+})
+</script>
+
+<style>
+.tooltip {
+    z-index: 50;
+    transition: left 0s, top 0s;
+}
+</style>

package/client/web/src/components/tooltip/Tooltips.vue

@@ -0,0 +1,14 @@
+<template>
+    <Teleport to="body">
+        <TransitionGroup name="tooltip">
+            <Tooltip v-for="data in tooltipList" :key="data.id"
+                v-bind="data"
+                v-model="data.compData.model" />
+        </TransitionGroup>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import { tooltipList } from '../../function/tooltip'
+import Tooltip from './Tooltip.vue'
+</script>