✨ Recommend app component

.idea/workspace.xml

@@ -5,7 +5,11 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="3fefb2c4-b6f9-466b-a523-53352e8d6f95" name="更改" comment=":recycle: OAuth authenticate">
-      <change beforePath="$PROJECT_DIR$/web/src/views/auth/authorize.vue" beforeDir="false" afterPath="$PROJECT_DIR$/web/src/views/auth/authorize.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/web/src/components/GoUseSolian.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/web/src/components/navigation/AppBar.vue" beforeDir="false" afterPath="$PROJECT_DIR$/web/src/components/navigation/AppBar.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/web/src/layouts/user-center.vue" beforeDir="false" afterPath="$PROJECT_DIR$/web/src/layouts/user-center.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/web/src/views/personalize.vue" beforeDir="false" afterPath="$PROJECT_DIR$/web/src/views/personalize.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -130,7 +134,7 @@
                   <entry key="branch">
                     <value>
                       <list>
-                        <option value="master" />
+                        <option value="refactor/v2" />
                       </list>
                     </value>
                   </entry>

web/src/components/GoUseSolian.vue

@@ -0,0 +1,19 @@
+<template>
+  <v-card prepend-icon="mdi-cellphone-arrow-down-variant" title="Try the App">
+    <v-card-text>
+      <p>
+        Some features on Solarpass web was incomplete.
+        Go try out our brand-new all-in-one Solar Network application now!
+      </p>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn prepend-icon="mdi-launch" href="https://lian.solsynth.dev" target="_blank">
+        Open in browser
+      </v-btn>
+      <v-btn prepend-icon="mdi-download" href="https://git.solsynth.dev/Hydrogen/Solian/releases" target="_blank"
+             color="teal">
+        Download now
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>

web/src/components/navigation/AppBar.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app-bar height="64" color="primary" scroll-behavior="elevate" flat>
     <div class="max-md:px-5 md:px-12 flex flex-grow-1 items-center">
-      <router-link :to="{ name: 'dashboard' }" class="flex gap-1">
+      <router-link :to="{ name: 'dashboard' }" class="flex gap-1 ms-0.5">
         <img src="/favicon.png" alt="logo" width="27" height="24" class="icon-filter" />
         <h2 class="ml-2 text-lg font-500">Solarpass</h2>
       </router-link>

web/src/layouts/user-center.vue

@@ -25,6 +25,6 @@ import Copyright from "@/components/Copyright.vue"
 
 <style scoped>
 .p-container {
-  max-width: 64rem;
+  max-width: 40rem;
 }
 </style>

web/src/views/personalize.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
-    <v-card class="mb-3" title="Information" prepend-icon="mdi-face-man-profile" :loading="loading">
+    <GoUseSolian class="mb-3" />
+
+    <v-card title="Information" prepend-icon="mdi-face-man-profile" :loading="loading">
       <template #text>
         <v-form class="mt-1" @submit.prevent="submit">
           <v-row dense>
@@ -37,22 +39,6 @@
       </template>
     </v-card>
 
-    <v-card>
-      <v-card-text class="flex items-center gap-3">
-        <v-avatar color="grey-lighten-2" icon="mdi-account-circle" class="rounded-card" size="large"
-          :image="'/api/avatar/' + id.userinfo.data.avatar" />
-        <v-file-input clearable hide-details label="Upload another avatar" variant="outlined" density="comfortable"
-          accept="image/*" prepend-icon="" append-icon="mdi-upload" v-model="avatar" @click:append="applyAvatar" />
-      </v-card-text>
-
-      <v-img cover class="bg-grey-lighten-2" :height="320" :src="'/api/avatar/' + id.userinfo.data.banner" />
-
-      <v-card-text>
-        <v-file-input clearable hide-details label="Update your banner" variant="outlined" density="comfortable"
-          accept="image/*" prepend-icon="" append-icon="mdi-upload" v-model="banner" @click:append="applyBanner" />
-      </v-card-text>
-    </v-card>
-
     <v-snackbar v-model="done" :timeout="3000"> Your personal information has been updated. </v-snackbar>
 
     <!-- @vue-ignore -->
@@ -64,6 +50,7 @@
 import { ref, watch } from "vue"
 import { useUserinfo, getAtk } from "@/stores/userinfo"
 import { request } from "@/scripts/request"
+import GoUseSolian from "@/components/GoUseSolian.vue"
 
 const id = useUserinfo()