From b0a43475576436689d96b589a59ee12e7dd77a8b Mon Sep 17 00:00:00 2001
From: geekgeekrun <geekgeekrun>
Date: Wed, 27 Mar 2024 09:29:51 +0800
Subject: [PATCH] enhance splash style

---
 packages/ui/package.json                      |  1 +
 packages/ui/src/renderer/src/main.ts          |  1 +
 .../src/page/BootstrapSplash/index.vue        | 26 ++++++++++++++-----
 .../page/DownloadingDependencies.vue          |  5 ++--
 packages/ui/src/renderer/src/router/index.ts  |  2 +-
 pnpm-lock.yaml                                |  7 +++++
 6 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/packages/ui/package.json b/packages/ui/package.json
index 1a1dbd2..d140552 100644
--- a/packages/ui/package.json
+++ b/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",
diff --git a/packages/ui/src/renderer/src/main.ts b/packages/ui/src/renderer/src/main.ts
index 6ded8fe..dfde866 100644
--- a/packages/ui/src/renderer/src/main.ts
+++ b/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')
diff --git a/packages/ui/src/renderer/src/page/BootstrapSplash/index.vue b/packages/ui/src/renderer/src/page/BootstrapSplash/index.vue
index 5406698..90138c0 100644
--- a/packages/ui/src/renderer/src/page/BootstrapSplash/index.vue
+++ b/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>
 
diff --git a/packages/ui/src/renderer/src/page/BootstrapSplash/page/DownloadingDependencies.vue b/packages/ui/src/renderer/src/page/BootstrapSplash/page/DownloadingDependencies.vue
index b5b4701..fa38189 100644
--- a/packages/ui/src/renderer/src/page/BootstrapSplash/page/DownloadingDependencies.vue
+++ b/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>
diff --git a/packages/ui/src/renderer/src/router/index.ts b/packages/ui/src/renderer/src/router/index.ts
index 9f59f86..79bf65d 100644
--- a/packages/ui/src/renderer/src/router/index.ts
+++ b/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: '正在下载核心组件'
         },
       }
     ]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 340ff28..33fa664 100644
--- a/pnpm-lock.yaml
+++ b/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'}