From 756be98229254dedc18cd497550a21a6a0bc8c80 Mon Sep 17 00:00:00 2001
From: Twilight <im@ivampiresp.com>
Date: Tue, 10 Sep 2024 17:14:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E8=BF=9B=20=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E5=92=8C=20Header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                   | 37 ++++++++++++------------------------
 src/components/Container.vue | 10 ++++++----
 src/layouts/Header.vue       | 18 +++++++++---------
 src/main.ts                  | 24 ++++++++++++++++++++++-
 src/stores/user.ts           | 24 +++++++++--------------
 src/style.css                |  6 +++++-
 6 files changed, 64 insertions(+), 55 deletions(-)
diff --git a/index.html b/index.html
index 66bfd00..e197fef 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,10 @@
     <meta charset="UTF-8" />
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />
     <title>amber-wails</title>
-    <style>
-      #default-loader {
-        position: fixed;
+  </head>
+  <body>
+    <div id="app" style="opacity: 1; transition: opacity 0.5s ease-in-out">
+      <div id="default-loader" style="position: fixed;
         top: 0;
         left: 0;
         width: 100%;
@@ -16,51 +17,37 @@
         justify-content: center;
         align-items: center;
         text-align: center;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="app">
-      <div id="default-loader">
+        transition: all 0.3s ease-in-out;">
         <div>
           <svg
-            style="margin: 0 auto"
             version="1.1"
-            id="first-loader"
+            style="margin: 0 auto"
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"
             x="0px"
             y="0px"
             width="40px"
             height="40px"
-            viewBox="0 0 40 40"
-            enable-background="new 0 0 40 40"
+            viewBox="0 0 50 50"
             xml:space="preserve"
           >
             <path
-              opacity="0.2"
               fill="#000"
-              d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
-    s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
-    c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"
-            />
-            <path
-              fill="#000"
-              d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
-    C22.32,8.481,24.301,9.057,26.013,10.047z"
+              d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"
             >
               <animateTransform
                 attributeType="xml"
                 attributeName="transform"
                 type="rotate"
-                from="0 20 20"
-                to="360 20 20"
-                dur="0.5s"
+                from="0 25 25"
+                to="360 25 25"
+                dur="0.6s"
                 repeatCount="indefinite"
               />
             </path>
           </svg>
           <p>Amber AI</p>
+          <small>正在载入</small>
         </div>
       </div>
     </div>
diff --git a/src/components/Container.vue b/src/components/Container.vue
index 7ff5958..3841200 100644
--- a/src/components/Container.vue
+++ b/src/components/Container.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import router from '../plugins/router';
-
-const currentRoute = computed(() => router.currentRoute.value.name)
+// import router from '../plugins/router';
+import Header from "../layouts/Header.vue";
+import { useUserStore } from "../stores/user";
 
+const userStore = useUserStore();
+// const currentRoute = computed(() => router.currentRoute.value.name)
 </script>
 
 <template>
-  <!-- <Header style="min-height: var(--header-height)"></Header> -->
+  <Header v-show="userStore.logined" style="min-height: var(--header-height)"></Header>
 
   <router-view v-slot="{ Component }">
     <transition mode="out-in" name="fade">
diff --git a/src/layouts/Header.vue b/src/layouts/Header.vue
index 9c5ac64..a79b830 100644
--- a/src/layouts/Header.vue
+++ b/src/layouts/Header.vue
@@ -1,23 +1,23 @@
 <template>
-  <n-layout>
+  <n-layout class="select-none">
     <n-layout-header bordered class="layout-header header-height">
       <n-grid cols="2" class="header-height">
         <n-grid-item class="flex items-center justify-start mr-1.5">
-          <div>left</div>
+          <!-- 左侧 -->
+           <p>你好, {{ userStore.user.name }}。</p>
         </n-grid-item>
 
         <n-grid-item class="flex items-center justify-end mr-1.5">
-          <div>right</div>
+          <n-avatar round size="medium" :src="userStore.user.avatar" />
         </n-grid-item>
       </n-grid>
     </n-layout-header>
   </n-layout>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useUserStore } from "../stores/user";
+
+const userStore = useUserStore();
+</script>
 
-<style lang="css" scoped>
-.header-height {
-  min-height: var(--header-height);
-}
-</style>
diff --git a/src/main.ts b/src/main.ts
index 9b74ecd..091b056 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -25,4 +25,26 @@ app.use(pinia);
 app.use(naive);
 app.use(router);
 
-app.mount("#app");
+// @ts-ignore ...
+if (process.env.NODE_ENV === "production") {
+  setTimeout(() => {
+    const appContainer = document.getElementById("app");
+    if (appContainer) {
+      appContainer.style.opacity = "0";
+    }
+    setTimeout(() => {
+      const defaultLoader = document.getElementById("default-loader");
+      // remove
+      defaultLoader?.remove();
+    }, 300);
+
+    setTimeout(() => {
+      app.mount("#app");
+    }, 300);
+    setTimeout(() => {
+      appContainer!.style.opacity = "1";
+    }, 300);
+  }, 200);
+} else {
+  app.mount("#app");
+}
diff --git a/src/stores/user.ts b/src/stores/user.ts
index 43f84f3..48477b0 100644
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@@ -17,6 +17,7 @@ export const useUserStore = defineStore("user", {
       id: 0,
       name: "",
       email: "",
+      avatar: "",
     },
     timer: 0,
   }),
@@ -25,7 +26,7 @@ export const useUserStore = defineStore("user", {
       idToken: string,
       accessToken: string,
       refreshToken: string,
-      expiredAt: number,
+      expiredAt: number
     ) {
       const idTokenParts = idToken.split(".");
 
@@ -38,9 +39,7 @@ export const useUserStore = defineStore("user", {
       this.access_token = accessToken;
 
       this.id_token = idToken;
-      this.user.email = idTokenPayload.email;
-      this.user.name = idTokenPayload.name;
-      this.user.id = idTokenPayload.sub;
+      this.user = { ...idTokenPayload };
       this.logined = true;
     },
     checkAndRefresh() {
@@ -74,7 +73,7 @@ export const useUserStore = defineStore("user", {
             response.data.id_token,
             response.data.access_token,
             response.data.refresh_token,
-            response.data.expires_in,
+            response.data.expires_in
           );
         })
         .catch((error) => {
@@ -88,15 +87,10 @@ export const useUserStore = defineStore("user", {
         });
     },
     logout() {
-      this.user = {
-        id: 0,
-        name: "",
-        email: "",
-      };
-
-      this.id_token = "";
-      this.logined = false;
-    }
+      this.$reset();
+      this.user = this.$state.user;
+      this.id_token = this.$state.id_token;
+      this.logined = this.$state.logined;
+    },
   },
 });
-
diff --git a/src/style.css b/src/style.css
index 68a28a8..ff56dc0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -3,5 +3,9 @@
 @tailwind utilities;
 
 body {
-  --header-height: 32px;
+  --header-height: 48px;
+}
+
+.header-height {
+  min-height: var(--header-height);
 }
