koishi-plugin-chat-patch 3.0.2 → 5.0.0

package/client/web/src/pages/chat-view/SystemNotice.vue

@@ -0,0 +1,171 @@
+<!--
+ * @FileDescription: 聊天面板页面（系统消息面板）
+ * @Author: Stapxs
+ * @Date: 2023/01/09
+ * @Version: 1.0 - 初始版本
+ * @Description: 此面板为点击系统消息后单独显示的面板，用于覆盖聊天面板
+-->
+
+<template>
+    <div id="chat-pan"
+        :class=" 'chat-pan sys-not-pan' +
+            (uiStore.openSideBar ? ' open' : '') +
+            (['linux', 'win32'].includes(backend.platform ?? '') ? ' withBar' : '')">
+        <div>
+            <font-awesome-icon :icon="['fas', 'angle-left']" @click="exit" />
+            <span>{{ $t('系统消息') }}</span>
+        </div>
+        <div class="sys-not-list">
+            <template v-for="(notice, index) in contactStore.systemNoticesList"
+                :key="'sysNot-' + index">
+                <div v-if="notice.request_type == 'friend'">
+                    <div>
+                        <img :src="notice.avatar || '/img/icons/icon.svg'">
+                        <div>
+                            <span>{{ notice.user_id }}
+                                {{ $t('请求加为好友') }}</span>
+                            <a>{{
+                                Intl.DateTimeFormat(trueLang, {
+                                    year: 'numeric',
+                                    month: 'short',
+                                    day: 'numeric',
+                                    hour: 'numeric',
+                                    minute: 'numeric',
+                                }).format(new Date(notice.time * 1000))
+                            }}</a>
+                            <a>{{ $t('留言：') + notice.comment }}</a>
+                        </div>
+                    </div>
+                    <div>
+                        <button class="ss-button"
+                            @click="dealFriend(notice, false)">
+                            {{ $t('拒绝') }}
+                        </button>
+                        <button class="ss-button"
+                            @click="dealFriend(notice, true)">
+                            {{ $t('同意') }}
+                        </button>
+                    </div>
+                </div>
+                <div v-else-if="notice.request_type == 'group'">
+                    <div v-if="notice.sub_type == 'add'">
+                        <img :src="notice.avatar || '/img/icons/icon.svg'">
+                        <div>
+                            <span>{{ getName(notice.user_id) }}
+                                {{ $t('申请加入群聊') }}
+                                {{ getName(notice.group_id) }}</span>
+                            <a>{{
+                                Intl.DateTimeFormat(trueLang, {
+                                    year: 'numeric',
+                                    month: 'short',
+                                    day: 'numeric',
+                                    hour: 'numeric',
+                                    minute: 'numeric',
+                                }).format(new Date(notice.time * 1000))
+                            }}</a>
+                            <a>{{ $t('留言：') + notice.comment }}</a>
+                        </div>
+                    </div>
+                    <div v-else>
+                        <!-- TODO：这情况会出现在 notice 里？记不太清了，先放着吧 😭 -->
+                        <img :src="notice.group_avatar || '/img/icons/icon.svg'">
+                        <div>
+                            <span>{{ getName(notice.user_id) }}
+                                {{ $t('邀请你加入群聊') }}
+                                {{ notice.group_id }}</span>
+                            <a>{{
+                                Intl.DateTimeFormat(trueLang, {
+                                    year: 'numeric',
+                                    month: 'short',
+                                    day: 'numeric',
+                                    hour: 'numeric',
+                                    minute: 'numeric',
+                                }).format(new Date(notice.time * 1000))
+                            }}</a>
+                            <a>{{ $t('留言：') + notice.comment }}</a>
+                        </div>
+                    </div>
+                    <div>
+                        <button class="ss-button" @click="dealGroupAdd(notice, false)">
+                            {{ $t('拒绝') }}
+                        </button>
+                        <button class="ss-button" @click="dealGroupAdd(notice, true)">
+                            {{ $t('同意') }}
+                        </button>
+                    </div>
+                </div>
+                <div v-else v-show="dev">
+                    <div>
+                        <img>
+                        <div>
+                            <span>{{ $t('sys_notice_unknow') }}</span>
+                            <a style="color: var(--color-font-2);word-wrap: anywhere;">
+                                request: {{ notice.request_type }}; sub: {{ notice.sub_type }}
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { Connector } from '../../function/connect'
+    import { getTrueLang } from '../../function/utils/systemUtil'
+    import { backend } from '../../runtime/backend'
+    import { i18n } from '../../main'
+    import { useUIStore } from '../../state/ui'
+    import { useContactStore } from '../../state/contact'
+
+    defineOptions({ name: 'ChatSystemNotice' })
+
+    const uiStore = useUIStore()
+    const contactStore = useContactStore()
+    const emit = defineEmits(['userClick'])
+
+    const $t = i18n.global.t
+    const trueLang = getTrueLang()
+    const dev = import.meta.env.DEV
+
+    function exit() {
+        emit('userClick', { id: 0 })
+    }
+
+    function dealFriend(notice: { flag: string }, deal: boolean) {
+        Connector.send(
+            'set_friend_add_request',
+            {
+                flag: notice.flag,
+                approve: deal,
+            },
+            'setFriendAdd_' + notice.flag,
+        )
+    }
+
+    function dealGroupAdd(
+        notice: { flag: string; sub_type: string },
+        deal: boolean,
+    ) {
+        Connector.send(
+            'set_group_add_request',
+            {
+                flag: notice.flag,
+                approve: deal,
+                sub_type: notice.sub_type,
+            },
+            'setGroupAdd_' + notice.flag,
+        )
+    }
+
+    function getName(id: number) {
+        const knowUser = contactStore.userList.filter(
+            (item) => item.user_id == id || item.group_id == id,
+        )
+        if (knowUser.length > 0) {
+            return knowUser[0].nickname || knowUser[0].group_name
+        } else {
+            return null
+        }
+    }
+</script>

