Touch Bar 好玩

🎨 Touch Bar 功能完善
🐛 修正 mac 下 700px 宽度 chatPan 行为异常的问题

src/App.vue

@@ -556,7 +556,7 @@ export default defineComponent({
                             image: item.user_id ? 'https://q1.qlogo.cn/g?b=qq&s=0&nk=' + item.user_id : 'https://p.qlogo.cn/gh/' + item.group_id + '/' + item.group_id + '/0'
                         })
                     })
-                    runtimeData.reader?.send('sys:flushTouchBar', list)
+                    runtimeData.reader?.send('sys:flushOnMessage', list)
                 })
             }
         }

src/assets/css/append/append_darwin.css

@@ -27,6 +27,10 @@ body {
     .chat-pan {
         left: 0 !important;
     }
+    .chat-pan.open {
+        left: 300px !important;
+        transform: unset !important;
+    }
     .chat-info {
         width: calc(100% - 70px);
         height: calc(100% - 165px);
@@ -38,6 +42,9 @@ body {
     .chat-pan > div.info > svg {
         display: block;
     }
+    .chat-pan.open > div.info > svg {
+        display: none;
+    }
     .chat-pan.open {
         transform: translateX(100%);
     }
@@ -50,6 +57,9 @@ body {
     }
 }
 @media (max-width: 500px) {
+    .chat-pan.open {
+        transform: translateX(100%) !important;
+    }
     .chat-info {
         width: calc(100% - 30px);
         height: calc(100% - 125px);

src/function/electron/ipc.ts

@@ -2,18 +2,22 @@ import Store from 'electron-store'
 import path from 'path'
 import os from 'os'
 
+import log4js from 'log4js'
 import { ipcMain, shell, systemPreferences, app, Menu, MenuItemConstructorOptions, Notification as ELNotification } from 'electron'
 import { GtkTheme, GtkData } from '@jakejarrett/gtk-theme'
 import { runCommand } from './util'
 import { win, touchBarInstance } from '@/background'
 import { Connector } from '@/function/electron/connector'
 
 let connector = undefined as Connector | undefined
+const logger = log4js.getLogger('ipc')
 const store = new Store()
 let template = [] as any[]
 
+logger.level = 'info'
+
 // 消息缓存，key 为 tag
-const noticeList = {} as {[key: string]: ELNotification}
+export const noticeList = {} as {[key: string]: ELNotification}
 
 export function regIpcListener() {
     // 后端连接模式
@@ -169,6 +173,12 @@ export function regIpcListener() {
     })
     // 发送通知
     ipcMain.on('sys:sendNotice', async (event, data) => {
+        logger.info('创建通知：' + data.tag + ' - ' + data.body)
+        // MacOS: 刷新 TouchBar
+        if(touchBarInstance && data.base_type === 'msg') {
+            touchBarInstance.newMessage(data)
+        }
+
         const userId = data.tag.split('/')[0]
         const msgId = data.tag.split('/')[1]
 
@@ -244,20 +254,34 @@ export function regIpcListener() {
     // 关闭通知
     ipcMain.on('sys:closeNotice', (event, tag) => {
         if(noticeList[tag]) {
+            logger.info('关闭通知：' + tag)
             noticeList[tag].close()
+            delete noticeList[tag]
+            // macOS: 刷新 TouchBar
+            if(touchBarInstance) {
+                touchBarInstance.removeMessage(tag)
+            }
         }
     })
     // 清空通知
     ipcMain.on('sys:clearNotice', () => {
         Object.keys(noticeList).forEach((key) => {
+            logger.info('清空通知')
             noticeList[key].close()
+            delete noticeList[key]
         })
     })
     // 关闭指定 ID 的所有通知
     ipcMain.on('sys:closeAllNotice', (event, id) => {
         Object.keys(noticeList).forEach((key) => {
             if(key.startsWith(id)) {
+                logger.info('关闭所有通知：' + id)
                 noticeList[key].close()
+                delete noticeList[key]
+                // macOS: 刷新 TouchBar
+                if(touchBarInstance) {
+                    touchBarInstance.removeMessage(key)
+                }
             }
         })
     })
@@ -418,6 +442,7 @@ export function regIpcListener() {
     })
     function sendMenuClick(name: string, value = undefined as any) {
         if(win) {
+            win.focus()
             if(value) {
                 win.webContents.send(name, value)
             } else {
@@ -426,14 +451,14 @@ export function regIpcListener() {
         }
     }
     // MacOS：TouchBar
-    ipcMain.on('sys:flushTouchBar', (event, list) => {
+    ipcMain.on('sys:flushOnMessage', (event, list) => {
         if(touchBarInstance) {
-            touchBarInstance.flush(list)
+            touchBarInstance.flushOnMessage(list)
         }
     })
-    ipcMain.on('sys:newMessage', (event, data) => {
+    ipcMain.on('sys:flushFriendSearch', (event, list) => {
         if(touchBarInstance) {
-            touchBarInstance.newMessage(data)
+            touchBarInstance.flushFriendSearch(list)
         }
     })
 }

src/function/electron/touchbar.ts

@@ -1,15 +1,21 @@
 import axios from 'axios'
 
-import { BrowserWindow, TouchBar, nativeImage } from 'electron'
+import { BrowserWindow, NativeImage, TouchBar, nativeImage } from 'electron'
+import { NotifyInfo } from '../elements/system'
 const { TouchBarButton, TouchBarScrubber, TouchBarPopover, TouchBarSpacer, TouchBarLabel } = TouchBar
 
 export class touchBar {
-    win: BrowserWindow
+    private win: BrowserWindow
+
+    private nowView: 'Home' | 'FriendSearch' = 'Home'
+    private itemList: { id: number, name: string, image: string }[] = []
+    private msgList = {} as {[key: string]: { tag: string, title: string, 
+                            image: NativeImage | undefined, body: string }}
 
     touchBarScrubber = new TouchBarScrubber({
         overlayStyle: 'outline',
         showArrowButtons: false,
-        continuous: true,
+        continuous: false,
         mode: 'free',
         items: [],
         select: (index) => {
@@ -23,6 +29,7 @@ export class touchBar {
     search = new TouchBarButton({
         icon: nativeImage.createFromNamedImage('NSImageNameTouchBarSearchTemplate', [-1, 0, 1]).resize({ width: 20, height: 20 }),
         click: () => {
+            this.win.focus()
             this.win.webContents.send('app:changeTab', 'Friends')
         }
     })
@@ -38,55 +45,142 @@ export class touchBar {
 
     // ====================================
 
-    itemList: { id: number, name: string, image: string }[] = []
     constructor(win: BrowserWindow) {
         this.win = win
-        this.win.setTouchBar(new TouchBar({ items: [this.search]}))
     }
 
-    flush(messageList: { id: number, name: string, image: string }[]) {
+    /**
+     * 刷新消息列表
+     * @param messageList 消息列表
+     */
+    flushOnMessage(messageList: { id: number, name: string, image: string }[]) {
         this.itemList = messageList
         this.touchBarScrubber.items = messageList.map((item) => {
             return {
                 label: item.name
             }
         })
-        this.win.setTouchBar(new TouchBar({ items: this.baseView}))
+
+        // 如果在主页就主动刷新，其他情况退出到主页时会刷新
+        if(this.nowView == 'Home') this.loadHome()
     }
 
-    newMsgNum = 0
-    async newMessage(data: { id: number, image: string, name: string, msg: string }) {
-        if(data === undefined) {
-            this.win.setTouchBar(new TouchBar({ items: this.baseView}))
-            this.newMsgNum = 0
-            return
-        }
-        this.newMsgNum++
-        const response = await axios.get(data.image, {
-            responseType: 'arraybuffer'
-        })
-        let image = nativeImage.createFromBuffer(response.data)
-        image = image.resize({ width: 25, height: 25 })
-        // 创建 poper
-        const popover = new TouchBarPopover({
-            icon: nativeImage.createFromNamedImage('NSImageNameTouchBarNewMessageTemplate', [-1, 0, 1]).resize({ width: 20, height: 20 }),
-            label: this.newMsgNum.toString(),
-            items: new TouchBar({
-                items: [
-                    new TouchBarButton({ icon: image, iconPosition: 'right', enabled: false, backgroundColor: '#000'}),
-                    new TouchBarButton({ label: data.name ?? '', click: () => {
+    /**
+     * 刷新好友搜索
+     * @param nameList 好友列表
+     */
+    flushFriendSearch(nameList: { id: number, name: string}[]) {
+        if(nameList.length > 0) {
+            this.nowView = 'FriendSearch'
+
+            this.win.setTouchBar(new TouchBar({ items: [
+                new TouchBarButton({
+                    icon: nativeImage.createFromNamedImage('NSImageNameGoLeftTemplate', [-1, 0, 1]).resize({ width: 10, height: 15 }),
+                    click: () => {
+                        this.loadHome()
+                        this.win.webContents.send('app:changeTab', 'Messages')
+                    }
+                }),
+                new TouchBarButton({ label: '搜索联系人' }),
+                new TouchBarScrubber({
+                    overlayStyle: 'outline',
+                    showArrowButtons: false,
+                    continuous: false,
+                    mode: 'free',
+                    items: nameList.map((item) => {
+                        return {
+                            label: item.name
+                        }
+                    }),
+                    select: (index) => {
+                        const id = nameList[index].id
                         this.win.webContents.send('app:jumpChat', {
-                            userId: data.id,
+                            userId: id,
                             messageId: 0
                         })
-                        this.win.setTouchBar(new TouchBar({ items: this.baseView}))
-                    }}),
-                    new TouchBarSpacer({ size: 'small' }),
-                    new TouchBarLabel({ label: data.msg ?? '' })
-                ]
-            }),
-            showCloseButton: true
-        })
-        this.win.setTouchBar(new TouchBar({ items: this.baseView.concat(popover)}))
+                        this.loadHome()
+                    }
+                }),
+                new TouchBarSpacer({ size: 'flexible' })
+            ]}))
+        } else {
+            this.loadHome()
+        }
+    }
+
+    /**
+     * 保存新消息
+     * @param data 新消息
+     */
+    async newMessage(data: NotifyInfo) {
+        let image
+        if(data.icon) {
+            const response = await axios.get(data.icon, {
+                responseType: 'arraybuffer'
+            })
+            image = nativeImage.createFromBuffer(response.data)
+            image = image.resize({ width: 25, height: 25 })
+        }
+        this.msgList[data.tag] = {
+            tag: data.tag,
+            title: data.title,
+            image: image,
+            body: data.body
+        }
+
+        // 如果在主页就主动刷新，其他情况退出到主页时会刷新
+        if(this.nowView == 'Home') this.loadHome()
+    }
+
+    /**
+     * 删除消息
+     * @param tag 消息标签
+     */
+    removeMessage(tag: string) {
+        delete this.msgList[tag]
+
+        // 如果在主页就主动刷新，其他情况退出到主页时会刷新
+        if(this.nowView == 'Home') this.loadHome()
+    }
+
+    // ====================================
+
+    /**
+     * 刷新主页面
+     */
+    private loadHome() {
+        this.nowView = 'Home'
+
+        const count = Object.keys(this.msgList).length
+        if(count > 0) {
+            const data = Object.values(this.msgList)[0]
+            const id = data.tag.split('/')[0]
+
+            // 创建 poper
+            const popover = new TouchBarPopover({
+                icon: nativeImage.createFromNamedImage('NSImageNameTouchBarNewMessageTemplate', [-1, 0, 1]).resize({ width: 20, height: 20 }),
+                label: count.toString(),
+                items: new TouchBar({
+                    items: [
+                        new TouchBarButton({ icon: data.image, iconPosition: 'right', enabled: false, backgroundColor: '#000'}),
+                        new TouchBarButton({ label: data.title, click: () => {
+                            this.win.webContents.focus()
+                            this.win.webContents.send('app:jumpChat', {
+                                userId: id,
+                                messageId: 0
+                            })
+                            this.win.setTouchBar(new TouchBar({ items: this.baseView }))
+                        }}),
+                        new TouchBarSpacer({ size: 'small' }),
+                        new TouchBarLabel({ label: data.body }),
+                        new TouchBarSpacer({ size: 'flexible' })
+                    ]
+                }),
+                showCloseButton: true
+            })
+            this.win.setTouchBar(new TouchBar({ items: this.baseView.concat(popover)}))
+        } else {
+            this.win.setTouchBar(new TouchBar({ items: this.baseView }))
+        }
     }
 }

src/function/elements/system.ts

@@ -43,6 +43,8 @@ export interface NotificationElem {
 }
 
 export interface NotifyInfo {
+    base_type: string,
+
     title: string,
     body: string,
     tag: string,

src/function/msg.ts

@@ -1351,6 +1351,7 @@ function newMsg(name: string, data: any) {
                     })
                 }
                 const msgInfo = {
+                    base_type: 'msg',
                     title: data.group_name ?? data.sender.nickname,
                     body: data.message_type === 'group' ? data.sender.nickname + ':' + raw : raw,
                     tag: `${id}/${data.message_id}`,
@@ -1371,15 +1372,6 @@ function newMsg(name: string, data: any) {
                 if (Option.get('close_notice') !== true) {
                     new Notify().notify(msgInfo)
                 }
-                // MacOS：刷新 touchbar
-                if (runtimeData.tags.isElectron && runtimeData.reader) {
-                    runtimeData.reader.send('sys:newMessage', {
-                        id: id,
-                        image: msgInfo.icon,
-                        name: msgInfo.title,
-                        msg: raw
-                    })
-                }
             }
             // 如果发送者不在消息列表里，将它添加到消息列表里
             if (get.length !== 1) {

src/function/utils/appUtil.ts

@@ -434,6 +434,7 @@ export function createIpc() {
             runtimeData.popBoxList.push(popInfo)
         })
         runtimeData.reader.on('app:changeTab', (event, name) => {
+            window.focus()
             document.getElementById('bar-' + name.toLowerCase())?.click()
         })
         runtimeData.reader.on('app:openLink', (event, link) => {