feat: ✨ add import.meta.glob

electron-builder.json5

@@ -35,6 +35,7 @@
   "nsis": {
     "oneClick": false,
     "perMachine": false,
+    "allowElevation": true,
     "allowToChangeInstallationDirectory": true,
     "deleteAppDataOnUninstall": false
   },

electron/autoUpdater.ts

@@ -23,7 +23,8 @@ function checkUpdate(){
       type: 'info',
       title: '应用更新',
       message: '发现新版本，是否更新？',
-      buttons: ['是', '否']
+      // buttons: ['是', '否']
+      buttons: ['ok', 'cancel']
     }).then((buttonIndex) => {
       if(buttonIndex.response == 0) {  //选择是，则退出程序，安装新版本
         autoUpdater.quitAndInstall()

electron/handles/dialog.ts

@@ -1,13 +1,19 @@
-import { dialog, OpenDialogOptions, SaveDialogOptions, MessageBoxOptions } from "electron"
+import { dialog } from "electron"
 
-export async function showOpenDialog (options: OpenDialogOptions) {
+export async function showOpenDialog (options: Electron.OpenDialogOptions) {
   return dialog.showOpenDialog(options)
 }
 
-export async function showSaveDialog (options: SaveDialogOptions) {
+export async function showSaveDialog (options: Electron.SaveDialogOptions) {
   return dialog.showSaveDialog(options)
 }
 
-export async function showMessageBox (options: MessageBoxOptions) {
+export async function showMessageBox (options: Electron.MessageBoxOptions) {
   return dialog.showMessageBox(options)
 }
+
+export async function showErrorBox (title: string, content: string) {
+  return dialog.showErrorBox(title, content)
+}
+
+

electron/handles/shell.ts

@@ -1,5 +1,5 @@
-import { shell, OpenExternalOptions } from 'electron'
+import { shell } from 'electron'
 
-export function openExternal (url: string, options?: OpenExternalOptions | undefined) {
+export function openExternal (url: string, options?: Electron.OpenExternalOptions | undefined) {
   return shell.openExternal(url, options)
 }

electron/ipcMain/handle.ts

@@ -1,19 +1,24 @@
-import { ipcMain, IpcMainInvokeEvent } from 'electron'
-import { showOpenDialog, showSaveDialog, showMessageBox } from '../handles/dialog'
+import { ipcMain } from 'electron'
+import { showOpenDialog, showSaveDialog, showMessageBox, showErrorBox } from '../handles/dialog'
 
 export default function addIpcMainHandleFn () {
-  ipcMain.handle('showOpenDialog', (event: IpcMainInvokeEvent, options: Electron.OpenDialogOptions) => {
+  ipcMain.handle('showOpenDialog', (event: Electron.IpcMainInvokeEvent, options: Electron.OpenDialogOptions) => {
     console.log(event)
     return showOpenDialog(options)
   })
 
-  ipcMain.handle('showSaveDialog', (event: IpcMainInvokeEvent, options: Electron.SaveDialogOptions) => {
+  ipcMain.handle('showSaveDialog', (event: Electron.IpcMainInvokeEvent, options: Electron.SaveDialogOptions) => {
     console.log(event)
     return showSaveDialog(options)
   })
 
-  ipcMain.handle('showMessageBox', (event: IpcMainInvokeEvent, options: Electron.MessageBoxOptions) => {
+  ipcMain.handle('showMessageBox', (event: Electron.IpcMainInvokeEvent, options: Electron.MessageBoxOptions) => {
     console.log(event)
     return showMessageBox(options)
   })
+
+  ipcMain.handle('showErrorBox', (event: Electron.IpcMainInvokeEvent, title: string, content: string) => {
+    console.log(event)
+    return showErrorBox(title, content)
+  })
 }

electron/ipcMain/on.ts

@@ -1,8 +1,8 @@
-import { ipcMain, IpcMainEvent, OpenExternalOptions } from 'electron'
+import { ipcMain } from 'electron'
 import { openExternal } from '../handles/shell'
 
 export default function addIpcMainOnFn () {
-  ipcMain.on('openExternal', (event: IpcMainEvent, url: string, options?: OpenExternalOptions | undefined) => {
+  ipcMain.on('openExternal', (event: Electron.IpcMainEvent, url: string, options?: Electron.OpenExternalOptions | undefined) => {
     console.log(event)
     return openExternal(url, options)
   })

package.json

@@ -9,7 +9,7 @@
     "vite"
   ],
   "private": true,
-  "version": "0.0.1",
+  "version": "0.0.2",
   "author": {
     "name": "fxss5201",
     "email": "723107234@qq.com",

src/App.tsx

@@ -8,8 +8,7 @@ import { ConfigProvider } from 'antd'
 import dayjs from 'dayjs'
 import zh_CN from 'antd/locale/zh_CN'
 import en_GB from 'antd/locale/en_GB'
-import zhCN from '@/locales/zh-CN'
-import enUs from '@/locales/en-US'
+import localeMessage from '@/locales/index'
 import 'dayjs/locale/zh-cn'
 import 'dayjs/locale/en'
 import './App.css'
@@ -18,10 +17,6 @@ const antLocaleObj = {
   'zh-CN': zh_CN,
   'en-US': en_GB
 }
-const localeMessage = {
-  'zh-CN': zhCN,
-  'en-US': enUs
-}
 
 function App() {
   const { locale } = useLocalStore()

src/handles/dialog.ts

@@ -9,3 +9,7 @@ export function showSaveDialog (options: Electron.SaveDialogOptions): Promise<El
 export function showMessageBox (options: Electron.MessageBoxOptions): Promise<Electron.MessageBoxReturnValue> {
   return window.ipcRenderer.invoke('showMessageBox', options)
 }
+
+export function showErrorBox (title: string, content: string): Promise<void> {
+  return window.ipcRenderer.invoke('showErrorBox', title, content)
+}

src/layout/HomeLayout.tsx

@@ -1,20 +1,19 @@
 import { Outlet, useNavigate, useLocation } from 'react-router-dom';
 import {
   GithubFilled,
-  // LogoutOutlined,
   SettingFilled,
 } from '@ant-design/icons'
 import { PageContainer, ProLayout } from '@ant-design/pro-components'
 import { Suspense, useState } from 'react'
 import { routers } from '@/router/index'
-// import { Dropdown } from 'antd'
-import { Spin, Tooltip } from "antd"
+import { Spin, Tooltip, Drawer } from "antd"
 import { homepage } from './../../package.json'
 import config from '@/config/index'
 import { FormattedMessage, useIntl } from 'react-intl'
 import useLocalStore from '@/hooks/localStore'
 import type { ProSettings } from '@ant-design/pro-components'
 import { openExternal } from '@/handles/shell'
+import SettingPage from '@/pages/SettingPage'
 
 const HomeLayout = () => {
   const navigate = useNavigate()
@@ -36,14 +35,22 @@ const HomeLayout = () => {
     setCollapsed(val)
   }
 
-  const settingClickFn = () => {
-    navigate('/setting')
-  }
+  // const settingClickFn = () => {
+  //   navigate('/setting')
+  // }
 
   const githubClickFn = () => {
     openExternal(homepage)
   }
 
+  const [drawerOpen, setDrawerOpen] = useState(false)
+  const showDrawer = () => {
+    setDrawerOpen(true)
+  }
+  const onDrawerClose = () => {
+    setDrawerOpen(false)
+  }
+
   return (
     <div
       style={{
@@ -68,7 +75,7 @@ const HomeLayout = () => {
         actionsRender={() => {
           return [
             <Tooltip title={<FormattedMessage id="menu.setting"></FormattedMessage>} placement='bottom'>
-              <SettingFilled key="SettingFilled" onClick={settingClickFn} />
+              <SettingFilled key="SettingFilled" onClick={showDrawer} />
             </Tooltip>,
             <Tooltip title="Github" placement='bottom'>
               <GithubFilled key="GithubFilled" onClick={githubClickFn} />
@@ -96,6 +103,9 @@ const HomeLayout = () => {
           </Suspense>
         </PageContainer>
       </ProLayout>
+      <Drawer title={intl.formatMessage({id: 'menu.setting'})} onClose={onDrawerClose} open={drawerOpen} width="50%">
+        <SettingPage></SettingPage>
+      </Drawer>
     </div>
   );
 };

src/locales/en-US.ts

@@ -1,6 +1,3 @@
-import SettingPageEn from "./pages/SettingPage/en-US"
-import ApiDialogEn from "./pages/ApiDialog/en-US"
-
 export default {
   'Welcome to React': 'Welcome to React and react-i18next',
   '404subTitle': 'Sorry, the page you visited does not exist.',
@@ -18,8 +15,4 @@ export default {
   'menu.Home': 'Home',
   'menu.dialog': 'dialog',
   'menu.setting': 'setting',
-
-  // 页面
-  ...SettingPageEn,
-  ...ApiDialogEn
 }

src/locales/index.ts

@@ -0,0 +1,23 @@
+interface localeFile {
+  [key: string]: string
+}
+
+const modules = import.meta.glob<localeFile>(['./pages/**/*.ts', './en-US.ts', './zh-CN.ts'], {
+  import: 'default',
+  eager: true
+})
+
+const locales = {
+  'en-US': {},
+  'zh-CN': {}
+}
+
+for (const path in modules) {
+  if (path.includes('en-US')) {
+    Object.assign(locales['en-US'], modules[path])
+  } else if (path.includes('zh-CN')) {
+    Object.assign(locales['zh-CN'], modules[path])
+  }
+}
+
+export default locales

src/locales/pages/ApiDialog/en-US.ts

@@ -6,7 +6,10 @@ const ApiDialogEn = {
   'open messageBox': 'open messageBox {name}',
   'messageBox title': 'messageBox title',
   'messageBox message': 'messageBox message',
-  'open messageBox checkbox': 'open messageBox checkbox'
+  'open messageBox checkbox': 'open messageBox checkbox',
+  'open showErrorBox': 'open showErrorBox',
+  'ErrorBox title': 'ErrorBox title',
+  'ErrorBox content': 'ErrorBox content'
 }
 
 export default ApiDialogEn

src/locales/pages/ApiDialog/zh-CN.ts

@@ -6,7 +6,10 @@ const ApiDialogZh = {
   'open messageBox': '打开messageBox {name}',
   'messageBox title': 'messageBox 标题',
   'messageBox message': 'messageBox 内容',
-  'open messageBox checkbox': '打开messageBox带checkbox'
+  'open messageBox checkbox': '打开messageBox带checkbox',
+  'open showErrorBox': '打开showErrorBox',
+  'ErrorBox title': 'ErrorBox 标题',
+  'ErrorBox content': 'ErrorBox 内容'
 }
 
 export default ApiDialogZh

src/locales/zh-CN.ts

@@ -1,6 +1,3 @@
-import SettingPageZh from "./pages/SettingPage/zh-CN"
-import ApiDialogZh from "./pages/ApiDialog/zh-CN"
-
 export default {
   'Welcome to React': '欢迎来到React',
   '404subTitle': '抱歉，您访问的页面不存在。',
@@ -18,8 +15,4 @@ export default {
   'menu.Home': '首页',
   'menu.dialog': 'dialog',
   'menu.setting': '设置',
-
-  // 页面
-  ...SettingPageZh,
-  ...ApiDialogZh
 }

src/pages/SettingPage.tsx

@@ -20,8 +20,7 @@ function SettingPage () {
       <Card size="small" title={intl.formatMessage({id: 'language'})}>
         <Form
           name="basic"
-          labelCol={{ span: 4 }}
-          wrapperCol={{ span: 4 }}
+          layout="vertical"
           autoComplete="off"
           initialValues={{local: localeDefault}}
         >

src/pages/api/ApiDialog.tsx

@@ -1,5 +1,5 @@
 import { Button, Flex } from 'antd'
-import { showOpenDialog, showSaveDialog, showMessageBox } from '@/handles/dialog' 
+import { showOpenDialog, showSaveDialog, showMessageBox, showErrorBox } from '@/handles/dialog' 
 import { useState } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 
@@ -45,23 +45,29 @@ function DialogOpenFilePage () {
   const messageBoxTypes: messageBoxType[] = ['info', 'error', 'question', 'warning']
   const showMessageBoxFn = async (type: messageBoxType) => {
     const { response } = await showMessageBox({
-      title: 'messageBox title',
-      message: 'messageBox message',
+      title: intl.formatMessage({id: 'messageBox title'}),
+      message: intl.formatMessage({id: 'messageBox message'}),
       type,
-      buttons: [intl.formatMessage({id: 'button.okText'}), intl.formatMessage({id: 'button.cancelText'})]
+      // buttons: [intl.formatMessage({id: 'button.okText'}), intl.formatMessage({id: 'button.cancelText'})]
+      buttons: ['ok', 'cancel']
     })
     alert(`response: ${response}`)
   }
   const showMessageBoxCheckboxFn = async () => {
     const { response, checkboxChecked } = await showMessageBox({
-      title: 'messageBox title',
-      message: 'messageBox message',
+      title: intl.formatMessage({id: 'messageBox title'}),
+      message: intl.formatMessage({id: 'messageBox message'}),
       checkboxLabel: 'checkboxLabel',
       checkboxChecked: false,
-      buttons: [intl.formatMessage({id: 'button.okText'}), intl.formatMessage({id: 'button.cancelText'})]
+      // buttons: [intl.formatMessage({id: 'button.okText'}), intl.formatMessage({id: 'button.cancelText'})]
+      buttons: ['ok', 'cancel']
     })
     alert(`response: ${response}, checkboxChecked: ${checkboxChecked}`)
   }
+
+  const showErrorBoxFn = async () => {
+    await showErrorBox(intl.formatMessage({id: 'ErrorBox title'}), intl.formatMessage({id: 'ErrorBox content'}))
+  }
 
   return (
     <>
@@ -114,6 +120,15 @@ function DialogOpenFilePage () {
           </div>
         </div>
       </div>
+
+      <div className="mb-2">
+        <div className="text-xl pb-2 border-b border-slate-300">showErrorBox</div>
+        <div className="pt-2">
+          <Button type="primary" onClick={showErrorBoxFn}>
+            <FormattedMessage id='open showErrorBox'></FormattedMessage>
+          </Button>
+        </div>
+      </div>
     </>
   )
 }

src/router/index.ts

@@ -8,7 +8,6 @@ const OutletPage = lazy(() => import('@/pages/OutletPage'))
 
 const ErrorPage = lazy(() => import('@/error-page'))
 const HomePage = lazy(() => import('@/pages/HomePage'))
-const SettingPage = lazy(() => import('@/pages/SettingPage'))
 const ApiDialog = lazy(() => import('@/pages/api/ApiDialog'))
 
 export const routers: FanRouteObject = {
@@ -45,14 +44,14 @@ export const routers: FanRouteObject = {
           Component: ApiDialog,
         }
       ],
-    },
-    {
-      path: '/setting',
-      name: '设置',
-      locale: 'menu.setting',
-      Component: SettingPage,
-      hideInMenu: true,
     }
+    // {
+    //   path: '/setting',
+    //   name: '设置',
+    //   locale: 'menu.setting',
+    //   Component: SettingPage,
+    //   hideInMenu: true,
+    // }
   ]
 }