enhance splash style

packages/ui/package.json

@@ -34,6 +34,7 @@
     "@geekgeekrun/utils": "workspace:*",
     "@puppeteer/browsers": "^2.0.0",
     "JSONStream": "^1.3.5",
+    "animate.css": "^4.1.1",
     "electron-updater": "^6.1.7",
     "element-plus": "^2.5.5",
     "find-chrome-bin": "^2.0.1",

packages/ui/src/renderer/src/main.ts

@@ -6,5 +6,6 @@ import 'normalize.css'
 import './style/public.scss'
 import 'element-plus/dist/index.css'
 import 'virtual:uno.css'
+import 'animate.css'
 
 createApp(App).use(router).use(ElementPlus).mount('#app')

packages/ui/src/renderer/src/page/BootstrapSplash/index.vue

@@ -1,10 +1,24 @@
 <template>
-  <div>
-    <div>愿你薪想事成</div>
-    <RouterView
-      :dependencies-status="checkDependenciesResult"
-      :process-waitee="downloadProcessWaitee"
-    ></RouterView>
+  <div class="h-screen flex flex-col flex-items-center flex-justify-center">
+    <div>
+      <img
+        class="block"
+        :class="{
+          'animate__animated animate__bounce animate__repeat-3':
+            Object.values(checkDependenciesResult).includes(false)
+        }"
+        :width="256"
+        src="@renderer/../../../resources/icon.png"
+      />
+    </div>
+    <div mt24px>愿你薪想事成</div>
+    <div class="h60px mt14px">
+      <RouterView
+        class="h100%"
+        :dependencies-status="checkDependenciesResult"
+        :process-waitee="downloadProcessWaitee"
+      ></RouterView>
+    </div>
   </div>
 </template>
 

packages/ui/src/renderer/src/page/BootstrapSplash/page/DownloadingDependencies.vue

@@ -1,10 +1,11 @@
 <template>
-  <div v-if="!dependenciesStatus.puppeteerExecutableAvailable">
-    <div mb14px>正在下载核心组件</div>
+  <div class="flex flex-col flex-items-start flex-justify-start" v-if="!dependenciesStatus.puppeteerExecutableAvailable">
+    <div mb14px>正在下载兼容的浏览器</div>
     <el-progress
       :percentage="browserDownloadPercentage"
       :format="(n) => `${n.toFixed(1)}%`"
       :stroke-width="10"
+      class="w400px"
     />
   </div>
 </template>

packages/ui/src/renderer/src/router/index.ts

@@ -54,7 +54,7 @@ const routes: Array<RouteRecordRaw> = [
         path: '/downloadingDependencies',
         component: () => import('@renderer/page/BootstrapSplash/page/DownloadingDependencies.vue'),
         meta: {
-          title: '正在下载浏览器'
+          title: '正在下载核心组件'
         },
       }
     ]

pnpm-lock.yaml

@@ -118,6 +118,9 @@ importers:
       JSONStream:
         specifier: ^1.3.5
         version: 1.3.5
+      animate.css:
+        specifier: ^4.1.1
+        version: 4.1.1
       electron-updater:
         specifier: ^6.1.7
         version: 6.1.7
@@ -2115,6 +2118,10 @@ packages:
       uri-js: 4.4.1
     dev: true
 
+  /animate.css@4.1.1:
+    resolution: {integrity: sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==}
+    dev: false
+
   /ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}