package/client/web/src/pages/options/OptAccount.vue

@@ -0,0 +1,107 @@
+<!--
+ - @FileDescription: 设置页面（账号子页面）
+ - @Author: Stapxs
+ - @Date: 2022/9/29
+          2022/12/9
+ - @Version: 1.0 - 初始版本
+             1.5 - 重构为 ts 版本，代码格式优化
+-->
+
+<template>
+    <div class="opt-page account-page">
+        <template v-if="accounts.length > 0">
+            <div v-for="account in accounts"
+                :key="account.platform + ':' + account.selfId"
+                :class="['ss-card', 'account-info', { active: isActive(account) }]">
+                <img :src="account.avatar || '/img/icons/icon.svg'">
+                <div>
+                    <div>
+                        <span>{{ account.name || account.selfId }}</span>
+                        <span>{{ account.selfId }}</span>
+                    </div>
+                    <span class="platform">{{ account.platform }}</span>
+                </div>
+            </div>
+        </template>
+        <template v-else>
+            <div class="ss-card account-not-login">
+                <font-awesome-icon :icon="['fas', 'fish']" />
+                <span>{{ $t('还没有连接到 Satori 耶') }}</span>
+                <button class="ss-button" @click="goLogin">
+                    {{ $t('去连接') }}
+                </button>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { login as loginInfo } from '../../function/connect'
+import { getActiveBot } from '../../function/satori'
+import { useAuthStore } from '../../state/auth'
+import { i18n } from '../../main'
+
+defineOptions({ name: 'ViewOptAccount' })
+
+const $t = i18n.global.t
+const authStore = useAuthStore()
+interface SatoriAccount {
+    platform: string
+    selfId: string
+    name?: string
+    avatar?: string
+    status?: number
+    features?: string[]
+}
+
+const accounts = computed<SatoriAccount[]>(() => {
+    const stored = loginInfo.satoriLogins ?? authStore.loginInfo.satoriLogins
+    return Array.isArray(stored) ? stored as SatoriAccount[] : []
+})
+
+const activeBot = computed(() => {
+    const current = getActiveBot()
+    if (current?.platform && current.selfId) return current
+    return {
+        platform: String(authStore.loginInfo.platform ?? ''),
+        selfId: String(authStore.loginInfo.uin ?? authStore.loginInfo.selectedSatoriBot ?? ''),
+    }
+})
+
+function isActive(account: SatoriAccount) {
+    return activeBot.value.platform === account.platform && activeBot.value.selfId === account.selfId
+}
+
+function goLogin() {
+    document.getElementById('bar-msg')?.click()
+}
+</script>
+
+<style scoped>
+    .account-page {
+        height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding-right: 7px;
+        scrollbar-width: thin;
+    }
+    .account-info {
+        margin-bottom: 10px;
+        border-left: 3px solid transparent;
+    }
+    .account-info.active {
+        border-left-color: var(--color-main);
+    }
+    .account-info .platform {
+        font-size: 0.75rem;
+        opacity: 0.65;
+    }
+    .account-info > svg {
+        cursor: pointer;
+        opacity: 0.8;
+    }
+    .account-info > svg:hover {
+        opacity: 1;
+    }
+</style>

