feat: 统一应用品牌图标并修复 macOS 打包路径

2026-08-17 03:27:00 +08:00 · 2026-07-14 11:07:35 +08:00
parent ce4b00bcd9
commit aebf56b3f7
10 changed files with 36 additions and 35 deletions
@@ -25,6 +25,7 @@ extraResources:
    filter:
      - '**/*'
 win:
+  icon: icon.ico
  # WCDB's Windows runtime checks the host executable name. The dev runtime is
  # electron.exe, so keep the packaged executable compatible while preserving
  # WechatExplorer as the product/shortcut name.
@@ -37,6 +38,7 @@ nsis:
  uninstallDisplayName: ${productName}
  createDesktopShortcut: always
 mac:
+  icon: icon.icns
  entitlementsInherit: build/entitlements.mac.plist
  extendInfo:
    # The bundled WCDB bridge accepts Electron as its internal host name. The
@@ -51,6 +53,7 @@ mac:
 dmg:
  artifactName: ${name}-${version}-${arch}.${ext}
 linux:
+  icon: icon.png
  target:
    - AppImage
    - snap
@@ -11,6 +11,7 @@ import {
  dialog
 } from 'electron'
 import { join } from 'path'
+import { existsSync } from 'fs'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
 import { WechatDb } from './wechat-db'
@@ -75,6 +76,9 @@ const keyServiceMac = new KeyServiceMac()
 const keyServiceWin = new KeyServiceWin()
 let tray: Tray | null = null

+const packagedIconPath = join(process.resourcesPath, 'resources', 'icon.png')
+const appIconPath = existsSync(packagedIconPath) ? packagedIconPath : icon
+
 // WCDB's Windows runtime checks the host application name during wcdb_init.
 // Mirroring WeFlow's name unblocks the -1006 init failure on Windows.
 app.setName(process.platform === 'win32' ? 'WeFlow' : 'WechatExplorer')
@@ -99,7 +103,7 @@ function createWindow(): void {
    height: 800,
    show: false,
    autoHideMenuBar: true,
-    ...(process.platform === 'linux' ? { icon } : {}),
+    icon: appIconPath,
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false
@@ -140,7 +144,9 @@ app.whenReady().then(async () => {
  }

  // 涓虹獥鍙ｈ缃簲鐢ㄧ▼搴忕敤鎴锋ā鍨?ID
-  electronApp.setAppUserModelId('com.electron')
+  electronApp.setAppUserModelId('com.wechatexplorer.app')
+
+  if (process.platform === 'darwin') app.dock?.setIcon(appIconPath)

  // 鍦ㄥ紑鍙戠幆澧冧腑榛樿鎸?F12 鎵撳紑鎴栧叧闂?DevTools
  // 鍦ㄧ敓浜х幆澧冧腑蹇界暐 CommandOrControl + R
@@ -674,8 +680,12 @@ function buildTrayMenu(): Menu {
 function setupTray(): void {
  if (tray) return
  try {
-    const image = nativeImage.createFromPath(join(__dirname, '../../resources/icon.png'))
-    tray = new Tray(image.isEmpty() ? nativeImage.createEmpty() : image)
+    const image = nativeImage.createFromPath(appIconPath)
+    const traySize = process.platform === 'darwin' ? 20 : 24
+    const trayImage = image.isEmpty()
+      ? nativeImage.createEmpty()
+      : image.resize({ width: traySize, height: traySize, quality: 'best' })
+    tray = new Tray(trayImage)
    tray.setToolTip('WechatExplorer')
    tray.setContextMenu(buildTrayMenu())
    tray.on('click', () => showMainWindow())
@@ -2,7 +2,8 @@
 <html>
  <head>
    <meta charset="UTF-8" />
-    <title>Electron</title>
+    <title>WechatExplorer</title>
+    <link rel="icon" type="image/svg+xml" href="/src/assets/brand-icon.svg" />
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
@@ -0,0 +1,8 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="256" height="256" rx="48" fill="#022C22" />
+  <rect x="0.5" y="0.5" width="255" height="255" rx="47.5" stroke="#064E3B" />
+  <rect x="128" y="16.2742" width="158" height="158" rx="15" transform="rotate(45 128 16.2742)" stroke="#14B8A6" stroke-opacity="0.3" stroke-width="2" />
+  <rect x="65" y="65" width="126" height="126" rx="11" stroke="#14B8A6" stroke-opacity="0.5" stroke-width="2" />
+  <rect x="104" y="104" width="48" height="48" rx="24" fill="#14B8A6" />
+  <rect x="192" y="48" width="16" height="16" rx="8" fill="#2DD4BF" />
+</svg>
@@ -59,27 +59,16 @@ body {
  display: grid;
  place-items: center;
  border: 0;
-  border-radius: var(--wxex-radius-md);
-  background: var(--wxex-brand);
-  color: #ffffff;
+  border-radius: 12px;
+  background: transparent;
  -webkit-app-region: no-drag;
 }

-.app-brand svg {
-  width: 34px;
-  height: 34px;
-}
-
-.app-brand path {
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.8;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.app-brand circle {
-  fill: currentColor;
+.app-brand img {
+  display: block;
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
 }

 .primary-navigation {
@@ -2,6 +2,7 @@ import React from 'react'
 import { AccountSummary } from '../account/AccountSummary'
 import { PrimaryNavigation } from './PrimaryNavigation'
 import { AppPage, PRIMARY_NAV_ITEMS } from './navigation'
+import brandIcon from '../../assets/brand-icon.svg'

 interface SelfInfo {
  wxid: string
@@ -22,18 +23,7 @@ interface AppShellProps {
 function BrandLogo(): React.ReactElement {
  return (
    <div className="app-brand" title="WechatExplorer" aria-label="WechatExplorer">
-      <svg viewBox="0 0 40 40" aria-hidden="true" focusable="false">
-        <path d="M13 15.5 20 10l7 5.5" />
-        <path d="M13 24.5 20 30l7-5.5" />
-        <path d="M13 15.5v9" />
-        <path d="M27 15.5v9" />
-        <circle cx="20" cy="10" r="2.6" />
-        <circle cx="13" cy="15.5" r="2.6" />
-        <circle cx="27" cy="15.5" r="2.6" />
-        <circle cx="13" cy="24.5" r="2.6" />
-        <circle cx="27" cy="24.5" r="2.6" />
-        <circle cx="20" cy="30" r="2.6" />
-      </svg>
+      <img src={brandIcon} alt="" aria-hidden="true" />
    </div>
  )
 }