升级依赖及增加loding效果

QuiteerJs · Mar 10, 2023 · e2a6866 · e2a6866
1 parent 6ef7a02
commit e2a6866
Show file tree

Hide file tree

Showing 7 changed files with 266 additions and 150 deletions.
diff --git a/main/index.ts b/main/index.ts
@@ -1,4 +1,3 @@
-import { BrowserWindow } from 'electron'
 import { Ipc } from '@quiteer/electron-ipc'
 import preload from '@quiteer/electron-preload'
 import { appInstance, logError, windowInstance } from '@youliso/electronic'
@@ -8,11 +7,12 @@ appInstance.start().then(async () => {
   Ipc.init()
 
   windowInstance.setDefaultCfg({
+    defaultLoadType: 'url',
     defaultUrl: loadUrl,
     defaultPreload: preload as string
   })
 
-  const mainId = await windowInstance.create(
+  const main = await windowInstance.create(
     {
       title: 'main',
       route: '/',
@@ -27,14 +27,14 @@ appInstance.start().then(async () => {
     }
   )
 
-  const win = BrowserWindow.fromId(mainId!)!
+  main?.webContents.openDevTools()
 
-  const childId = await windowInstance.create(
+  const child = await windowInstance.create(
     {
       title: 'child',
-      route: '/',
+      url: 'https://cn.vuejs.org/',
       headNative: true,
-      parentId: mainId
+      parentId: main?.id
     },
     {
       height: 700,
@@ -45,19 +45,22 @@ appInstance.start().then(async () => {
       }
     }
   )
-  const child = BrowserWindow.fromId(childId!)!
 
-  win.once('ready-to-show', () => {
+  child?.webContents.openDevTools()
+  main && windowInstance.load(main).catch(logError)
+  child && windowInstance.load(child)
+
+  main?.on('unmaximize', () => {
     setTimeout(() => {
-      const [x, y] = win.getPosition()
+      const [x, y] = main!.getPosition()
       console.log('x, y: ', x, y)
-      child.setPosition(x + 990, y)
-      child.show()
-    }, 1300)
+      child!.setPosition(x + 990, y)
+      child!.show()
+    }, 1000)
   })
 
-  win.on('will-move', (event, newBounds) => {
-    child.setPosition(newBounds.x + 990, newBounds.y)
+  main!.on('will-move', (event, newBounds) => {
+    child!.setPosition(newBounds.x + 990, newBounds.y)
   })
 })
   .catch(logError)

diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
   "dependencies": {
     "@quiteer/electron-ipc": "^0.1.0",
     "@quiteer/electron-preload": "^0.0.9",
+    "echarts": "^5.4.1",
     "sqlite3": "^5.1.4"
   },
   "devDependencies": {
@@ -35,16 +36,17 @@
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
     "@vueuse/core": "^9.13.0",
-    "@youliso/electronic": "^0.1.2",
+    "@youliso/electronic": "^0.2.4",
     "electron": "^22.0.0",
     "electron-updater": "^5.3.0",
     "eslint": "^8.35.0",
     "naive-ui": "^2.34.3",
     "pinia": "^2.0.33",
+    "sass": "^1.58.3",
     "unplugin-auto-import": "^0.15.1",
     "unplugin-icons": "^0.15.3",
     "unplugin-vue-components": "^0.24.1",
-    "unplugin-vue-macros": "^1.9.1",
+    "unplugin-vue-macros": "^1.10.0",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6",
     "vue-tsc": "^1.2.0"

diff --git a/render/index.html b/render/index.html
@@ -7,7 +7,9 @@
     <title>Vite + Vue + TS</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app">
+      <div id="app-loading"></div>
+    </div>
     <script type="module" src="./main.ts"></script>
   </body>
 </html>
diff --git a/render/loading/index.vue b/render/loading/index.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { init } from 'echarts'
+
+const chartDom = ref<HTMLElement>()
+
+onMounted(() => {
+  console.log('chartDom: ', chartDom)
+
+  chartDom.value && init(chartDom.value).setOption({
+    graphic: {
+      elements: [
+        {
+          type: 'text',
+          left: 'center',
+          top: 'center',
+          style: {
+            text: 'Electron Up !',
+            fontSize: 80,
+            fontWeight: 'bold',
+            lineDash: [0, 200],
+            lineDashOffset: 0,
+            fill: '#c6e6e8',
+            stroke: '#c0c4c3',
+            lineWidth: 1
+          },
+          keyframeAnimation: {
+            duration: 3000,
+            loop: true,
+            keyframes: [
+              {
+                percent: 0.7,
+                style: {
+                  fill: 'transparent',
+                  lineDashOffset: 200,
+                  lineDash: [200, 0]
+                }
+              },
+              {
+              // Stop for a while.
+                percent: 0.8,
+                style: {
+                  fill: '#648e93'
+                }
+              },
+              {
+                percent: 1,
+                style: {
+                  fill: '#c4d7d6'
+                }
+              }
+            ]
+          }
+        }
+      ]
+    }
+  })
+})
+</script>
+
+<template>
+  <div ref="chartDom" style="height:600px;" />
+</template>
+
diff --git a/render/main.ts b/render/main.ts
@@ -2,16 +2,21 @@ import './styles/style.css'
 import { EventKeys, IpcWindowOptions } from '@quiteer/electron-ipc/web'
 import { createPinia } from 'pinia'
 import App from './App.vue'
+import Loading from './loading/index.vue'
 
-const app = createApp(App)
-app.use(createPinia()).mount('#app')
+createApp(Loading).mount('#app-loading')
 
-console.log(import.meta.env)
-
-// 窗口最大化
-window.$ipc.send(EventKeys.WindowOptionsKey, IpcWindowOptions.MAXIMIZE)
 setTimeout(() => {
+  const app = createApp(App)
+  app.use(createPinia()).mount('#app')
+
+  console.log(import.meta.env)
+
+  // 窗口最大化
+  window.$ipc.send(EventKeys.WindowOptionsKey, IpcWindowOptions.MAXIMIZE)
+  setTimeout(() => {
   // 取消最大化
-  window.$ipc.send(EventKeys.WindowOptionsKey, IpcWindowOptions.UNMAXIMIZE)
-}, 1000)
+    window.$ipc.send(EventKeys.WindowOptionsKey, IpcWindowOptions.UNMAXIMIZE)
+  }, 1000)
+}, 3000)
 
diff --git a/render/styles/style.css b/render/styles/style.css
@@ -79,3 +79,12 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+
+#app-loading{
+  position:absolut;
+  top:0;
+  left:0;
+  width:90vw;
+  height:90vh;
+}