package/client/web/src/pages/options/OptAddon.vue

@@ -0,0 +1,185 @@
+<!--
+ * @FileDescription: 设置页面（附加子页面）
+ * @Author: Stapxs
+ * @Date: 2026/04/07
+ * @Version: 1.0
+-->
+<!-- eslint-disable max-len -->
+
+<template>
+    <div class="opt-page">
+        <template v-if="cards.length > 0">
+            <div v-for="card in cards" :key="card.id" class="ss-card">
+                <header>{{ card.title }}</header>
+                <div v-if="card.description" class="tip">
+                    {{ card.description }}
+                </div>
+                <div v-for="item in card.items" :key="item.id" class="opt-item">
+                    <template v-if="item.type === 'switch'">
+                        <font-awesome-icon
+                            :icon="item.icon || ['fas', 'robot']" />
+                        <div>
+                            <label :for="`opt-addon-switch-${item.id}`">{{ item.label }}</label>
+                            <span v-if="item.description">{{ item.description }}</span>
+                        </div>
+                        <label class="ss-switch">
+                            <input :id="`opt-addon-switch-${item.id}`" :checked="getItemValue(item) === true"
+                                type="checkbox" @change="onSwitchChange($event, item)">
+                            <div><div /></div>
+                        </label>
+                    </template>
+                    <template v-else-if="item.type === 'input'">
+                        <font-awesome-icon
+                            :icon="item.icon || ['fas', 'paper-plane']" />
+                        <div>
+                            <label :for="`opt-addon-input-${item.id}`">{{ item.label }}</label>
+                            <span v-if="item.description">{{ item.description }}</span>
+                        </div>
+                        <input :id="`opt-addon-input-${item.id}`" :value="getItemValue(item) ?? ''" class="ss-input"
+                            style="width: 150px"
+                            type="text" @input="onInputChange($event, item)">
+                    </template>
+                    <template v-else-if="item.type === 'password'">
+                        <font-awesome-icon
+                            :icon="item.icon || ['fas', 'key']" />
+                        <div>
+                            <label :for="`opt-addon-password-${item.id}`">{{ item.label }}</label>
+                            <span v-if="item.description">{{ item.description }}</span>
+                        </div>
+                        <input :id="`opt-addon-password-${item.id}`" :value="getItemValue(item) ?? ''" class="ss-input"
+                            style="width: 150px"
+                            type="password" @input="onInputChange($event, item)">
+                    </template>
+                    <template v-else-if="item.type === 'select'">
+                        <font-awesome-icon v-if="item.icon" :icon="item.icon" />
+                        <div v-if="item.label || item.description">
+                            <label v-if="item.label" :for="`opt-addon-select-${item.id}`">{{ item.label }}</label>
+                            <span v-if="item.description">{{ item.description }}</span>
+                        </div>
+                        <div class="select-wrapper">
+                            <select
+                                :id="`opt-addon-select-${item.id}`"
+                                :value="getItemValue(item) ?? (item.options?.[0]?.value ?? '')"
+                                @change="onSelectChange($event, item)">
+                                <option
+                                    v-for="opt in item.options || []"
+                                    :key="String(opt.value)"
+                                    :value="opt.value">
+                                    {{ opt.label }}
+                                </option>
+                            </select>
+                        </div>
+                    </template>
+                    <template v-else-if="item.type === 'button'">
+                        <font-awesome-icon v-if="item.icon" :icon="item.icon" />
+                        <div v-if="item.label || item.description">
+                            <span v-if="item.label">{{ item.label }}</span>
+                            <span v-if="item.description">{{ item.description }}</span>
+                        </div>
+                        <button class="ss-button" style="width: 100px; font-size: 0.8rem" @click="onClickButton(item)">
+                            {{ item.label }}
+                        </button>
+                    </template>
+                </div>
+            </div>
+        </template>
+        <template v-else>
+            <div class="ss-card empty">
+                <font-awesome-icon :icon="['fas', 'box-open']" />
+                <span>{{ $t('什么都木有') }}</span>
+                <a>{{ $t('附加设置页设置项来自页面主题或其他插件注册，现在看起来什么都没有呢。') }}</a>
+                <a>{{ $t('注意：有些功能的设置项可能需要在触发后才会被注册。') }}</a>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { i18n } from '../../main'
+    import { useSettingsStore } from '../../state/settings'
+    import {
+        extraOptionCards,
+        runAS,
+        type ExtraOptionItem,
+    } from '../../function/option'
+
+    defineOptions({ name: 'ViewOptAddon' })
+
+    const $t = i18n.global.t
+    const settingsStore = useSettingsStore()
+
+    const cards = extraOptionCards
+
+    function getItemValue(item: ExtraOptionItem): any {
+        const key = item.optionKey
+        if (key && settingsStore.sysConfig &&
+            Object.prototype.hasOwnProperty.call(settingsStore.sysConfig, key)) {
+            return (settingsStore.sysConfig as any)[key]
+        }
+        return item.defaultValue
+    }
+
+    function handleChange(item: ExtraOptionItem, value: any) {
+        if (item.optionKey) {
+            runAS(item.optionKey, value)
+        }
+        if (typeof item.callback === 'function') {
+            try {
+                item.callback(value)
+            } catch (e) {
+                // 回调异常不影响主流程
+                // eslint-disable-next-line no-console
+                console.error('extra option callback error:', e)
+            }
+        }
+    }
+
+    function onSwitchChange(event: Event, item: ExtraOptionItem) {
+        const sender = event.target as HTMLInputElement
+        handleChange(item, sender.checked)
+    }
+
+    function onInputChange(event: Event, item: ExtraOptionItem) {
+        const sender = event.target as HTMLInputElement
+        handleChange(item, sender.value)
+    }
+
+    function onSelectChange(event: Event, item: ExtraOptionItem) {
+        const sender = event.target as HTMLSelectElement
+        handleChange(item, sender.value)
+    }
+
+    function onClickButton(item: ExtraOptionItem) {
+        if (typeof item.callback === 'function') {
+            try {
+                item.callback(getItemValue(item))
+            } catch (e) {
+                // eslint-disable-next-line no-console
+                console.error('extra option button callback error:', e)
+            }
+        }
+    }
+</script>
+<style scoped>
+.empty {
+    margin: 0 auto;
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.empty svg {
+    width: 50px;
+    height: 50px;
+    margin-bottom: 10px;
+    color: var(--color-main);
+}
+.empty span {
+    color: var(--color-main);
+    margin-bottom: 10px;
+    font-size: 0.9rem;
+}
+.empty a {
+    font-size: 0.8rem;
+}
+</style>