狂轰滥炸

✨ 支持禁言状态显示和对应的输入框禁用 ✨ 增加了退出群组按钮 🎨 将 UserFriendElem 和 UserGroupElem 抽离出了父类，纠正了类元素写反了的问题 💄 修正了用户列表头像未上下居中的问题
Stapxs · Aug 27, 2024 · 51dc31f · 51dc31f
1 parent 88cbb78
commit 51dc31f
Show file tree

Hide file tree

Showing 11 changed files with 205 additions and 36 deletions.
diff --git a/src/assets/css/chat.css b/src/assets/css/chat.css
@@ -207,6 +207,15 @@ input {
     width: 100%;
     border: 0;
 }
+.chat-pan > div.more > div:nth-child(2) > div > form > input:disabled,
+.chat-pan > div.more > div:nth-child(2) > div > form > textarea:disabled {
+    background: var(--color-card);
+    outline: 1px solid var(--color-card-2);
+    color: var(--color-font-2);
+    opacity: 0.7;
+    text-align: center;
+    font-size: 0.8rem;
+}
 .chat-pan > div.more > div:nth-child(2) > div > div {
     border-radius: 7px;
     min-height: 40px;

diff --git a/src/assets/css/msg.css b/src/assets/css/msg.css
@@ -457,6 +457,10 @@
 .note-base > a {
     color: var(--color-font);
 }
+.note-ban > a {
+    color: var(--color-main);
+    font-weight: bold;
+}
 .note-time {
     color: var(--color-font-2) !important;
     display: block;

diff --git a/src/assets/css/view.css b/src/assets/css/view.css
@@ -384,6 +384,7 @@ textarea:focus {
     border-radius: 7px;
     transform: translate(0, 0);
     transition: background .2s, color .2s, transform .2s;
+    align-items: center;
 }
 .friend-body.active {
     background: var(--color-main);

diff --git a/src/assets/l10n/zh-CN.json b/src/assets/l10n/zh-CN.json
@@ -343,6 +343,17 @@
   "log_con_backend": "使用后端连接模式",
   "list_menu_notice": "开启通知",
   "list_menu_notice_close": "关闭通知",
+  "chat_send_msg_watermark_ban": "已被禁言至：{time}",
+  "note_ban_you": "禁言了你",
+  "note_ban_others": "管理员禁言了",
+  "note_unban": "管理员解除了 {name} 的禁言",
+  "days": "天",
+  "hours": "小时",
+  "minutes": "分钟",
+  "seconds": "秒",
+  "you": "你",
+  "exit_group": "退出群聊",
+  "trust_leave_group": "确定要退出群聊吗？",
 
   "menu_about": "关于",
   "menu_update": "检查更新…",

diff --git a/src/assets/pathMap/NapCat.Onebot.yaml b/src/assets/pathMap/NapCat.Onebot.yaml
@@ -115,6 +115,24 @@ group_essence:
         add_digest_nick: /add_digest_nick
         add_digest_time: /add_digest_time
     is_end: $.data.is_end
+# 获取群成员信息
+group_member_info:
+    name: get_group_member_info
+    source: $.data
+    list:
+        group_id: /group_id
+        user_id: /user_id
+        nickname: /nickname
+        card: /card
+        sex: /sex
+        age: /age
+        join_time: /join_time
+        last_sent_time: /last_sent_time
+        is_robot: /is_robot
+        shut_up_timestamp: /shut_up_timestamp
+# 退出群聊
+leave_group:
+    name: set_group_leave
 # 获取收藏表情
 roaming_stamp:
     name: fetch_custom_face

diff --git a/src/components/NoticeBody.vue b/src/components/NoticeBody.vue
@@ -14,6 +14,22 @@
 
             </div>
         </div>
+        <div class="note-ban note-base" v-if="data.notice_type == 'group_ban'">
+            <template v-if="data.sub_type === 'ban'">
+                <template v-if="isMe(data.user_id)">
+                    <span>{{ $t('chat_member_type_admin') }}</span>
+                    <a>&nbsp;{{ getName(data.operator_id) }}&nbsp;</a>
+                    <span>{{ $t('note_ban_you') }}</span>
+                    <span>&nbsp;{{ fTime(data.duration) }}</span>
+                </template>
+                <template v-else>
+                    <span>{{ $t('note_ban_others') }}</span>
+                    <a>&nbsp;{{ getName(data.user_id) }}&nbsp;</a>
+                    <span>{{ fTime(data.duration) }}</span>
+                </template>
+            </template>
+            <span v-else>{{ $t('note_unban', { name: isMe(data.user_id) ? $t('you') : getName(data.user_id) }) }}</span>
+        </div>
         <div class="note-time note-base" v-if="data.sub_type === 'time'">
             <a>{{
                 Intl.DateTimeFormat(trueLang, getTimeConfig(new Date(data.time * 1000)))
@@ -26,36 +42,52 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import { runtimeData } from '@/function/msg'
-import { getTrueLang } from '@/function/utils/systemUtil'
+import { getTimeConfig, getTrueLang } from '@/function/utils/systemUtil'
 
 export default defineComponent({
     name: 'NoticeBody',
     props: ['data'],
     data() {
         return {
             trueLang: getTrueLang(),
+            getTimeConfig,
             info: ref(this.data) as { [key: string]: any }
         }
     },
     methods: {
-        getTimeConfig(date: Date) {
-            let base = { hour: 'numeric', minute: 'numeric', second: 'numeric' } as Intl.DateTimeFormatOptions
-            const nowDate = new Date()
-            const todayDate = new Date().setHours(0, 0, 0, 0)
-            const paramsDate = date.setHours(0, 0, 0, 0)
-            if(todayDate != paramsDate) {
-                if (nowDate.getFullYear() == date.getFullYear() && nowDate.getMonth() == date.getMonth()) {
-                    base.weekday = 'short'
-                } else if(nowDate.getFullYear() == date.getFullYear()) {
-                    base.day = 'numeric'
-                    base.month = 'short'
-                } else {
-                    base.day = 'numeric'
-                    base.month = 'short'
-                    base.year = 'numeric'
-                }
+        isMe(id: number) {
+            return runtimeData.loginInfo.uin === id
+        },
+        getName(id: number) {
+            const back = runtimeData.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
+        },
+        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} ${this.$t('days')} `
+            }
+            if (hour > 0) {
+                back += `${hour} ${this.$t('hours')} `
+            }
+            if (minute > 0) {
+                back += `${minute} ${this.$t('minutes')} `
+            }
+            if (second > 0) {
+                back += `${second} ${this.$t('seconds')} `
             }
-            return base
+            return back
         }
     },
     mounted() {

diff --git a/src/function/elements/information.ts b/src/function/elements/information.ts
@@ -86,33 +86,29 @@ export interface BaseChatInfoElem {
     jump?: string
 }
 
-export interface UserFriendElem {
-    group_id: number,
-    group_name: string,
-    py_name?: string,
-    member_count?: number,
-    admin_flag?: boolean,
-
+export interface UserElem {
     new_msg?: boolean,
     raw_msg?: string,
     time?: number,
     always_top?: boolean,
     message_id?: string
 }
 
-export interface UserGroupElem {
+export interface UserFriendElem extends UserElem {
+    group_id: number,
+    group_name: string,
+    py_name?: string,
+    member_count?: number,
+    admin_flag?: boolean
+}
+
+export interface UserGroupElem extends UserElem {
     user_id: number,
     nickname: string,
     remark: string,
     py_name?: string,
     class_id?: number,
-    class_name?: string,
-
-    new_msg?: boolean,
-    raw_msg?: string,
-    time?: number,
-    always_top?: boolean
-    message_id?: string
+    class_name?: string
 }
 
 export interface GroupMemberInfoElem {

diff --git a/src/function/msg.ts b/src/function/msg.ts
@@ -52,7 +52,7 @@ export function parse(str: string) {
                 case 'getGroupList'             : saveUser(msg, 'group'); break
                 case 'getFriendList'            : saveUser(msg, 'friend'); break
                 case 'getFriendCategory'        : saveClassInfoAlone(msg); break
-                case 'getUserInfoInGroup'       : runtimeData.chatInfo.info.me_info = msg; break
+                case 'getUserInfoInGroup'       : saveUserInfoInGroup(msg); break
                 case 'getGroupMemberList'       : saveGroupMember(msg.data); break
                 case 'getChatHistoryFist'       : saveMsg(msg, 'top'); break
                 case 'getChatHistoryOnMsg'      : updateTopMsg(msg, echoList); break
@@ -99,6 +99,7 @@ export function parse(str: string) {
                     case 'friend_recall':
                     case 'recall'                   : revokeMsg(msg); break
                     case 'group_msg_emoji_like'     : showEmojiLike(msg); break
+                    case 'group_ban'                : groupBanNotice(msg); break
                 }
                 break
             }
@@ -367,6 +368,18 @@ function updateTopMsg(msg: any, echoList: string[]) {
     }
 }
 
+function saveUserInfoInGroup(msg: any) {
+    const data = getMsgData('group_member_info', msg, msgPath.group_member_info)
+    if(data && data[0]) {
+        const info = data[0]
+        // 单独判断下 shut_up_timestamp
+        if(info.shut_up_timestamp * 1000 < Date.now()) {
+            info.shut_up_timestamp = 0
+        }
+        runtimeData.chatInfo.info.me_info = info
+    }
+}
+
 function saveClassInfoAlone(msg: any) {
     const list = getMsgData('friend_category', msg, msgPath.friend_category) as {
         class_id: number,
@@ -1214,6 +1227,22 @@ function saveSticker(data: any) {
     }
 }
 
+function groupBanNotice(data: any) {
+    const groupId = data.group_id
+    const userId = data.user_id
+    const status = data.sub_type === 'ban' ? true : false
+    const duration = data.duration ?? 0     // 秒
+
+    if(userId == runtimeData.loginInfo.uin && groupId == runtimeData.chatInfo.show.id) {
+        if(status)
+            runtimeData.chatInfo.info.me_info.shut_up_timestamp = (new Date().getTime() + duration * 1000) / 1000
+        else 
+            runtimeData.chatInfo.info.me_info.shut_up_timestamp = 0
+    }
+
+    runtimeData.messageList.push(data)
+}
+
 // ==============================================================
 
 const baseRuntime = {

diff --git a/src/function/utils/systemUtil.ts b/src/function/utils/systemUtil.ts
@@ -231,4 +231,29 @@ export function getViewTime(time: number) {
     } else {
         return time
     }
+}
+
+/**
+ * 获取时间的配置
+ * @param date 
+ * @returns 
+ */
+export function getTimeConfig(date: Date) {
+    const base = { hour: 'numeric', minute: 'numeric', second: 'numeric' } as Intl.DateTimeFormatOptions
+    const nowDate = new Date()
+    const todayDate = new Date().setHours(0, 0, 0, 0)
+    const paramsDate = date.setHours(0, 0, 0, 0)
+    if(todayDate != paramsDate) {
+        if (nowDate.getFullYear() == date.getFullYear() && nowDate.getMonth() == date.getMonth()) {
+            base.weekday = 'short'
+        } else if(nowDate.getFullYear() == date.getFullYear()) {
+            base.day = 'numeric'
+            base.month = 'short'
+        } else {
+            base.day = 'numeric'
+            base.month = 'short'
+            base.year = 'numeric'
+        }
+    }
+    return base
 }
diff --git a/src/pages/Chat.vue b/src/pages/Chat.vue
@@ -179,7 +179,9 @@
                             type="text"
                             v-model="msg"
                             autocomplete="off"
-                            :disabled="runtimeData.tags.openSideBar"
+                            :disabled="runtimeData.tags.openSideBar || chat.info.me_info.shut_up_timestamp > 0"
+                            :placeholder="chat.info.me_info.shut_up_timestamp > 0 ? $t('chat_send_msg_watermark_ban', {
+                            time: Intl.DateTimeFormat(trueLang, getTimeConfig(new Date(chat.info.me_info.shut_up_timestamp * 1000))).format(new Date(chat.info.me_info.shut_up_timestamp * 1000)) }) : ''"
                             @paste="addImg"
                             @keyup="mainKeyUp"
                             @click="selectSQIn()">
@@ -383,7 +385,7 @@ import imageCompression from 'browser-image-compression'
 
 import { defineComponent, markRaw } from 'vue'
 import { downloadFile, loadHistory as loadHistoryFirst } from '@/function/utils/appUtil'
-import { getTrueLang } from '@/function/utils/systemUtil'
+import { getTimeConfig, getTrueLang } from '@/function/utils/systemUtil'
 import { getMsgRawTxt, sendMsgRaw, getFace } from '@/function/utils/msgUtil'
 import { scrollToMsg } from '@/function/utils/appUtil'
 import { Logger, LogType, PopInfo, PopType } from '@/function/base'
@@ -405,6 +407,7 @@ export default defineComponent({
             getFace: getFace,
             Connector: Connector,
             runtimeData: runtimeData,
+            getTimeConfig: getTimeConfig,
             forwardList: runtimeData.userList,
             trueLang: getTrueLang(),
             tags: {

diff --git a/src/pages/options/OptInfo.vue b/src/pages/options/OptInfo.vue
@@ -28,6 +28,11 @@
                 </div>
                 <input class="ss-input" style="width:150px" type="text" @keyup="setGroupCard" v-model="runtimeData.chatInfo.info.me_info.card">
             </div>
+
+            <button class="ss-button" style="width: calc(100% - 60px); margin: 30px 30px 0 30px;"
+                @click="leaveGroup()">
+                {{ $t('exit_group') }}
+            </button>
         </template>
     </div>
 </template>
@@ -36,6 +41,7 @@
 import { defineComponent } from 'vue'
 import { runtimeData } from '@/function/msg'
 import { Connector } from '@/function/connect'
+import { reloadUsers } from '@/function/utils/appUtil'
 
 export default defineComponent({
     name: 'ViewOptInfo',
@@ -79,6 +85,41 @@ export default defineComponent({
                     'setGroupName'
                 )
             }
+        },
+
+        /**
+         * 退出群聊
+        */
+        leaveGroup() {
+            const popInfo = {
+                html: '<span>' + this.$t('trust_leave_group') + '</span>',
+                button: [
+                    {
+                        text: this.$t('btn_yes'),
+                        fun: () => {
+                            if(runtimeData.jsonMap.leave_group?.name) {
+                                Connector.send(runtimeData.jsonMap.leave_group?.name, {
+                                    group_id: this.chat.show.id
+                                }, 'leaveGroup')
+                            }
+                            // 从消息列表中删除该群聊
+                            runtimeData.onMsgList = runtimeData.onMsgList.filter((item: any) => item.group_id !== this.chat.show.id)
+                            // 关闭群聊窗口
+                            runtimeData.chatInfo.show.id = 0
+                            // 刷新好友/群列表
+                            reloadUsers()
+
+                            runtimeData.popBoxList.shift()
+                        }
+                    },
+                    {
+                        text: this.$t('btn_no'),
+                        master: true,
+                        fun: () => { runtimeData.popBoxList.shift() }
+                    }
+                ]
+            }
+            runtimeData.popBoxList.push(popInfo)
         }
     }
 })