/**
 * Electron主進(jìn)程入口
 * @author Hs
 */

const { app, BrowserWindow } = require('electron')

const Windows = require('./src/windows')

// 忽略安全警告
// ectron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

const createWindow = () => {
    let win = new Windows()
    win.createWin({ isMainWin: true })
}

app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

/**
 * Electron預(yù)加載腳本
 * @author Hs  Q：282310962
 */

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
    // 通過 channel 向主進(jìn)程發(fā)送異步消息。主進(jìn)程使用 ipcMain.on() 監(jiān)聽 channel
    send: (channel, data) => {
        ipcRenderer.send(channel, data)
    },

    // 通過 channel 向主進(jìn)程發(fā)送消息，并異步等待結(jié)果。主進(jìn)程應(yīng)該使用 ipcMain.handle() 監(jiān)聽 channel
    invoke: (channel, data) => {
        return new Promise(resolve => ipcRenderer.invoke(channel, data).then(res => resolve(res)).catch(e => console.log(e)))
    },

    // 監(jiān)聽 channel 事件
    receive: (channel, func) => {
        console.log("preload-receive called. args: ")
        ipcRenderer.on(channel, (event, ...args) => func(event, ...args))
    },

    // 一次性監(jiān)聽事件
    once: (channel, func) => {
        ipcRenderer.once(channel, (event, ...args) => func(event, ...args))
    }
})

/**
 * 入口文件
 * @author Hs
*/

import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import '@arco-design/web-react/dist/css/arco.css'
import './styles/common.scss'

import { launchWin } from '@/windows/action'

launchWin().then(config => {
    console.log('——+——+——窗口參數(shù)：', config)
    console.log('——+——+——窗口id：', config.id)

    // 設(shè)置全局存儲窗口配置
    window.config = config

    ReactDOM.createRoot(document.getElementById('root')).render(<App />)
})

import { useEffect, useMemo } from 'react'
import { HashRouter } from 'react-router-dom'
// 通過 ConfigProvider 組件實現(xiàn)國際化
import { ConfigProvider } from '@arco-design/web-react'
// 引入語言包
import enUS from '@arco-design/web-react/es/locale/en-US'
import zhCN from '@arco-design/web-react/es/locale/zh-CN'
import zhTW from '@arco-design/web-react/es/locale/zh-TW'

import { AuthRouter } from '@/hooks/useRoutes'
import { appStore } from '@/store/app'

// 引入路由配置
import Router from './router'

function App() {
    const { lang, config: { mode, theme }, setMode, setTheme } = appStore()

    const locale = useMemo(() => {
        switch(lang) {
            case 'en':
                return enUS
            case 'zh-CN':
                return zhCN
            case 'zh-TW':
                return zhTW
            default:
                return zhCN
        }
    }, [lang])

    useEffect(() => {
        setMode(mode)
        setTheme(theme)
    }, [])

    return (
        <ConfigProvider locale={locale}>
            <HashRouter>
                <AuthRouter>
                    <Router />
                </AuthRouter>
            </HashRouter>
        </ConfigProvider>
    )
}

export default App

import { Dropdown, Menu, Button } from '@arco-design/web-react'
import Icon from '@components/Icon'
import { appStore } from '@/store/app'

export default function Lang() {
    const { lang, setLang } = appStore()

    const handleLang = val => {
        setLang(val)
    }

    return (
        <Dropdown
            position="bottom"
            droplist={
                <Menu className="radmin__dropdownLang" defaultSelectedKeys={[lang]} onClickMenuItem={handleLang}>
                    <Menu.Item key='zh-CN'>簡體中文 <span>zh-CN</span></Menu.Item>
                    <Menu.Item key="zh-TW">繁體字 <span>zh-TW</span></Menu.Item>
                    <Menu.Item key="en">英文 <span>en</span></Menu.Item>
                </Menu>
            }
        >
            <Button
                shape="circle"
                size="small"
                icon={<Icon name="ve-icon-lang" />}
            />
        </Dropdown>
    )
}

/**
 * react狀態(tài)管理庫Zustand4，中間件persist本地持久化存儲
*/
import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'
import { generate, getRgbStr } from '@arco-design/color'

export const appStore = create(
    persist(
        (set, get) => ({
            // 語言(中文zh-CN 英文en 繁體字zh-TW)
            lang: 'zh-CN',
            // 角色類型 roles: ['admin'] / roles: ['admin', 'dev'] / roles: ['dev', test']
            roles: ["dev"],
            // 配置信息
            config: {
                // 布局(分欄columns 縱向vertical 橫向transverse)
                layout: 'columns',
                // 模式(亮色light - 暗黑dark)
                mode: 'light',
                // 主題色
                theme: '#3491FA',
                // 是否折疊菜單
                collapsed: false,
                // 開啟面包屑導(dǎo)航
                breadcrumb: true,
                // 開啟標(biāo)簽欄
                tabsview: true,
                tabRoutes: [],
                // 顯示搜索
                showSearch: true,
                // 顯示全屏
                showFullscreen: true,
                // 顯示語言
                showLang: true,
                // 顯示公告
                showNotice: true,
                // 顯示底部
                showFooter: false
            },
            
            // 更新配置
            updateConfig: (key, value) => set({
                config: { ...get().config, [key]: value }
            }),
            // 設(shè)置角色
            setRoles: (roles) => set({roles}),
            // 設(shè)置多語言
            setLang: (lang) => set({lang}),
            // 設(shè)置主題模式
            setMode: (mode) => {
                if(mode == 'dark') {
                    // 設(shè)置為暗黑主題
                    document.body.setAttribute('arco-theme', 'dark')
                }else {
                    // 恢復(fù)亮色主題
                    document.body.removeAttribute('arco-theme')
                }
                get().updateConfig('mode', mode)
            },
            // 設(shè)置主題樣式
            setTheme: (theme) => {
                const colors = generate(theme, { list: true })
                colors.map((item, index) => {
                    const rgbStr = getRgbStr(item)
                    document.body.style.setProperty(`--arcoblue-${index + 1}`, rgbStr)
                })
                get().updateConfig('theme', theme)
            }
        }),
        {
            name: 'appState'
        }
    )
)

import { appStore } from '@/store/app'

// 引入語言配置
import enUS from './en-US'
import zhCN from './zh-CN'
import zhTW from './zh-TW'

export const locales = {
    'en': enUS,
    'zh-CN': zhCN,
    'zh-TW': zhTW
}

export default (locale) => {
    const appState = appStore()
    const lang = appState.lang || 'zh-CN'

    return (locale || locales)[lang] || {}
}