render svg using webview

.github/workflows/build.yml

@@ -38,7 +38,6 @@ jobs:
         run: |
           pnpm install
           pnpm add @mihomo-party/sysproxy-win32-${{ matrix.arch }}-msvc
-          pnpm add @resvg/resvg-js-win32-${{ matrix.arch }}-msvc
           pnpm prepare --${{ matrix.arch }}
       - name: Build
         env:
@@ -96,7 +95,6 @@ jobs:
         run: |
           pnpm install
           pnpm add @mihomo-party/sysproxy-linux-${{ matrix.arch }}-gnu
-          pnpm add @resvg/resvg-js-linux-${{ matrix.arch }}-gnu
           pnpm prepare --${{ matrix.arch }}
       - name: Build
         env:
@@ -154,7 +152,6 @@ jobs:
         run: |
           pnpm install
           pnpm add @mihomo-party/sysproxy-darwin-${{ matrix.arch }}
-          pnpm add @resvg/resvg-js-darwin-${{ matrix.arch }}
           pnpm prepare --${{ matrix.arch }}
       - name: Build
         env:

package.json

@@ -27,7 +27,6 @@
     "adm-zip": "^0.5.15",
     "axios": "^1.7.5",
     "dayjs": "^1.11.13",
-    "svg2img": "1.0.0-beta.2",
     "webdav": "^5.7.1",
     "ws": "^8.18.0",
     "yaml": "^2.5.0"

src/main/core/mihomoApi.ts

@@ -1,20 +1,11 @@
 import axios, { AxiosInstance } from 'axios'
 import { getAppConfig, getControledMihomoConfig } from '../config'
-import templateIcon from '../../../resources/iconTemplate.png?asset'
-import svgIcon from '../../../resources/iconTemplate@2x.png?asset'
 import { mainWindow } from '..'
 import WebSocket from 'ws'
 import { tray } from '../resolve/tray'
 import { calcTraffic } from '../utils/calc'
 import { getRuntimeConfig } from './factory'
-import { nativeImage } from 'electron'
-import parseSvg from '../utils/parseSvg'
 
-const icon = nativeImage.createFromPath(svgIcon)
-icon.setTemplateImage(true)
-const base64 = icon.toPNG().toString('base64')
-let hasShowTraffic = false
-let drawing = false
 let axiosIns: AxiosInstance = null!
 let mihomoTrafficWs: WebSocket | null = null
 let trafficRetry = 10
