💄 Optimize userinfo loading process

components/UserMenu.vue

@@ -2,15 +2,12 @@
   <v-menu>
     <template #activator="{ props }">
       <v-btn flat exact v-bind="props" icon>
-        <v-avatar color="transparent" icon="mdi-account-circle" :image="avatar" />
+        <v-avatar v-if="id.isReady" color="transparent" icon="mdi-account-circle" :image="avatar" />
+        <v-progress-circular v-else indeterminate size="20" width="2.5" />
       </v-btn>
     </template>
 
-    <v-list density="compact" v-if="!id.userinfo.isLoggedIn">
-      <v-list-item title="Sign in" prepend-icon="mdi-login-variant" to="/auth/sign-in" />
-      <v-list-item title="Create account" prepend-icon="mdi-account-plus" to="/auth/sign-up" />
-    </v-list>
-    <v-list density="compact" v-else>
+    <v-list density="compact" v-if="id.isLoggedIn">
       <v-list-item :title="nickname" :subtitle="username" />
 
       <v-divider class="border-opacity-50 my-2" />
@@ -18,6 +15,10 @@
       <v-list-item title="Dashboard" prepend-icon="mdi-account-supervisor" exact to="/users/me" />
       <v-list-item title="Sign out" prepend-icon="mdi-logout" @click="signOut"></v-list-item>
     </v-list>
+    <v-list density="compact" v-else>
+      <v-list-item title="Sign in" prepend-icon="mdi-login-variant" to="/auth/sign-in" />
+      <v-list-item title="Create account" prepend-icon="mdi-account-plus" to="/auth/sign-up" />
+    </v-list>
   </v-menu>
 </template>
 
