feat: add DevTools functionality and localization support (#5796)

* feat: add DevTools functionality and localization support

* Added new IPC channels for opening and toggling DevTools.
* Implemented corresponding handlers in the main process.
* Updated preload API to include DevTools methods.
* Enhanced the AboutSettings component with a debug section to control DevTools.
* Added localization strings for debug actions in English, Simplified Chinese, and Traditional Chinese.

* refactor: remove DevTools open state handling and related localization strings

* Removed the IPC channel and associated handlers for checking if DevTools is open.
* Updated the AboutSettings component to eliminate the DevTools open state management.
* Removed localization strings for the DevTools close action in English, Simplified Chinese, and Traditional Chinese.

* ToggleDevTools event uses the source window to trigger switching, compatible with multiple windows

* Remove empty comments

---------

Co-authored-by: yangheng <492238647@qq.com>

packages/shared/IpcChannel.ts

@@ -135,6 +135,9 @@ export enum IpcChannel {
   System_GetDeviceType = 'system:getDeviceType',
   System_GetHostname = 'system:getHostname',
 
+  // DevTools
+  System_ToggleDevTools = 'system:toggleDevTools',
+
   // events
   BackupProgress = 'backup-progress',
   ThemeChange = 'theme:change',

src/main/index.ts

@@ -1,7 +1,7 @@
 import { electronApp, optimizer } from '@electron-toolkit/utils'
 import { replaceDevtoolsFont } from '@main/utils/windowUtil'
 import { IpcChannel } from '@shared/IpcChannel'
-import { app, ipcMain } from 'electron'
+import { app, BrowserWindow, ipcMain } from 'electron'
 import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } from 'electron-devtools-installer'
 import Logger from 'electron-log'
 
@@ -75,6 +75,11 @@ if (!app.requestSingleInstanceLock()) {
     ipcMain.handle(IpcChannel.System_GetHostname, () => {
       return require('os').hostname()
     })
+
+    ipcMain.handle(IpcChannel.System_ToggleDevTools, (e) => {
+      const win = BrowserWindow.fromWebContents(e.sender)
+      win && win.webContents.toggleDevTools()
+    })
   })
 
   registerProtocolClient(app)

src/preload/index.ts

@@ -29,6 +29,9 @@ const api = {
     getDeviceType: () => ipcRenderer.invoke(IpcChannel.System_GetDeviceType),
     getHostname: () => ipcRenderer.invoke(IpcChannel.System_GetHostname)
   },
+  devTools: {
+    toggle: () => ipcRenderer.invoke(IpcChannel.System_ToggleDevTools)
+  },
   zip: {
     compress: (text: string) => ipcRenderer.invoke(IpcChannel.Zip_Compress, text),
     decompress: (text: Buffer) => ipcRenderer.invoke(IpcChannel.Zip_Decompress, text)

src/renderer/src/i18n/locales/en-us.json

@@ -905,6 +905,8 @@
       "about.checkUpdate.available": "Update",
       "about.contact.button": "Email",
       "about.contact.title": "Contact",
+      "about.debug.title": "Debug",
+      "about.debug.open": "Open",
       "about.description": "A powerful AI assistant for producer",
       "about.downloading": "Downloading...",
       "about.feedback.button": "Feedback",

src/renderer/src/i18n/locales/zh-cn.json

@@ -905,6 +905,8 @@
       "about.checkUpdate.available": "立即更新",
       "about.contact.button": "邮件",
       "about.contact.title": "邮件联系",
+      "about.debug.title": "调试面板",
+      "about.debug.open": "打开",
       "about.description": "一款为创造者而生的 AI 助手",
       "about.downloading": "正在下载更新...",
       "about.feedback.button": "反馈",

src/renderer/src/i18n/locales/zh-tw.json

@@ -905,6 +905,8 @@
       "about.checkUpdate.available": "立即更新",
       "about.contact.button": "電子郵件",
       "about.contact.title": "聯絡方式",
+      "about.debug.title": "調試面板",
+      "about.debug.open": "開啟",
       "about.description": "一款為創作者而生的強大 AI 助手",
       "about.downloading": "正在下載...",
       "about.feedback.button": "回饋",

src/renderer/src/pages/settings/AboutSettings.tsx

@@ -12,7 +12,7 @@ import { ThemeMode } from '@renderer/types'
 import { compareVersions, runAsyncFunction } from '@renderer/utils'
 import { Avatar, Button, Progress, Row, Switch, Tag } from 'antd'
 import { debounce } from 'lodash'
-import { FileCheck, Github, Globe, Mail, Rss } from 'lucide-react'
+import { Bug, FileCheck, Github, Globe, Mail, Rss } from 'lucide-react'
 import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Markdown from 'react-markdown'
@@ -69,6 +69,10 @@ const AboutSettings: FC = () => {
     onOpenWebsite(url)
   }
 
+  const debug = async () => {
+    await window.api.devTools.toggle()
+  }
+
   const showLicense = async () => {
     const { appPath } = await window.api.getAppInfo()
     openMinapp({
@@ -219,6 +223,14 @@ const AboutSettings: FC = () => {
           </SettingRowTitle>
           <Button onClick={mailto}>{t('settings.about.contact.button')}</Button>
         </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>
+            <Bug size={18} />
+            {t('settings.about.debug.title')}
+          </SettingRowTitle>
+          <Button onClick={debug}>{t('settings.about.debug.open')}</Button>
+        </SettingRow>
       </SettingGroup>
     </SettingContainer>
   )