@@ -180,7 +171,6 @@ export const stopMihomoTraffic = (): void => {
 }
 
 const mihomoTraffic = async (): Promise<void> => {
-  const { showTraffic = true } = await getAppConfig()
   const controledMihomoConfig = await getControledMihomoConfig()
   let server = controledMihomoConfig['external-controller']
   const secret = controledMihomoConfig.secret ?? ''
@@ -194,38 +184,6 @@ const mihomoTraffic = async (): Promise<void> => {
     const json = JSON.parse(data) as IMihomoTrafficInfo
     trafficRetry = 10
     mainWindow?.webContents.send('mihomoTraffic', json)
-    if (process.platform === 'darwin') {
-      if (showTraffic) {
-        if (drawing) return
-        drawing = true
-        const svgContent = `
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156 36">
-        <image height='36' width='36' href='data:image/png;base64,${base64}'/>
-        <text x='40' y='15' font-size='18' font-family="PingFang SC" font-weight='bold' text-anchor='start'>↑</text>
-        <text x='40' y='34' font-size='18' font-family="PingFang SC" font-weight='bold' text-anchor='start'>↓</text>
-        <text x='156' y='15' font-size='18' font-family="PingFang SC" font-weight='bold' text-anchor='end'>${calcTraffic(json.up)}/s</text>
-        <text x='156' y='34' font-size='18' font-family="PingFang SC" font-weight='bold' text-anchor='end'>${calcTraffic(json.down)}/s</text>
-      </svg>`
-        try {
-          const buffer = await parseSvg(svgContent)
-          const image = nativeImage.createFromBuffer(buffer).resize({ height: 16 })
-          image.setTemplateImage(true)
-          tray?.setImage(image)
-          hasShowTraffic = true
-        } catch (e) {
-          // ignore
-        } finally {
-          drawing = false
-        }
-      } else {
-        if (hasShowTraffic) {
-          const icon = nativeImage.createFromPath(templateIcon)
-          icon.setTemplateImage(true)
-          tray?.setImage(icon)
-          hasShowTraffic = false
-        }
-      }
-    }
     if (process.platform !== 'linux') {
       tray?.setToolTip(
         '↑' +

src/main/resolve/tray.ts

@@ -237,6 +237,11 @@ export async function createTray(): Promise<void> {
     if (!useDockIcon) {
       app.dock.hide()
     }
+    ipcMain.on('trayIconUpdate', async (_, png: string) => {
+      const image = nativeImage.createFromDataURL(png).resize({ height: 16 })
+      image.setTemplateImage(true)
+      tray?.setImage(image)
+    })
     tray?.addListener('right-click', async () => {
       if (mainWindow?.isVisible()) {
         mainWindow?.close()

src/main/utils/parseSvg.ts

@@ -1,32 +0,0 @@
-import { Worker } from 'worker_threads'
-
-export default function parseSvg(svgStr: string): Promise<Buffer> {
-  return new Promise((resolve, reject) => {
-    const worker = new Worker(workerString, {
-      eval: true,
-      env: {
-        __dirname
-      },
-      workerData: svgStr
-    })
-    worker.on('message', resolve)
-    worker.on('error', reject)
-    worker.on('exit', (code) => {
-      if (code !== 0) reject(new Error(`Worker stopped with exit code ${code}`))
-    })
-  })
-}
-
-const workerString = `
-const { parentPort, workerData } = require('worker_threads')
-const path = require('path')
-const svg2img = require(path.resolve(process.env.__dirname, '../../node_modules/svg2img'))
-
-const svgStr = workerData
-svg2img(svgStr, (err, buffer) => {
-  if (err) {
-    throw err
-  }
-  parentPort?.postMessage(buffer)
-})
-`

src/renderer/index.html

@@ -6,7 +6,7 @@
     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src *"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src * data:;"
     />
   </head>
 

src/renderer/src/pages/connections.tsx

@@ -122,6 +122,7 @@ const Connections: React.FC = () => {
               <TableCell>{item.metadata.process || item.metadata.sourceIP}</TableCell>
               <TableCell className="max-w-[100px] text-ellipsis whitespace-nowrap overflow-hidden">
                 {item.metadata.host ||
+                  item.metadata.sniffHost ||
                   item.metadata.remoteDestination ||
                   item.metadata.destinationIP}
               </TableCell>

src/renderer/src/utils/calc.ts

@@ -1,21 +1,33 @@
 export function calcTraffic(byte: number): string {
   if (byte < 1024) return `${byte} B`
   byte /= 1024
-  if (byte < 1024) return `${byte.toFixed(2)} KB`
+  if (byte < 1024) return `${formatNumString(byte)} KB`
   byte /= 1024
-  if (byte < 1024) return `${byte.toFixed(2)} MB`
+  if (byte < 1024) return `${formatNumString(byte)} MB`
   byte /= 1024
-  if (byte < 1024) return `${byte.toFixed(2)} GB`
+  if (byte < 1024) return `${formatNumString(byte)} GB`
   byte /= 1024
-  if (byte < 1024) return `${byte.toFixed(2)} TB`
+  if (byte < 1024) return `${formatNumString(byte)} TB`
   byte /= 1024
-  if (byte < 1024) return `${byte.toFixed(2)} PB`
+  if (byte < 1024) return `${formatNumString(byte)} PB`
   byte /= 1024
-  if (byte < 1024) return `${byte.toFixed(2)} EB`
+  if (byte < 1024) return `${formatNumString(byte)} EB`
   byte /= 1024
-  if (byte < 1024) return `${byte.toFixed(2)} ZB`
+  if (byte < 1024) return `${formatNumString(byte)} ZB`
   byte /= 1024
-  return `${byte.toFixed(2)} YB`
+  return `${formatNumString(byte)} YB`
+}
+
+function formatNumString(num: number): string {
+  let str = num.toFixed(2)
+  if (str.length <= 5) return str
+  if (str.length == 6) {
+    str = num.toFixed(1)
+    return str
+  } else {
+    str = Math.round(num).toString()
+    return str
+  }
 }
 
 export function calcPercent(