Leaf/amber-ui
5
0
Fork 1
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

改进 动画和 Header

Browse Source
This commit is contained in:
Twilight 2024-09-10 17:14:27 +08:00
parent 5dc14dd061
commit 756be98229
6 changed files with 64 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@ -4,9 +4,10 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" /> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>amber-wails</title> <title>amber-wails</title>
<style> </head>
#default-loader { <body>
position: fixed; <div id="app" style="opacity: 1; transition: opacity 0.5s ease-in-out">
<div id="default-loader" style="position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
@ -16,51 +17,37 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
} transition: all 0.3s ease-in-out;">
</style>
</head>
<body>
<div id="app">
<div id="default-loader">
<div> <div>
<svg <svg
style="margin: 0 auto"
version="1.1" version="1.1"
id="first-loader" style="margin: 0 auto"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" x="0px"
y="0px" y="0px"
width="40px" width="40px"
height="40px" height="40px"
viewBox="0 0 40 40" viewBox="0 0 50 50"
enable-background="new 0 0 40 40"
xml:space="preserve" xml:space="preserve"
> >
<path <path
opacity="0.2"
fill="#000" 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 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"
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"
> >
<animateTransform <animateTransform
attributeType="xml" attributeType="xml"
attributeName="transform" attributeName="transform"
type="rotate" type="rotate"
from="0 20 20" from="0 25 25"
to="360 20 20" to="360 25 25"
dur="0.5s" dur="0.6s"
repeatCount="indefinite" repeatCount="indefinite"
/> />
</path> </path>
</svg> </svg>
<p>Amber AI</p> <p>Amber AI</p>
<small>正在载入</small>
</div> </div>
</div> </div>
</div> </div>

10
src/components/Container.vue
View File

@ -1,12 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import router from '../plugins/router'; // import router from '../plugins/router';
import Header from "../layouts/Header.vue";
const currentRoute = computed(() => router.currentRoute.value.name) import { useUserStore } from "../stores/user";
const userStore = useUserStore();
// const currentRoute = computed(() => router.currentRoute.value.name)
</script> </script>
<template> <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 }"> <router-view v-slot="{ Component }">
<transition mode="out-in" name="fade"> <transition mode="out-in" name="fade">

18
src/layouts/Header.vue
View File

@ -1,23 +1,23 @@
<template> <template>
<n-layout> <n-layout class="select-none">
<n-layout-header bordered class="layout-header header-height"> <n-layout-header bordered class="layout-header header-height">
<n-grid cols="2" class="header-height"> <n-grid cols="2" class="header-height">
<n-grid-item class="flex items-center justify-start mr-1.5"> <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>
<n-grid-item class="flex items-center justify-end mr-1.5"> <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-item>
</n-grid> </n-grid>
</n-layout-header> </n-layout-header>
</n-layout> </n-layout>
</template> </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>

22
src/main.ts
View File

@ -25,4 +25,26 @@ app.use(pinia);
app.use(naive); app.use(naive);
app.use(router); app.use(router);
// @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"); app.mount("#app");
}, 300);
setTimeout(() => {
appContainer!.style.opacity = "1";
}, 300);
}, 200);
} else {
app.mount("#app");
}

24
src/stores/user.ts
View File

@ -17,6 +17,7 @@ export const useUserStore = defineStore("user", {
id: 0, id: 0,
name: "", name: "",
email: "", email: "",
avatar: "",
}, },
timer: 0, timer: 0,
}), }),
@ -25,7 +26,7 @@ export const useUserStore = defineStore("user", {
idToken: string, idToken: string,
accessToken: string, accessToken: string,
refreshToken: string, refreshToken: string,
expiredAt: number, expiredAt: number
) { ) {
const idTokenParts = idToken.split("."); const idTokenParts = idToken.split(".");
@ -38,9 +39,7 @@ export const useUserStore = defineStore("user", {
this.access_token = accessToken; this.access_token = accessToken;
this.id_token = idToken; this.id_token = idToken;
this.user.email = idTokenPayload.email; this.user = { ...idTokenPayload };
this.user.name = idTokenPayload.name;
this.user.id = idTokenPayload.sub;
this.logined = true; this.logined = true;
}, },
checkAndRefresh() { checkAndRefresh() {
@ -74,7 +73,7 @@ export const useUserStore = defineStore("user", {
response.data.id_token, response.data.id_token,
response.data.access_token, response.data.access_token,
response.data.refresh_token, response.data.refresh_token,
response.data.expires_in, response.data.expires_in
); );
}) })
.catch((error) => { .catch((error) => {
@ -88,15 +87,10 @@ export const useUserStore = defineStore("user", {
}); });
}, },
logout() { logout() {
this.user = { this.$reset();
id: 0, this.user = this.$state.user;
name: "", this.id_token = this.$state.id_token;
email: "", this.logined = this.$state.logined;
}; },
this.id_token = "";
this.logined = false;
}
}, },
}); });

6
src/style.css
View File

@ -3,5 +3,9 @@
@tailwind utilities; @tailwind utilities;
body { body {
--header-height: 32px; --header-height: 48px;
}
.header-height {
min-height: var(--header-height);
} }