Browse Source

优化

feat/icon
谢亚昕 5 days ago
parent
commit
6692e16720
  1. 3
      config/index.ts
  2. 8
      packages/logger/main.ts
  3. 2
      packages/setting/main.ts
  4. 12
      src/common/event/PlatForm/index.ts
  5. 35
      src/common/event/PlatForm/main/command.ts
  6. 20
      src/main/modules/window-manager/index.ts
  7. 27
      src/main/modules/window-manager/windowsMap.ts
  8. 4
      src/main/utils/index.ts
  9. 10
      src/renderer/about.html
  10. 9
      src/renderer/src/App.vue
  11. 17
      src/renderer/src/components/NavBar.vue
  12. 31
      src/renderer/src/pages/demo.vue
  13. 22
      src/renderer/src/pages/index.vue
  14. 1
      src/renderer/typed-router.d.ts

3
config/index.ts

@ -1,3 +1,4 @@
import { LogLevel } from "logger/common"
// 定义主题类型
type ThemeType = "light" | "dark" | "auto"
// 定义语言类型
@ -9,6 +10,7 @@ type LogoType = "logo" | "bg"
export interface IDefaultConfig {
language: LanguageType
"common.theme": ThemeType
"debug": LogLevel,
"desktop:wallpaper": string
"update.repo"?: string
"update.owner"?: string
@ -31,6 +33,7 @@ export default {
default_config: {
storagePath: "$storagePath$",
language: "zh",
debug: LogLevel.INFO,
"common.theme": "auto",
"desktop:wallpaper": "",
"editor.bg": "",

8
packages/logger/main.ts

@ -1,6 +1,7 @@
import { app, ipcMain } from "electron"
import fs from "fs"
import path from "path"
import setting from "setting/main"
import * as rfs from "rotating-file-stream"
import { LogLevel, LogLevelColor, LogLevelName } from "./common"
@ -20,7 +21,7 @@ export interface LoggerOptions {
// 默认配置
const DEFAULT_OPTIONS: LoggerOptions = {
level: LogLevel.INFO,
level: setting.values("debug"),
namespace: "app",
console: true,
file: true,
@ -155,7 +156,7 @@ export class Logger {
*
*/
public getLevel(): LogLevel {
return this.options.level || LogLevel.INFO
return this.options.level ?? LogLevel.INFO
}
/**
@ -259,6 +260,9 @@ export class Logger {
// 默认实例
const logger = Logger.getInstance()
logger.init()
setting.onChange("debug", function(n){
logger.setLevel(n.debug)
})
// 应用退出时关闭日志流
if (process.type === "browser" && app) {

2
packages/setting/main.ts

@ -118,7 +118,7 @@ class SettingClass {
// this.#config[key] = config[key] || this.#config[key]
// }
// 删除配置时本地的配置不会改变,想一下哪种方式更好
this.#config[key] = config[key] || this.#config[key]
this.#config[key] = config[key] ?? this.#config[key]
}
}
init() {

12
src/common/event/PlatForm/index.ts

@ -1,5 +1,6 @@
import { _Base } from "common/lib/_Base"
import { ApiFactory } from "common/lib/abstract"
import { LogLevel } from "packages/logger/common"
class PlatForm extends _Base {
constructor() {
@ -10,8 +11,17 @@ class PlatForm extends _Base {
return ApiFactory.getApiClient()
}
async logSetLevel(level: LogLevel) {
return this.api.call("PlatFormCommand.logSetLevel", level)
}
async logGetLevel() {
return this.api.call("PlatFormCommand.logGetLevel")
}
async showAbout() {
return this.api.call("BasicService.showAbout")
// return this.api.call("BasicService.showAbout")
return this.api.call("PlatFormCommand.showAbout")
}
async crash() {

35
src/common/event/PlatForm/main/command.ts

@ -3,6 +3,10 @@ import { inject } from "inversify"
import errorHandler from "logger/main-error"
import Tabs from "main/modules/tabs"
import WindowManager from "main/modules/window-manager"
import { getFileUrl } from "main/utils"
import icon from "@res/icon.png?asset"
import setting from "setting/main"
import { LogLevel } from "logger/common"
export default class PlatFormCommand {
constructor(
@ -14,6 +18,14 @@ export default class PlatFormCommand {
nativeTheme.themeSource = theme
}
logSetLevel(level: LogLevel) {
return setting.set("debug", level)
}
logGetLevel() {
return setting.values("debug")
}
setTitlBar(options: TitleBarOverlayOptions) {
const mainWindow = this._WindowManager.getMainWindow()
if (mainWindow) {
@ -22,7 +34,28 @@ export default class PlatFormCommand {
}
showAbout() {
this._WindowManager.showWindow("about")
this._WindowManager.createWindow("about", {
url: getFileUrl("about.html"),
overideWindowOpts: true,
confrimWindowClose: false,
type: "info",
windowOpts: {
width: 600,
height: 400,
minimizable: false,
darkTheme: true,
modal: true,
show: false,
resizable: false,
icon: icon,
webPreferences: {
devTools: false,
sandbox: false,
nodeIntegration: false,
contextIsolation: true,
},
},
})
}
toggleDevTools() {

20
src/main/modules/window-manager/index.ts

@ -4,8 +4,9 @@ import { defaultConfig, defaultWindowConfig, getWindowsMap, IConfig, Param } fro
import { optimizer } from "@electron-toolkit/utils"
import BaseClass from "main/base/base"
import _debug from "debug"
import _logger from "logger/main"
const debug = _debug("app:window-manager")
const logger = _logger.createNamespace("modlue:window-manager") // _debug("app:window-manager")
declare module "electron" {
interface BrowserWindow {
@ -36,6 +37,7 @@ export default class WindowManager extends BaseClass {
dialog.showErrorBox("错误", "窗口未指定唯一key")
return
}
logger.debug("创建窗口的参数:", info)
const index = this.findIndex(info.name)
if (index === -1) {
this.#windows.push(this.#add(info))
@ -63,6 +65,16 @@ export default class WindowManager extends BaseClass {
await this.isMainShowReady
}
createWindow(name: string, opts?: Partial<IConfig>){
let info = opts as Param
info.name = name
if (!info.ignoreEmptyUrl && !info.url) {
dialog.showErrorBox("错误", name + "窗口未提供url")
return
}
this.#showWin(info as Param)
}
showWindow(name: string, opts?: Partial<IConfig>) {
let have = false
for (const key in this.#urlMap) {
@ -245,7 +257,7 @@ export default class WindowManager extends BaseClass {
if (curConfig.windowOpts?.show === false) {
if (curConfig.url) {
browserWin.once("ready-to-show", () => {
debug(`准备展示:`, curConfig.url)
logger.debug(`准备展示:`, curConfig.url)
browserWin?.show()
})
} else {
@ -257,9 +269,9 @@ export default class WindowManager extends BaseClass {
showCurrentWindow() {
if (this.#windows.length) {
debug(`current open window: ${this.#windows.map(v => v.$$opts!.name).join(",")}`)
logger.debug(`current open window: ${this.#windows.map(v => v.$$opts!.name).join(",")}`)
} else {
debug(`all closed`)
logger.debug(`all closed`)
}
}

27
src/main/modules/window-manager/windowsMap.ts

@ -1,8 +1,7 @@
import config from "config"
import { BrowserWindowConstructorOptions } from "electron"
import { getFileUrl } from "main/utils"
import { getFileUrl, getPreloadUrl } from "main/utils"
import icon from "@res/icon.png?asset"
import { join } from "path"
export type Param = Partial<IConfig> & Required<Pick<IConfig, "name">>
@ -64,7 +63,7 @@ export function getWindowsMap(): Record<string, IConfig> {
...(process.platform === "linux" ? { icon } : {}),
webPreferences: {
webviewTag: false,
preload: join(__dirname, "../preload/index.mjs"),
preload: getPreloadUrl("index"),
nodeIntegration: true,
contextIsolation: true,
},
@ -104,27 +103,5 @@ export function getWindowsMap(): Record<string, IConfig> {
},
},
},
"^about": {
url: getFileUrl("about.html"),
overideWindowOpts: true,
confrimWindowClose: false,
type: "info",
windowOpts: {
width: 600,
height: 200,
minimizable: false,
darkTheme: true,
modal: true,
show: false,
resizable: false,
icon: icon,
webPreferences: {
devTools: false,
sandbox: false,
nodeIntegration: false,
contextIsolation: true,
},
},
},
}
}

4
src/main/utils/index.ts

@ -12,6 +12,10 @@ export function getFileUrl(app: string) {
return slash(winURL)
}
export function getPreloadUrl(file){
return join(__dirname, `../preload/${file}.mjs`)
}
export function isPromise(value: () => any) {
return value && Object.prototype.toString.call(value) === "[object Promise]"
}

10
src/renderer/about.html

@ -13,16 +13,18 @@
padding: 0;
outline: none;
border: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 10px 20px;
}
</style>
</head>
<body>
<article>
<h1 id="demo" style="text-align: center">您好,亲爱的冒险者!</h1>
<h1>环境</h1>
<ul>
<li>111</li>
</ul>
</article>
</body>
</html>

9
src/renderer/src/App.vue

@ -1,14 +1,7 @@
<script setup lang="ts">
function throwAnError() {
throw new Error('Error thrown from throwAnError function');
}
</script>
<template>
<div h-full flex flex-col overflow-hidden>
<NavBar></NavBar>
<div flex-1 h-0 overflow-hidden flex flex-col>
<button @click="throwAnError">抛出错误</button>
<router-view v-slot="{ Component, route }">
<Transition name="slide-fade" mode="out-in">
<component :is="Component" :key="route.fullPath" />
@ -29,7 +22,7 @@ function throwAnError() {
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateX(20px);
// transform: translateX(20px);
opacity: 0;
}
</style>

17
src/renderer/src/components/NavBar.vue

@ -43,15 +43,18 @@
import config from "config"
import { PopupMenu } from "@/bridge/PopupMenu"
import { usePlatForm } from "common/event/PlatForm/hook"
import { LogLevel } from "logger/common"
const PlatForm = usePlatForm()
const router = useRouter()
const route = useRoute()
const isFullScreen = ref(false)
const curLogLevel = ref<LogLevel>()
onBeforeMount(async () => {
isFullScreen.value = await PlatForm.isFullScreen()
curLogLevel.value = await PlatForm.logGetLevel()
})
const isHome = computed(() => {
@ -65,7 +68,7 @@
router.push("/")
}
const { t } = useI18n()
const onClickMenu = e => {
const onClickMenu = async e => {
const menu = new PopupMenu([
{
label: isFullScreen.value ? t("browser.navbar.menu.quit-fullscreen") : t("browser.navbar.menu.fullscreen"),
@ -92,6 +95,18 @@
PlatForm.crash()
},
},
{
label: curLogLevel.value === LogLevel.TRACE ? "关闭调试模式" : "开启调试模式",
async click() {
if(curLogLevel.value === LogLevel.TRACE) {
await PlatForm.logSetLevel(LogLevel.INFO)
curLogLevel.value = LogLevel.INFO
return
}
await PlatForm.logSetLevel(LogLevel.TRACE)
curLogLevel.value = LogLevel.TRACE
},
},
])
const obj = e.target.getBoundingClientRect()
menu.show({ x: ~~obj.x, y: ~~(obj.y + obj.height) })

31
src/renderer/src/pages/demo.vue

@ -0,0 +1,31 @@
<script setup lang="ts">
definePage({
meta: {
home: true,
},
})
const state = reactive({
content: "",
name: "aaa.ts",
})
</script>
<template>
<div class="locale-changer">
<select v-model="$i18n.locale">
<option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">{{ locale }}</option>
</select>
</div>
<div @click="$router.push('/about')">
<span>跳转 about</span>
</div>
<div @click="$router.push('/browser')">
<span>跳转 browser</span>
</div>
<input v-model="state.content" />
<CodeEditor v-model="state.content" style="height: 400px" :name="state.name" placeholder="输入代码"></CodeEditor>
<div v-for="i in 1000" :key="i">
<span>{{ i }}</span>
</div>
</template>

22
src/renderer/src/pages/index.vue

@ -4,28 +4,10 @@
home: true,
},
})
const state = reactive({
content: "",
name: "aaa.ts",
})
</script>
<template>
<div class="locale-changer">
<select v-model="$i18n.locale">
<option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">{{ locale }}</option>
</select>
</div>
<div @click="$router.push('/about')">
<span>跳转 about</span>
</div>
<div @click="$router.push('/browser')">
<span>跳转 browser</span>
</div>
<input v-model="state.content" />
<CodeEditor v-model="state.content" style="height: 400px" :name="state.name" placeholder="输入代码"></CodeEditor>
<div v-for="i in 1000" :key="i">
<span>{{ i }}</span>
<div>
sad
</div>
</template>

1
src/renderer/typed-router.d.ts

@ -22,5 +22,6 @@ declare module 'vue-router/auto-routes' {
'/[...all]': RouteRecordInfo<'/[...all]', '/:all(.*)', { all: ParamValue<true> }, { all: ParamValue<false> }>,
'about': RouteRecordInfo<'about', '/about', Record<never, never>, Record<never, never>>,
'/browser': RouteRecordInfo<'/browser', '/browser', Record<never, never>, Record<never, never>>,
'/demo': RouteRecordInfo<'/demo', '/demo', Record<never, never>, Record<never, never>>,
}
}

Loading…
Cancel
Save