feat: 封装一些函数，补充页面样式

Co-authored-by: Copilot <copilot@github.com>

app/app.vue

@@ -5,13 +5,13 @@ import "vue-sonner/style.css";
 
 const userStore = useUserStore();
 
-onMounted(() => {
+onBeforeMount(() => {
   userStore.getUserInfo();
 });
 </script>
 
 <template>
-  <div class="min-h-dvh">
+  <div class="h-dvh">
     <Toaster position="top-center" />
     <NuxtLayout>
       <NuxtPage />

app/assets/css/element-plus.css

@@ -1,3 +1,6 @@
 :root {
   --el-color-primary: #2563eb !important;
+  --el-border-radius-base: 12px !important;
+  --el-border-radius-small: 8px !important;
+  --el-border-radius-round: 20px !important;
 }

app/components/HeaderCom.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useUserStore } from "~/stores";
+import logo from "~/assets/logo.png";
+
+const userStore = useUserStore();
+const { isOnline } = storeToRefs(userStore);
+</script>
+
+<template>
+  <div class="w-full h-16 flex items-center justify-between border-b px-4">
+    <img
+      :src="logo"
+      alt="AI Art Studio logo"
+      class="h-8 select-none"
+      :class="{
+        'cursor-pointer': $route.path !== '/'
+      }"
+      @click="$router.push('/')"
+    />
+    <div v-if="!$route.path.includes('login')">
+      <el-button v-if="isOnline" @click="userStore.logout()">退出</el-button>
+      <el-button v-else @click="$router.push('/login')">登录</el-button>
+    </div>
+  </div>
+</template>

app/components/login/LogInCom.vue

@@ -36,13 +36,13 @@ const submit = async () => {
   const valid = await formRef.value?.validate().catch(() => false);
   if (!valid) return;
 
-  const response = await userStore.login({
+  const res = await userStore.login({
     username: form.username.trim(),
     password: form.password
   });
 
-  if (response?.code === 0) {
-    emit("success", response);
+  if (res?.code === 0) {
+    emit("success", res);
   }
 };
 

app/components/login/SignUpCom.vue

@@ -87,10 +87,10 @@ const submit = async () => {
     payload.aff_code = form.aff_code.trim();
   }
 
-  const response = await userStore.register(payload);
+  const res = await userStore.register(payload);
 
-  if (response?.code === 0) {
-    emit("success", response);
+  if (res?.code === 0) {
+    emit("success", res);
   }
 };
 

app/layouts/index-view.vue

@@ -1,5 +1,13 @@
 <template>
-  <div>
-    <slot />
-  </div>
+  <main class="w-full h-dvh flex flex-col">
+    <HeaderCom />
+    <div class="min-h-0 flex-1 px-4 overflow-y-auto flex">
+      <div
+        class="w-full"
+        :class="{ 'm-auto  max-w-sm': $route.path.includes('login') }"
+      >
+        <slot />
+      </div>
+    </div>
+  </main>
 </template>

app/layouts/login-view.vue

@@ -1,5 +0,0 @@
-<template>
-  <main class="min-h-dvh w-full flex items-center justify-center p-6">
-    <slot />
-  </main>
-</template>

app/pages/index.vue

@@ -1,4 +1,13 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useUserStore } from "~/stores";
+
+definePageMeta({
+  layout: "index-view"
+});
+
+const userStore = useUserStore();
+const { isOnline } = storeToRefs(userStore);
+</script>
 
 <template>
   <div>123</div>

app/pages/login.vue

@@ -4,7 +4,7 @@ import SignUpCom from "~/components/login/SignUpCom.vue";
 import { useUserStore } from "~/stores";
 
 definePageMeta({
-  layout: "login-view"
+  layout: "index-view"
 });
 
 const route = useRoute();
@@ -21,7 +21,7 @@ watch(isOnline, (online) => {
 </script>
 
 <template>
-  <div class="w-full flex justify-center">
+  <div class="w-full flex justify-center py-4">
     <SignUpCom v-if="isSignUp" />
     <LogInCom v-else />
   </div>