@@ -30,21 +31,21 @@ const config = useRuntimeConfig()
 const id = useUserinfo()
 
 const username = computed(() => {
-  if (id.userinfo.isLoggedIn) {
-    return "@" + id.userinfo.data?.name
+  if (id.isLoggedIn) {
+    return "@" + id.userinfo?.name
   } else {
     return "@visitor"
   }
 })
 const nickname = computed(() => {
-  if (id.userinfo.isLoggedIn) {
-    return id.userinfo.data?.nick
+  if (id.isLoggedIn) {
+    return id.userinfo?.nick
   } else {
     return "Anonymous"
   }
 })
 const avatar = computed(() => {
-  return id.userinfo.data?.avatar ? `${config.public.solarNetworkApi}/cgi/files/attachments/${id.userinfo.data?.avatar}` : void 0
+  return id.userinfo?.avatar ? `${config.public.solarNetworkApi}/cgi/files/attachments/${id.userinfo?.avatar}` : void 0
 })
 
 function signOut() {

lang/en-US.json

@@ -1,6 +1,11 @@
 {
   "brandName": "Solsynth",
   "brandNameFormal": "Solsynth LLC",
+  "navProducts": "Products",
+  "navActivity": "Activity",
+  "navActivityCaption": "Explore our official recent activities.",
+  "navGallery": "Gallery",
+  "navGalleryCaption": "Explore files that uploaded by Solar Network users.",
   "indexIntroduce": "An energetic software company that create wonderful software which everyone love.",
   "indexProductListHint": "See some of our products just there",
   "indexActivities": "Activities",

lang/zh-CN.json

@@ -1,6 +1,11 @@
 {
   "brandName": "索尔辛茨",
   "brandNameFormal": "索尔辛茨实业有限公司",
+  "navProducts": "制品",
+  "navActivity": "动态",
+  "navActivityCaption": "了解我们官方近期的活动。",
+  "navGallery": "相簿",
+  "navGalleryCaption": "探索整个 Solar Network 上的文件。",
   "indexIntroduce": "一家充满活力的软件公司，创造了人人喜爱的精彩软件。",
   "indexProductListHint": "在这里看看我们的一些产品",
   "indexActivities": "动态",

layouts/default.vue

@@ -6,9 +6,9 @@
       </nuxt-link>
 
       <div class="nav-links overflow-y-auto flex">
-        <v-btn variant="text" text="Products" to="/products" exact />
-        <v-btn variant="text" text="Activity" to="/activity" exact />
-        <v-btn variant="text" text="Gallery" to="/gallery" exact />
+        <v-btn variant="text" :text="t('navProducts')" to="/products" exact />
+        <v-btn variant="text" :text="t('navActivity')" to="/activity" exact />
+        <v-btn variant="text" :text="t('navGallery')" to="/gallery" exact />
       </div>
 
       <v-spacer></v-spacer>
@@ -48,7 +48,7 @@
 <script setup lang="ts">
 import Logo from "../assets/logo-w-shadow.png"
 
-const { locale, locales, setLocale } = useI18n()
+const { locale, locales, setLocale, t } = useI18n()
 </script>
 
 <style scoped>

pages/activity/index.vue

@@ -1,8 +1,8 @@
 <template>
   <v-container class="content-container mx-auto">
     <div class="my-3 mx-[3.5ch]">
-      <h1 class="text-2xl">Activity</h1>
-      <span>Explore our official recent activities.</span>
+      <h1 class="text-2xl">{{ t("navActivity") }}</h1>
+      <span>{{ t("navActivityCaption") }}</span>
     </div>
 
     <v-infinite-scroll :items="items" :onLoad="load">
@@ -14,8 +14,18 @@
 </template>
 
 <script setup lang="ts">
+const { t } = useI18n()
+
 useHead({
-  title: 'Activity',
+  title: t("navActivity"),
+})
+
+useSeoMeta({
+  title: t("navActivity"),
+  ogTitle: t("navActivity"),
+  description: t("navActivityCaption"),
+  ogDescription: t("navActivityCaption"),
+  ogType: "website",
 })
 
 const config = useRuntimeConfig()

pages/gallery/index.vue

@@ -1,8 +1,8 @@
 <template>
   <v-container fluid>
     <div class="mt-3 mb-6.5 mx-[3.5ch] text-center">
-      <h1 class="text-2xl">Gallery</h1>
-      <span>Explore files that uploaded by Solar Network users.</span>
+      <h1 class="text-2xl">{{ t("navGallery") }}</h1>
+      <span>{{ t("navGalleryCaption") }}</span>
     </div>
 
     <div class="album">
@@ -18,14 +18,23 @@
 </template>
 
 <script setup lang="ts">
+const { t } = useI18n()
+
 useHead({
-  title: 'Gallery',
+  title: t("navGallery"),
+})
+
+useSeoMeta({
+  title: t("navGallery"),
+  ogTitle: t("navGallery"),
+  description: t("navGalleryCaption"),
+  ogDescription: t("navGalleryCaption"),
+  ogType: "website",
 })
 
 const config = useRuntimeConfig()
 
 const items = ref<any[]>([])
-
 const loading = ref(false)
 
 async function load() {
@@ -39,10 +48,6 @@ async function load() {
   loading.value = false
 }
 
-function getAttachmentUrl(id: number) {
-  return `${config.public.solarNetworkApi}/cgi/files/attachments/${id}`
-}
-
 onMounted(() => {
   load()
 })

pages/users/me.vue

@@ -6,8 +6,8 @@
       <div class="my-5 flex flex-row gap-4">
         <v-avatar :image="urlOfAvatar" />
         <div class="flex flex-col">
-          <span>{{ auth.userinfo.data?.nick }} <span class="text-xs">@{{ auth.userinfo.data?.name }}</span></span>
-          <span class="text-sm">{{ auth.userinfo.data?.description }}</span>
+          <span>{{ auth.userinfo?.nick }} <span class="text-xs">@{{ auth.userinfo?.name }}</span></span>
+          <span class="text-sm">{{ auth.userinfo?.description }}</span>
         </div>
       </div>
 
@@ -51,6 +51,6 @@ const config = useRuntimeConfig()
 
 const auth = useUserinfo()
 
-const urlOfAvatar = computed(() => auth.userinfo.data?.avatar ? `${config.public.solarNetworkApi}/cgi/files/attachments/${auth.userinfo.data.avatar}` : void 0)
-const urlOfBanner = computed(() => auth.userinfo.data?.banner ? `${config.public.solarNetworkApi}/cgi/files/attachments/${auth.userinfo.data.banner}` : void 0)
+const urlOfAvatar = computed(() => auth.userinfo?.avatar ? `${config.public.solarNetworkApi}/cgi/files/attachments/${auth.userinfo.avatar}` : void 0)
+const urlOfBanner = computed(() => auth.userinfo?.banner ? `${config.public.solarNetworkApi}/cgi/files/attachments/${auth.userinfo.banner}` : void 0)
 </script>

stores/userinfo.ts

@@ -27,8 +27,9 @@ export function useLoggedInState() {
 }
 
 export const useUserinfo = defineStore("userinfo", () => {
-  const userinfo = ref(defaultUserinfo)
+  const userinfo = ref<any>(null)
   const isReady = ref(false)
+  const isLoggedIn = ref(false)
 
   const lastRefreshedAt = ref<Date | null>(null)
 
@@ -39,6 +40,7 @@ export const useUserinfo = defineStore("userinfo", () => {
   }
 
   async function getAtk() {
+    if (!useLoggedInState().value) return useAtk().value
     if (lastRefreshedAt.value != null && Math.floor(Math.abs(Date.now() - lastRefreshedAt.value.getTime()) / 60000) < 3) {
       return useAtk().value
     }
@@ -69,23 +71,19 @@ export const useUserinfo = defineStore("userinfo", () => {
       isReady.value = true
     }
 
-    const config = useRuntimeConfig()
-
     const res = await solarFetch("/cgi/auth/users/me")
 
     if (res.status !== 200) {
+      isReady.value = true
       return
     }
 
     const data = await res.json()
 
+    isLoggedIn.value = true
     isReady.value = true
-    userinfo.value = {
-      isLoggedIn: true,
-      displayName: data["nick"],
-      data: data,
-    }
+    userinfo.value = data
   }
 
-  return { userinfo, lastRefreshedAt, isReady, setTokenSet, getAtk, readProfiles }
+  return { userinfo, lastRefreshedAt, isLoggedIn, isReady, setTokenSet, getAtk, readProfiles }
 })