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 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>

10
src/components/Container.vue
View File

@ -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">

18
src/layouts/Header.vue
View File

@ -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>

24
src/main.ts
View File

@ -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");
}

24
src/stores/user.ts
View File

@ -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;
},
},
});

6
src/style.css
View File

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